:root{
  --paper:#F2EEE3; --card:#FBF9F3; --ink:#14261E; --ink-soft:#4A5C51; --ink-faint:#7C8C81;
  --pine:#1E4635; --fairway:#2E6B4F; --brass:#9C7A28; --brass-soft:#EFE4C6;
  --line:#D8D2C1; --line-strong:#BDB6A1; --flag:#A6402F; --r:14px;
  color-scheme:light;

  /* Seit 9.6: Tiefe statt lauter Flächen. Zwei Schatten übereinander — ein
     harter Millimeter, damit die Karte vom Papier abhebt, und ein weiter
     weicher, der sie trägt. Einzeln sieht beides billig aus. */
  --kante:0 1px 1px rgba(20,38,30,.05);
  --hebung:0 1px 2px rgba(20,38,30,.06), 0 10px 26px -16px rgba(20,38,30,.42);
  --hebung-hoch:0 2px 4px rgba(20,38,30,.07), 0 22px 44px -22px rgba(20,38,30,.5);
  --r-klein:10px; --r-gross:20px;
  /* Der Messingfaden, der dunkle Flächen oben abschließt. */
  --faden:rgba(201,169,79,.30);
}
@media (prefers-color-scheme:dark){
  :root{
    --paper:#101714; --card:#18211C; --ink:#E9E5D8; --ink-soft:#A9B4AC; --ink-faint:#7C8C81;
    --pine:#CFE0D5; --fairway:#6DB58D; --brass:#D9B35F; --brass-soft:#2A2718;
    --line:#27332C; --line-strong:#3A4941; --flag:#E0755F;
    color-scheme:dark;
    --kante:0 1px 1px rgba(0,0,0,.3);
    --hebung:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.8);
    --hebung-hoch:0 2px 6px rgba(0,0,0,.5), 0 22px 44px -22px rgba(0,0,0,.9);
    --faden:rgba(217,179,95,.22);
  }
}
*{box-sizing:border-box}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;padding-bottom:88px;
  /* Ein Hauch Licht von oben. Flächig gleiches Beige wirkt auf dem Handy
     schnell wie unbedrucktes Papier; der Verlauf gibt der Seite eine
     Richtung, ohne dass man ihn bemerkt. */
  background-image:radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 60%);
  background-attachment:fixed;
  /* Lange Adressen (Partnerliste, Fehlermeldungen vom Server) haben die Seite
     bisher um ein paar Pixel aufgeschoben — sichtbar als leichtes Wackeln beim
     Wischen in der Verwaltung. Jetzt brechen sie um. */
  overflow-wrap:break-word;
}
.meldung,.hinweis,.karte a{overflow-wrap:anywhere}
@media (prefers-color-scheme:dark){
  body{background-image:radial-gradient(120% 60% at 50% 0%, rgba(109,181,141,.07) 0%, rgba(0,0,0,0) 60%)}
}
a{color:var(--fairway)}

/* Kopf */
.appbar{
  background:var(--pine);color:#F1EDE1;padding:14px 16px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  position:sticky;top:0;z-index:20;
  /* Der Verlauf nimmt dem Grün das Plakative, der Messingfaden unten schließt
     den Kopf ab, statt ihn hart abzuschneiden. */
  background-image:linear-gradient(170deg,#24513E 0%,#1E4635 55%,#17382A 100%);
  box-shadow:inset 0 -1px 0 var(--faden), 0 10px 24px -20px rgba(10,20,15,.9);
}
@media (prefers-color-scheme:dark){
  .appbar{background:#16241D;background-image:linear-gradient(170deg,#1B2B23 0%,#16241D 100%);
    border-bottom:1px solid var(--line)}
}
.appbar h1{font-family:"Fraunces",Georgia,serif;font-weight:600;font-size:20px;margin:0;color:#F1EDE1;
  letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appbar .sub{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#9FBBA8;margin-top:3px}
.appbar .crest{width:40px;height:40px;border-radius:13px;overflow:hidden;flex:none;
  display:block;text-decoration:none;border:1.5px solid rgba(201,169,79,.55);background:#153B2B;
  box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}
.appbar .crest img{width:100%;height:100%;display:block;object-fit:cover}
.zurueck{color:#F1EDE1;text-decoration:none;background:rgba(241,237,225,.14);width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:17px;flex:none;
  border:1px solid rgba(241,237,225,.12)}
.zurueck:active{background:rgba(241,237,225,.24)}

main{max-width:560px;margin:0 auto;padding:18px 16px 30px;display:flex;flex-direction:column;gap:16px}

/* Bausteine */
.eyebrow{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint);display:flex;align-items:center;gap:8px;margin-bottom:10px}
.eyebrow::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
h2{font-family:"Fraunces",Georgia,serif;font-size:21px;font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
p{margin:0;line-height:1.6;color:var(--ink-soft);font-size:14px}
.karte{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;
  box-shadow:var(--hebung)}
.karte.eng{padding:4px 16px}
.hinweis{font-size:12.5px;color:var(--ink-faint);margin-top:10px;line-height:1.55}

/* Kacheln auf der Mehr-Seite (8.7). Zwei Spalten, damit die Unterzeile
   mitpasst — bei drei Spalten müsste sie weg und „Strafen und Beiträge"
   bräche um. Der Name ist bewusst nicht „kachel" — den gibt es schon für
   die Bildergalerie, und die steht weiter unten im Stylesheet und gewönne. */
.menue{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.menuefeld{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:14px 13px 13px;display:flex;flex-direction:column;gap:9px;
  text-decoration:none;color:inherit;min-height:104px;box-shadow:var(--hebung)}
.menuefeld:active{transform:translateY(1px);box-shadow:var(--kante)}
/* Das Zeichen sitzt seit 9.6 in einem getönten Feld. Frei stehend wirkten die
   dünnen Linien auf der hellen Kachel verloren; das Feld gibt ihnen Halt und
   der Kachel einen Anker oben links. */
.menuefeld svg{width:22px;height:22px;stroke:var(--fairway);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;flex:none;
  padding:8px;box-sizing:content-box;border-radius:12px;
  background:rgba(46,107,79,.09);border:1px solid rgba(46,107,79,.14)}
@media (prefers-color-scheme:dark){
  .menuefeld svg{background:rgba(109,181,141,.12);border-color:rgba(109,181,141,.18)}
}
/* margin-top:auto schiebt Name und Unterzeile an den unteren Rand — dadurch
   stehen sie über alle Kacheln hinweg auf einer Linie, auch wenn ein Name
   umbricht. */
.menuefeld .name{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.25;margin-top:auto;letter-spacing:-.01em}
.menuefeld .unter{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-faint);line-height:1.3}
.menuefeld.warn svg{stroke:var(--flag);background:rgba(166,64,47,.08);border-color:rgba(166,64,47,.16)}
.menuefeld.warn .name{color:var(--flag)}

/* Aufklappbare Listen (8.7). Als <details> gebaut, nicht mit Skript: so geht
   es auch auf, wenn die App ohne Netz aus dem Speicher des Dienstarbeiters
   startet. */
.aufklapp{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--hebung)}
.aufklapp>summary{list-style:none;cursor:pointer;padding:13px 16px;display:flex;
  align-items:center;gap:10px;font-family:ui-monospace,monospace;font-size:10px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ink-faint)}
.aufklapp>summary::-webkit-details-marker{display:none}
.aufklapp>summary .zahl{margin-left:auto;letter-spacing:.1em}
.aufklapp>summary .pfeil{transition:transform .15s;font-size:13px;letter-spacing:0}
.aufklapp[open]>summary{border-bottom:1px solid var(--line);color:var(--ink-soft)}
.aufklapp[open]>summary .pfeil{transform:rotate(90deg)}
.aufklapp .rumpf{padding:4px 16px}
@media (prefers-reduced-motion:reduce){.aufklapp>summary .pfeil{transition:none}}

.till{background:var(--pine);color:#F1EDE1;border-radius:var(--r-gross);padding:20px;
  /* Die Geldkarten sind das Erste, was man sieht. Verlauf, Messingfaden und
     ein getragener Schatten machen aus der Farbfläche einen Gegenstand. */
  background-image:linear-gradient(160deg,#2A5C45 0%,#1E4635 52%,#163528 100%);
  box-shadow:inset 0 1px 0 var(--faden), var(--hebung-hoch);
  position:relative;overflow:hidden}
/* Startseite: Foto vom Heimatplatz als Grund. Der dunkle Verlauf darüber ist
   kein Schmuck — ohne ihn wäre der Poolstand auf dem hellen Himmel nicht mehr
   zu lesen. */
.till.mit-bild{position:relative;overflow:hidden;padding:0;
  background-size:cover;background-position:center 62%;min-height:208px;
  display:flex;align-items:flex-end}
.till.mit-bild::before{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,20,15,.10) 0%,rgba(10,20,15,.52) 45%,rgba(10,20,15,.90) 100%)}
.till-inhalt{position:relative;padding:20px;width:100%}
.till.mit-bild .betrag{text-shadow:0 2px 18px rgba(0,0,0,.6);color:#fff}
.till.mit-bild .label{color:#CFE0D5}
.till.mit-bild .delta{color:#E7CE8E}
@media (prefers-color-scheme:dark){
  .till{background:#16241D;background-image:linear-gradient(160deg,#1C2E25 0%,#16241D 100%);
    border:1px solid var(--line)}
}
.till.rot{background:#7A2E22;background-image:linear-gradient(160deg,#8A3626 0%,#7A2E22 55%,#64241B 100%)}
/* Wenn nichts offen ist, soll da auch kein roter Block stehen: Alarmfarbe für
   „0,00 €" stumpft ab, und wenn wirklich etwas offen ist, fällt es nicht mehr
   auf. Ruhig heißt: dieselbe Karte wie überall. */
.till.ruhig{background:var(--card);background-image:none;color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--hebung)}
.till.ruhig .label{color:var(--ink-faint)}
.till.ruhig .betrag{color:var(--ink)}
.till.ruhig .delta{color:var(--ink-faint)}
@media (prefers-color-scheme:dark){.till.rot{background:#2A1714;background-image:none;border-color:#4A2A22}}
.till .label{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:#9FBBA8}
.till.rot .label{color:#F0BDB0}
.till .betrag{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:38px;font-weight:500;letter-spacing:-1.5px;margin-top:6px;color:#fff;line-height:1.05}
@media (prefers-color-scheme:dark){.till .betrag{color:var(--ink)}}
.till .delta{margin-top:9px;font-size:12.5px;color:#C9A94F}
.till.rot .delta{color:#F0BDB0}

/* Zeilen */
.zeilen{display:flex;flex-direction:column}
/* Gestrichelte Trennlinien wirkten auf dem Handy unruhig — eine Haarlinie, die
   zu den Rändern hin ausläuft, trennt genauso und flimmert nicht. */
.zeile{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:baseline;padding:12px 0;
  border-bottom:1px solid var(--line)}
.zeile:last-child{border-bottom:0}
.zeile a{text-decoration:none;color:inherit}
/* Eine Zeile, die selbst ein Verweis ist (Kasse → Konto), darf nicht
   unterstrichen sein — die Regel darüber greift nur für Verweise *in* der
   Zeile und ging an diesem Fall vorbei. */
a.zeile{text-decoration:none;color:inherit}
a.zeile:active{background:rgba(46,107,79,.05)}
.wer{font-size:14.5px;font-weight:550;color:var(--ink);letter-spacing:-.005em}
.meta{font-size:11.5px;color:var(--ink-faint);margin-top:3px;font-family:ui-monospace,monospace}
.wert{font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:14.5px;font-weight:500;text-align:right;white-space:nowrap}
.plus{color:var(--fairway)} .minus{color:var(--flag)}

/* Die Platzziffer in der Strafen-Tabelle. Die ersten drei bekommen Farbe —
   mehr Rangfolge braucht eine Fünfergruppe nicht. */
.rangblock{display:flex;align-items:center;gap:11px;min-width:0}
/* Mit Platzziffer liegt der Zeilenumbruch anders: der Betrag gehört dann auf
   die Mitte der Ziffer, nicht auf die Grundlinie des Namens. */
.zeile.rangzeile{align-items:center}
.rang{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  font-family:ui-monospace,monospace;font-size:12px;font-variant-numeric:tabular-nums;
  background:var(--paper);border:1px solid var(--line);color:var(--ink-faint)}
.rang.r1{background:linear-gradient(160deg,#D9B869,#B4902F);border-color:transparent;color:#2A2004;font-weight:600}
.rang.r2{background:linear-gradient(160deg,#DCDCD2,#B4B4A8);border-color:transparent;color:#2E2E26;font-weight:600}
.rang.r3{background:linear-gradient(160deg,#D2A77E,#AC7B4F);border-color:transparent;color:#2E1D0E;font-weight:600}

.pill{display:inline-flex;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:4px 9px;border-radius:999px;border:1px solid var(--line-strong);color:var(--ink-faint);white-space:nowrap;background:var(--paper)}
.pill.ok{background:var(--brass-soft);border-color:transparent;color:var(--brass)}
.pill.offen{border-color:transparent;background:rgba(166,64,47,.10);color:var(--flag)}
.pill.bezahlt{border-color:transparent;background:rgba(46,107,79,.10);color:var(--fairway)}
@media (prefers-color-scheme:dark){
  .pill.offen{background:rgba(224,117,95,.14)}
  .pill.bezahlt{background:rgba(109,181,141,.14)}
}

/* Knöpfe */
.knopf{
  appearance:none;cursor:pointer;font-family:inherit;font-size:14.5px;font-weight:600;
  padding:13px 17px;border-radius:12px;border:1px solid var(--pine);
  background:var(--pine);color:#F1EDE1;text-decoration:none;letter-spacing:-.005em;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  background-image:linear-gradient(175deg,#2B5B45 0%,#1E4635 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), var(--hebung);
  transition:transform .08s ease, box-shadow .08s ease;
}
@media (prefers-color-scheme:dark){
  .knopf{background:var(--fairway);background-image:linear-gradient(175deg,#7CC49B,#5BA67E);
    border-color:var(--fairway);color:#0A0F0C}
}
/* Ein Knopf darf niemals wie eine Feldbeschriftung aussehen, auch nicht,
   wenn er als <label> im Formular steckt. */
label.knopf{text-transform:none;letter-spacing:0;font-size:14px;color:#F1EDE1;margin-bottom:0}
.knopf.leer,label.knopf.leer{background:transparent;background-image:none;color:var(--ink);
  border-color:var(--line-strong);box-shadow:var(--kante)}
.knopf.leer:active{background:rgba(46,107,79,.06)}

/* Dateifelder werden nicht auf display:none gesetzt — dann öffnet Safari auf
   dem iPhone die Auswahl nicht. Stattdessen aus dem Blickfeld schieben. */
.versteckt{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.knopf.rot{background:var(--flag);background-image:linear-gradient(175deg,#B84B38,#9A3A2A);border-color:var(--flag);color:#fff}
.knopf.breit{width:100%}
.knopf:active{transform:translateY(1px);box-shadow:inset 0 1px 0 rgba(255,255,255,.10), var(--kante)}
.knopf:disabled{opacity:.4;cursor:default}
.knopfreihe form{display:contents}
.knopfreihe form .knopf{width:100%}
.knopfreihe{display:grid;grid-template-columns:1fr 1fr;gap:8px}

/* Formulare */
label{display:block;font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:6px}
input,select,textarea{
  width:100%;min-width:0;max-width:100%;font-family:inherit;font-size:15px;padding:12px 13px;border-radius:11px;
  border:1px solid var(--line-strong);background:var(--paper);color:var(--ink);
  box-shadow:inset 0 1px 2px rgba(20,38,30,.04);
}
/* Datums- und Zahlenfelder bringen vom Browser eine eigene Mindestbreite mit.
   In der Verwaltung schob die die Seite um 15 px nach rechts — sichtbar nur
   als leichtes Wackeln beim Wischen, aber es ist seit jeher da. */
input[type=date],input[type=number],input[type=time]{min-width:0;max-width:100%}
input:focus,select:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:1px;
  background:var(--card)}
textarea{min-height:150px;line-height:1.6;font-size:14px}
.feld{margin-bottom:14px}
.felder{display:grid;grid-template-columns:1fr 1fr;gap:12px}
input[type=checkbox]{width:auto;margin-right:8px}
input[type=range]{padding:0;border:0;background:transparent;accent-color:var(--fairway)}
code{font-family:ui-monospace,monospace;font-size:12.5px;background:var(--brass-soft);
  padding:2px 6px;border-radius:5px;color:var(--brass)}

/* Spielerblock in der Rundenerfassung */
.spieler{border:1px solid var(--line);border-radius:14px;padding:13px;margin-bottom:10px;
  background:var(--card);box-shadow:var(--hebung)}
.spieler.aus{opacity:.5}
.spieler .kopf{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}
.spieler .kopf strong{font-size:15px}
/* Die Zahl der Spalten haengt am Strafenkatalog und kann sich aendern —
   deshalb auto-fit statt fester Fuenf. */
.werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(54px,1fr));gap:7px;margin-top:11px}
.werte label{font-size:9px;letter-spacing:.08em}
.werte input{padding:9px 6px;text-align:center;font-family:ui-monospace,monospace}
.schalter{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink-faint);font-family:ui-monospace,monospace;text-transform:uppercase;letter-spacing:.08em}

/* Partnerclubs mit freiem Greenfee */
.partnerkarte{border-color:var(--fairway);border-width:1.5px;position:relative;
  padding-top:12px}
.partnerband{display:inline-block;background:var(--fairway);color:#fff;
  font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:4px 10px;border-radius:99px;margin-bottom:11px}

/* Loch-für-Loch-Erfassung */
.umschalter{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:11px 0 2px;
  border:1px solid var(--line-strong);border-radius:10px;overflow:hidden}
.umschalter button{appearance:none;border:0;background:transparent;cursor:pointer;
  font-family:ui-monospace,monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;padding:9px 4px;color:var(--ink-faint)}
.umschalter button.aktiv{background:var(--pine);color:#F1EDE1}
@media (prefers-color-scheme:dark){.umschalter button.aktiv{background:var(--fairway);color:#0A0F0C}}

.lochliste{margin-top:11px}
.lochzeile{display:grid;grid-template-columns:var(--spalten,26px 1fr 1fr 1fr 1fr 1.5fr);gap:5px;
  align-items:center;margin-bottom:5px}
.lochzeile.kopfzeile{margin-bottom:6px}
.lochzeile.kopfzeile span{font-family:ui-monospace,monospace;font-size:9px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-faint);text-align:center}
.lochzeile.kopfzeile span:first-child{text-align:left}
.lochnr{font-family:ui-monospace,monospace;font-size:12px;color:var(--ink-faint);
  text-align:center}
/* Par und Stroke-Index: nur zum Lesen, deshalb bewusst zurückhaltend — sie
   sollen die Eingabefelder daneben nicht überstrahlen. */
.lochwert{font-family:ui-monospace,monospace;font-size:12px;color:var(--ink-faint);
  text-align:center;opacity:.75}
.lochzeile input{padding:8px 2px;min-width:0;text-align:center;font-family:ui-monospace,monospace;
  font-size:14px;border-radius:8px}
.lochsumme{margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);
  font-size:12.5px;color:var(--ink-soft);line-height:1.5}

/* Tabellen */
table.score{width:100%;border-collapse:collapse;font-family:ui-monospace,monospace;font-variant-numeric:tabular-nums;font-size:12.5px}
table.score th{text-align:right;font-weight:500;color:var(--ink-faint);font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:8px 4px;border-bottom:1px solid var(--line)}
table.score th:first-child,table.score td:first-child{text-align:left}
table.score td{padding:9px 4px;text-align:right;border-bottom:1px dashed var(--line)}
table.score tr:last-child td{border-bottom:0}
table.score .best{color:var(--fairway);font-weight:600}
.buchstabe{font-size:9px;color:var(--flag);vertical-align:super;letter-spacing:0}

/* Belege */
.beleg{display:grid;grid-template-columns:auto 1fr auto;gap:11px;align-items:center;padding:11px 0;border-bottom:1px dashed var(--line)}
.beleg:last-child{border-bottom:0}
.beleg img,.beleg .kein{width:42px;height:42px;border-radius:9px;object-fit:cover;border:1px solid var(--line);background:var(--brass-soft);display:grid;place-items:center;color:var(--brass);font-size:16px}

/* Reisen */
.reisekarte{display:block;text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.reisebild{height:168px;background-size:cover;background-position:center;position:relative;
  background-color:var(--pine)}
.reisebild.leer{display:grid;place-items:center;gap:6px;align-content:center;background:var(--pine)}
.reisebild .jahr{position:absolute;left:14px;bottom:12px;
  font-family:"Fraunces",Georgia,serif;font-size:30px;color:#F1EDE1;
  text-shadow:0 2px 14px rgba(0,0,0,.55)}
.reisebild.leer .jahr{position:static;text-shadow:none}
.reisebild .hinweis-bild{font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:#9FBBA8}
.reisetext{padding:15px 16px 16px}
.reisetext h2{margin-bottom:3px}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:12px}
@media (min-width:460px){.galerie{grid-template-columns:repeat(4,1fr)}}
.kachel{padding:0;border:0;background:var(--brass-soft);border-radius:8px;overflow:hidden;
  aspect-ratio:1;cursor:pointer;display:block}
.kachel img{width:100%;height:100%;object-fit:cover;display:block}
.kachel:active{opacity:.7}

.balken{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:8px 0 6px}
.balken_fuellung{height:100%;width:0;background:var(--fairway);transition:width .2s}
.balken_fuellung.zu_teuer{background:var(--flag)}

/* Abstimmung */
.stimmreihe{display:grid;grid-template-columns:1fr 1fr 1fr;gap:7px;margin-top:14px}
.stimme{width:100%;appearance:none;cursor:pointer;font-family:inherit;font-size:13px;
  font-weight:500;padding:10px 4px;border-radius:10px;border:1px solid var(--line-strong);
  background:transparent;color:var(--ink-soft);display:flex;align-items:center;
  justify-content:center;gap:6px}
.stimme span{font-family:ui-monospace,monospace;font-size:11px;color:var(--ink-faint)}
.stimme.gewaehlt{border-color:transparent;color:#fff}
.stimme.ja.gewaehlt{background:var(--fairway)}
.stimme.vielleicht.gewaehlt{background:var(--brass)}
.stimme.nein.gewaehlt{background:var(--flag)}
.stimme.gewaehlt span{color:rgba(255,255,255,.75)}

/* Lichtkasten */
#lichtkasten{position:fixed;inset:0;z-index:60;background:rgba(10,15,12,.96);
  display:grid;place-items:center;padding:16px}
/* Muss sein: die Regel oben trägt eine #-Kennung und sticht damit das
   eingebaute [hidden] aus — ohne diese Zeile liegt der Lichtkasten dauerhaft
   über der Seite. Gleiches gilt für alles andere, was per hidden verschwindet. */
[hidden]{display:none !important}
#lichtkasten img{max-width:100%;max-height:78vh;border-radius:10px;display:block}
.lk_zu{position:absolute;top:calc(12px + env(safe-area-inset-top));right:14px;z-index:2;
  width:40px;height:40px;border-radius:50%;border:0;background:rgba(241,237,225,.15);
  color:#F1EDE1;font-size:19px;cursor:pointer}
.lk_pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:60px;border:0;background:transparent;color:#F1EDE1;font-size:38px;
  cursor:pointer;opacity:.75}
.lk_pfeil.links{left:2px} .lk_pfeil.rechts{right:2px}
.lk_fuss{position:absolute;left:0;right:0;bottom:calc(14px + env(safe-area-inset-bottom));
  display:flex;gap:14px;align-items:center;justify-content:center;flex-wrap:wrap;
  font-family:ui-monospace,monospace;font-size:11.5px;letter-spacing:.06em;color:#9FBBA8}
.lk_form{display:inline}
.lk_knopf{background:transparent;border:1px solid rgba(241,237,225,.3);color:#F1EDE1;
  font-family:inherit;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  padding:7px 12px;border-radius:99px;cursor:pointer}

/* Meldungen */
.meldung{border-radius:11px;padding:12px 14px;font-size:14px;border:1px solid}
.meldung.gut{background:var(--brass-soft);border-color:transparent;color:var(--brass)}
.meldung.fehler{background:transparent;border-color:var(--flag);color:var(--flag)}

/* Chat */
/* Genug Platz unter dem Verlauf, dass die letzte Blase nicht unter der
   Schreibzeile verschwindet: Leiste 71 + Schreibzeile 60 + Luft. */
body.chat-seite{padding-bottom:140px}
.verlauf{display:flex;flex-direction:column;gap:3px}
.tagtrenner{align-self:center;margin:14px 0 8px;font-family:ui-monospace,monospace;
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
  background:var(--card);border:1px solid var(--line);padding:4px 12px;border-radius:99px}
/* Wischen und langes Halten brauchen die Blase für sich: Ohne das Folgende
   fährt beim Halten die Textauswahl des Systems hoch und die Geste ist weg.
   Der Preis: Man kann den Text nicht mehr mit dem Finger markieren — bei
   WhatsApp ist es genauso. */
.blase{align-self:flex-start;max-width:82%;background:var(--card);
  border:1px solid var(--line);border-radius:17px 17px 17px 5px;padding:9px 12px 6px;
  position:relative;-webkit-touch-callout:none;-webkit-user-select:none;
  user-select:none;box-shadow:var(--kante)}
.blase.leuchtet{animation:aufleuchten 1.4s ease-out}
@keyframes aufleuchten{
  0%,60%{box-shadow:0 0 0 3px var(--brass)}
  100%{box-shadow:0 0 0 3px transparent}
}
@media (prefers-reduced-motion:reduce){.blase.leuchtet{animation:none;box-shadow:0 0 0 3px var(--brass)}}

/* Der Pfeil beim Wischen. Er sitzt links neben der Blase und wird über die
   Eigenschaft --pfeil eingeblendet, die das Skript beim Ziehen hochzählt. */
.wischpfeil{position:absolute;left:-30px;top:50%;transform:translateY(-50%);
  font-size:17px;color:var(--fairway);opacity:var(--pfeil,0);pointer-events:none}
.blase.meins .wischpfeil{left:-30px}

/* Zitat der Nachricht, auf die geantwortet wird */
.blase_antwort{border-left:3px solid var(--fairway);border-radius:0 7px 7px 0;
  background:rgba(46,107,79,.09);padding:4px 9px;margin:0 0 6px;cursor:pointer}
@media (prefers-color-scheme:dark){.blase_antwort{background:rgba(109,181,141,.13)}}
.blase_antwort .wer{font-size:11.5px;font-weight:600;color:var(--fairway)}
.blase_antwort .was{font-size:13px;color:var(--ink-faint);line-height:1.35;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* Die Zeichen unter der Nachricht */
.blase_reaktionen{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.reaktion{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:4px;
  background:var(--paper);border:1px solid var(--line);border-radius:99px;
  padding:2px 8px;line-height:1.5}
.reaktion .zeichen{font-size:14px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.reaktion .anzahl{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--ink-faint)}
.reaktion .anzahl:empty{display:none}
.reaktion.meins{border-color:var(--fairway);background:var(--brass-soft)}
.reaktion:active{transform:translateY(1px)}

/* Die Leiste beim langen Antippen */
.reaktionsleiste{position:fixed;z-index:50;display:flex;gap:2px;padding:5px 7px;
  background:var(--card);border:1px solid var(--line);border-radius:99px;
  box-shadow:0 8px 26px rgba(10,20,15,.24)}
@media (prefers-color-scheme:dark){.reaktionsleiste{box-shadow:0 8px 26px rgba(0,0,0,.55)}}
.reaktionsleiste button{appearance:none;border:0;background:transparent;cursor:pointer;
  font-size:27px;line-height:1;padding:4px 5px;border-radius:50%;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.reaktionsleiste button:active{background:var(--brass-soft)}
.reaktionsleiste button:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.blase.meins{align-self:flex-end;background:var(--brass-soft);border-color:transparent;
  border-radius:17px 17px 5px 17px;
  background-image:linear-gradient(160deg,#F4EBD2,#EADEBD)}
@media (prefers-color-scheme:dark){.blase.meins{background-image:none}}
.blase + .blase{margin-top:2px}
/* Schriftgrößen im Chat, seit 8.7 größer: 17 statt 15 Pixel. Auf dem Platz
   liest man im Stehen und bei Sonne — da zählt jeder Punkt. */
.blase_von{font-size:12.5px;font-weight:600;color:var(--fairway);margin-bottom:3px}
.blase_text{font-size:17px;line-height:1.5;white-space:pre-wrap;word-break:break-word;
  color:var(--ink)}
.blase.meins .blase_text{color:#4A3A10}
@media (prefers-color-scheme:dark){.blase.meins .blase_text{color:var(--ink)}}
.blase_bild{max-width:100%;width:220px;border-radius:10px;display:block;
  margin:-2px 0 6px;cursor:pointer}
.blase_zeit{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--ink-faint);
  text-align:right;margin-top:2px}

/* Seit 9.1 eine Spalte: Antwortkasten, Bildvorschau, Eingabereihe. Vorher
   schwebten die ersten beiden frei darüber und mussten mit festen Abständen
   ausgerechnet werden. */
.schreibzeile{position:fixed;left:0;right:0;bottom:calc(74px + env(safe-area-inset-bottom));
  z-index:31;display:flex;flex-direction:column;gap:7px;padding:8px 10px;
  background:var(--paper);border-top:1px solid var(--line);
  max-width:560px;margin:0 auto}
.eingabereihe{display:flex;gap:8px;align-items:flex-end}
/* Kamera oder Galerie (9.2). Sitzt in der Spalte über der Eingabereihe, also
   ohne jede Positionsrechnerei. */
.anhangwahl{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* „PDF anhängen" steht unter den beiden Fotoknöpfen über die ganze Breite —
   zu dritt nebeneinander bräche die Beschriftung auf einem schmalen Handy. */
.anhangwahl .breit{grid-column:1 / -1}
.anhangwahl .knopf{font-size:13px;padding:11px 6px}
.antwortkasten{display:flex;align-items:center;gap:10px;padding:6px 10px;
  background:var(--card);border:1px solid var(--line);
  border-left:3px solid var(--fairway);border-radius:5px 11px 11px 5px}
.antwortkasten .antwort_inhalt{flex:1;min-width:0}
.antwortkasten .wer{font-size:11.5px;font-weight:600;color:var(--fairway)}
.antwortkasten .was{font-size:13px;color:var(--ink-faint);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.antwortkasten button{background:none;border:0;font-size:16px;color:var(--ink-faint);
  cursor:pointer;padding:4px 2px}
.schreibzeile textarea{flex:1;min-height:44px;max-height:124px;resize:none;
  border-radius:22px;padding:11px 15px;font-size:17px;line-height:1.35}
.schreibzeile .anhang,.schreibzeile .senden{width:42px;height:42px;flex:none;
  border-radius:50%;border:1px solid var(--line-strong);background:var(--card);
  display:grid;place-items:center;cursor:pointer;padding:0}
.schreibzeile .senden{background:var(--pine);border-color:var(--pine)}
.schreibzeile svg{width:20px;height:20px;stroke:var(--ink);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.schreibzeile .senden svg{stroke:none;fill:#F1EDE1}
.schreibzeile button:disabled{opacity:.5}
/* Sitzt seit 9.1 in der Schreibzeile statt darüber zu schweben. */
.anhang_vorschau{display:flex;align-items:center;gap:10px;
  padding:8px 12px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;font-size:12.5px;color:var(--ink-faint)}
.anhang_vorschau img{width:34px;height:34px;border-radius:7px;object-fit:cover}
.anhang_vorschau span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anhang_vorschau button{background:none;border:0;font-size:16px;color:var(--ink-faint);cursor:pointer}

/* Angehängte PDF (9.8). In der Blase eine Zeile zum Antippen statt einer
   Vorschau — ein PDF liest man im Betrachter des Handys, nicht im Chat. */
.dateizeichen{flex:none;width:34px;height:34px;border-radius:8px;display:grid;
  place-items:center;background:rgba(166,64,47,.10);color:var(--flag);
  font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.04em;
  font-weight:600}
.anhang_vorschau .dateizeichen{flex:none}
@media (prefers-color-scheme:dark){.dateizeichen{background:rgba(224,117,95,.14)}}
.blase_datei{display:flex;align-items:center;gap:10px;margin:2px 0 6px;
  padding:8px 10px;border-radius:11px;text-decoration:none;color:inherit;
  background:var(--paper);border:1px solid var(--line)}
.blase.meins .blase_datei{background:rgba(255,255,255,.45);border-color:transparent}
@media (prefers-color-scheme:dark){
  .blase.meins .blase_datei{background:rgba(255,255,255,.06)}
}
.blase_datei:active{opacity:.75}
.dateitext{min-width:0;display:flex;flex-direction:column;gap:1px}
.dateiname{font-size:14px;font-weight:550;color:var(--ink);overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.dateigroesse{font-family:ui-monospace,monospace;font-size:10.5px;color:var(--ink-faint)}
/* Hinweis in der Blase, wenn der Anhang nach sieben Monaten entfernt wurde. */
.blase_weg{display:flex;align-items:center;gap:7px;margin:2px 0 6px;padding:7px 10px;
  border-radius:11px;border:1px dashed var(--line-strong);
  font-size:12.5px;color:var(--ink-faint);font-style:italic}
.blase_weg::before{content:"⌛";font-style:normal;font-size:13px}

/* Emoji-Feld (8.8). Schwebt über der Schreibzeile; wie hoch genau, rechnet
   das Skript aus — die Schreibzeile wächst ja mit dem Text. */
.emojifeld{position:fixed;left:0;right:0;z-index:32;max-width:560px;margin:0 auto;
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 28px rgba(10,20,15,.18);overflow:hidden}
@media (prefers-color-scheme:dark){.emojifeld{box-shadow:0 8px 28px rgba(0,0,0,.5)}}
.emojiliste{max-height:38vh;overflow-y:auto;padding:0 6px 8px;
  -webkit-overflow-scrolling:touch}
.emojigruppe{font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);padding:10px 6px 4px}
.emojireihe{display:grid;grid-template-columns:repeat(auto-fill,minmax(42px,1fr))}
/* Die Schnellreihe sitzt fest oben und scrollt nicht mit weg. */
.emojireihe.schnell{border-bottom:1px solid var(--line);padding:6px;
  grid-template-columns:repeat(5,1fr);background:var(--brass-soft)}
.emoji{appearance:none;border:0;background:transparent;cursor:pointer;padding:6px 0;
  border-radius:9px;line-height:1;font-size:23px;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif}
.emoji.gross{font-size:29px;padding:7px 0}
.emoji:active{background:var(--line)}
.emoji:focus-visible{outline:2px solid var(--brass);outline-offset:-2px}
.schreibzeile .anhang.an{background:var(--brass-soft);border-color:var(--brass)}

#bildkasten{position:fixed;inset:0;z-index:60;background:rgba(10,15,12,.96);
  display:grid;place-items:center;padding:16px}
#bildkasten img{max-width:100%;max-height:88vh;border-radius:10px}

/* Fußleiste — seit 8.7 fünf Reiter statt sechs. Der gewonnene Platz geht in
   Symbol und Beschriftung: 24 statt 20 Pixel, 10 statt 8,5. */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  display:grid;grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb, var(--card) 86%, transparent);
  border-top:1px solid var(--line);
  padding:7px 4px calc(9px + env(safe-area-inset-bottom));
  /* Durchscheinend mit Unschärfe: Der Inhalt, der darunter wegläuft, bleibt
     geahnt und die Leiste klebt nicht als Brett am unteren Rand. Wo es die
     Unschärfe nicht gibt, greift die Deckfarbe unten. */
  backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:0 -10px 30px -24px rgba(20,38,30,.8);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  .tabbar{background:var(--card)}
}
.tabbar a{
  display:flex;flex-direction:column;align-items:center;gap:5px;padding:7px 1px;
  color:var(--ink-faint);text-decoration:none;position:relative;isolation:isolate;
  font-family:ui-monospace,monospace;font-size:10px;letter-spacing:.04em;text-transform:uppercase;
}
.tabbar a.aktiv{color:var(--fairway)}
/* Der aktive Reiter bekommt ein getöntes Feld hinter dem Zeichen. Nur die
   Farbe zu wechseln war auf dem Platz bei Sonne kaum zu sehen. */
.tabbar a.aktiv::before{content:"";position:absolute;top:2px;left:50%;transform:translateX(-50%);
  width:46px;height:30px;border-radius:11px;background:rgba(46,107,79,.11);z-index:-1}
@media (prefers-color-scheme:dark){.tabbar a.aktiv::before{background:rgba(109,181,141,.14)}}
.tabbar svg{width:24px;height:24px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;position:relative}
.tabbar a span{position:relative}

/* Der rote Punkt am Chat-Reiter */
.mit_punkt{position:relative;display:block;line-height:0}
.punkt{position:absolute;top:-5px;right:-9px;min-width:16px;height:16px;padding:0 4px;
  border-radius:99px;background:var(--flag);color:#fff;
  font-family:ui-monospace,monospace;font-size:9.5px;line-height:16px;text-align:center;
  border:1.5px solid var(--card)}

/* Login */
body.login-seite{display:grid;place-items:center;min-height:100vh;padding:24px;background:var(--pine)}
@media (prefers-color-scheme:dark){body.login-seite{background:#0F1814}}
.login-box{width:100%;max-width:360px;color:#F1EDE1}
.login-box h1{font-family:"Fraunces",Georgia,serif;font-size:32px;margin:18px 0 8px;line-height:1.05}
.login-box p{color:#9FBBA8}
.login-box label{color:#9FBBA8}
.login-box input{background:rgba(241,237,225,.08);border-color:rgba(241,237,225,.25);color:#F1EDE1}
.login-box .knopf{background:#C9A94F;border-color:#C9A94F;color:#14261E}
.login-logo{width:88px;height:88px;border-radius:22px;display:block;
  border:1.5px solid rgba(201,169,79,.5)}

/* Birdie Book (8.9) */
.buchkopf{display:flex;align-items:center;gap:14px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.teepunkt{display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:7px;border:1px solid var(--line-strong);vertical-align:baseline}
.teepunkt.weiss{background:#FBFAF6} .teepunkt.gelb{background:#E8C33B;border-color:transparent}
.teepunkt.blau{background:#2C6FB5;border-color:transparent}
.teepunkt.rot{background:#B33A2B;border-color:transparent}

/* Drei Spalten: Die Zeichnungen sind hochkant und schmal — bei zwei Spalten
   ständen sie riesig und man scrollte ewig. */
.bahnen{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
@media (min-width:460px){.bahnen{grid-template-columns:repeat(4,1fr)}}
.bahnkachel{display:block;text-decoration:none;color:inherit;background:var(--card);
  border:1px solid var(--line);border-radius:11px;overflow:hidden}
.bahnkachel:active{opacity:.7}
/* `contain`, nicht `cover`: Die Zeichnungen tragen ihre Bahnennummer selbst,
   und die sitzt bei jeder woanders. Beim Zuschneiden war sie mal halb weg. */
.bahnbild{position:relative;aspect-ratio:62/100;background:#F7F4EA;
  display:grid;place-items:center;overflow:hidden}
@media (prefers-color-scheme:dark){.bahnbild{background:#1E2721}}
.bahnbild img{width:100%;height:100%;object-fit:contain;display:block}
.bahnbild .fehlt{font-family:ui-monospace,monospace;font-size:9px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brass);text-align:center;padding:0 6px}
.bahnfuss{padding:7px 8px 8px;border-top:1px solid var(--line)}
.bahnfuss .wer{font-size:12px}
.bahnfuss .meta{font-size:9.5px;display:block}

.bahnnotizen{margin:0;padding-left:18px;font-size:14px;line-height:1.7;color:var(--ink-soft)}
.bahnnotizen li::marker{color:var(--fairway)}

/* Die ganze Bahn auf der Einzelseite */
.bahnschau{display:block;width:100%;padding:0;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;background:var(--card);cursor:pointer;
  position:relative}
.bahnschau img{width:100%;display:block}
.bahnschau .lupe{position:absolute;right:10px;bottom:10px;
  font-family:ui-monospace,monospace;font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:#F1EDE1;background:rgba(10,20,15,.6);
  padding:5px 10px;border-radius:99px}
#bahnkasten{position:fixed;inset:0;z-index:60;background:rgba(10,15,12,.97);
  overflow:auto;padding:0;-webkit-overflow-scrolling:touch}
#bahnkasten img{width:100%;display:block;margin:0 auto;max-width:900px}

/* Clublogos */
.clublogo{width:46px;height:46px;border-radius:50%;object-fit:contain;flex:none;
  background:#fff;border:1px solid var(--line)}
.clublogo.gross{width:74px;height:74px}
/* In der Platzsuche steht das Logo neben dem Namen und darf die Zeile nicht
   auseinanderziehen — daher kleiner und mit etwas Luft innen, damit breite
   Schriftzuglogos im runden Feld nicht an den Rand stoßen. */
.clublogo.klein{width:44px;height:44px;padding:2px}