/* 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 Schritte zu zweit nebeneinander (auch auf breiten Bildschirmen, Design 10.10.2026; bei ungerader Zahl der letzte doppelt breit), 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 im gezeichneten Bild unter „Was Tap-in kann“ bleibt in der Anzeige bei mindestens 12 px (Bildeinheit mal Maßstab; seite_test misst es).
   Die Schritte zeigen nachgezeichnete Bildschirme von Design als Bilddateien (D-073 Punkt 3, bilder/anleitung/, 360 × 240). */
@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 13px/1.2 var(--f-a); letter-spacing:.36em; text-transform:uppercase; color:#E9DCC0; margin-top:6px; }   /* „GOLFTRAINING“ wie auf der Anmeldung der App (IDENTITAET 4, Logo B; Design 14.10.2026); der rote Strich darunter entfällt (43c.1, D-084 Punkt 9) */
.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); }
.hint a { display:inline-flex; align-items:center; min-height:44px; color:var(--night-ink); font-weight:600; text-decoration:underline; text-underline-offset:3px; }   /* „So geht's ›“ springt zur Anleitung, Tippfläche 44 px */

/* Abschnitte */
/* ==== M 43e: zwei Bilder oben (D-108 Punkt 2) ==== */
.schau { display:grid; gap:20px; justify-items:center; padding:28px var(--rand) 0; }
.schau img { display:block; max-width:100%; height:auto; }
/* ==== Ende M 43e ==== */
.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; }
.sec .warum, .sec .vorab { margin:0; font-size:15px; max-width:52ch; } .sec .warum { color:var(--muted); }   /* 43c.1 (D-079 Punkte 1 und 5): unter dem Titel das Warum, dann die zwei Passwörter */

/* 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-grid; grid-auto-flow:column; grid-auto-columns:minmax(0, 1fr); }   /* drei gleich breite und gleich hohe Knöpfe */
.pills button { font:600 15px/1.2 var(--f-a); min-height:44px; padding:4px 8px; border:0; border-radius:9px; background:transparent; color:var(--muted); cursor:pointer; }
.pills button[aria-pressed="true"] { background:var(--ink); color:var(--bg); }
.pills button .g, .pills button .b { display:block; }   /* immer zweizeilig: oben das Gerät, darunter der Browser (Design, Klärung zu D-073, 0de0d4c) */
.pills button .b { font:400 13px/1.2 var(--f-a); color:var(--grey, var(--muted)); }
.pills button[aria-pressed="true"] .b { color:inherit; opacity:.75; }
.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 img { width:100%; height:auto; display:block; border-radius:14px; }
.os-c, .os-a { display:none; }
[data-os="iphone-chrome"] .os-i, [data-os="android"] .os-i { display:none; }
[data-os="iphone-chrome"] .os-c, [data-os="android"] .os-a { display:grid; }
html:not(.js) .os-i, html:not(.js) .os-c, html:not(.js) .os-a { display:grid; }

/* 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); }
  .js .pills { padding:3px; grid-auto-columns:auto; }
  .pills button { padding:4px 18px; }
  .steps { grid-template-columns:repeat(2, minmax(0, 1fr)); }   /* zu zweit: die Karte ist hier nie schmaler als am Handy (Rand bleibt 24 px bis 900 px) */
  .steps > .step.ohne-bild { align-self:start; }   /* 43d (D-098 P32): Schritt 1 ohne Bild in natürlicher Höhe, oben bündig mit Schritt 2, keine leere hohe Karte */
  .steps > .step:last-child:nth-child(odd) { grid-column:1 / -1; grid-template-columns:repeat(2, minmax(0, 1fr)); column-gap:50px; row-gap:6px; align-content:center; align-items:center; }   /* ungerade Zahl: der letzte Schritt doppelt breit, Skizze links, Nummer und Text rechts wie bei „Was Tap-in kann“ (D-043 Nachtrag 14.10.2026); Abstand 50 px = 16 px Spalte + 2 × (16 px Rand + 1 px Linie), so ist das Bild so groß wie darüber und der Text bündig mit der rechten Karte */
  .steps > .step:last-child:nth-child(odd) img { grid-column:1; grid-row:1 / span 2; }
  .steps > .step:last-child:nth-child(odd) .n { grid-column:2; grid-row:1; align-self:end; }
  .steps > .step:last-child:nth-child(odd) p { grid-column:2; grid-row:2; align-self:start; }
  .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)); }
}