/*
 * CaWaGo-Webseite – Stil der DoWaGo-Webseite (Blaupause, scripts/website in DoWaGo), umgefärbt auf
 * „Minze & Mitternacht“ wie die App (src/lib/theme.ts): Sonne → Minze, Lila → Ozeanblau, Lavendel → Eisblau.
 * Zuerst fürs Handy (390 px), ab 720 px Tablet, ab 1100 px Desktop.
 * Keine Inline-Styles: Der Server erlaubt nur Stile und Skripte aus eigenen Dateien (CSP).
 */

/* Schrift Outfit, selbst gehostet (SIL Open Font License, siehe /fonts/OFL.txt) */
@font-face{font-family:'Outfit';font-style:normal;font-display:swap;font-weight:400;src:url(/fonts/outfit-400.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-display:swap;font-weight:500;src:url(/fonts/outfit-500.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/outfit-600.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-display:swap;font-weight:700;src:url(/fonts/outfit-700.woff2) format('woff2')}
@font-face{font-family:'Outfit';font-style:normal;font-display:swap;font-weight:800;src:url(/fonts/outfit-800.woff2) format('woff2')}
/* Pixelify Sans (OFL, fonts/OFL-PixelifySans.txt) – für Sprechblasen der Pixel-Katze */
@font-face{font-family:'Pixelify Sans';font-style:normal;font-display:swap;font-weight:600;src:url(/fonts/pixelify-600.ttf) format('truetype')}

:root{
  --text:#0F2A3D;
  --text-2:#163A4A;
  --muted:#48606F;
  --ground:#F0F3F1;
  --card:#FFFFFF;
  --ozean:#1F5E8A;
  --ozean-text:#174B70;
  --eisblau:#BFE0F2;
  --eisblau-flaeche:#E2F0F6;
  --knopf-text-2:#174B70;
  --nacht:#0F2A3D;
  --schatten-handy:0 24px 60px rgba(15,42,61,.18),0 4px 12px rgba(15,42,61,.08);
  --knopf-verlauf:linear-gradient(180deg,rgba(255,255,255,.34) 0%,rgba(255,255,255,0) 58%),linear-gradient(135deg,#74AEDB 0%,#BFE0F2 100%);
  --minze:linear-gradient(115deg,rgba(255,255,255,0) 6%,rgba(255,255,255,.28) 20%,rgba(255,255,255,0) 34%,rgba(255,255,255,0) 50%,rgba(255,255,255,.17) 63%,rgba(255,255,255,0) 76%),radial-gradient(120% 80% at 12% 0%,rgba(255,255,255,.2) 0%,rgba(255,255,255,0) 55%),linear-gradient(140deg,#B4F0DC 0%,#6FD3BE 50%,#3DB0A8 100%);
  --dunst:linear-gradient(180deg,#CBE8E2 0%,#DCEEEA 26%,#F0F3F1 52%);
  /* Glas wie die Karten der App: leicht durchscheinend (ohne echte Unschärfe, die kostet beim Scrollen Akku),
     oben ein heller Schimmer, eine Lichtkante und ein weicher Schatten */
  --glas:rgba(255,255,255,.72);
  --glas-glanz:linear-gradient(172deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.08) 34%,rgba(255,255,255,0) 50%);
  --glas-kante:rgba(255,255,255,.75);
  --glas-licht:inset 0 1px 0 rgba(255,255,255,.95);
  --glas-schatten:0 0 0 .5px rgba(15,42,61,.06),0 2px 6px rgba(15,42,61,.05),0 12px 32px rgba(15,42,61,.08);
  /* Glassteine: Symbol-Kacheln und Flächen in Karten (zart eisblau) */
  --glas-kachel:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 60%),rgba(226,240,246,.8);
  --glas-kachel-licht:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(31,94,138,.08);
  /* Zweite Knöpfe und Chips: zart eisblaues Glas wie buttonTonal in der App */
  --glas-tonal:rgba(31,94,138,.13);
  --glas-tonal-kante:rgba(31,94,138,.35);
  --rand:20px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
/* Handy-Gefühl: kein grauer Tipp-Kasten (oben), Knöpfe und Links ohne Doppeltipp-Wartezeit, Knopf-Texte
   nicht versehentlich markierbar (Texte der Seite bleiben markierbar). Hover-Regeln stehen alle in
   @media (hover:hover) and (pointer:fine), sonst bleibt :hover auf dem Handy nach dem Antippen hängen. */
a,button,summary{touch-action:manipulation}
.knopf,.band__menue-knopf,.frage summary{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
/* Hintergrund wie die Startseiten der App: Dunst oben, darüber weiche Farbflecken (Minze rechts, Eisblau links,
   Petrol unten), die beim Scrollen stehen bleiben – so hat das Glas etwas, das durchscheint */
html{background:linear-gradient(180deg,#CBE8E2 0,#DCEEEA 26svh,#F0F3F1 52svh) no-repeat,var(--ground)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 92% 46%,rgba(111,211,190,.5) 0,rgba(111,211,190,0) min(48vw,460px)),radial-gradient(circle at 6% 78%,rgba(116,174,219,.42) 0,rgba(116,174,219,0) min(54vw,520px)),radial-gradient(circle at 94% 104%,rgba(61,176,168,.26) 0,rgba(61,176,168,0) min(50vw,480px))}
body{margin:0;color:var(--text);font-family:'Outfit','Avenir Next','Segoe UI',sans-serif;font-size:1rem;line-height:1.5}
img,svg{display:block}
a{color:var(--ozean-text)}
@media (hover:hover) and (pointer:fine){a:hover{color:var(--text)}}
:focus-visible{outline:3px solid var(--ozean);outline-offset:3px;border-radius:6px}
h1,h2,h3,p{margin:0}
.ab-tablet{display:none}
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.weiter-zum-inhalt{position:absolute;left:12px;top:-60px;z-index:20;padding:12px 16px;border-radius:12px;background:var(--nacht);color:#fff;font-weight:700;text-decoration:none}
.weiter-zum-inhalt:focus{top:12px;color:#fff}

/* Platzhalter, die noch entschieden oder nachgereicht werden (im Mockup gestrichelt) */
.platzhalter{display:inline-block;padding:2px 12px;border-radius:8px;border:1.5px dashed var(--ozean);color:var(--ozean-text);font-weight:600}

/* ---------- Knöpfe ---------- */
.knopf{display:flex;align-items:center;justify-content:center;gap:12px;width:100%;height:54px;padding:0 32px;border-radius:27px;font-size:1.125rem;font-weight:700;text-decoration:none;text-align:center;line-height:1.2}
.knopf--primaer{background:var(--knopf-verlauf);color:var(--text);box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 9px 23px rgba(31,94,138,.28)}
.knopf--sekundaer{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.15) 60%),var(--glas-tonal);border:1px solid var(--glas-tonal-kante);box-shadow:inset 0 1px 0 rgba(255,255,255,.85);color:var(--knopf-text-2)}
.knopf--nacht{background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 55%),var(--nacht);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 8px 20px rgba(15,42,61,.25)}
@media (hover:hover) and (pointer:fine){.knopf--primaer:hover,.knopf--sekundaer:hover{color:var(--text);filter:brightness(1.03)}}
@media (hover:hover) and (pointer:fine){.knopf--nacht:hover{color:#fff;background:linear-gradient(180deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,0) 55%),#163A4A}}
.knoepfe{display:flex;flex-direction:column;gap:12px}
/* Feedback schon beim Drücken, nicht erst beim Loslassen (menu.js meldet dafür touchstart an,
   sonst zeigt iOS-Safari :active nicht) */
.knopf,.band__menue-knopf{transition:transform 100ms ease-out}
.knopf:active,.band__menue-knopf:active{transform:scale(.97)}
/* Menü-Knopf: runder Glas-Knopf wie Glocke und Nachrichten in der App – wächst beim Antippen kurz */
.band__menue-knopf{transition-duration:160ms;transition-timing-function:cubic-bezier(.23,1,.32,1)}
.band__menue-knopf:active{transform:scale(1.08)}
.band__nav a:not(.knopf):active,.leiste__links a:active,.frage summary:active,.inhalt a:active,.fuss nav a:active{opacity:.6}
@media (prefers-reduced-motion:reduce){.knopf:active,.band__menue-knopf:active{transform:none;filter:brightness(.95)}}

/* ---------- Kopf: Minz-Band ---------- */
.band{position:relative;overflow:hidden;margin:12px;border-radius:24px;background:var(--minze);padding:24px 20px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0 12px}
.band__muster{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;display:none}
.band__marke{position:relative;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text)}
@media (hover:hover) and (pointer:fine){.band__marke:hover{color:var(--text)}}
.band__logo{width:58px;height:58px;flex-shrink:0}
.band__namen{display:flex;flex-direction:column;gap:2px}
.band__name{font-size:2.375rem;font-weight:400;line-height:1;letter-spacing:-.02em}
.band__spruch{font-size:0.875rem;font-weight:500;color:var(--text-2)}
.band__menue-knopf{position:relative;width:44px;height:44px;border:1px solid rgba(255,255,255,.7);border-radius:22px;background:var(--glas-glanz),rgba(255,255,255,.55);box-shadow:var(--glas-licht),0 6px 18px rgba(15,42,61,.12);display:none;align-items:center;justify-content:center;cursor:pointer;color:var(--text)}
.js .band__menue-knopf{display:flex}
/* Menü-Knopf: ≡ wird ✕ (oberer und unterer Strich drehen in die Mitte, der mittlere blendet aus) */
.band__menue-knopf .strich{transform-box:view-box;transform-origin:12px 12px;transition:transform 200ms cubic-bezier(.23,1,.32,1),opacity 150ms ease-out}
.band--offen .band__menue-knopf .strich--oben{transform:rotate(45deg) translateY(5px)}
.band--offen .band__menue-knopf .strich--mitte{opacity:0}
.band--offen .band__menue-knopf .strich--unten{transform:rotate(-45deg) translateY(-5px)}
/* Menü auf dem Handy gleitet auf (Grid-Zeile 0fr → 1fr), die Links blenden kurz versetzt ein; zu geht es
   schneller als auf. Ohne JavaScript stehen die Links offen untereinander. */
.band__nav{position:relative;flex-basis:100%;display:grid}
.band__nav-innen{display:flex;flex-direction:column;gap:4px;min-height:0;overflow:hidden}
.band__nav-innen::before{content:"";height:16px;flex-shrink:0}
.js .band__nav{grid-template-rows:0fr;transition:grid-template-rows 200ms cubic-bezier(.23,1,.32,1)}
.js .band--offen .band__nav{grid-template-rows:1fr;transition-duration:250ms}
.js .band--sofort .band__nav,.js .band--sofort .band__nav-innen{transition:none}
.js .band__nav-innen{visibility:hidden;transition:visibility 0s linear 200ms}
.js .band--offen .band__nav-innen{visibility:visible;transition-delay:0s}
.js .band__nav-innen>*{opacity:0;transform:translateY(-4px);transition:opacity 120ms ease-out,transform 120ms ease-out}
.js .band--offen .band__nav-innen>*{opacity:1;transform:none;transition:opacity 200ms ease-out,transform 200ms cubic-bezier(.23,1,.32,1)}
.js .band--offen .band__nav-innen>:nth-child(2){transition-delay:30ms}
.js .band--offen .band__nav-innen>:nth-child(3){transition-delay:60ms}
.js .band--offen .band__nav-innen>:nth-child(4){transition-delay:90ms}
@media (prefers-reduced-motion:reduce){
  .band__menue-knopf .strich{transition:opacity 150ms ease-out}
  .js .band__nav{transition:none}
  .js .band__nav-innen>*{transform:none;transition:opacity 150ms ease-out}
}
.band__nav a{display:flex;align-items:center;min-height:48px;padding:0 8px;font-size:1.125rem;font-weight:600;text-decoration:none;color:var(--text)}
@media (hover:hover) and (pointer:fine){.band__nav a:hover{color:var(--text-2)}}
.band__nav .knopf{margin-top:8px;padding:0 24px;color:var(--text)}

/* Lichtband wandert beim Laden einmal durch, der Lila-Ring im Logo dreht sich einmal – danach Ruhe
   (keine Endlosschleife: langsame, sich wiederholende Bewegung lenkt ab und stört manche Menschen) */
.cw-band{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.18) 45%,rgba(255,255,255,.55) 50%,rgba(255,255,255,.18) 55%,rgba(255,255,255,0) 60%),linear-gradient(115deg,rgba(255,255,255,0) 64%,rgba(255,255,255,.22) 68%,rgba(255,255,255,0) 72%);background-size:250% 100%;background-repeat:no-repeat;animation:cwBand 6s cubic-bezier(.45,.05,.35,1) 1}
@keyframes cwBand{0%{background-position:110% 0}65%,100%{background-position:-10% 0}}
.cw-ring-dreh{transform-box:view-box;transform-origin:50px 50px;animation:cwRingDreh 9s cubic-bezier(.6,0,.3,1) 1}
@keyframes cwRingDreh{0%,70%{transform:rotate(0deg)}88%,100%{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.cw-band,.cw-ring-dreh{animation:none}.cw-band{background-position:50% 0}}

/* ---------- Startseite: Hero ---------- */
/* flow-root: Der Abstand über dem Band bleibt im Kopf (sonst rutscht er hinaus, und oben zeigt sich ein heller Streifen) */
.kopf{display:flow-root}
/* Startseite: Band und Hero füllen genau den ersten Bildschirm, die Bühne mit Minka und Moppel nimmt den Rest */
.kopf--start{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.hero{position:relative;flex:1 0 auto;display:flex;flex-direction:column}
.hero__text{padding:28px var(--rand) 0;display:flex;flex-direction:column;gap:16px}
.hero__text-oben{display:flex;flex-direction:column;gap:16px}
.hero h1{font-size:2.5rem;font-weight:800;line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.hero__lead{font-size:1.0625rem;line-height:1.5;color:var(--muted)}
.hero .knoepfe{margin-top:8px}
.hero__aktion{display:flex;flex-direction:column;gap:12px}
.hero__aktion .link-zeile{display:none}
/* ---------- Startseite: Schnellleiste ----------
   Schwebende Glas-Kapsel oben, mit denselben Abständen und Rundungen wie das Band. Sie gleitet von oben
   herein, sobald die großen Knöpfe im Hero aus dem Bild sind, und auf demselben Weg wieder hinaus
   (menu.js setzt .leiste--sichtbar). Ohne JavaScript bleibt sie weg, dann stehen die Links im Band. */
.leiste{display:none}
.js .leiste{display:block;position:fixed;z-index:10;top:12px;left:12px;right:12px;max-width:1280px;margin:0 auto;height:56px;padding:0 8px 0 16px;border-radius:28px;background:linear-gradient(172deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,.06) 40%,rgba(255,255,255,0) 60%),rgba(255,255,255,.5);-webkit-backdrop-filter:blur(24px) saturate(190%);backdrop-filter:blur(24px) saturate(190%);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(15,42,61,.06),0 10px 30px rgba(15,42,61,.14);transform:translateY(calc(-100% - 16px));opacity:0;visibility:hidden;transition:transform 300ms cubic-bezier(.23,1,.32,1),opacity 200ms ease-out,visibility 0s linear 300ms}
.js .leiste--sichtbar{transform:none;opacity:1;visibility:visible;transition:transform 300ms cubic-bezier(.23,1,.32,1),opacity 200ms ease-out,visibility 0s}
@media (prefers-reduced-motion:reduce){.js .leiste{transform:none}}
.leiste__innen{height:100%;display:flex;align-items:center;justify-content:space-between;gap:24px}
.leiste__marke{display:flex;align-items:center;gap:8px;font-size:1.25rem;font-weight:500;letter-spacing:-.02em;color:var(--text);text-decoration:none}
@media (hover:hover) and (pointer:fine){.leiste__marke:hover{color:var(--text)}}
.leiste__logo{width:32px;height:32px;flex-shrink:0}
.leiste__links{display:none}
/* Rundum 8 px Luft um den Knopf; Radius Kapsel 28 = Knopf 20 + 8, damit die Rundungen parallel laufen */
.leiste .knopf{width:auto;height:40px;padding:0 16px;border-radius:20px;font-size:1rem}
/* Sprungziele nicht unter der Leiste verstecken */
[id]{scroll-margin-top:80px}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:64px var(--rand)}
.abschnitt--weiss{background:rgba(255,255,255,.4)}
.abschnitt--eisblau{background:rgba(226,240,246,.55)}
.innen{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:36px}
.kopfzeile{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.kopfzeile--mitte{align-items:center;text-align:center}
.oberzeile{font-size:0.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ozean-text)}
.abschnitt h2,.test h2{font-size:2.125rem;font-weight:800;line-height:1.06;letter-spacing:-.025em;text-wrap:balance}
.vorspann{font-size:1.0625rem;line-height:1.5;color:var(--muted);max-width:640px;text-wrap:pretty}

/* „Was CaWaGo kann“: drei Hauptfunktionen als große Karten (untereinander, am Desktop nebeneinander), darunter
   die übrigen als kompakte Liste im Stil von „Gemeinsam“ – so fällt zuerst auf, worum es vor allem geht. */
.karten{display:grid;grid-template-columns:1fr;gap:16px}
.karte{background:var(--glas-glanz),var(--glas);border-radius:24px;border:1px solid var(--glas-kante);box-shadow:var(--glas-licht),var(--glas-schatten);padding:24px;display:flex;flex-direction:column;gap:16px}
.kachel{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:var(--glas-kachel);box-shadow:var(--glas-kachel-licht);flex-shrink:0}
.kachel svg{width:28px;height:28px}
.karte h3{font-size:1.3125rem;font-weight:700;line-height:1.2;letter-spacing:-.01em}
.karte p{font-size:1rem;line-height:1.55;color:var(--muted)}
.karten .kachel{width:64px;height:64px;border-radius:18px}
.karten .kachel svg{width:32px;height:32px}
.karten .karte h3{font-size:1.375rem}
.funktionen-mehr{display:flex;flex-direction:column;gap:20px}
/* Doppelte Klasse, weil .zeilen weiter unten (Gemeinsam) sonst display:flex setzt */
.zeilen.zeilen--funktionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px 32px}

/* So geht’s: drei Schritte mit App-Ansichten */
.schritte{display:flex;flex-wrap:wrap;justify-content:center;gap:56px;margin:0;padding:0;list-style:none}
.schritt{display:flex;flex-direction:column;align-items:center;gap:28px;text-align:center;flex:1 1 300px}
.schritt__text{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:340px}
.schritt__ring{width:60px;height:60px}
/* Die Ringe zeichnen sich einmal, sobald sie ganz im Bild sind (menu.js setzt .gezeichnet). Der Bogen hat
   pathLength="1": Strich 1 lang, Lücke 2 und um 1,01 verschoben – vor dem Zeichnen liegt nichts auf dem Bogen,
   auch kein runder Punkt am Anfang. Längere Bögen brauchen länger, damit alle gleich schnell wirken. */
.js .schritt__bogen{stroke-dasharray:1 2;stroke-dashoffset:1.01;transition:stroke-dashoffset 450ms cubic-bezier(.77,0,.175,1)}
.js .schritt:nth-child(2) .schritt__bogen{transition-duration:650ms}
.js .schritt:nth-child(3) .schritt__bogen{transition-duration:850ms}
.js .schritt__ring.gezeichnet .schritt__bogen{stroke-dashoffset:0}
@media (prefers-reduced-motion:reduce){.js .schritt__bogen{transition:none}}
.schritt h3{font-size:1.375rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.schritt p{font-size:1rem;line-height:1.55;color:var(--muted);text-wrap:pretty}
/* Auf dem Handy liegen die drei Schritte nebeneinander und rasten beim Wischen ein; das nächste Handy schaut
   am rechten Rand herein (spart rund 1.500 px Scrollen). Natives Scrollen (scroll-snap) statt eigener Wischgeste.
   Ein waagerecht scrollender Kasten schneidet auch senkrecht ab, darum bekommt er oben und unten Platz für den
   Schatten der Handys (Innenabstand, durch negativen Außenabstand ausgeglichen). Die Ränder blenden im
   Seitenrand weich aus. Ab Tablet stehen die Schritte wie bisher in einer Reihe. */
@media (max-width:719px){
  .schritte{flex-wrap:nowrap;justify-content:flex-start;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;scrollbar-width:none;margin:-24px calc(-1 * var(--rand)) -48px;padding:24px var(--rand) 48px;scroll-padding:0 var(--rand);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--rand),#000 calc(100% - var(--rand)),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 var(--rand),#000 calc(100% - var(--rand)),transparent 100%)}
  .schritte::-webkit-scrollbar{display:none}
  .schritt{flex:0 0 min(300px,80%);scroll-snap-align:start}
}
.handy{--skala:.82;width:calc(296px * var(--skala));height:calc(612px * var(--skala));flex-shrink:0;border-radius:calc(48px * var(--skala));box-shadow:var(--schatten-handy)}
.handy__massstab{width:296px;height:612px;transform:scale(var(--skala));transform-origin:0 0}
/* Echte Bildschirmfotos der App im Handy-Rahmen (noch nicht benutzt) */
.handy__geraet{width:296px;height:612px;box-sizing:border-box;padding:12px;border-radius:48px;background:#0B0F17}
.handy__bild{display:block;width:276px;height:592px;border-radius:38px;object-fit:cover;object-position:top;background:#F0F3F1}
/* Die App-Bilder blenden ein, sobald sie geladen sind (menu.js setzt .geladen), statt nach einem leeren
   Bildschirm aufzuploppen. Bilder aus dem Speicher stehen sofort da (.sofort). Ohne JavaScript wie bisher. */
.js .handy__bild{opacity:0;transition:opacity 300ms ease-out}
.js .handy__bild.geladen{opacity:1}
.js .handy__bild.sofort{transition:none}
@media (prefers-reduced-motion:reduce){.js .handy__bild{transition-duration:150ms}}
.handy--treffen{--skala:.86}

/* Sicherheit & Datenschutz */
.punkte{display:flex;flex-wrap:wrap;gap:32px}
.punkt{display:flex;flex-direction:column;gap:16px;flex:1 1 280px}
.punkt__kachel{display:flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:18px;background:var(--glas-glanz),rgba(255,255,255,.8);box-shadow:var(--glas-licht),var(--glas-schatten)}
.punkt__kachel svg{width:30px;height:30px}
.punkt h3{font-size:1.3125rem;font-weight:700;line-height:1.25;letter-spacing:-.01em}
.punkt p{font-size:1rem;line-height:1.55;color:var(--muted)}
.fussnote{padding-top:20px;border-top:1px solid var(--ozean);font-size:1rem;line-height:1.5}
.fussnote a{font-weight:700}

/* Gemeinsam statt allein */
.gemeinsam{display:flex;flex-wrap:wrap;align-items:center;gap:40px}
.gemeinsam__links{display:flex;flex-direction:column;gap:28px;flex:1 1 520px;min-width:0}
.gemeinsam__rechts{display:flex;justify-content:center;flex:0 1 auto;margin:0 auto}
.zeilen{display:flex;flex-direction:column;gap:24px}
.zeile{display:flex;gap:16px;align-items:flex-start}
.zeile .kachel{width:48px;height:48px;border-radius:14px}
.zeile .kachel svg{width:24px;height:24px}
.zeile__text{display:flex;flex-direction:column;gap:4px}
.zeile h3{font-size:1.1875rem;font-weight:700;line-height:1.25}
.zeile p{font-size:1rem;line-height:1.5;color:var(--muted)}
.forum{background:var(--glas-glanz),var(--glas);border-radius:24px;border:1px solid var(--glas-kante);box-shadow:var(--glas-licht),var(--glas-schatten);padding:24px;display:flex;flex-direction:column;gap:16px}
.forum__kopf{display:flex;align-items:center;gap:12px}
.forum h3{font-size:1.25rem;font-weight:700;line-height:1.25}
.forum p{font-size:1rem;line-height:1.5;color:var(--muted)}
.marke-bald{display:inline-flex;align-items:center;height:26px;padding:0 12px;border-radius:13px;background:var(--knopf-verlauf);font-size:0.75rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text)}
.themen{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.themen li{display:inline-flex;align-items:center;height:36px;padding:0 16px;border-radius:18px;background:var(--glas-tonal);box-shadow:inset 0 1px 0 rgba(255,255,255,.7);font-size:0.9375rem;font-weight:600;color:var(--knopf-text-2)}

/* Fragen & Antworten */
.fragen{display:flex;flex-direction:column;gap:12px;max-width:880px;width:100%;margin:0 auto}
.frage{background:var(--glas-glanz),var(--glas);border-radius:24px;border:1px solid var(--glas-kante);box-shadow:var(--glas-licht),var(--glas-schatten);padding:0 20px}
.frage summary{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px;cursor:pointer;font-size:1.0625rem;font-weight:700;line-height:1.3;list-style:none}
.frage summary::-webkit-details-marker{display:none}
.frage__pfeil{display:flex;transition:transform 200ms cubic-bezier(.23,1,.32,1)}
.frage[open] .frage__pfeil{transform:rotate(180deg)}
/* Antwort gleitet auf und zu (Grid-Zeile 0fr → 1fr); Browser ohne ::details-content klappen sofort auf */
.frage::details-content{display:grid;grid-template-rows:0fr;transition:grid-template-rows 250ms cubic-bezier(.23,1,.32,1),content-visibility 250ms allow-discrete}
.frage[open]::details-content{grid-template-rows:1fr}
.frage__antwort{min-height:0;overflow:hidden}
@media (prefers-reduced-motion:reduce){.frage::details-content{transition:none}}
.frage p{padding:0 0 20px;font-size:1rem;line-height:1.55;color:var(--muted)}
.frage p a{font-weight:600}

/* Sei beim Test dabei */
.abschnitt--test{padding:8px 12px 64px}
.test{position:relative;overflow:hidden;border-radius:24px;background:linear-gradient(172deg,rgba(255,255,255,.45) 0%,rgba(255,255,255,0) 40%),linear-gradient(135deg,#D9EEF8 0%,#BFE0F2 55%,#A9D3EC 100%);border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 40px rgba(31,94,138,.18);padding:32px 24px 0;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:24px}
.test__text{display:flex;flex-direction:column;gap:24px;flex:1 1 520px;min-width:0;padding-bottom:28px}
.test p{font-size:1.0625rem;line-height:1.5;color:var(--text-2);max-width:560px}
.test .knoepfe{gap:12px}
/* <picture> um die Bengal soll nicht selbst Flex-Element sein, sonst greifen align-self und margin nicht */
.test picture{display:contents}
.test__katze{width:220px;height:auto;align-self:flex-end;margin:0 auto}
/* Fehlerseite (404): derselbe Kasten mit Moppel, oben ohne den Abstand der Startseite */
.fehlerseite.abschnitt--test{padding-top:0}

/* ---------- Unterseiten ---------- */
.seitenkopf{max-width:1120px;margin:0 auto;padding:40px var(--rand) 32px;display:flex;flex-direction:column;gap:16px}
.seitenkopf h1{font-size:2.5rem;font-weight:800;line-height:1.05;letter-spacing:-.025em;text-wrap:balance;max-width:900px}
/* Lange Wörter wie „Datenschutzerklärung“ sind auf dem Handy breiter als der Bildschirm: dann trennen */
.seitenkopf h1,.rechtstext h2,.seite h2{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
.seitenkopf p{font-size:1.125rem;line-height:1.5;color:var(--muted);max-width:720px;text-wrap:pretty}
.seite{max-width:1120px;margin:0 auto;padding:0 var(--rand) 40px;display:flex;flex-wrap:wrap;gap:20px}
.seite--ende{padding-bottom:80px}
.seite .karte{padding:24px;gap:20px;flex:1 1 420px}
.karte__kopf{display:flex;align-items:center;gap:16px}
.seite h2{font-size:1.625rem;font-weight:800;line-height:1.15;letter-spacing:-.015em}
.karte .einleitung{font-size:1.0625rem;line-height:1.5;color:var(--muted)}
.liste-schritte{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:20px}
.liste-schritte li{display:flex;gap:16px;align-items:flex-start}
.nummer{flex-shrink:0;width:36px;height:36px;border-radius:18px;background:var(--knopf-verlauf);display:flex;align-items:center;justify-content:center;font-size:1.0625rem;font-weight:800;color:var(--text)}
.liste-schritte__text{display:flex;flex-direction:column;gap:4px;padding-top:5px}
.liste-schritte strong{font-size:1.125rem;font-weight:700;line-height:1.3}
.liste-schritte__text span{font-size:1.0625rem;line-height:1.5;color:var(--muted)}
/* Knopf direkt im Schritt, den er auslöst (z. B. „Einladung anfragen“ als Schritt 1) */
.knopf--im-schritt{margin-top:12px}
.link-zeile{font-size:0.9375rem;color:var(--muted)}
.hinweis-flaeche{flex:1 1 100%;border-radius:24px;background:var(--glas-kachel);box-shadow:var(--glas-kachel-licht);padding:28px 24px;display:flex;flex-wrap:wrap;gap:24px;align-items:center;justify-content:space-between}
.hinweis-flaeche__text{display:flex;flex-direction:column;gap:12px;max-width:640px}
.hinweis-flaeche p{font-size:1.0625rem;line-height:1.55;color:var(--text-2)}
.hinweis-flaeche .knoepfe{flex:1 1 280px}
.hinweis-flaeche--icon .hinweis-flaeche__text{flex-direction:row;gap:16px;align-items:flex-start}
.punkt__kachel--klein{width:56px;height:56px;border-radius:16px;flex-shrink:0}
.spalte{flex:1 1 420px;display:flex;flex-direction:column;gap:16px}
.haken-liste{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.haken-liste li{display:flex;gap:12px;align-items:flex-start;font-size:1.0625rem;line-height:1.5;color:var(--muted)}
.haken-liste svg{width:22px;height:22px;flex-shrink:0;margin-top:2px}
.spalte p{font-size:1.0625rem;line-height:1.55;color:var(--muted)}

/* Rechtstexte: Inhaltsverzeichnis und Text höchstens 70 Zeichen breit */
.recht{max-width:1120px;margin:0 auto;padding:0 var(--rand) 80px;display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start}
.inhalt{flex:1 1 260px;max-width:100%;background:var(--glas-glanz),var(--glas);border-radius:24px;border:1px solid var(--glas-kante);box-shadow:var(--glas-licht),var(--glas-schatten);padding:24px}
.inhalt__titel{font-size:0.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding-bottom:8px}
.inhalt ol{margin:0;padding:0;list-style:none}
.inhalt a{display:block;padding:8px 0;font-size:1rem;line-height:1.4;text-decoration:none}
.rechtstext{flex:999 1 560px;min-width:0;max-width:70ch;display:flex;flex-direction:column;gap:40px}
.rechtstext section{display:flex;flex-direction:column;gap:12px;scroll-margin-top:16px}
.rechtstext h2{font-size:1.5rem;font-weight:700;line-height:1.25;letter-spacing:-.015em}
.rechtstext p{font-size:1.125rem;line-height:1.7;color:var(--text-2);overflow-wrap:break-word}
.rechtstext mark{background:#FFF1C2;color:inherit;border-radius:4px;padding:0 3px}
.rechtstext .stand{font-size:0.9375rem;color:var(--muted)}
.entwurf{flex:1 1 100%;padding:12px 16px;border-radius:14px;background:#FFF1C2;font-size:1rem}

/* Kontaktformular */
.formular{display:grid;gap:16px}
.formular label{display:grid;gap:8px;font-weight:600;font-size:1rem}
.formular input,.formular select,.formular textarea{font:inherit;font-weight:400;padding:12px 16px;border:1px solid var(--ozean);border-radius:14px;background:rgba(255,255,255,.9);box-shadow:inset 0 1px 2px rgba(15,42,61,.06);color:var(--text)}
.formular textarea{min-height:180px;resize:vertical}
.formular .knopf{justify-self:start;width:auto;border:0;cursor:pointer;font-family:inherit}
.formular .knopf:disabled{opacity:.6;cursor:wait}
.formular .klein{font-size:0.9375rem;color:var(--muted)}
.honigtopf{position:absolute;left:-9999px}
#status{min-height:1.5em;font-weight:600}
/* Kontakt per E-Mail, solange das Formular aus ist (KONTAKTFORMULAR in build.mjs) */
.kontakt-mail{max-width:720px}
.kontakt-mail__adresse{font-weight:700;color:var(--text);overflow-wrap:anywhere}
button.knopf{font-family:inherit;cursor:pointer}
.ohne-umbruch{white-space:nowrap}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--nacht);color:#fff;padding:48px var(--rand) 40px}
.fuss__innen{max-width:1280px;margin:0 auto;display:flex;flex-direction:column;gap:40px}
.fuss__oben{display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px}
.fuss__marke{display:flex;flex-direction:column;gap:16px;max-width:360px}
.fuss__logo{display:flex;align-items:center;gap:12px}
.fuss__logo svg{width:48px;height:48px;flex-shrink:0}
.fuss__logo span{font-size:1.875rem;font-weight:500;line-height:1;letter-spacing:-.02em}
.fuss__marke p{font-size:1rem;line-height:1.5;color:#D2E3EA}
.fuss__spalten{display:flex;flex-wrap:wrap;gap:40px 48px}
.fuss nav{display:flex;flex-direction:column;gap:12px;min-width:160px}
.fuss__titel{font-size:0.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#A9C3C6}
.fuss nav a{font-size:1rem;line-height:1.4;color:#D2E3EA;text-decoration:none}
@media (hover:hover) and (pointer:fine){.fuss nav a:hover{color:#fff;text-decoration:underline}}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:24px;border-top:1px solid rgba(255,255,255,.14);font-size:0.875rem;color:#A9C3C6}
.fuss :focus-visible{outline-color:#BFE0F2}

/* ================= Tablet ab 720 px ================= */
@media (min-width:720px){
  :root{--rand:32px}
  .nur-handy{display:none}
  .ab-tablet{display:inline}
  .band{margin:20px 20px 0;border-radius:28px;padding:24px 32px;flex-wrap:nowrap;gap:20px}
  .band__logo{width:64px;height:64px}
  .band__name{font-size:2.5rem}
  .band__spruch{font-size:1rem}
  .js .band__menue-knopf{display:none}
  .band__nav,.js .band__nav{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:flex-end;flex-basis:auto;gap:28px;padding:0}
  /* Ab Tablet stehen die Links immer in einer Reihe im Band */
  .band__nav-innen{display:contents}
  .band__nav-innen::before{display:none}
  .js .band__nav-innen{visibility:visible}
  .js .band__nav-innen>*{opacity:1;transform:none}
  .band__nav a{min-height:0;padding:0;font-size:1.125rem}
  .band__nav .knopf{margin:0;width:auto;height:50px;padding:0 24px;border-radius:25px;font-size:1.0625rem}
  .band__nav{flex-wrap:nowrap}
  /* Links in einer Glas-Kapsel auf der Minzfläche (ohne Unschärfe – darunter liegt nur der Verlauf) */
  .band__nav,.js .band__nav{padding:6px 6px 6px 24px;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.5) 0%,rgba(255,255,255,.12) 55%),rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 6px 18px rgba(15,42,61,.12)}
  .band__muster{display:block}

  .hero__text{padding:56px var(--rand) 0;max-width:820px;gap:24px}
  .hero h1{font-size:3.5rem;line-height:1.04}
  .hero__lead{font-size:1.3125rem;line-height:1.45;max-width:640px}
  .hero .knoepfe{flex-direction:row;flex-wrap:wrap;gap:16px;margin-top:16px}
  .hero .knopf{width:auto;height:60px;border-radius:30px;font-size:1.25rem}
  .hero .knopf--sekundaer{font-weight:600}
  .hero__aktion .link-zeile{display:block}

  .abschnitt{padding:96px var(--rand)}
  .innen{gap:52px}
  .kopfzeile{gap:16px}
  .oberzeile{font-size:0.875rem}
  .abschnitt h2,.test h2{font-size:2.75rem}
  .vorspann{font-size:1.1875rem}
  .karten{gap:24px}
  .karten .karte h3{font-size:1.5rem}
  .funktionen-mehr{gap:24px}
  .zeilen.zeilen--funktionen{gap:24px 40px}
  .karte{padding:32px}
  .karte h3{font-size:1.375rem}
  .karte p{font-size:1.0625rem}
  .frage{padding:0 28px}
  .frage summary{min-height:72px;font-size:1.1875rem}
  .frage p{font-size:1.0625rem;padding-bottom:24px}
  .abschnitt--test{padding:16px var(--rand) 96px}
  .test{border-radius:32px;padding:48px 48px 0}
  .test__text{padding-bottom:48px}
  .test p{font-size:1.1875rem}
  .test .knoepfe{flex-direction:row;flex-wrap:wrap}
  .test .knopf{width:auto;height:60px;border-radius:30px;font-size:1.1875rem}
  .test__katze{width:260px;transform:scaleX(-1)}
  .forum{padding:32px}

  .seitenkopf{padding:64px var(--rand) 40px;gap:16px}
  .seitenkopf h1{font-size:3.375rem;line-height:1.04}
  .seitenkopf p{font-size:1.3125rem}
  .seite{gap:28px;padding-bottom:48px}
  .seite .karte{padding:40px;gap:24px}
  .seite h2{font-size:1.875rem}
  .seite .knopf{width:auto;height:60px;border-radius:30px;font-size:1.1875rem}
  .seite .knoepfe{flex-direction:row;flex-wrap:wrap;gap:12px}
  .knopf--im-schritt{align-self:flex-start}
  .hinweis-flaeche{padding:40px 48px}
  .recht{gap:56px;padding-bottom:120px}
  .inhalt{max-width:300px;padding:28px}
  .rechtstext h2{font-size:1.625rem}
  .fuss{padding:72px var(--rand) 48px}
  /* Wie das Band: 20 px Abstand, Radius 32; rundum 10 px Luft um den Knopf (32 = 22 + 10) */
  .js .leiste{top:16px;left:20px;right:20px;height:64px;padding:0 10px 0 24px;border-radius:32px}
  /* Wie die Tab-Leiste der App: ein heller Glastropfen liegt unter dem Abschnitt, in dem man gerade ist (menu.js) */
  .leiste__links{display:flex;gap:4px;margin-left:auto;position:relative;isolation:isolate}
  .leiste__tropfen{position:absolute;left:0;top:50%;height:44px;margin-top:-22px;border-radius:22px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.95) 0%,rgba(255,255,255,.55) 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.8),0 2px 8px rgba(15,42,61,.12);opacity:0;transition:transform 320ms cubic-bezier(.23,1,.32,1),width 320ms cubic-bezier(.23,1,.32,1),opacity 200ms ease-out}
  @media (prefers-reduced-motion:reduce){.leiste__tropfen{transition:opacity 150ms ease-out}}
  .leiste__links a{padding:10px 16px;border-radius:22px;font-size:1rem;font-weight:600;color:var(--text);text-decoration:none}
  .leiste .knopf{height:44px;padding:0 24px;border-radius:22px}
}

/* ================= Desktop ab 1100 px ================= */
@media (min-width:1100px){
  .band{padding:24px 40px}
  .band__nav,.js .band__nav{gap:32px}

  /* Startseite: großes Band wie im Banner (1920 × 1080) */
  /* Auf niedrigen Laptop-Bildschirmen wird das große Band flacher, damit beide Katzen in den ersten Bildschirm passen */
  .band--gross{margin:24px 24px 0;border-radius:32px;min-height:clamp(200px,calc(100svh - 560px),288px);padding:0 56px 0 72px}
  .band--gross .band__marke{gap:24px}
  .band--gross .band__logo{width:clamp(96px,6.5vw,124px);height:clamp(96px,6.5vw,124px)}
  .band--gross .band__namen{gap:8px}
  .band--gross .band__name{font-size:clamp(4rem,4.8vw,5.75rem)}
  .band--gross .band__spruch{font-size:clamp(1.25rem,1.4vw,1.625rem);line-height:1.2}
  .band--gross .band__nav{gap:40px}
  .band--gross .band__nav a{font-size:1.1875rem}
  .band--gross .band__nav .knopf{height:52px;padding:0 28px;border-radius:26px;font-size:1.125rem}
  .js .leiste{left:24px;right:24px}

  .hero{min-height:480px}
  .hero__text{padding:32px 0 48px 96px;max-width:916px;gap:36px}
  .hero__text-oben{display:flex;flex-direction:column;gap:24px}
  .hero h1{font-size:clamp(4rem,4.4vw,5.5rem)}
  .hero__lead{font-size:1.5rem;line-height:1.4;max-width:min(640px,50vw)}
  .hero .knoepfe{margin-top:0}

  .abschnitt{padding:128px 32px}
  .innen{gap:64px}
  .kopfzeile{gap:16px}
  .oberzeile{font-size:0.9375rem}
  .abschnitt h2,.test h2{font-size:3.375rem}
  .vorspann{font-size:1.3125rem;line-height:1.4}
  .karten{grid-template-columns:repeat(3,1fr);gap:28px}
  .karten .karte h3{font-size:1.75rem}
  .karte{padding:36px}
  .karte h3{font-size:1.5rem}
  .karte p{font-size:1.125rem}
  .schritte{gap:64px}
  .schritt{gap:36px}
  .schritt__ring{width:68px;height:68px}
  .schritt h3{font-size:1.625rem}
  .schritt p{font-size:1.125rem}
  .handy{--skala:.95}
  .handy--treffen{--skala:1.08}
  .punkte{gap:48px}
  .punkt h3{font-size:1.5rem}
  .punkt p{font-size:1.125rem}
  .fussnote{padding-top:28px;font-size:1.125rem}
  .gemeinsam{gap:96px}
  .gemeinsam__links{gap:40px}
  .zeile h3{font-size:1.3125rem}
  .zeile p{font-size:1.0625rem}
  .forum h3{font-size:1.375rem}
  .forum p{font-size:1.0625rem}
  .frage{padding:0 32px}
  .frage summary{min-height:76px;font-size:1.25rem}
  .frage p{font-size:1.125rem;padding-bottom:24px}
  .abschnitt--test{padding:24px 32px 128px}
  .test{border-radius:36px;padding:64px 72px 0}
  .test__text{padding-bottom:64px}
  .test p{font-size:1.3125rem;line-height:1.4}
  .test__katze{width:300px}

  .seitenkopf{padding:72px 32px 48px}
  .seitenkopf h1{font-size:4rem}
  .seitenkopf p{font-size:1.375rem;line-height:1.4}
  .seite h2{font-size:1.875rem}
  .rechtstext p{font-size:1.125rem}
}

/* ================= Einstellungen der Nutzer ================= */
/* Kontrast erhöhen: graue Texte dunkler, Menü-Knopf deckend */
@media (prefers-contrast:more){
  :root{--muted:#163A4A}
  .karte,.frage,.forum,.inhalt,.zimmer{border:1.5px solid var(--text)}
  .knopf--sekundaer{border:1.5px solid var(--ozean)}
  .band__menue-knopf{background:#fff}
  .js .leiste{background:#fff;box-shadow:none;border:1.5px solid var(--text)}
}
/* Weniger Transparenz: deckende Flächen statt Glas */
@media (prefers-reduced-transparency:reduce){
  .karte,.frage,.forum,.inhalt{background:#fff}
  .abschnitt--weiss{background:#fff}
  .abschnitt--eisblau{background:var(--eisblau-flaeche)}
  .hinweis-flaeche,.kachel{background:var(--eisblau-flaeche)}
  .band__nav,.js .band__nav{background:rgba(255,255,255,.85)}
  .band__menue-knopf{background:#fff}
  .cw-band{display:none}
  .js .leiste{background:#fff;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ================= CaWaGo: Pixel-Katzen ================= */
/* Bilder aus der App (assets/maskottchen, 48 × 42 Pixel, 8-fach gespeichert). Bewegung ohne Skript: Die
   Einzelbilder liegen übereinander, jedes ist einen Takt lang sichtbar. Dauer und Versatz je Bild setzt
   build.mjs (als Klassen, weil der Server keine Inline-Styles erlaubt). */
.pixel{image-rendering:pixelated}
.sprite{position:relative;display:block;aspect-ratio:384/336}
.sprite img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:0;animation-timing-function:step-end;animation-iteration-count:infinite}
.sprite img:only-child{opacity:1;animation:none}
@keyframes cwBild2{0%{opacity:1}50%,100%{opacity:0}}
@keyframes cwBild3{0%{opacity:1}33.333%,100%{opacity:0}}
@keyframes cwBild4{0%{opacity:1}25%,100%{opacity:0}}
@keyframes cwBild6{0%{opacity:1}16.667%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.sprite img{animation:none!important}.sprite img:first-child{opacity:1}}

/* Hero: rechts steht die Britisch Kurzhaar, links daneben schaut die Bengal über die Unterkante zu ihr hoch
   (wie Buddy und Lotti bei DoWaGo). Die Breiten stehen als Variablen an der Bühne, damit die Bengal immer
   direkt neben der stehenden Katze sitzt; sie richten sich nach Breite und Höhe der Bühne (cqw/cqh), damit
   beide ganz zu sehen sind. 1.2152 und .689 sind die Seitenverhältnisse der Bilder (960 × 790, 520 × 754).
   Die Bengal ist etwa 0,42-mal so breit wie die Kurzhaar, dann sind die Köpfe ungefähr gleich groß. */
.hero__buehne{position:relative;flex:1 0 240px;margin-top:16px;container-type:size;--rechts:16px;--steht:min(60cqw,94cqh * 1.2152,520px);--schaut:min(26cqw,64cqh * .689,220px)}
.hero-katze{position:absolute;bottom:0;height:auto}
.hero-katze--steht{right:var(--rechts);width:var(--steht)}
.hero-katze__bild{display:block;width:100%;height:auto}
.hero-katze--steht::after{content:"";position:absolute;left:4%;right:12%;bottom:-4%;height:8%;border-radius:50%;background:radial-gradient(closest-side,rgba(15,42,61,.18),rgba(15,42,61,0));z-index:-1}
.hero-katze--schaut{right:calc(var(--rechts) + var(--steht) + 4px);width:var(--schaut)}
/* Auftritt beim Laden wie bei DoWaGo: die stehende Katze blendet ein, dann steigt die Bengal hinter der
   Unterkante hoch (clip-path schneidet ab, was unter der Kante läge). menu.js setzt .katzen-da. */
.hero-katze--steht{transition:opacity 400ms ease-out,transform 500ms cubic-bezier(.23,1,.32,1)}
.hero-katze--schaut{clip-path:inset(0);transition:transform 700ms cubic-bezier(.23,1,.32,1) 250ms,clip-path 700ms cubic-bezier(.23,1,.32,1) 250ms}
.js .hero__buehne:not(.katzen-da) .hero-katze--steht{opacity:0;transform:translateY(8px)}
.js .hero__buehne:not(.katzen-da) .hero-katze--schaut{transform:translateY(100%);clip-path:inset(0 0 100% 0)}
@media (prefers-reduced-motion:reduce){
  .hero-katze--steht{transition:opacity 200ms ease-out}
  .hero-katze--schaut{transition:opacity 200ms ease-out 100ms}
  .js .hero__buehne:not(.katzen-da) .hero-katze--steht{transform:none}
  .js .hero__buehne:not(.katzen-da) .hero-katze--schaut{transform:none;clip-path:none;opacity:0}
}

/* Sprechblase im Pixel-Stil (wie die Blasen der Pixel-Katze in der App) */
.blase{position:relative;max-width:300px;background:#fff;border:2px solid #1E3442;border-radius:6px;padding:10px 14px;font-size:.9375rem;line-height:1.4;color:#1E3442;box-shadow:0 3px 0 #1E3442}
.blase::after{content:'';position:absolute;left:50%;bottom:-10px;width:12px;height:12px;margin-left:-6px;background:#fff;border-right:2px solid #1E3442;border-bottom:2px solid #1E3442;transform:rotate(45deg)}
.blase strong{display:block;font-family:'Pixelify Sans','Outfit',sans-serif;font-weight:600;font-size:1.125rem;line-height:1.2;color:var(--text);margin-bottom:2px}

/* Pixel-Katze: Wohnzimmer aus der App, Mia sitzt auf dem Teppich (Maße im Pixelraster des Zimmers: 212 × 205) */
.pixelkatze__oben{display:grid;gap:32px}
.zimmer{position:relative;margin:0;aspect-ratio:1272/1230;border-radius:20px;overflow:hidden;border:1px solid var(--glas-kante);box-shadow:var(--glas-licht),var(--glas-schatten);background:#CFE9E0}
.zimmer__bild{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.zimmer__katze{position:absolute;left:38.7%;bottom:9.8%;width:22.6%}
.zimmer .blase{position:absolute;left:50%;top:5%;transform:translateX(-50%);width:max-content;max-width:78%;text-align:center}
.zimmer__unterschrift{font-size:.875rem;color:var(--muted);margin-top:8px}

/* Geschenke der Pixel-Katze (16 Fundstücke in 4 Sätzen) */
/* Je Satz eine Reihe mit 4 Geschenken; ab Tablet stehen die Sätze zu zweit nebeneinander */
.geschenke{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr));gap:24px 32px}
.geschenke .kopfzeile{grid-column:1/-1}
.geschenke__satz{display:flex;flex-direction:column;gap:10px}
.geschenke__titel{font-weight:700}
.geschenke__liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.geschenk{display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 6px 10px;border-radius:16px;background:var(--glas-kachel);box-shadow:var(--glas-kachel-licht);text-align:center}
.geschenk img{width:48px;height:48px;image-rendering:pixelated}
.geschenk__name{font-weight:700;font-size:.875rem;line-height:1.25;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:anywhere}
.geschenk__selten{margin-top:2px;font-family:'Pixelify Sans','Outfit',sans-serif;font-weight:600;font-size:.75rem;padding:2px 8px;border-radius:999px;background:var(--nacht);color:#fff}
.geschenk--sehr-selten{background:linear-gradient(180deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 60%),rgba(255,243,210,.85)}

/* Katzensprache: Karten mit Minka in der passenden Haltung und Quelle */
.sprache{display:grid;grid-template-columns:1fr;gap:16px}
.sprache .karte{gap:12px}
.sprache__katze{width:120px;align-self:center}
.sprache__bereich{font-size:.8125rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ozean-text)}
.karte .sprache__tun{color:var(--text-2)}
.karte .sprache__quelle{font-size:.875rem}
.sprache__quelle a{font-weight:600}

@media (min-width:720px){
  .hero__buehne{flex-basis:320px;margin-top:24px;--rechts:40px;--steht:min(46cqw,88cqh * 1.2152,480px);--schaut:min(20cqw,64cqh * .689,200px)}
  .sprache{grid-template-columns:repeat(3,1fr)}
}
/* Sehr schmale Handys (320 px): Logo und Name etwas kleiner, damit der Menü-Knopf daneben bleibt */
@media (max-width:359px){
  .band__logo{width:48px;height:48px}
  .band__name{font-size:2rem}
}
@media (min-width:900px){
  .pixelkatze__oben{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
}
@media (min-width:1100px){
  /* Text links, rechts die Britisch Kurzhaar und links neben ihr die Bengal – beide unten */
  .hero__buehne{position:absolute;inset:0;margin:0;pointer-events:none;--rechts:clamp(40px,4.2vw,80px);--steht:min(70cqh * 1.2152,28cqw);--schaut:min(52cqh * .689,12cqw)}
}

/* Aus style="…" in den Seiten, beim Bauen erzeugt */
.m-c69e175{animation-name:cwBild4;animation-duration:1680ms;animation-delay:-1680ms}
.m-96d5ed1{animation-name:cwBild4;animation-duration:1680ms;animation-delay:-1260ms}
.m-db05aee{animation-name:cwBild4;animation-duration:1680ms;animation-delay:-840ms}
.m-0169d29{animation-name:cwBild4;animation-duration:1680ms;animation-delay:-420ms}
.m-fa7bc5a{animation-name:cwBild2;animation-duration:600ms;animation-delay:-600ms}
.m-9615ab8{animation-name:cwBild2;animation-duration:600ms;animation-delay:-300ms}
.m-7fc0719{animation-name:cwBild4;animation-duration:2600ms;animation-delay:-2600ms}
.m-a70cd9c{animation-name:cwBild4;animation-duration:2600ms;animation-delay:-1950ms}
.m-0bbf560{animation-name:cwBild4;animation-duration:2600ms;animation-delay:-1300ms}
.m-2892d6c{animation-name:cwBild4;animation-duration:2600ms;animation-delay:-650ms}