@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/schrift/inter-400.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/schrift/inter-ext-400.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/schrift/inter-500.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/schrift/inter-ext-500.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/schrift/inter-600.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/schrift/inter-ext-600.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/schrift/inter-700.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:700;font-display:swap;src:url(/schrift/inter-ext-700.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Tesla-Prinzip: bildschirmfüllende Bühnen, je eine Aussage, zwei Knöpfe; sonst Weiß und Ruhe. Bewusst nur hell. */
:root {
  --weiss: #ffffff;
  --tinte: #171a20;
  --grau: #5c5e62;
  --linie: #e3e5e8;
  --flaeche: #f4f4f4;
  --akzent: #3e5bd6;
  --verlauf: linear-gradient(90deg, #6b72e8, #4dcfb4);
  --gut: #1f8a5b;
  --fehler: #c2392b;
  --schrift: "Inter", "Segoe UI", system-ui, sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body { margin: 0; background: var(--weiss); color: var(--tinte); font: 400 16px/1.55 var(--schrift); -webkit-font-smoothing: antialiased }
a { color: inherit }
h1, h2, h3 { font-weight: 500; letter-spacing: -.01em; text-wrap: balance; margin: 0 }
p { margin: 0 }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto } * { transition: none !important; animation: none !important } }

/* Kopf */
.kopf { position: fixed; top: 0; left: 0; right: 0; z-index: 20; padding: calc(env(safe-area-inset-top, 0px) + 14px) 24px 14px; display: flex; align-items: center; gap: 24px; transition: background .3s, color .3s }
.kopf.hell { color: #fff }
.kopf.fest { background: rgba(255,255,255,.92); backdrop-filter: blur(12px); color: var(--tinte) }
.marke { font-weight: 700; letter-spacing: .32em; font-size: 15px; text-decoration: none }
.nav { display: flex; gap: 4px; margin: 0 auto }
.nav a, .rechts a { text-decoration: none; font-weight: 500; font-size: 14px; padding: 6px 12px; border-radius: 6px; transition: background .2s }
.nav a:hover, .rechts a:hover { background: rgba(127,127,127,.16) }
.rechts { display: flex; gap: 4px }
.menuknopf { display: none; margin-left: auto; background: rgba(127,127,127,.18); border: 0; color: inherit; font: 500 14px var(--schrift); padding: 6px 14px; border-radius: 6px; cursor: pointer }
@media (max-width: 860px) { .nav, .rechts { display: none } .menuknopf { display: block } }
.schublade { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.35); display: flex; justify-content: flex-end }
.schublade div { background: #fff; width: min(320px, 85vw); padding: calc(env(safe-area-inset-top, 0px) + 70px) 24px 24px; display: flex; flex-direction: column; gap: 4px }
.schublade a { text-decoration: none; padding: 12px; border-radius: 8px; font-weight: 500 }
.schublade a:hover { background: var(--flaeche) }

/* Knöpfe */
.knoepfe { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center }
.kn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; padding: 11px 24px; border-radius: 6px; font: 500 14px var(--schrift); text-decoration: none; border: 0; cursor: pointer; transition: filter .2s }
.kn:hover { filter: brightness(1.08) }
.kn:focus-visible, .nav a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px }
.kn.primaer { background: var(--akzent); color: #fff }
.kn.zweit { background: rgba(244,244,244,.82); color: var(--tinte) }
.kn.dunkel { background: var(--tinte); color: #fff }
@media (max-width: 520px) { .kn { min-width: 0; width: 100% } }

/* Bühnen */
.buehne { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(env(safe-area-inset-top, 0px) + 110px) 24px 56px; text-align: center; overflow: hidden; scroll-snap-align: start }
.buehne > img.grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1 }
.buehne.dunkel { color: #fff }
.buehne.dunkel::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,0) 38%, rgba(0,0,0,0) 70%, rgba(0,0,0,.35) 100%) }
.buehne h1 { font-size: clamp(36px, 6vw, 56px); font-weight: 500 }
.buehne h2 { font-size: clamp(30px, 4.6vw, 44px) }
.buehne .unter { margin-top: 10px; font-size: 17px; opacity: .92 }
.buehne .unter a { text-underline-offset: 3px }
.ki { position: absolute; right: 12px; bottom: 10px; font-size: 11px; opacity: .75 }
.buehne.hell { background: var(--weiss); justify-content: center; gap: 40px }
.buehne.grau { background: #f6f7f9; justify-content: center; gap: 40px }
.bild-rahmen { width: min(1100px, 100%); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 80px rgba(23,26,32,.18) }
.bild-rahmen img { display: block; width: 100%; height: auto }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; width: min(1100px, 100%); text-align: left }
.zwei > * { min-width: 0 }
@media (max-width: 860px) { .zwei { grid-template-columns: 1fr; text-align: center } }
.handys { display: flex; gap: 20px; justify-content: center }
.handy { width: min(220px, 42vw); aspect-ratio: 390/844; border-radius: 34px; padding: 9px; background: #111; box-shadow: 0 24px 60px rgba(0,0,0,.25) }
.handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 26px; display: block }
.punkte { list-style: none; padding: 0; margin: 20px 0 28px; display: grid; gap: 10px; font-size: 16px; color: var(--grau) }
.punkte li::before { content: '—'; margin-right: 10px; color: var(--tinte) }
@media (max-width: 860px) { .punkte { justify-items: center } }
.kenn { display: flex; gap: 48px; justify-content: center; flex-wrap: wrap; margin-top: 8px }
.kenn div { display: grid }
.kenn b { font-size: 28px; font-weight: 500 }
.kenn span { font-size: 13px; color: var(--grau) }
.buehne.dunkel .kenn span { color: rgba(255,255,255,.8) }

/* Inhaltsseiten */
.seite { padding: calc(env(safe-area-inset-top, 0px) + 110px) 24px 80px; max-width: 1100px; margin: 0 auto }
.seite > h1 { font-size: clamp(34px, 5vw, 48px); text-align: center }
.seite > .unter { text-align: center; color: var(--grau); margin: 12px auto 48px; max-width: 60ch; font-size: 17px }
.bereiche { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px 32px }
.bereich h3 { font-size: 19px; margin-bottom: 8px }
.bereich p { color: var(--grau); font-size: 15px }
.bereich { padding-top: 18px; border-top: 1px solid var(--linie) }
.gross-bild { margin: 0 0 56px }
.preise { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-bottom: 40px }
@media (max-width: 700px) { .preise { grid-template-columns: 1fr } }
.preis { border: 1px solid var(--linie); border-radius: 14px; padding: 32px; display: grid; gap: 8px; text-align: center }
.preis .betrag { font-size: 48px; font-weight: 500; font-variant-numeric: tabular-nums }
.preis .betrag small { font-size: 16px; color: var(--grau); font-weight: 400 }
.preis p { color: var(--grau) }
.rechner { background: #f6f7f9; border-radius: 14px; padding: 32px; display: grid; gap: 22px; max-width: 720px; margin: 0 auto 56px }
.regler { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center }
.regler input { grid-column: 1 / -1; width: 100%; accent-color: var(--akzent) }
.regler b { font-variant-numeric: tabular-nums }
.summe { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid var(--linie); padding-top: 16px; font-size: 18px }
.summe b { font-size: 34px; font-weight: 500; font-variant-numeric: tabular-nums }
.fragen { max-width: 720px; margin: 0 auto; display: grid; gap: 8px }
details { border-bottom: 1px solid var(--linie); padding: 14px 0 }
summary { cursor: pointer; font-weight: 500 }
details p { color: var(--grau); margin-top: 8px }
.liste-sicher { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 32px; margin-top: 8px }
.liste-sicher div { border-top: 1px solid var(--linie); padding-top: 18px }
.liste-sicher h3 { font-size: 18px; margin-bottom: 6px }
.liste-sicher p { color: var(--grau); font-size: 15px }
.text-schmal { max-width: 65ch; margin: 0 auto; display: grid; gap: 18px; font-size: 17px }
.text-schmal p { color: #33363c }

/* Formular */
.formular { max-width: 640px; margin: 0 auto; display: grid; gap: 36px }
.block { display: grid; gap: 14px }
.block h2 { font-size: 22px }
.feld { display: grid; gap: 6px }
.feld label { font-size: 13px; color: var(--grau); font-weight: 500 }
.feld input, .feld select, .feld textarea { font: 400 16px var(--schrift); padding: 12px 14px; border: 1px solid var(--linie); border-radius: 6px; background: var(--weiss); color: var(--tinte); width: 100% }
.feld textarea { min-height: 90px; resize: vertical }
.reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width: 560px) { .reihe { grid-template-columns: 1fr } }
.hinweis { font-size: 13px; color: var(--grau) }
.hinweis.gut { color: var(--gut) }
.hinweis.fehler { color: var(--fehler) }
.mandat { background: #f6f7f9; border-radius: 10px; padding: 16px; font-size: 13px; color: #3a3d43; line-height: 1.5 }
.haken { display: flex; gap: 10px; align-items: flex-start; font-size: 14px }
.haken input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--akzent) }
.live { display: flex; justify-content: space-between; align-items: baseline; background: #f6f7f9; border-radius: 10px; padding: 14px 16px }
.live b { font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums }
.erfolg { text-align: center; max-width: 560px; margin: 0 auto; display: grid; gap: 14px; padding-top: 40px }
.erfolg .zeichen { width: 64px; height: 64px; border-radius: 50%; background: var(--verlauf); margin: 0 auto; display: grid; place-items: center; color: #fff; font-size: 30px }
.termine { display: flex; gap: 8px; flex-wrap: wrap }
.chip { border: 1px solid var(--linie); background: var(--weiss); border-radius: 999px; padding: 8px 14px; font: 500 14px var(--schrift); cursor: pointer; color: var(--tinte) }
.chip[aria-pressed="true"] { background: var(--tinte); color: #fff; border-color: var(--tinte) }

/* Fuß */
.fuss { padding: 28px 24px calc(env(safe-area-inset-bottom, 0px) + 28px); display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; font-size: 13px; color: var(--grau) }
.fuss a { text-decoration: none }
.dummy { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); z-index: 40; background: var(--tinte); color: #fff; font-size: 12px; padding: 6px 12px; border-radius: 999px; opacity: .85 }
main[hidden] { display: none }


/* ---- Fassung 2: Tesla-Bühnen ---- */
body { font-size: 14px }
.kopf { padding: calc(env(safe-area-inset-top, 0px) + 12px) 32px 12px }
.marke { font-size: 17px; letter-spacing: .42em }
.nav a, .rechts a { font-size: 14px; font-weight: 500; padding: 4px 12px; border-radius: 4px }
.tk { display: inline-flex; align-items: center; justify-content: center; width: 264px; height: 40px; border-radius: 4px; font: 500 14px var(--schrift); text-decoration: none; border: 0; cursor: pointer; transition: background .25s, color .25s }
.tk.blau { background: #3e6ae1; color: #fff }
.tk.blau:hover { background: #3457b1 }
.tk.glas { background: rgba(244,244,244,.65); color: #393c41; backdrop-filter: blur(8px) }
.tk.glas:hover { background: rgba(244,244,244,.9) }
.tk.dunkelglas { background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(8px) }
.tk.dunkelglas:hover { background: rgba(255,255,255,.2) }
.tk.grau { background: #f4f4f4; color: #393c41 }
.tk.grau:hover { background: #e8e8e8 }
.tk:focus-visible { outline: 2px solid #3e6ae1; outline-offset: 2px }
@media (max-width: 600px) { .tk { width: 100% } }
.t-knoepfe { display: flex; gap: 24px; justify-content: center; flex-wrap: wrap; width: min(560px, 100%) }
.t-knoepfe.links { justify-content: flex-start; margin-top: 28px }
@media (max-width: 600px) { .t-knoepfe { gap: 12px } }

.t-buehne { position: relative; height: 100svh; min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 18vh 24px 10vh; text-align: center; overflow: hidden }
.t-buehne picture, .t-grund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1 }
.t-buehne.dunkel { color: #fff }
.t-buehne.dunkel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 32%, rgba(0,0,0,0) 72%, rgba(0,0,0,.28) 100%) }
.t-titel { display: grid; gap: 8px; justify-items: center }
.t-titel h1, .t-titel h2 { font-size: clamp(32px, 4.2vw, 48px); font-weight: 500; line-height: 1.12; letter-spacing: -.005em }
.t-titel p { font-size: 15px; opacity: .9 }
.t-titel a { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px }
.dunkeltext { color: #171a20 }
.dunkeltext p { color: #5c5e62; opacity: 1 }

.t-produkt { position: relative; min-height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6vh; padding: 14vh 24px 10vh; text-align: center; overflow: hidden }
.t-produkt.kurz { min-height: 60svh }
.t-produkt.schwarz { background: #000; color: #fff }
.t-produkt.schwarz::before { content: ''; position: absolute; left: 50%; top: 55%; width: 120vw; height: 80vh; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(62,106,225,.22), rgba(0,0,0,0)); pointer-events: none }
.t-produkt.hellgrau { background: #f4f4f4 }
.t-produkt.weiss { background: #fff }
.t-produkt > * { position: relative }

[hidden] { display: none !important }
.laptop { width: min(1180px, 94vw, calc((100svh - 320px) * 1.55)) }
.laptop .schirm { background: #050506; border: 1px solid #2a2b30; border-radius: 20px 20px 4px 4px; padding: 1.4% 1.4% 2.6%; box-shadow: 0 40px 120px rgba(62,106,225,.18), 0 30px 60px rgba(0,0,0,.6) }
.laptop .schirm img { display: block; width: 100%; height: auto; border-radius: 4px }
.laptop .unterteil { height: clamp(10px, 1.4vw, 18px); width: 112%; margin-left: -6%; background: linear-gradient(180deg, #3a3c42, #17181b 70%); border-radius: 0 0 18px 18px; position: relative }
.laptop .unterteil::before { content: ''; position: absolute; left: 50%; top: 0; width: 16%; height: 45%; transform: translateX(-50%); background: #0b0b0d; border-radius: 0 0 10px 10px }

.t-teilung { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; background: #000 }
.t-text { display: flex; flex-direction: column; justify-content: center; padding: 12vh 7vw; color: #fff; gap: 14px }
.t-text h2 { font-size: clamp(30px, 3.6vw, 44px); font-weight: 500; line-height: 1.15 }
.t-text p { font-size: 16px; color: rgba(255,255,255,.75); max-width: 44ch }
.t-foto { position: relative; overflow: hidden }
.t-foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 40% }
@media (max-width: 860px) { .t-teilung { grid-template-columns: 1fr } .t-foto { min-height: 80svh; order: -1 } .t-text { text-align: center; align-items: center } .t-knoepfe.links { justify-content: center } }

.handys { display: flex; gap: clamp(16px, 4vw, 56px); align-items: center; justify-content: center }
.handy { width: min(300px, 40vw); aspect-ratio: 390/844; border-radius: 48px; padding: 11px; background: linear-gradient(145deg, #2b2d33, #0a0a0c); box-shadow: 0 50px 100px rgba(23,26,32,.28), inset 0 0 0 1px rgba(255,255,255,.08) }
.handy img { width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 38px; display: block }

.specs { display: flex; gap: clamp(28px, 6vw, 88px); justify-content: center; flex-wrap: wrap }
.specs div { display: grid; gap: 4px }
.specs b { font-size: clamp(30px, 3.4vw, 40px); font-weight: 500; font-variant-numeric: tabular-nums }
.specs span { font-size: 13px; opacity: .72 }

.zoom { transition: transform 1.6s cubic-bezier(.2,.7,.2,1) }
.zoom.vor { transform: scale(1.04) }
@media (prefers-reduced-motion: reduce) { .zoom.vor { transform: none } }
.ki { position: absolute; right: 14px; bottom: 10px; font-size: 11px; color: #fff; opacity: .7; z-index: 2 }

/* Unterseiten etwas ruhiger und größer */
.seite { padding-top: calc(env(safe-area-inset-top, 0px) + 120px) }
.seite > h1 { font-weight: 500; font-size: clamp(34px, 4.4vw, 48px) }
.bild-rahmen { border-radius: 16px; box-shadow: 0 40px 100px rgba(23,26,32,.18) }
.kn { border-radius: 4px; height: 40px; padding: 0 24px; min-width: 264px }
.kn.primaer { background: #3e6ae1 }

/* ---- Kopfleiste nach Tesla ---- */
.kopf { height: calc(env(safe-area-inset-top, 0px) + 56px); padding: env(safe-area-inset-top, 0px) 28px 0; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; color: #171a20; transition: background .35s, color .35s, box-shadow .35s }
.kopf.hell { color: #fff }
.kopf.fest { background: rgba(255,255,255,.86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); box-shadow: 0 1px 0 rgba(0,0,0,.06) }
.marke { justify-self: start; font-size: 18px; font-weight: 600; letter-spacing: .52em; margin-right: -.52em; text-decoration: none; color: inherit }
.nav { position: relative; display: flex; gap: 0; margin: 0 }
.nav a { position: relative; z-index: 1; padding: 6px 16px; font-size: 14px; font-weight: 500; border-radius: 4px; text-decoration: none; color: inherit; background: none }
.nav a:hover { background: none }
.gleiter { position: absolute; left: 0; top: 0; height: 100%; width: 0; border-radius: 4px; background: rgba(0,0,0,.06); opacity: 0; transition: transform .3s cubic-bezier(.2,.7,.2,1), width .3s cubic-bezier(.2,.7,.2,1), opacity .25s; pointer-events: none }
.kopf.hell .gleiter { background: rgba(255,255,255,.16) }
.rechts { justify-self: end; display: flex; align-items: center; gap: 8px }
.rechts .leise { padding: 6px 14px; font-size: 14px; font-weight: 500; border-radius: 4px; text-decoration: none; color: inherit }
.rechts .leise:hover { background: rgba(0,0,0,.06) }
.kopf.hell .rechts .leise:hover { background: rgba(255,255,255,.16) }
.kopfknopf { display: inline-flex; align-items: center; height: 34px; padding: 0 18px; border-radius: 4px; background: #171a20; color: #fff; font-size: 13px; font-weight: 500; text-decoration: none; transition: background .25s }
.kopfknopf:hover { background: #393c41 }
.kopf.hell .kopfknopf { background: rgba(255,255,255,.92); color: #171a20 }
.kopf.hell .kopfknopf:hover { background: #fff }
.menuknopf { justify-self: end; display: none; height: 32px; padding: 0 16px; border: 0; border-radius: 4px; background: rgba(0,0,0,.06); color: inherit; font: 500 14px var(--schrift); cursor: pointer }
.kopf.hell .menuknopf { background: rgba(255,255,255,.18) }
@media (max-width: 980px) { .kopf { grid-template-columns: 1fr auto } .nav, .rechts { display: none } .menuknopf { display: block } }
.schublade { position: fixed; inset: 0; z-index: 30; background: rgba(0,0,0,.28); backdrop-filter: blur(3px); display: flex; justify-content: flex-end }
.schublade .lade { background: #fff; width: min(340px, 88vw); height: 100%; padding: calc(env(safe-area-inset-top, 0px) + 64px) 24px 24px; display: flex; flex-direction: column; gap: 2px; position: relative; box-shadow: -20px 0 60px rgba(0,0,0,.15) }
.schublade .lade a { padding: 12px 16px; border-radius: 6px; font-size: 16px; font-weight: 500; text-decoration: none; color: #171a20 }
.schublade .lade a:hover { background: #f4f4f4 }
.schublade .zu { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f4f4f4; font-size: 15px; cursor: pointer; color: #171a20 }
.schublade .kopfknopf.breit { margin-top: 16px; height: 44px; justify-content: center; font-size: 14px; color: #fff }

/* ---- Handy im Stil eines aktuellen Premium-Smartphones (ohne Marke) ---- */
.handy { isolation: isolate; position: relative; width: min(300px, 40vw); aspect-ratio: 71.5/147.6; padding: 0; border-radius: 17% / 8.2%; background: linear-gradient(145deg, #e9e6e1 0%, #a9a59f 18%, #f3f1ed 34%, #8f8b85 62%, #d8d5cf 100%); box-shadow: 0 60px 110px rgba(23,26,32,.32), 0 18px 36px rgba(23,26,32,.18), inset 0 0 0 1px rgba(255,255,255,.55) }
.handy::after { content: ''; position: absolute; inset: 1.2%; border-radius: 16% / 7.7%; background: #050506; z-index: 0 }
.handy .glas { position: absolute; inset: 2.6%; border-radius: 14.4% / 6.9%; overflow: hidden; background: #fff; z-index: 1; display: flex; flex-direction: column }
.handy .glas::after { content: ''; position: absolute; inset: 0; background: linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 32%); pointer-events: none }
.handy .status { flex: none; height: 7.2%; display: flex; align-items: center; justify-content: space-between; padding: 0 9% 0 11%; position: relative; color: #000; font-size: clamp(9px, 1.15vw, 14px) }
.handy .status b { font-weight: 600; letter-spacing: -.01em }
.handy .insel { position: absolute; left: 50%; top: 22%; width: 31%; height: 54%; transform: translateX(-50%); background: #000; border-radius: 999px }
.handy .symbole { display: flex; gap: 5px; align-items: center }
.handy .netz { width: 15px; height: 9px; background: linear-gradient(90deg, #000 0 18%, transparent 18% 27%, #000 27% 45%, transparent 45% 54%, #000 54% 72%, transparent 72% 81%, #000 81%); clip-path: polygon(0 100%, 100% 0, 100% 100%) }
.handy .akku { width: 21px; height: 10px; border: 1.5px solid rgba(0,0,0,.45); border-radius: 3px; position: relative; box-sizing: border-box }
.handy .akku::before { content: ''; position: absolute; inset: 1.5px; right: 5px; background: #000; border-radius: 1px }
.handy .glas img { flex: 1; width: 100%; height: auto; min-height: 0; object-fit: cover; object-position: top; border-radius: 0; display: block }
.handy .taste { position: absolute; width: 1.3%; border-radius: 2px; background: linear-gradient(90deg, #8f8b85, #d8d5cf); z-index: -1 }
.handy .taste.laut { left: -1%; top: 22%; height: 8% }
.handy .taste.leise { left: -1%; top: 32%; height: 8% }
.handy .taste.an { right: -1%; top: 26%; height: 12% }
/* Helle Bühne: Foto mit hellem Himmel/Wand oben, dunkle Schrift */
.t-buehne.hell { color: #171a20 }
.t-buehne.hell::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 78%, rgba(0,0,0,.18) 100%) }
.t-buehne.hell .ki { color: #fff }
.t-buehne + .t-buehne { border-top: 0 }
@media (max-width: 700px) { .t-buehne { padding: 15vh 16px 8vh } .t-titel h1, .t-titel h2 { font-size: clamp(28px, 8vw, 36px) } }
/* Seitliche Bühne: Text in der ruhigen Bildhälfte, Knöpfe direkt darunter */
.t-buehne.t-seite { align-items: flex-start; justify-content: center; text-align: left; padding: 12vh 7vw; gap: 32px }
.t-seite .t-titel { justify-items: start; width: min(600px, 86vw) }
.t-seite .t-titel p { max-width: 38ch }
.t-seite .t-knoepfe { justify-content: flex-start }
.t-buehne.t-seite.t-rechts { align-items: flex-end; text-align: right }
.t-seite.t-rechts .t-titel { justify-items: end }
.t-seite.t-rechts .t-knoepfe { justify-content: flex-end }
.t-buehne.t-seite.t-oben { justify-content: flex-start; padding-top: 14vh }
.t-buehne.t-seite.t-unten { justify-content: flex-end; padding-bottom: 12vh }
.t-buehne.t-seite.dunkel::after { background: linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 60%) }
.t-buehne.t-seite.t-rechts.hell::after { background: linear-gradient(270deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,0) 42%) }
.t-buehne.t-seite.hell:not(.t-rechts)::after { background: linear-gradient(90deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,.2) 36%, rgba(255,255,255,0) 58%) }
@media (max-width: 700px) {
  .t-buehne.t-seite, .t-buehne.t-seite.t-rechts, .t-buehne.t-seite.t-oben, .t-buehne.t-seite.t-unten { align-items: center; text-align: center; justify-content: space-between; padding: 15vh 16px 8vh; gap: 20px }
  .t-seite .t-titel, .t-seite.t-rechts .t-titel { justify-items: center; width: 100% }
  .t-seite .t-knoepfe, .t-seite.t-rechts .t-knoepfe { justify-content: center }
  .t-buehne.t-seite.dunkel::after { background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 34%, rgba(0,0,0,0) 70%, rgba(0,0,0,.3) 100%) }
  .t-buehne.t-seite.hell::after, .t-buehne.t-seite.t-rechts.hell::after { background: linear-gradient(180deg, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 34%, rgba(255,255,255,0) 72%, rgba(0,0,0,.2) 100%) }
}
.hellgrau .tk.grau { background: #fff }
.hellgrau .tk.grau:hover { background: #fafafa }
.t-produkt.kurz .t-knoepfe { width: min(840px, 100%) }
/* ---- Fassung 3: klare Schrift, weiche Übergänge, echte Fotoformate auf dem Handy ---- */
:root { --kopf-schrift: "Inter", "Segoe UI", system-ui, sans-serif }
h1, h2, h3, .marke, .specs b { font-family: var(--kopf-schrift) }
.t-titel h1 { font-size: clamp(40px, 3.8vw, 56px); font-weight: 600; letter-spacing: -.02em; line-height: 1.08 }
.t-titel h2 { font-size: clamp(32px, 3.6vw, 48px); font-weight: 600; letter-spacing: -.018em; line-height: 1.12 }
.t-titel p { font-size: 17px; line-height: 1.45; opacity: 1 }
.t-buehne.dunkel .t-titel p { color: rgba(255,255,255,.86) }
.t-buehne.dunkel .t-titel { text-shadow: 0 1px 28px rgba(0,0,0,.3) }
.specs b { font-weight: 600; letter-spacing: -.02em }
.tk.weiss { background: #fff; color: #171a20 }
.tk.weiss:hover { background: #ececec }
/* Übergänge: Foto blendet weich in die Farbe des Nachbarabschnitts über statt hart zu schneiden */
.t-buehne { isolation: isolate; background: #000 }
.t-buehne.hell { background: #f4f4f4 }
.t-buehne.hell::after { background: linear-gradient(180deg, rgba(255,255,255,.62) 0%, rgba(255,255,255,0) 30%) }
.t-buehne.ein picture { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20vh); mask-image: linear-gradient(180deg, transparent 0, #000 20vh) }
.t-buehne.aus picture { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 20vh), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - 20vh), transparent 100%) }
.t-buehne.ein.aus picture { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20vh, #000 calc(100% - 20vh), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 20vh, #000 calc(100% - 20vh), transparent 100%) }
/* Bereiche */
.bereiche { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px 40px; width: min(1100px, 100%); text-align: left; color: #171a20 }
.bereiche div { display: grid; align-content: start; gap: 6px; padding-top: 18px; border-top: 1px solid #d6d7da }
.bereiche b { font-family: var(--kopf-schrift); font-size: 18px; font-weight: 600; letter-spacing: -.01em }
.bereiche span { font-size: 14px; line-height: 1.5; color: #5c5e62 }
@media (max-width: 900px) { .bereiche { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px } }
/* Handy: Foto im Format 4:5 zwischen Überschrift und Knöpfen statt über die ganze Höhe gestreckt */
@media (max-width: 700px) {
  #v-start .t-buehne { height: auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; padding: 72px 16px 44px; gap: 24px }
  #v-start .t-buehne::after { display: none }
  #v-start .t-buehne picture { position: relative; inset: auto; order: 2; width: calc(100% + 32px); max-width: none; height: auto; margin: 0 -16px; aspect-ratio: 4 / 5; z-index: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14%, #000 86%, transparent 100%) }
  #v-start .t-buehne .t-titel { order: 1; justify-items: center; width: 100%; text-shadow: none }
  #v-start .t-buehne .t-knoepfe { order: 3; justify-content: center }
  #v-start .t-buehne .ki { position: static; order: 4; color: inherit; opacity: .5 }
  #v-start .t-buehne.dunkel .tk.glas { background: rgba(255,255,255,.14); color: #fff }
  #v-start .t-produkt { min-height: 0; padding: 72px 16px 56px; gap: 36px }
  .t-titel h1 { font-size: clamp(34px, 9.5vw, 42px) }
  .t-titel h2 { font-size: clamp(28px, 8vw, 36px) }
  .t-titel p { font-size: 16px }
}
/* Einstieg: am Desktop eine Zeile über dem Monitor, schmal zweizeilig */
br.schmal { display: none }
@media (max-width: 1100px) { br.schmal { display: inline } }
.t-buehne:first-child { padding-top: 13vh }
@media (max-width: 700px) { .dummy { left: 8px; transform: none; bottom: calc(env(safe-area-inset-bottom, 0px) + 8px); font-size: 10px; padding: 4px 9px; opacity: .7 } }
/* Handy: Statusleiste liegt über dem App-Bild wie bei iOS, Insel in echter Größe und Lage */
.handy .glas { display: block; background: rgb(243,247,251) }
.handy .status { position: absolute; top: 0; left: 0; right: 0; height: 7%; z-index: 2; padding: 0 3%; background: none }
.handy .status b { width: 26%; text-align: center; font-family: var(--kopf-schrift) }
.handy .insel { top: 18%; height: 64%; width: 32% }
.handy .symbole { width: 26%; justify-content: center }
.handy .glas img { position: absolute; left: 0; top: 4.5%; width: 100%; height: auto }
/* Gewerke: wofür GREVARO gebaut ist */
.vorzeile { font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; opacity: .85 }
.gewerke { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; width: min(1080px, 100%); text-align: left }
.gewerke div { display: grid; align-content: start; gap: 10px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.18) }
.gewerke b { font-family: var(--kopf-schrift); font-size: 24px; font-weight: 600; letter-spacing: -.015em }
.gewerke span { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,.72) }
@media (max-width: 800px) { .gewerke { grid-template-columns: 1fr; gap: 28px } .vorzeile { font-size: 11px; letter-spacing: .1em } }

/* Rückmeldung nach dem Bestätigungslink (3.3) */
.bestaetigt { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; max-width: min(560px, calc(100% - 32px)); background: #171a20; color: #fff; padding: 14px 18px; border-radius: 10px; font-size: 15px; line-height: 1.45; box-shadow: 0 8px 30px rgba(0,0,0,.18) }

.recht{max-width:760px;margin:0 auto;font-size:15px;line-height:1.65}.recht h2{font-size:20px;margin:28px 0 8px}.recht p,.recht li{color:var(--grau)}