/* ==========================================================
   Dr Handymaa – Designschicht 2 (1.10.2026)
   Eigene Linie: warm, hell, Story-Scroll am Handy (bewusst anders als Greifenbacher)
   Wird NACH style.css geladen.
   ========================================================== */

:root {
  --bg: #f5f4f1;
  --flaeche: #ffffff;
  --flaeche-2: #ebe8e2;
  --text: #1d1d1f;
  --text-2: #55585e;
  --text-3: #86888d;
  --linie: #dedad2;
  --schrift: "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --schrift-titel: "SF Pro Display", "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Roboto, Arial, sans-serif;
  --schrift-schmal: "Bahnschrift Condensed", "Bahnschrift", "Avenir Next Condensed", "Helvetica Neue Condensed", "Roboto Condensed", "Arial Narrow", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #000; --flaeche: #161617; --flaeche-2: #1d1d1f; --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #86868b; --linie: #2a2a2d; }
}
:root[data-theme="dark"] { --bg: #000; --flaeche: #161617; --flaeche-2: #1d1d1f; --text: #f5f5f7; --text-2: #a1a1a6; --text-3: #86868b; --linie: #2a2a2d; }

body { font-family: var(--schrift); letter-spacing: -.01em; }
h1, h2, h3 { font-family: var(--schrift-titel); font-weight: 700; letter-spacing: -.035em; }
h2 { font-weight: 700; }
.kicker { letter-spacing: .02em; text-transform: none; font-size: .9rem; }

/* Knöpfe */
.knopf { padding: 12px 22px; font-weight: 600; font-size: .95rem; box-shadow: none; }
.knopf:hover { transform: none; box-shadow: none; filter: brightness(1.08); }
.knopf.wa { box-shadow: none; }
.knopf.rand { box-shadow: inset 0 0 0 1.5px currentColor; }

/* Kopfzeile: helle Glasleiste (Seite nur im hellen Design) */
.kopfzeile, .kopfzeile.gescrollt { background: rgba(255, 255, 255, .82); backdrop-filter: saturate(1.8) blur(20px); -webkit-backdrop-filter: saturate(1.8) blur(20px); box-shadow: 0 1px 0 var(--linie); }
.kopfzeile .huelle { height: 68px; }
.kopfzeile .navi a:not(.knopf) { color: var(--text-2); font-size: .86rem; font-weight: 600; padding: 6px 12px; }
.kopfzeile .navi a:not(.knopf):hover { color: var(--text); background: var(--flaeche-2); }
.kopfzeile .navi .knopf { padding: 8px 16px; font-size: .84rem; }
.kopfzeile .rund-knopf { color: var(--text-2); }
html { scroll-padding-top: 76px; }
@media (max-width: 960px) {
  .navi { inset: 68px 0 auto; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--linie); padding: 12px 22px 28px; }
  .navi a:not(.knopf) { font-size: 1.5rem !important; font-weight: 700 !important; color: var(--text) !important; padding: 10px 0 !important; }
}

/* Smartphones nebeneinander (gezeichnet) */
.reihe-handys { display: flex; align-items: flex-end; justify-content: center; gap: 0; margin-bottom: -60px; }
.handy {
  --f: #2c2c2e; position: relative; width: 150px; height: 310px; border-radius: 30px; background: var(--f);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .12), 0 30px 50px -30px rgba(0, 0, 0, .8);
  margin: 0 -18px; transition: transform .7s var(--ease);
}
.handy::before { content: ""; position: absolute; left: 14px; top: 14px; width: 58px; height: 58px; border-radius: 16px; background: rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .08); }
.handy::after { content: ""; position: absolute; left: 22px; top: 22px; width: 18px; height: 18px; border-radius: 50%; background: #0b0b0c; box-shadow: 24px 0 0 #0b0b0c, 0 24px 0 #0b0b0c, inset 0 0 0 3px #3a3a3c; }
.handy:nth-child(1) { --f: #d9c6a5; transform: rotate(-12deg) translateY(30px); z-index: 1; }
.handy:nth-child(2) { --f: #3b3b3f; transform: translateY(-10px); z-index: 3; width: 165px; height: 340px; }
.handy:nth-child(3) { --f: var(--gold); transform: rotate(12deg) translateY(30px); z-index: 2; }

@media (max-width: 600px) { .reihe-handys { scale: .74; transform-origin: 50% 100%; margin-bottom: -90px; } }

/* Tablet, Uhr, Notebook (gezeichnet) */
.geraete-gruppe { display: flex; align-items: flex-end; justify-content: center; gap: 18px; margin-bottom: 56px; }
.g-tablet { width: 170px; height: 230px; border-radius: 18px; background: linear-gradient(160deg, #2c2c2e, #111); box-shadow: inset 0 0 0 6px #3a3a3c; position: relative; overflow: hidden; }
.g-tablet::after { content: ""; position: absolute; inset: 14px; border-radius: 8px; background: linear-gradient(140deg, var(--gold), #ff7a59 60%, #7a5cff); opacity: .85; }
.g-uhr { width: 74px; height: 88px; border-radius: 22px; background: #111; box-shadow: inset 0 0 0 4px #3a3a3c; position: relative; margin-bottom: 30px; }
.g-uhr::before, .g-uhr::after { content: ""; position: absolute; left: 14px; right: 14px; height: 40px; background: #d9c6a5; border-radius: 6px; z-index: -1; }
.g-uhr::before { top: -32px; } .g-uhr::after { bottom: -32px; }
.g-uhr i { position: absolute; inset: 12px; border-radius: 12px; background: radial-gradient(circle at 50% 55%, #2fd16f 0 20%, transparent 22%), #000; }
.g-notebook { width: 230px; height: 150px; position: relative; }
.g-notebook::before { content: ""; position: absolute; left: 14px; right: 14px; top: 0; bottom: 14px; border-radius: 10px 10px 0 0; background: #111; box-shadow: inset 0 0 0 6px #3a3a3c; }
.g-notebook::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; border-radius: 0 0 12px 12px; background: linear-gradient(#cfcfd4, #9a9aa0); }
@media (max-width: 520px) { .g-notebook { display: none; } }

/* Tarif-Karten */
.tarife { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); gap: 14px; justify-content: center; margin-bottom: 64px; }
.tarif { padding: 22px 18px; border-radius: 20px; background: var(--bg); border: 1px solid var(--linie); text-align: left; transition: transform .5s var(--ease), border-color .3s, box-shadow .3s; }
.tarif small { display: block; font-size: .75rem; color: var(--text-3); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.tarif b { display: block; font-size: 2rem; letter-spacing: -.04em; margin: 6px 0; }
.tarif span { font-size: .85rem; color: var(--text-2); }
.tarif.passt { border-color: var(--gold); box-shadow: 0 20px 40px -24px var(--gold); transform: translateY(-10px); position: relative; }
.tarif.passt::after { content: "Passt zu Ihnen"; position: absolute; top: -11px; left: 18px; padding: 3px 10px; border-radius: 999px; background: var(--gold); color: #1b1203; font-size: .7rem; font-weight: 700; }
@media (max-width: 640px) { .tarife { grid-template-columns: 1fr; width: 100%; max-width: 300px; } .tarif.passt { transform: none; } }




/* Abschnitte darunter im Loume-Stil */
.abschnitt { background: var(--bg); }
.formular { border-radius: 22px; }
.kontakt-dunkel { background: #000 !important; color: #f5f5f7; }
.kontakt-dunkel h2, .kontakt-dunkel h3 { color: #fff; }
.kontakt-dunkel p { color: #a1a1a6; }
.kontakt-dunkel .kicker { color: var(--gold); }
.kontakt-dunkel .weg { background: #111; border-color: #2a2a2d; color: #f5f5f7; }
.kontakt-dunkel .weg small { color: #86868b; }
.kontakt-dunkel .sozial a { background: #111; border-color: #2a2a2d; color: #f5f5f7; }
.kontakt-dunkel .formular { background: #111; border-color: #2a2a2d; box-shadow: none; }
.kontakt-dunkel .formular h3 { color: #fff; }
.kontakt-dunkel .feld > label, .kontakt-dunkel .feld > span { color: #a1a1a6; }
.kontakt-dunkel .feld input, .kontakt-dunkel .feld textarea { background: #000; border-color: #2a2a2d; color: #f5f5f7; }
.kontakt-dunkel .auswahl span { border-color: #2a2a2d; color: #c7c7cc; }

.fusszeile { background: #000; color: #a1a1a6; border-top: 1px solid #1d1d1f; overflow: hidden; }
.fusszeile .logo b { color: #f5f5f7; }
.fusszeile nav a { color: #a1a1a6; }
.fusszeile nav a:hover { color: var(--gold); }
.fusszeile .unten { border-color: #1d1d1f; color: #6e6e73; }
.fusszeile .unten a { color: #a1a1a6; }

/* ==========================================================
   Unterseiten: Impressum, Datenschutz, 404
   ========================================================== */
.seitenkopf { position: relative; background: #000; color: #f5f5f7; text-align: center; padding: 140px 20px clamp(56px, 8vw, 88px); overflow: hidden; isolation: isolate; }
.seitenkopf .glut { position: absolute; left: 50%; bottom: -70%; width: 1000px; height: 700px; translate: -50% 0; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(245, 163, 28, .32), rgba(245, 163, 28, .06) 60%, transparent); }
.seitenkopf .kicker { color: var(--gold); margin-bottom: 10px; }
.seitenkopf h1 { color: #fff; font-size: clamp(2.6rem, 7vw, 5rem); line-height: 1.02; margin: 0 auto 14px; }
.seitenkopf .lead { color: #a1a1a6; font-size: clamp(1.05rem, 1.8vw, 1.3rem); max-width: 640px; margin: 0 auto; }
.seitenkopf .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 30px; }
.seitenkopf .knopf.rand { color: #f5f5f7; box-shadow: inset 0 0 0 1.5px #3a3a3c; }
.recht-tabs { display: inline-flex; gap: 4px; margin-top: 28px; padding: 4px; border-radius: 999px; background: #1d1d1f; }
.recht-tabs a { padding: 8px 20px; border-radius: 999px; font-size: .9rem; font-weight: 600; color: #a1a1a6; transition: color .2s, background .2s; }
.recht-tabs a:hover { color: #fff; }
.recht-tabs a[aria-current="page"] { background: var(--gold); color: #1b1203; }

.recht-inhalt { padding: clamp(40px, 6vw, 72px) 0 clamp(72px, 9vw, 110px); }
.recht-inhalt .huelle { max-width: 900px; }
.recht-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.recht-karte { grid-column: span 1; padding: clamp(24px, 4vw, 40px); border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie); min-width: 0; }
.recht-karte.breit { grid-column: 1 / -1; }
@media (max-width: 720px) { .recht-raster { grid-template-columns: 1fr; } }
.recht-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.recht-kopf small { font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.recht-symbol { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--flaeche-2); color: var(--gold-dunkel); flex: none; }
.recht-symbol svg { width: 20px; height: 20px; }
.recht-symbol img { width: 28px; height: 28px; }
.recht-symbol.hell { background: #fff; }
.recht-nr { font-family: var(--schrift-schmal); font-weight: 700; font-size: 2.4rem; line-height: .8; color: var(--gold); }
.recht-karte h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); margin-bottom: 14px; hyphens: auto; }
.recht-karte h3 { font-size: 1.12rem; margin: 30px 0 10px; }
.recht-karte h4 { font-size: 1rem; margin: 22px 0 8px; }
.recht-karte p, .recht-karte li { font-size: .98rem; overflow-wrap: anywhere; hyphens: auto; }
.recht-karte ul { margin: 0 0 1em; padding-left: 1.2em; color: var(--text-2); }
.recht-karte li { margin-bottom: 6px; }
.recht-karte p a, .recht-karte li a { color: var(--gold-dunkel); text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .recht-karte p a, :root[data-theme="dark"] .recht-symbol { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .recht-karte p a, :root:not([data-theme="light"]) .recht-symbol { color: var(--gold); } }
.recht-adresse { color: var(--text); line-height: 1.7; }
.recht-versal { font-size: .84rem !important; letter-spacing: .01em; }
.kontakt-wege { display: grid; gap: 8px; }
.kontakt-weg { display: block; padding: 12px 16px; border-radius: 14px; background: var(--bg); border: 1px solid var(--linie); transition: border-color .2s; }
.kontakt-weg:hover { border-color: var(--gold); }
.kontakt-weg small { display: block; font-size: .75rem; color: var(--text-3); }
.kontakt-weg b { font-weight: 600; overflow-wrap: anywhere; }
.recht-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gold-dunkel); margin-top: 4px; }
.recht-link svg { width: 16px; height: 16px; }
.recht-toc { padding: 24px clamp(24px, 4vw, 40px); border-radius: 22px; background: var(--flaeche); border: 1px solid var(--linie); margin-bottom: 12px; }
.recht-toc b { display: block; margin-bottom: 10px; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.recht-toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; display: grid; gap: 6px; }
.recht-toc li { counter-increment: toc; }
.recht-toc a { display: flex; gap: 12px; font-weight: 600; color: var(--text); }
.recht-toc a::before { content: "0" counter(toc); font-family: var(--schrift-schmal); font-weight: 700; color: var(--gold); min-width: 1.6em; }
.recht-toc a:hover { color: var(--gold-dunkel); }
.recht-quelle { margin-top: 24px; font-size: .85rem; color: var(--text-3); text-align: center; }
.recht-quelle a { text-decoration: underline; text-underline-offset: 3px; }


/* ==========================================================
   Startseite: eigener Aufbau (bewusst anders als Greifenbacher)
   Story-Scroll „Vom Funkloch zu vollen Balken“ · Tarif-Finder · Schaufenster
   ========================================================== */

/* ---------- Vorhang: Netzsuche (1× je Sitzung; .mit-vorhang setzt start.js) ---------- */
.vorhang {
  position: fixed; inset: 0; z-index: 100; background: #000; color: #f5f5f7; display: none; place-items: center;
  transition: transform 1s cubic-bezier(.77, 0, .18, 1) .15s;
}
.mit-vorhang .vorhang { display: grid; }
.vorhang.weg { transform: translateY(-100%); }
.vorhang .lade { display: grid; justify-items: center; gap: 18px; text-align: center; }
.lade-balken { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.lade-balken i { width: 14px; border-radius: 4px; background: #2a2a2d; transition: background .25s, box-shadow .25s; }
.lade-balken i:nth-child(1) { height: 20%; } .lade-balken i:nth-child(2) { height: 40%; } .lade-balken i:nth-child(3) { height: 60%; }
.lade-balken i:nth-child(4) { height: 80%; } .lade-balken i:nth-child(5) { height: 100%; }
.lade-balken i.an { background: var(--gold); box-shadow: 0 0 16px rgba(245, 163, 28, .6); }
.vorhang .lade b { font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; }
.vorhang .lade small { font-family: var(--schrift-schmal); font-size: .8rem; letter-spacing: .4em; text-transform: uppercase; color: #6e6e73; }
.mit-vorhang .story .auftritt { animation-delay: calc(var(--d, .1s) + 1.4s); }

/* ---------- Story ---------- */
.story { position: relative; isolation: isolate; background: var(--bg); --stufe: 0; }
.story .punkte { position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(var(--linie) 1.2px, transparent 1.2px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent); }
.story-raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); }
.story-buehne { grid-column: 2; grid-row: 1; position: sticky; top: 0; height: 100svh; display: grid; place-items: center; }
.story-text { grid-column: 1; grid-row: 1; }

.kapitel { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 18px; padding: 90px 0; }
.kapitel h2 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); line-height: 1.04; }
.kapitel p { font-size: clamp(1.05rem, 1.5vw, 1.25rem); max-width: 520px; margin: 0; }
.kapitel .kicker { margin: 0; }
.js .kapitel:not(.kapitel-start) > * { opacity: .25; translate: 0 16px; transition: opacity .6s var(--ease), translate .8s var(--ease); }
.js .kapitel.aktiv > * { opacity: 1; translate: none; }
.kapitel-start .marke-oben { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; color: var(--gold-dunkel); }

.kapitel-start h1 { font-size: clamp(2.6rem, 6.2vw, 5.4rem); line-height: 1.02; hyphens: manual; }
.kapitel-start .werte { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: clamp(1.1rem, 1.8vw, 1.4rem); font-weight: 600; color: var(--text-2); }
.kapitel-start .knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }
.schimmer {
  background: linear-gradient(105deg, var(--gold) 0%, var(--gold) 40%, #fff3d6 50%, var(--gold) 60%, var(--gold) 100%);
  background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: schimmer 7s ease-in-out 2.4s infinite;
}
@keyframes schimmer { 0% { background-position: 100% 0; } 35%, 100% { background-position: 0% 0; } }
.scroll-hinweis { display: inline-flex; align-items: center; gap: 12px; margin-top: 28px; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.scroll-hinweis i { width: 1px; height: 30px; background: linear-gradient(var(--gold), transparent); animation: tropfen 2s ease-in-out infinite; }
@keyframes tropfen { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
:root[data-theme="dark"] .kapitel-start .marke-oben { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kapitel-start .marke-oben { color: var(--gold); } }

/* Funkwellen hinter dem Handy: werden mit jeder Stufe kräftiger */
.funk { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.funk i { position: absolute; width: 320px; height: 320px; border-radius: 50%; border: 2px solid var(--gold); opacity: 0;
  animation: funk 4s ease-out infinite; animation-duration: calc(5s - var(--stufe) * .6s); }
.funk i:nth-child(2) { animation-delay: -1s; } .funk i:nth-child(3) { animation-delay: -2s; } .funk i:nth-child(4) { animation-delay: -3s; }
@keyframes funk { 0% { transform: scale(.7); opacity: calc(.12 + var(--stufe) * .14); } 100% { transform: scale(calc(1.5 + var(--stufe) * .18)); opacity: 0; } }
.story-buehne::before { content: ""; position: absolute; width: 640px; height: 640px; border-radius: 50%; z-index: -1;
  background: radial-gradient(circle, rgba(245, 163, 28, calc(.08 + var(--stufe) * .07)), transparent 62%); transition: background .8s; }

/* Das Handy */
.story-telefon { animation: schweben 6s ease-in-out infinite; }
.story-telefon .bildschirm { position: relative; background: #f6efe4; }
:root[data-theme="dark"] .story-telefon .bildschirm { background: #1d1b18; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .story-telefon .bildschirm { background: #1d1b18; } }
.statusleiste { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; justify-content: space-between; align-items: center; padding: 16px 24px 0 28px; font-size: .72rem; font-weight: 700; color: #1b1a17; }
.story[data-stufe="1"] .statusleiste { color: #1b1a17; }
.statusleiste .netz { display: inline-flex; align-items: center; gap: 6px; }
.statusleiste .netz b { font-size: .66rem; min-width: 22px; text-align: right; }
.balken-mini { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.balken-mini i { width: 3px; border-radius: 1px; background: currentColor; opacity: .22; transition: opacity .4s, background .4s; }
.balken-mini i:nth-child(1) { height: 20%; } .balken-mini i:nth-child(2) { height: 40%; } .balken-mini i:nth-child(3) { height: 60%; }
.balken-mini i:nth-child(4) { height: 80%; } .balken-mini i:nth-child(5) { height: 100%; }
.story[data-stufe="0"] .balken-mini i:nth-child(-n+1),
.story[data-stufe="1"] .balken-mini i:nth-child(-n+2),
.story[data-stufe="2"] .balken-mini i:nth-child(-n+3),
.story[data-stufe="3"] .balken-mini i:nth-child(-n+4),
.story[data-stufe="4"] .balken-mini i { opacity: 1; }
.akku { width: 20px; height: 10px; border-radius: 3px; border: 1.5px solid currentColor; position: relative; }
.akku::after { content: ""; position: absolute; inset: 1.5px; right: 4px; border-radius: 1px; background: currentColor; }
:root[data-theme="dark"] .statusleiste { color: #f1ede6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .statusleiste { color: #f1ede6; } }
.story[data-stufe="1"] .statusleiste { color: #1b1a17; }

/* Bildschirme: überblenden je nach Stufe */
.screen { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: scale(.96); transition: opacity .5s ease, transform .6s var(--ease); pointer-events: none; }
.story[data-stufe="0"] [data-screen="0"], .story[data-stufe="1"] [data-screen="1"], .story[data-stufe="2"] [data-screen="2"],
.story[data-stufe="3"] [data-screen="3"], .story[data-stufe="4"] [data-screen="4"] { opacity: 1; transform: none; }
.screen .chat-kopf { padding-top: 44px; }

.sperre { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 70px 14px 0;
  background: radial-gradient(120% 70% at 50% 0%, rgba(245, 163, 28, .35), transparent 60%), linear-gradient(#2a2620, #0d0c0a); color: #fff; }
.sperre-uhr { font-size: 3.6rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; }
.sperre-datum { font-size: .85rem; opacity: .75; margin-top: 6px; }
.mitteilung { margin-top: 40px; width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 12px; border-radius: 18px;
  background: rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font-size: .76rem; line-height: 1.35;
  animation: mitteilung 3.6s var(--ease) infinite; }
.mitteilung img { width: 30px; height: 30px; border-radius: 8px; background: #fff; padding: 3px; flex: none; }
.mitteilung b { display: block; font-size: .78rem; }
.mitteilung span { opacity: .9; }
@keyframes mitteilung { 0%, 8% { opacity: 0; transform: translateY(-14px) scale(.96); } 16%, 88% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-6px); } }
.story[data-stufe="0"] .statusleiste { color: #fff; }

.app-titel { padding: 58px 18px 14px; font-size: 1.35rem; font-weight: 800; letter-spacing: -.03em; color: var(--text); }
.tarif-zeile { position: relative; margin: 0 12px 10px; padding: 14px 14px; border-radius: 16px; background: var(--flaeche); border: 1.5px solid var(--linie);
  display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: .74rem; color: var(--text-2); transition: border-color .4s .5s, box-shadow .4s .5s, transform .5s .5s var(--ease); }
.tarif-zeile small { display: block; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.tarif-zeile b { font-size: 1.3rem; letter-spacing: -.03em; color: var(--text); }
.tarif-zeile span { text-align: right; max-width: 50%; }
.tarif-zeile em { position: absolute; top: -9px; left: 12px; padding: 2px 8px; border-radius: 999px; background: var(--gold); color: #1b1203; font-size: .6rem; font-weight: 800; font-style: normal; opacity: 0; transition: opacity .3s .8s; }
.story[data-stufe="2"] .tarif-zeile.passt { border-color: var(--gold); box-shadow: 0 12px 24px -14px var(--gold); transform: scale(1.04); }
.story[data-stufe="2"] .tarif-zeile.passt em { opacity: 1; }
.story[data-stufe="2"] .tarif-zeile:not(.passt) { opacity: .6; }

.mini-handy { width: 86px; height: 150px; margin: 6px auto 18px; border-radius: 18px; background: linear-gradient(160deg, #ffd27f, var(--gold) 55%, #e08c06);
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .25), 0 20px 30px -16px rgba(0, 0, 0, .5); position: relative; animation: schweben 4s ease-in-out infinite; }
.mini-handy::before { content: ""; position: absolute; left: 9px; top: 9px; width: 30px; height: 30px; border-radius: 9px; background: rgba(0, 0, 0, .2); }
.einrichtung { display: flex; justify-content: space-between; margin: 0 18px 8px; font-size: .75rem; font-weight: 700; color: var(--text-2); }
.einrichtung b { color: var(--text); font-variant-numeric: tabular-nums; }
.einrichtung-balken { margin: 0 18px 16px; height: 6px; border-radius: 6px; background: var(--flaeche-2); overflow: hidden; }
.einrichtung-balken i { display: block; height: 100%; width: 100%; background: var(--gold); transform: scaleX(var(--fort, 0)); transform-origin: left; }
.haken-liste { list-style: none; margin: 0 18px; padding: 0; display: grid; gap: 8px; font-size: .76rem; color: var(--text-2); }
.haken-liste li { display: flex; align-items: center; gap: 8px; opacity: .35; transition: opacity .3s; }
.haken-liste li::before { content: "✓"; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--flaeche-2); color: transparent; font-size: .65rem; font-weight: 800; transition: background .3s, color .3s; }
.haken-liste li.an { opacity: 1; }
.haken-liste li.an::before { background: var(--gold); color: #1b1203; }

.verbunden { flex: 1; display: grid; place-content: center; justify-items: center; gap: 12px; text-align: center; padding: 20px; color: var(--text-2); font-size: .85rem; }
.verbunden b { font-size: 1.6rem; color: var(--text); letter-spacing: -.03em; }
.haken-gross { width: 86px; height: 86px; border-radius: 50%; display: grid; place-items: center; background: var(--gruen); color: #fff; box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); }
.haken-gross svg { width: 44px; height: 44px; stroke-dasharray: 30; stroke-dashoffset: 30; }
.story[data-stufe="4"] .haken-gross { animation: puls-gruen 2s ease-out .4s infinite; }
.story[data-stufe="4"] .haken-gross svg { transition: stroke-dashoffset .6s var(--ease) .3s; stroke-dashoffset: 0; }
@keyframes puls-gruen { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .5); } 100% { box-shadow: 0 0 0 26px rgba(37, 211, 102, 0); } }

/* Fortschrittspunkte neben dem Handy */
.story-punkte { position: absolute; right: 0; top: 50%; translate: 0 -50%; display: grid; gap: 12px; }
.story-punkte i { width: 8px; height: 8px; border-radius: 50%; background: var(--linie); transition: background .3s, scale .3s; }
.story[data-stufe="0"] .story-punkte i:nth-child(1), .story[data-stufe="1"] .story-punkte i:nth-child(2), .story[data-stufe="2"] .story-punkte i:nth-child(3),
.story[data-stufe="3"] .story-punkte i:nth-child(4), .story[data-stufe="4"] .story-punkte i:nth-child(5) { background: var(--gold); scale: 1.5; }

/* Handy: wie der Film bei Greifenbacher – die ganze Story steht (sticky), oben das Handy, darunter wechseln die
   Kapitel an Ort und Stelle. Jedes Kapitel bekommt eine Bildschirmhöhe Scrollstrecke und ist ein Einrastpunkt (main.js). */
@media (max-width: 900px) {
  .story-raster { display: block; }
  .funk i { width: 220px; height: 220px; }
  .story-buehne::before { width: 360px; height: 360px; }
  .story-punkte { right: 4px; }

  .js .story { height: calc(5 * 100svh); }
  .js .story-raster { position: sticky; top: 0; height: 100svh; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: 38svh minmax(0, 1fr); gap: 0; overflow: hidden; }
  .js .story-buehne { grid-column: 1; grid-row: 1; position: relative; height: auto; z-index: 2; }
  .js .story-text { grid-column: 1; grid-row: 2; display: grid; min-height: 0; }
  .js .kapitel { grid-area: 1 / 1; min-height: 0; justify-content: flex-start; gap: 14px; padding: 8px 0 16px;
    opacity: 0; visibility: hidden; translate: 0 26px; transition: opacity .3s ease, translate .5s var(--ease), visibility 0s .5s; }
  .js .kapitel.vorbei { translate: 0 -26px; }
  .js .kapitel.aktiv { opacity: 1; visibility: visible; translate: none; transition: opacity .6s ease .15s, translate .8s var(--ease) .1s, visibility 0s; }
  .js .kapitel:not(.kapitel-start) > * { opacity: 1; translate: none; }
  .kapitel h2 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); }

  /* ohne JavaScript: alles untereinander wie eine normale Seite */
  html:not(.js) .story-buehne { height: 46svh; }
  html:not(.js) .kapitel { min-height: auto; padding: 40px 0; }
}

/* ---------- Laufband zwischen Story und Finder ---------- */
.laufband { position: relative; z-index: 3; }

/* ---------- Tarif-Finder ---------- */
.finder-raster { display: grid; grid-template-columns: 1.1fr .9fr; gap: 16px; max-width: 1000px; margin: 0 auto; }
.finder-eingabe, .finder-ergebnis { padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--flaeche); border: 1px solid var(--linie); }
.finder-label { display: block; font-size: .85rem; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
.finder-label + .auswahl { margin-top: 4px; }
.finder-wert { font-size: clamp(3rem, 7vw, 4.6rem); font-weight: 800; letter-spacing: -.05em; line-height: 1; margin-bottom: 18px; }
.finder-wert output { color: var(--gold-dunkel); font-variant-numeric: tabular-nums; }
:root[data-theme="dark"] .finder-wert output { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .finder-wert output { color: var(--gold); } }
.finder-eingabe input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 10px; margin: 0; cursor: pointer;
  background: linear-gradient(90deg, var(--gold) var(--anteil, 15%), var(--flaeche-2) var(--anteil, 15%)); }
.finder-eingabe input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); }
.finder-eingabe input[type=range]::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 3px solid var(--gold); box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .4); }
.finder-skala { display: flex; justify-content: space-between; margin: 10px 0 30px; font-size: .74rem; color: var(--text-3); }
.finder-ergebnis { display: flex; flex-direction: column; align-items: center; text-align: center; background: #000; border-color: #1d1d1f; color: #f5f5f7; }
.tacho { width: min(260px, 100%); }
.tacho path { fill: none; stroke-width: 14; stroke-linecap: round; }
.tacho-spur { stroke: #2a2a2d; }
.tacho-fuell { stroke: var(--gold); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--wert, 30)); transition: stroke-dashoffset .7s var(--ease); filter: drop-shadow(0 0 8px rgba(245, 163, 28, .5)); }
.finder-typ { margin-top: -54px; }
.finder-typ small { display: block; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; color: #86868b; font-weight: 700; }
.finder-typ b { font-size: clamp(1.8rem, 3.4vw, 2.4rem); letter-spacing: -.03em; color: var(--gold); }
.finder-ergebnis p { color: #c7c7cc; margin: 14px 0 6px; }
.finder-tipps { list-style: none; padding: 0; margin: 4px 0 18px; display: grid; gap: 8px; text-align: left; width: 100%; }
.finder-tipps li { display: flex; gap: 10px; font-size: .88rem; color: #c7c7cc; padding: 10px 12px; border-radius: 12px; background: #111; animation: auftritt .5s var(--ease); }
.finder-tipps li::before { content: "✦"; color: var(--gold); }
.finder-ergebnis .knopf { margin-top: auto; }
.finder-hinweis { margin-top: 12px; font-size: .74rem; color: #6e6e73; }
@media (max-width: 820px) { .finder-raster { grid-template-columns: 1fr; } }

/* ---------- Geräte-Schaufenster ---------- */
.schaufenster-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.vitrine { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; border-radius: 28px; background: var(--flaeche); border: 1px solid var(--linie); min-height: 440px; transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.vitrine:hover { transform: translateY(-6px); box-shadow: var(--schatten); }
.vitrine.dunkel { background: #000; border-color: #1d1d1f; color: #f5f5f7; }
.vitrine-bild { flex: 1; display: grid; place-items: end center; overflow: hidden; padding-top: 40px; }
.vitrine .reihe-handys { margin-bottom: -70px; scale: .82; transform-origin: 50% 100%; }
.vitrine .geraete-gruppe { margin-bottom: 30px; }
.vitrine:hover .handy:nth-child(1) { transform: rotate(-16deg) translate(-20px, 20px); }
.vitrine:hover .handy:nth-child(3) { transform: rotate(16deg) translate(20px, 20px); }
.vitrine:hover .handy:nth-child(2) { transform: translateY(-24px); }
.vitrine-text { position: relative; padding: 26px 28px 28px; background: inherit; display: grid; gap: 4px; }
.vitrine-text small { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dunkel); }
.vitrine.dunkel .vitrine-text small { color: var(--gold); }
.vitrine-text b { font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.03em; line-height: 1.15; }
.vitrine-text span { font-weight: 600; font-size: .92rem; color: var(--text-2); margin-top: 6px; }
.vitrine.dunkel .vitrine-text span { color: #a1a1a6; }
.vitrine:hover .vitrine-text span { color: var(--gold-dunkel); }
.vitrine.dunkel:hover .vitrine-text span { color: var(--gold); }
@media (max-width: 760px) { .schaufenster-raster { grid-template-columns: 1fr; } .vitrine { min-height: 380px; } }


@media (prefers-reduced-motion: reduce) {
  .funk i, .story-telefon, .mitteilung, .mini-handy, .schimmer, .scroll-hinweis i, .haken-gross { animation: none !important; }
  .funk i { opacity: .15; }
  .screen, .js .kapitel, .js .kapitel > * { transition: none; }
}
#inhalt { overflow-x: clip; }   /* Funkwellen und schräges Laufband dürfen nicht über den Rand ragen (sticky bleibt mit clip erhalten) */

/* „Alle Netze“: Hinweis-Chips im Tarif-Kapitel und Untertitel im Handy */
.netz-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.netz-chips span { display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); font-size: .85rem; font-weight: 600; color: var(--text-2); }
.netz-chips i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 3px rgba(245, 163, 28, .2); }
.app-titel small { display: block; margin-top: 2px; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-dunkel); }
:root[data-theme="dark"] .app-titel small { color: var(--gold); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .app-titel small { color: var(--gold); } }

/* ---------- Original-Logo auf Glas-Badge im Apple-Stil (PNG aus Desktop\Dr Handymaa\Logo) ----------
   Milchglas: halbtransparentes Weiß + Unschärfe des Hintergrunds, heller Lichtrand oben, weicher Schatten.
   Ein goldener Schein hinter dem Badge gibt dem Glas etwas zum Verwischen. */
.marke-oben, .fusszeile .logo { position: relative; isolation: isolate; display: inline-flex; }
.marke-oben::before, .fusszeile .logo::before {
  content: ""; position: absolute; inset: 18% 8%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(245, 163, 28, .55), rgba(255, 210, 127, .25) 60%, transparent);
  filter: blur(18px); animation: glas-schein 6s ease-in-out infinite alternate;
}
@keyframes glas-schein { from { transform: translateX(-12%) scale(.95); } to { transform: translateX(12%) scale(1.05); } }
.logo-bild {
  width: auto; box-sizing: content-box; transform: none !important; border-radius: 22px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .5));
  -webkit-backdrop-filter: blur(22px) saturate(180%); backdrop-filter: blur(22px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(27, 26, 23, .05), 0 1px 2px rgba(27, 26, 23, .05), 0 18px 40px -18px rgba(27, 26, 23, .35);
  transition: box-shadow .4s, translate .4s var(--ease);
}
.kapitel-start .marke-oben .logo-bild { height: 76px; padding: 12px 22px; }
.seitenkopf .marke-oben { margin-bottom: 26px; }
.seitenkopf .marke-oben .logo-bild { height: 60px; padding: 10px 18px; border-radius: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72)); }
.fusszeile .logo .logo-bild { height: 60px; padding: 10px 18px; border-radius: 20px; background: linear-gradient(135deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .72)); }
a.marke-oben:hover .logo-bild, .fusszeile .logo:hover .logo-bild { translate: 0 -2px; box-shadow: inset 0 1px 0 #fff, 0 1px 2px rgba(27, 26, 23, .05), 0 24px 44px -18px rgba(245, 163, 28, .6); }
@media (prefers-reduced-motion: reduce) { .marke-oben::before, .fusszeile .logo::before { animation: none; } }

/* Ohne Kopfzeile: Abstände oben zurücknehmen */
html { scroll-padding-top: 16px; }
.seitenkopf { padding-top: clamp(48px, 7vw, 80px); }

/* Titel: „Telekommunikation.“ immer in einer Zeile */
.kapitel-start h1 .ohne-umbruch { white-space: nowrap; }
.kapitel-start h1 { font-size: clamp(2rem, 4.3vw, 4.4rem); }
@media (max-width: 900px) { .kapitel-start h1 { font-size: min(9.2vw, 3.6rem); } }

/* Statusleiste neben der (schmaleren) Dynamic Island – wie beim echten iPhone: Balken, Netz, Akku */
.story-telefon::before { width: 72px; margin-left: -36px; height: 22px; }
.statusleiste { padding: 15px 14px 0 26px; }
.statusleiste .netz { gap: 4px; }
.statusleiste .netz b { order: 2; min-width: 0; font-size: .6rem; text-align: left; }
.statusleiste .balken-mini { order: 1; gap: 1px; }
.statusleiste .akku { order: 3; width: 18px; }

/* ==========================================================
   Glas-Optik (Apple) für alle Kacheln
   Milchglas = halbtransparente Fläche + Unschärfe des Hintergrunds + heller Lichtrand.
   Damit das Glas sichtbar wird, liegen in jedem Abschnitt weiche Lichtflecken dahinter.
   ========================================================== */
:root {
  --glas-hell: linear-gradient(135deg, rgba(255, 255, 255, .74), rgba(255, 255, 255, .42));
  --glas-hell-rand: rgba(255, 255, 255, .8);
  --glas-hell-schatten: inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(27, 26, 23, .04), 0 1px 2px rgba(27, 26, 23, .04), 0 22px 50px -26px rgba(27, 26, 23, .32);
  --glas-dunkel: linear-gradient(135deg, rgba(48, 44, 38, .58), rgba(14, 13, 11, .46));
  --glas-dunkel-rand: rgba(255, 255, 255, .12);
  --glas-dunkel-schatten: inset 0 1px 0 rgba(255, 255, 255, .14), 0 22px 50px -26px rgba(0, 0, 0, .7);
  --glas-blur: blur(24px) saturate(180%);
}

/* ---------- Lichtflecken hinter den Kacheln ---------- */
.finder, .schaufenster, .kontakt-dunkel, .recht-inhalt { position: relative; isolation: isolate; }
.finder::before, .finder::after, .schaufenster::before, .kontakt-dunkel::before, .kontakt-dunkel::after, .recht-inhalt::before, .recht-inhalt::after {
  content: ""; position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(60px);
  animation: licht-wandern 14s ease-in-out infinite alternate;
}
.finder::before { width: 520px; height: 520px; left: 4%; top: 30%; background: radial-gradient(closest-side, rgba(245, 163, 28, .55), transparent); }
.finder::after { width: 460px; height: 460px; right: 6%; bottom: 0; background: radial-gradient(closest-side, rgba(255, 122, 89, .32), transparent); animation-delay: -7s; }
.schaufenster::before { width: 640px; height: 420px; left: 50%; top: 20%; translate: -50% 0; background: radial-gradient(closest-side, rgba(245, 163, 28, .45), transparent); }
.kontakt-dunkel::before { width: 560px; height: 560px; left: -6%; top: 10%; background: radial-gradient(closest-side, rgba(245, 163, 28, .42), transparent); }
.kontakt-dunkel::after { width: 520px; height: 520px; right: 0; bottom: -10%; background: radial-gradient(closest-side, rgba(36, 168, 96, .14), transparent); animation-delay: -7s; }
.recht-inhalt::before { width: 520px; height: 520px; left: -4%; top: 4%; background: radial-gradient(closest-side, rgba(245, 163, 28, .4), transparent); }
.recht-inhalt::after { width: 480px; height: 480px; right: -4%; top: 45%; background: radial-gradient(closest-side, rgba(255, 210, 127, .5), transparent); animation-delay: -7s; }
@keyframes licht-wandern { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, -30px) scale(1.12); } }

/* ---------- Helles Glas ---------- */
.finder-eingabe, .vitrine:not(.dunkel), .recht-karte, .recht-toc, .kontakt-weg, .netz-chips span {
  background: var(--glas-hell); border: 1px solid var(--glas-hell-rand); box-shadow: var(--glas-hell-schatten);
  -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur);
}
.kontakt-weg { background: linear-gradient(135deg, rgba(255, 255, 255, .6), rgba(255, 255, 255, .3)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9); }
.kontakt-weg:hover { border-color: rgba(245, 163, 28, .6); }
.netz-chips span { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 6px 16px -10px rgba(27, 26, 23, .3); }

/* ---------- Dunkles Glas ---------- */
.finder-ergebnis, .vitrine.dunkel, .kontakt-dunkel .weg, .kontakt-dunkel .sozial a, .kontakt-dunkel .formular, .recht-tabs {
  background: var(--glas-dunkel); border: 1px solid var(--glas-dunkel-rand); box-shadow: var(--glas-dunkel-schatten);
  -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur);
}
.finder-tipps li { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .08); }
.kontakt-dunkel .feld input, .kontakt-dunkel .feld textarea { background: rgba(0, 0, 0, .35); border-color: rgba(255, 255, 255, .12); }
.kontakt-dunkel .weg:hover { border-color: rgba(245, 163, 28, .6); }
/* Finder-Ergebnis liegt auf hellem Grund: eigenes dunkles Licht dahinter, damit es nicht grau wirkt */
.finder-ergebnis { background: linear-gradient(135deg, rgba(28, 26, 22, .88), rgba(8, 8, 7, .82)); }
.vitrine.dunkel { background: linear-gradient(135deg, rgba(28, 26, 22, .9), rgba(8, 8, 7, .84)); }
.vitrine-text { background: transparent; }


@media (prefers-reduced-motion: reduce) {
  .finder::before, .finder::after, .schaufenster::before, .kontakt-dunkel::before, .kontakt-dunkel::after, .recht-inhalt::before, .recht-inhalt::after { animation: none; }
}

/* ---------- Erfahrung: Glaskarte mit Siegel, goldener Ring füllt sich beim Hereinscrollen ---------- */
.erfahrung {
  margin-top: 16px; display: flex; align-items: center; gap: clamp(24px, 5vw, 64px); padding: clamp(28px, 4vw, 44px) clamp(24px, 5vw, 60px); border-radius: 28px;
  background: var(--glas-hell); border: 1px solid var(--glas-hell-rand); box-shadow: var(--glas-hell-schatten);
  -webkit-backdrop-filter: var(--glas-blur); backdrop-filter: var(--glas-blur);
}
.siegel { position: relative; flex: none; width: clamp(150px, 18vw, 190px); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 25%, rgba(255, 255, 255, .95), rgba(255, 255, 255, .55) 60%, rgba(255, 236, 200, .5));
  box-shadow: inset 0 1px 0 #fff, inset 0 -8px 20px rgba(245, 163, 28, .12), 0 20px 40px -18px rgba(245, 163, 28, .55); }
.siegel svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.siegel circle { fill: none; stroke-width: 6; stroke-linecap: round; }
.siegel-spur { stroke: rgba(245, 163, 28, .14); }
.siegel-ring { stroke: var(--gold); stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 6px rgba(245, 163, 28, .55)); transition: stroke-dashoffset 1.6s var(--ease) .2s; }
.sichtbar .siegel-ring { stroke-dashoffset: 0; }
.siegel-inhalt { text-align: center; line-height: 1; }
.siegel-inhalt b { display: block; font-family: var(--schrift-schmal); font-size: clamp(3.4rem, 6vw, 4.4rem); font-weight: 700; color: var(--gold-dunkel); font-variant-numeric: tabular-nums; }
.siegel-inhalt small { display: block; margin-top: 4px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text-3); }
.erfahrung-text .kicker { margin-bottom: 8px; }
.erfahrung-text h3 { font-size: clamp(1.5rem, 3vw, 2.3rem); letter-spacing: -.03em; line-height: 1.1; }
.erfahrung-text p { margin: 10px 0 16px; font-size: 1.05rem; }
@media (max-width: 620px) { .erfahrung { flex-direction: column; text-align: center; } .erfahrung-text .netz-chips { justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .siegel-ring { transition: none; stroke-dashoffset: 0; } }

/* ==========================================================
   Glas-Buttons: getöntes Glas (Gold, WhatsApp-Grün) bzw. klares Glas (Rand-Knöpfe, Auswahl-Chips)
   ========================================================== */
.knopf, .auswahl span, .wa-schwebend, .recht-tabs a {
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
}
.knopf {
  background: linear-gradient(135deg, rgba(255, 205, 110, .9), rgba(245, 163, 28, .78));
  border: 1px solid rgba(255, 255, 255, .55); color: #1b1203;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(120, 70, 0, .18), 0 10px 24px -12px rgba(245, 163, 28, .9);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), filter .3s;
}
.knopf:hover { background: linear-gradient(135deg, rgba(255, 214, 130, .95), rgba(245, 163, 28, .85)); transform: translateY(-2px); filter: none;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), inset 0 -1px 0 rgba(120, 70, 0, .18), 0 16px 30px -12px rgba(245, 163, 28, .95); }
.knopf.wa {
  background: linear-gradient(135deg, rgba(74, 230, 135, .9), rgba(28, 190, 90, .8)); color: #fff;
  border-color: rgba(255, 255, 255, .45);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(0, 80, 30, .2), 0 10px 24px -12px rgba(37, 211, 102, .9);
}
.knopf.wa:hover { background: linear-gradient(135deg, rgba(90, 236, 150, .95), rgba(34, 200, 98, .88));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 16px 30px -12px rgba(37, 211, 102, .95); }
.knopf.rand, .knopf.rand:hover {
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .38)); color: var(--text);
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(27, 26, 23, .08), 0 10px 24px -14px rgba(27, 26, 23, .35);
}
.knopf.rand:hover { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(245, 163, 28, .45), 0 14px 28px -14px rgba(245, 163, 28, .6); }
/* Rand-Knöpfe auf dunklem Grund: dunkles Glas */
.seitenkopf .knopf.rand, .kontakt-dunkel .knopf.rand, .finder-ergebnis .knopf.rand {
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); color: #f5f5f7;
  border-color: rgba(255, 255, 255, .2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 10px 24px -14px rgba(0, 0, 0, .6);
}

/* Auswahl-Chips (Formular, Tarif-Finder) */
.auswahl span {
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35)); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(27, 26, 23, .07), 0 6px 14px -10px rgba(27, 26, 23, .3);
}
.auswahl label:hover span { box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(245, 163, 28, .45), 0 8px 18px -10px rgba(245, 163, 28, .5); }
.auswahl input:checked + span {
  background: linear-gradient(135deg, rgba(255, 205, 110, .92), rgba(245, 163, 28, .8)); border-color: rgba(255, 255, 255, .6); color: #1b1203;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), 0 8px 18px -10px rgba(245, 163, 28, .9);
}
.kontakt-dunkel .auswahl span { background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); border-color: rgba(255, 255, 255, .16); color: #e5e5ea;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16); }
.kontakt-dunkel .auswahl input:checked + span { background: linear-gradient(135deg, rgba(255, 205, 110, .92), rgba(245, 163, 28, .8)); color: #1b1203; }

/* Umschalter Impressum/Datenschutz */
.recht-tabs a[aria-current="page"] { background: linear-gradient(135deg, rgba(255, 205, 110, .92), rgba(245, 163, 28, .8)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7); }

/* Schwebender WhatsApp-Knopf */
.wa-schwebend {
  background: linear-gradient(135deg, rgba(74, 230, 135, .88), rgba(28, 190, 90, .78)); border: 1px solid rgba(255, 255, 255, .5);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -2px 6px rgba(0, 80, 30, .2), 0 14px 30px -10px rgba(37, 211, 102, .8);
}

/* ---------- Fußzeile: Logo nicht stauchen (ältere Regel .logo img setzte 40 px Breite) ---------- */
.fusszeile .logo .logo-bild { width: auto; }
.fusszeile .oben { align-items: center; }

/* ==========================================================
   Fußzeile: Karte zu Greifenbacher (Schwestermarke)
   Emblem (Original aus greifenbacher/assets/emblem.svg, inline):
   Teile fliegen beim Hereinscrollen zusammen, drehen sich danach langsam,
   bei Hover lösen sie sich voneinander – wie auf greifenbacher.de.
   ========================================================== */
.greifen-karte {
  flex: 1 1 100%; position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); padding: clamp(20px, 3vw, 28px) clamp(20px, 3.5vw, 36px);
  border-radius: 26px; color: #f5f5f7; text-decoration: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 24px 50px -28px rgba(0, 0, 0, .8);
  -webkit-backdrop-filter: blur(24px) saturate(180%); backdrop-filter: blur(24px) saturate(180%);
  transition: border-color .4s, transform .5s var(--ease);
}
/* Lichtschein in den Greifenbacher-Farben (Petrol #009fc7, Orange #f7941d) */
.greifen-karte::before, .greifen-karte::after { content: ""; position: absolute; z-index: -1; width: 340px; height: 340px; border-radius: 50%; filter: blur(50px); opacity: .45; transition: opacity .5s, transform 1.2s var(--ease); pointer-events: none; }
.greifen-karte::before { left: -80px; top: -150px; background: radial-gradient(closest-side, rgba(0, 159, 199, .8), transparent); }
.greifen-karte::after { right: -60px; bottom: -190px; background: radial-gradient(closest-side, rgba(247, 148, 29, .75), transparent); }
.greifen-karte:hover, .greifen-karte:focus-visible { border-color: rgba(255, 255, 255, .26); transform: translateY(-3px); }
.greifen-karte:hover::before, .greifen-karte:focus-visible::before { opacity: .8; transform: translateX(60px); }
.greifen-karte:hover::after, .greifen-karte:focus-visible::after { opacity: .8; transform: translateX(-60px); }

.greifen-emblem { flex: none; width: clamp(64px, 8vw, 84px); aspect-ratio: 1; display: grid; place-items: center; }
.greifen-emblem svg { width: 100%; height: 100%; overflow: visible; animation: greifen-drehen 40s linear infinite; }
@keyframes greifen-drehen { to { rotate: 360deg; } }
.greifen-emblem path { transform-box: view-box; transition: translate .6s var(--ease), rotate .6s var(--ease); }
.greifen-emblem path:nth-child(1) { transform-origin: 430px 52px;    --von: translate(-120px, -150px) rotate(-120deg); --weg: -7px -16px; }
.greifen-emblem path:nth-child(2) { transform-origin: 513px 88px;    --von: translate(170px, -90px) rotate(110deg);   --weg: 16px -6px; }
.greifen-emblem path:nth-child(3) { transform-origin: 476.5px 170px; --von: translate(110px, 160px) rotate(-110deg);  --weg: 6px 16px; }
.greifen-emblem path:nth-child(4) { transform-origin: 394px 134px;   --von: translate(-170px, 90px) rotate(120deg);   --weg: -16px 6px; }
/* Zusammenfliegen beim Hereinscrollen (.sichtbar setzt main.js) */
.js .greifen-karte.zeigen .greifen-emblem path { opacity: 0; }
.js .greifen-karte.sichtbar .greifen-emblem path { animation: greifen-flug 1.2s cubic-bezier(.2, .9, .25, 1.15) forwards; }
.js .greifen-karte.sichtbar .greifen-emblem path:nth-child(2) { animation-delay: .12s; }
.js .greifen-karte.sichtbar .greifen-emblem path:nth-child(3) { animation-delay: .24s; }
.js .greifen-karte.sichtbar .greifen-emblem path:nth-child(4) { animation-delay: .36s; }
@keyframes greifen-flug { 0% { opacity: 0; transform: var(--von) scale(.4); } 60% { opacity: 1; } 100% { opacity: 1; transform: none; } }
/* Hover: Teile lösen sich, Drehung pausiert */
.greifen-karte:hover .greifen-emblem svg, .greifen-karte:focus-visible .greifen-emblem svg { animation-play-state: paused; }
.greifen-karte:hover .greifen-emblem path, .greifen-karte:focus-visible .greifen-emblem path { translate: var(--weg); rotate: -6deg; }

.greifen-text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.greifen-text small { font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8e8e93; }
.greifen-text b {
  font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: .02em; line-height: 1.1;
  background: linear-gradient(105deg, #b6bdcf 0%, #b6bdcf 40%, #fff 50%, #b6bdcf 60%, #b6bdcf 100%); background-size: 300% 100%; background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: schimmer 7s ease-in-out 1s infinite;
}
.greifen-text > span { font-size: .92rem; color: #a1a1a6; }
.greifen-pfeil { flex: none; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: linear-gradient(135deg, rgba(0, 159, 199, .55), rgba(247, 148, 29, .55)); border: 1px solid rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4); transition: transform .5s var(--ease); }
.greifen-pfeil svg { width: 20px; height: 20px; }
.greifen-karte:hover .greifen-pfeil { transform: rotate(45deg) scale(1.08); }
@media (max-width: 560px) { .greifen-pfeil { display: none; } .greifen-text b { font-size: 1.4rem; } }

@media (prefers-reduced-motion: reduce) {
  .greifen-emblem svg, .greifen-text b { animation: none; }
  .js .greifen-karte.zeigen .greifen-emblem path { opacity: 1; animation: none; }
}

/* ---------- Schlanke Fußzeile: nur Greifenbacher-Karte + Copyright-Leiste mit Impressum/Datenschutz rechts ---------- */
.fusszeile { padding: clamp(40px, 6vw, 64px) 0 28px; }
.fusszeile .greifen-karte { margin-bottom: 28px; }
.fusszeile .unten { align-items: center; }
.fusszeile .unten nav { display: flex; gap: 22px; margin-left: auto; }
.fusszeile .unten nav a { color: #a1a1a6; text-decoration: none; font-weight: 600; transition: color .2s; }
.fusszeile .unten nav a:hover, .fusszeile .unten nav a[aria-current="page"] { color: var(--gold); }
.fusszeile .unten { padding-right: 76px; }   /* Platz für den schwebenden WhatsApp-Knopf, damit „Datenschutz“ nicht verdeckt wird */

/* ---------- Nach-oben-Pfeil (von main.js erzeugt): Glas, goldener Ring = Lesefortschritt, sitzt über dem WhatsApp-Knopf ---------- */
.nach-oben {
  position: fixed; right: 26px; bottom: 92px; z-index: 40; width: 46px; height: 46px; border-radius: 50%; padding: 0; cursor: pointer;
  display: grid; place-items: center; color: #1b1a17;
  background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .55));
  border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff, 0 12px 26px -12px rgba(27, 26, 23, .45);
  -webkit-backdrop-filter: blur(16px) saturate(180%); backdrop-filter: blur(16px) saturate(180%);
  opacity: 0; translate: 0 14px; scale: .8; pointer-events: none;
  transition: opacity .4s, translate .5s var(--ease), scale .5s var(--ease), box-shadow .3s;
}
.nach-oben.da { opacity: 1; translate: none; scale: 1; pointer-events: auto; }
.nach-oben::before {
  content: ""; position: absolute; inset: -3px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(var(--gold) calc(var(--fort, 0) * 1turn), rgba(245, 163, 28, .15) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.nach-oben svg { width: 20px; height: 20px; transition: translate .3s var(--ease); }
.nach-oben:hover { box-shadow: inset 0 1px 0 #fff, 0 14px 30px -10px rgba(245, 163, 28, .7); }
.nach-oben:hover svg { translate: 0 -2px; }
.nach-oben:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .nach-oben, .nach-oben svg { transition: none; } }

/* ==========================================================
   Story-Handy Bild 0: Störung – altes Gerät spinnt, kaum Netz
   (Flackern, RGB-Versatz an der Uhr, durchlaufende Bildfehler, Fehlermeldungen, hängender Ladekreis, Wackeln)
   ========================================================== */
.stoerung { flex: 1; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 64px 14px 0; color: #fff;
  background: radial-gradient(120% 60% at 50% 0%, rgba(120, 120, 130, .25), transparent 60%), linear-gradient(#1c1c1e, #050505);
  animation: flackern 3.4s steps(1) infinite; }
@keyframes flackern {
  0%, 100% { filter: none; } 7% { filter: brightness(1.9) contrast(1.4); } 8% { filter: none; }
  41% { filter: brightness(.35); } 42% { filter: none; } 43% { filter: brightness(.5); } 44% { filter: none; }
  71% { filter: hue-rotate(60deg) saturate(2.4); } 72% { filter: none; }
}
.stoerung .sperre-uhr { font-size: 3.4rem; font-weight: 700; letter-spacing: -.04em; line-height: 1; position: relative; }
.stoerung .sperre-datum { font-size: .82rem; opacity: .7; margin-top: 6px; }
.glitch::before, .glitch::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.glitch::before { color: #ff2d55; mix-blend-mode: screen; animation: glitch-a 2.6s steps(1) infinite; }
.glitch::after { color: #00e5ff; mix-blend-mode: screen; animation: glitch-b 2.6s steps(1) infinite; }
@keyframes glitch-a { 0%, 100% { transform: none; clip-path: inset(0 0 0 0); opacity: 0; } 10% { opacity: .9; transform: translate(-3px, 1px); clip-path: inset(10% 0 55% 0); } 12% { opacity: 0; } 55% { opacity: .9; transform: translate(4px, -1px); clip-path: inset(60% 0 5% 0); } 57% { opacity: 0; } }
@keyframes glitch-b { 0%, 100% { transform: none; opacity: 0; } 11% { opacity: .9; transform: translate(3px, -1px); clip-path: inset(40% 0 30% 0); } 13% { opacity: 0; } 56% { opacity: .9; transform: translate(-4px, 1px); clip-path: inset(0 0 70% 0); } 58% { opacity: 0; } }

.fehler { width: 100%; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 16px; margin-top: 12px; font-size: .72rem; line-height: 1.35;
  background: rgba(255, 255, 255, .13); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: 0; }
.fehler.f1 { margin-top: 30px; }
.fehler b { display: block; font-size: .74rem; }
.fehler span { opacity: .8; }
.fehler-symbol { flex: none; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: #ff3b30; color: #fff; font-weight: 800; font-size: .8rem; opacity: 1 !important; }
.story[data-stufe="0"] .fehler.f1 { animation: fehler-ein 6s var(--ease) .4s infinite; }
.story[data-stufe="0"] .fehler.f2 { animation: fehler-ein 6s var(--ease) 1.6s infinite; }
@keyframes fehler-ein { 0% { opacity: 0; transform: translateY(-10px) scale(.96); } 8%, 80% { opacity: 1; transform: none; } 86% { opacity: 1; transform: translateX(-4px); } 88% { transform: translateX(4px); } 90% { transform: none; } 100% { opacity: 0; } }

.lade-haenger { margin-top: auto; margin-bottom: 18px; display: flex; align-items: center; gap: 8px; font-size: .72rem; opacity: .75; }
.lade-haenger i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: haengen 2.4s linear infinite; }
@keyframes haengen { 0% { rotate: 0deg; } 30% { rotate: 300deg; } 31%, 60% { rotate: 310deg; } 85% { rotate: 520deg; } 86%, 100% { rotate: 530deg; } }   /* dreht, stockt, dreht … */
.akku-warnung { position: absolute; top: 40px; right: 14px; padding: 2px 8px; border-radius: 999px; background: #ff3b30; font-size: .6rem; font-weight: 800; animation: blinken-rot 1.4s steps(1) infinite; }
@keyframes blinken-rot { 50% { opacity: .25; } }

.bildfehler { position: absolute; left: -10%; right: -10%; height: 8px; pointer-events: none; mix-blend-mode: difference; background: rgba(255, 255, 255, .5); opacity: 0; }
.bildfehler.b1 { animation: bildfehler 3.4s steps(1) infinite; }
.bildfehler.b2 { height: 3px; animation: bildfehler 2.7s steps(1) .9s infinite; }
.bildfehler.b3 { height: 14px; background: rgba(0, 229, 255, .35); animation: bildfehler 4.1s steps(1) 1.7s infinite; }
@keyframes bildfehler { 0% { top: 22%; opacity: 0; } 6% { top: 22%; opacity: 1; transform: translateX(6px); } 9% { top: 61%; opacity: 1; transform: translateX(-8px); } 12% { opacity: 0; } 47% { top: 38%; opacity: 1; transform: none; } 49% { opacity: 0; } 100% { opacity: 0; } }

/* Statusleiste in der Störung: „SOS“ und der eine Balken flackern */
.story[data-stufe="0"] .statusleiste .netz b, .story[data-stufe="0"] .balken-mini i:nth-child(1) { animation: blinken-rot 1.1s steps(1) infinite; }
/* Gerät wackelt ab und zu (eigene rotate-Eigenschaft, damit das Schweben über transform weiterläuft) */
.story[data-stufe="0"] .story-telefon { animation: schweben 6s ease-in-out infinite, wackeln 3.4s ease-in-out infinite; }
@keyframes wackeln { 0%, 84%, 100% { rotate: 0deg; } 86% { rotate: -2.2deg; } 88% { rotate: 2deg; } 90% { rotate: -1.4deg; } 92% { rotate: .8deg; } 94% { rotate: 0deg; } }

/* ==========================================================
   Story-Handy Bild 1: Chat in WhatsApp-Optik (Kunde schreibt Dr Handymaa)
   ========================================================== */
.wa-chat { background-color: #efeae2;
  background-image: radial-gradient(rgba(0, 0, 0, .045) 1px, transparent 1.6px), radial-gradient(rgba(0, 0, 0, .03) 1px, transparent 1.6px);
  background-size: 18px 18px, 18px 18px; background-position: 0 0, 9px 9px; }
.wa-chat .chat-kopf { padding: 40px 10px 9px 6px; gap: 8px; background: #008069; color: #fff; }
.wa-chat .chat-kopf .zurueck { width: 18px; height: 18px; flex: none; }
.wa-chat .chat-kopf img { width: 32px; height: 32px; padding: 3px; border-radius: 50%; background: #fff; }
.wa-chat .chat-kopf b { font-size: .86rem; }
.wa-chat .chat-kopf small { font-size: .66rem; opacity: .85; }
.story[data-stufe="1"] .statusleiste { color: #fff; }
.wa-chat .verlauf { padding: 12px 10px 8px; gap: 6px; }
.wa-chat .blase { position: relative; max-width: 84%; padding: 6px 9px 17px; border-radius: 9px; font-size: .74rem; line-height: 1.35; color: #111b21; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-chat .blase.ich { background: #d9fdd3; border-radius: 9px 0 9px 9px; }
.wa-chat .blase.er { background: #fff; border-radius: 0 9px 9px 9px; }
.wa-chat .blase.ich::before, .wa-chat .blase.er:not(.tippt)::before { content: ""; position: absolute; top: 0; width: 8px; height: 10px; }
.wa-chat .blase.ich::before { right: -7px; background: #d9fdd3; clip-path: polygon(0 0, 100% 0, 0 100%); }
.wa-chat .blase.er:not(.tippt)::before { left: -7px; background: #fff; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.wa-chat .zeit { position: absolute; right: 8px; bottom: 3px; display: inline-flex; align-items: center; gap: 3px; font-size: .56rem; color: #667781; }
.wa-chat .haken2 { font-style: normal; color: #53bdeb; letter-spacing: -3px; font-size: .66rem; }
.wa-chat .haken2::before { content: "✓✓"; }
.wa-chat .blase.tippt { padding: 10px 12px; border-radius: 0 9px 9px 9px; }
.wa-chat .chat-eingabe { margin: 0 8px 12px; padding: 0; background: none; display: flex; align-items: center; gap: 6px; }
.wa-chat .eingabe-feld { flex: 1; padding: 9px 12px; border-radius: 20px; background: #fff; font-size: .74rem; color: #8696a0; box-shadow: 0 1px .5px rgba(11, 20, 26, .13); }
.wa-chat .mikro { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #00a884; color: #fff; }
.wa-chat .mikro svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .stoerung, .glitch::before, .glitch::after, .bildfehler, .lade-haenger i, .akku-warnung,
  .story[data-stufe="0"] .statusleiste .netz b, .story[data-stufe="0"] .balken-mini i:nth-child(1), .story[data-stufe="0"] .story-telefon { animation: none !important; }
  .story[data-stufe="0"] .fehler { animation: none !important; opacity: 1; }
}

/* ==========================================================
   Logo frei stehend (ohne Glas-Badge) – Original-Logo direkt auf hellem Grund
   ========================================================== */
.marke-oben::before { display: none; }
.marke-oben .logo-bild { background: none; border: 0; border-radius: 0; padding: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.kapitel-start .marke-oben .logo-bild { height: 64px; padding: 0; }
.seitenkopf .marke-oben .logo-bild { height: 56px; padding: 0; background: none; }
a.marke-oben:hover .logo-bild { box-shadow: none; translate: 0 -2px; }

/* Kopfbereich der Unterseiten jetzt hell (Seite nur im hellen Design; dunkle Logo-Teile bleiben sichtbar) */
.seitenkopf { background: var(--bg); color: var(--text); }
.seitenkopf .glut { background: radial-gradient(closest-side, rgba(245, 163, 28, .22), rgba(245, 163, 28, .05) 60%, transparent); }
.seitenkopf .kicker { color: var(--gold-dunkel); }
.seitenkopf h1 { color: var(--text); }
.seitenkopf .lead { color: var(--text-2); }
.seitenkopf .knopf.rand { background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .38)); color: var(--text); border-color: rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(27, 26, 23, .08), 0 10px 24px -14px rgba(27, 26, 23, .35); }
.recht-tabs { background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .42)); border: 1px solid rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(27, 26, 23, .06), 0 10px 24px -16px rgba(27, 26, 23, .35); }
.recht-tabs a { color: var(--text-2); }
.recht-tabs a:hover { color: var(--text); }

/* ==========================================================
   Grüne Knöpfe gedämpft: tieferes WhatsApp-Grün statt Neon
   ========================================================== */
.knopf.wa {
  background: linear-gradient(135deg, rgba(36, 168, 96, .94), rgba(18, 128, 74, .92)); color: #fff; border-color: rgba(255, 255, 255, .28);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 -1px 0 rgba(0, 50, 20, .25), 0 10px 22px -14px rgba(18, 128, 74, .8);
}
.knopf.wa:hover { background: linear-gradient(135deg, rgba(42, 180, 104, .96), rgba(20, 138, 80, .94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), 0 14px 26px -14px rgba(18, 128, 74, .85); }
.wa-schwebend {
  background: linear-gradient(135deg, rgba(36, 168, 96, .94), rgba(18, 128, 74, .92)); border-color: rgba(255, 255, 255, .3);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 6px rgba(0, 50, 20, .25), 0 12px 26px -12px rgba(18, 128, 74, .7);
}
.kontakt-dunkel .weg.wa .symbol, .weg.wa .symbol { background: rgba(36, 168, 96, .18); color: #3fbf7a; }

/* ---------- Akku-Symbol folgt der Geschichte: altes Handy (Bild 0–2) fast leer und rot, neues Gerät (Bild 3–4) voll ---------- */
.statusleiste .akku::after { right: auto; width: calc((100% - 3px) * var(--akku, 1)); transition: width .8s var(--ease), background .4s; }
.story[data-stufe="0"] .akku, .story[data-stufe="1"] .akku, .story[data-stufe="2"] .akku { --akku: .12; }
.story[data-stufe="0"] .akku::after, .story[data-stufe="1"] .akku::after, .story[data-stufe="2"] .akku::after { background: #ff3b30; }
.story[data-stufe="0"] .akku { border-color: #ff3b30; }

/* ==========================================================
   Handytausch in der Story: altes Gerät (abgenutzt, grau, Kratzer) → neues Gerät (Gold)
   main.js setzt .tausch (Animation) und zur Hälfte .neu (Gehäuse + Bildschirm wechseln, während kein Handy zu sehen ist)
   ========================================================== */
.story-telefon {
  background:
    linear-gradient(115deg, transparent 28%, rgba(255, 255, 255, .16) 28.3%, transparent 28.9%),
    linear-gradient(68deg, transparent 63%, rgba(255, 255, 255, .11) 63.2%, transparent 63.7%),
    linear-gradient(160deg, transparent 80%, rgba(255, 255, 255, .1) 80.2%, transparent 80.6%),
    linear-gradient(150deg, #5c5b5f, #3b3a3d 45%, #2a292b);
  box-shadow: 0 40px 70px -40px rgba(0, 0, 0, .55), inset 0 0 0 2px #4a494c, inset 0 0 0 3px rgba(0, 0, 0, .35);
}
.story-telefon.neu {
  background: linear-gradient(145deg, #ffe6ad 0%, #f3bb47 32%, #c98a14 68%, #f6c862 100%);
  box-shadow: 0 50px 80px -40px rgba(140, 85, 0, .6), inset 0 0 0 2px rgba(255, 255, 255, .6), inset 0 0 0 4px rgba(150, 95, 10, .35);
}

.story .story-telefon.tausch { --r: 1; animation: schweben 6s ease-in-out infinite, handytausch 1.2s cubic-bezier(.65, 0, .3, 1) both; }
.story .story-telefon.tausch.zurueck { --r: -1; }
@keyframes handytausch {
  0%     { translate: 0 0; rotate: 0deg; opacity: 1; }
  40%    { translate: calc(-170% * var(--r)) 8%; rotate: calc(-24deg * var(--r)); opacity: 0; }
  40.01% { translate: calc(170% * var(--r)) 8%; rotate: calc(24deg * var(--r)); opacity: 0; }
  82%    { translate: calc(-4% * var(--r)) 0; rotate: calc(-2deg * var(--r)); opacity: 1; }
  100%   { translate: 0 0; rotate: 0deg; opacity: 1; }
}
/* Ankunft: goldener Lichtimpuls um das Gerät */
.story-telefon::after { content: ""; position: absolute; inset: -14px; border-radius: 58px; border: 2px solid var(--gold); opacity: 0; pointer-events: none; }
.story-telefon.tausch.neu::after { animation: ankunft .9s ease-out both; }   /* startet mit .neu (Tausch-Mitte) → leuchtet bei der Landung */
@keyframes ankunft { 0%, 40% { opacity: 0; scale: .92; } 58% { opacity: .9; scale: 1; } 100% { opacity: 0; scale: 1.18; } }

/* Neues Gerät in Pastell (wie aktuelle Smartphones) statt Gold: zartes Blau mit Aluminium-Schimmer */
.story-telefon.neu {
  background: linear-gradient(145deg, #eef4fa 0%, #cfe0ef 30%, #b4cbe0 62%, #dce8f3 100%);
  box-shadow: 0 50px 80px -40px rgba(70, 100, 130, .5), inset 0 0 0 2px rgba(255, 255, 255, .85), inset 0 0 0 4px rgba(120, 150, 180, .3);
}
.mini-handy { background: linear-gradient(160deg, #eef4fa, #c6d9ea 55%, #a9c2d9); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .6), 0 20px 30px -16px rgba(70, 100, 130, .55); }
.mini-handy::before { background: rgba(60, 80, 100, .18); }
.story-telefon.tausch.neu::after { border-color: #9fbcd6; box-shadow: 0 0 30px rgba(159, 188, 214, .6); }

/* ---------- Neues Gerät (Pastell) stärker vom hellen Hintergrund lösen: klarer Rand, tiefer Schatten, blauer Schein ---------- */
.story-telefon.neu {
  background: linear-gradient(145deg, #e3eef8 0%, #bcd3e8 30%, #9dbbd8 62%, #cfe0ef 100%);
  box-shadow:
    0 0 0 1px rgba(60, 90, 125, .35),
    0 70px 90px -40px rgba(40, 70, 105, .6), 0 24px 44px -22px rgba(40, 70, 105, .45),
    inset 0 0 0 2px rgba(255, 255, 255, .9), inset 0 0 0 4px rgba(90, 125, 160, .35);
}
.story[data-stufe="3"] .story-buehne::before, .story[data-stufe="4"] .story-buehne::before {
  background: radial-gradient(circle, rgba(120, 165, 210, .38), rgba(245, 163, 28, .08) 50%, transparent 66%);
}

/* Displayriss (SVG aus main.js) liegt über allen Bildschirmen des alten Handys und verschwindet beim Tausch */
.story-telefon .riss { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 5; pointer-events: none; transition: opacity .2s; }
.story-telefon.neu .riss { opacity: 0; }

/* Neues Gerät: schwarzer Displayrahmen wie bei echten Smartphones, nur der äußere Gehäuserand in Pastellblau
   (Rand als 4px-Border mit Verlauf; Innenabstand um 4px kleiner, damit der Bildschirm gleich groß bleibt) */
.story-telefon.neu {
  padding: 8px; border: 4px solid transparent;
  background: linear-gradient(#0b0b0c, #0b0b0c) padding-box, linear-gradient(145deg, #e8f1fa 0%, #b3cde5 35%, #8fb1d2 65%, #d3e3f1 100%) border-box;
  box-shadow: 0 0 0 1px rgba(60, 90, 125, .35), 0 70px 90px -40px rgba(40, 70, 105, .6), 0 24px 44px -22px rgba(40, 70, 105, .45), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.story-telefon.neu::before { top: 18px; }

/* ==========================================================
   Kontaktbereich und Footer im hellen Design (überschreibt die früheren dunklen Regeln)
   ========================================================== */
.kontakt-dunkel { background: var(--bg) !important; color: var(--text); }
.kontakt-dunkel h2, .kontakt-dunkel h3, .kontakt-dunkel .formular h3 { color: var(--text); }
.kontakt-dunkel p { color: var(--text-2); }
.kontakt-dunkel .kicker { color: var(--gold-dunkel); }
.kontakt-dunkel::before { background: radial-gradient(closest-side, rgba(245, 163, 28, .4), transparent); }
.kontakt-dunkel::after { background: radial-gradient(closest-side, rgba(36, 168, 96, .16), transparent); }
.kontakt-dunkel .weg, .kontakt-dunkel .sozial a, .kontakt-dunkel .formular {
  background: var(--glas-hell); border: 1px solid var(--glas-hell-rand); box-shadow: var(--glas-hell-schatten); color: var(--text);
}
.kontakt-dunkel .weg small { color: var(--text-3); }
.kontakt-dunkel .weg:hover { border-color: rgba(245, 163, 28, .6); }
.kontakt-dunkel .feld > label, .kontakt-dunkel .feld > span { color: var(--text-2); }
.kontakt-dunkel .feld input, .kontakt-dunkel .feld textarea {
  background: rgba(255, 255, 255, .75); border-color: rgba(27, 26, 23, .12); color: var(--text);
}
.kontakt-dunkel .feld input::placeholder, .kontakt-dunkel .feld textarea::placeholder { color: var(--text-3); }
.kontakt-dunkel .formular .hinweis { color: var(--text-3); }
.kontakt-dunkel .auswahl span {
  background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .35)); border: 1px solid rgba(255, 255, 255, .85); color: var(--text-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(27, 26, 23, .07), 0 6px 14px -10px rgba(27, 26, 23, .3);
}
.kontakt-dunkel .knopf.rand { background: linear-gradient(135deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, .38)); color: var(--text); border-color: rgba(255, 255, 255, .85);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .95), 0 0 0 1px rgba(27, 26, 23, .08), 0 10px 24px -14px rgba(27, 26, 23, .35); }

/* Footer hell */
.fusszeile { background: var(--bg); color: var(--text-2); border-top: 1px solid var(--linie); }
.fusszeile .unten { border-color: var(--linie); color: var(--text-3); }
.fusszeile .unten nav a { color: var(--text-2); }
.fusszeile .unten nav a:hover, .fusszeile .unten nav a[aria-current="page"] { color: var(--gold-dunkel); }

/* Greifenbacher-Karte als helles Glas */
.greifen-karte {
  color: var(--text);
  background: var(--glas-hell); border: 1px solid var(--glas-hell-rand); box-shadow: var(--glas-hell-schatten);
}
.greifen-karte:hover, .greifen-karte:focus-visible { border-color: rgba(0, 159, 199, .35); }
.greifen-karte::before { opacity: .3; }
.greifen-karte::after { opacity: .28; }
.greifen-karte:hover::before, .greifen-karte:hover::after, .greifen-karte:focus-visible::before, .greifen-karte:focus-visible::after { opacity: .5; }
.greifen-text small { color: var(--text-3); }
.greifen-text b { background: linear-gradient(105deg, #607893 0%, #607893 40%, #009fc7 50%, #607893 60%, #607893 100%); background-size: 300% 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; }
.greifen-text > span { color: var(--text-2); }
.greifen-pfeil { border-color: rgba(255, 255, 255, .7); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 8px 18px -10px rgba(0, 159, 199, .6); }

/* Impressum & Datenschutz: Lichtflecken am Bildschirm festgeheftet, damit hinter jeder Glas-Kachel – auch auf der langen
   Datenschutzseite – etwas zum Verwischen liegt. Die Kacheln selbst etwas klarer (mehr Durchsicht, stärkerer Lichtrand). */
.recht-inhalt::before, .recht-inhalt::after { position: fixed; filter: blur(70px); }
.recht-inhalt::before { width: 46vw; height: 46vw; max-width: 620px; max-height: 620px; left: -6vw; top: 18vh; background: radial-gradient(closest-side, rgba(245, 163, 28, .5), transparent); }
.recht-inhalt::after { width: 42vw; height: 42vw; max-width: 560px; max-height: 560px; right: -6vw; top: 52vh; background: radial-gradient(closest-side, rgba(255, 140, 90, .32), rgba(255, 210, 127, .25) 50%, transparent); }
.recht-karte, .recht-toc {
  background: linear-gradient(135deg, rgba(255, 255, 255, .62), rgba(255, 255, 255, .3));
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 rgba(27, 26, 23, .04), 0 0 0 1px rgba(255, 255, 255, .5), 0 22px 50px -26px rgba(27, 26, 23, .3);
}
.kontakt-weg { background: linear-gradient(135deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .25)); }
.recht-inhalt { clip-path: inset(0); }   /* festgeheftete Lichtflecken nur im Kachelbereich zeigen, nicht über dem Seitenkopf */

/* ---------- Kontakt: Visitenkarte als QR-Code (nur am Computer – auf dem Handy reicht der Link zur .vcf) ---------- */
.kontakt-qr { display: none; }
@media (hover: hover) and (pointer: fine) {
  .kontakt-qr { display: flex; align-items: center; gap: 18px; margin-top: 20px; }
}
.kontakt-qr img { flex: none; width: 104px; height: 104px; padding: 6px; background: #fff; border-radius: 12px; box-shadow: 0 0 0 1px var(--linie); }
.kontakt-qr p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--text-2); }
.kontakt-qr b { color: var(--text); font-weight: 700; }

/* ==========================================================
   Flüssiger auf dem Handy
   ========================================================== */
/* Funkwellen: Keyframes ohne CSS-Variablen, damit die Grafikkarte sie allein abspielen kann;
   die Stufe wirkt stattdessen auf den Container (Deckkraft und Größe gleiten beim Kapitelwechsel). */
@keyframes funk { 0% { transform: scale(.7); opacity: .6; } 100% { transform: scale(1.6); opacity: 0; } }
.funk { opacity: calc(.2 + var(--stufe) * .2); scale: calc(1 + var(--stufe) * .1); transition: opacity .8s, scale .8s var(--ease); }

@media (max-width: 900px) {
  /* zoom berechnet das Layout des Handys samt allen Animationen ständig neu – scale verkleinert nur das fertige Bild */
  /* Handy ist hier 250 × 500 px; die negativen Ränder geben dem Layout die verkleinerte Größe (140 × 280) zurück */
  .story-buehne .story-telefon { zoom: 1; scale: .56; margin: -110px -55px; will-change: transform; }
  /* Unschärfe hinter Mitteilungen/Fehlermeldungen müsste bei jedem Bild des schwebenden Handys neu berechnet werden */
  .mitteilung, .fehler { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .mitteilung { background: rgba(255, 255, 255, .2); }
  .fehler { background: rgba(255, 255, 255, .17); }
}

/* Kleinere Handys (wenig Höhe): Gerät etwas kleiner, Kapiteltext kompakter, damit jedes Kapitel ohne Scrollen passt */
@media (max-width: 900px) and (max-height: 760px) {
  .story-buehne .story-telefon { scale: .46; margin: -135px -67px; }
  .js .kapitel { gap: 10px; }
  .js .kapitel .netz-chips { display: none; }
  .js .kapitel .scroll-hinweis { margin-top: 4px; }
  .js .kapitel p { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
}