/* Foto Vondruska — design system */

:root{
  --bg: #08080c;
  --bg-alt: #06060a;
  --text: #f4f4f6;
  --text-2: #cfcfd8;
  --text-3: #9f9fac;
  --text-4: #7c7c8a;
  --magenta: #f50fff;
  /* Dunkleres Magenta nur als FLAECHE hinter weisser Schrift.
     Auf dem hellen #f50fff erreicht Weiss nur 3.28:1 und ist damit
     zu schwach; auf #c40ccc sind es 4.92:1. Als Schriftfarbe auf
     dunklem Grund bleibt --magenta unveraendert (6.09:1). */
  --magenta-btn: #c40ccc;
  --magenta-btn-hover: #b80bbf;
  --blue: #2844fb;
  /* Von der Kundin gewaehlt (11.08.2026, Variante B). Der vorherige Ton
     #6f86ff stach ins Lila. Kontrast auf dem Seitenhintergrund 7,45:1,
     also besser als vorher (6,22:1). */
  --blue-light: #3fa2ff;
  --yellow: #f7dd04;
  --green: #25d366;
  --border: rgba(255,255,255,0.1);
  --border-soft: rgba(255,255,255,0.07);
  --card: rgba(255,255,255,0.03);
  --card-2: rgba(255,255,255,0.04);
  --radius: 20px;
  --radius-sm: 14px;
  --font-display: "Space Grotesk", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
/* Bilder tragen jetzt width/height im HTML, damit der Browser ihren Platz
   kennt, bevor sie geladen sind. height:auto haelt das Seitenverhaeltnis –
   ohne diese Zeile wuerden die Maßangaben die Bilder verzerren. */
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ list-style:none; }
.container{ max-width:73.75rem; margin:0 auto; padding:0 1.5rem; }
section{ position:relative; }

h1,h2,h3,h4{ font-family:var(--font-display); font-weight:600; line-height:1.08; letter-spacing:-0.01em; }

.eyebrow{
  display:inline-flex; align-items:center; gap:0.5rem;
  font-size:0.75rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase;
  color:var(--text-3);
}
.badge-pill{
  display:inline-block; padding:0.5rem 1.125rem; border:1px solid var(--border);
  border-radius:999px; font-size:0.75rem; font-weight:600; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-2); background:var(--card);
}

/* Buttons */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:0.5rem;
  padding:0.875rem 1.75rem; border-radius:999px; font-family:var(--font-body);
  font-weight:600; font-size:0.9375rem; border:1px solid transparent; cursor:pointer;
  transition:transform .15s ease, background .15s ease, border-color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn-magenta{ background:var(--magenta-btn); color:#fff; }
.btn-magenta:hover{ background:var(--magenta-btn-hover); }
.btn-yellow{ background:var(--yellow); color:#08080c; }
.btn-yellow:hover{ background:#ffe94d; }
.btn-outline{ background:transparent; border-color:var(--border); color:var(--text); }
.btn-outline:hover{ border-color:rgba(255,255,255,0.3); }
.btn-pill{ padding:0.75rem 1.5rem; font-size:0.875rem; }
.btn-block{ width:100%; }

/* Header */
.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(8,8,12,0.86); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-soft);
}
.header-inner{ display:flex; align-items:center; gap:2rem; height:76px; }
.brand{ display:flex; align-items:center; gap:0.75rem; margin-right:auto; }
.brand-name{ font-family:var(--font-display); font-weight:700; font-size:1rem; letter-spacing:0.06em; }
.main-nav{ display:flex; align-items:center; gap:1.75rem; }
.main-nav a{
  font-size:0.9062rem; font-weight:500; color:var(--text-2); padding-bottom:0.25rem;
  border-bottom:2px solid transparent; transition:color .15s ease, border-color .15s ease;
  white-space:nowrap;
}
.main-nav a:hover{ color:var(--text); }
.main-nav a.active{ color:var(--text); border-bottom-color:var(--magenta); }
.header-cta{ margin-left:0.5rem; }
.mobile-nav-toggle{ display:none; flex-direction:column; gap:0.3125rem; background:none; border:none; cursor:pointer; padding:0.5rem; }
.mobile-nav-toggle span{ width:22px; height:2px; background:var(--text); display:block; }
.mobile-nav{ display:none; flex-direction:column; padding:0.5rem 1.5rem 1.25rem; border-top:1px solid var(--border-soft); }
.mobile-nav a{ padding:0.75rem 0; font-size:0.9375rem; color:var(--text-2); border-bottom:1px solid var(--border-soft); }
.mobile-nav a.active{ color:var(--magenta); }
.mobile-nav.open{ display:flex; }

@media (max-width: 55em){
  .main-nav, .header-cta{ display:none; }
  .mobile-nav-toggle{ display:flex; }
}

/* Hero */
.hero{
  padding:6.875rem 0 5.625rem;
  background:
    radial-gradient(ellipse 900px 600px at 8% 0%, rgba(150,20,190,0.35), transparent 60%),
    radial-gradient(ellipse 800px 700px at 100% 30%, rgba(30,40,140,0.45), transparent 60%),
    var(--bg);
  text-align:center;
}
.hero .badge-pill{ margin-bottom:1.75rem; }
.hero h1{ font-size:clamp(2.5rem, 7vw, 4.75rem); margin-bottom:1.75rem; }
.hero h1 .line-magenta{ color:var(--magenta); }
.hero h1 .line-blue{ color:var(--blue-light); }
.hero h1 .line-yellow{ color:var(--yellow); }
.hero p{ max-width:40rem; margin:0 auto 2.25rem; color:var(--text-2); font-size:1.0625rem; }
.hero-actions{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; }

.page-hero{
  padding:6rem 0 3.75rem;
  background:
    radial-gradient(ellipse 900px 500px at 90% 0%, rgba(120,30,170,0.35), transparent 60%),
    var(--bg);
}
.page-hero .eyebrow{ margin-bottom:1.125rem; }
.page-hero h1{ font-size:clamp(2rem, 5.4vw, 3.375rem); max-width:51.25rem; }
.page-hero h1 .accent-magenta{ color:var(--magenta); }
.page-hero h1 .accent-blue{ color:var(--blue-light); }
.page-hero h1 .accent-yellow{ color:var(--yellow); }
.page-hero p.lede{ max-width:40rem; margin-top:1.375rem; color:var(--text-2); font-size:1.0625rem; }

/* Welcome / about */
.welcome{
  padding:6.25rem 0;
  position:relative;
  overflow:hidden;
}
.welcome::before{
  content:""; position:absolute; top:-120px; left:50%; transform:translateX(-60%);
  width:700px; height:700px; border-radius:50%; pointer-events:none;
  background:radial-gradient(circle, rgba(245,15,255,0.10), transparent 65%);
}
.welcome-inner{ position:relative; display:grid; grid-template-columns:1.15fr 0.85fr; gap:3.75rem; align-items:center; }
/* Einspaltig ab Tablet abwaerts. Das Portraet steht mittig und waechst
   prozentual mit – vorher klebte es links an der Kante und liess auf einem
   768er Tablet rechts eine grosse Leerflaeche stehen. */
@media (max-width: 56.25em){
  .welcome-inner{ grid-template-columns:1fr; gap:2.5rem; }
  .welcome-photo-wrap{ order:-1; width:min(70%, 26rem); margin-inline:auto; }
}
@media (max-width: 35em){
  .welcome-photo-wrap{ width:100%; }
}

.welcome-photo-wrap{ position:relative; }
.welcome-photo{
  position:relative; aspect-ratio:4/5; border-radius:24px; overflow:hidden;
  border:1px solid var(--border-soft);
  background:linear-gradient(160deg, rgba(245,15,255,0.16), rgba(40,68,251,0.16));
  box-shadow:-30px 22px 90px -20px rgba(245,15,255,0.35), 30px -14px 90px -20px rgba(247,221,4,0.28);
}
.welcome-photo img{ width:100%; height:100%; object-fit:cover; }
.welcome-photo .cms-image-placeholder{ min-height:100%; }
/* Fotonachweis unter dem Bild: zurueckhaltend, aber lesbar. Bewusst NICHT
   ins Bild gelegt – ueber einem Foto ist kein Kontrast garantiert, je nach
   Motiv verschwindet die Zeile. */
.foto-credit{
  margin-top:0.625rem; text-align:right; font-size:0.75rem; line-height:1.4;
  color:var(--text-4); letter-spacing:0.02em;
  /* Rechnerisch sitzt die Zeile buendig zur Bildkante. Weil die untere Ecke
     des Bildes aber mit 24px Radius wegrundet, wirkt sie dort ueberstehend.
     Ein Prozent Einzug gleicht das optisch aus (Wunsch der Kundin). */
  padding-right:1%;
}
.foto-credit-leer{ text-align:left; padding-right:0; }
.foto-credit-label{
  display:block; font-size:0.6875rem; text-transform:uppercase;
  letter-spacing:0.12em; color:var(--magenta); margin-bottom:2px;
}

.welcome .eyebrow{ margin-bottom:1rem; display:block; }
.welcome h2{
  font-size:clamp(1.5rem, 3.2vw, 2rem); font-family:var(--font-display);
  max-width:35rem; margin-bottom:1.875rem; text-transform:uppercase; line-height:1.25;
}
.welcome-text{ display:flex; flex-direction:column; gap:1.25rem; max-width:38.75rem; }
.welcome-text p{ color:var(--text-2); font-size:1rem; margin:0; }
.welcome-text strong{ color:var(--text); font-weight:700; }
.welcome-text strong.accent-yellow-strong{ color:var(--yellow); }

/* Services grid (home) */
.services{ padding:4.375rem 0 5.625rem; }
.services-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:2.75rem; }
.services-head .eyebrow{ display:block; margin-bottom:0.875rem; }
.services-head h2{ font-size:clamp(1.5rem, 3.4vw, 2.125rem); max-width:37.5rem; }
.services-head .link-arrow{ color:var(--text-2); font-weight:600; font-size:0.9062rem; white-space:nowrap; }
.services-head .link-arrow:hover{ color:var(--text); }

.card-grid-4{ display:grid; grid-template-columns:repeat(4, 1fr); gap:1.25rem; }
@media (max-width: 61.25em){ .card-grid-4{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 35em){ .card-grid-4{ grid-template-columns:1fr; } }

.service-card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:1.75rem 1.5rem; display:flex; flex-direction:column; height:100%;
}
.service-card .num{ font-family:var(--font-display); font-size:0.8125rem; color:var(--text-4); margin-bottom:1.375rem; }
.service-card h3{
  font-size:1.3125rem; margin-bottom:0.75rem; min-height:1.3em;
}
/* margin-top:auto hatte den Text an den unteren Kartenrand geschoben.
   Bei der kuerzesten Kachel (Coachings) sass er dadurch eine Zeile
   tiefer als bei den anderen. Jetzt schliesst der Text direkt an die
   Ueberschrift an und alle vier Kacheln beginnen auf gleicher Hoehe. */
.service-card p{ color:var(--text-3); font-size:0.9062rem; }

.packages-banner{
  margin-top:3.75rem; border-radius:var(--radius); border:1px solid var(--border-soft);
  padding:3rem 2.5rem; background:linear-gradient(120deg, rgba(245,15,255,0.1), rgba(40,68,251,0.12));
  text-align:center;
}
.packages-banner h3{ font-size:clamp(1.375rem,2.8vw,1.875rem); max-width:40rem; margin:0 auto 0.875rem; }
.packages-banner p{ color:var(--text-2); max-width:32.5rem; margin:0 auto 1.625rem; font-size:0.9375rem; }

/* Preview cards (Ausstellungen / Beispielfotos on home) */
.preview-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:stretch; margin-top:4.375rem; }
@media (max-width: 48.75em){ .preview-grid{ grid-template-columns:1fr; } }
.preview-card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:2.25rem; display:flex; flex-direction:column; min-height:13.75rem;
}
.preview-card .eyebrow{ margin-bottom:1rem; }
.preview-card h3{ font-size:1.5rem; min-height:2.2em; display:flex; align-items:flex-start; margin-bottom:0.875rem; }
.preview-card p{ color:var(--text-3); font-size:0.9062rem; margin-top:auto; }
.preview-card .arrow{ color:var(--magenta); font-weight:600; }

/* Generic 2-col box grid (Dienstleistungen: Kaufberatung / Studio&mobil) */
.box-grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:stretch; }
@media (max-width: 48.75em){ .box-grid-2{ grid-template-columns:1fr; } }
.info-box{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:2rem; display:flex; flex-direction:column;
}
.info-box h2, .info-box h3{ font-size:1.25rem; min-height:1.4em; display:flex; align-items:flex-start; margin-bottom:0.875rem; }
.info-box p{ color:var(--text-3); font-size:0.9375rem; }

/* Dienstleistungen page */
.dienst-hero-actions{ margin-top:2.125rem; }
.dienst-list{ padding:0 0 1.875rem; }
.dienst-item{
  display:grid; grid-template-columns:64px 1fr; gap:1.375rem; padding:1.75rem 0; border-top:1px solid var(--border-soft);
}
.dienst-item:last-child{ border-bottom:1px solid var(--border-soft); }
.dienst-item .letter{ font-family:var(--font-display); font-size:1.625rem; color:var(--magenta); }
.dienst-item h2, .dienst-item h3{ font-size:1.3125rem; margin-bottom:0.5rem; }
.dienst-item p{ color:var(--text-3); font-size:0.9375rem; max-width:40rem; }

.cta-strip{
  margin:3.125rem 0; padding:2.25rem; border-radius:var(--radius); border:1px solid var(--border-soft);
  background:var(--card); display:flex; align-items:center; justify-content:space-between; gap:1.25rem; flex-wrap:wrap;
}
.cta-strip p{ font-size:1.0625rem; max-width:35rem; }

.cancel-section{ padding:4.375rem 0 6.25rem; }
.cancel-table{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.25rem; margin:2.125rem 0 1.625rem; }
@media (max-width: 48.75em){ .cancel-table{ grid-template-columns:1fr; } }
.cancel-cell{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius-sm);
  padding:1.625rem; text-align:center;
}
.cancel-cell .pct{ font-family:var(--font-display); font-size:2.125rem; color:var(--yellow); }
.cancel-cell .label{ color:var(--text-3); font-size:0.8438rem; margin-bottom:0.625rem; }
.cancel-cell .time{ font-size:0.875rem; color:var(--text-2); border-top:1px solid var(--border-soft); padding-top:0.75rem; margin-top:0.375rem; }
.cancel-note{ color:var(--text-4); font-size:0.8438rem; max-width:47.5rem; }

/* Kurse & Termine page */
.kurse-intro{ padding:0 0 4.375rem; }
.kurse-cols{ display:grid; grid-template-columns:1.6fr 1fr; gap:2.25rem; align-items:start; }
@media (max-width: 56.25em){ .kurse-cols{ grid-template-columns:1fr; } }
.kurse-cols p{ color:var(--text-2); margin-bottom:1.125rem; font-size:0.9688rem; }
.stat-box{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:1.875rem;
}
.stat-box .stat-num{ font-family:var(--font-display); font-size:2.375rem; color:var(--yellow); margin-bottom:0.375rem; }
.stat-box h2, .stat-box h4{ font-size:1.125rem; margin-bottom:0.625rem; }
.stat-box p{ color:var(--text-3); font-size:0.9062rem; }

.highlight-band{ padding:3.75rem 0; }
.highlight-card{
  border-radius:var(--radius); border:1px solid var(--border-soft); padding:2.25rem;
  background:linear-gradient(120deg, rgba(245,15,255,0.07), rgba(40,68,251,0.09));
  margin-bottom:1.5rem;
}
.highlight-card .tag{ margin-bottom:1rem; }
.highlight-card h3{ font-size:clamp(1.25rem,2.6vw,1.625rem); margin-bottom:0.625rem; letter-spacing:0.02em; }
.highlight-card .subtitle{ font-size:1rem; color:var(--text-2); margin-bottom:0.875rem; font-weight:600; }
.highlight-card p{ color:var(--text-3); font-size:0.9375rem; max-width:47.5rem; }
.highlight-card .btn{ margin-top:1.25rem; }

.dates-section{ padding:1.25rem 0 4.375rem; }
.dates-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.25rem; margin:1.875rem 0 2.125rem; }
@media (max-width: 48.75em){ .dates-grid{ grid-template-columns:1fr; } }
.date-card{
  border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden; background:var(--card);
}
.date-card .date-img{ aspect-ratio:16/9; }
.date-card .date-body{ padding:1.375rem; }
.date-card .date-when{ color:var(--magenta); font-size:0.8125rem; font-weight:600; letter-spacing:0.04em; margin-bottom:0.5rem; }
.date-card h3, .date-card h4{ font-size:1.1875rem; margin-bottom:0.375rem; }
.date-card .place{ color:var(--text-3); font-size:0.875rem; }
.signup-note{ color:var(--text-3); font-size:0.9062rem; }
.signup-note a{ color:var(--text); font-weight:600; border-bottom:1px solid var(--border); }

.pricing-section{ padding:1.25rem 0 6.25rem; }
.pricing-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; align-items:stretch; }
@media (max-width: 51.25em){ .pricing-grid{ grid-template-columns:1fr; } }
.pricing-card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius);
  padding:2rem; display:flex; flex-direction:column; height:100%;
}
.pricing-card h3{ font-size:1.3125rem; margin-bottom:0.625rem; }
.pricing-card > p{ color:var(--text-3); font-size:0.9062rem; margin-bottom:1.375rem; }
.price-row{ display:flex; align-items:center; justify-content:space-between; padding:0.875rem 0; border-top:1px solid var(--border-soft); }
.price-row:last-of-type{ border-bottom:1px solid var(--border-soft); }
.price-row .label{ font-size:0.9062rem; color:var(--text-2); }
.price-row .price{ font-family:var(--font-display); font-weight:600; color:var(--yellow); font-size:1rem; white-space:nowrap; }
.pricing-note{ margin-top:auto; padding-top:1.25rem; color:var(--text-3); font-size:0.875rem; }

/* Beispielfotos gallery */
.gallery-section{ padding:0 0 6.25rem; }
.gallery-masonry{ column-count:3; column-gap:1.25rem; margin-top:1.25rem; }
@media (max-width: 56.25em){ .gallery-masonry{ column-count:2; } }
@media (max-width: 35em){ .gallery-masonry{ column-count:1; } }
.gallery-item{
  break-inside:avoid; margin-bottom:1.25rem; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--border-soft); background:var(--card); position:relative;
}
.gallery-item img{ width:100%; display:block; transition:transform .35s ease; }
.gallery-item a{ display:block; }
.gallery-item a:hover img{ transform:scale(1.04); }
.gallery-item .overlay{
  position:absolute; inset:0; display:flex; align-items:flex-end; padding:1rem;
  background:linear-gradient(to top, rgba(0,0,0,0.55), transparent 55%);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.gallery-item a:hover .overlay{ opacity:1; }
.overlay .inquire-label{ color:#fff; font-size:0.8125rem; font-weight:600; display:inline-flex; align-items:center; gap:0.375rem; }

/* Ausstellungen */
.exhibit-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:1.5rem; margin-top:1.875rem; }
@media (max-width: 48.75em){ .exhibit-grid{ grid-template-columns:1fr; } }
.exhibit-card{
  border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden; background:var(--card);
}
.exhibit-card .exhibit-img{ aspect-ratio:16/10; }
.exhibit-card .exhibit-body{ padding:1.5rem; }
.exhibit-card .tag{ color:var(--blue-light); font-size:0.75rem; font-weight:700; letter-spacing:0.1em; margin-bottom:0.625rem; display:block; }
.exhibit-card h2, .exhibit-card h3{ font-size:1.25rem; margin-bottom:0.5rem; }
.exhibit-card p{ color:var(--text-3); font-size:0.9062rem; }
.exhibit-note{ margin-top:2.125rem; color:var(--text-4); font-size:0.8438rem; }

/* CMS image placeholder / wrap */
.cms-image-wrap{ position:relative; width:100%; height:100%; }
.cms-image-wrap img{ width:100%; height:100%; object-fit:cover; }
.cms-image-placeholder{
  width:100%; height:100%; min-height:10rem; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, rgba(245,15,255,0.08), rgba(40,68,251,0.1));
  color:var(--text-4); font-size:0.75rem; font-weight:700; letter-spacing:0.12em;
}
.cms-image-edit-btn{
  position:absolute; inset:0; width:100%; height:100%; border:2px dashed rgba(245,15,255,0.6);
  background:rgba(8,8,12,0.55); color:#fff; font-family:var(--font-body); font-size:0.8125rem; font-weight:600;
  display:flex; align-items:center; justify-content:center; gap:0.5rem; cursor:pointer; opacity:0; transition:opacity .15s ease;
}
.cms-image-wrap:hover .cms-image-edit-btn{ opacity:1; }

/* Kontakt page */
.contact-section{ padding:4.375rem 0 5.625rem; }
.contact-grid{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:1.5rem; align-items:start; margin-top:2.5rem; }
@media (max-width: 56.25em){ .contact-grid{ grid-template-columns:1fr; } }
.contact-card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:2.125rem;
}
.contact-card h2, .contact-card h3{ font-size:1.375rem; margin-bottom:0.25rem; }
.contact-card .role{ color:var(--text-3); font-size:0.9062rem; margin-bottom:1.625rem; }
.contact-row{ display:flex; align-items:center; gap:0.875rem; padding:0.875rem 0; border-top:1px solid var(--border-soft); }
.contact-row .icon{
  width:40px; height:40px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.125rem; flex-shrink:0;
}
.icon-phone{ background:rgba(245,15,255,0.14); color:var(--magenta); }
/* Hintergrund im selben Farbton wie das Symbol – der alte Violettstich
   passte nicht mehr zum neuen Blau. */
.icon-mail{ background:rgba(63,162,255,0.16); color:var(--blue-light); }
.icon-whatsapp{ background:rgba(37,211,102,0.16); color:var(--green); }
.icon-social{ background:rgba(247,221,4,0.14); color:var(--yellow); }
.contact-row .meta-label{ font-size:0.7188rem; letter-spacing:0.1em; color:var(--text-4); text-transform:uppercase; margin-bottom:2px; }
.contact-row .meta-value{ font-size:0.9375rem; font-weight:600; }

.form-card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:2.125rem;
}
.form-card h2, .form-card h3{ font-size:1.375rem; margin-bottom:1.375rem; }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; margin-bottom:1rem; }
@media (max-width: 35em){ .form-row{ grid-template-columns:1fr; } }
.form-field label{ display:block; font-size:0.8125rem; color:var(--text-3); margin-bottom:0.5rem; }
.form-field input, .form-field textarea{
  width:100%; background:rgba(255,255,255,0.03); border:1px solid var(--border); border-radius:10px;
  padding:0.8125rem 0.875rem; color:var(--text); font-family:var(--font-body); font-size:0.9062rem;
}
.form-field textarea{ min-height:7.5rem; resize:vertical; }
.form-field input::placeholder, .form-field textarea::placeholder{ color:var(--text-4); }
.form-field input:focus, .form-field textarea:focus{ border-color:var(--magenta); }
.form-note{ margin-top:1rem; font-size:0.8125rem; color:var(--text-4); }
.form-success{ margin-top:1rem; font-size:0.875rem; color:var(--green); }

.legal-section{ padding:1.25rem 0 6.25rem; }
.legal-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.5rem; margin-top:1rem; }
@media (max-width: 56.25em){ .legal-grid{ grid-template-columns:1fr; } }
.legal-card{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:1.875rem;
}
.legal-card h2, .legal-card h3{ font-size:0.9375rem; letter-spacing:0.08em; margin-bottom:1rem; color:var(--text-3); }
.legal-card h4{ font-size:0.9375rem; margin:1rem 0 0.375rem; }
.legal-card p{ color:var(--text-3); font-size:0.875rem; margin-bottom:0.625rem; white-space:pre-line; }
.legal-card .subtitle{ color:var(--text-4); font-size:0.8125rem; margin-bottom:1rem; }

/* Bild-Anfrage subpage */
.inquiry-section{ padding:5.625rem 0 6.875rem; }
.inquiry-wrap{ display:grid; grid-template-columns:0.9fr 1.1fr; gap:2.25rem; align-items:start; }
@media (max-width: 53.75em){ .inquiry-wrap{ grid-template-columns:1fr; } }
.inquiry-photo{ border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-soft); }
.inquiry-photo img{ width:100%; }
.back-link{ display:inline-flex; align-items:center; gap:0.5rem; color:var(--text-3); font-size:0.875rem; margin-bottom:1.5rem; }
.back-link:hover{ color:var(--text); }

/* Footer */
.site-footer{ border-top:1px solid var(--border-soft); padding:4rem 0 0; background:var(--bg-alt); }
.footer-inner{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2.5rem; padding-bottom:2.75rem; }
@media (max-width: 45em){ .footer-inner{ grid-template-columns:1fr; gap:2rem; } }
.footer-brand .brand{ display:flex; align-items:center; gap:0.625rem; }
.footer-brand .brand-name{ font-family:var(--font-display); font-weight:700; font-size:0.9375rem; letter-spacing:0.06em; }
.footer-brand p{ color:var(--text-4); font-size:0.8438rem; margin-top:0.75rem; max-width:20rem; line-height:1.6; }
.footer-col{ display:flex; flex-direction:column; gap:0.75rem; }
.footer-col-title{ font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--text-4); margin-bottom:0.25rem; }
.footer-col a{ color:var(--text-3); font-size:0.9062rem; }
.footer-col a:hover{ color:var(--text); }
.footer-bottom{
  border-top:1px solid var(--border-soft); padding:1.25rem 0; color:var(--text-4); font-size:0.7812rem;
  display:flex; justify-content:space-between; gap:0.75rem; flex-wrap:wrap;
}

/* CMS edit mode */
.cms-bar{
  position:sticky; top:0; z-index:200; background:#f50fff; color:#08080c;
  display:flex; align-items:center; gap:1rem; padding:0.625rem 1.5rem; font-size:0.8125rem; font-weight:600;
  flex-wrap:wrap;
}
.cms-bar-hint{ font-weight:500; opacity:0.85; }
.cms-bar-status{ opacity:0.85; font-weight:500; }
.cms-bar-btn{
  margin-left:auto; background:#08080c; color:#fff; padding:0.4375rem 1rem; border-radius:999px; font-size:0.7812rem;
}
.cms-bar-logout{ margin-left:0.5rem; background:transparent; border:1px solid #08080c; }
body.cms-edit-mode .site-header{ top:44px; }

.cms-editable{
  outline:1px dashed transparent; outline-offset:4px; border-radius:4px; transition:outline-color .15s ease, background .15s ease;
  cursor:text;
}
.cms-editable:hover{ outline-color:rgba(245,15,255,0.5); background:rgba(245,15,255,0.06); }
.cms-editable:focus{ outline:2px solid var(--magenta); background:rgba(245,15,255,0.08); }
.cms-editable.cms-saving{ opacity:0.6; }
.cms-editable.cms-saved{ outline-color:var(--green); }

/* ---------- Spamschutz der Formulare ---------- */

/* Honeypot: fuer Menschen unsichtbar, aber nicht display:none –
   manche Bots ueberspringen ausgeblendete Felder gezielt. */
.hp-field{
  position:absolute !important;
  left:-9999px !important;
  top:auto !important;
  width:1px; height:1px;
  overflow:hidden;
}

.spam-field{ margin-bottom:1.125rem; }
.spam-hint{ color:var(--text-4); font-weight:400; font-size:0.75rem; }
.recaptcha-note{ font-size:0.7188rem; line-height:1.5; margin:-4px 0 1rem; }
.recaptcha-note a{ color:var(--text-3); text-decoration:underline; }

/* ---------- Kunden & Kooperationspartner ---------- */

.partner-grid{
  list-style:none; padding:0; margin:0 0 2.125rem;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:0.75rem;
}
.partner-item{
  background:rgba(255,255,255,0.03);
  border:1px solid rgba(255,255,255,0.09);
  border-radius:12px;
}
.partner-item > a,
.partner-item > span{
  display:flex; align-items:center; justify-content:space-between; gap:0.625rem;
  padding:0.9375rem 1.0625rem; color:var(--text-2); font-size:0.9375rem; text-decoration:none;
}
.partner-item > a{ transition:color .15s ease; }
.partner-item:hover{ border-color:rgba(245,15,255,0.4); }
.partner-item > a:hover{ color:#fff; }
.partner-arrow{ flex:none; opacity:.45; }
.partner-item > a:hover .partner-arrow{ opacity:1; color:var(--magenta); }
/* Eintraege ohne Website bleiben sichtbar, aber ruhiger */
.partner-item > span{ color:var(--text-3); }

/* ---------- CMS: Listen bearbeiten ---------- */

/* Bezugspunkt fuer die Werkzeugleiste am Eintrag */
body.cms-edit-mode [data-cms-item]{ position:relative; }

.cms-item-tools{
  position:absolute; top:8px; right:8px; z-index:5;
  display:flex; align-items:center; gap:0.3125rem;
  background:rgba(8,8,12,0.88);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:9px; padding:0.3125rem 0.375rem;
  backdrop-filter:blur(4px);
}
.cms-tool{
  background:rgba(255,255,255,0.08); color:#f4f4f6;
  border:1px solid rgba(255,255,255,0.16); border-radius:6px;
  padding:0.25rem 0.5625rem; font-size:0.75rem; font-weight:600; line-height:1.3;
  cursor:pointer; font-family:inherit;
}
.cms-tool:hover:not(:disabled){ background:rgba(255,255,255,0.18); }
.cms-tool:disabled{ opacity:.3; cursor:default; }
.cms-tool-del:hover{ background:rgba(255,92,122,0.28); border-color:#ff5c7a; }
.cms-tool-yes{ background:rgba(255,92,122,0.28); border-color:#ff5c7a; }
.cms-confirm{ display:flex; align-items:center; gap:0.375rem; font-size:0.75rem; color:#ff9db1; white-space:nowrap; }
.cms-confirm[hidden]{ display:none; }

.cms-list-add{ margin:1.125rem 0 0.5rem; }
.cms-tool-add{
  background:rgba(245,15,255,0.16); border-color:rgba(245,15,255,0.5);
  color:#fff; padding:0.5625rem 1.125rem; font-size:0.8438rem; border-radius:999px;
}
.cms-tool-add:hover{ background:rgba(245,15,255,0.3); }

/* Partnerliste im Bearbeitungsmodus: Name und Adresse getrennt bearbeitbar */
.partner-edit{ display:flex; flex-direction:column; gap:3px; padding:0.9375rem 1.0625rem; width:100%; }
.partner-url{ font-size:0.7188rem; color:var(--text-4); }
body.cms-edit-mode .partner-item{ padding-right:7.5rem; }

/* ---------- Rechtsseiten ---------- */

.legal-grid-single{ grid-template-columns:1fr; max-width:47.5rem; }
.legal-grid-single .legal-card h2, .legal-grid-single .legal-card h3{ margin-bottom:0.625rem; }
.legal-stand{ color:var(--text-4); font-size:0.8125rem; margin-top:0.375rem; }

/* Anklickbare Kurzfassung auf der Kontaktseite */
.legal-card-link{ display:block; text-decoration:none; color:inherit; transition:border-color .15s ease; }
.legal-card-link:hover{ border-color:rgba(245,15,255,0.4); }
.legal-more{ display:inline-block; margin-top:0.875rem; color:var(--magenta); font-size:0.875rem; font-weight:600; }

/* ---------- Einwilligungs-Hinweis ---------- */

.consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9997;
  background:rgba(10,10,14,0.97); border:1px solid rgba(255,255,255,0.16);
  border-radius:16px; padding:1.25rem 1.375rem; box-shadow:0 12px 40px rgba(0,0,0,0.5);
  backdrop-filter:blur(6px);
}
.consent-banner[hidden]{ display:none; }
.consent-inner{ max-width:68.75rem; margin:0 auto; display:flex; align-items:center; gap:1.375rem; flex-wrap:wrap; }
.consent-inner p{ flex:1; min-width:17.5rem; font-size:0.875rem; color:var(--text-2); margin:0; line-height:1.6; }
.consent-inner a{ color:var(--magenta); }
.consent-buttons{ display:flex; gap:0.625rem; flex-wrap:wrap; }
.consent-buttons .btn{ padding:0.6875rem 1.375rem; font-size:0.875rem; }
@media (max-width: 40em){
  .consent-inner{ flex-direction:column; align-items:stretch; }
  .consent-buttons .btn{ flex:1; }
}

/* Zeitraum auf den Ausstellungskarten – gleiche Anmutung wie bei den Terminen */
.exhibit-date{
  font-size:0.8125rem; color:var(--yellow); font-weight:600;
  letter-spacing:.02em; margin:0.5rem 0 0.25rem;
}

/* Hinweis auf den Terminkarten (Preis, freie Plaetze) */
.date-note{ font-size:0.8125rem; color:var(--text-3); margin-top:0.5rem; }
.date-note-voll{
  color:#ff9db1; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; font-size:0.75rem;
}

/* Vergangene Ausstellungen ruhiger darstellen, damit sie nicht mit den
   kommenden verwechselt werden.
   Gedaempft wird das BILD, nicht die Karte. Ein opacity auf der ganzen Karte
   dimmt auch den Text mit: die Kennzeile kam damit auf 2,95:1 und der
   Fliesstext auf 4,28:1 – beides unter den geforderten 4,5:1. So bleibt der
   Text bei voller Deckkraft (7,36:1) und die Karte wirkt trotzdem
   zurueckgenommen. */
.exhibit-card-past .exhibit-img{
  opacity:.55; filter:grayscale(0.35);
  transition:opacity .3s ease, filter .3s ease;
}
.exhibit-card-past:hover .exhibit-img{ opacity:1; filter:none; }
.exhibit-card-past .tag{ color:var(--text-3); }
.exhibit-card-past .exhibit-date{ color:var(--text-3); }

/* Bildbeschreibungen im Bearbeitungsmodus sichtbar machen */
.gallery-alt-edit{
  padding:0.5rem 0.625rem; background:rgba(8,8,12,0.9);
  border-top:1px solid rgba(255,255,255,0.1);
  font-size:0.75rem; line-height:1.45; color:var(--text-2);
}
.gallery-alt-label{
  display:block; font-size:0.625rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-4); margin-bottom:2px;
}

/* ==========================================================
   Barrierefreiheit: Sprunglink und Tastaturfokus
   ========================================================== */

/* Sprunglink – unsichtbar, bis er den Fokus bekommt.
   Bewusst NICHT display:none: ausgeblendete Elemente sind auch
   fuer die Tastatur nicht erreichbar und der Link waere wirkungslos. */
.skip-link{
  /* fixed statt absolute: so erscheint der Link auch dann oben links,
     wenn die Seite schon gescrollt ist. */
  position:fixed; left:-9999px; top:0; z-index:10000;
  background:var(--yellow); color:#08080c;
  padding:0.875rem 1.375rem; border-radius:0 0 10px 0;
  font-weight:700; font-size:0.9375rem; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* Das Sprungziel selbst soll keinen Rahmen bekommen – der Fokus wandert
   nur dorthin, damit die Tastaturnavigation danach im Inhalt weiterlaeuft. */
main:focus{ outline:none; }

/* Sichtbarer Fokus fuer die Tastatur.
   Gelb erreicht auf dem dunklen Hintergrund 14.6:1. Der dunkle Ring
   aussen herum sorgt dafuer, dass der Rahmen auch auf hellen Flaechen
   (Formularkarten, Bilder) erkennbar bleibt.
   :focus-visible statt :focus – so erscheint er bei Tastaturbedienung,
   nicht bei jedem Mausklick. */
:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:2px;
  box-shadow:0 0 0 6px rgba(8,8,12,0.75);
  border-radius:3px;
}

/* Formularfelder: Rahmen liegt direkt an, deshalb ohne Versatz */
.form-field input:focus-visible,
.form-field textarea:focus-visible{
  outline:3px solid var(--yellow);
  outline-offset:0;
  box-shadow:none;
}

/* Galeriebilder sind Links. Der Rahmen bleibt bewusst AUSSERHALB des Bildes:
   mehrere Aufnahmen haben weissen Hintergrund, und Gelb auf Weiss waere
   unsichtbar (1.4:1). Draussen liegt er auf dem dunklen Seitenhintergrund
   und erreicht 14.6:1. Der dunkle Aussenring bleibt zusaetzlich erhalten. */
.gallery-item a:focus-visible{ outline-offset:3px; }

/* Ältere Browser ohne :focus-visible bekommen wenigstens den Standardrahmen */
@supports not selector(:focus-visible){
  a:focus, button:focus, input:focus, textarea:focus, select:focus{
    outline:3px solid var(--yellow); outline-offset:2px;
  }
}

/* Anmeldung auf den Terminkarten */
.date-signup{
  display:inline-flex; align-items:center; gap:0.4375rem;
  margin-top:0.875rem; padding:0.5625rem 1.125rem; border-radius:999px;
  background:var(--magenta-btn); color:#fff;
  font-size:0.875rem; font-weight:600; text-decoration:none;
  transition:background .15s ease;
}
.date-signup:hover{ background:var(--magenta-btn-hover); }
.date-signup-alt{
  display:block; margin-top:0.5rem; padding:0;
  background:none; color:var(--text-3); font-weight:400; font-size:0.8125rem;
  text-decoration:underline;
}
.date-signup-alt:hover{ background:none; color:var(--text); }

/* Umschalter in der CMS-Werkzeugleiste (z. B. ausgebucht) */
.cms-tool-toggle{ background:rgba(61,220,132,0.18); border-color:rgba(61,220,132,0.45); color:#7ef0ac; }
.cms-tool-toggle:hover:not(:disabled){ background:rgba(61,220,132,0.3); }
.cms-tool-toggle.is-an{ background:rgba(255,92,122,0.22); border-color:rgba(255,92,122,0.5); color:#ff9db1; }
.cms-tool-toggle.is-an:hover:not(:disabled){ background:rgba(255,92,122,0.34); }

/* Anmelde-Link im Bearbeitungsmodus */
.date-link-edit{
  margin-top:0.75rem; padding:0.5rem 0.625rem; border-radius:8px;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.09);
  font-size:0.75rem; color:var(--text-2); word-break:break-all;
}
.date-link-label{
  display:block; font-size:0.625rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-4); margin-bottom:3px;
}