/* Dieselben Werte wie in der App (DesignTokens.swift). Wer einen QR-Code
   scannt und keine App hat, soll dieselbe Sache sehen — nicht eine Webfassung
   davon. */
:root {
  --ground:#F7F3EC; --surface:#FFFDF7;
  --ink:#1E1B18; --ink2:#6B645B; --ink3:#9C948A;
  --hairline:rgba(30,27,24,.12); --hairline-strong:rgba(30,27,24,.24);
  --accent:#0B5F63; --on-accent:#FFFDF7;
  --stone-pale:#EFE7D9; --stone-mid:#DBCFB9; --stone-deep:#BCAB90;
  --serif:ui-serif,"New York",Georgia,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#141210; --surface:#221E19;
    --ink:#F2ECE1; --ink2:#A79E92; --ink3:#7B7267;
    --hairline:rgba(242,236,225,.14); --hairline-strong:rgba(242,236,225,.28);
    --accent:#5FAFA8; --on-accent:#101614;
    --stone-pale:#2B2521; --stone-mid:#3B332B; --stone-deep:#4C4137;
  }
}
*{box-sizing:border-box}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);
     -webkit-text-size-adjust:100%}
.wrap{max-width:38rem;margin:0 auto;padding:0 22px 72px}
.lbl{font:500 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--ink3)}
a{color:var(--accent)}
/* Die Ersatzfläche der App, so gut es in CSS geht: Licht auf Stein. */
.plate{height:min(46vw,260px);
  background:
    radial-gradient(120% 90% at 30% 12%, color-mix(in srgb,var(--stone-pale) 70%,transparent), transparent 70%),
    linear-gradient(140deg,var(--stone-pale),var(--stone-mid));
  border-bottom:1px solid var(--hairline);position:relative}
.plate::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;
  background:var(--stone-deep);opacity:.55}
h1{font:400 clamp(26px,6vw,38px)/1.14 var(--serif);letter-spacing:-.01em;margin:26px 0 8px}
.meta{font:400 12px/1.6 var(--mono);color:var(--ink2);margin-bottom:24px}
.lead{font:400 clamp(17px,3.6vw,20px)/1.5 var(--serif);color:var(--ink2);margin:0 0 28px}
h2{font:500 11px/1 var(--mono);letter-spacing:1.3px;text-transform:uppercase;color:var(--ink3);
   margin:30px 0 12px;padding-top:20px;border-top:1px solid var(--hairline)}
p{font:400 16px/1.72 var(--serif);margin:0 0 15px;white-space:pre-wrap}
.reflect{font:italic 400 clamp(19px,4vw,22px)/1.45 var(--serif);
  border-left:3px solid var(--accent);padding:16px 0 16px 18px;margin:26px 0}
.link{display:block;padding:14px 0;border-top:1px solid var(--hairline);text-decoration:none}
.link b{display:block;font:500 15px/1.35 var(--sans);color:var(--ink)}
.link span{font:400 11px/1.5 var(--mono);color:var(--ink3)}
.btn{display:block;text-align:center;text-decoration:none;font:600 15px/1 var(--sans);
  padding:15px;border-radius:10px;background:var(--accent);color:var(--on-accent);margin:10px 0 0}
.btn.quiet{background:transparent;color:var(--ink);border:1px solid var(--hairline-strong)}
.note{font:400 14px/1.6 var(--sans);color:var(--ink2);padding:28px 0}
footer{border-top:1px solid var(--hairline);margin-top:44px;padding-top:18px;
  font:400 12px/1.7 var(--mono);color:var(--ink3)}