/* =================================================================
   TravelMaster Go — core.css (Redesign „Nachtflug“, 2026-09)
   Gemeinsame Grundlage ALLER Seiten. Seitenspezifisches liegt in
   home.css, features.css, import.css, legal.css, forms.css, small.css.
   ================================================================= */

/* Lokal gehostete Schriften — datenschutz.html § 5: keine Inhalte von Drittanbietern. */
@font-face{font-family:'Cormorant Garamond';font-style:normal;font-weight:500 600;font-display:swap;src:url('../fonts/cormorant-garamond-normal.woff2') format('woff2')}
@font-face{font-family:'Cormorant Garamond';font-style:italic;font-weight:500 600;font-display:swap;src:url('../fonts/cormorant-garamond-italic.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url('../fonts/inter-variable.woff2') format('woff2')}

/* Registriert, damit der Himmel auch bei Sprüngen (reduzierte Bewegung) weich überblendet. */
@property --sky-top{syntax:'<color>';inherits:true;initial-value:#05081a}
@property --sky-bottom{syntax:'<color>';inherits:true;initial-value:#111a3e}
@property --sky-glow{syntax:'<number>';inherits:true;initial-value:.25}

:root{
  --bg-0:#05081a;--bg-1:#0C1230;--bg-2:#111A3E;
  --glass:rgba(7,11,28,.58);--glass-strong:rgba(7,11,28,.8);--glass-line:rgba(255,255,255,.12);
  --card:var(--glass);--card-solid:#131D46;
  --line:rgba(232,201,133,.22);--line-strong:rgba(232,201,133,.55);
  --gold:#E8C985;--gold-deep:#C9A45C;
  --gold-grad:linear-gradient(135deg,#D8B26A 0%,#F0D9A2 55%,#CFA75F 100%);
  --gold-shine:linear-gradient(100deg,#c99a4a 0%,#fff2c9 22%,#d9ae62 40%,#f0d9a2 60%,#fff2c9 78%,#c99a4a 100%);
  --sky:#38BDF8;--mint:#34F5B2;
  --ink:#F4F1E8;--ink-dim:#C3C9DF;--ink-mute:#98A1C0;
  --ok:#E8C985;--half:#38BDF8;--none:#5A6286;
  --radius:22px;--radius-lg:32px;--nav-h:84px;--container:1180px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sky-top:#05081a;--sky-bottom:#111a3e;--sky-glow:.25;
  color-scheme:dark;
}

/* ---------- Basis ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav-h) + 16px)}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-stopped{overflow:hidden}
body{
  font-family:'Inter',system-ui,sans-serif;color:var(--ink);background:var(--bg-0);
  min-height:100vh;overflow-x:clip;line-height:1.5;-webkit-font-smoothing:antialiased;
}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
::selection{background:rgba(232,201,133,.35);color:#fff}
.container{width:min(100% - 32px,var(--container));margin-inline:auto}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---------- Himmel ---------- */
.sky-bg{position:fixed;inset:0;z-index:-2;background:linear-gradient(180deg,var(--sky-top) 0%,var(--sky-bottom) 100%)}
.sky-bg::after{
  content:"";position:absolute;left:-20%;right:-20%;bottom:-35%;height:70%;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,196,110,.55),rgba(255,140,60,.12) 45%,transparent 70%);
  opacity:var(--sky-glow);filter:blur(10px);
}
.sky-stars{position:fixed;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}

/* ---------- Zugänglichkeit ---------- */
.skip{position:fixed;left:16px;top:-80px;z-index:300;background:var(--gold-grad);color:#1B1406;font-weight:700;padding:12px 18px;border-radius:12px;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
:focus:not(:focus-visible){outline:none}
/* 🔑 Anker-Sprung (scrollToTarget) setzt den Fokus per Skript auf den ganzen Abschnitt: Chrome zeigt dort nach Tastatur-Bedienung einen Rahmen um die gesamte Box. Für Container unterdrückt; Überschriften, Knöpfe und Felder behalten ihren Ring. */
:is(section,main,article,div,header,footer,aside)[tabindex="-1"]:focus-visible{outline:none}

/* ---------- Typografie ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--gold);margin-bottom:20px}
.display{font-family:'Cormorant Garamond',Georgia,serif;font-weight:600;font-size:clamp(44px,7vw,96px);line-height:.98;letter-spacing:-.005em;text-wrap:balance}
h2.display{font-size:clamp(38px,5.2vw,72px)}
/* 🔑 SplitText-Wörter werden mit yPercent/rotateX animiert: dafür inline-block und Perspektive. */
.display{perspective:600px}
[data-split] .w{display:inline-block}
.display .gold{
  display:block;font-style:italic;padding-bottom:.08em;
  background:var(--gold-shine);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite;
}
/* Nach SplitText trägt jedes Wort den Verlauf selbst (Safari rendert background-clip
   des Elternteils bei transformierten Kindern nicht). */
.display .gold:has(.w){background:none;animation:none}
.display .gold .w{background:var(--gold-shine);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 7s linear infinite}
@keyframes shine{to{background-position:-250% 0}}
.lede{max-width:580px;margin-top:22px;color:var(--ink-dim);font-size:clamp(16px,1.35vw,18.5px);line-height:1.65}

/* ---------- Buttons ---------- */
.cta,.cta-ghost{position:relative;display:inline-flex;align-items:center;gap:8px;border-radius:999px;text-decoration:none;font-weight:700;letter-spacing:.01em;overflow:hidden;isolation:isolate;transition:box-shadow .3s var(--ease-out),background-color .3s,border-color .3s}
.cta{background:var(--gold-grad);color:#1B1406;font-size:16.5px;padding:18px 40px;box-shadow:0 10px 40px rgba(216,178,106,.35)}
.cta::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.65) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease-out)}
.cta:hover::after{transform:translateX(120%)}
.cta:hover{box-shadow:0 16px 56px rgba(216,178,106,.5)}
.cta-ghost{border:1px solid var(--line-strong);color:var(--ink);font-size:15px;font-weight:600;padding:16px 30px;background:rgba(7,11,28,.25);backdrop-filter:blur(8px)}
.cta-ghost:hover{border-color:var(--gold);background:rgba(232,201,133,.08)}
.btn-soon{display:block;margin-top:10px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--mint)}

/* ---------- Glas ---------- */
.glass{
  background:var(--glass);border:1px solid var(--glass-line);border-radius:var(--radius-lg);
  -webkit-backdrop-filter:blur(18px) saturate(1.25);backdrop-filter:blur(18px) saturate(1.25);
  box-shadow:0 30px 80px rgba(0,0,0,.35);
}
/* Heller Himmel (Tag, goldene Stunde): Glas dichter, sonst fällt kleiner Text unter 4,5:1. */
[data-sky="day"] .glass,[data-sky="day"] .fcard,
[data-sky="golden"] .glass,[data-sky="golden"] .fcard{background:var(--glass-strong)}
[data-sky="day"] .cat-head .eyebrow,[data-sky="golden"] .cat-head .eyebrow{padding:6px 12px;border-radius:999px;background:var(--glass-strong)}

/* ---------- Phone-Frame + KI-Badge (übernommen) ---------- */
.phone-frame{position:relative;width:250px;border:7px solid #1A2350;border-radius:46px;overflow:hidden;background:#0B1030;box-shadow:0 30px 70px rgba(0,0,0,.5),0 0 60px rgba(232,201,133,.14)}
.phone-frame img{width:100%;height:auto}
/* KI-Kennzeichnung (Art. 50 Abs. 4, 5 KI-VO): nur an Bildern, die einen echten Ort zeigen.
   Eigenes Element statt ::after, weil Screenreader Pseudoelemente oft nicht vorlesen. */
.ai-badge{position:absolute;right:8px;bottom:8px;z-index:2;padding:3px 8px;border-radius:8px;background:rgba(8,12,24,.62);border:1px solid rgba(255,255,255,.28);color:rgba(255,255,255,.94);font-size:11px;line-height:1.4;font-weight:600;pointer-events:none}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:14px;left:0;right:0;z-index:60;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.nav-pill{
  pointer-events:auto;display:flex;align-items:center;gap:28px;width:min(100%,var(--container));
  padding:12px 14px 12px 22px;border-radius:999px;border:1px solid transparent;
  transition:width .7s var(--ease-out),padding .5s var(--ease-out),background-color .4s,border-color .4s,box-shadow .4s;
}
.nav.is-scrolled .nav-pill{
  width:min(100%,900px);padding:8px 8px 8px 20px;background:rgba(7,11,28,.62);border-color:var(--glass-line);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);box-shadow:0 12px 40px rgba(0,0,0,.35);
}
.brand{display:inline-flex;align-items:center;gap:9px;text-decoration:none;view-transition-name:brand}
.nav-pill>.brand{flex-shrink:0}
.brand-icon{width:26px;height:26px;flex:none;color:var(--gold)}
.brand-word{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--ink);white-space:nowrap;line-height:1}
.brand-word em{font-style:italic;color:var(--gold)}
/* Logo-Bild in der Kopfzeile. Höhe statt Breite, damit die Pille nicht wächst: Der Inhalt der Pille ist
   durch den Knopf (42,3 px, mobil 44 px) vorgegeben. Der negative Außenabstand lässt das Logo optisch
   etwas größer wirken, ohne Platz zu belegen. width/height im HTML reservieren die Fläche (kein Sprung). */
.brand-logo{display:block;flex:none;width:auto;height:44px;margin-block:-1px;transition:height .5s var(--ease-out)}
.nav.is-scrolled .brand-logo{height:36px;margin-block:0}
.nav-links{display:flex;gap:26px;align-items:center;margin-left:auto}
.nav-links a{position:relative;color:var(--ink-dim);text-decoration:none;font-size:14.5px;font-weight:500;white-space:nowrap;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink)}
.nav-links a[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:-9px;width:5px;height:5px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 2px rgba(232,201,133,.7);transform:translateX(-50%)}
.nav-cta{display:inline-block;background:var(--gold-grad);color:#1B1406;font-weight:700;font-size:13.5px;padding:11px 22px;border-radius:999px;text-decoration:none;white-space:nowrap;box-shadow:0 6px 20px rgba(216,178,106,.25)}
.nav-cta--menu{display:none}
/* Sprachmenü: <details> funktioniert ohne JS; nav.js schließt es bei Klick daneben und Escape. Geschlossen ähnlich leicht wie der frühere EN/DE-Link. */
.lang-menu{position:relative;z-index:2}
.lang-menu-knopf{display:inline-flex;align-items:center;gap:4px;padding:6px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:.08em;line-height:1.2;color:inherit;opacity:.78;cursor:pointer;white-space:nowrap;list-style:none;user-select:none;-webkit-tap-highlight-color:transparent}
.lang-menu-knopf::-webkit-details-marker{display:none}
.lang-menu-knopf::marker{content:""}
.lang-menu-knopf::after{content:"";width:5px;height:5px;margin:-3px 0 0 1px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:rotate(45deg);transition:transform .2s var(--ease-out)}
.lang-menu[open]>.lang-menu-knopf::after{margin-top:2px;transform:rotate(-135deg)}
.lang-menu-knopf:hover,.lang-menu-knopf:focus-visible,.lang-menu[open]>.lang-menu-knopf{opacity:1}
.lang-menu-knopf:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:999px}
.lang-menu-icon{flex:none;display:block;width:16px;height:16px}
/* Über dem Handy-Umbruch zieht ein kleiner negativer Außenabstand das Menü an die Nachbarn, damit die Kopfzeile so schmal bleibt wie mit dem früheren EN/DE-Link (861 px: ohne dies staucht sich das Logo). */
@media (min-width:861px){.lang-menu{margin-inline:-8px}}
.lang-menu-liste{position:absolute;right:0;top:calc(100% + 10px);z-index:3;min-width:150px;margin:0;padding:6px;list-style:none;border-radius:16px;border:1px solid var(--glass-line);background:rgba(7,11,28,.94);box-shadow:0 18px 50px rgba(0,0,0,.45)}
.lang-menu-liste a{display:flex;align-items:center;min-height:40px;padding:8px 14px;border-radius:10px;color:var(--ink-dim);font-size:14.5px;font-weight:500;letter-spacing:0;text-decoration:none;white-space:nowrap;transition:background-color .2s,color .2s}
.lang-menu-liste a:hover{background:rgba(255,255,255,.08);color:var(--ink)}
.lang-menu-liste a[aria-current]{color:var(--gold);font-weight:600}
.lang-menu-liste a:focus-visible{outline-offset:-2px;border-radius:10px}
/* Knapp über dem Handy-Umbruch (861–1000 px): Die Breite kommt vom Sprachmenü und vom Knopf „Get the app“ (englisch breiter als „App laden“); engere Abstände halten die Kopfzeile einzeilig. */
@media (min-width:861px) and (max-width:1000px){.nav-links{gap:18px}}
.nav-toggle{display:none}
@media (max-width:860px){
  .brand-logo,.nav.is-scrolled .brand-logo{height:34px;margin-block:0}
  .nav-toggle{display:grid;place-content:center;gap:6px;width:44px;height:44px;margin-left:auto;border-radius:50%;border:1px solid var(--glass-line);background:rgba(7,11,28,.5)}
  .nav-toggle i{display:block;width:18px;height:2px;border-radius:2px;background:var(--ink);transition:transform .35s var(--ease-out)}
  .nav-toggle[aria-expanded="true"] i:first-of-type{transform:translateY(4px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] i:last-of-type{transform:translateY(-4px) rotate(-45deg)}
  .nav-pill>.nav-cta{display:none}
  /* Sprachmenü rückt neben den Menüknopf (rechts), statt hinter dem Logo zu stehen; die Liste öffnet rechtsbündig. */
  .lang-menu{margin:0 -6px 0 auto}
  .nav-pill>.nav-toggle{margin-left:2px}
  /* ⚠️ Das Vollbild-Menü ist position:fixed IN der Pille. backdrop-filter macht die Pille
     zum Bezugsrahmen für fixed-Kinder, daher wird er bei offenem Menü abgeschaltet. */
  body.menu-open .nav .nav-pill,body.menu-open .nav.is-scrolled .nav-pill{-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-links{position:fixed;inset:0;z-index:-1;margin:0;flex-direction:column;justify-content:center;gap:18px;background:rgba(5,8,26,.95);opacity:0;visibility:hidden;transition:opacity .4s var(--ease-out),visibility .4s}
  body.menu-open .nav-links{opacity:1;visibility:visible}
  body.menu-open{overflow:hidden}
  .nav-links a{font-family:'Cormorant Garamond',serif;font-size:40px;font-weight:600;color:var(--ink);opacity:0;transform:translateY(16px);transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
  body.menu-open .nav-links a{opacity:1;transform:none}
  body.menu-open .nav-links a:nth-child(2){transition-delay:.05s}
  body.menu-open .nav-links a:nth-child(3){transition-delay:.1s}
  body.menu-open .nav-links a:nth-child(4){transition-delay:.15s}
  body.menu-open .nav-links a:nth-child(5){transition-delay:.2s}
  body.menu-open .nav-links a:nth-child(6){transition-delay:.25s}
  .nav-links a[aria-current="page"]::after{bottom:-2px}
  .nav-links .nav-cta--menu{display:inline-block;font-family:'Inter',sans-serif;font-size:16px;margin-top:14px;color:#1B1406}
}
/* Handy quer (z. B. 667×375): sechs Einträge à 40 px passen nicht in die Höhe → kleiner setzen, unter der Pille beginnen, notfalls scrollen. */
@media (max-width:860px) and (max-height:500px){
  .nav-links{justify-content:safe center;gap:4px;padding:76px 16px 12px;overflow-y:auto;overscroll-behavior:contain}
  .nav-links a{font-size:28px}
  .nav-links .nav-cta--menu{margin-top:6px;font-size:15px;padding:9px 20px}
}

/* ---------- Coco ---------- */
.coco-wrap{position:relative;perspective:1000px}
.coco{position:relative;display:block;width:100%;padding:0;background:none;border:0;cursor:pointer;view-transition-name:none}
div.coco{cursor:default}
.coco::before{content:"";position:absolute;inset:14% 6% 6%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(255,210,130,.5),rgba(255,180,90,.12) 60%,transparent);filter:blur(24px);animation:coco-glow 5s ease-in-out infinite}
.coco-tilt{display:block;transform:rotateX(var(--coco-rx,0deg)) rotateY(var(--coco-ry,0deg));transition:transform .6s var(--ease-out);transform-style:preserve-3d}
.coco img{width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:coco-float 6s ease-in-out infinite;transform-origin:50% 90%}
.coco:focus-visible{outline-offset:-10px;border-radius:40px}
@keyframes coco-float{50%{transform:translateY(-12px) rotate(-1deg)}}
@keyframes coco-glow{50%{opacity:.65;transform:scale(1.06)}}
/* 🔑 Kein visibility:hidden: Die Live-Region bleibt im Baum, sonst liest der Screenreader den Tipp nicht vor. */
.coco-bubble{
  position:absolute;left:52%;top:4%;z-index:3;width:max-content;max-width:min(250px,calc(100vw - 32px));padding:12px 16px;border-radius:18px 18px 18px 4px;
  background:#fffaf0;color:#1b1030;font-size:14px;font-weight:600;line-height:1.35;box-shadow:0 14px 40px rgba(0,0,0,.35);
  opacity:0;pointer-events:none;transform:translate(0,-100%) scale(.6);transform-origin:0 100%;
  transition:opacity .35s,transform .55s var(--ease-out);
}
.coco-bubble.is-open{opacity:1;pointer-events:auto;transform:translate(0,-100%) scale(1)}

/* ---------- Cursor ---------- */
.cursor{position:fixed;left:0;top:0;z-index:250;width:0;height:0;pointer-events:none}
.cursor-dot{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#fff6dc;box-shadow:0 0 12px 3px rgba(255,220,150,.7),0 0 40px 10px rgba(255,200,120,.22);mix-blend-mode:screen;transition:width .35s var(--ease-out),height .35s var(--ease-out),margin .35s var(--ease-out),background-color .3s,opacity .3s}
.cursor.is-hover .cursor-dot{width:46px;height:46px;margin:-23px 0 0 -23px;background:rgba(255,236,190,.12)}
.cursor.is-hidden .cursor-dot{opacity:0}
.cursor-trail{position:fixed;inset:0;z-index:249;width:100%;height:100%;pointer-events:none}
[data-magnet]{transition:translate .15s linear}

/* ---------- Tilt + Lichtreflex ---------- */
[data-tilt]{position:relative;transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s var(--ease-out),box-shadow .4s,border-color .4s}
[data-tilt]::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(255,236,190,.14),transparent 45%);opacity:0;transition:opacity .35s}
[data-tilt]:hover::after{opacity:1}

/* ---------- Intro ---------- */
/* 🔑 Ladezeit C1 (24.10.2026): Das Intro läuft als reine CSS-Animation ab dem ersten Bild und wartet nicht mehr auf
   GSAP. Linie 0,4 s, dann öffnet sich der Vorhang zur Mitte hin (0,45–1,0 s). Darunter steht die Seite schon fertig
   (LCP), intro.js übernimmt nur noch Überspringen (Klick/Taste) und Aufräumen. */
div.intro{display:none}
html.intro div.intro{position:fixed;inset:0;z-index:400;display:grid;place-items:center;background:#05081a;clip-path:inset(0 0 0 0);cursor:pointer;animation:intro-auf .55s cubic-bezier(.87,0,.13,1) .45s forwards}
div.intro i{display:block;width:min(60vw,520px);height:1px;background:var(--gold-grad);box-shadow:0 0 18px rgba(240,217,162,.8);transform:scaleX(0);animation:intro-linie .4s cubic-bezier(.87,0,.13,1) forwards,intro-linie-aus .3s ease .45s forwards}
@keyframes intro-linie{to{transform:scaleX(1)}}
@keyframes intro-linie-aus{to{opacity:0}}
@keyframes intro-auf{to{clip-path:inset(50% 0 50% 0);visibility:hidden}}

/* ---------- Einblendungen: nur verstecken, wenn JS sicher läuft ---------- */
html.js:not(.no-motion) [data-reveal],
html.js:not(.no-motion) [data-split],
html.js:not(.no-motion) .reveal{opacity:0}

/* ---------- Footer ---------- */
.site-footer{position:relative;margin-top:120px;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(5,8,26,0),rgba(5,8,26,.85) 40%)}
.footer-moon{position:relative;width:240px;height:190px;margin:-120px auto 0}
.moon{position:absolute;left:50%;top:6px;width:160px;height:160px;border-radius:50%;transform:translateX(-50%) rotate(-24deg);box-shadow:inset 30px -6px 0 0 #F0D9A2;filter:drop-shadow(0 0 30px rgba(240,217,162,.45))}
.coco-sleep{position:absolute;left:34%;top:46px;width:112px}
.coco-sleep img{animation:coco-breathe 4.5s ease-in-out infinite;transform-origin:50% 100%}
.coco-sleep::before{display:none}
@keyframes coco-breathe{50%{transform:scale(1.025,.985)}}
.zzz{position:absolute;left:62%;top:28px;font-family:'Cormorant Garamond',serif;font-style:italic;color:var(--gold);pointer-events:none}
.zzz i{position:absolute;font-size:18px;opacity:0;animation:zzz 3.6s ease-in infinite}
.zzz i:nth-child(2){animation-delay:1.2s;font-size:22px}
.zzz i:nth-child(3){animation-delay:2.4s;font-size:26px}
@keyframes zzz{0%{opacity:0;transform:translate(0,0)}20%{opacity:1}100%{opacity:0;transform:translate(26px,-46px)}}
.moon-spark{position:absolute;right:26px;top:14px;color:#fff4d6;font-size:16px;opacity:0;transition:opacity .4s,transform .6s var(--ease-out)}
/* Hover: Coco räkelt sich im Schlaf, ein Stern funkelt auf. */
.footer-moon:hover .coco-sleep img{animation:coco-stretch 1.2s var(--ease-out)}
.footer-moon:hover .moon-spark{opacity:1;transform:rotate(90deg) scale(1.4)}
@keyframes coco-stretch{40%{transform:rotate(-6deg) scale(1.04)}100%{transform:none}}
.footer-inner{width:min(100% - 32px,var(--container));margin:0 auto;padding:40px 0 32px;display:grid;grid-template-columns:1fr 2.6fr;gap:48px}
.footer-brand .brand{margin-bottom:14px;view-transition-name:none}
.footer-claim{color:var(--ink-mute);font-size:13.5px;max-width:320px;line-height:1.6}
.footer-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col h2{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--ink);margin-bottom:6px}
.footer-col a{color:var(--ink-mute);font-size:14px;text-decoration:none;transition:color .2s;overflow-wrap:anywhere}
.footer-col a:hover{color:var(--gold)}
.footer-bottom{width:min(100% - 32px,var(--container));margin:0 auto;padding:24px 0 40px;border-top:1px solid rgba(255,255,255,.06);color:var(--ink-mute);font-size:12.5px}
.footer-ai-note{margin-top:6px;font-size:12px;line-height:1.5;opacity:.8}
.footer-lang{margin:0 0 6px;font-size:13px}
.footer-lang a{color:inherit}
.footer-lang a[aria-current]{opacity:1;font-weight:600;text-decoration:none}
@media (max-width:1100px){.footer-inner{grid-template-columns:1fr;gap:32px}}
@media (max-width:760px){.footer-cols{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.footer-cols{grid-template-columns:1fr}}

/* ---------- Seitenwechsel (View Transitions, nur Zugabe) ---------- */
@view-transition{navigation:auto}
.coco-hero{view-transition-name:coco}
::view-transition-old(root),::view-transition-new(root){animation-duration:.45s;animation-timing-function:cubic-bezier(.16,1,.3,1)}

/* ---------- Reduzierte Bewegung (System-Einstellung oder ?ruhig → html.ruhig) ---------- */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
}
html.ruhig *,html.ruhig *::before,html.ruhig *::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}

/* Formular-Rückmeldung (Kontakt, Erinnerung zum Start): grün = geklappt, gold = Hinweis/Fehler. */
.form-banner{max-width:760px;margin:0 auto 24px;border-radius:12px;padding:14px 16px;font-size:14.5px;line-height:1.6}
.form-banner.ok{background:rgba(52,245,178,.1);border:1px solid rgba(52,245,178,.4);color:#8ff5d0}
.form-banner.err{background:rgba(232,201,133,.1);border:1px solid rgba(232,201,133,.45);color:var(--gold)}