/* PostSafe Neuentwurf — Grundlage beider Seiten.
   Papier, Tinte, ein Signalrot nur für Fristen. Farbe steckt im Bild. */
:root{
  color-scheme: light;
  --paper:#F1F1EF; --paper-hi:#FCFCFB; --card:#FFFFFF; --card-2:#F7F7F5;
  --ink:#0D0D0F; --ink-2:#5C5C63; --ink-3:#8E8E95; --line:#E2E2DE;
  --signal:#FF3B18;
  --glass:rgba(255,255,255,.66); --glass-line:rgba(13,13,15,.08);
  --inv-bg:#0D0D0F; --inv-ink:#F4F4F1; --inv-dim:rgba(244,244,241,.2); --inv-2:#8E8E8A;
  --shadow:0 2px 6px rgba(13,13,15,.05),0 18px 46px rgba(13,13,15,.08);
  --sans:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Inter",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gut:clamp(16px,4vw,56px);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#070707; --paper-hi:#161616; --card:#131313; --card-2:#1A1A1A;
    --ink:#F4F4F1; --ink-2:#A4A4A0; --ink-3:#6E6E6C; --line:#242423;
    --glass:rgba(24,24,24,.62); --glass-line:rgba(255,255,255,.08);
    --inv-bg:#F1F1EF; --inv-ink:#0D0D0F; --inv-dim:rgba(13,13,15,.16); --inv-2:#6C6C72;
    --shadow:0 2px 6px rgba(0,0,0,.5),0 22px 52px rgba(0,0,0,.55);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#070707; --paper-hi:#161616; --card:#131313; --card-2:#1A1A1A;
  --ink:#F4F4F1; --ink-2:#A4A4A0; --ink-3:#6E6E6C; --line:#242423;
  --glass:rgba(24,24,24,.62); --glass-line:rgba(255,255,255,.08);
  --inv-bg:#F1F1EF; --inv-ink:#0D0D0F; --inv-dim:rgba(13,13,15,.16); --inv-2:#6C6C72;
  --shadow:0 2px 6px rgba(0,0,0,.5),0 22px 52px rgba(0,0,0,.55);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; background:var(--paper)}   /* auch die Fläche hinter Safaris Leisten */
body{margin:0; background:var(--paper); color:var(--ink); font-family:var(--sans); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; overflow-x:clip}
a{color:inherit}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px; border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Kopf */
.nav{position:fixed; z-index:40; left:0; right:0; top:calc(env(safe-area-inset-top,0px) + 14px); display:flex; justify-content:center; padding-inline:var(--gut); pointer-events:none}
.nav__in{pointer-events:auto; width:100%; max-width:1120px; height:54px; display:flex; align-items:center; gap:6px; padding:0 8px 0 18px; border-radius:999px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(22px) saturate(1.6); -webkit-backdrop-filter:blur(22px) saturate(1.6)}
.brand{display:flex; align-items:center; gap:9px; font-weight:700; font-size:17px; letter-spacing:-.01em; text-decoration:none; margin-right:auto}
.nav a.lk{font-size:14px; color:var(--ink-2); text-decoration:none; padding:8px 12px; border-radius:999px}
.nav a.lk:hover{color:var(--ink); background:var(--glass-line)}
.chip{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 14px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:14px; font-weight:600; text-decoration:none; border:0; cursor:pointer; font-family:inherit}
.chip[aria-current="page"]{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--ink)}
.theme{width:38px; height:38px; border-radius:50%; border:1px solid var(--glass-line); background:transparent; color:var(--ink); cursor:pointer; display:grid; place-items:center}
.theme svg{width:18px;height:18px}
@media (max-width:820px){ .nav a.lk{display:none} }

/* Schrift */
.wrap{padding-inline:var(--gut); max-width:1240px; margin:0 auto}
.eyebrow{font-family:var(--mono); font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); margin:0 0 18px}
.display{font-weight:200; letter-spacing:-.045em; line-height:.98; margin:0; text-wrap:balance}
.display b{font-weight:700; letter-spacing:-.05em}
.lede{font-size:clamp(18px,1.6vw,22px); color:var(--ink-2); line-height:1.42; max-width:32ch; margin:22px 0 0; text-wrap:pretty}

/* Bühne: das iPhone und die Briefe, ein WebGL-Bild über der Seite */
.stage{position:fixed; inset:0; z-index:29; pointer-events:none; width:100vw; height:100vh}
/* Briefe ohne 3D-Grafik (js/stage.js): flache Blätter in einem festen Halter ohne Fläche */
.flat{position:fixed; left:0; top:0; width:0; height:0; z-index:29; pointer-events:none}
.flat__l{position:absolute; left:0; top:0; transform-origin:0 0; background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.10); will-change:transform}

/* Angeheftete Kapitel */
.chap{position:relative}
/* Papierfarben, obwohl es nicht zu sehen ist (main trägt dieselbe Fläche): Safari färbt seit iOS 26
   seine Leisten oben und unten nach klebenden Elementen am Bildschirmrand. Ein durchsichtiges
   angeheftetes Kapitel ergab dort dunkle Balken, auch auf der hellen Seite. */
.pin{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--paper)}
.pin .wrap{height:100%; display:grid; grid-template-columns:1fr 1fr; align-items:center}
.col-r{grid-column:2}
.tx{max-width:520px}
.tx h2{font-size:clamp(40px,4.9vw,76px)}
.tx p{font-size:clamp(18px,1.5vw,21px); color:var(--ink-2); line-height:1.45; margin:22px 0 0; max-width:34ch; text-wrap:pretty}
.tx p.eyebrow{font-size:12px; line-height:1.5; margin:0 0 18px; color:var(--ink-3)}

/* Knöpfe */
.store{display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 22px 0 16px; border-radius:999px; background:var(--ink); color:var(--paper)}
.store small{display:block; font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; opacity:.62; line-height:1.1}
.store span{display:block; font-size:17px; font-weight:600; line-height:1.15; letter-spacing:-.01em}
.btn-q{display:inline-flex; align-items:center; gap:8px; height:52px; padding:0 22px; border-radius:999px; border:1px solid var(--line); color:var(--ink); text-decoration:none; font-weight:600; font-size:16px; background:var(--card)}
.btn-q:hover{border-color:var(--ink-3)}

/* Fuß — wie auf der echten Seite: Die Seite ist eine Karte mit runder Unterkante,
   der dunkle Fuß klebt dahinter und wird am Ende freigelegt. Das klebende Element
   ist absichtlich nur 60 % breit (Safari färbt seine Leiste sonst dunkel ein). */
:root{--rundung:24px}
@media (min-width:768px){:root{--rundung:32px}}
main{position:relative; z-index:1; background:var(--paper); border-end-start-radius:var(--rundung); border-end-end-radius:var(--rundung)}
.site-foot{position:sticky; bottom:0; z-index:0; width:60%; margin:calc(-1 * var(--rundung)) auto 0; color:#F4F4F1; --ink:#F4F4F1; --ink-2:#A4A4A0; --ink-3:#767674; --line:#292928}
.site-foot__flaeche{width:166.6667%; margin-inline:-33.3333%; background:var(--foot); box-shadow:0 3px 0 var(--foot)}
:root{--foot:#0B0B0B}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){--foot:#151515} }
:root[data-theme="dark"]{--foot:#151515}
/* Am Seitenende liegt hinter Safaris Leiste unten kein Inhalt mehr; Safari füllt die Fläche mit der
   Grundfarbe der Seite — gemessen: der von body, html allein reicht nicht. Ist der dunkle Fuß im
   Bild, bekommen beide seine Farbe (js/fuss.js). */
html.fuss, html.fuss body{background:var(--foot)}
/* Farbvorgabe für Safaris Leisten oben und unten (js/kanten.js): fest, volle Breite, am Rand,
   hinter der ganzen Seite und deshalb nirgends zu sehen */
.kante{position:fixed; left:0; right:0; height:4px; z-index:-1; pointer-events:none; background:var(--paper)}
.kante--oben{top:0} .kante--unten{bottom:0}
.site-foot__in{max-width:1240px; min-height:36vh; min-height:36svh; margin:0 auto; padding:calc(64px + var(--rundung)) var(--gut) calc(48px + env(safe-area-inset-bottom,0px)); display:grid; gap:34px; align-content:space-between}
.site-foot__brand{display:flex; align-items:center; gap:10px; font-weight:700; font-size:17px; letter-spacing:-.035em; margin:0}
.site-foot__note{color:var(--ink-2); font-size:15.5px; margin:12px 0 0; max-width:34ch}
.foot-links{display:flex; flex-wrap:wrap; gap:4px 34px; align-items:flex-start}
.foot-links a{color:var(--ink-2); text-decoration:none; font-size:16.5px; font-weight:600; letter-spacing:-.025em; padding:8px 0; min-height:44px; display:inline-flex; align-items:center; transition:color .15s}
.foot-links a:hover{color:var(--ink)}
.site-foot__legal{color:var(--ink-3); font-size:13px; border-top:1px solid var(--line); padding-top:26px; margin:0}
@media (min-width:800px){ .site-foot__in{grid-template-columns:1fr auto; align-items:start} .site-foot__legal{grid-column:1 / -1; align-self:end} }
.site-foot__brand{font-size:22px} .site-foot__brand svg{width:28px; height:26px}

/* Fuß (alt) */
.foot{padding:0 var(--gut) calc(120px + env(safe-area-inset-bottom,0px)); max-width:1240px; margin:0 auto; display:flex; flex-wrap:wrap; gap:18px 40px; align-items:center; font-size:14px; color:var(--ink-3)}
.foot nav{display:flex; flex-wrap:wrap; gap:6px 22px; margin-left:auto}
.foot a{text-decoration:none; color:var(--ink-2)}
.foot a:hover{color:var(--ink)}

/* Das iPhone: Apples Produktbild, darunter der Bildschirm */
.device{position:relative; aspect-ratio:1350/2760; user-select:none}
.device canvas{position:absolute; left:5.3333%; top:2.5%; width:89.3333%; height:95%}
.device img{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}

/* Die App-Store-Badges, wie Apple und Google sie liefern */
.badges{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.badges img{display:block; height:clamp(44px, 3.4vw, 60px); width:auto}
.badges small{display:block; width:100%; font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-3)}

/* Browserfenster mit der echten Seite von PostSafe Web */
.browser{border-radius:14px; overflow:hidden; background:var(--card); box-shadow:0 30px 80px -20px rgba(0,0,0,.28), 0 0 0 1px var(--glass-line)}
.browser__bar{height:46px; display:flex; align-items:center; gap:8px; padding:0 14px; background:var(--card-2); border-bottom:1px solid var(--line)}
.browser__bar > i{width:12px; height:12px; border-radius:50%; background:#FF5F57; flex:none}
.browser__bar > i:nth-child(2){background:#FEBC2E}.browser__bar > i:nth-child(3){background:#28C840}
.browser__nav{display:flex; gap:2px; margin-left:12px}
.browser__nav button{width:30px; height:28px; border:0; border-radius:7px; background:transparent; color:var(--ink-2); cursor:pointer; display:grid; place-items:center}
.browser__nav button:hover:not(:disabled){background:var(--line)}
.browser__nav button:disabled{opacity:.3; cursor:default}
.browser__url{flex:1; margin:0 12% 0 4%; height:30px; border-radius:8px; background:var(--card); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; gap:7px; font-size:13.5px; color:var(--ink)}
.browser__url svg{color:var(--ink-3)}
.browser__view{position:relative; overflow:hidden; background:var(--paper)}
.browser__view.live{overflow-y:auto; overscroll-behavior:contain}
.browser__page{overflow:hidden}
.browser__toast{position:sticky; bottom:14px; margin:0 auto; width:max-content; max-width:90%; padding:10px 16px; border-radius:999px; background:var(--ink); color:var(--paper); font-size:14px; opacity:0; transform:translateY(10px); transition:opacity .3s, transform .4s var(--ease); pointer-events:none}
.browser__toast.on{opacity:1; transform:none}

@media (max-width:820px), (max-aspect-ratio:9/10){
  .pin .wrap{grid-template-columns:1fr; align-items:start; padding-top:96px}
  .col-r{grid-column:1}
  .tx h2{font-size:clamp(32px,8.4vw,52px)}
  .tx p{font-size:17px; margin-top:12px}
}
@media (prefers-reduced-motion: reduce){ *{scroll-behavior:auto} }