/* Soul-M8 – Coming soon. Farben und Schriften wie das Soul-M8-Dashboard (Nachtblau, Eisblau, Chrom). */
:root {
  --nacht: #060c15;
  --tief: #0a1524;
  --linie: rgba(158, 190, 220, .14);
  --linie-hell: rgba(169, 220, 255, .32);
  --eis: #4aaef5;
  --baby: #a9dcff;
  --studio: #eaf6ff;
  --text: #e4edf6;
  --grau: #8fa4b7;
  --still: #5f7488;
  --mint: #7ff0c0;
  --chrom: linear-gradient(176deg, #ffffff 0%, #d6edff 34%, #8cc9f4 58%, #e6f4ff 82%, #ffffff 100%);
  --knopf: linear-gradient(180deg, #d4efff 0%, #8fd0fb 45%, #47a8ee 100%);
  --sans: "SM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "SM Serif", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --rand: clamp(16px, 4vw, 64px);
  color-scheme: dark;
}
html[lang="ru"] { --sans: "SM Sans RU", system-ui, sans-serif; --serif: "SM Serif RU", Georgia, serif; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden; background: var(--nacht); color: var(--text);
  font: 400 17px/1.55 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* feines Korn über allem – nimmt den Flächen das Digitale */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--baby); outline-offset: 3px; border-radius: 8px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 14px; border-radius: 10px; background: var(--studio); color: var(--nacht); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }
.ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic .voll { fill: currentColor; stroke: none; }
.ic.ic-tg { fill: currentColor; stroke: none; transform: translateX(-1px); }  /* echtes Telegram-Flugzeug wie auf /home (04.11.2026) */

/* ---------------------------------------------------------------- Kopf */
.kopf {
  position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px var(--rand); transition: background .3s, border-color .3s, padding .3s; border-bottom: 1px solid transparent;
}
/* Logo nie auf hellem Grund (Regel des Users 04.11.2026): am Handy liegt der Kopf über Veras Foto → dunkler Verlauf dahinter */
@media (max-width: 900px) {
  .kopf:not(.fest)::before { content: ""; position: absolute; inset: 0 0 -28px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(5, 10, 18, .92) 0%, rgba(5, 10, 18, .7) 55%, rgba(5, 10, 18, 0) 100%); }
}
.kopf.fest { padding-block: 12px; background: rgba(6, 12, 21, .82); border-bottom-color: var(--linie); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3); }
.marke img { width: clamp(166px, 17vw, 216px); height: auto; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; }
/* Sprachwahl: eigenes Dropdown im Soul-M8-Stil (Glas, Eisblau, Haken an der gewählten Sprache) */
.sprache { position: relative; }
.sw-knopf {
  display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 12px; border-radius: 12px;
  border: 1px solid var(--linie); background: rgba(10, 19, 32, .62); color: var(--studio); font: 600 14px/1 var(--sans); cursor: pointer;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); transition: border-color .2s, background .2s;
}
.sw-knopf:hover { border-color: var(--linie-hell); background: rgba(14, 26, 44, .72); }
.sw-knopf[aria-expanded="true"] { border-color: rgba(169, 220, 255, .55); background: rgba(14, 26, 44, .85); }
.sw-globus { width: 16px; height: 16px; fill: none; stroke: var(--baby); stroke-width: 1.7; flex: none; }
.sw-name { white-space: nowrap; }
.sw-pfeil { width: 15px; height: 15px; margin-left: 2px; fill: none; stroke: var(--grau); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; transition: transform .25s var(--ease); }
.sw-knopf[aria-expanded="true"] .sw-pfeil { transform: rotate(180deg); }
.sw-liste {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; min-width: 236px; margin: 0; padding: 6px; list-style: none;
  border-radius: 16px; border: 1px solid rgba(170, 205, 240, .18); background: rgba(8, 16, 29, .96);
  -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
  box-shadow: 0 24px 60px -16px rgba(0, 0, 0, .8), 0 0 0 1px rgba(74, 174, 245, .06), inset 0 1px 0 rgba(169, 220, 255, .06);
  transform-origin: top right; animation: sw-auf .18s var(--ease);
}
.sw-liste:focus { outline: none; }
@keyframes sw-auf { from { opacity: 0; transform: translateY(-6px) scale(.98); } }
.sw-liste li {
  display: flex; align-items: center; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  color: #c4d3e2; font-size: 14.5px; font-weight: 550; transition: background .15s, color .15s;
}
.sw-liste .sw-code { width: 24px; color: var(--still); font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.sw-liste .sw-haken { margin-left: auto; width: 16px; height: 16px; fill: none; stroke: var(--baby); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.sw-liste li:hover, .sw-liste li.aktiv { background: rgba(169, 220, 255, .08); color: var(--studio); }
.sw-liste li[aria-selected="true"] { color: var(--studio); background: linear-gradient(90deg, rgba(74, 174, 245, .18), rgba(74, 174, 245, .06)); }
.sw-liste li[aria-selected="true"] .sw-code { color: var(--baby); }
.sw-liste li[aria-selected="true"] .sw-haken { opacity: 1; }

/* ---------------------------------------------------------------- Knöpfe */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 16px;
  border: 1px solid transparent; font: 650 16px/1.1 var(--sans); text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform .2s var(--ease), box-shadow .25s, background .25s, border-color .25s, color .25s;
}
.knopf-voll { background: var(--knopf); color: #03121f; box-shadow: 0 12px 36px rgba(74, 174, 245, .36), inset 0 1px 0 rgba(255, 255, 255, .7); }
.knopf-voll:hover { transform: translateY(-2px); box-shadow: 0 18px 46px rgba(74, 174, 245, .5), inset 0 1px 0 rgba(255, 255, 255, .8); }
.knopf-leise { border-color: var(--linie-hell); background: rgba(10, 19, 32, .55); color: var(--studio); }
.knopf-leise:hover { border-color: var(--baby); background: rgba(169, 220, 255, .08); transform: translateY(-2px); }
.knopf-rund { width: 54px; padding: 0; border-color: var(--linie-hell); background: rgba(10, 19, 32, .55); color: var(--studio); }
.knopf-rund:hover { border-color: var(--baby); background: rgba(169, 220, 255, .08); transform: translateY(-2px); }
.knopf-klein { min-height: 40px; padding: 0 15px; border-radius: 12px; font-size: 14px; gap: 8px; background: var(--knopf); color: #03121f; box-shadow: 0 8px 24px rgba(74, 174, 245, .3); }
.knopf-klein .ic { width: 17px; height: 17px; }
.knopf-klein:hover { transform: translateY(-1px); }
.knopf[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---------------------------------------------------------------- Held */
.held {
  /* Desktop: die ganze Held-Sektion passt in den Bildschirm – Größen richten sich nach Breite UND Höhe */
  position: relative; min-height: max(100svh, 620px); display: grid; align-items: center;
  padding: clamp(80px, 11vh, 118px) var(--rand) clamp(28px, 5vh, 56px); isolation: isolate; overflow: hidden;
}
.held::before {  /* Lichtfeld hinter Vera, wie das Studio-Licht im Bild */
  content: ""; position: absolute; inset: 0; z-index: -2;
  background:
    radial-gradient(52% 70% at 74% 42%, rgba(46, 128, 214, .30), transparent 70%),
    radial-gradient(40% 46% at 8% 92%, rgba(74, 174, 245, .10), transparent 70%),
    linear-gradient(180deg, #050b14 0%, #060c15 70%, #060c15 100%);
}
.held-bild {
  position: absolute; z-index: -1; right: 0; top: 0; bottom: 0; width: min(58%, 980px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 26%, #000 100%), linear-gradient(0deg, transparent 0%, #000 22%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent 0%, #000 26%), linear-gradient(0deg, transparent 0%, #000 22%);
  mask-composite: intersect;
}
.held-bild img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; }
.held-bild .licht {  /* einmaliger Lichtstreif beim Laden */
  position: absolute; inset: -10% -40%; pointer-events: none; mix-blend-mode: screen; opacity: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(169, 220, 255, .22) 50%, transparent 60%);
}
.held-text { position: relative; min-width: 0; max-width: min(740px, 48vw); }  /* min-width 0: der einzeilige Titel darf das Grid nie aufziehen */
.chip {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 clamp(14px, 2.6vh, 26px); padding: 8px 15px 8px 12px; border-radius: 999px;
  border: 1px solid var(--linie-hell); background: rgba(10, 19, 32, .55); color: var(--studio); font-size: 14.5px; font-weight: 600;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.puls { width: 9px; height: 9px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 0 rgba(127, 240, 192, .6); animation: puls 2.2s ease-out infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 10px rgba(127, 240, 192, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 240, 192, 0); } }
h1 {
  margin: -.12em -.06em -.2em; padding: .12em .06em .2em;  /* Platz für Unterlängen (g, y, ş, д) und Akzente (É, Ö, Ё) – sonst schneidet background-clip sie ab */
  font: 400 clamp(40px, min(5.6vw, 9.6vh), 100px)/.98 var(--serif); letter-spacing: -.012em; white-space: nowrap;
  color: #fff;  /* alles weiß, „Soulmate“ blau (Wunsch des Users 05.11.2026) */
}
h1 .sm-blau {
  font-style: normal; padding: .08em 0 .16em; margin: -.08em 0 -.16em;
  background: linear-gradient(180deg, #b9e3ff 0%, #6cc0fa 48%, #3d9fea 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}  /* der Titel steht in einer Zeile – app.js passt die Größe an */
h1.zwei span { display: block; }  /* nur wenn eine Zeile zu klein würde (sehr schmale Handys, lange Sprachen) */
html[lang="ru"] h1 { font-weight: 500; line-height: .95; }
.einleitung { max-width: 540px; margin: clamp(14px, 2.4vh, 26px) 0 0; color: #c4d3e2; font-size: clamp(17px, 1.35vw, 19.5px); line-height: 1.6; }

/* Countdown */
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(18px, 3.4vh, 40px) 0 0; max-width: 600px; border-block: 1px solid var(--linie); }
.cd-einheit { position: relative; display: grid; justify-items: center; gap: 2px; padding: clamp(10px, 1.6vh, 16px) 6px clamp(9px, 1.4vh, 14px); }
.cd-einheit + .cd-einheit::before { content: ""; position: absolute; left: 0; top: 22%; bottom: 22%; width: 1px; background: var(--linie); }
.cd-einheit b {
  display: block; min-width: 2.4ch; text-align: center; font: 400 clamp(42px, min(5vw, 8.4vh), 84px)/1 var(--serif); font-variant-numeric: lining-nums tabular-nums;
  background: var(--chrom); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.cd-einheit b.tick { animation: tick .55s var(--ease); }
@keyframes tick { from { opacity: 0; transform: translateY(-28%); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }
.cd-einheit span { color: var(--grau); font-size: 13px; font-weight: 600; letter-spacing: .02em; }
.cd-datum { min-height: 1.5em; margin: 14px 0 0; color: var(--grau); font-size: 14.5px; }
.cd-datum b { color: var(--studio); font-weight: 600; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(18px, 3.2vh, 34px); }
.hinweis { display: flex; align-items: center; gap: 9px; margin: clamp(12px, 1.8vh, 18px) 0 0; color: var(--still); font-size: 14px; }
.hinweis .ic { width: 16px; height: 16px; }

/* Vera schreibt */
.vera-chat {
  position: absolute; z-index: 2; right: clamp(24px, 6vw, 150px); bottom: clamp(24px, 6vh, 72px); width: min(330px, 26vw); margin: 0;
  padding: 16px 18px 18px; border-radius: 22px; border: 1px solid var(--linie-hell);
  background: linear-gradient(160deg, rgba(16, 32, 52, .78), rgba(8, 16, 28, .82)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .7);
}
.vc-kopf { display: flex; align-items: center; gap: 11px; }
.vc-kopf img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 40%; box-shadow: 0 0 0 2px rgba(169, 220, 255, .35); }
.vc-kopf b { display: block; color: var(--studio); font-size: 16px; }
.vc-kopf span { display: inline-flex; align-items: center; gap: 6px; color: var(--grau); font-size: 13px; }
.punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); }
.vc-tippt { display: none; gap: 5px; margin: 14px 0 2px; }
.vc-tippt i { width: 7px; height: 7px; border-radius: 50%; background: var(--baby); opacity: .4; animation: tippt 1.1s infinite; }
.vc-tippt i:nth-child(2) { animation-delay: .15s; } .vc-tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes tippt { 30% { opacity: 1; transform: translateY(-3px); } }
.vc-text { margin: 12px 0 0; color: var(--text); font-size: 15px; line-height: 1.5; }
.vera-chat.tippt .vc-tippt { display: flex; }
.vera-chat.tippt .vc-text { display: none; }

/* ---------------------------------------------------------------- Ein erster Blick */
.peek { padding: clamp(80px, 11vw, 150px) var(--rand) clamp(60px, 7vw, 100px); }
.abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 40px; margin-bottom: clamp(28px, 4vw, 48px); }
h2 { margin: 0; font: 400 clamp(44px, 5.6vw, 84px)/.95 var(--serif); letter-spacing: -.01em; color: var(--studio); }
html[lang="ru"] h2 { font-weight: 500; }
.abschnitt-kopf p { max-width: 420px; margin: 0; color: var(--grau); font-size: 17px; }
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: clamp(380px, 34vw, 540px); gap: 14px; }
.karte { position: relative; overflow: hidden; border-radius: 24px; background: var(--tief); box-shadow: inset 0 0 0 1px var(--linie); isolation: isolate; }
.karte.k-ultra { grid-column: span 2; }
.medien { position: absolute; inset: 0; z-index: -1; display: grid; }
.medien > img, .medien > video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.medien.drei { grid-template-columns: repeat(3, 1fr); gap: 3px; }
.medien.vier { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); gap: 3px; }
/* Identity Sheet (Angezogen): alle 5 Ansichten ganz sichtbar – wie ein Blatt, Text darunter statt darüber */
.k-id { display: flex; flex-direction: column; }
.k-id::after { display: none; }
/* Fix 05.11.2026: EIN fertig gesetztes Bild (id-sheet.webp) statt 5 Einzelbildern im Raster – iPhone-Safari/Telegram rechnete das Raster
   falsch (Köpfe als Streifen, Strich in der Mitte). Das Bild liegt absolut im Bereich: keine Prozent-Höhen im Raster, überall gleich. */
.k-id .medien.sheet {
  position: relative; inset: auto; z-index: 0; display: block; flex: 1 1 0; min-height: 0;
  background: #f3f3f6;  /* exakt der Hintergrund des Bildes – ein einziger Weißton */
}
.k-id .medien.sheet img {
  position: absolute; top: 10px; right: 10px; bottom: 6px; left: 10px; width: calc(100% - 20px); height: calc(100% - 16px);
  object-fit: contain; object-position: 50% 50%;
}
.k-id:hover .medien > img { transform: none; }
.k-id .text { position: relative; padding-top: 16px; background: linear-gradient(180deg, #0c1a2b, var(--tief)); }
.karte::after {  /* Text bleibt auf jedem Bild lesbar */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(6, 12, 21, 0) 42%, rgba(6, 12, 21, .55) 64%, rgba(6, 12, 21, .94) 100%);
}
.karte:hover .medien > img, .karte:hover .medien > video { transform: scale(1.035); }
.text { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 22px 22px; }
.tag {
  display: inline-block; margin-bottom: 10px; padding: 4px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 650; color: var(--baby);
  background: rgba(10, 19, 32, .7); box-shadow: inset 0 0 0 1px var(--linie-hell); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.karte h3 { margin: 0; color: #fff; font: 700 clamp(20px, 1.6vw, 24px)/1.15 var(--sans); letter-spacing: -.01em; }
.karte p { margin: 7px 0 0; color: #c4d3e2; font-size: 15px; line-height: 1.45; max-width: 36ch; }
/* Chat-Blasen im Auto-Chatting */
.blasen { position: absolute; left: 16px; right: 16px; top: 22px; display: grid; gap: 8px; }
.blase { max-width: 82%; padding: 9px 13px; border-radius: 16px; font-size: 14px; line-height: 1.35; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s var(--ease); }
.blase.fan { justify-self: start; background: rgba(240, 245, 250, .92); color: #0b1626; border-bottom-left-radius: 5px; }
.blase.sie { justify-self: end; background: linear-gradient(180deg, #8fd0fb, #47a8ee); color: #03121f; border-bottom-right-radius: 5px; transition-delay: .9s; }
.k-chat.sichtbar .blase { opacity: 1; transform: none; }
/* geheime Karte */
.k-geheim .medien img { filter: saturate(.92) brightness(.82); transform: scale(1.02); }  /* Milchglas ist im Bild selbst (geheim.webp) */
.k-geheim:hover .medien img { transform: scale(1.05); }
.schloss { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 10px; padding-bottom: 90px; }
.schloss svg { width: 46px; height: 46px; margin-bottom: 14px; fill: none; stroke: var(--baby); stroke-width: 1.5; filter: drop-shadow(0 0 18px rgba(74, 174, 245, .6)); }
.schloss i { display: block; width: 62%; height: 12px; border-radius: 4px; background: linear-gradient(90deg, rgba(169, 220, 255, .14), rgba(169, 220, 255, .32), rgba(169, 220, 255, .14)); background-size: 200% 100%; animation: glanz 2.6s linear infinite; }
.schloss i:nth-of-type(2) { width: 48%; } .schloss i:nth-of-type(3) { width: 55%; }
@keyframes glanz { from { background-position: 200% 0; } to { background-position: -200% 0; } }
/* zweiter Absatz der geheimen Karte: normale Kachel-Schrift wie .karte p (Wunsch des Users 04.11.2026) */
.tag-geheim { color: #ffd88a; box-shadow: inset 0 0 0 1px rgba(255, 216, 138, .4); }
.karte .p7-zusatz { margin-top: 0; }  /* gleicher Abstand wie eine umbrochene Zeile (Wunsch des Users 05.11.2026) */

/* ---------------------------------------------------------------- Zahlen */
.zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 var(--rand); border-block: 1px solid var(--linie); }
.zahlen > div { padding: clamp(28px, 3.4vw, 46px) clamp(14px, 2vw, 30px); }
.zahlen > div + div { border-left: 1px solid var(--linie); }
.zahlen b { display: block; font: 400 clamp(48px, 5vw, 80px)/1 var(--serif); background: var(--chrom); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; }
.zahlen span { display: block; margin-top: 10px; color: var(--grau); font-size: 15px; line-height: 1.45; max-width: 26ch; }

/* ---------------------------------------------------------------- Guide */
.guide { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); padding: clamp(90px, 11vw, 150px) var(--rand); }
@media (min-width: 901px) { .guide { padding-left: calc(var(--rand) + 30px); padding-right: max(0px, calc(var(--rand) - 30px)); } }  /* ganzer Guide 30 px nach rechts (Wunsch des Users) */
.guide-seiten { position: relative; aspect-ratio: 16 / 11.5; }
.guide-seiten img {
  position: absolute; left: 6%; top: 12%; width: 84%; height: auto; border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .8), 0 0 0 1px var(--linie);
  transition: transform .7s var(--ease);
}
.guide-seiten img:nth-child(1) { transform: rotate(7deg) translate(9%, -10%); filter: brightness(.6); }
.guide-seiten img:nth-child(2) { transform: rotate(-6deg) translate(-7%, -4%); filter: brightness(.75); }
.guide-seiten img:nth-child(3) { transform: translate(2%, 8%); }
.guide-seiten:hover img:nth-child(1) { transform: rotate(10deg) translate(15%, -16%); }
.guide-seiten:hover img:nth-child(2) { transform: rotate(-9deg) translate(-12%, -6%); }
.guide-text p { margin: 22px 0 0; max-width: 46ch; color: #c4d3e2; font-size: 18px; }
.guide-text .knopf { margin-top: 32px; }
.guide-text .guide-meta { margin-top: 14px; color: var(--still); font-size: 14px; }
.guide-text .guide-andere { margin-top: 26px; color: var(--grau); font-size: 14.5px; }
.guide-andere a { display: inline-block; margin: 6px 6px 0 0; padding: 5px 11px; border-radius: 999px; color: var(--studio); text-decoration: none; font-size: 13.5px; box-shadow: inset 0 0 0 1px var(--linie); }
.guide-andere a:hover { box-shadow: inset 0 0 0 1px var(--baby); background: rgba(169, 220, 255, .06); }

/* ---------------------------------------------------------------- Schluss (Telegram) */
.schluss {
  position: relative; display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(28px, 5vw, 80px);
  margin: 0 var(--rand) clamp(70px, 9vw, 120px); padding: 0 clamp(24px, 5vw, 80px) 0 0; border-radius: 32px; overflow: hidden;
  background: radial-gradient(70% 120% at 20% 50%, rgba(46, 128, 214, .28), transparent 70%), linear-gradient(160deg, #0b1a2d, #070f1b);
  box-shadow: inset 0 0 0 1px var(--linie);
}
.schluss { min-height: 500px; }
.schluss-bild { position: relative; align-self: stretch; min-height: 460px; }
.schluss-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%;
  -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent); mask-image: linear-gradient(90deg, #000 60%, transparent); }
.schluss-text { padding-block: clamp(40px, 5vw, 70px); }
.schluss-text p { margin: 20px 0 0; max-width: 44ch; color: #c4d3e2; font-size: 18px; }

/* ---------------------------------------------------------------- Fuß */
.fuss { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px 28px; padding: 30px var(--rand) 40px; border-top: 1px solid var(--linie); color: var(--still); font-size: 14px; }
.fuss img { width: 173px; height: auto; opacity: .85; }
.fuss p { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; }
.fuss > img { justify-self: start; } .fuss > p { justify-self: center; } .fuss > .zahlarten { justify-self: end; }  /* Copyright genau mittig (04.11.2026) */

/* ---------------------------------------------------------------- Auftritt: ein einziger orchestrierter Moment beim Laden */
.js .held-bild img { opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease, transform 2.4s var(--ease); }
.js .held-text > * { opacity: 0; transform: translateY(18px); transition: opacity .9s ease, transform .9s var(--ease); }
.js .vera-chat { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .8s ease, transform .8s var(--ease); }
.js.bereit .held-bild img, .js.bild-bereit .held-bild img { opacity: 1; transform: none; }
.js.bereit .held-bild .licht { animation: licht 2.6s .5s var(--ease) both; }
.js.bereit .held-text > * { opacity: 1; transform: none; }
.js.bereit .held-text > :nth-child(2) { transition-delay: .12s; } .js.bereit .held-text > :nth-child(3) { transition-delay: .24s; }
.js.bereit .held-text > :nth-child(4) { transition-delay: .36s; } .js.bereit .held-text > :nth-child(5) { transition-delay: .42s; }
.js.bereit .held-text > :nth-child(6) { transition-delay: .5s; } .js.bereit .held-text > :nth-child(7) { transition-delay: .58s; }
.js.bereit .vera-chat { opacity: 1; transform: none; transition-delay: 1.1s; }
@keyframes licht { from { opacity: 1; transform: translateX(-60%); } to { opacity: 0; transform: translateX(60%); } }

/* niedrige Laptop-Bildschirme: alles etwas kompakter, damit der Held ganz sichtbar bleibt */
@media (max-height: 780px) and (min-width: 901px) {
  .held { padding-top: 74px; padding-bottom: 22px; }
  .chip { margin-bottom: 12px; font-size: 13.5px; padding: 6px 13px 6px 11px; }
  .einleitung { font-size: 16px; line-height: 1.5; margin-top: 12px; }
  .countdown { margin-top: 16px; }
  .cd-einheit b { font-size: clamp(40px, 7.6vh, 70px); }
  .cd-datum { margin-top: 8px; font-size: 13.5px; }
  .aktionen { margin-top: 16px; }
  .knopf { min-height: 48px; }
  .knopf-rund { width: 48px; }
  .hinweis { margin-top: 10px; }
  .vera-chat { bottom: 22px; }
}

/* ---------------------------------------------------------------- Tablet */
@media (max-width: 1200px) and (min-width: 901px) {
  .held-bild { width: 54%; }
  .held-text { max-width: 54vw; }
  .held-bild img { object-position: 60% 14%; }
}
@media (max-width: 1100px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(380px, 62vw, 560px); }
  .k-geheim { grid-column: span 2; }
  .k-geheim { grid-row: auto; }
  .zahlen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .zahlen > div:nth-child(3) { border-left: 0; }
  .zahlen > div:nth-child(n+3) { border-top: 1px solid var(--linie); }
  .vera-chat { right: 24px; width: 290px; }
}
@media (max-width: 900px) {
  .held { min-height: 0; align-items: start; padding-top: 0; }
  .held-bild { position: relative; inset: auto; width: calc(100% + 2 * var(--rand)); height: min(128vw, 660px); margin: 0 calc(-1 * var(--rand));
    -webkit-mask-image: linear-gradient(0deg, transparent 0%, #000 34%); mask-image: linear-gradient(0deg, transparent 0%, #000 34%); }
  .held-bild img { object-position: 50% 10%; }
  .held { padding-bottom: 40px; }
  .held-text { max-width: none; margin-top: -110px; }
  .vera-chat { position: relative; right: auto; bottom: auto; width: 100%; margin-top: 30px; padding: 14px 16px 16px; }
  .vc-text { font-size: 14px; }
  .guide { grid-template-columns: 1fr; }
  .guide-seiten { max-width: 620px; width: 100%; }
  .schluss { grid-template-columns: 1fr; padding: 0; }
  .schluss-bild { min-height: 0; height: 380px; }
  .schluss-bild img { -webkit-mask-image: linear-gradient(0deg, transparent, #000 45%); mask-image: linear-gradient(0deg, transparent, #000 45%); }
  .schluss-text { padding: 0 24px 40px; margin-top: -60px; position: relative; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .kopf { padding: 12px 16px; }
  .knopf-klein span { display: none; }
  .sw-name { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }
  .sw-liste { right: -48px; min-width: 228px; }
  .knopf-klein { width: 40px; padding: 0; }
  .countdown { margin-top: 30px; }
  .cd-einheit { padding: 14px 2px 12px; }
  .cd-einheit span { font-size: 11.5px; }
  .aktionen { display: grid; grid-template-columns: 1fr auto; }
  .aktionen .knopf-voll { grid-column: 1 / -1; }
  .knopf { white-space: normal; text-align: center; }
  .bento { grid-template-columns: 1fr; grid-auto-rows: 128vw; }
  .karte.k-ultra, .k-geheim { grid-column: auto; }
  .karte.k-ultra { grid-row: span 1; }
  .zahlen > div { padding-inline: 12px; }
  .zahlen span { font-size: 14px; }
  .schluss .aktionen { grid-template-columns: 1fr; }
  .fuss { display: flex; flex-direction: column; align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .js .held-bild img, .js .held-text > *, .js .vera-chat { opacity: 1; transform: none; }
  .blase { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- Zahlungsarten in der Fußzeile (04.11.2026) */
.zahlarten { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.zahl { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 30px; min-width: 50px; padding: 0 11px; border-radius: 8px;
  background: linear-gradient(180deg, rgba(169, 220, 255, .08), rgba(169, 220, 255, .025)); box-shadow: inset 0 0 0 1px rgba(158, 190, 220, .18);
  color: #a3b8cb; font: 800 12px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; user-select: none; transition: color .25s, box-shadow .25s; }
.zahl:hover { color: #e4edf6; box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .36); }
.zahl-visa { font-style: italic; font-size: 13px; letter-spacing: .05em; }
.zahl-mc svg { width: 27px; height: 18px; display: block; }
.zahl-mc circle { fill: currentColor; }
.zahl-mc circle:first-child { opacity: .78; }
.zahl-mc circle:last-child { opacity: .42; }
.zahl-amex b { font-weight: 800; font-size: 9.5px; line-height: 1; letter-spacing: .08em; padding: 3px 4px; border: 1.4px solid currentColor; border-radius: 3px; }
.zahl-stripe { font-size: 14.5px; font-weight: 760; letter-spacing: -.03em; }
.zahl-krypto { font-weight: 700; font-size: 12px; letter-spacing: 0; }
.zahl-krypto svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

.zahl .zm { display: inline-flex; align-items: center; gap: 6px; transform: translate(var(--zx, 0px), var(--zy, 0px)); }
/* Zeichen genau mittig in der Kachel (gemessen 04.11.2026, Ausgleich der Schrift-Metrik) */
.zahl-visa { --zx: -1px; --zy: 0.75px; }
.zahl-mc { --zx: 0px; --zy: -0.5px; }
.zahl-amex { --zx: -0.5px; --zy: 0px; }
.zahl-stripe { --zx: 0px; --zy: 0.75px; }
.zahl-krypto { --zx: 0px; --zy: -0.5px; }

/* ---------------------------------------------------------------- Vera ruft an: Videoanruf zum Annehmen (04.11.2026) */
.anruf {
  position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
  gap: clamp(36px, 6vw, 110px); padding: max(16px, calc(clamp(60px, 8vw, 120px) - 80px)) var(--rand) clamp(90px, 11vw, 160px);  /* −30 und −50 px zum Guide (Wünsche des Users) */
}
.anruf { overflow-x: clip; }
@media (min-width: 901px) { .anruf { margin-top: -50px; } }  /* ganze Sektion höher (Wünsche des Users) */
@media (min-width: 1300px) { .anruf { margin-top: -100px; } }  /* große Bildschirme: 2 × 50 px; darunter nur 50, sonst klebt das Handy am Guide */  /* Ringe/Lichtfeld nie über den Bildschirmrand (das große Handy ist fixed und bleibt davon frei) */
.anruf-text { position: relative; top: -110px; max-width: 600px; margin-left: clamp(0px, calc((100vw - 900px) * .4), 180px); }  /* 180 px nach rechts (ab 1300 px Breite, darunter weniger), 110 px nach oben (Wünsche des Users) */
.anruf-text .chip { margin-bottom: 22px; }
.anruf-sub { margin: 22px 0 0; max-width: 42ch; color: #c4d3e2; font-size: 18px; }
.anruf-sub b { color: var(--studio); font-weight: 700; }  /* „Nimm ab.“ fett (Wunsch des Users) */

.anruf-buehne { position: relative; display: grid; place-items: center; min-height: 0; }
.anruf-buehne::before {  /* Lichtfeld hinter dem Handy */
  content: ""; position: absolute; z-index: -1; width: min(620px, 120%); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(46, 128, 214, .34), rgba(46, 128, 214, .1) 55%, transparent);
}
.af-wellen { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.af-wellen i {
  grid-area: 1 / 1; width: min(320px, 70vw); aspect-ratio: 1; border-radius: 50%; opacity: 0;
  box-shadow: inset 0 0 0 1px rgba(127, 240, 192, .5), 0 0 40px rgba(127, 240, 192, .08);
}
.anruf.sicht[data-zustand="klingelt"] .af-wellen i { animation: af-welle 2.4s cubic-bezier(.2, .6, .3, 1) infinite; }
.anruf.sicht[data-zustand="klingelt"] .af-wellen i:nth-child(2) { animation-delay: .8s; }
.anruf.sicht[data-zustand="klingelt"] .af-wellen i:nth-child(3) { animation-delay: 1.6s; }
@keyframes af-welle { 0% { opacity: .9; transform: scale(.82); } 100% { opacity: 0; transform: scale(2.05); } }

/* Platzhalter hält die Größe, wenn das Handy groß in die Mitte geht */
.af-platz { position: relative; width: min(266px, 62vw); aspect-ratio: 9 / 19.3; }
.af-platz::before {  /* weicher Schatten unter dem schrägen Handy */
  content: ""; position: absolute; left: 4%; right: 14%; bottom: -7%; height: 9%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .7), transparent); filter: blur(10px); transform: translateX(-6%) rotate(-3deg);
  transition: opacity .5s ease;
}
.anruf.offen .af-platz::before { opacity: 0; }
.af-handy { position: absolute; inset: 0; container-type: inline-size; transform-origin: 0 0; perspective: 1500px; }
.af-handy.gross { position: fixed; inset: auto; z-index: 96; }
.af-kippe {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transform: rotateY(-18deg) rotateX(8deg) rotateZ(3deg); transition: transform .85s cubic-bezier(.2, .8, .2, 1);
}
.af-handy.gross .af-kippe { transform: none; }
.af-handy.gross .af-kippe, .af-handy.gross .af-rahmen { transform-style: flat; }
.af-kippe::before {  /* Seitenkante: Gehäuse hinter dem Glas ergibt die Tiefe */
  content: ""; position: absolute; inset: 0; border-radius: 14cqw; transform: translateZ(-2.4cqw);
  background: linear-gradient(90deg, #3a4554 0%, #151c26 20%, #0a0f16 60%, #2b3542 100%);
  box-shadow: 0 0 0 .4cqw #1d2530;
}
.af-handy.gross .af-kippe::before { opacity: 0; transition: opacity .3s ease .5s; }
.af-taste { position: absolute; z-index: -1; width: 1.4cqw; border-radius: 1cqw; background: linear-gradient(90deg, #4a5666, #1b2330); transform: translateZ(-1.2cqw); }
.af-taste-l1 { left: -1cqw; top: 22%; height: 9%; }
.af-taste-l2 { left: -1cqw; top: 33%; height: 9%; }
.af-taste-r { right: -1cqw; top: 27%; height: 14%; }
.af-rahmen {
  position: absolute; inset: 0; padding: 2.7cqw; border-radius: 14cqw; transform-style: preserve-3d;
  background: linear-gradient(150deg, #2a3442 0%, #121923 38%, #0b1018 62%, #222b37 100%);
  box-shadow: inset 0 0 0 .5cqw rgba(214, 237, 255, .14), inset 0 0 0 1.2cqw rgba(0, 0, 0, .55),
    0 50px 110px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(169, 220, 255, .08);
}
/* Vibrieren im Takt des Klingeltons: app.js setzt .vibriert zu Beginn jedes Klingel-Zyklus */
.anruf.vibriert[data-zustand="klingelt"] .af-rahmen { animation: af-vibrieren .78s linear; }
@keyframes af-vibrieren {
  0%, 100% { transform: none; }
  8% { transform: translateX(-2px) rotate(-1.3deg); } 16% { transform: translateX(2px) rotate(1.3deg); }
  24% { transform: translateX(-2px) rotate(-1.3deg); } 32% { transform: translateX(2px) rotate(1.3deg); }
  40% { transform: translateX(-2px) rotate(-1.1deg); } 48% { transform: translateX(2px) rotate(1.1deg); }
  56% { transform: translateX(-1.5px) rotate(-.9deg); } 64% { transform: translateX(1.5px) rotate(.9deg); }
  72% { transform: translateX(-1px) rotate(-.6deg); } 80% { transform: translateX(1px) rotate(.6deg); }
  90% { transform: translateX(-.5px) rotate(-.3deg); }
}
.af-schirm {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 11.4cqw; isolation: isolate; color: #fff;
  clip-path: inset(0 round 11.4cqw);
  background:  /* ruhiger Anruf-Hintergrund wie am iPhone – man sieht sie nicht durch */
    radial-gradient(120% 62% at 50% 0%, rgba(74, 150, 230, .42), rgba(74, 150, 230, 0) 62%),
    radial-gradient(90% 55% at 85% 100%, rgba(98, 76, 160, .32), rgba(98, 76, 160, 0) 70%),
    radial-gradient(80% 50% at 0% 70%, rgba(36, 92, 150, .3), rgba(36, 92, 150, 0) 70%),
    linear-gradient(180deg, #172233 0%, #0c121c 55%, #070b12 100%);
}
.af-schirm::before {  /* Glanz auf dem Glas */
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; border-radius: inherit;
  background: linear-gradient(118deg, rgba(255, 255, 255, .13) 0%, rgba(255, 255, 255, .04) 26%, transparent 42%);
  transition: opacity .6s ease;
}
.af-handy.gross .af-schirm::before { opacity: 0; }
.af-bild, .af-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }
.af-bild { opacity: 0; transition: opacity .5s ease; }
.af-video { opacity: 0; transition: opacity .45s ease; }
[data-zustand="gespraech"] .af-bild { opacity: 1; }
[data-zustand="gespraech"]:not(.verbindet) .af-video { opacity: 1; }
.af-schirm::after {  /* Licht von oben/unten, damit Schrift und Knöpfe immer lesbar sind */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, transparent 22%, transparent 66%, rgba(0, 0, 0, .55) 100%);
  transition: opacity .5s;
}

.af-insel { position: absolute; z-index: 5; left: 50%; top: 2.6cqw; width: 30cqw; height: 8.8cqw; margin-left: -15cqw; border-radius: 999px; background: #000; }
.af-status {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0; display: flex; justify-content: space-between; align-items: center;
  height: 14cqw; padding: 0 8cqw 0 10cqw; font: 650 4.3cqw/1 var(--sans); letter-spacing: .01em; font-variant-numeric: tabular-nums;
}
.af-symbole { display: inline-flex; align-items: center; gap: 1.4cqw; }
.af-symbole svg { height: 3.5cqw; width: auto; fill: currentColor; }
.af-symbole svg:last-child { height: 3.7cqw; }

/* gemeinsame Ebenen: blenden je Zustand weich über */
.af-klingeln, .af-gespraech, .af-ende { position: absolute; inset: 0; z-index: 3; transition: opacity .45s ease, visibility 0s linear .45s; }
.af-gespraech, .af-ende { opacity: 0; visibility: hidden; }
[data-zustand="gespraech"] .af-klingeln, [data-zustand="verpasst"] .af-klingeln, [data-zustand="beendet"] .af-klingeln { opacity: 0; visibility: hidden; }
[data-zustand="gespraech"] .af-gespraech, [data-zustand="verpasst"] .af-ende, [data-zustand="beendet"] .af-ende { opacity: 1; visibility: visible; transition-delay: 0s; }

/* 1 · es klingelt */
.af-klingeln { display: flex; flex-direction: column; justify-content: space-between; padding: 24cqw 9cqw 13cqw; text-align: center; }
.af-wer { display: grid; justify-items: center; gap: 1.8cqw; }
.af-profil {
  width: 36cqw; height: 36cqw; margin-bottom: 4cqw; border-radius: 50%; object-fit: cover; object-position: 50% 32%;
  box-shadow: 0 0 0 .9cqw rgba(255, 255, 255, .1), 0 6cqw 16cqw rgba(0, 0, 0, .5);
}
.anruf.sicht[data-zustand="klingelt"] .af-profil { animation: af-profil 2.4s ease-in-out infinite; }
@keyframes af-profil { 50% { box-shadow: 0 0 0 2.2cqw rgba(127, 240, 192, .14), 0 6cqw 16cqw rgba(0, 0, 0, .5); } }
.af-art { font: 500 4.6cqw/1.2 var(--sans); color: rgba(255, 255, 255, .7); }
.af-wer b { font: 400 13cqw/1 var(--serif); letter-spacing: -.01em; text-shadow: 0 2px 20px rgba(0, 0, 0, .35); }
.af-knoepfe { display: flex; justify-content: space-between; padding: 0 3cqw; }
.af-kn { display: grid; justify-items: center; gap: 2.6cqw; font: 500 4cqw/1.1 var(--sans); color: rgba(255, 255, 255, .92); }
.af-kn button, .af-leiste button {
  position: relative; display: grid; place-items: center; width: 19cqw; height: 19cqw; padding: 0; border: 0; border-radius: 50%;
  color: #fff; cursor: pointer; transition: transform .2s var(--ease), filter .2s;
}
.af-kn button:hover, .af-leiste button:hover { transform: scale(1.06); filter: brightness(1.08); }
.af-kn button:active, .af-leiste button:active { transform: scale(.94); }
.af-kn svg, .af-leiste svg { width: 8.6cqw; height: 8.6cqw; fill: #fff; }
.af-auflegen-ic { transform: rotate(135deg); }
.af-ab { background: #ff3b30; box-shadow: 0 2cqw 6cqw rgba(255, 59, 48, .35); }
.af-an { background: #34c759; box-shadow: 0 2cqw 6cqw rgba(52, 199, 89, .4); }
.af-an::before {  /* Annehmen pulsiert sanft */
  content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 0 rgba(52, 199, 89, .6); pointer-events: none;
}
.anruf.sicht[data-zustand="klingelt"] .af-an::before { animation: af-an 1.2s ease-out infinite; }
@keyframes af-an { 0% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .55); } 100% { box-shadow: 0 0 0 5.5cqw rgba(52, 199, 89, 0); } }
.af-kn button:focus-visible, .af-leiste button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 50%; }
.af-gruen:focus-visible, .af-tg:focus-visible { outline: 2px solid #fff; outline-offset: 3px; border-radius: 999px; }

/* 2 · im Gespräch */
.af-gespraech { pointer-events: none; }
.af-oben, .af-leiste { position: absolute; left: 50%; transform: translateX(-50%); pointer-events: auto; transition: opacity .4s ease, transform .4s var(--ease); }
.af-oben {
  top: 15cqw; display: grid; justify-items: center; gap: .8cqw; padding: 2.4cqw 6cqw; border-radius: 999px; white-space: nowrap;
  background: rgba(12, 18, 28, .38); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.af-oben b { font: 650 4.6cqw/1.1 var(--sans); }
.af-oben span { font: 500 3.7cqw/1 var(--sans); color: rgba(255, 255, 255, .78); font-variant-numeric: tabular-nums; }
.af-leiste {
  bottom: 8cqw; display: flex; gap: 6cqw; padding: 3.2cqw 5cqw; border-radius: 999px;
  background: rgba(30, 36, 46, .5); -webkit-backdrop-filter: blur(18px) saturate(1.3); backdrop-filter: blur(18px) saturate(1.3);
}
.af-leiste button { width: 15cqw; height: 15cqw; }
.af-leiste svg { width: 7cqw; height: 7cqw; }
.af-stumm { background: rgba(255, 255, 255, .2); }
.af-stumm svg { fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.af-stumm svg .koerper { fill: #fff; stroke: none; }  /* Lautsprecher (Wunsch des Users statt Mikrofon) */
.af-stumm .ic-leise { display: none; }
.af-stumm[aria-pressed="true"] { background: #fff; }
.af-stumm[aria-pressed="true"] svg { stroke: #111; }
.af-stumm[aria-pressed="true"] svg .koerper { fill: #111; }
.af-stumm[aria-pressed="true"] .ic-laut { display: none; }
.af-stumm[aria-pressed="true"] .ic-leise { display: block; }
.anruf.ruhig .af-oben { opacity: 0; transform: translate(-50%, -2cqw); }
.anruf.ruhig .af-leiste { opacity: 0; transform: translate(-50%, 2cqw); }
.anruf.ruhig .af-oben, .anruf.ruhig .af-leiste { pointer-events: none; }  /* unsichtbare Knöpfe nie aus Versehen treffen */
.anruf.ruhig[data-zustand="gespraech"] .af-schirm::after { opacity: 0; }
.anruf.verbindet .af-oben span { animation: af-verbinden 1.2s ease-in-out infinite; }
@keyframes af-verbinden { 50% { opacity: .4; } }

/* 3 · verpasst / beendet */
.af-ende { display: grid; align-content: center; justify-items: center; gap: 3cqw; padding: 0 9cqw; text-align: center; }
.af-ende img { width: 27cqw; height: 27cqw; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 .8cqw rgba(255, 255, 255, .12); margin-bottom: 1.6cqw; }
.af-ende b { font: 400 11cqw/1 var(--serif); letter-spacing: -.01em; }
.af-ende-info { display: inline-flex; gap: 1.6cqw; font: 500 4.2cqw/1.2 var(--sans); color: rgba(255, 255, 255, .72); }
.af-dauer:empty { display: none; }
.af-dauer::before { content: "· "; }
[data-zustand="verpasst"] .af-ende-info { color: #ff6b62; }
.af-gruen {
  display: inline-flex; align-items: center; gap: 2.4cqw; margin-top: 5cqw; min-height: 12.5cqw; padding: 0 6.5cqw; border: 0; border-radius: 999px;
  background: #34c759; color: #fff; font: 650 4.4cqw/1 var(--sans); cursor: pointer; box-shadow: 0 2cqw 6cqw rgba(52, 199, 89, .35);
  transition: transform .2s var(--ease), filter .2s;
}
.af-gruen:hover { transform: translateY(-1px); filter: brightness(1.06); }
.af-gruen svg { width: 5.4cqw; height: 5.4cqw; fill: #fff; }
.af-tg { display: inline-flex; align-items: center; gap: 1.8cqw; margin-top: 2.4cqw; color: rgba(255, 255, 255, .8); font: 600 4cqw/1 var(--sans); text-decoration: none; padding: 2.4cqw 3cqw; border-radius: 999px; }
.af-tg:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.af-tg .ic { width: 4.6cqw; height: 4.6cqw; }

/* groß in der Mitte: Hintergrund dunkel, X oben rechts */
.af-dunkel {
  position: fixed; inset: 0; z-index: 95; opacity: 0; transition: opacity .55s ease;
  background: radial-gradient(60% 70% at 50% 50%, rgba(10, 22, 40, .82), rgba(2, 5, 10, .96));
  -webkit-backdrop-filter: blur(16px) saturate(1.1); backdrop-filter: blur(16px) saturate(1.1);
}
.af-dunkel.an { opacity: 1; }
.af-zu {
  position: fixed; z-index: 97; top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
  display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border-radius: 50%; cursor: pointer; opacity: 0;
  border: 1px solid var(--linie-hell); background: rgba(10, 19, 32, .7); color: var(--studio); transition: opacity .4s ease .2s, border-color .2s, background .2s;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.af-zu.an { opacity: 1; }
.af-zu:hover { border-color: var(--baby); background: rgba(20, 36, 58, .8); }
.af-zu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
html.af-offen, html.af-offen body { overflow: hidden; }
html.af-offen { scrollbar-gutter: stable; }
.af-handy.gross .af-rahmen { box-shadow: inset 0 0 0 .5cqw rgba(214, 237, 255, .14), inset 0 0 0 1.2cqw rgba(0, 0, 0, .55), 0 60px 160px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(169, 220, 255, .12); }

@media (max-width: 900px) {
  .anruf { grid-template-columns: 1fr; gap: 44px; padding-top: 40px; padding-bottom: calc(clamp(90px, 11vw, 160px) + 40px); }  /* Handy: 40 px mehr Luft zur Box darunter (Wunsch des Users) */
  .anruf-text { max-width: none; margin-left: 0; top: 0; }
  .af-platz { width: min(248px, 62vw); }
}
@media (prefers-reduced-motion: reduce) {
  .af-kippe { transform: rotateY(-10deg) rotateX(5deg) rotateZ(2deg); }
}

/* ---------------------------------------------------------------- Altershinweis beim Betreten (04.11.2026) */
html.ab18-auf, html.ab18-auf body { overflow: hidden; }
html.ab18-auf .kopf { z-index: 210; }  /* Logo und Sprachwahl bleiben über dem Fenster bedienbar */
.ab18 {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 90px 20px 24px; overflow-y: auto;
  background: radial-gradient(60% 55% at 50% 45%, rgba(20, 52, 92, .5), rgba(3, 7, 13, .9) 75%), rgba(3, 7, 13, .55);
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  transition: opacity .65s ease, visibility 0s linear .65s;
}
html:not(.ab18-auf) .ab18 { opacity: 0; visibility: hidden; pointer-events: none; }
.ab18-karte {
  position: relative; width: min(500px, 100%); padding: 46px clamp(22px, 5vw, 44px) 34px; border-radius: 30px; text-align: center;
  background: linear-gradient(165deg, rgba(22, 42, 68, .94) 0%, rgba(10, 19, 32, .96) 55%, rgba(7, 13, 23, .98) 100%);
  box-shadow: inset 0 0 0 1px rgba(169, 220, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .06),
    0 50px 140px -30px rgba(0, 0, 0, .95), 0 0 80px -20px rgba(74, 174, 245, .25);
  animation: ab18-rein .8s var(--ease) both;
}
.ab18-karte::before {  /* feine Lichtkante oben */
  content: ""; position: absolute; left: 16%; right: 16%; top: 0; height: 1px; border-radius: 1px;
  background: linear-gradient(90deg, transparent, rgba(169, 220, 255, .85), transparent);
}
@keyframes ab18-rein { from { opacity: 0; transform: translateY(18px) scale(.97); } }
html:not(.ab18-auf) .ab18-karte { transform: scale(.97); transition: transform .65s var(--ease); }
.ab18-zeichen { position: relative; display: grid; place-items: center; width: 112px; height: 112px; margin: 0 auto 26px; }
.ab18-zeichen svg { position: absolute; inset: 0; width: 100%; height: 100%; fill: none; overflow: visible; }
.ab18-zeichen circle { stroke: rgba(169, 220, 255, .22); stroke-width: 1.2; }
.ab18-zeichen circle.innen {
  stroke: var(--baby); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 78 230;
  transform-origin: 60px 60px; animation: ab18-dreh 5s linear infinite; filter: drop-shadow(0 0 6px rgba(74, 174, 245, .7));
}
@keyframes ab18-dreh { to { transform: rotate(360deg); } }
.ab18-zeichen b {
  margin: -.12em -.06em -.18em; padding: .12em .06em .18em;
  font: 400 50px/1 var(--serif); letter-spacing: -.01em; background: var(--chrom); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.ab18 h2 { font: 400 clamp(27px, 3.1vw, 34px)/1.14 var(--serif); letter-spacing: -.005em; color: var(--studio); text-wrap: balance; }
html[lang="ru"] .ab18 h2 { font-weight: 500; }
.ab18 p { margin: 16px auto 0; max-width: 36ch; color: #b9c9d9; font-size: 16px; line-height: 1.55; }
.ab18-knoepfe { display: grid; gap: 10px; margin-top: 30px; }
.ab18-knoepfe .knopf { width: 100%; white-space: normal; text-align: center; }
@media (max-width: 640px) {
  .ab18 { padding-top: 76px; }
  .ab18-karte { padding-top: 38px; border-radius: 26px; }
  .ab18-zeichen { width: 96px; height: 96px; margin-bottom: 22px; }
  .ab18-zeichen b { font-size: 42px; }
}

/* Instagram noch nicht da (04.11.2026): Knopf mit „Bald“-Marke + Hinweis-Pop-up */
.knopf[data-link="instagram"][data-bald] { position: relative; cursor: pointer; }
.knopf[data-link="instagram"][data-bald]::after {
  content: attr(data-bald); position: absolute; top: -8px; right: -6px; padding: 2px 6px; border-radius: 999px;
  font: 600 10px/1.3 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--nacht); background: var(--mint);
  pointer-events: none;
}
.ig-hinweis {
  position: fixed; left: 50%; bottom: max(24px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 9999;
  display: flex; align-items: center; gap: 12px; max-width: min(92vw, 460px); padding: 14px 14px 14px 18px;
  color: var(--text); background: var(--tief); border: 1px solid var(--linie); border-radius: 16px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .45); font: 500 15px/1.4 var(--sans); animation: ig-rein .25s var(--ease);
}
.ig-hinweis[hidden] { display: none; }
.ig-hinweis .ic { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--baby); stroke-width: 1.8; }
.ig-hinweis .ic .voll { fill: var(--baby); stroke: none; }
.ig-hinweis p { margin: 0; flex: 1; }
.ig-zu { flex: none; width: 32px; height: 32px; border: 0; border-radius: 50%; color: var(--text); background: rgba(158, 190, 220, .12); font-size: 20px; line-height: 1; cursor: pointer; }
.ig-zu:hover, .ig-zu:focus-visible { background: rgba(158, 190, 220, .24); outline: 2px solid var(--eis); outline-offset: 2px; }
@keyframes ig-rein { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }
@media (prefers-reduced-motion: reduce) { .ig-hinweis { animation: none; } }