/* Markenschriften wie skyfit-women.de (selbst gehostet) */
@font-face{font-family:"Barlow Condensed";src:url("fonts/BarlowCondensed-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow Condensed";src:url("fonts/BarlowCondensed-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("fonts/PlayfairDisplay-Italic-800.woff2") format("woff2");font-weight:700 800;font-style:italic;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/Poppins-700.woff2") format("woff2");font-weight:700;font-display:swap}
/* Lokale Vorschau: echte Schriften, Fontshare-Lizenz, selbst gehostet */
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Clash Display';src:url('fonts/clash-display-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Switzer';src:url('fonts/switzer-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* KI-Kennzeichnung für Platzhalter-Fotos (Absprache im Meeting: jedes KI-Bild sichtbar gekennzeichnet) */
.ki-label{position:absolute;right:10px;bottom:10px;z-index:2;font:500 11px/1.2 'Switzer',system-ui,sans-serif;letter-spacing:.06em;color:#fff;background:rgba(26,16,48,.72);border:1px solid rgba(255,255,255,.28);padding:4px 8px;border-radius:4px;pointer-events:none}

/* Prototyp-Schalter: ohne ?prototyp=1 keine Hinweise für uns, keine leeren Abschnitte */
html:not(.prototyp) [data-todo][style*="dashed"],
html:not(.prototyp) [data-proto],
html:not(.prototyp) [aria-label*="nur im Prototyp"],
html:not(.prototyp) section:has([data-todo^="Teamprofile"]),
html:not(.prototyp) section:has([data-todo^="Trainingsbereiche und Gerätehersteller"]),
html:not(.prototyp) section:has([data-todo^="E-Mail-Adresse und Mitgliederservice"]),
html:not(.prototyp) section:has(.kursplan-mount){display:none!important}

/* Tap-Flächen ab 44 px (Prüfung 21.09.2026). Eigenständige Links bekommen echte Höhe,
   Links im Fließtext, Telefonnummern und die Slide-Punkte eine größere Trefferfläche per Pseudo-Element. */
a[data-track="nav:logo"]{min-height:44px;align-items:center!important}
#dc-root a[data-track^="nav:"] {display:inline-flex;align-items:center;min-height:44px}
#dc-root a[data-track="checkout:hero"], #dc-root a[data-track="link:kursseite"], #dc-root a[data-track="link:kursschiene"], #dc-root a[data-track="link:studioseite"], #dc-root footer a {display:inline-flex;align-items:center;min-height:44px}
#dc-root a[href^="tel:"], #dc-root a[data-track="link:datenschutz"], #dc-root a[data-track="link:agb"], #dc-root label a, #dc-root p a, #dc-root [data-track="hero:dot"] {position:relative}
#dc-root a[href^="tel:"]::after, #dc-root a[data-track="link:datenschutz"]::after, #dc-root a[data-track="link:agb"]::after, #dc-root label a::after, #dc-root p a::after, #dc-root [data-track="hero:dot"]::after {content:"";position:absolute;inset:-12px -4px}
#dc-root input[type="checkbox"] {width:24px;height:24px}

/* Mobil kürzer (Prüfung 21.09.2026): Studiokarten und Rezensionen als Wischreihe statt untereinander,
   die nächste Karte schaut rechts hervor. Scrollytelling: Bildbühne klebt unter dem Header,
   der Text läuft darunter durch statt weiß über das helle Bild. */
@media (max-width:699px){
  div:has(> article [data-track="cta:studiokarte"]){display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px!important;margin-right:calc(-1 * var(--pad, 20px));padding-right:var(--pad, 20px)!important;padding-bottom:10px!important;scrollbar-width:none}
  div:has(> article [data-track="cta:studiokarte"]) > article{flex:0 0 84%;scroll-snap-align:start}
  section[aria-labelledby="signature-titel"] > div > div > div:first-child{top:137px!important;height:38svh!important;padding:10px 0!important;z-index:2;background:var(--aub)}
  section[aria-labelledby="signature-titel"] > div > div > div:last-child{position:relative;z-index:1}
  section[aria-labelledby="signature-titel"] [data-step]{min-height:46svh!important}
}
input[type="checkbox"]{width:24px!important;height:24px!important}

/* Sterne anteilig: Grundreihe gedämpft, gefüllte Reihe auf den echten Wert gekürzt */
.sterne{position:relative;display:inline-block;width:max-content;justify-self:start;line-height:1;letter-spacing:.06em;white-space:nowrap;color:rgba(255,255,255,.28)}
.sterne::before{content:'★★★★★';position:absolute;left:0;top:0;width:var(--wert,100%);overflow:hidden;color:var(--sun);letter-spacing:inherit}
.sterne--hell{color:rgba(40,20,60,.18)}
/* Team: mit Stimmen zwei Spalten, ohne Stimmen die Rollen nebeneinander */
[data-team-raster]{grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
[data-team-raster][data-stimmen="nein"]{grid-template-columns:1fr}
[data-team-raster][data-stimmen="nein"] [data-rollen]{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));column-gap:clamp(20px,3vw,36px)}

/* Preistafel Studioseite: zwei Preiskarten, darunter eine Leiste über die ganze Breite */
[data-preisraster]{grid-template-columns:1fr}
@media (min-width:700px){[data-preisraster]{grid-template-columns:1fr 1fr}}
[data-preisraster] [data-preisleiste]{grid-column:1/-1;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}

/* ================= Leben (28.09.2026): Bewegung, die auf Scrollen, Maus und Uhrzeit reagiert =================
   Alles nur mit transform/opacity, alles mit prefers-reduced-motion abgeschaltet.
   Ohne Unterstützung für Scroll-Zeitleisten (Firefox) bleibt alles sichtbar und ruhig. */
:root { --ease-out: cubic-bezier(.22,.61,.36,1); }
@keyframes skyRise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes skyZoomAus { from { transform: scale(1.14); } to { transform: scale(1); } }
@keyframes skyLaufLinks { from { transform: translateX(0); } to { transform: translateX(var(--weg, -30%)); } }
@keyframes skyLaufRechts { from { transform: translateX(var(--weg, -30%)); } to { transform: translateX(0); } }
@keyframes skyGlow { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(7%,5%) scale(1.1); } 100% { transform: translate(-5%,2%) scale(1); } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    [data-reveal] { animation: skyRise linear both; animation-timeline: view(); animation-range: entry 5% cover 22%; }
    [data-reveal-gruppe] > * { animation: skyRise linear both; animation-timeline: view(); animation-range: entry 0% cover 20%; }
    [data-reveal-gruppe] > *:nth-child(2) { animation-range: entry 8% cover 24%; }
    [data-reveal-gruppe] > *:nth-child(3) { animation-range: entry 16% cover 28%; }
    [data-reveal-gruppe] > *:nth-child(4) { animation-range: entry 24% cover 32%; }
    [data-reveal-gruppe] > *:nth-child(n+5) { animation-range: entry 30% cover 36%; }
    [data-reveal-bild] > img, [data-reveal-bild] > image-slot, [data-reveal-bild] > video { animation: skyZoomAus linear both; animation-timeline: view(); animation-range: cover 0% cover 55%; }
  }
  @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
    .stimmen-zeile { overflow: visible !important; width: max-content; padding-inline: var(--pad) !important; animation: skyLaufLinks linear both; animation-timeline: view(); animation-range: cover; --weg: -24%; }
    .stimmen-zeile:nth-child(even) { animation-name: skyLaufRechts; }
  }
}
@media (prefers-reduced-motion: no-preference) {
  .hero-glow { animation: skyGlow 22s ease-in-out infinite alternate; }
  [data-pos="in"] [data-hero-bild] image-slot { animation: skyZoomAus 9s var(--ease-out) both; }
  [data-hero-bild="zoom"] image-slot { animation: skyZoomAus 9s var(--ease-out) both; }
}

/* Maus: Karten heben sich, Bilder atmen, Knöpfe bekommen einen Lichtstreif */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-hebt] { transition: transform .25s var(--ease-out), box-shadow .25s ease; }
  [data-hebt]:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(31,18,51,.14); }
  [data-hebt] img, [data-rail] > article img { transition: transform .6s var(--ease-out); }
  [data-hebt]:hover img, [data-rail] > article:hover img { transform: scale(1.045); }
  a[data-track^="cta:"] { position: relative; isolation: isolate; overflow: hidden; }
  a[data-track^="cta:"]::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.38) 50%, transparent 65%); transform: translateX(-130%); transition: transform .7s var(--ease-out); pointer-events: none; }
  a[data-track^="cta:"]:hover::after { transform: translateX(130%); }
}

/* Live-Karte: was laut Kursplan gerade läuft oder als Nächstes kommt */
/* Kursplan-Leiste: flach, in Markenfarbe am unteren Bildrand (keine Glas-Karte, Jasper 01.10.) */
.jetzt-karte { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: grid; gap: 2px; padding: 14px 18px 16px; border-radius: 8px; background: #57416F; color: #fff; text-decoration: none; transition: background-color .2s ease; }
.jetzt-karte:hover { color: #fff; text-decoration: none; background: #77509E; }
.jetzt-kopf { font-family: var(--fd); font-size: 16px; letter-spacing: 0; text-transform: none; color: #CF8DEB; font-weight: 600; }
.jetzt-kopf .live-punkt { display: none; }
.jetzt-titel { font-family: var(--fd); font-weight: 700; font-size: clamp(20px, 1.9vw, 24px); line-height: 1.15; text-transform: uppercase; }
.jetzt-zeile { font-size: 14px; color: rgba(255,255,255,.86); font-variant-numeric: tabular-nums; }
.jetzt-balken { display: block; height: 4px; border-radius: 0; background: rgba(255,255,255,.22); overflow: hidden; margin-top: 6px; }
.jetzt-balken > span { display: block; height: 100%; background: #CF8DEB; transform-origin: left center; transform: scaleX(var(--s, 0)); transition: transform 1s var(--ease-out); }

/* Laufband: echte Kursnamen, groß, bewegt sich beim Scrollen */
.laufband { overflow: hidden; background: var(--aub); color: #fff; padding-block: clamp(26px, 4vw, 52px); display: grid; gap: clamp(2px, .6vw, 8px); }
.laufband-zeile { display: flex; width: max-content; --weg: -22%; }
.laufband-wort { font-family: var(--fd); font-weight: 600; font-size: clamp(2.5rem, 7.4vw, 6.2rem); line-height: 1.06; letter-spacing: -.035em; white-space: nowrap; display: inline-flex; align-items: center; gap: .34em; padding-right: .34em; }
.laufband-wort::after { content: ""; flex: 0 0 auto; width: .2em; height: .2em; border-radius: 50%; background: var(--sun); }
.laufband-wort[data-art="kontur"] { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.62); }
.laufband-wort[data-art="verlauf"] { background: linear-gradient(90deg, #DB65B8, #CF8DEB); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* Video-Band: Bewegtbild über die volle Breite */
.videoband { position: relative; overflow: hidden; background: var(--aub); color: #fff; min-height: clamp(440px, 74svh, 780px); display: grid; align-items: end; }
.videoband > video, .videoband > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.videoband-verlauf { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(26,16,48,.86) 0%, rgba(26,16,48,.62) 34%, rgba(26,16,48,.12) 64%, rgba(26,16,48,0) 80%), linear-gradient(180deg, rgba(26,16,48,0) 45%, rgba(26,16,48,.9) 100%); }
@media (max-width: 767px) { .videoband-verlauf { background: linear-gradient(180deg, rgba(26,16,48,.1) 0%, rgba(26,16,48,.55) 38%, rgba(26,16,48,.94) 78%); } .videoband { min-height: 560px; } }
.videoband-text { position: relative; z-index: 2; max-width: 1240px; width: 100%; margin: 0 auto; padding: clamp(40px, 6vw, 84px) var(--pad); }
.ki-marke { position: absolute; right: 12px; top: 12px; z-index: 3; font-size: 11px; letter-spacing: .06em; color: #fff; background: rgba(26,16,48,.74); border: 1px solid rgba(255,255,255,.28); padding: 4px 8px; border-radius: 4px; pointer-events: none; }

/* Stimmen-Wand: zwei Reihen, die beim Scrollen gegeneinander laufen; mobil wischbar */
.stimmen-wand { display: grid; gap: 16px; }
.stimmen-zeile { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px var(--pad) 14px; scrollbar-width: none; }
.stimmen-zeile::-webkit-scrollbar { display: none; }
.stimmen-zeile + .stimmen-zeile { display: none; }
@media (min-width: 768px) { .stimmen-zeile + .stimmen-zeile { display: flex; } }
.stimme { flex: 0 0 clamp(270px, 30vw, 390px); scroll-snap-align: start; margin: 0; background: #fff; color: #472C63; border-radius: 14px; padding: 22px 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.stimme blockquote { margin: 0; font-size: 16px; line-height: 1.6; text-wrap: pretty; }
.stimme figcaption { margin-top: auto; font-size: 13.5px; color: #57416F; }
.stimme:nth-child(3n+2) { background: #F4E2FF; }
.stimme:nth-child(3n) { background: #EDD1FF; }

/* Status-Punkt für alle Seiten: ruhig, statisch, 6 px (grün = geöffnet, grau = zu über data-zu="true") */
.live-punkt { flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: #1F9D55; display: inline-block; animation: none; box-shadow: none; }
.live-punkt[data-zu="true"] { background: #9A8BA8; }

/* Startseite/Studioseite: heutige Kurse als ruhige Liste mit dünnen Trennlinien */
.live-liste { margin-top: 22px; flex: 1 1 100%; }
.live-kopf { margin: 0 0 8px; display: flex; align-items: center; gap: 9px; font-family: var(--ft, 'Poppins', sans-serif); font-size: 15px; font-weight: 600; color: var(--ink); }
.live-eintraege { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); column-gap: 28px; }
.live-eintraege li { border-top: 1px solid var(--line); }
.live-eintraege a { display: flex; align-items: baseline; gap: 12px; min-height: 44px; padding: 10px 0; color: var(--ink); font-size: 15px; text-decoration: none; }
.live-eintraege a:hover { color: var(--vio); text-decoration: none; }
.live-eintraege strong { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 3.1em; }
.live-eintraege em { font-style: normal; font-weight: 600; color: var(--beere); margin-left: auto; font-size: 14px; white-space: nowrap; }

/* Gemeinsame Bausteine für Kontakt- und Studioseite (28.09.2026) */
.knopf-zweit { display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 0 16px; border-radius: 8px; border: 1px solid var(--line); background: #fff; color: var(--ink); font-weight: 600; font-size: 15.5px; }
.knopf-zweit:hover { border-color: var(--vio); color: var(--ink); text-decoration: none; }
.knopf-zweit .ico { color: var(--vio); }
.knopf-voll { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 18px; border-radius: 8px; background: var(--grad); color: #fff; font-family: var(--fd); font-weight: 600; font-size: 17px; }
.knopf-voll:hover { color: #fff; text-decoration: none; filter: brightness(1.06); }
.block-kopf { display: flex; align-items: center; gap: 10px; font-family: var(--fd); font-weight: 600; font-size: 19px; margin: 0 0 10px; }
.block-kopf .ico { color: var(--vio); width: 22px; height: 22px; }
.zeiten { margin: 0; display: grid; gap: 2px; }
.zeiten .zeile { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 16px; padding: 9px 12px; border-radius: 8px; font-variant-numeric: tabular-nums; }
.zeiten .zeile[data-heute="true"] { background: transparent; }
.zeiten dt { color: var(--mut); }
.zeiten .zeile[data-heute="true"] dt, .zeiten .zeile[data-heute="true"] dd { color: var(--beere); font-weight: 700; }
.zeiten dd { margin: 0; text-align: right; }
.anfahrt { list-style: none; margin: 0; padding: 0; display: grid; }
.anfahrt li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--line); }
.anfahrt li:first-child { border-top: 0; }
.anfahrt .ico { color: var(--vio); width: 22px; height: 22px; margin-top: 2px; }

/* Startseite: gewählte Studiokarte im Wähler deutlich markieren */
[data-track="studio:select"][aria-pressed="true"] { border-color: var(--vio) !important; box-shadow: 0 0 0 1px var(--vio); }


/* ===== Runde 3 Startseite (02.10.2026): Herbst-LP-Stimmung + Marke ===== */
h1, h2, .hero-titel, .fuss-claim { font-family: var(--fh, 'Playfair Display'), Georgia, serif !important; font-style: italic; font-weight: 800 !important; letter-spacing: -.01em !important; line-height: 1.04 !important; }
.kicker-hell { margin: 0 0 14px; font-family: var(--fd); font-weight: 600; font-size: 17px; text-transform: uppercase; color: #CF8DEB; }

/* Laufband läuft endlos durch, gegenläufig je Reihe; bei reduzierter Bewegung steht es */
.laufband-zeile { animation: lbLauf var(--lb-dauer, 70s) linear infinite; }
.laufband-zeile:nth-child(even) { animation-direction: reverse; --lb-dauer: 80s; }
@keyframes lbLauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .laufband-zeile { animation: none; } }

/* Hero: randlos über volle Breite und Höhe */
.hero-voll { position: relative; background: #1C0B16; color: #fff; overflow: hidden; }
.hero-buehne { display: grid; min-height: min(calc(100svh - 72px), 880px); }
.hero-slide { grid-area: 1 / 1; position: relative; display: grid; align-items: end; min-height: inherit; }
.hero-bild { position: absolute; inset: 0; overflow: hidden; background: #2A1838; }
.hero-bild image-slot { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.hero-bild .ki-label { top: auto; bottom: 12px; right: 12px; }
.hero-verlauf { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgba(28,11,22,.94) 0%, rgba(28,11,22,.78) 34%, rgba(28,11,22,.25) 66%, rgba(28,11,22,.05) 100%), linear-gradient(0deg, rgba(28,11,22,.85) 0%, rgba(28,11,22,0) 38%); }
.hero-text { position: relative; z-index: 2; width: 100%; max-width: 1240px; margin: 0 auto; padding: clamp(48px,8vw,110px) var(--pad) clamp(150px,14vw,190px); }
.hero-text > * { max-width: 620px; }
.hero-kicker { margin: 0 0 16px; font-family: var(--fd); font-weight: 600; font-size: clamp(16px,1.6vw,19px); text-transform: uppercase; color: #CF8DEB; }
.hero-titel { font-size: clamp(2.7rem, 7.4vw, 6rem) !important; margin: 0 0 22px; overflow-wrap: break-word; hyphens: auto; color: #fff; }
.hero-sub { font-size: clamp(17px,1.8vw,20px); color: rgba(255,255,255,.88); margin: 0 0 22px; max-width: 46ch !important; text-wrap: pretty; }
.hero-punkte { list-style: none; margin: 0 0 30px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
.hero-punkte li { font-family: var(--fd); font-weight: 600; font-size: 18px; text-transform: uppercase; color: #fff; display: flex; align-items: center; gap: 10px; }
.hero-punkte li::before { content: ""; width: 18px; height: 2px; background: #CF8DEB; }
.hero-leiste { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; pointer-events: none; }
.hero-leiste-innen { max-width: 1240px; margin: 0 auto; padding: 0 var(--pad) clamp(20px,3vw,34px); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 32px; }
.hero-leiste-innen > * { pointer-events: auto; }
.hero-schnell p { margin: 0 0 8px; font-family: var(--fd); font-weight: 600; font-size: 16px; text-transform: uppercase; color: #CF8DEB; }
.hero-jetzt { margin-left: auto; width: min(100%, 340px); position: relative; }
.hero-jetzt .jetzt-karte { position: relative; border-radius: 6px; background: #8E1D4E; }
.hero-jetzt .jetzt-karte:hover { background: #B02B8D; }
.hero-jetzt .jetzt-kopf { color: #F4E2FF; }
@media (max-width: 899px) {
  .hero-buehne { min-height: 0; }
  .hero-slide { min-height: 0; align-items: stretch; grid-template-rows: 46svh auto; }
  .hero-bild { position: relative; inset: auto; grid-row: 1; min-height: 300px; }
  .hero-verlauf { bottom: auto; height: max(46svh, 300px); background: linear-gradient(180deg, rgba(28,11,22,0) 35%, rgba(28,11,22,.85) 80%, #1C0B16 100%); }
  .hero-text { grid-row: 2; margin-top: -90px; padding: 0 var(--pad) 24px; }
  .hero-leiste { position: relative; }
  .hero-jetzt { margin-left: 0; width: 100%; }
}

/* Dein Studio: Eingangsfotos statt Kärtchen */
.studio-wahl { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: clamp(10px,1.6vw,20px); }
@media (max-width: 899px) { .studio-wahl { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.studio-tor { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.studio-tor:focus-visible { outline: 3px solid #B02B8D; outline-offset: 4px; }
.studio-tor-bild { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #2A1838; outline: 3px solid transparent; outline-offset: 3px; transition: outline-color .2s; }
.studio-tor-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1), filter .3s; filter: saturate(.85); }
.studio-tor-bild[data-ohne="true"] { background: linear-gradient(160deg, #57416F, #1C0B16); display: flex; align-items: center; justify-content: center; }
.studio-tor-name { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 800; font-size: clamp(1.8rem, 3.4vw, 3rem); color: rgba(255,255,255,.9); }
.studio-tor[aria-pressed="true"] .studio-tor-bild { outline-color: #B02B8D; }
.studio-tor[aria-pressed="true"] .studio-tor-bild img { filter: none; }
@media (hover: hover) { .studio-tor:hover .studio-tor-bild img { transform: scale(1.04); filter: none; } }
.studio-tor-text { display: grid; gap: 2px; }
.studio-tor-titel { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 800; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.05; color: #1C0B16; }
.studio-tor-zeile { font-size: 14.5px; color: #57416F; }
.studio-tor-mark { font-family: var(--fd); font-weight: 700; font-size: 16px; text-transform: uppercase; color: #77509E; }
.studio-tor[aria-pressed="true"] .studio-tor-mark { color: #B02B8D; }
.studio-tor[data-track="studio:select"][aria-pressed="true"] { box-shadow: none !important; border-color: transparent !important; }
.studio-tor[aria-pressed="true"] .studio-tor-bild { outline-width: 2px; }

/* Ein Raum nur für dich: ruhig, redaktionell */
.raum { background: #1C0B16; color: #fff; }
.raum-innen { max-width: 1240px; margin: 0 auto; padding: clamp(64px,9vw,128px) var(--pad); }
.raum-kopf { max-width: 640px; margin-bottom: clamp(40px,6vw,80px); }
.raum-kopf h2 { font-size: clamp(2.4rem, 5.6vw, 4.4rem) !important; margin: 0 0 18px; }
.raum-intro { margin: 0; font-size: 18px; color: rgba(255,255,255,.8); max-width: 46ch; }
.raum-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(48px,7vw,96px); }
.raum-teil { display: grid; grid-template-columns: minmax(0,5fr) minmax(0,7fr); gap: clamp(24px,5vw,72px); align-items: center; }
.raum-teil:nth-child(even) { grid-template-columns: minmax(0,7fr) minmax(0,5fr); }
.raum-teil:nth-child(even) .raum-bild { order: 2; }
.raum-bild { margin: 0; aspect-ratio: 4 / 3; max-height: 340px; overflow: hidden; border-radius: 4px; background: #2A1838; }
.raum-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.raum-nr { display: block; font-family: var(--fd); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.8rem); line-height: 1; color: #CF8DEB; margin-bottom: 12px; }
.raum-text h3 { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 800; font-size: clamp(2.1rem, 4vw, 3.4rem); line-height: 1.05; margin: 0 0 18px; }
.raum-text p { margin: 0; font-size: clamp(17px, 1.5vw, 18px); line-height: 1.6; color: rgba(255,255,255,.84); max-width: 54ch; }
@media (max-width: 767px) { .raum-teil, .raum-teil:nth-child(even) { grid-template-columns: 1fr; } .raum-bild { max-height: 260px; } .raum-teil:nth-child(even) .raum-bild { order: 0; } }

/* Alles drin: typografische Liste */
.alles { background: #F6F1EE; }
.alles-innen { max-width: 1240px; margin: 0 auto; padding: clamp(64px,9vw,128px) var(--pad); display: grid; grid-template-columns: minmax(0,4fr) minmax(0,7fr); gap: clamp(32px,6vw,96px); align-items: start; }
.alles-kopf { position: sticky; top: 110px; }
.alles-kopf h2 { font-size: clamp(2.6rem, 6vw, 4.8rem) !important; margin: 0 0 16px; color: #1C0B16; }
.alles-kopf p { margin: 0; font-size: 17px; color: #57416F; max-width: 30ch; }
.alles-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(30px,4vw,48px); }
.alles-liste > li { display: grid; grid-template-columns: 64px minmax(0,1fr); gap: 0 18px; min-width: 0; }
.alles-nr { font-family: var(--fd); font-weight: 700; font-size: 22px; color: #B02B8D; padding-top: 6px; }
.alles-text { min-width: 0; }
.alles-text h3 { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 800; font-size: clamp(1.6rem, 2.8vw, 2.3rem); line-height: 1.08; margin: 0 0 10px; color: #1C0B16; }
.alles-text > p { margin: 0; font-size: 17px; color: #57416F; max-width: 52ch; text-wrap: pretty; }
@media (max-width: 899px) { .alles-innen { grid-template-columns: 1fr; } .alles-kopf { position: static; } .alles-liste > li { grid-template-columns: 44px minmax(0,1fr); } }

/* Kurs-Kacheln: Stillleben mit Logo */
.kurs-kachel-bild { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; background: #2A1838; }
.kurs-kachel-bild > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.22,.61,.36,1); }
.kurs-kachel-bild::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(28,11,22,.55), rgba(28,11,22,0) 45%); pointer-events: none; }
.kurs-kachel-logo { position: absolute; left: 14px; bottom: 14px; z-index: 2; height: 58px; max-width: calc(100% - 28px); padding: 10px 14px; background: #fff; border-radius: 4px; display: flex; align-items: center; }
.kurs-kachel-logo img { display: block; height: 100%; width: auto; max-width: 180px; object-fit: contain; }
@media (hover: hover) { .kurs-kachel:hover .kurs-kachel-bild > img { transform: scale(1.04); } }

/* Fuß: groß und reich wie auf der Herbst-LP */
.fuss { background: #1C0B16; color: rgba(255,255,255,.78); }
.fuss a { color: rgba(255,255,255,.86); }
.fuss a:hover { color: #fff; }
.fuss-oben { max-width: 1240px; margin: 0 auto; padding: clamp(64px,9vw,120px) var(--pad) clamp(40px,6vw,72px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 28px 48px; border-bottom: 1px solid rgba(255,255,255,.12); }
.fuss-claim { margin: 0; font-size: clamp(3rem, 8vw, 6.6rem) !important; color: #fff; line-height: .98 !important; }
.fuss-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 26px; }
.fuss-raster { max-width: 1240px; margin: 0 auto; padding: clamp(40px,6vw,72px) var(--pad); display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap: 40px clamp(24px,4vw,56px); }
@media (max-width: 1023px) { .fuss-raster { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 599px) { .fuss-raster { grid-template-columns: 1fr; } }
.fuss h3 { margin: 0 0 16px; font-family: var(--fd); font-weight: 700; font-size: 19px; text-transform: uppercase; color: #CF8DEB; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 16px; }
.fuss p { margin: 0; font-size: 15.5px; max-width: 34ch; }
.fuss-marke { display: grid; gap: 20px; align-content: start; }
.fuss-studios { gap: 18px !important; }
.fuss-studios li { display: grid; gap: 0; }
.fuss-studios li > a:first-child { font-family: 'Playfair Display', Georgia, serif; font-style: italic; font-weight: 800; font-size: 20px; color: #fff; min-height: 32px; }
.fuss-studios li > span { font-size: 14.5px; color: rgba(255,255,255,.62); }
.fuss-tel { font-size: 14.5px; min-height: 32px !important; }
.fuss-sozial { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); color: #fff !important; display: inline-flex; align-items: center; justify-content: center; }
.fuss-unten { max-width: 1240px; margin: 0 auto; padding: 24px var(--pad) 44px; border-top: 1px solid rgba(255,255,255,.12); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; }
.fuss-unten p { font-size: 13px; color: rgba(255,255,255,.55); max-width: 90ch; }

/* ================= Handy und Tablet (Prüfung 06.10.2026) =================
   Gilt für alle Seiten: Kopf, feste Leiste, Tippflächen, Schrift, Sprungmarken, Umbrüche. */

/* Sprungmarken: Ziel landet unter dem Kopf (Kopfhöhe + 12 px) statt dahinter */
html:root { scroll-padding-top: 0 !important; }
[id] { scroll-margin-top: 92px; }
@media (max-width: 699px) { [id] { scroll-margin-top: 112px; } }

/* Kopf auf dem Handy: eine Navigationszeile, schmaler, blendet beim Runterscrollen aus */
@media (max-width: 699px) {
  body header > div { padding-block: 4px !important; row-gap: 0 !important; flex-wrap: wrap !important; }
  body header nav[aria-label="Hauptnavigation"] { flex-wrap: nowrap !important; width: 100% !important; margin-left: 0 !important; justify-content: space-between !important; gap: clamp(6px, 3vw, 20px) !important; }
  body header nav[aria-label="Hauptnavigation"] > a,
  body header nav[aria-label="Hauptnavigation"] summary { white-space: nowrap; padding-inline: 2px !important; min-width: 44px; justify-content: center; text-align: center; }
  section[aria-labelledby="signature-titel"] > div > div > div:first-child { top: 98px !important; }
  body header [data-track="cta:header"] { min-height: 44px !important; }
  body header { transition: transform .26s var(--ease-out, ease-out); will-change: transform; }
  html.kopf-weg body header { transform: translateY(-101%); }
  html.kopf-weg body:has(header details[open]) header { transform: none; }
  /* Scrollytelling-Bühne (Startseite) folgt dem Kopf */
  section[aria-labelledby="signature-titel"] > div > div > div:first-child { transition: top .26s var(--ease-out, ease-out); }
  html.kopf-weg section[aria-labelledby="signature-titel"] > div > div > div:first-child { top: 0 !important; }
}
@media (max-width: 359px) {
  body header nav[aria-label="Hauptnavigation"] a,
  body header nav[aria-label="Hauptnavigation"] summary { font-size: 16px !important; }
  body .w-nav a { font-size: 17px !important; }
  body header nav[aria-label="Hauptnavigation"] { gap: 4px !important; }
}
@media (prefers-reduced-motion: reduce) {
  body header, section[aria-labelledby="signature-titel"] > div > div > div:first-child { transition: none !important; }
}
/* Querformat am Handy: Kopf nicht sticky, keine feste Leiste (Bildschirm ist nur ~ 360 px hoch) */
@media (max-height: 480px) {
  body header { position: static !important; transform: none !important; }
  [data-sticky-cta] { display: none !important; }
  [id] { scroll-margin-top: 16px; }
  section[aria-labelledby="signature-titel"] > div > div > div:first-child { top: 0 !important; }
}

/* Feste untere Leiste */
[data-sticky-cta] a[data-track="cta:sticky"] { font-size: clamp(14px, 4.2vw, 17px) !important; padding-inline: 12px !important; text-align: center; line-height: 1.25; }
[data-sticky-cta] a[data-track="tel:sticky"] { white-space: nowrap; font-size: clamp(14px, 4.2vw, 16px) !important; gap: 8px !important; padding-inline: 8px; min-width: 0; }
[data-sticky-cta] a[data-track*="sticky-studios"] { white-space: nowrap; font-size: 14px !important; padding: 0 12px !important; }
@media (max-width: 359px) {
  [data-sticky-cta] { gap: 8px !important; }
  [data-sticky-cta] a[data-track="tel:sticky"] .ico { width: 20px; height: 20px; }
  [data-sticky-cta] a[data-track*="sticky-studios"] { white-space: normal; max-width: 96px; padding: 0 10px !important; text-align: center; justify-content: center; line-height: 1.15; }
}

/* Tippflächen mindestens 44 px (Prüfung 06.10.2026): alleinstehende Textlinks bekommen echte Höhe */
a[data-track="link:hero-preise"], a[data-track="link:team-probetraining"], a[data-track="link:kursplan"], a[data-track="link:probetraining-seite"],
a[data-track="link:kinderbetreuung-seite"], a[data-track="link:google-bewertungen"], a[data-track="link:geraete"], a[data-track="link:kursschiene"],
a[data-track="kurse:live"], a[data-track^="tel:"]:not([data-track="tel:sticky"]), a[data-track="kontakt:app-ios"], a[data-track="kontakt:app-android"],
a[data-track="kontakt:instagram"], a[data-track="kontakt:facebook"], a[data-track="cta:preise"].ph-probe, a.ph-probe, a[data-track="link:studioseite"], a[data-track="link:studiokarte-route"],
#dc-root a[data-track="kontakt:route"], #dc-root a[data-track="fuss:kuendigen"], #dc-root .w-fuss-unten nav a, #dc-root label a {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
#dc-root a[data-track="kontakt:route"], #dc-root a[data-track="link:studiokarte-route"] { justify-content: center; }
#dc-root label a { min-height: 0; }
#dc-root label a::after { inset: -14px -4px; }
.w-fuss-unten nav { gap: 0 6px !important; }
.w-fuss-unten nav a { padding-inline: 8px; justify-content: center; }
.w-fuss-sozial a, .fuss-sozial { min-width: 46px; }
/* Tel-Links im Fließtext: ganze Nummer in einer Zeile */
a[href^="tel:"] { white-space: nowrap; }
/* Formular: Checkboxen, Label als 44-px-Tippfläche */
label:has(> input[type="checkbox"]), label:has(> input[type="radio"]) { display: flex; align-items: center; gap: 12px; min-height: 44px; cursor: pointer; }
input[type="checkbox"], input[type="radio"] { flex: 0 0 auto; }
/* Kursseite: Filterchips und „Im Kursplan zeigen“ */
.filter-chip { min-height: 44px; }
button[data-track="kurse:im-plan"] { min-height: 44px; padding-inline: 14px; }

/* Schrift unter 14 px */
.w-fuss-raster li small, .w-fuss-unten .klein, .w-fuss-unten, .fuss-unten p { font-size: 14px !important; }
.ki-label, .ki-marke { font-size: 12px; }

/* Umbrüche: Beträge, Uhrzeiten und Nummern zusammenhalten */
.nobr, [data-nobr] { white-space: nowrap; }

/* Hersteller-Logos nie verzerren: nur eine Dimension fest, die andere auto */
.ge-logo img { flex: 0 0 auto; object-fit: contain !important; object-position: left center; width: auto !important; max-width: 100%; height: clamp(32px, 3.4vw, 48px); }
img[src*="hersteller/"] { object-fit: contain; object-position: left center; }
a[data-track="link:allesdrin-kurse"], a[data-track="kontakt:probetraining"], a[data-track="link:preise"], a[data-track="wellpass:firmen-mail"], a[data-track="kursplan:kurs"],
a[data-track="kontakt:probetraining-studio"], a[data-track="link:kinder-probetraining"] { display: inline-flex; align-items: center; min-height: 44px; }
a[data-track="wellpass:firmen-mail"] { overflow-wrap: anywhere; }
body header summary[data-track="nav:studios"] { min-height: 44px; }
input[type="radio"] { width: 24px !important; height: 24px !important; }

/* Knopftexte: auch bei Zeilenumbruch mittig */
a[data-track^="cta:"], a[data-track="tel:kinder-probetraining"], a[data-track^="tel:"].knopf-voll, a.w-fuss-knopf, a.w-kopf-cta, a[data-track="cta:kinder-probetraining"] { text-align: center; }
a[data-track^="cta:"]:not([data-track="cta:header"]):not([data-track="cta:sticky"]) { justify-content: center; }

/* Studio-Umschalter im Hero (Studioseite): nie 4 + 1, ab 560 px eine Reihe, darunter Label oben und 4 Spalten */
nav.studio-wahl { flex-wrap: nowrap !important; align-items: center !important; }
@media (max-width: 559px) {
  nav.studio-wahl { display: grid !important; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 0 8px !important; font-size: clamp(16px, 4.8vw, 20px) !important; }
  nav.studio-wahl .studio-wahl-label { grid-column: 1 / -1; }
}

/* Studio-Tabs (Probetraining, Buchung): immer vier in einer Reihe oder 2 x 2, nie 3 + 1 */
div:not(.ge-tabs-innen):has(> .studio-tabs) { container-type: inline-size; }
div:not(.ge-tabs-innen) > .studio-tabs { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.studio-tabs--dunkel { max-width: 560px; }
div:not(.ge-tabs-innen) > .studio-tabs .studio-tab { padding-inline: 8px; }
@container (max-width: 400px) { div:not(.ge-tabs-innen) > .studio-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Buchung: Uhrzeiten als gleich breite Spalten, Tagesleiste mit Ausblendverlauf als Wisch-Hinweis */
@media (max-width: 559px) {
  .zeit-raster, div:has(> button[data-track="buchung:zeit"]) { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
  div:has(> button[data-track="buchung:zeit"]) > button { padding-inline: 8px !important; }
}
div:has(> button[data-track="buchung:tag"]) { scrollbar-width: none; }
div:has(> button[data-track="buchung:tag"])::-webkit-scrollbar { display: none; }
div:has(> button[data-track="buchung:tag"])[data-mehr="1"] { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 36px), transparent); }

/* Startseite-Hero auf Tablet und im Querformat (Prüfung 06.10.2026): nie höher als nötig, Knopf im ersten Bildschirm */
@media (min-width: 900px) and (max-height: 1000px) {
  .hero-buehne { min-height: min(calc(100svh - 80px), 880px); }
  .hero-text { padding-top: clamp(24px, 3.6svh, 44px); }
  .hero-kicker { margin-bottom: 10px; }
  .hero-titel { font-size: clamp(2.6rem, min(7.4vw, 9.4svh), 6rem) !important; margin-bottom: 14px; }
  .hero-sub { margin-bottom: 14px; }
  .hero-punkte { margin-bottom: 18px; }
}
@media (min-width: 600px) and (max-width: 899px) and (min-height: 700px) {
  .hero-slide { grid-template-rows: min(34svh, 380px) auto; }
  .hero-bild { min-height: 220px; }
  .hero-verlauf { height: max(34svh, 220px); }
}
@media (max-height: 520px) and (orientation: landscape) and (max-width: 899px) {
  .hero-buehne { min-height: 0; }
  .hero-slide { grid-template-rows: auto; align-items: end; min-height: 0; }
  .hero-bild { position: absolute; inset: 0; min-height: 0; grid-row: auto; }
  .hero-verlauf { inset: 0; height: auto !important; bottom: 0; background: linear-gradient(90deg, rgba(28,11,22,.94) 0%, rgba(28,11,22,.8) 45%, rgba(28,11,22,.3) 80%, rgba(28,11,22,.1) 100%), linear-gradient(0deg, rgba(28,11,22,.8) 0%, rgba(28,11,22,0) 40%); }
  .hero-text { grid-row: auto; margin-top: 0; padding: 20px var(--pad) 24px; }
  .hero-titel { font-size: clamp(2rem, 9svh, 3.2rem) !important; margin-bottom: 10px; }
  .hero-sub { margin-bottom: 12px; font-size: 16px; }
  .hero-punkte { display: none; }
  .hero-kicker { margin-bottom: 6px; }
}

/* Fließtext nicht breiter als 65 Zeichen (Tablet und Desktop) */
main p:not([class*="hero"]):not([style*="max-width"]):not(.ki-label), main li > p { max-width: 65ch; }
.ph-rechnung { max-width: 65ch; }

/* Hero-Text hält Abstand zur Leiste darunter; die Höhe der Leiste misst resp.js (bricht sie um, wird sie höher) */
@media (min-width: 900px) { .hero-text { padding-bottom: calc(var(--leiste-h, 150px) + 20px); } }
@media (min-width: 900px) {
  .hero-leiste-innen { gap: 12px 24px; }
  .hero-jetzt { width: min(100%, 300px); }
  .hero-jetzt .jetzt-karte { padding: 10px 16px 12px; }
}
a[data-track="kurse:live"], a[data-track="link:studiokarte-route"], a[data-track="link:studioseite"], a[data-track="tel:studiokarte"], a.knopf-zweit { min-height: 44px !important; }
a[data-track="link:studiokarte-route"], nav.studio-wahl a { min-width: 44px; justify-content: center; }
div > a[href="Datenschutz.dc.html"]:not([data-track]) { display: inline-flex; align-items: center; min-height: 44px; }
/* Footer-Ende bleibt über der festen Leiste lesbar */
@media (max-width: 899px) { body:has([data-sticky-cta]) .w-fuss-unten { padding-bottom: calc(96px + env(safe-area-inset-bottom)) !important; } }
@media (max-height: 480px) { body:has([data-sticky-cta]) .w-fuss-unten { padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important; } }


/* Ankündigungsleiste: ganz oben über dem Kopf, scrollt mit der Seite weg (Kopf bleibt sticky). Laufband von links nach rechts. */
.ankuendigung { display: block; position: relative; z-index: 61; background: #1C0B16; color: #F6F1EE; overflow: hidden; text-decoration: none; font-family: 'Poppins', sans-serif; font-size: 14.5px; line-height: 1; border-bottom: 1px solid rgba(207,141,235,.22); }
.ankuendigung:hover, .ankuendigung:focus-visible { color: #fff; text-decoration: none; }
.ankuendigung:focus-visible { outline: 2px solid #CF8DEB; outline-offset: -3px; border-radius: 0; }
.ankuendigung-spur { display: flex; width: max-content; min-height: 40px; align-items: center; animation: ankLauf 40s linear infinite; will-change: transform; }
.ankuendigung:hover .ankuendigung-spur, .ankuendigung:focus-visible .ankuendigung-spur { animation-play-state: paused; }
.ankuendigung-haelfte { display: flex; flex: 0 0 auto; }
.ankuendigung-reihe { display: flex; flex: 0 0 auto; align-items: center; margin: 0; padding: 0; list-style: none; }
.ankuendigung-reihe li { display: flex; align-items: center; white-space: nowrap; }
.ankuendigung-reihe li > span { display: block; }
.ankuendigung-reihe li::after { content: ""; width: 5px; height: 5px; border-radius: 50%; background: #CF8DEB; margin: 0 clamp(18px, 2.4vw, 32px); flex: 0 0 auto; }
.ankuendigung-reihe strong { font-weight: 600; }
@media (pointer: coarse) { .ankuendigung-spur { min-height: 44px; } }
@keyframes ankLauf { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .ankuendigung-spur { animation: none; width: auto; flex-wrap: wrap; justify-content: center; padding: 8px var(--pad, 16px); row-gap: 2px; }
  .ankuendigung-reihe { flex-wrap: wrap; justify-content: center; }
  .ankuendigung-reihe li { white-space: normal; }
  .ankuendigung-haelfte { flex-wrap: wrap; justify-content: center; }
  .ankuendigung-haelfte[aria-hidden="true"], .ankuendigung-reihe[aria-hidden="true"] { display: none; }
  .ankuendigung-reihe li:last-child::after { display: none; }
}