/* Die Seite tapin.golf (F-014, D-029): eine statische Seite, Schriften und Bilder aus dem eigenen Paket, nichts von fremden Servern.
   Farben nach IDENTITAET.md 6.1; hell und dunkel folgt dem Gerät. Am Handy eine Spalte, ab 720 px die vier Schritte zu zwei mal zwei (auch auf breiten Bildschirmen, Design 10.10.2026), die drei Punkte untereinander mit Bild links und Text rechts; der Inhalt ist höchstens 960 px breit (D-029, Nachtrag 11.10.2026):
   keine Karte wird schmaler als am Handy, und die Schrift in den gezeichneten Bildern bleibt in der Anzeige bei mindestens 12 px (Bildeinheit mal Maßstab; seite_test misst es). */
@font-face { font-family:"Instrument Sans"; src:url(schriften/InstrumentSans-latin.woff2) format("woff2"); font-weight:400 700; font-stretch:75% 100%; font-style:normal; font-display:swap; }
@font-face { font-family:"Azeret Mono"; src:url(schriften/AzeretMono-latin.woff2) format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }
:root {
  color-scheme:light dark;
  --bg:#F3F5F7; --sheet:#FFFFFF; --ink:#0F1720; --muted:#5B6573; --rule:#DDE2E8; --field:#858F9D; --yellow:#F2C200; --focus:#0F1720;
  --rand:24px;
  --night:#0F1720; --night-2:#080C11; --night-ink:#E9EEF3; --night-muted:#A7B1BD; --club-s:#2F7A3A;
  --f-a:"Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-m:"Azeret Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) { :root { --bg:#0B1015; --sheet:#141A21; --ink:#E9EEF3; --muted:#98A3B0; --rule:#253039; --field:#66727F; --yellow:#FFD23A; --focus:#E9EEF3; } }
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:var(--f-a); font-size:16px; line-height:1.5; overflow-wrap:anywhere; }
.defs { position:absolute; width:0; height:0; overflow:hidden; }
img { display:block; }
p { margin:0 0 12px; }
:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } }

/* Kopf: immer dunkel */
.hero { position:relative; overflow:hidden; background:linear-gradient(160deg, var(--night) 0%, var(--night-2) 100%); color:var(--night-ink); padding:40px var(--rand) 36px; }
.hero .muster { position:absolute; right:-90px; top:-60px; width:380px; height:380px; opacity:.16; pointer-events:none; }
.hero .in { position:relative; display:grid; gap:16px; max-width:520px; }
.mark { display:flex; align-items:center; gap:14px; }
.mark img { width:34px; height:34px; flex:0 0 auto; border-radius:7.5px; }   /* Kachel wie oben links in der App (D-043 Punkt 16): App-Icon auf Tannengrün, 34 px, Ecken wie in den Schritten (22 % = 7,5 px) */
.wm { font-weight:600; font-size:44px; line-height:1; letter-spacing:-.025em; font-stretch:90%; }
.sub { font:500 12px/1.2 var(--f-m); letter-spacing:.06em; text-transform:uppercase; color:var(--night-muted); margin-top:6px; }
.hero h1 { font-size:24px; line-height:1.2; font-weight:600; letter-spacing:-.01em; margin:8px 0 0; max-width:22ch; text-wrap:balance; }
.hero p { color:var(--night-muted); margin:0; max-width:46ch; }
.go { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:0 28px; border-radius:14px; background:#FFFFFF; color:#0F1720; font:600 17px var(--f-a); text-decoration:none; justify-self:start; }
.go:focus-visible, .hero a:focus-visible { outline-color:#FFFFFF; }
.hint { font-size:14px; color:var(--night-muted); }

/* Abschnitte */
.sec { padding:36px var(--rand); display:grid; gap:16px; }
.sec + .sec { border-top:1px solid var(--rule); }
.sec h2 { margin:0; font-size:22px; line-height:1.2; font-weight:600; letter-spacing:-.01em; text-wrap:balance; }
.sec .note { margin:0; font-size:15px; color:var(--muted); max-width:52ch; }

/* Umschalter iPhone · Android */
.pills { display:none; background:var(--sheet); border:1px solid var(--rule); border-radius:12px; padding:3px; gap:2px; justify-self:start; max-width:100%; }
.js .pills { display:inline-flex; }
.pills button { font:600 15px var(--f-a); min-height:44px; min-width:110px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; }
.pills button[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
.os-label { display:none; margin:0; font-size:17px; font-weight:600; }
html:not(.js) .os-label { display:block; }

/* Schritte */
.steps { list-style:none; margin:0; padding:0; display:grid; gap:16px; grid-template-columns:1fr; }
.step { background:var(--sheet); border:1px solid var(--rule); border-radius:16px; padding:16px; display:grid; gap:10px; min-width:0; align-content:start; }
.step .n { font:600 13px var(--f-m); color:var(--muted); }
.step p { margin:0; font-size:16px; }
.step svg { width:100%; height:auto; display:block; }
.os-a { display:none; }
[data-os="android"] .os-i { display:none; }
[data-os="android"] .os-a { display:grid; }
html:not(.js) .os-i, html:not(.js) .os-a { display:grid; }
.ill-bg { fill:var(--bg); } .ill-card { fill:var(--sheet); stroke:var(--rule); stroke-width:1; } .ill-ink { fill:var(--ink); } .ill-mut { fill:var(--muted); }
.ill-line { stroke:var(--rule); stroke-width:1; fill:none; } .ill-icn { fill:none; stroke:var(--ink); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.ill-ring { fill:none; stroke:var(--ink); stroke-width:2.5; } .ill-t { font:500 11px var(--f-a); fill:var(--ink); } .ill-tm { font:500 11px var(--f-a); fill:var(--muted); } .ill-tb { font:600 11px var(--f-a); fill:var(--ink); }

/* Was Tap-in kann */
.can { display:grid; gap:16px; grid-template-columns:1fr; }
.can > div { display:grid; gap:10px; min-width:0; align-content:start; }
.can h3 { margin:0; font-size:17px; font-weight:600; }
.can p { margin:0; font-size:15px; color:var(--muted); }
.mini { background:var(--sheet); border:1px solid var(--rule); border-radius:16px; padding:14px; display:grid; gap:8px; }
.mini .t { font-weight:600; font-size:15px; }
.mini .s { font-size:13px; color:var(--muted); }
.mini .big { font:600 44px/1 var(--f-a); font-variant-numeric:tabular-nums; letter-spacing:-.02em; }
.mini .big small { font:500 15px var(--f-a); color:var(--muted); margin-left:6px; letter-spacing:0; }
.mini .btn { min-height:40px; border-radius:10px; background:var(--club-s); color:#FFFFFF; font:600 15px var(--f-a); display:flex; align-items:center; justify-content:center; }
.mini .row { display:flex; gap:8px; } .mini .row span { flex:1; min-height:40px; border:1.5px solid var(--field); border-radius:10px; display:flex; align-items:center; justify-content:center; font-weight:600; font-size:15px; }
.scale svg { width:100%; height:auto; display:block; }
.sc-line { stroke:var(--rule); stroke-width:4; stroke-linecap:round; } .sc-gap { stroke:var(--yellow); stroke-width:4; } .sc-me { fill:var(--ink); stroke:var(--sheet); stroke-width:3; }
.sc-hole { fill:var(--yellow); stroke:var(--ink); stroke-width:1.5; } .sc-t { font:500 11px var(--f-m); fill:var(--muted); } .sc-l { font:600 11px var(--f-a); fill:var(--ink); }

/* Fußzeile */
.foot { padding:24px var(--rand); display:flex; flex-wrap:wrap; gap:8px 16px; align-items:center; justify-content:space-between; border-top:1px solid var(--rule); }
.foot .links { display:flex; flex-wrap:wrap; gap:0 16px; }
a.plain { color:var(--muted); font-size:14px; text-decoration:underline; text-underline-offset:3px; }
a.plain.solo { min-height:44px; display:inline-flex; align-items:center; }
.foot .who { font-size:13px; color:var(--muted); }

/* Impressum und Datenschutz */
.kopfleiste { padding:8px 24px; border-bottom:1px solid var(--rule); }
.brand { display:inline-flex; align-items:center; gap:10px; min-height:44px; color:var(--ink); text-decoration:none; font-weight:600; font-size:17px; letter-spacing:-.025em; font-stretch:90%; }
.brand img { width:30px; height:30px; border-radius:8px; }
.recht { max-width:64ch; padding:32px 24px 40px; }
.recht h1 { font-size:30px; line-height:1.1; font-weight:600; letter-spacing:-.015em; margin:0 0 6px; text-wrap:balance; }
.recht h2 { font-size:20px; line-height:1.25; font-weight:600; margin:32px 0 8px; text-wrap:balance; }
.recht .stand { font-size:13px; color:var(--muted); margin:0 0 20px; }
.recht ul { margin:0 0 12px; padding-left:20px; }
.recht li { margin:0 0 8px; }
.recht a { color:var(--ink); text-underline-offset:3px; }
.recht a.plain.solo { color:var(--ink); font-size:16px; }

@media (min-width: 720px) {
  .hero { padding:64px var(--rand) 56px; }
  .hero .muster { width:560px; height:560px; right:-60px; top:-120px; }
  .hero h1 { font-size:32px; }
  .wm { font-size:56px; }
  .sec { padding:48px var(--rand); }
  .steps { grid-template-columns:repeat(2, minmax(0, 1fr)); }   /* 2 × 2: die Karte ist hier nie schmaler als am Handy (Rand bleibt 24 px bis 900 px) */
  .can > div { grid-template-columns:320px minmax(0, 1fr); column-gap:24px; row-gap:6px; align-content:center; align-items:center; }   /* Bild links in Handybreite, Text rechts daneben */
  .can .mini { grid-column:1; grid-row:1 / span 2; }
  .can h3 { grid-column:2; grid-row:1; align-self:end; }
  .can p { grid-column:2; grid-row:2; align-self:start; }
  .foot { padding:24px var(--rand); }
  .kopfleiste { padding:8px 56px; }
  .recht { padding:48px 56px 56px; }
}
@media (min-width: 900px) { :root { --rand:56px; } }
@media (min-width: 1072px) {   /* Inhalt höchstens 960 px: 960 + 2 × 56 */
  :root { --rand:max(56px, calc((100vw - 960px) / 2)); }
}