/* 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: 59.88em){
  .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; }

/* Produkte auf der Buchseite (Buecher, Ratgeber). auto-fit mit Obergrenze:
   ein einzelnes Produkt bleibt so schmal wie bisher (max. 26.25rem) und
   waechst nicht auf die volle Breite, ab zwei stehen sie nebeneinander. */
.produkt-grid{
  display:grid; gap:1.5rem; align-items:start; justify-content:start;
  grid-template-columns:repeat(auto-fit, minmax(17.5rem, 26.25rem));
}
@media (max-width: 40em){ .produkt-grid{ grid-template-columns:1fr; } }

/* 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; }

/* Galerie-Bild im Bearbeitungsmodus: eigener Rahmen nur ums Bild, damit der
   Knopf "Bild aendern" nicht ueber der Bildbeschreibung darunter liegt.
   Bewusst NICHT .cms-image-wrap verwendet - dessen height:100% + object-fit
   wuerde die unterschiedlich hohen Bilder der Masonry-Galerie beschneiden. */
.gallery-item-bild{ position:relative; display:block; }
.gallery-item-bild img{ display:block; width:100%; }
.gallery-item-bild: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-block:1.25rem; 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); }
/* Ein leeres Textfeld hat null Breite und waere nicht anklickbar - etwa die
   Bildbeschreibung eines gerade hinzugefuegten Fotos. Der Hinweis erscheint
   nur solange nichts drinsteht und wird nicht mitgespeichert. */
.cms-editable:empty::before{
  content:"Text eintragen"; color:var(--text-4); font-style:italic;
}

/* ---------- 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;
}

/* ==========================================================
   Aktuelles: Uebersicht, Einzelseite und Abschnitte
   ========================================================== */

.akt-bereich{ padding:1.25rem 0 3.75rem; }
.akt-bereich-titel{ font-size:clamp(1.375rem,3vw,1.875rem); margin-bottom:1.5rem; }
.akt-leer{ color:var(--text-3); }
.akt-leer a{ color:var(--text); border-bottom:1px solid var(--border); }

/* Lange zusammengesetzte Woerter duerfen am Handy umbrechen,
   sonst schieben sie die Seite seitlich aus dem Bild. */
.akt-titel, .akt-karte-titel, .aw-titel, .aw-untertitel{ overflow-wrap:break-word; hyphens:auto; }

.akt-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1.25rem; }
@media (max-width: 63.9375em){ .akt-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width: 47.9375em){ .akt-grid{ grid-template-columns:1fr; } }

.akt-karte{
  border:1px solid var(--border-soft); border-radius:var(--radius); overflow:hidden;
  background:var(--card); transition:border-color .15s ease;
}
.akt-karte:hover{ border-color:rgba(245,15,255,0.4); }
.akt-karte-link{ display:flex; flex-direction:column; height:100%; position:relative; }
/* .akt-karte hat overflow:hidden (rundet das Titelbild ab) und schneidet damit
   den normalen, nach aussen liegenden :focus-visible-Ring (outline-offset:2px)
   komplett weg - per Tastatur war die fokussierte Karte nicht erkennbar.
   Ein box-shadow direkt am Link wuerde vom undurchsichtigen .akt-karte-bild
   ueberdeckt (Hintergrund/box-shadow malt in derselben Ebene wie normale
   Kind-Elemente, die danach im Baum kommen) - ueber dem Bild war der Ring
   dadurch unsichtbar (Review Runde 1, Befund kritisch). Stattdessen ein
   ::after obendrauf (position:absolute, eigener Stacking-Kontext durch den
   positionierten Link), das denselben Gelb-plus-dunkel-Ring wie die globale
   :focus-visible-Regel zeigt, aber innenliegend, damit .akt-karte{overflow:
   hidden} ihn nicht abschneidet. Sichtpruefung Runde 1, Befund 1. */
.akt-karte-link:focus-visible{ outline:none; }
.akt-karte-link:focus-visible::after{
  content:""; position:absolute; inset:0; border-radius:var(--radius);
  box-shadow:inset 0 0 0 3px var(--yellow), inset 0 0 0 6px rgba(8,8,12,.75);
  pointer-events:none; z-index:1;
}
.akt-karte-bild{
  aspect-ratio:16/9;
  background:linear-gradient(135deg, rgba(245,15,255,0.12), rgba(40,68,251,0.14));
}
.akt-karte-bild img{ width:100%; height:100%; object-fit:cover; }
.akt-karte-text{ padding:1.375rem; display:flex; flex-direction:column; gap:0.375rem; flex:1; }
.akt-karte-etikett{ color:var(--blue-light); font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; }
.akt-karte-titel{ font-size:1.1875rem; }
.akt-karte-wann{ color:var(--magenta); font-size:0.8125rem; font-weight:600; letter-spacing:0.02em; }
.akt-karte-mehr{ margin-top:auto; padding-top:0.625rem; color:var(--text-2); font-size:0.875rem; font-weight:600; }
.akt-karte-link:hover .akt-karte-mehr{ color:var(--text); }
/* Vorbei: wie bei den Ausstellungen nur das BILD daempfen, nie den Text
   (opacity auf der Karte haette den Kontrast unter 4,5:1 gedrueckt). */
.akt-karte-vorbei .akt-karte-bild{ opacity:.55; filter:grayscale(0.35); }
.akt-karte-vorbei .akt-karte-wann{ color:var(--text-3); }

.akt-status{
  align-self:flex-start; display:inline-block; padding:0.125rem 0.625rem; border-radius:999px;
  font-size:0.6875rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
}
.akt-status-entwurf{ background:rgba(247,221,4,0.12); color:var(--yellow); border:1px solid rgba(247,221,4,0.4); }
.akt-status-live{ background:rgba(37,211,102,0.12); color:var(--green); border:1px solid rgba(37,211,102,0.4); }

/* Einzelseite */
.akt-hero{ padding-bottom:2.5rem; }
.akt-hero .back-link{ margin-bottom:1.75rem; }
.akt-hero .eyebrow{ display:flex; }
.akt-vorbei-hinweis{
  display:inline-block; margin-top:1.375rem; padding:0.5rem 1rem; border-radius:999px;
  border:1px solid rgba(255,157,177,0.45); color:#ff9db1; font-size:0.875rem; font-weight:600;
}

.akt-titelbild{ padding:0 0 2.5rem; }
.akt-titelbild-rahmen{
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-soft);
  aspect-ratio:16/9; max-height:36rem; width:100%;
}
.akt-titelbild-rahmen .cms-image-placeholder{ min-height:100%; }

.akt-eckdaten{ padding:0 0 3rem; }
.akt-eckdaten-karte{
  background:var(--card); border:1px solid var(--border-soft); border-radius:var(--radius); padding:2rem;
}
@media (max-width: 35em){ .akt-eckdaten-karte{ padding:1.375rem; } }
.akt-eckdaten-titel{ font-size:1.25rem; margin-bottom:1.25rem; }
.akt-fakten{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(13rem, 1fr));
  gap:1.25rem 2rem; margin-bottom:1.5rem;
}
.akt-fakt dt{ font-size:0.7188rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-3); margin-bottom:0.25rem; }
.akt-fakt dd{ color:var(--text); }
.akt-fakt-wert{ display:block; font-weight:600; }
.akt-fakt-adresse{ display:block; color:var(--text-2); font-size:0.9375rem; }
.akt-route{ display:inline-flex; gap:0.375rem; margin-top:0.375rem; color:var(--magenta); font-size:0.875rem; font-weight:600; }
.akt-route:hover{ text-decoration:underline; }

.akt-termine{ display:flex; flex-direction:column; border-top:1px solid var(--border-soft); }
.akt-termin{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:0.625rem 1.25rem; padding:0.875rem 0; border-bottom:1px solid var(--border-soft);
}
.akt-termin-wann{ font-weight:600; }
.akt-termin .date-signup{ margin-top:0; }

.akt-weitere{ border-top:1px solid var(--border-soft); padding-top:3.25rem; }

/* Abschnitte (Widgets) */
.aw{ padding:0 0 3.25rem; }
.aw-titel{ font-size:clamp(1.375rem,3vw,1.875rem); margin-bottom:1rem; }
.aw-untertitel{ font-size:1.125rem; color:var(--text-2); margin-bottom:0.75rem; }

/* Formatierter Text – ul/ol sind global zurueckgesetzt (ul{list-style:none}) */
.rt, .cms-richtext{ color:var(--text-2); font-size:1rem; max-width:44rem; }
.rt p, .cms-richtext p{ margin-bottom:1rem; }
.rt > :last-child, .cms-richtext > :last-child{ margin-bottom:0; }
.rt ul, .rt ol, .cms-richtext ul, .cms-richtext ol{ margin:0 0 1rem; padding-left:1.375rem; }
.rt ul, .cms-richtext ul{ list-style:disc; }
.rt ol, .cms-richtext ol{ list-style:decimal; }
.rt li, .cms-richtext li{ margin-bottom:0.25rem; }
.rt strong, .cms-richtext strong{ color:var(--text); }
.rt a, .cms-richtext a{ color:var(--magenta); text-decoration:underline; text-underline-offset:2px; }

.aw-text-mit-bild{ display:grid; grid-template-columns:1.1fr 0.9fr; gap:2.5rem; align-items:center; }
.aw-text-mit-bild.aw-bild-links{ grid-template-columns:0.9fr 1.1fr; }
.aw-bild-links .aw-text-bild{ order:-1; }
@media (max-width: 49.9375em){
  .aw-text-mit-bild, .aw-text-mit-bild.aw-bild-links{ grid-template-columns:1fr; gap:1.5rem; }
  .aw-bild-links .aw-text-bild{ order:0; }
}
.aw-text-bild .cms-image-wrap{
  aspect-ratio:4/3; height:auto; border-radius:var(--radius); overflow:hidden; border:1px solid var(--border-soft);
}
.aw-text-bild .cms-image-placeholder{ min-height:100%; }

.aw-galerie-liste{ display:grid; grid-template-columns:repeat(3, 1fr); gap:1rem; }
@media (max-width: 56.25em){ .aw-galerie-liste{ grid-template-columns:repeat(2, 1fr); } }
.aw-galerie-bild{
  position:relative; aspect-ratio:4/3; border-radius:var(--radius-sm); overflow:hidden;
  border:1px solid var(--border-soft); background:var(--card);
}
.aw-galerie-bild img{ width:100%; height:100%; object-fit:cover; }
.aw-galerie-bild .cms-image-placeholder{ min-height:100%; }
.aw-galerie-bild:hover .cms-image-edit-btn{ opacity:1; }

.aw-fragen-liste{ max-width:48rem; border-top:1px solid var(--border-soft); }
.aw-frage{ border-bottom:1px solid var(--border-soft); }
.aw-frage summary{
  list-style:none; cursor:pointer; position:relative;
  padding:1.125rem 2.5rem 1.125rem 0; font-weight:600; font-size:1.0625rem; color:var(--text);
}
.aw-frage summary::-webkit-details-marker{ display:none; }
.aw-frage summary::after{
  content:"+"; position:absolute; right:0.25rem; top:50%; transform:translateY(-50%);
  color:var(--magenta); font-size:1.5rem; font-weight:400; line-height:1;
}
.aw-frage[open] summary::after{ content:"–"; }
.aw-antwort{ padding:0 0 1.125rem; }
.aw-frage-edit{ position:relative; padding:1rem 0; }
.aw-frage-frage{ font-weight:600; margin-bottom:0.5rem; }

.aw-liste{ display:grid; gap:0.625rem; max-width:48rem; }
.aw-liste-punkt{ position:relative; padding-left:1.75rem; color:var(--text-2); }
.aw-liste-punkt::before{
  content:""; position:absolute; left:0.25rem; top:0.6em;
  width:0.5rem; height:0.5rem; border-radius:50%; background:var(--magenta);
}

.aw-ablauf{ list-style:none; max-width:48rem; border-left:2px solid rgba(245,15,255,0.35); margin-left:0.375rem; }
.aw-ablauf-punkt{ position:relative; display:grid; grid-template-columns:5.5rem 1fr; gap:1rem; padding:0.625rem 0 0.625rem 1.5rem; }
.aw-ablauf-punkt::before{
  content:""; position:absolute; left:-0.4375rem; top:1rem; width:0.75rem; height:0.75rem;
  border-radius:50%; background:var(--bg); border:2px solid var(--magenta);
}
.aw-ablauf-zeit{ font-family:var(--font-display); font-weight:600; color:var(--yellow); }
.aw-ablauf-text{ color:var(--text-2); }
@media (max-width: 30em){ .aw-ablauf-punkt{ grid-template-columns:1fr; gap:0.125rem; } }

.aw-stimmen{ display:grid; grid-template-columns:repeat(auto-fit, minmax(16rem, 1fr)); gap:1.25rem; }
.aw-stimme{
  position:relative; background:var(--card); border:1px solid var(--border-soft);
  border-radius:var(--radius); padding:1.5rem 1.75rem 1.75rem;
}
/* Grosses Anfuehrungszeichen als Schmuck – nicht um den Text herum, damit
   selbst getippte Anfuehrungszeichen nicht doppelt erscheinen. */
.aw-stimme::before{
  content:"“"; display:block; height:1.75rem; font-family:var(--font-display);
  font-size:3.25rem; line-height:1; color:var(--magenta);
}
.aw-zitat p{ font-size:1.0625rem; color:var(--text); line-height:1.55; }
.aw-stimme-name{ margin-top:0.875rem; color:var(--text-3); font-size:0.875rem; font-weight:600; }

.aw-hinweis-kasten{
  max-width:48rem; border:1px solid rgba(247,221,4,0.45); background:rgba(247,221,4,0.06);
  border-radius:var(--radius); padding:1.75rem 2rem;
}
@media (max-width: 35em){ .aw-hinweis-kasten{ padding:1.375rem; } }
.aw-hinweis-kasten .aw-titel{ font-size:1.25rem; color:var(--yellow); margin-bottom:0.75rem; }

/* Mit einer Eventseite verknuepfte Karten auf "Kurse & Termine" */
.akt-kurskarte .cms-image-placeholder{ min-height:100%; }
.akt-kurskarte-mehr{ display:block; color:var(--text-3); font-weight:600; margin-top:0.25rem; }
/* Nur im Bearbeitungsmodus sichtbar: Bild und Kopf daempfen, Text bleibt lesbar */
.akt-kurskarte-gedaempft .date-img{ opacity:.4; filter:grayscale(0.6); }
.akt-kurskarte-gedaempft{ border-style:dashed; }
.akt-kurskarte-hinweis{
  margin-bottom:0.75rem; padding:0.5rem 0.625rem; border-radius:8px;
  background:rgba(63,162,255,0.1); border:1px solid rgba(63,162,255,0.35);
  font-size:0.75rem; line-height:1.45; color:var(--text-2);
}

/* ---------- CMS: Aktuelles bearbeiten ---------- */

.akt-cms{ padding:0 0 2rem; }
.akt-cms .akt-bereich-titel{ margin-top:2rem; }
.akt-cms-hinweis{ font-size:0.8125rem; color:var(--text-3); font-weight:400; margin-top:0.375rem; }
.akt-bereich-titel .akt-cms-hinweis{ display:inline; margin-left:0.625rem; font-family:var(--font-body); letter-spacing:0; }
.akt-warnung{
  margin-top:0.625rem; padding:0.5rem 0.75rem; border-radius:8px; font-size:0.8125rem;
  background:rgba(247,221,4,0.1); border:1px solid rgba(247,221,4,0.4); color:var(--yellow);
}
.akt-fehler{
  margin-top:0.75rem; padding:0.5rem 0.75rem; border-radius:8px; font-size:0.8125rem;
  background:rgba(255,92,122,0.14); border:1px solid rgba(255,92,122,0.45); color:#ff9db1;
}
.akt-fehler[hidden], .akt-weg-feld[hidden]{ display:none; }

/* Anlege-Dialog */
.akt-dialog{
  margin:auto; width:min(34rem, calc(100vw - 2rem)); max-height:calc(100vh - 2rem); overflow:auto;
  background:#101016; color:var(--text); border:1px solid rgba(255,255,255,0.16);
  border-radius:var(--radius); padding:1.75rem; box-shadow:0 20px 60px rgba(0,0,0,0.6);
}
.akt-dialog::backdrop{ background:rgba(0,0,0,0.65); }
.akt-dialog h2{ font-size:1.375rem; margin-bottom:1rem; }
.akt-dialog fieldset, .akt-einst fieldset{ border:0; min-width:0; }
.akt-dialog legend{ font-size:0.8125rem; color:var(--text-3); margin-bottom:0.5rem; }
.akt-weg{ display:flex; align-items:center; gap:0.625rem; padding:0.5rem 0; font-weight:600; cursor:pointer; }
.akt-weg:has(input:disabled){ opacity:.5; cursor:default; }
.akt-weg-feld{ padding:0 0 0.75rem 1.75rem; }
.akt-dialog input[type=radio], .akt-einst input[type=radio], .akt-einst input[type=checkbox]{
  accent-color:var(--magenta); width:1.0625rem; height:1.0625rem; flex:none;
}
.akt-dialog .akt-weg-feld label, .akt-einst label{
  display:block; font-size:0.8125rem; color:var(--text-2); margin:0.75rem 0 0.375rem;
}
.akt-dialog input[type=text], .akt-dialog select,
.akt-einst input[type=text], .akt-einst textarea,
.akt-termin-edit input{
  width:100%; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.18);
  border-radius:9px; padding:0.625rem 0.75rem; color:var(--text); font:inherit; font-size:0.9062rem;
  color-scheme:dark;
}
.akt-dialog select option{ background:#101016; }
.akt-dialog input:focus, .akt-dialog select:focus,
.akt-einst input:focus, .akt-einst textarea:focus, .akt-termin-edit input:focus{ border-color:var(--magenta); }
.akt-dialog-knoepfe, .akt-einst-knoepfe{ display:flex; flex-wrap:wrap; align-items:center; gap:0.625rem; margin-top:1.25rem; }
.akt-dialog-knoepfe{ justify-content:flex-end; }

/* Seiteneinstellungen */
.akt-einstellungen{ padding:1.5rem 0 0; }
.akt-einst{
  border:1px dashed rgba(245,15,255,0.55); background:rgba(245,15,255,0.05);
  border-radius:var(--radius); padding:1.5rem;
}
@media (max-width: 35em){ .akt-einst{ padding:1.125rem; } }
.akt-einst-kopf{ display:flex; flex-wrap:wrap; align-items:center; gap:0.75rem; }
.akt-einst-kopf h2{ font-size:1.125rem; }
.akt-einst-raster{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.5rem; }
@media (max-width: 48em){ .akt-einst-raster{ grid-template-columns:1fr; } }
.akt-einst legend{ font-size:0.8125rem; color:var(--text-2); margin:0.75rem 0 0.375rem; }
.akt-einst .akt-einst-status label, .akt-einst .akt-einst-check{
  display:flex; align-items:center; gap:0.5rem; margin:0.375rem 0; font-size:0.9062rem; color:var(--text);
}
.akt-einst-adresse{
  display:flex; align-items:center; background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.18); border-radius:9px;
}
.akt-einst-adresse:focus-within{ border-color:var(--magenta); }
.akt-einst-adresse span{ padding-left:0.75rem; color:var(--text-3); font-size:0.875rem; white-space:nowrap; }
.akt-einst .akt-einst-adresse input{ border:0; background:transparent; padding-left:0.25rem; min-width:0; }
.akt-einst .zaehler{ float:right; font-size:0.75rem; color:var(--text-3); }
.akt-einst .zaehler.zu-lang{ color:var(--yellow); }
.akt-loeschen{ margin-left:auto; display:inline-flex; flex-wrap:wrap; align-items:center; gap:0.5rem; }
.akt-loeschen .cms-confirm{ white-space:normal; flex-wrap:wrap; }

/* Werkzeugleisten an Terminen, Abschnitten und Eintraegen */
.akt-werkzeuge{
  display:flex; flex-wrap:wrap; align-items:center; gap:0.3125rem; width:max-content; max-width:100%;
  background:rgba(8,8,12,0.88); border:1px solid rgba(255,255,255,0.16);
  border-radius:9px; padding:0.3125rem 0.375rem;
}
.aw[data-akt-block]{ border-top:1px dashed rgba(245,15,255,0.35); padding-top:1.25rem; }
.aw-cms-kopf{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0.75rem; margin-bottom:1rem; }
.aw-cms-typ{ font-size:0.6875rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--magenta); }

/* Kacheln (Galerie, Stimmen): Leiste schwebt oben rechts im Kasten */
.aw-galerie-eintrag, .aw-stimme{ position:relative; }
.aw-galerie-eintrag .akt-werkzeuge, .aw-stimme .akt-werkzeuge{ position:absolute; top:0.5rem; right:0.5rem; z-index:6; }
/* Zeilen (Aufzaehlung, Ablauf, Fragen): Leiste steht ueber dem Eintrag,
   damit sie am Handy keinen Text verdeckt */
.aw-liste-punkt .akt-werkzeuge, .aw-frage-edit .akt-werkzeuge{ margin-bottom:0.375rem; }
.aw-ablauf-punkt .akt-werkzeuge{ grid-column:1 / -1; }
body.cms-edit-mode .aw-liste-punkt::before{ top:2.9em; }

/* Termine als Formularfelder */
.akt-termin-edit{ display:block; }
.akt-termin-felder{ display:grid; grid-template-columns:10.5rem 7rem 7rem 1fr; gap:0.625rem; align-items:end; }
@media (max-width: 48em){
  .akt-termin-felder{ grid-template-columns:1fr 1fr; }
  .akt-termin-link{ grid-column:1 / -1; }
}
.akt-termin-edit label{ display:flex; flex-direction:column; gap:0.25rem; font-size:0.75rem; color:var(--text-3); }
.akt-termin-edit .akt-werkzeuge{ margin-top:0.625rem; }

/* Abschnitt hinzufuegen */
.akt-block-neu{ padding:1rem 0 3rem; }
.akt-block-wahl > summary{ display:inline-flex; list-style:none; cursor:pointer; }
.akt-block-wahl > summary::-webkit-details-marker{ display:none; }
.akt-block-typen{ display:grid; grid-template-columns:repeat(auto-fill, minmax(15rem, 1fr)); gap:0.75rem; margin-top:1rem; }
.akt-block-typ{
  width:100%; display:flex; flex-direction:column; gap:0.25rem; padding:0.875rem 1rem; text-align:left;
  border-radius:var(--radius-sm); border:1px solid rgba(255,255,255,0.16); background:rgba(255,255,255,0.04);
  color:var(--text); font:inherit; cursor:pointer;
}
.akt-block-typ:hover{ border-color:rgba(245,15,255,0.5); background:rgba(245,15,255,0.08); }
.akt-block-typ span{ font-size:0.8125rem; color:var(--text-3); }
.akt-kurskarte-hinweis a{ color:var(--blue-light); font-weight:600; text-decoration:underline; }

/* ---------- CMS: formatierbarer Text und Editorleiste ---------- */

.cms-richtext{
  min-height:1.6em; cursor:text; border-radius:4px;
  outline:1px dashed rgba(245,15,255,0.35); outline-offset:6px;
  transition:outline-color .15s ease, background .15s ease;
}
.cms-richtext:hover{ outline-color:rgba(245,15,255,0.6); background:rgba(245,15,255,0.04); }
.cms-richtext:focus{ outline:2px solid var(--magenta); background:rgba(245,15,255,0.06); }
.cms-richtext.cms-saving{ opacity:.6; }
.cms-richtext.cms-saved{ outline-color:var(--green); }
.cms-richtext:empty::before{ content:"Text eintragen"; color:var(--text-4); font-style:italic; }

.rt-leiste{
  position:fixed; z-index:300; display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem;
  max-width:calc(100vw - 1rem); padding:0.3125rem;
  background:#15151d; border:1px solid rgba(255,255,255,0.2); border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,0.5);
}
.rt-leiste[hidden], .rt-link-eingabe[hidden]{ display:none; }
.rt-leiste button{
  min-width:2rem; padding:0.3125rem 0.625rem; border-radius:6px; cursor:pointer;
  background:rgba(255,255,255,0.08); color:#f4f4f6; border:1px solid rgba(255,255,255,0.16);
  font:inherit; font-size:0.8125rem; font-weight:600; line-height:1.3;
}
.rt-leiste button:hover{ background:rgba(255,255,255,0.18); }
.rt-leiste button.ist-an{ background:rgba(245,15,255,0.3); border-color:var(--magenta); }
.rt-link-eingabe{ display:flex; flex-wrap:wrap; gap:0.25rem; width:100%; }
.rt-link-eingabe input{
  flex:1 1 12rem; min-width:0; padding:0.3125rem 0.5rem; border-radius:6px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.2);
  color:var(--text); font:inherit; font-size:0.8125rem;
}
.rt-link-eingabe input:focus{ border-color:var(--magenta); outline:none; }

/* Sieben Menuepunkte seit "Aktuelles" (09/2026): zwischen Tablet und
   breitem Bildschirm werden die Abstaende knapper, statt dass die Leiste
   ueberlaeuft. Gemessen mit browser-11-kopfzeile.mjs. */
@media (max-width: 75em){
  .header-inner{ gap:1.25rem; }
  .main-nav{ gap:1.125rem; }
  .header-cta{ margin-left:0; }
}