/* WAS `hidden` TRÄGT, IST VERBORGEN (06.11.2026, `eine-waffe-ist-eine-zeile-im-schiessbuch-des-termins`) — wie in Mercofina
   (frontend/css/style.css). Ohne diese Zeile schlägt jedes `display:` einer Klasse das Attribut: Die Reserve-Waffe stand so
   seit 29.10.2026 sichtbar im Schießbuch. Die einzelnen `…[hidden]`-Regeln weiter unten waren Pflaster für dieselbe Falle. */
[hidden]{display:none !important}

/* ==========================================================================
   Mercofina-Shop — Dark/Green-Design (Logo, Farbe und Bilder je Shop aus dem Aussehen).
   Design-Tokens 1:1 aus dem freigegebenen Alt-Shop-Design (JTL NOVAChild,
   themes/my-nova/custom.css) + freigegebenem Mockup (14.07.2026).
   ========================================================================== */
:root{
  --bg:#0f1115; --card:#162019; --card-border:rgba(34,197,94,.3);
  --accent:#22c55e; --accent-hell:#86efac; --accent-hover:#1eb254;
  --input:#15231a; --input-focus:#1a2c20;
  --text:#d1d5db; --light:#f1f5f9; --muted:#9ca3af; --btn-text:#0a0f0c;
  --rot:#dc2626; --gelb:#eab308; --blau:#3b82f6; --amber:#f59e0b;
}
*{box-sizing:border-box}
html{color-scheme:dark}
/* Die Laufleiste der Seite gehört dem `html`, nicht dem `body` — im hellen Stil stand sie sonst schwarz neben der hellen
   Seite (23.10.2026, Befund 147: „Brauchen wir eine Scroll Leiste wirklich“). */
html:has(>body.hell){color-scheme:light}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.5;
  font-family:"Segoe UI",system-ui,-apple-system,Arial,sans-serif;
  /* Nichts darf die Seite horizontal aufziehen (mobil: kein Leerraum rechts) */
  overflow-x:hidden}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--accent-hell)}
img,svg{max-width:100%}
button{font:inherit;cursor:pointer}
h1,h2,h3{color:var(--light);text-wrap:balance}
/* Durchgang 22: aus dem BILD genommen, nicht aus dem BAUM. Kein display:none
   und kein visibility:hidden — beide naehmen das Element auch der
   Vorlesestimme weg. Wortgleich mit der Fassung im Mercofina-Stylesheet. */
.nur-vorlesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
hr{border:0;border-top:1px solid rgba(34,197,94,.2)}
.dezent{color:var(--muted)}
.klein{font-size:12px}

/* ---------- Topbar + Kopf ---------- */
.topbar{display:flex;justify-content:flex-end;gap:18px;max-width:1200px;
  margin:0 auto;padding:8px 16px 0;font-size:13px}
.topbar a{color:var(--text)}
.topbar .trenner{color:#374151}
/* Die Kopfzeile ist ein RASTER, kein Flexbox-Zufall (28.08.2026).
   Befund Michael, unmittelbar nach dem siebten Reiter: „Der Umbau hat den
   Warenkorb runter gehauen." Genau so war es — Konto und Warenkorb standen
   auf JEDER Desktop-Breite in der zweiten Zeile, links neben der Suche.
   Mit Flexbox entschied die Zeilenaufteilung sich danach, wie breit die
   Navigation gerade ist; ein Kategoriename mehr, und die Icons flogen raus.
   (flex-shrink hilft dabei nicht: Flexbox bricht anhand der UNGESCHRUMPFTEN
   Größe um und schrumpft erst danach innerhalb der Zeile.)
   Jetzt sind die Plätze fest vergeben — Logo links, Navigation in der Mitte,
   Konto/Warenkorb rechts, Suche darunter. Was auch immer an Kategorien
   dazukommt: der Warenkorb bleibt, wo er ist. */
.kopf{max-width:1200px;margin:0 auto;padding:10px 16px 0;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"logo nav icons" "suche suche suche";
  align-items:center;column-gap:14px;row-gap:0}
/* Das Logo darf NIE mitschrumpfen (früher quetschte Flexbox das Bild oval);
   im Raster ist das ohnehin gesichert -- die Spalte ist `auto`. */
.logo{grid-area:logo;display:flex;align-items:center;gap:10px;color:var(--light);font-weight:700;
  letter-spacing:.14em;font-size:14px;white-space:nowrap}
.logo:hover{color:var(--light)}
/* Das Logo zeigt sich, wie es hochgeladen ist (18.10.2026) — vorher färbte ein Filter JEDES Logo weiß; Live trägt das
   jetzt als eigenes CSS im Aussehen, ein anderer Betrieb behält seine Farben. */
.logo img{height:44px;width:auto}

/* Die Navigation ist das nachgebende Element: Sie sitzt in der einzigen
   flexiblen Rasterspalte (minmax(0,1fr)) und bricht bei Platzmangel INTERN
   um, statt Logo oder Warenkorb zu verdrängen. */
.hauptnav{grid-area:nav;display:flex;gap:2px;min-width:0;flex-wrap:wrap}
.nav-item{position:relative}
.nav-item>a{display:block;padding:14px 9px;color:var(--light);font-size:14px;
  font-weight:500;border-bottom:3px solid transparent}
.nav-item>a .pfeil{font-size:10px;color:var(--muted);margin-left:4px}
.nav-item>a:hover{color:var(--accent-hell)}
.nav-item.aktiv>a{border-bottom-color:var(--accent)}
.nav-menu{display:none;position:absolute;top:100%;left:0;min-width:220px;z-index:40;
  background:var(--card);border:1px solid var(--card-border);border-radius:.5rem;
  padding:8px 0;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.nav-item:hover .nav-menu,.nav-item:focus-within .nav-menu,.nav-item.offen .nav-menu{display:block}
.nav-menu a{display:block;padding:8px 16px;color:var(--text);font-size:14px}
.nav-menu a:hover{background:rgba(34,197,94,.1);color:var(--accent-hell)}
/* Volle eigene Zeile unter Logo/Nav (Befund Michael 18.07.2026: das
   eingequetschte Mini-Feld neben der Nav war unbenutzbar) — zentriert,
   großzügig breit; unter 900px übernimmt der Mobil-Block unverändert. */
.suche{grid-area:suche;display:flex;min-width:0;max-width:640px;margin:8px auto 0}
.suche input{width:100%;min-width:0;padding:8px 12px;background:var(--input);color:var(--light);
  border:1px solid var(--card-border);border-radius:.375rem 0 0 .375rem;font-size:14px}
.suche input:focus{background:var(--input-focus);border-color:var(--accent);
  box-shadow:0 0 8px rgba(34,197,94,.4);outline:none}
.suche input::placeholder{color:#6b7280}
.suche button{padding:8px 13px;border:1px solid var(--card-border);border-left:0;
  background:#26303a;color:var(--light);border-radius:0 .375rem .375rem 0}
.suche button:hover{background:#31404d}
.kopf-icons{grid-area:icons;display:flex;align-items:center;gap:16px;font-size:14px}
.kopf-icons a{color:var(--light);display:flex;align-items:center;gap:6px;white-space:nowrap}
.kopf-icons a:hover{color:var(--accent-hell)}
.wk-badge{background:var(--accent);color:var(--btn-text);border-radius:9px;font-size:11px;
  font-weight:700;padding:0 6px;position:relative;top:-9px;left:-10px;margin-right:-12px}

/* ---------- Grundraster ---------- */
.inhalt{max-width:1200px;margin:0 auto;padding:18px 16px 40px;min-height:55vh}
.brotkrumen{font-size:13px;margin:4px 0 18px;color:var(--muted)}
.brotkrumen a{color:var(--accent)}
.brotkrumen .aktuell{color:var(--light)}
.brotkrumen .zurueck{margin-right:10px}
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(225px,1fr));gap:14px}
.reihe-wrap{position:relative}
.reihe{display:grid;grid-auto-flow:column;grid-auto-columns:225px;gap:14px;
  overflow-x:auto;padding:4px 2px 10px;scroll-snap-type:x mandatory;scrollbar-width:none}
.reihe::-webkit-scrollbar{display:none}
.reihe>*{scroll-snap-align:start}
.reihe-pfeil{position:absolute;top:50%;transform:translateY(-50%);z-index:5;
  width:44px;height:44px;border-radius:50%;border:1px solid var(--card-border);
  background:rgba(22,32,25,.82);backdrop-filter:blur(4px);color:var(--text);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.5);
  transition:border-color .2s,color .2s,box-shadow .2s,transform .15s}
.reihe-pfeil:hover{border-color:var(--accent);color:var(--accent);
  box-shadow:0 0 14px rgba(34,197,94,.35);transform:translateY(-50%) scale(1.06)}
.reihe-pfeil.links{left:-16px}
.reihe-pfeil.rechts{right:-16px}
.reihe-pfeil[hidden]{display:none}
@media (max-width:900px){.reihe-pfeil.links{left:-4px}.reihe-pfeil.rechts{right:-4px}}
/* Am Handy wischt man die Reihe; die Pfeile lagen dort über den Karten (Mobil-Messung 23.10.2026). */
@media (hover:none){.reihe-pfeil{display:none}}
.abschnitt-titel{text-align:center;font-size:20px;font-weight:600;margin:34px 0 16px}
h1{font-size:22px;margin:0 0 14px}
h2{font-size:17px;margin:22px 0 10px}

/* ---------- Produktkachel ---------- */
.kachel{background:var(--card);border:1px solid var(--card-border);border-radius:.75rem;
  padding:9px;display:flex;flex-direction:column;position:relative;color:var(--text);
  transition:border-color .2s,box-shadow .2s}
.kachel:hover{border-color:var(--accent);box-shadow:0 0 14px rgba(34,197,94,.25)}
.kachel-link{display:flex;flex-direction:column;flex:1;color:inherit}
.kachel-link:hover{color:inherit}
.kachel-bild{background:#fff;border-radius:.5rem;aspect-ratio:1/1;display:flex;
  align-items:center;justify-content:center;padding:14px;overflow:hidden}
.kachel-bild img{max-height:100%;object-fit:contain}
.kein-bild{color:#6b7280;font-size:13px}
.lager-badge{position:absolute;top:16px;left:0;font-size:12px;font-weight:700;
  letter-spacing:.05em;padding:3px 10px;border-radius:0 .25rem .25rem 0;z-index:2}
.lager-badge.auf{background:var(--accent);color:var(--btn-text)}
.lager-badge.warte{background:var(--amber);color:var(--btn-text)}
.lager-badge.aus{background:#fecaca;color:#7f1d1d;font-weight:600} /* helles Rot statt Alarm (Michael 08.09.2026) */
.kachel-name{text-align:center;margin:10px 4px 6px;font-size:13.5px;line-height:1.32;
  color:var(--light);text-decoration:underline;
  text-decoration-color:rgba(241,245,249,.35);text-underline-offset:2px;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;
  overflow:hidden;min-height:3.9em}
.kachel:hover .kachel-name{color:var(--accent-hell)}
.kachel-preis{text-align:center;color:var(--accent);font-weight:700;font-size:15.5px;
  margin:auto 0 10px;font-variant-numeric:tabular-nums}
.kachel form{margin:0}

/* ---------- Buttons ---------- */
.btn{display:block;width:100%;text-align:center;background:var(--accent);
  color:var(--btn-text);border:0;border-radius:.5rem;padding:9px 14px;
  font-weight:600;font-size:14px}
.btn:hover{background:var(--accent-hover);color:var(--btn-text)}
.btn.schmal{display:inline-block;width:auto;padding:9px 20px}
.btn.zweit{background:transparent;color:var(--text);
  border:1px solid var(--card-border)}
.btn.zweit:hover{background:rgba(34,197,94,.12);
  color:var(--light);border-color:var(--accent)}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:2px solid var(--accent);outline-offset:2px}

/* ---------- Startseite: Banner ---------- */
.intro{max-width:760px;margin:16px auto 26px;text-align:center;font-size:14.5px}
.banner{background:var(--card);border:1px solid var(--card-border);border-radius:.75rem;
  padding:22px;display:flex;gap:24px;align-items:center;margin:22px 0}
.banner-bild{flex:0 0 190px}
.banner-bild img{border-radius:.5rem;display:block}
.banner-text{flex:1}
.banner h2{margin:0 0 6px;font-size:17px;color:var(--accent)}
.banner .oberzeile{font-size:13.5px;color:var(--light);font-weight:600;margin-bottom:2px}
.banner p{margin:8px 0;font-size:13.5px}
.banner-hinweis{border:1px solid var(--accent);border-radius:.5rem;padding:12px 16px;
  display:flex;gap:28px;flex-wrap:wrap;font-size:13.5px;margin:12px 0}
.banner-hinweis b{color:var(--accent)}
.banner-buttons{display:flex;gap:12px;margin-top:12px;flex-wrap:wrap}
.banner-buttons .btn{width:auto;padding:9px 18px}

/* ---------- Kategorieseite: Filter + Toolbar ---------- */
.kat-layout{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
.filter{border-right:1px solid rgba(34,197,94,.15);padding-right:20px}
.filter details{border-bottom:1px solid rgba(34,197,94,.2);padding:4px 0}
.filter summary{list-style:none;display:flex;justify-content:space-between;
  align-items:center;padding:10px 2px;color:var(--accent);font-size:14px;cursor:pointer}
.filter summary::-webkit-details-marker{display:none}
.filter summary::after{content:"⌄";color:var(--muted);font-size:13px;transition:transform .15s}
.filter details[open] summary::after{transform:rotate(180deg)}
.filter label{display:flex;align-items:center;gap:8px;padding:4px 2px;
  font-size:13.5px;color:var(--text)}
.filter label .anz{color:var(--muted);margin-left:auto;font-size:12px}
.filter input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px}
/* Feld und „EUR“ gehören zusammen (07.11.2026): Mit Umbruch stand das „EUR“ der ersten Zeile allein unter seinem Feld. Zwei Paare,
   je Feld und Einheit; die Felder nehmen, was die Spalte hergibt. */
.preis-felder{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto;gap:6px;align-items:center;padding:8px 2px 10px}
.preis-felder input{width:100%;min-width:0;padding:5px 8px;background:var(--input);color:var(--light);
  border:1px solid var(--card-border);border-radius:.375rem;font-size:13px}
.preis-felder .einheit{background:#26303a;border:1px solid var(--card-border);
  border-radius:.375rem;font-size:12px;padding:5px 8px;color:var(--light)}
.filter-buttons{display:flex;gap:8px;margin-top:14px}
.filter-buttons .btn{padding:7px 10px;font-size:13px}
.kat-kopf{display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.kat-kopf h1{font-size:22px;margin:0 24px 0 0;color:var(--muted);font-weight:600}
.kat-kopf select{background:var(--card);border:1px solid var(--card-border);
  color:var(--light);border-radius:.5rem;padding:8px 12px;font-size:13.5px}
.treffer{margin-left:auto;font-size:13px;color:var(--muted)}
.blaettern{display:flex;gap:6px;margin-top:20px;justify-content:center;flex-wrap:wrap}
.blaettern a,.blaettern strong{min-width:34px;text-align:center;padding:6px 8px;
  border:1px solid var(--card-border);border-radius:.375rem;color:var(--text);font-size:13.5px}
.blaettern a:hover{border-color:var(--accent);color:var(--accent-hell)}
.blaettern strong{background:var(--accent);color:var(--btn-text);border-color:var(--accent)}

/* ---------- Artikeldetail ---------- */
.detail-layout{display:grid;grid-template-columns:minmax(320px,1fr) minmax(320px,480px);
  gap:30px;align-items:start}
.galerie{background:var(--card);border:1px solid var(--card-border);
  border-radius:.75rem;padding:18px}
.galerie-haupt{background:#fff;border-radius:.5rem;aspect-ratio:1/1;display:flex;
  align-items:center;justify-content:center;padding:26px}
.galerie-haupt img{max-height:100%;object-fit:contain}
.galerie-thumbs{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.galerie-thumbs button{width:72px;height:72px;background:#fff;border-radius:.375rem;
  padding:6px;border:2px solid transparent;display:flex;align-items:center;justify-content:center}
.galerie-thumbs button img{max-height:100%;object-fit:contain}
.galerie-thumbs button.aktiv{border-color:var(--accent)}
.detail-info h1{font-size:21px;margin:0 0 12px;line-height:1.3}
.stammzeile{font-size:13px;margin:2px 0}
.stammzeile b{color:var(--light)}
.detail-info ul{margin:10px 0;padding-left:20px;font-size:13.5px}
.detail-info li{margin:3px 0}
.preis-gross{color:var(--accent);font-size:30px;font-weight:700;margin:12px 0 2px;
  font-variant-numeric:tabular-nums}
.mwst{font-size:12px;color:var(--muted)}
.packung-zeile{font-size:13px;color:var(--muted);margin-top:4px}
.packung-zeile b{color:var(--text)}
.versand-zeile{font-size:13px;color:var(--muted);margin-top:4px}
.versand-zeile b{color:var(--text)}
/* MENGENRABATTE (07.11.2026): Die Tabelle stand ohne Gestaltung im Shop, mit Standardrand und Standardschrift. Gestaltet wie die übrigen
   Zeilen am Preis: klein, gedämpfte Beschriftung, Zahlen untereinander. */
.mengenrabatte{width:100%;max-width:360px;border-collapse:collapse;margin:10px 0 4px;font-size:13px;font-variant-numeric:tabular-nums}
.mengenrabatte caption{text-align:left;font-weight:600;color:var(--light);padding-bottom:4px}
.mengenrabatte th{text-align:left;font-weight:500;color:var(--muted);font-size:12px;padding:4px 8px 4px 0;border-bottom:1px solid var(--card-border)}
.mengenrabatte td{padding:4px 8px 4px 0;color:var(--text);border-bottom:1px solid var(--card-border)}
.mengenrabatte tr:last-child td{border-bottom:0}
.lager{font-size:14px;font-weight:600}
.lager.ok{color:var(--accent)}
.lager.warte{color:var(--amber)}
.lager.aus{color:#fca5a5}
.lieferzeit{font-size:12.5px;color:var(--muted)}
.frage-link{float:right;font-size:13px;font-weight:400}
.kauf-form{display:flex;gap:12px;margin:18px 0 8px}
.stepper{display:flex;align-items:stretch;border:1px solid var(--card-border);
  border-radius:.5rem;overflow:hidden;background:var(--input)}
.stepper button{width:38px;background:transparent;border:0;color:var(--light);font-size:17px}
.stepper button:hover{background:rgba(34,197,94,.15)}
.stepper input{width:56px;text-align:center;background:transparent;border:0;
  color:var(--light);font-size:14px}
.stepper .stk{align-self:center;padding:0 10px 0 2px;font-size:12.5px;color:var(--muted)}
.kauf-form .btn{flex:1;width:auto}
.tabs{border-bottom:1px solid rgba(34,197,94,.25);margin:36px 0 16px;display:flex;gap:22px}
.tabs span{padding:9px 2px;font-size:14.5px;color:var(--light);
  border-bottom:3px solid var(--accent)}
.beschreibung{font-size:14px;max-width:900px;white-space:pre-line}
/* JTL-Beschreibungen kommen als HTML (h3/p/ul) — dann normal fließen lassen */
.beschreibung.html{white-space:normal;line-height:1.6}
.beschreibung.html h2,.beschreibung.html h3{color:var(--accent);font-size:15px;margin:20px 0 6px}
.beschreibung.html p{margin:8px 0}
.beschreibung.html ul,.beschreibung.html ol{padding-left:22px;margin:8px 0}
.beschreibung.html li{margin:5px 0}
.beschreibung.html a{text-decoration:underline}
.beschreibung.html img{border-radius:.5rem}
.beschreibung.html table{border-collapse:collapse;max-width:100%}
.beschreibung.html td,.beschreibung.html th{border:1px solid rgba(34,197,94,.2);padding:6px 10px}
.kurztext{font-size:13.5px;margin-top:12px}
.kurztext p{margin:6px 0}
.kurztext ul{padding-left:20px;margin:6px 0}
.tech-tabelle{border:1px solid rgba(34,197,94,.2);border-radius:.5rem;overflow:hidden;
  width:100%;max-width:900px;border-collapse:separate;border-spacing:0;
  font-size:13.5px;margin-top:10px}
.tech-tabelle td{padding:9px 14px;border-bottom:1px solid rgba(34,197,94,.14)}
.tech-tabelle tr:last-child td{border-bottom:0}
.tech-tabelle td:first-child{color:var(--light);font-weight:600;width:38%}

/* ---------- Pflichthinweise (waffenrechtliche Texte) ---------- */
.hinweis{display:flex;gap:10px;align-items:flex-start;border-radius:.5rem;
  border-left:4px solid;padding:11px 14px;margin:10px 0;font-size:13.5px;line-height:1.45}
.hinweis[hidden]{display:none} /* der Mengen-Kasten der Artikelseite (23.10.2026) — display:flex schlug sonst `hidden` */
.hinweis-ewb{background:rgba(37,99,235,.15);border-color:var(--blau);color:#93c5fd}
.hinweis-muni{background:rgba(217,119,6,.15);border-color:var(--amber);color:#fcd34d}
.hinweis-18{background:rgba(202,138,4,.15);border-color:var(--gelb);color:#fde047}
/* IM HELLEN STIL DUNKEL AUF HELLEM TON (23.10.2026, Befund 149: „Die Farbkombi passt hier nicht bei hellem Desing“ —
   Hellgelb auf Hellorange im Warenkorb). Regelwerk `die-website-ist-lesbar-wcag-aa`, der Test rechnet ≥ 4,5 : 1 nach. */
body.hell .hinweis-ewb{background:#dbeafe;color:#1e3a8a}
body.hell .hinweis-muni{background:#fef3c7;color:#78350f}
body.hell .hinweis-18{background:#fef9c3;color:#713f12}
.badge{display:inline-block;font-size:12px;font-weight:700;border-radius:3px;
  padding:1px 6px;margin-right:4px}
.badge-ewb{background:rgba(37,99,235,.2);color:#93c5fd;border:1px solid var(--blau)}
.badge-muni{background:rgba(217,119,6,.2);color:#fcd34d;border:1px solid var(--amber)}
.badge-18{background:rgba(202,138,4,.2);color:#fde047;border:1px solid var(--gelb)}

/* ---------- Tabellen (Warenkorb/Konto) ---------- */
/* Breite Tabellen scrollen im EIGENEN Container statt die Seite zu sprengen
   (Prüfliste N-09: Warenkorb-Box war mobil breiter als alles andere). */
.tabellen-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tabelle{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);
  border:1px solid var(--card-border);border-radius:.75rem;overflow:hidden}
.tabelle th{background:rgba(34,197,94,.08);text-align:left;font-size:13px;
  color:var(--accent);padding:10px 12px;border-bottom:2px solid var(--card-border)}
.tabelle td{padding:10px 12px;border-bottom:1px solid rgba(34,197,94,.15);
  vertical-align:middle;font-size:14px;color:var(--light)}
.tabelle tr:last-child td{border-bottom:0}
.tabelle .num{text-align:right;font-variant-numeric:tabular-nums}
.tabelle img{border-radius:.375rem;background:#fff}
/* DIE LISTE (27.10.2026, shop/lib/liste.js): der Standard aus Mercofina — Knöpfe oben, Filter, Spaltenköpfe, Aktionen rechts. */
.liste-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.liste-filter{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.liste-filter a{padding:6px 14px;border:1px solid var(--card-border);border-radius:999px;font-size:14px;color:var(--light);text-decoration:none}
.liste-filter a[aria-current]{background:var(--accent);border-color:var(--accent);color:#fff}
.tabelle.liste th{text-transform:uppercase;letter-spacing:.06em;font-size:12px}
.tabelle.liste .liste-aktionen{text-align:right}
/* Gleich breite Knöpfe (Michael: „Die Buttons sollten etwa gleich gross sein.“). */
.tabelle.liste td.liste-aktionen .btn{min-width:8.5rem;justify-content:center;text-align:center}
/* EINE REIHE (06.11.2026, Regelwerk `fenster-haben-feste-formen`): Knöpfe und Felder einer Zeile nebeneinander, rechtsbündig.
   Das Formular eines Knopfs macht keinen eigenen Block auf (`display:contents`), sonst fielen sie untereinander. */
.zeilen-aktionen{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;justify-content:flex-end}
.zeilen-aktionen > form,.zeilen-aktionen > span:not(.mit-info){display:contents}
.zeilen-aktionen .btn{margin:0;white-space:nowrap}
.zeilen-aktionen input[type=text]{flex:1 1 9rem;min-width:7rem;width:auto;margin:0}
@media (max-width:640px){
  /* DIE LISTE AM HANDY (08.11.2026; Michael am Foto von „Meine Papiere“: „Schon wieder Buttons die nicht passen“): jede Zeile
     ein Block — die Angaben untereinander, darunter die Knöpfe nebeneinander, nie schmaler als ihr Text. Vorher sechs Spalten
     zum Seitwärtsschieben (Art und Bezeichnung lagen links außerhalb), und die Knöpfe durften unter ihren Text schrumpfen
     (`flex:1 1 0; min-width:0` bei `nowrap`): „Bearbeiten“ lief in „Löschen“. `:not([hidden])` — der Filter blendet Zeilen aus. */
  /* Nachtrag (Michael: „Nicht eine extra Zeile für gültig und PDF, das sollte eher rechts stehen neben WBK und Art.“): oben die
     erste Spalte links, rechts daneben die Spalten der Liste aus `handyOben` (`.liste-oben`), darunter der Rest. */
  .tabelle.liste thead{display:none}
  .tabelle.liste tr:not([hidden]){display:flex;flex-wrap:wrap;align-items:center;column-gap:10px;padding:10px 12px;border-bottom:1px solid rgba(34,197,94,.15)}
  .tabelle.liste tr:not([hidden]):last-child{border-bottom:0}
  .tabelle.liste td{flex:1 1 100%;order:2;border-bottom:0;padding:2px 0}
  .tabelle.liste td:first-child{flex:1 1 auto;order:0;min-width:0}
  .tabelle.liste td.liste-oben{flex:0 0 auto;order:1}
  .tabelle.liste td:empty{display:none}
  .tabelle.liste td.liste-aktionen{order:3;padding-top:8px}
  .tabelle.liste tr.liste-leer td{text-align:center}
  .zeilen-aktionen{flex-wrap:wrap;justify-content:flex-start}
  .tabelle.liste td.liste-aktionen .btn{min-width:auto;flex:1 1 auto}
  .zeilen-aktionen input[type=text]{order:3;flex:1 1 100%}
}
.tabelle.liste tr.liste-leer td{color:var(--muted, inherit);opacity:.75;text-align:center;padding:18px 12px}
/* Die eigene NWR-Personen-ID über „Meine Papiere“: eine Zeile, keine Karte. */
.mw-person-id{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;margin:0 0 18px}
.mw-person-id label{flex:1 1 280px;margin:0}
.formular.mw-person-id{background:none;border:0;padding:0;box-shadow:none;max-width:none}
#mwPersonId{margin:0 0 18px}
.liste-pille{display:inline-block;padding:2px 10px;border:1px solid var(--card-border);border-radius:999px;font-size:13px;white-space:nowrap}
.liste-pille.warn{border-color:#c2410c;color:#c2410c}
.wk-menge{width:64px;padding:6px;background:var(--input);color:var(--light);
  border:1px solid var(--card-border);border-radius:.375rem}
.wk-mini{border:0;background:none;color:#fca5a5;font-size:16px}
.wk-mini:hover{color:var(--rot)}
.summenblock{margin-top:14px;display:flex;justify-content:flex-end}
.summenblock.voll .summen{width:100%}
.summen{min-width:300px;background:var(--card);border:1px solid var(--card-border);
  border-radius:.75rem;padding:14px 16px;font-size:14px}
.summen .zeile{display:flex;justify-content:space-between;padding:3px 0;
  font-variant-numeric:tabular-nums}
.summen .gesamt{font-size:18px;font-weight:700;color:var(--accent);
  border-top:1px solid rgba(34,197,94,.25);margin-top:6px;padding-top:8px}
/* Per JS ausgeblendete Zeilen (Kasse): das hidden-Attribut muss den
   display:flex der Zeile schlagen, sonst bleibt z. B. die Versandzeile bei
   Abholung sichtbar (bzw. die Abholzeile bei Versand). */
.summen .zeile[hidden], .checkzeile[hidden], .wahl label[hidden]{display:none}

/* ---------- Formulare (Kasse/Konto) ---------- */
.formular{background:var(--card);border:1px solid var(--card-border);
  border-radius:.75rem;padding:18px}
.formular label{display:block;margin:10px 0 2px;font-size:13.5px;font-weight:600;color:#e5e7eb}
/* N20 (20.10.2026, Regelwerk `jedes-eingabefeld-sieht-gleich-aus`): auch ein Feld ohne `type` (Text ist die Vorgabe des
   Browsers) — vorher hatten im Antrag nur E-Mail und Geburtsdatum Rahmen und Ecken. */
.formular input:not([type]),.formular input[type=text],.formular input[type=email],.formular input[type=tel],
.formular input[type=number],.formular input[type=date],.formular input[type=password],.formular input[type=search],
.formular input[type=time],.formular input[type=datetime-local],.formular input[type=url],
.formular textarea,.formular select,.ticket-form select,
.formular-zeile select,.formular-zeile input[type=text],.abgabe-weg select{
  width:100%;padding:9px;background:var(--input);color:var(--light);
  border:1px solid var(--card-border);border-radius:.375rem;font:inherit}
/* Ein Knopf nach einem Feld hat Abstand (07.11.2026, Messung „klebt“ der Seitenwache): „Verbindlich buchen“ stand 0 px unter
   „Zweck“, „Speichern“ unter dem letzten Feld des Schießbuch-Eintrags. Dieselbe Regel wie in GO. */
.formular :is(input:not([type=hidden]), select, textarea) ~ :is(button, .btn):not(.zeilen-aktionen *, .termin-waffen-listen > *){margin-top:12px}
/* Safari auf dem iPhone zeichnet ein <select> mit eigenem Aussehen (schwarzer Rahmen, höher) — Rahmen und Ecken der
   Regel oben greifen erst ohne das (24.10.2026, Klicktest 67 am iPhone 14: „von/bis sehen anders aus als das Datum“).
   Der Pfeil kommt dann von hier, in einem Grau, das auf beiden Erscheinungen lesbar ist. */
.formular select,.ticket-form select,.formular-zeile select,.termin-anmelden select,.abgabe-weg select{-webkit-appearance:none;appearance:none;padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238a919b' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:12px 8px}
/* Natives Datums- und Zeitfeld ins Design einpassen (Chromium rendert es sonst
   im Browser-Default): gleiche Höhe wie Textfelder, Icon in der Akzentfarbe.
   Uhrzeit seit 24.10.2026 (Michael am Handy, Schießbuch: „das Design der Felder passt nicht zusammen“). */
.formular input[type=date],.formular input[type=time],.formular input[type=datetime-local]{min-height:41px;color-scheme:dark;cursor:text}
.formular input[type=date]::-webkit-calendar-picker-indicator,.formular input[type=time]::-webkit-calendar-picker-indicator,
.formular input[type=datetime-local]::-webkit-calendar-picker-indicator{
  cursor:pointer;opacity:.75;
  filter:invert(62%) sepia(66%) saturate(2000%) hue-rotate(90deg)}
.formular input[type=date]::-webkit-calendar-picker-indicator:hover,.formular input[type=time]::-webkit-calendar-picker-indicator:hover{opacity:1}
.formular input:focus,.formular textarea:focus,.formular select:focus,.ticket-form select:focus{
  background:var(--input-focus);border-color:var(--accent);
  box-shadow:0 0 8px rgba(34,197,94,.4);outline:none}
.formular ::placeholder{color:#6b7280;opacity:1}
.formular input[type=file]{color:var(--text);font-size:13.5px}
.formular input[type=file]::file-selector-button{background:transparent;
  color:var(--text);border:1px solid var(--card-border);border-radius:.375rem;
  padding:7px 12px;margin-right:10px;font:inherit;cursor:pointer}
.formular input[type=file]::file-selector-button:hover{border-color:var(--accent);color:var(--light)}
.form-reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.konto-spalten{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
@media (max-width:900px){.konto-spalten{grid-template-columns:1fr}}
/* Auswahl als anklickbare Karten (Lieferart/Zahlung) -- die aktive Wahl ist
   deutlich hervorgehoben; der Preis/„kostenlos" steht rechtsbündig. */
.wahl{display:flex;flex-direction:column;gap:8px;margin:6px 0}
/* Schießbuch-Eintrag „Wer bestätigt?“ (23.10.2026): ein Rahmen wie eine Karte, Abstand zum Knopf darunter. */
.sb-wie{border:1px solid var(--card-border);border-radius:.5rem;padding:10px 14px 12px;margin:16px 0 18px}
.sb-wie legend{padding:0 6px;color:var(--light);font-weight:600}
/* Schießbuch „Für Teilnehmer eintragen“ (24.10.2026): je Schütze eine Karte statt einer Tabellenzeile — am Handy stehen
   die Felder untereinander, breiter nebeneinander. Dasselbe Raster trägt den Kopf und den Filter von „Mein Schießbuch“. */
.sb-schuetze{border:1px solid var(--card-border);border-radius:.6rem;padding:6px 14px 12px;margin:12px 0;background:var(--bg)}
.sb-schuetze legend{padding:0 6px;color:var(--light);font-weight:600}
.formular .sb-schuetze legend label{display:flex;align-items:center;gap:10px;margin:0;font-size:15px;cursor:pointer}
.sb-schuetze input[type=checkbox]{accent-color:var(--accent);width:18px;height:18px;flex:0 0 auto}
.sb-schuetze.sb-schon{opacity:.6}
.sb-felder,.sb-filter-felder{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:0 14px}
/* Schießbuch-Kopf (24.10.2026; Michael am Handy: „Das Feld für die Aufsicht ist zu schmal“): Datum, von, bis in EINER
   Zeile, Schießstätte und Aufsicht darunter jede in voller Breite (am PC nebeneinander). */
/* Am Handy (24.10.2026; Michael: „Die Zeit Felder sind noch leicht abgeschnitten“): in gut 80 px passen „18:00“ und das
   Uhr-Symbol nicht — das Datum bekommt die erste Zeile, von und bis die zweite. Am PC alle drei nebeneinander. */
.sb-felder.sb-zeit{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.sb-felder.sb-zeit>:first-child{grid-column:1/-1}
@media (min-width:600px){.sb-felder.sb-zeit{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1fr)}.sb-felder.sb-zeit>:first-child{grid-column:auto}}
/* Die Uhrzeit als Stunde : Minute (24.10.2026, shop/lib/uhrzeit.js) — zwei Auswahlfelder in der Breite eines Feldes. */
.uhrzeit-feld{display:flex;align-items:center;gap:4px}
.uhrzeit-feld select{flex:1 1 0;min-width:0}
.uhrzeit-trenner{font-weight:600}
.sb-felder.sb-ort{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
/* EINE WAFFE, EINE ZEILE (06.11.2026, `eine-waffe-ist-eine-zeile-im-schiessbuch-des-termins`; Michael: „unzählige Felder irgendwie in den
   Raum geworfen“): feste Spalten, damit untereinander steht, was zusammengehört; die Munition darunter. Das Wort „Weitere
   Waffe“ belegt eine ganze Zeile, keine Spalte. Am Handy untereinander, Art und Schuss nebeneinander. */
.sb-waffe-zeile{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 5.5rem minmax(0,1fr) 5rem}
.sb-schuetze .sb-waffe-plus{margin-top:10px}
.sb-waffe-titel{grid-column:1/-1;margin:12px 0 0;padding-top:8px;border-top:1px solid var(--card-border)}
.sb-mun-felder{grid-column:1/-1;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 14px}
.sb-schuetze.sb-leer .sb-waffe-felder,.sb-schuetze.sb-leer .sb-waffe-plus,.sb-schuetze.sb-leer .sb-mit-feld,.sb-schuetze.sb-leer .sb-bahn-wahl,.sb-schuetze.sb-geteilt .sb-bahn-wahl{display:none}
/* Die Ausnahme, also leise: auf dem Rand der Karte, gegenüber dem Namen. */
.sb-schuetze{position:relative}
.formular .sb-bahn-wahl{position:absolute;top:-11px;right:14px;display:flex;align-items:center;gap:6px;margin:0;padding:0 6px;background:var(--bg);font-weight:400;cursor:pointer}
.sb-schuetze .sb-bahn-wahl input[type=checkbox]{width:15px;height:15px;min-height:0;margin:0}
@media (max-width:640px){
  .sb-waffe-zeile{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .sb-f-waffe,.sb-f-kaliber,.sb-f-disziplin{grid-column:1/-1}
  .sb-f-art,.sb-f-schuss{order:1}
  .sb-mun-felder{order:2;grid-template-columns:minmax(0,1fr)}
  .formular .sb-bahn-wahl{position:static;padding:0;margin:0 0 6px;background:none}
}
.sb-weitere{margin:10px 0}
.sb-weitere summary{cursor:pointer;color:var(--accent-hell);font-weight:600;padding:6px 0}
/* Das Dateifeld als Zone (24.10.2026, shop/lib/dateiZone.js): eine große Fläche zum Hineinziehen oder Antippen; das
   eigentliche Feld liegt unsichtbar darunter (nicht display:none — dann öffnete der Tipp auf die Fläche nichts). */
.datei-zone{position:relative;margin:6px 0 10px}
.datei-zone-input{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden}
.datei-zone-flaeche{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;text-align:center;
  min-height:120px;padding:18px 14px;border:2px dashed var(--card-border);border-radius:.6rem;background:var(--input);cursor:pointer;
  transition:border-color .12s,background .12s;font-weight:500}
.datei-zone-flaeche:hover,.datei-zone.ziel .datei-zone-flaeche{border-color:var(--accent);background:var(--input-focus)}
.datei-zone-input:focus-visible+.datei-zone-flaeche{outline:2px solid var(--accent);outline-offset:2px}
.datei-zone-symbol{font-size:26px;line-height:1;color:var(--accent)}
.datei-zone-titel{color:var(--light)}
.datei-zone-name{color:var(--accent-hell);font-weight:600}
.datei-zone.laedt .datei-zone-flaeche{opacity:.7;cursor:progress}
/* Eine Auswahl mit ✕ daneben (24.10.2026, shop/lib/auswahl.js; Michael: „der Zeitfilter sollte ein Dropdown mit X
   daneben sein“) — das ✕ als eigene Tippfläche, so hoch wie das Feld. */
.auswahl-mit-x{display:flex;align-items:center;gap:8px}
.auswahl-mit-x select{flex:1 1 auto;min-width:0}
.auswahl-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;
  border:1px solid var(--card-border);border-radius:.375rem;color:var(--muted);text-decoration:none;font-size:18px}
.auswahl-x:hover{color:var(--light);border-color:var(--accent)}
.sb-zeitraum{margin:0 0 4px}
/* Das ✕ einer freien Bahn oder Person im Schießbuch des Termins (26.10.2026, `die-bahnen-im-schiessbuch-des-termins`) —
   dasselbe ✕ wie neben einer Auswahl, in der Kopfzeile der Karte hinter ihrem Namen (schwebend oben rechts lag es am
   Handy über der Beschriftung des ersten Feldes). 32 px — die Kopfzeile bleibt niedrig, die Tippfläche über 24 px. */
.sb-schuetze legend .sb-karte-weg[hidden]{display:none}
.sb-schuetze legend .sb-karte-weg{min-width:32px;min-height:32px;margin-left:10px;vertical-align:middle;font-size:15px;background:transparent;cursor:pointer}
.wahl label{display:flex;align-items:center;gap:10px;margin:0;font-weight:500;cursor:pointer;
  background:var(--input);border:1px solid var(--card-border);border-radius:.6rem;padding:11px 14px;
  transition:border-color .12s,background .12s}
.wahl label:hover{background:var(--input-focus)}
/* Eine Option mit eigenem Feld (24.10.2026, Schießbuch „Vor Ort beaufsichtigt von“): Option und Feld in EINER Karte,
   das Feld eingerückt unter dem Text. */
.wahl-mit-feld{background:var(--input);border:1px solid var(--card-border);border-radius:.6rem;transition:border-color .12s}
.wahl-mit-feld>label{border:0;background:transparent}
.wahl-mit-feld>label:hover{background:transparent}
.wahl-mit-feld .wahl-feld{padding:0 14px 12px 40px}
.wahl-mit-feld:has(input[type=radio]:checked){border-color:var(--accent)}
.wahl label.sel{border-color:var(--accent);background:rgba(34,197,94,.10)}
.wahl label .preis{margin-left:auto;font-weight:700;color:var(--accent-hell);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.wahl label .frei{margin-left:auto;font-weight:600;color:var(--muted);white-space:nowrap}
.wahl input[type=radio],.checkzeile input[type=checkbox]{accent-color:var(--accent);flex:0 0 auto}
/* Warenkorb: gut lesbare Versandzeile unter der Zwischensumme */
.versandzeile{margin-top:12px;background:rgba(34,197,94,.07);border:1px solid var(--card-border);
  border-radius:.6rem;padding:12px 14px;display:flex;justify-content:space-between;align-items:center;
  gap:14px;flex-wrap:wrap}
.versandzeile .vz-l{font-size:13.5px}
.versandzeile .vz-l strong{color:var(--light)}
.versandzeile .vz-sub{display:block;color:var(--muted);font-size:12px;margin-top:2px}
.versandzeile .vz-r{font-size:18px;font-weight:700;color:var(--accent-hell);
  font-variant-numeric:tabular-nums;white-space:nowrap}
/* Kasse: Hinweisbox, wenn Abholung gewählt ist (statt Versandberechnung) */
.abhol-info{background:rgba(34,197,94,.08);border:1px solid var(--card-border);border-radius:.6rem;
  padding:12px 14px;margin:12px 0 4px;font-size:13.5px}
.abhol-info strong{color:var(--light)}
.checkzeile{display:flex;gap:8px;align-items:flex-start;margin:10px 0;font-size:13.5px}
.checkzeile input{margin-top:3px}
.fehlerbox{background:rgba(220,38,38,.15);border:1px solid rgba(220,38,38,.4);
  color:#fca5a5;border-radius:.5rem;padding:10px 12px;margin-bottom:14px}
/* Spamschutz-Honeypot: für Menschen unsichtbar (NICHT display:none —
   simple Bots erkennen das), aus dem Fluss und der Tab-Reihenfolge raus */
.sp-feld{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px;height:1px;overflow:hidden}
.okbox{background:rgba(34,197,94,.12);border:1px solid rgba(34,197,94,.4);
  color:var(--accent-hell);border-radius:.5rem;padding:10px 12px;margin-bottom:14px}

/* ---------- Google-Maps-Einbindung (2-Klick, So finden Sie uns) ---------- */
.maps-wrap{max-width:640px;margin:0 0 18px;border:1px solid var(--card-border);
  border-radius:.75rem;overflow:hidden;background:var(--card)}
.maps-platzhalter{padding:28px 20px;text-align:center}
.maps-wrap iframe{display:block;width:100%;height:420px;border:0}

/* ---------- Konto: Bestell-Liste + Bestell-Detail (Alt-Shop-Stil) ---------- */
.best-liste{display:flex;flex-direction:column;gap:10px;margin:10px 0}
.best-zeile{display:grid;grid-template-columns:150px 110px 1fr 1.4fr 30px;gap:12px;
  align-items:center;background:var(--card);border:1px solid var(--card-border);
  border-radius:.5rem;padding:12px 16px;color:var(--text);font-size:14px;
  transition:border-color .2s,box-shadow .2s}
.best-zeile:hover{border-color:var(--accent);box-shadow:0 0 10px rgba(34,197,94,.2);color:var(--light)}
.best-betrag{font-weight:600;color:var(--light)}
.best-auge{text-align:right;opacity:.7}
@media (max-width:760px){
  .best-zeile{grid-template-columns:1fr auto;grid-auto-rows:auto;gap:2px 12px;padding:10px 14px}
  .best-betrag{justify-self:end}
  .best-nummer{grid-column:1/-1;color:var(--light);font-weight:600}
  .best-status{grid-column:1/-1;font-size:13px;color:var(--muted)}
  .best-auge{display:none}
}
.bd-karte{background:var(--card);border:1px solid var(--card-border);border-radius:.75rem;overflow:hidden}
.bd-kopf{display:flex;gap:24px;flex-wrap:wrap;padding:12px 18px;font-size:14px;
  background:rgba(34,197,94,.08);border-bottom:1px solid var(--card-border)}
.bd-layout{display:grid;grid-template-columns:280px 1fr;gap:0}
.bd-infos{padding:16px 18px;border-right:1px solid rgba(34,197,94,.15);font-size:14px}
.bd-infos p{margin:0 0 14px}
.bd-warenkorb{padding:16px 18px;min-width:0;overflow-x:auto}
.bd-warenkorb .tabelle{border:0}
@media (max-width:860px){.bd-layout{grid-template-columns:1fr}.bd-infos{border-right:0;border-bottom:1px solid rgba(34,197,94,.15)}}

/* ---------- Bestellbestätigung (Danke-Kachel nach NOVAChild-Vorlage) ---------- */
.bestaetigung{max-width:820px;margin:0 auto}
.bk-karte{background:var(--card);border:1px solid var(--card-border);
  border-top:4px solid var(--accent);border-radius:.75rem;
  box-shadow:0 4px 20px rgba(0,0,0,.4);padding:24px 28px;margin-bottom:18px}
.bk-danke{text-align:center;margin-bottom:22px}
.bk-danke h1{font-size:22px;margin:0 0 8px}
.bk-danke p{margin:0;font-size:15px;line-height:1.5}
.bk-grid{background:#111a14;border:1px solid rgba(34,197,94,.15);
  border-radius:.5rem;padding:16px 20px}
.bk-row{display:flex;justify-content:space-between;gap:16px;padding:10px 0;
  border-bottom:1px dashed rgba(34,197,94,.2);font-size:14.5px}
.bk-row:last-child{border-bottom:0}
.bk-row span{color:var(--muted);font-weight:500}
.bk-row strong{color:var(--light);text-align:right}
.bk-akzent{color:var(--accent)!important}
.bk-schritte{margin:0;padding-left:20px;font-size:14px;line-height:1.6;list-style-type:square}
.bk-schritte li{margin-bottom:8px}
.bk-schritte li:last-child{margin-bottom:0}
.bk-schritte li::marker{color:var(--accent)}
.bk-support{background:rgba(34,197,94,.05);border:1px solid rgba(34,197,94,.25);
  border-radius:.5rem;padding:15px;text-align:center;font-size:13px;margin-bottom:18px}
.bk-aktionen{text-align:center;margin:24px 0 10px;display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.zahlbox{background:var(--card);border:1px solid var(--card-border);
  border-radius:.75rem;padding:18px;display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.zahlbox img{width:160px;height:160px;background:#fff;border-radius:.5rem;padding:6px}
.status-badge{display:inline-block;border-radius:12px;padding:2px 10px;
  font-size:12px;font-weight:700}
.status-badge.offen{background:rgba(202,138,4,.2);color:#fde047;border:1px solid var(--gelb)}
.status-badge.ok{background:rgba(34,197,94,.18);color:var(--accent-hell);border:1px solid var(--accent)}
.status-badge.aus{background:rgba(220,38,38,.18);color:#fca5a5;border:1px solid var(--rot)}

/* ---------- Urlaubs-/Hinweisbanner (ganzseitig) ---------- */
.seiten-banner{max-width:1200px;margin:14px auto 0;padding:12px 16px;
  background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.45);
  border-radius:.5rem;color:#fde047;font-size:14px}
/* Im hellen Stil war Hellgelb auf Blassgelb kaum lesbar (Öcher Shooters, 22.10.2026: „Die Vorschaufarbe passt nicht“):
   dunkles Bernstein auf hellem Gelb, rund 9 : 1. */
body.hell .seiten-banner{color:#713f12;background:#fef9c3;border-color:#eab308}
body.hell .seiten-banner a{color:#713f12;text-decoration:underline}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid rgba(34,197,94,.15);margin-top:40px;
  padding:34px 0 18px;font-size:13.5px}
.fuss-innen{max-width:1200px;margin:0 auto;padding:0 16px;display:grid;
  grid-template-columns:1fr 1fr 1.4fr;gap:26px}
/* Durchgang 22, F22-4: Die drei Ueberschriften der Fusszeile waren h4 —
   gewaehlt nach der GROESSE, nicht nach der Gliederung. Auf 33 von 36 Seiten
   sprang die Ebene damit von h1 oder h2 direkt auf h4, und fuer eine
   Vorlesestimme heisst ein Sprung: hier fehlt ein Abschnitt. Sie heissen
   jetzt h2; das Aussehen steht vollstaendig in dieser Regel und wandert
   deshalb einfach mit — dieselbe Zeile, nur der Elementname ist anderer. */
.fuss h2{color:var(--muted);font-size:13.5px;margin:0 0 10px;font-weight:600}
.fuss-innen a{display:block;color:var(--text);padding:3px 0}
.fuss-innen a:hover{color:var(--accent-hell)}
.mitglied{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.mitglied img{max-height:72px;width:auto;border-radius:.25rem}
.fuss-unten{max-width:1200px;margin:22px auto 0;padding:0 16px}
.fuss-unten .btn{width:auto;display:inline-block;padding:8px 26px}
.fuss-sternchen{font-size:11.5px;color:var(--muted);margin-top:8px}
.fuss-sternchen a{text-decoration:underline;color:var(--muted)}
.fuss-copy{text-align:center;color:var(--muted);font-size:12px;margin-top:26px}
/* „Shop mit Mercofina“ — der eine Hinweis auf die Marke, der in jedem Shop bleibt (Regelwerk `der-shop-auftritt-wird-hochgeladen-nicht-im-code`). */
/* Michael, 18.10.2026: „Also shop mit "logo" das verlinkt ist“ — das kleine Mercofina-Logo statt des Worts. */
.fuss-mercofina{display:flex;align-items:center;justify-content:center;gap:6px;color:var(--muted);font-size:11px;margin-top:8px;opacity:.85}.fuss-mercofina a{display:inline-flex}.fuss-mercofina img{height:14px;width:auto}

/* ---------- Rechtstexte / Info-Seiten ---------- */
.beschreibung h2,.rechtstext h2{font-size:16px}
.rechtstext{max-width:820px;font-size:14px;line-height:1.6;overflow-wrap:anywhere}
.rechtstext h2{color:var(--light);margin:28px 0 10px}
.rechtstext h3{color:var(--accent);font-size:14.5px;margin:22px 0 6px}
/* Durchgang 22, F22-6: Die gepflegten Rechtstexte gliedern sich mit h3; auf
   der Seite steht darueber nur die h1, also sprang die Ebene. Sie werden beim
   Rendern auf h2 gehoben und tragen dabei stufe-3 — diese Regel gibt ihnen
   Zeichen fuer Zeichen das Aussehen, das .rechtstext h3 ihnen vorher gab.
   Der Elementname steht mit im Selektor, damit sie schwerer wiegt als
   .rechtstext h2 (0,2,1 gegen 0,1,1) und den h2-Stil sicher schlaegt. */
.rechtstext h2.stufe-3{color:var(--accent);font-size:14.5px;margin:22px 0 6px}
.rechtstext p{margin:8px 0}
.rechtstext ul{padding-left:22px;margin:8px 0}
.rechtstext li{margin:5px 0}
.rechtstext a{text-decoration:underline}
.rechtstext small{color:var(--muted)}

/* Versandinformationen-Karten (Vorlage: Alt-Shop-Template) */
.info-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:18px;max-width:none}
.rechtstext:has(.info-karten){max-width:none}
.info-karte{background:var(--card);border:1px solid var(--card-border);
  border-radius:.75rem;padding:18px 20px;
  transition:border-color .2s,box-shadow .2s}
.info-karte:hover{border-color:var(--accent);box-shadow:0 0 14px rgba(34,197,94,.25)}
/* Durchgang 22: Die Kartentitel der Versandarten waren h3 — unter der h1 der
   Seite steht aber keine h2, der Sprung ging also h1 auf h3. Sie sind jetzt h2;
   das Aussehen steht vollstaendig in dieser Regel und wandert einfach mit. */
.info-karte h2{color:var(--accent);font-size:16.5px;margin:0 0 4px;font-weight:600}
.info-unterzeile{color:var(--light);font-weight:700;font-size:13px;margin-bottom:10px}
.info-karte ul{list-style:none;padding:0;margin:0}
.info-karte li{position:relative;padding-left:16px;margin:6px 0;font-size:13.5px}
.info-karte li::before{content:"•";position:absolute;left:0;color:var(--accent)}
.info-karte li.punkt-rot{color:#fca5a5}
.info-karte li.punkt-rot::before{color:var(--rot)}

/* ---------- Kasse: Schrittanzeige + Bestellübersicht ---------- */
.kasse-schritte{display:flex;gap:10px;list-style:none;padding:0;margin:0 0 18px;
  font-size:13.5px;flex-wrap:wrap}
.kasse-schritte li{padding:5px 14px;border:1px solid var(--card-border);
  border-radius:999px;color:var(--muted);background:var(--card)}
.kasse-schritte li.aktiv{color:var(--btn-text);background:var(--accent);
  border-color:var(--accent);font-weight:600}
.pruefen-karten{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.pruefen-karte{background:var(--card);border:1px solid var(--card-border);
  border-radius:.75rem;padding:16px 18px}
.pruefen-karte p{margin:6px 0}
.pruefen-karte .tabelle{border:1px solid rgba(34,197,94,.15)}
.pruefen-kopf{display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;border-bottom:1px solid rgba(34,197,94,.2);padding-bottom:8px;margin-bottom:8px}
.pruefen-kopf h2{margin:0;font-size:16.5px}
.pruefen-kopf a{font-size:13px;white-space:nowrap}
.pruefen-buttons{display:flex;gap:12px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.pruefen-buttons .btn{display:inline-block;width:auto}
.wahl label.inaktiv{opacity:.45}

/* Versandkosten im Detail (Nachbau der Plugin-Detailrechnung) */
.versand-detail{margin:14px 0;border:1px solid var(--card-border);border-radius:.75rem;
  overflow:hidden;background:var(--bg)}
.vd-titel{padding:11px 16px;font-weight:600;color:var(--light);background:rgba(34,197,94,.08)}
.vd-gruppe{padding:10px 16px;border-top:1px solid rgba(34,197,94,.15)}
.vd-kat{font-size:11.5px;letter-spacing:.08em;color:var(--muted);font-weight:600;margin-bottom:4px}
.vd-hinweis{font-size:12.5px;color:var(--accent-hell);background:rgba(34,197,94,.08);
  border-left:3px solid var(--accent);padding:4px 10px;border-radius:.25rem;margin:2px 0 8px}
.vd-zeile{display:flex;justify-content:space-between;gap:14px;padding:2px 0;
  font-variant-numeric:tabular-nums}
.vd-zeile.haupt{font-weight:600;color:var(--light)}
.vd-zeile.sub{font-size:13px;color:var(--muted);padding-left:14px}
.vd-zeile.gesamtzeile{padding:10px 16px;border-top:1px solid rgba(34,197,94,.25);
  font-weight:700;color:var(--accent);font-size:15px}
.vd-frei{color:var(--accent)}
/* Versandkosten ohne tragende Regel (Befund 006): sichtbar OFFEN, nie gruen-frei */
.vd-offen{color:var(--muted);font-style:italic}
.vd-lieferzeit{font-size:12.5px;color:var(--muted);margin-top:4px}

/* Dokument-Upload-Zeilen (Art + Datei nebeneinander, wie die spätere Ablage) */
.dok-zeile{display:grid;grid-template-columns:minmax(220px,1fr) 2fr;gap:10px;
  align-items:center;margin:8px 0}
@media (max-width:640px){.dok-zeile{grid-template-columns:1fr}}

/* Feste (Konto-)Adresse in der Kasse + Adress-Spalten der Übersicht */
.adresse-fest{background:var(--input);border:1px solid var(--card-border);
  border-radius:.5rem;padding:12px 14px}
.adress-spalten{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:640px){.adress-spalten{grid-template-columns:1fr}}

/* Pro-Artikel-Lieferübersicht (wie die alte Plugin-Box im JTL-Checkout) */
.lieferinfo{margin:14px 0;border:1px solid var(--card-border);border-radius:.75rem;
  overflow:hidden;background:var(--card)}
.lieferinfo-head{padding:11px 16px;font-weight:600;color:var(--light);
  background:rgba(34,197,94,.08)}
.lieferinfo-row{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;
  padding:10px 16px;border-top:1px solid rgba(34,197,94,.15)}
.lieferinfo-name{flex:1 1 260px;min-width:200px}
.lieferinfo-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.lieferinfo-badge{font-size:12px;padding:2px 10px;border-radius:999px;
  background:rgba(34,197,94,.15);color:var(--accent-hell);white-space:nowrap}
.lieferinfo-zeit{font-weight:600;white-space:nowrap;font-size:13.5px}

/* Ab hier passen Logo, alle Reiter und der Warenkorb nicht mehr
   nebeneinander. Statt die Navigation in immer mehr Zeilen zu quetschen,
   bekommt sie eine eigene Rasterzeile unter Logo/Warenkorb -- dieselbe
   Ordnung, die mobil ohnehin gilt. */
@media (max-width:1150px){
  .kopf{grid-template-columns:1fr auto;
    grid-template-areas:"logo icons" "nav nav" "suche suche";column-gap:12px}
  .hauptnav{justify-content:center;border-top:1px solid rgba(34,197,94,.15);margin-top:2px}
  .nav-item>a{padding:10px 9px;font-size:13.5px}
  .logo{letter-spacing:.08em}
  .suche{max-width:none;margin:8px 0 0}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important}
}
@media (max-width:900px){
  .kat-layout,.detail-layout{grid-template-columns:1fr}
  .filter{border-right:0;padding-right:0}
  /* Kompakte Mobil-Kopfzeile: Zeile 1 Topbar (zentriert), Zeile 2 Logo +
     Konto/Warenkorb, Zeile 3 Kategorien (umbruchfähig, zentriert), Zeile 4
     Suche in voller Breite. Die Zeilenaufteilung selbst macht der
     1150px-Block oben — hier bleibt nur, was mobil zusätzlich kleiner wird. */
  .topbar{flex-wrap:wrap;justify-content:center;gap:4px 14px;font-size:12.5px;padding:8px 12px 0}
  .kopf{padding:10px 12px 0}
  .logo img{height:32px}
  .kopf-icons{gap:14px}
  .suche input{width:100%}
  .fuss-innen{grid-template-columns:1fr}
  .form-reihe{grid-template-columns:1fr}
  .banner{flex-direction:column;align-items:flex-start}
  .pruefen-karten{grid-template-columns:1fr}
}
@media (max-width:640px){
  /* Bestellbestätigung: Beschriftung/Wert untereinander statt gequetscht */
  .bk-row{flex-direction:column;gap:2px}
  .bk-row strong{text-align:left}
  .bk-karte{padding:18px 16px}
  .bd-kopf{gap:6px 18px;flex-direction:column}
}

/* ---------- Kaufoptionen (P3-017): Varianten-Auswahl am Artikel ----------
   Aufbau wie bei normalen Artikeln (Stepper + Button in EINER Reihe):
   Label über der Reihe, darunter Select und Warenkorb-Button nebeneinander
   in gleicher Höhe. */
.kauf-form.mit-optionen{flex-wrap:wrap;align-items:stretch}
.kaufoption-label{flex:1 1 100%;font-size:13.5px;font-weight:600;color:#e5e7eb;margin-bottom:-2px}
.kaufoption-label em{font-style:normal;font-weight:400}
.kaufoption-select{
  flex:1 1 auto;min-width:190px;padding:9px 34px 9px 12px;
  background:var(--input);color:var(--light);
  border:1px solid var(--card-border);border-radius:.5rem;font:inherit;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2322c55e' stroke-width='2'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center}
.kaufoption-select:focus{
  background-color:var(--input-focus);border-color:var(--accent);
  box-shadow:0 0 8px rgba(34,197,94,.4);outline:none}
.kauf-form.mit-optionen .btn{flex:1 1 auto;min-width:190px}
/* Karten statt Auswahlliste (10.10.2026): ein <select> öffnet auf dem Handy den Systemdialog. Die Optionen stehen
   nebeneinander (schmal: untereinander), die gewählte grün umrandet; der Knopf darunter über die volle Breite. */
.kaufoption-karten{flex:1 1 100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.kaufoption-karte{position:relative;display:flex;flex-direction:column;gap:2px;padding:12px 14px;cursor:pointer;
  background:var(--input);border:1px solid var(--card-border);border-radius:.5rem;margin:0}
.kaufoption-karte input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.kaufoption-karte .ko-name{font-weight:600;color:var(--light)}
.kaufoption-karte .ko-preis{font-size:1.15em;font-weight:700;color:var(--accent)}
.kaufoption-karte:has(input:checked){border-color:var(--accent);box-shadow:0 0 0 1px var(--accent),0 0 10px rgba(34,197,94,.3)}
.kaufoption-karte:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.kauf-form.mit-optionen:has(.kaufoption-karten) .btn{flex:1 1 100%}
/* Größen eines Vaterartikels (P3-062): dieselben Karten, schmaler — sieben Größen passen in eine Zeile; eine nicht
   lieferbare steht blass da und lässt sich nicht wählen. */
.kaufoption-karten.groessen{grid-template-columns:repeat(auto-fill,minmax(76px,1fr))}
.kaufoption-karten.groessen .kaufoption-karte{align-items:center;text-align:center;padding:10px 8px}
.kaufoption-karten.groessen .ko-preis{font-size:.85em;font-weight:600}
.kaufoption-karte.gesperrt{opacity:.45;cursor:not-allowed}

/* ---------- Suche ohne Treffer: Kategorie-Vorschläge (28.08.2026) ---------- */
.such-kategorien{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 6px}
.kategorie-chip{display:inline-flex;align-items:center;gap:6px;
  background:var(--card);border:1px solid var(--card-border);border-radius:999px;
  padding:7px 14px;color:var(--light);font-size:14px;
  transition:border-color .2s,box-shadow .2s,color .2s}
.kategorie-chip:hover{border-color:var(--accent);color:var(--accent-hell);
  box-shadow:0 0 12px rgba(34,197,94,.25)}

/* ---------- Kalender des Vereins (18.10.2026): das Raster zeichnet Mercofina (src/lib/kalender.js) ---------- */
.kal-leiste{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:12px 0}
.kal-titel-leiste{font-size:17px;color:var(--light);margin:0 8px}
.kal-ansichten a.aktiv{color:var(--accent-hell);font-weight:700;text-decoration:none}
.kal{width:100%;border-collapse:collapse;table-layout:fixed}
.kal th{font-size:12px;color:var(--muted);text-align:left;padding:4px}
.kal-tag{vertical-align:top;border:1px solid var(--card-border);padding:4px;height:84px;background:var(--card)}
.kal-woche .kal-tag{height:180px}
.kal-fremd{opacity:.45}
.kal-heute{box-shadow:inset 0 0 0 2px var(--accent)}
.kal-nr{display:block;font-size:12px;color:var(--muted)}
.kal-eintrag{display:block;font-size:12px;line-height:1.3;margin:2px 0;padding:2px 4px;border-radius:3px;
  background:rgba(34,197,94,.12);color:var(--light);text-decoration:none;overflow:hidden;text-overflow:ellipsis}
.kal-eintrag.kal-eigen{background:rgba(34,197,94,.3)}
.kal-eintrag.kal-belegt{background:rgba(156,163,175,.15);color:var(--muted)}
.kal-eintrag.kal-abgesagt{text-decoration:line-through;color:var(--muted)}
/* Die Farbe der Terminvorlage (22.10.2026, `die-terminvorlage-ist-kategorie-und-vorlage`): Grund und Schrift stehen am
   Eintrag (lib/kalender.js); der eigene Termin bekommt dazu einen Ring in der Akzentfarbe. */
.kal-eintrag.kal-farbig.kal-eigen{box-shadow:inset 0 0 0 2px var(--accent)}
.farbmarke{display:inline-block;width:.7em;height:.7em;border-radius:50%;margin-right:.4em;vertical-align:.05em;flex:0 0 auto}
.kal-zeit{font-weight:700}
.kal-listentag h3{font-size:15px;margin:14px 0 4px}
.kal-listentag ul{margin:0;padding-left:18px}
.kal .leer{color:var(--muted)}
/* Monat am Handy (24.10.2026, Mobil-Messung): der TITEL statt der Uhrzeit — vorher stand nur „18:00“ in der Zelle. Zwei
   Zeilen, notfalls im Wort getrennt; Uhrzeit und Ort zeigt der Termin, die Farbe der Vorlage die Art. */
@media (max-width:640px){.kal-monat .kal-zeit,.kal-monat .kal-ort{display:none}.kal-tag{height:72px}
  .kal-monat .kal-eintrag{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:anywhere;hyphens:auto}}
/* TIPPZIELE AM HANDY (23.10.2026, Regelwerk `handys-werden-wie-handys-geprueft` — gemessen auf iPhone und Pixel): Einträge
   im Monat waren 20 px hoch und standen dicht übereinander, die „frei“-Felder im Wochenplan 20 × 19 px. Mindestens 24 px
   hoch mit Abstand (WCAG 2.5.8), der Tag wächst mit seinen Einträgen. */
@media (max-width:820px){
  .kal-tag{height:auto;min-height:56px}
  .kal-eintrag{min-height:24px;margin:4px 0;padding:4px 4px;line-height:16px}
  .woche-frei{display:block;min-height:28px;line-height:28px;text-align:center}
}

/* ==========================================================================
   WEBAUFTRITT (20.10.2026, Regelwerk `der-webauftritt-hat-bereiche`, Bauplan docs/UMBAU-WEBAUFTRITT.md W8, § 3.3 Nr. 5)
   EIN Rahmen, das Aussehen über Tokens. Ohne `aussehen.stil` bleibt alles wie oben (dunkel) — die Waffenwelt ändert
   sich nicht. Mit „hell“ (Klasse am body): heller Grund, ruhige Flächen, viel Weißraum, Akzent aus dem Aussehen,
   Schriften selbst gehostet (assets/schriften, SIL OFL — keine Abfrage bei Google oder einem CDN).
   Mobil zuerst; alles ohne JavaScript.
   ========================================================================== */
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:400;font-display:swap;src:url(/assets/schriften/source-sans-3-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/schriften/source-sans-3-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Source Sans 3";font-style:normal;font-weight:700;font-display:swap;src:url(/assets/schriften/source-sans-3-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Source Serif 4";font-style:normal;font-weight:600;font-display:swap;src:url(/assets/schriften/source-serif-4-latin-600-normal.woff2) format("woff2")}

body.hell{
  --accent:var(--akzent,#8a5a1c); --accent-hell:color-mix(in srgb,var(--accent) 80%,#000); --accent-hover:color-mix(in srgb,var(--accent) 85%,#000);
  --bg:#faf8f4; --card:#fff; --card-border:#e7e1d6; --input:#fff; --input-focus:#fdfbf7;
  --text:#2c2f35; --light:#16181d; --muted:#666b73; --btn-text:#fff;
  --flaeche:color-mix(in srgb,var(--accent) 8%,#fff);
  color-scheme:light;
  font-family:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:17px;line-height:1.6;
}
body.hell h1,body.hell h2,body.hell h3{font-family:"Source Serif 4",Georgia,serif;font-weight:600;letter-spacing:-.01em}
body.hell h1{font-size:clamp(28px,5vw,42px);line-height:1.15}
body.hell h2{font-size:clamp(22px,3.2vw,28px);line-height:1.25}
body.hell .topbar a,body.hell .topbar .trenner{color:var(--muted)}
body.hell .kopf{padding-top:14px;padding-bottom:6px;border-bottom:1px solid var(--card-border)}
body.hell .logo img{height:56px}
body.hell .nav-item>a{font-size:16px;font-weight:600;color:var(--light)}
body.hell .nav-item>a:hover{color:var(--accent)}
body.hell .nav-menu{box-shadow:0 12px 28px rgba(22,24,29,.12)}
body.hell .nav-menu a:hover,body.hell .btn.zweit:hover{background:var(--flaeche);color:var(--accent)}
body.hell .btn.zweit{color:var(--light)}
body.hell .btn.zweit.hell{color:#fff;border-color:rgba(255,255,255,.7)}
body.hell .btn.zweit.hell:hover{background:rgba(255,255,255,.12);color:#fff}
body.hell .tabelle th{background:var(--flaeche);color:var(--light)}
body.hell .tabelle td{border-bottom-color:var(--card-border)}
body.hell hr,body.hell .fuss{border-color:var(--card-border)}
body.hell .fuss{background:#f2eee6}
body.hell .okbox{background:#ecf7ef;border-color:#9fd3ad;color:#1e5a2f}
body.hell .fehlerbox{background:#fdecec;border-color:#f1a9a9;color:#8a1c1c}
body.hell .wahl label.sel,body.hell .kal-eintrag{background:var(--flaeche)}
body.hell .kal-eintrag.kal-eigen{background:color-mix(in srgb,var(--accent) 22%,#fff)}
body.hell .inhalt{padding-top:28px}

/* ---------- Seitenkopf (Startseite: Kopfbild, Titel, Untertitel, Knöpfe) ---------- */
.seiten-kopf{position:relative;margin:0 0 28px;border-radius:.9rem;overflow:hidden;
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 18%,var(--card)),var(--card));
  border:1px solid var(--card-border);padding:32px 22px}
.seiten-kopf h1{margin:0 0 8px}
.kopf-untertitel{margin:0 0 18px;font-size:1.1em;color:var(--text);max-width:40em}
.kopf-knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.kopf-knoepfe .btn{display:inline-block;width:auto;padding:11px 22px;font-size:15px}
.seiten-kopf.mit-bild{padding:0;border:0;min-height:min(72vh,560px);display:flex;align-items:flex-end;background:#111}
.kopf-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.seiten-kopf.mit-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.72) 100%)}
.seiten-kopf.mit-bild .kopf-text{position:relative;z-index:1;padding:28px 20px 30px;max-width:760px}
.seiten-kopf.mit-bild h1,.seiten-kopf.mit-bild .kopf-untertitel{color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
/* N26: die Orte des Webauftritts (So finden Sie uns, Block Anfahrt) — je Ort Name, Zweck als Etikett, Anschrift, Karte. */
.orte{display:grid;gap:30px}
.ort-name{margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px}
.ort-zweck{display:inline-block;font-size:13px;font-weight:600;line-height:1.4;padding:3px 10px;border-radius:999px;
  background:var(--flaeche,var(--card));border:1px solid var(--card-border);color:var(--text);letter-spacing:.01em}
.ort-anschrift{margin:0 0 12px}
@media (min-width:980px){ .orte{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
  /* Nebeneinander auf einer Höhe (22.10.2026, Öcher Shooters: „Die Wegbeschreibungen sollten sauber ausgerichtet
     werden“): Titel, Anschrift und Karte jedes Ortes liegen auf gemeinsamen Zeilen des Rasters — bricht ein Titel um,
     rücken die Nachbarn mit, statt dass die Karten versetzt beginnen. */
  .ort{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0;align-content:start}
  .ort > .ort-name{align-self:start} }
/* N21: Kopfbild hochkant. Handy: Bild oben, Text darunter; PC: Text links, Bild rechts. */
.seiten-kopf.kopf-hoch{display:grid;gap:22px;align-items:center;padding:22px}
.kopf-hoch-bild{position:relative;margin:0;border-radius:.7rem;overflow:hidden;max-width:420px;justify-self:center;width:100%}
.kopf-hoch-bild img{display:block;width:100%;height:auto}
@media (min-width:760px){
  .seiten-kopf.kopf-hoch{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);padding:40px 44px;gap:40px}
  .seiten-kopf.kopf-hoch .kopf-hoch-bild{order:2;justify-self:end}
}
/* Der Bildnachweis steht AM Bild („Foto: …“), klein, aber lesbar. */
.bild-nachweis{position:absolute;right:8px;bottom:6px;z-index:2;font-size:11.5px;line-height:1.3;color:#fff;
  background:rgba(0,0,0,.45);padding:2px 7px;border-radius:3px}

/* ---------- Inhaltsseiten aus Blöcken ---------- */
.inhaltsseite{max-width:1100px;margin:0 auto}
.bloecke{display:flex;flex-direction:column;gap:30px}
.block-text,.block-hinweis{max-width:46em}
.block-text p,.block-text ul{margin:0 0 14px}
.block-text h2,.block-text h3{margin:22px 0 10px}
.block-text>:first-child{margin-top:0}
.block-bild{margin:0}
.bild-rahmen{position:relative;border-radius:.7rem;overflow:hidden;background:var(--card)}
.bild-rahmen img{display:block;width:100%;height:auto}
.block-bild figcaption{font-size:.9em;color:var(--muted);margin-top:6px}
.block-bild-text{display:grid;gap:18px;align-items:center}
.block-bild-text .block-bild{margin:0}
.block-hinweis{background:var(--flaeche,rgba(34,197,94,.08));border-left:4px solid var(--accent);border-radius:.5rem;padding:16px 18px}
.block-hinweis h2{font-size:1.15em;margin:0 0 6px}
.block-hinweis p:last-child{margin-bottom:0}
/* Ein Hinweiskasten mit Link: der ganze Kasten ist die Klickfläche (23.10.2026, Regelwerk
   `ein-hinweiskasten-fuehrt-als-ganzes-weiter`). Das ::after des Links deckt den Kasten, Links im Text liegen darüber. */
.block-hinweis.mit-link{position:relative;transition:box-shadow .15s,border-color .15s}
.block-hinweis .block-ganz{color:inherit}
.block-hinweis .block-ganz::after{content:"";position:absolute;inset:0;border-radius:inherit}
.block-hinweis.mit-link a:not(.block-ganz){position:relative;z-index:1}
.block-hinweis.mit-link:hover{border-left-color:var(--accent-hover);box-shadow:0 4px 14px rgba(0,0,0,.12)}
.block-hinweis.mit-link:hover .block-ganz{color:var(--accent)}
.block-hinweis.mit-link:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.block-hinweis .block-ganz:focus{outline:none}
.block-knopf{margin:0}
.block-knopf .btn{display:inline-block;width:auto;padding:11px 22px}
.block-termine h2,.block-anfahrt h2{margin:0 0 12px}
/* Schritte (22.10.2026): ein Ablauf als Karte, nummeriert; Kasten je Schritt für eine Empfehlung mit Knopf. */
.block-schritte{background:var(--card);border:1px solid var(--card-border);border-radius:.8rem;padding:18px 14px;scroll-margin-top:96px;max-width:52em}
.block-schritte>h2{margin:0 0 14px}
.schritte-einleitung{margin-bottom:18px}
.schritte{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:22px}
.schritt{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px 12px;align-items:start}
.schritt-nr{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--btn-text);font-weight:700}
.schritt-inhalt h3{margin:5px 0 8px;font-size:1.1em}
.schritt-inhalt .block-text p:last-child,.schritt-inhalt .block-text ul:last-child{margin-bottom:0}
.schritt-inhalt>.block-knopf{margin-top:12px}
.schritt-kasten{margin-top:14px;background:var(--flaeche,rgba(34,197,94,.08));border-left:4px solid var(--accent);border-radius:.5rem;padding:14px 16px}
.schritt-kasten h4{margin:0 0 6px;font-size:1.05em}
.schritt-kasten p,.schritt-kasten ul{margin:0 0 10px}
.schritt-kasten .block-knopf{margin:12px 0 0}
/* Galerie (22.10.2026): Raster, groß ansehen über :target, ohne JavaScript. */
.block-galerie>h2{margin:0 0 12px}
.galerie-raster{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.galerie-raster li{margin:0}
.galerie-vorschau{display:block;border-radius:.5rem;overflow:hidden;aspect-ratio:4/3;background:var(--card)}
.galerie-vorschau img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.galerie-vorschau:hover img,.galerie-vorschau:focus-visible img{transform:scale(1.04)}
.galerie-gross{display:none}
.galerie-gross:target{display:flex;position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.9);align-items:center;justify-content:center;padding:48px 12px}
.galerie-gross figure{margin:0;max-width:min(1200px,100%);text-align:center}
.galerie-gross img{max-width:100%;max-height:80vh;width:auto;height:auto;border-radius:.4rem}
.galerie-gross figcaption{color:#fff;margin-top:8px;font-size:.95em}
.galerie-gross figcaption .dezent{color:#ccc}
.galerie-zu{position:absolute;top:10px;right:14px;color:#fff;font-size:28px;text-decoration:none;line-height:1;padding:6px}
.galerie-weiter{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:44px;text-decoration:none;padding:8px 14px}
.galerie-weiter.zurueck{left:4px}
.galerie-weiter.vor{right:4px}
/* Am Handy steht nur die Überschrift neben der Nummer; Text, Kasten und Knopf nehmen die ganze Breite. */
@media (max-width:759px){
  .schritt-inhalt{display:contents}
  .schritt-inhalt>:not(h3){grid-column:1/-1}
  .schritt-inhalt h3{margin:4px 0 0}
  .schritt-kasten{margin-top:6px;padding:12px 14px}
}
@media (min-width:760px){
  .block-bild-text{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px}
  .block-bild-text.bild-rechts .block-bild{order:2}
  .block-schritte{padding:30px 32px}
  .galerie-raster{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
  .schritt{grid-template-columns:36px minmax(0,1fr);column-gap:14px}
  .schritt-nr{width:36px;height:36px}
  .seiten-kopf{padding:44px 40px}
  .seiten-kopf.mit-bild .kopf-text{padding:40px 44px 44px}
}

/* ---------- Terminliste (Block „Nächste Termine“, Startkarten) ---------- */
.termin-liste{list-style:none;margin:0 0 14px;padding:0;display:flex;flex-direction:column;gap:10px}
.termin-zeile{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--card-border);border-radius:.6rem;padding:10px 12px}
.termin-datum{flex:0 0 auto;width:54px;text-align:center;border-radius:.45rem;background:var(--accent);color:var(--btn-text);padding:4px 0;line-height:1.1}
.termin-datum .tag{display:block;font-size:20px;font-weight:700}
.termin-datum .monat{display:block;font-size:12px}
.termin-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.termin-text strong{color:var(--light)}
.termin-zeile form,.termin-zeile>.termin-verband-knopf{margin:0;flex:0 0 auto}
.termin-zeile .badge{margin-top:3px;align-self:flex-start}
/* Am Handy (24.10.2026; Michael: „Termine sehen nicht gerade schön formattiert aus“): Der Knopf rechts quetschte Titel,
   Datum und Ort in eine schmale Spalte („Aldenhove“ abgeschnitten). Unter 600 px steht er unter dem Text, ab der
   Textspalte und so breit wie sie. */
@media (max-width:599px){
  .termin-zeile{flex-wrap:wrap;align-items:flex-start}
  .termin-zeile>form,.termin-zeile>.termin-verband-knopf{flex:1 1 calc(100% - 68px);margin-left:68px}
  .termin-zeile>form .btn{width:100%}
}
/* Event-Tickets (22.10.2026): der Buchungskasten am Termin, die Marke in Listen, die Namen in der Kasse. */
/* Der Kasten steht so breit wie die Terminkarte darüber, die Auswahl ist ein Feld wie jedes andere (eine Feldregel oben)
   und so hoch wie der Knopf daneben (23.10.2026, Befund 148: „Die Grössen passen hier nicht zusammen, weder die Felder,
   noch der Block.“ — vorher 46em breit und das winzige Feld des Browsers). */
.ticket-buchen{background:var(--card);border:1px solid var(--card-border);border-left:4px solid var(--accent);border-radius:.7rem;padding:14px 16px;margin:8px 0 18px}
.ticket-buchen h2{margin:0 0 6px;font-size:1.2em}
.ticket-preis{margin:0 0 10px}
.ticket-form{display:flex;flex-wrap:wrap;align-items:stretch;gap:10px;margin:0 0 10px}
.ticket-form label{margin:0;font-weight:600;align-self:center}
.ticket-form select{width:auto;min-width:5em}
.ticket-form .btn{display:inline-block;width:auto;padding:11px 22px}
.ticket-marke{display:inline-block;align-self:flex-start;width:max-content;max-width:100%;margin:3px 0 0;font-size:.8em;font-weight:600;padding:1px 8px;border-radius:999px;background:var(--flaeche,rgba(34,197,94,.1));color:var(--text);border:1px solid var(--accent);vertical-align:middle;white-space:nowrap}
.ticket-marke.aus{border-color:var(--card-border);color:var(--muted)}
.ticket-namen{border:1px solid var(--card-border);border-radius:.6rem;padding:10px 14px 14px;margin:0 0 12px}
.ticket-namen legend{font-weight:600;padding:0 6px}

/* ---------- Mitgliederbereich: Startkarten ---------- */
/* minmax(0,1fr) statt der Vorgabe `auto`/1fr: eine Spalte wird nie breiter als ihr Platz, ein langer Termin bricht um
   (23.10.2026, Regelwerk `eine-tabelle-macht-die-seite-nie-breiter-als-das-handy` — gemessen 405 px bei 390 px Bildschirm). */
.start-karten{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:6px 0 28px}
.start-karte{background:var(--card);border:1px solid var(--card-border);border-radius:.8rem;padding:18px}
.start-karte h2{margin:0 0 12px}
.ressourcen-knoepfe{list-style:none;margin:0 0 10px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
@media (min-width:860px){.start-karten{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
/* Die Startkarte einstellen (22.10.2026, `die-startkarte-zeigt-die-arten-die-das-mitglied-will`): das Zahnrad oben rechts
   öffnet ein Aufklappfeld mit den Häkchen je Terminvorlage — ohne JavaScript (`<details>`). */
.start-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;position:relative}
.start-anzeige>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;color:var(--muted);border:1px solid transparent}
.start-anzeige>summary::-webkit-details-marker{display:none}
.start-anzeige>summary:hover,.start-anzeige[open]>summary{color:var(--accent);border-color:var(--card-border)}
.start-anzeige>summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.start-anzeige-feld{position:absolute;right:0;top:40px;z-index:5;width:min(320px,calc(100vw - 48px));background:var(--card);border:1px solid var(--card-border);border-radius:.6rem;padding:14px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.anzeige-arten{list-style:none;margin:8px 0;padding:0;display:grid;gap:6px}
.anzeige-arten label{display:flex;align-items:center;gap:8px;cursor:pointer}

/* ---------- Vorstand mit Foto ---------- */
.vorstand-karten{list-style:none;margin:10px 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:18px}
.vorstand-karte{background:var(--card);border:1px solid var(--card-border);border-radius:.8rem;overflow:hidden;display:flex;flex-direction:column}
.vorstand-foto{aspect-ratio:1/1;background:var(--flaeche,rgba(34,197,94,.08));display:flex;align-items:center;justify-content:center}
.vorstand-foto img{width:100%;height:100%;object-fit:cover;display:block}
.initialen{font-size:48px;font-weight:700;color:var(--accent);letter-spacing:.04em}
/* Befund 175 (26.10.2026): Name oben, Amt darunter; die Textfläche füllt die Kachel, alle Kacheln einer Reihe gleich hoch. */
.vorstand-text{padding:12px 14px;display:flex;flex-direction:column;gap:3px;flex:1}
.vorstand-amt{font-size:.8em;line-height:1.35;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}
.vorstand-name{color:var(--light);font-size:1.08em}
@media (max-width:480px){.vorstand-karten{grid-template-columns:1fr 1fr;gap:12px}.initialen{font-size:34px}}
/* Der Satz des Vereins unter den Karten (24.10.2026, `ein-satz-unter-dem-vorstand`) — leise, mit Augenzwinkern. */
.vorstand-unterzeile{margin:18px 0 0;text-align:center;font-style:italic;color:var(--muted)}
.vorstand-unterzeile p{margin:0}
/* „+1“ am Namen in „Wer kommt?“ (24.10.2026, `begleitpersonen-zaehlen-als-plaetze`). */
.zusage-begleitung{font-weight:700;color:var(--accent-hell)}
/* Prüfseite des Schießbuchs (24.10.2026): ein seither stornierter Eintrag ist durchgestrichen. */
#nachweisEintraege tr.storniert td{text-decoration:line-through;opacity:.7}
/* „Wer kommt?“ in der Terminkarte (24.10.2026, Handy-Befund aus Klicktest 67): eine Tippfläche, nicht nur eine Textzeile. */
.termin-wer a{display:inline-flex;align-items:center;min-height:44px;padding:0 4px}
/* Platz abgeben, übernehmen, übergeben (24.10.2026) — Knöpfe mit Abstand, das Übergeben-Feld darunter. */
.termin-abgabe .termin-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:8px 0}
/* ABGEBEN UND ÜBERGEBEN (25.10.2026; Michael: „sieht man sofort, dass die formattierung nicht passt“): je Weg EINE Zeile —
   Bedienung links, das „i“ dahinter; beim Übergeben Auswahl und Knopf nebeneinander, die Auswahl nimmt den Rest. */
/* Knopf und „i“ kommen aus dem Baustein `.mit-info` (info-zeichen.css, 26.10.2026); hier nur, was die Zeile braucht. */
.abgabe-weg{margin:10px 0}
.abgabe-weg .termin-platz{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;min-width:0}
#abgabeWegUebergeben .mit-info{display:flex}
#abgabeWegUebergeben .termin-platz{flex:1 1 auto;max-width:440px}
.abgabe-weg select{flex:1 1 auto;min-width:0;width:auto}
.abgabe-weg .btn{flex:none;margin:0}
.abgabe-weg>p{margin:0}
.termin-platz{display:inline-flex;flex-wrap:wrap;gap:8px;align-items:center}
.termin-platz label{flex-basis:100%;margin:6px 0 0}
.termin-angeboten .termin-platz{margin-left:8px}
/* Der Fuß bleibt ruhig: Spaltenköpfe in der Grundschrift; das helle Mercofina-Zeichen dunkel auf hellem Grund. */
body.hell .fuss h2{font-family:inherit;font-size:14px;letter-spacing:.02em;color:var(--muted);font-weight:600}
body.hell .fuss-mercofina img{filter:invert(1) brightness(.45)}

/* ---------- Termine im Mitgliederbereich und auf der Vereinsseite (20.10.2026, W8/W10) ----------
   Die Termin-Karten (routes/verein.js terminHtml) hatten keine eigene Gestaltung — die Formulare standen roh da. */
.termin{background:var(--card);border:1px solid var(--card-border);border-radius:.7rem;padding:14px 16px;margin:0 0 14px}
.termin h3{margin:0 0 4px}
.termin p{margin:4px 0}
.termin form{margin-top:8px}
/* minmax(0,1fr): ein langes Auswahlfeld zog die Karte am iPhone auf 395 px (23.10.2026, Handy-Prüfung). */
.termin-anmelden{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.termin-anmelden select{max-width:100%}
.termin-anmelden label{display:flex;flex-direction:column;gap:4px;font-size:14px}
/* Häkchen und Name in EINER Zeile (25.10.2026): die Spalte oben setzte das Kästchen allein über den Text. */
.termin-anmelden label.checkbox-inline{flex-direction:row;align-items:center;gap:8px}
/* Der Name eines Felds mit seinem „i“ (html.js `feldName`) — eine Zeile, auch in einer spaltenweisen Beschriftung. */
.feld-name{display:inline-flex;align-items:center;flex-wrap:wrap}
.termin-anmelden input,.termin-anmelden select{padding:8px 10px;border:1px solid var(--card-border);border-radius:.45rem;background-color:var(--input);color:var(--light);font:inherit}
/* Der Pfeil der Auswahl (Befund 172 nebenbei): `background:` oben löschte ihn — jetzt nur die Farbe, Pfeil wie überall. */
.termin-anmelden select{padding-right:32px}
/* EIN HÄKCHEN ALS FELD (26.10.2026; Michael: „Können wir die Felder gleich machen? … Vereinsmunition mit dem Infosymbol“):
   oben der Name mit „i“ wie bei jedem Feld, darunter ein Kasten in Feldoptik mit dem Häkchen — alle Felder gleich hoch. */
.termin-feld{display:flex;flex-direction:column;gap:4px;font-size:14px}
.formular .termin-feld{margin:10px 0 2px;font-size:13.5px;font-weight:600;color:#e5e7eb}
body.hell .formular .termin-feld{color:var(--light)}
.termin-anmelden .haken-feld{display:flex;flex-direction:row;align-items:center;gap:10px;margin:0;padding:8px 12px;cursor:pointer;
  border:1px solid var(--card-border);border-radius:.375rem;background:var(--input);color:var(--light);font-size:14px;font-weight:400}
.termin-anmelden .haken-feld:hover{border-color:var(--accent)}
.termin-anmelden .haken-feld input{width:18px;height:18px;min-height:0;margin:0;padding:0;flex:none;accent-color:var(--accent)}
.termin-anmelden input:not([type=checkbox]):not([type=radio]):not([type=hidden]),.termin-anmelden select,.termin-anmelden .haken-feld{min-height:42px;box-sizing:border-box}
.termin-anmelden .btn,.termin form .btn{width:auto;display:inline-block;padding:9px 22px;justify-self:start}
@media (min-width:760px){.termin-anmelden{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}}
/* Befund 172 (25.10.2026, „Ganze Anordnung nicht so schön“): Hinweise und die Knöpfe gehen über die ganze Breite — vorher
   bekam jeder eine eigene Rasterzelle, der Hinweistext stand als schmale Spalte links, die Knöpfe irgendwo darunter. */
.termin-anmelden>p,.termin-anmelden>.termin-knoepfe{grid-column:1/-1}
.termin-anmelden>.termin-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.termin-anmelden>.termin-knoepfe .btn{margin:0}
/* DIE WUNSCHWAFFE IN EIGENER ZEILE (07.11.2026, `die-wunschwaffe-der-anmeldung-ist-eine-auswahlliste`; Michael: „Am Desktop …
   sieht es auch schrecklich aus!“): Die Haken-Liste stand als hohe Spalte im Raster und zog alle anderen Felder nach unten.
   Jetzt die Listen nebeneinander über die ganze Breite, „+ Waffe“ dahinter; am Handy untereinander. */
.termin-anmelden>.termin-waffen{grid-column:1/-1}
.termin-waffen-listen{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-items:center}
/* „+ Waffe“ steht NEBEN der Liste: ohne den Abstand nach oben, den Knöpfe unter einem Feld bekommen (`.termin-form .btn`). */
.termin-anmelden .termin-waffen-listen>[data-waffe-dazu]{justify-self:start;margin:0}
@media (min-width:760px){.termin-waffen-listen{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}}
body.hell .suche button{background:var(--accent);color:#fff;border-color:var(--accent)}
body.hell .suche input{background:#fff}

/* ---------- Kalender, Termindetail, Zu- und Absagen (20.10.2026, Nacharbeit N2/N7/N13) ----------
   N2, Michael: „dieses Vor zurück und heute [geht] über die ganze Seite.“ — die Leiste ist eine kompakte Knopfgruppe über
   dem Kalender, nicht drei Knöpfe in Seitenbreite. N7: die Detailseite eines Termins mit Plätzen und der Liste, wer zu-
   und wer abgesagt hat (nur für angemeldete Mitglieder). N13: öffentlich eine ruhige Liste statt eines Kalenders. */
.kal-leiste{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;margin:12px 0 10px}
.kal-knoepfe{display:inline-flex;border:1px solid var(--card-border);border-radius:.5rem;overflow:hidden;background:var(--card)}
.kal-knopf{display:inline-block;padding:6px 14px;color:var(--light);font-weight:600;font-size:14px;line-height:1.4;border-right:1px solid var(--card-border)}
.kal-knopf:last-child{border-right:0}
.kal-knopf:hover{background:var(--flaeche,rgba(34,197,94,.12));color:var(--light)}
.kal-titel-leiste{flex:1 1 auto;margin:0;font-size:18px}
.kal-ansichten{display:inline-flex;gap:4px}
.kal-ansichten a{padding:4px 10px;border-radius:.4rem;color:var(--text);font-size:14px}
.kal-ansichten a.aktiv{background:var(--accent);color:var(--btn-text)}
/* Die Liste trägt denselben Umschalter, an derselben Stelle rechts (26.10.2026, `termine-und-kalender-sind-ein-reiter`). */
.kal-leiste-nur-ansicht{justify-content:flex-end}
.termin-liste-gross .termin-zeile{align-items:flex-start;padding:14px 16px}
.termin-beschreibung{margin-top:4px;color:var(--text)}
.termin-text a{color:var(--light)}
.termin-text a:hover{color:var(--accent)}
.hinweis-ruhig{background:var(--card);border:1px solid var(--card-border);border-radius:.6rem;padding:16px 18px}
/* DIE ANGABEN IN DREI ZEILEN (26.10.2026; Michael: „sieht optisch nicht ansprechend und leserlich aus“) — lib/terminKarten.js
   angabenHtml: Wann/Wo groß, dann Art/Plätze/Kosten, dann leiser die Fristen; je Zeile eine Linie dazwischen. Drei feste
   Spalten, damit alles untereinander steht (vorher auto-fit zu je 160 px: Werte brachen um, „Kosten“ stand verwaist). */
.angaben-zeile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 24px;margin:0}
.angaben-zeile+.angaben-zeile{margin-top:14px;padding-top:14px;border-top:1px solid var(--card-border)}
.angaben-zeile dt{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin:0 0 3px}
.angaben-zeile dd{margin:0;color:var(--light);font-weight:600;font-size:16px;line-height:1.35;overflow-wrap:anywhere}
.angaben-haupt dd{font-size:19px}
.angaben-haupt .angabe-breit{grid-column:span 2}
.angabe-zusatz{display:block;margin-top:2px;font-size:14px;font-weight:400;color:var(--text)}
.angaben-haupt .angabe-zusatz{font-size:15px}
.angaben-fristen dt{font-size:11px}
.angaben-fristen dd{font-size:14px;font-weight:500}
@media (max-width:640px){
  .angaben-zeile{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 16px}
  .angaben-haupt{grid-template-columns:minmax(0,1fr)}
  .angaben-haupt .angabe-breit{grid-column:auto}
  .angaben-haupt dd{font-size:17px}
}
.termin-aktionen{display:grid;gap:14px;margin:0 0 24px}
.termin-aktionen .badge{font-size:14px;padding:4px 10px}
.termin-form{max-width:none;margin:0}
.termin-form .btn{margin-top:10px}

/* ---------- Termin-Karten (22.10.2026, lib/terminKarten.js) ----------
   Michael: „Es sollte egal sein, wo man in der Karte klickt, es sollte sich der Termin öffnen.“ Der Titel-Link
   (.karte-link) spannt sich über die ganze Karte; Formulare, Knöpfe und andere Links liegen darüber. Ohne JavaScript. */
.karte-klick{position:relative}
.karte-klick .karte-link::after{content:"";position:absolute;inset:0;z-index:0;border-radius:inherit}
.karte-klick form,.karte-klick button,.karte-klick select,.karte-klick input,.karte-klick label,.karte-klick a:not(.karte-link){position:relative;z-index:1}
.karte-klick:hover{border-color:var(--accent)}
.karte-klick:focus-within .karte-link:focus-visible::after{outline:2px solid var(--accent);outline-offset:-2px}
.termin-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.termin-knoepfe .btn{margin-top:0}
.ort-link{text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.termine-intro{margin:0 0 18px}
.termine-weitere{margin:4px 0 18px}
.termine-weitere>summary{cursor:pointer;font-weight:600;color:var(--light);padding:8px 0}
.termine-weitere[open]>summary{margin-bottom:10px}
.termin-beschreibung-voll{margin:0 0 18px}
/* DIE KARTE DES TERMINS (22.10.2026; Michael: „Der Beschreibungstext sieht nicht so aus als würde er dazu gehören.“):
   Angaben und Beschreibung in EINER Karte, die Beschreibung mit einer Linie abgesetzt; „Anfahrt“ beim Ort. */
.termin-karte{margin:8px 0 18px;padding:18px 20px;background:var(--card);border:1px solid var(--card-border);border-radius:.7rem}
.termin-karte .termin-beschreibung-voll{margin:16px 0 0;padding-top:14px;border-top:1px solid var(--card-border)}
.termin-anfahrt{margin-left:8px;font-size:14px;font-weight:400;white-space:nowrap}
/* Titel und Aufsicht in EINER Zeile (26.10.2026; Michael: „Training übernehmen … auch nach oben geschoben“): rechts neben
   dem Titel, am Handy darunter. */
.termin-titelzeile{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 20px;margin:0 0 6px}
.termin-titelzeile h1{margin:0;flex:1 1 320px;min-width:0}
.termin-titelzeile .termin-aufsicht{margin:0;flex:0 1 auto}
.aufsicht-knoepfe{display:flex;flex-wrap:wrap;gap:8px 10px;align-items:center;margin:4px 0}
.aufsicht-knoepfe .btn{margin:0}
/* Rückwege als Knöpfe mit Abstand (22.10.2026, „kaum auseinanderzuhalten“) — lib/terminKarten.js rueckwegeHtml. */
.rueckwege{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}
/* Ein Feld nur bei einem Wert (shop.js `data-nur-wenn-wert`): ausgeblendet samt Beschriftung — `.formular label` setzt sonst display:block. */
.formular label[hidden]{display:none}
.start-unter{margin:14px 0 8px;font-size:16px}
.start-buchungen{list-style:none;margin:0 0 6px;padding:0;display:grid;gap:6px}
.badge.ok{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--light);border:1px solid var(--accent)}
.badge.aus{background:rgba(156,163,175,.18);color:var(--light);border:1px solid var(--card-border)}
.zusagen{display:grid;gap:16px;margin:0 0 10px}
.zusagen-gruppe h3{margin:0 0 8px;font-size:17px}
.zusagen-gruppe ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
/* Befund 156 (25.10.2026, „Mitglieder hinzufügen ist optisch schrecklich“): Name und Datum links untereinander, „Entfernen“
   rechts mittig in derselben Zeile — vorher brach der Knopf in der schmalen Spalte um und ließ unter jedem Namen eine
   leere Fläche. Das Auswahlfeld „Mitglied hinzufügen“ ist jetzt gestaltet wie jedes Feld (`.formular-zeile`). */
.zusagen-gruppe li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 12px;align-items:center;background:var(--card);border:1px solid var(--card-border);border-radius:.5rem;padding:8px 12px}
.zusagen-gruppe li>.dezent{grid-column:1}
.zusage-name{font-weight:600;color:var(--light);grid-column:1}
/* DAS MITGLIEDSBILD (12.11.2026, `die-aufsicht-erkennt-jedes-mitglied-am-bild`): rund vor dem Namen; „ohne Bild“ als leerer
   Kreis (das Wort steht als Abzeichen daneben). „Mein Bild“ in „Meine Daten“ größer; die Karten der Übersicht. */
.zusage-bild{display:inline-block;width:40px;height:40px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-right:10px;background:var(--card-border)}
.zusage-ohne-bild{border:1px dashed var(--muted);background:transparent}
.mein-bild-zeile{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin:6px 0 12px}
.mein-bild-vorschau{display:inline-block;width:120px;height:120px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--card-border)}
.mein-bild-leer{border:1px dashed var(--muted);background:transparent}
.bild-antwort{display:flex;gap:10px;flex-wrap:wrap;margin-top:10px}
.bild-antwort .btn.aktiv{outline:2px solid var(--accent);outline-offset:2px}
.bild-karte.warn{border-color:#d97706}
.zusage-bemerkung{grid-column:1/-1;color:var(--text)}
.zusagen-gruppe .teilnehmer-entfernen{grid-column:2;grid-row:1/span 2;margin:0}
.zusagen-gruppe .teilnehmer-entfernen .btn{padding:6px 12px}
.zusagen-abgesagt li{opacity:.85}
/* Abgesagter Termin (26.10.2026): jeder Name durchgestrichen, wie der Eintrag im Kalender (.kal-abgesagt). */
.zusagen-termin-abgesagt .zusage-name{text-decoration:line-through;color:var(--muted)}
.zusagen-termin-abgesagt li{opacity:.8}
/* „Ändern“ an der Zeile (26.10.2026, `die-angaben-einer-anmeldung-aendert-der-verein`): unter Name und Datum, aufgeklappt
   über die ganze Breite. */
.zusagen-gruppe .teilnehmer-aendern{grid-column:1/-1}
.teilnehmer-aendern>summary{cursor:pointer;color:var(--accent);display:inline-block;padding:4px 0}
.teilnehmer-aendern .formular-zeile{margin:6px 0 2px}
/* Der Termin als Verwaltung (23.10.2026): „Entfernen“ rechts in der Zeile, „Mitglied hinzufügen“ als eine Zeile, die am
   Handy umbricht; Trainer/Aufsicht mit „Training übernehmen“ über den Zusagen. */
.inline-form{display:inline-block;margin:0}
.teilnehmer-entfernen{margin-left:auto}
.formular-zeile{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.formular-zeile label{flex-basis:100%;margin:0}
.formular-zeile select,.formular-zeile input[type=text]{flex:1 1 200px;min-width:0;width:auto}
.formular-zeile .btn{width:auto;margin:0;align-self:stretch}
.termin-aufsicht{margin:0 0 14px}
.termin-aufsicht p{margin:4px 0}
@media (min-width:860px){.zusagen{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}}

/* ---------- Die Website: Suche klein in der Leiste, Formulare lesbar (20.10.2026, Nacharbeit N3/N8/N10/N12) ----------
   N12, Michael: „Die Suche steht im Vordergrund, das soll sie hier aber nicht. Die soll nach oben in die Leiste.“
   N8: „Die Antragsseite ist leider nicht zu gebrauchen, nicht lesbar und schlecht formatiert.“ — Beschriftung über dem
   Feld, volle Breite, Gruppen als ruhige Karten, mobil einspaltig. N10: im hellen Stil keine hellen Beschriftungen auf
   hellem Grund (vorher #e5e7eb auf Weiß). */
.topbar{align-items:center}
/* Feld und Lupe gleich hoch (22.10.2026, Michael: „Lupe und Suchen Leiste haben unterschiedliche Grössen“): eine feste
   Höhe für beide, gestreckt statt mittig ausgerichtet. */
.suche-klein{display:inline-flex;align-items:stretch;height:30px}
.suche-klein input{width:150px;height:30px;box-sizing:border-box;padding:0 8px;font:inherit;font-size:13px;line-height:1;color:var(--light);background:var(--input);
  border:1px solid var(--card-border);border-right:0;border-radius:.35rem 0 0 .35rem}
.suche-klein button{height:30px;box-sizing:border-box;padding:0 9px;font-size:13px;line-height:1;background:var(--card);border:1px solid var(--card-border);
  border-radius:0 .35rem .35rem 0;cursor:pointer;color:var(--light);display:inline-flex;align-items:center}
.suche-klein input:focus{outline:2px solid var(--accent);outline-offset:1px}
/* Ein gesperrtes Feld (data-nur-wenn) sieht gesperrt aus — samt seiner Beschriftung. */
label:has(> input:disabled){opacity:.55;cursor:not-allowed}
/* DAS MENÜ IN EINER ZEILE (23.10.2026, Michael: „Hast du des Weiteren eine Idee, das obere Menü einzeilig zu bekommen?“):
   Auf der Website steht der Warenkorb in der oberen Leiste (html.js), die Menüpunkte rücken enger zusammen. Wird das Fenster
   schmaler als der Kopf, bekommt das Menü wie mobil eine eigene Zeile unter dem Logo, statt in zwei Zeilen umzubrechen. */
body.website .nav-item>a{padding-left:7px;padding-right:7px}
.wk-leiste{white-space:nowrap}
.wk-leiste .wk-badge{top:-6px;left:-4px;margin-right:2px}
@media (max-width:1199px){
  body.website .kopf{grid-template-columns:1fr auto;grid-template-areas:"logo icons" "nav nav" "suche suche";column-gap:12px}
  body.website .hauptnav{justify-content:center}
}
/* Am Handy klappt das Menü auf (23.10.2026): Knopf „☰ Menü“ rechts neben dem Logo (ein Kontrollkästchen, html.js), das Menü
   darunter als Liste; Unterpunkte erscheinen eingerückt, wenn ihr Eintrag angetippt ist (.offen, shop.js). */
.menue-knopf{display:none}
@media (max-width:900px){
  body.website .kopf{grid-template-areas:"logo knopf" "nav nav"}
  body.website .logo img{height:44px}
  body.website .menue-knopf{grid-area:knopf;display:inline-flex;align-items:center;gap:6px;padding:8px 14px;cursor:pointer;
    font-weight:600;color:var(--light);border:1px solid var(--card-border);border-radius:.5rem;background:var(--card);user-select:none}
  body.website #menueKnopf:focus-visible+.menue-knopf{outline:2px solid var(--accent);outline-offset:2px}
  body.website #menueKnopf:checked+.menue-knopf{background:var(--flaeche,var(--card));border-color:var(--accent)}
  body.website .hauptnav{display:none;flex-direction:column;border-top:0;margin-top:10px}
  body.website #menueKnopf:checked~.hauptnav{display:flex}
  body.website .nav-item{border-top:1px solid var(--card-border)}
  body.website .nav-item>a{padding:12px 4px;border-bottom:0;-webkit-tap-highlight-color:transparent}
  body.website .nav-item.aktiv>a{color:var(--accent)}
  body.website .nav-menu{position:static;min-width:0;box-shadow:none;border:0;border-radius:0;padding:0 0 8px 16px;background:none}
  body.website .nav-item:hover .nav-menu,body.website .nav-item:focus-within .nav-menu{display:none}
  body.website .nav-item.offen .nav-menu{display:block}
  body.website .nav-menu a{padding:8px 4px}
}
body.hell .topbar{font-size:14px}
body.hell .topbar .trenner{color:var(--card-border)}
body.hell .formular label{color:var(--light)}
body.hell .formular ::placeholder{color:#6b6f76}
body.hell .formular input[type=date],body.hell .formular input[type=time],body.hell .formular input[type=datetime-local]{color-scheme:light}
body.hell .dezent{color:var(--muted)}

#antragFormular{max-width:860px}
#antragFormular .zeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 16px}
#antragFormular .antrag-rest>label,#antragFormular .zeile>label{display:flex;flex-direction:column;gap:5px;margin:12px 0 0;font-size:15px;font-weight:600}
#antragFormular label>input:not([type=checkbox]):not([type=radio]),#antragFormular label>textarea,#antragFormular label>select{font-weight:400;font-size:16px;padding:10px 12px}
#antragFormular fieldset{border:1px solid var(--card-border);border-radius:.7rem;padding:12px 16px 16px;margin:20px 0 0;background:var(--bg)}
#antragFormular legend{padding:0 6px;font-weight:700;color:var(--light);font-size:16px}
#antragFormular label.wahl{display:flex;flex-direction:row;align-items:flex-start;gap:10px;margin:10px 0 0;font-weight:500;font-size:15px;
  background:none;border:0;padding:0;cursor:pointer;color:var(--text)}
#antragFormular label.wahl input{margin-top:5px;flex:0 0 auto;accent-color:var(--accent);width:18px;height:18px}
#antragFormular .mitgliedsarten label.wahl{justify-content:flex-start}
#antragFormular .mitgliedsarten label.wahl .dezent{margin-left:auto;white-space:nowrap}
#antragFormular fieldset>p{margin:10px 0 0}
#antragFormular fieldset>p label.wahl{display:inline-flex;margin:0 0 0 14px}
#antragFormular button[type=submit]{margin-top:20px;width:auto;display:inline-block;padding:12px 28px;font-size:16px}
@media (max-width:560px){
  #antragFormular .mitgliedsarten label.wahl{flex-wrap:wrap}
  #antragFormular .mitgliedsarten label.wahl .dezent{margin-left:28px;flex-basis:100%}
  .suche-klein input{width:110px}
}
.termin-aktionen .badge{justify-self:start}
#antragFormular input:not([type=checkbox]):not([type=radio]),#antragFormular textarea,#antragFormular select{border-color:color-mix(in srgb,var(--text) 28%,var(--card))}
/* N25 f: Erst kennenlernen, dann Antrag. Ohne den Schalter ist der Rest grau und nicht bedienbar (ohne JavaScript, über
   :has); der Schalter selbst ist Pflichtfeld. */
.antrag-kennenlernen{border:1px solid var(--card-border);border-left:4px solid var(--accent);border-radius:.6rem;padding:12px 16px;margin:4px 0 8px;background:var(--flaeche,var(--bg))}
.antrag-kennenlernen label.wahl{margin-top:0}
.antrag-kennenlernen p{margin:8px 0 0 28px}
#antragFormular:has(#ma-kennengelernt:not(:checked)) .antrag-gesperrt{opacity:.4;filter:grayscale(1);pointer-events:none;user-select:none}
#antragFormular:has(#ma-kennengelernt:checked) #ma-kennenlernen-hinweis{display:none}
/* N10: Tage des Nachbarmonats ruhiger, aber lesbar — nicht mehr das ganze Feld auf 45 % Deckkraft. */
.kal-fremd{opacity:1;background:color-mix(in srgb,var(--card) 70%,var(--bg))}
.kal-fremd .kal-nr{color:var(--muted)}
body.hell .fuss-mercofina{opacity:1}

/* ---------- Blöcke „Beiträge“ und „Download“ (20.10.2026, Nacharbeit N17) ---------- */
.block-beitraege{max-width:46em}
.block-beitraege h2{margin:0 0 10px}
.beitrag-tabelle{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--card-border);border-radius:.6rem;overflow:hidden}
.beitrag-tabelle th,.beitrag-tabelle td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--card-border)}
.beitrag-tabelle tr:last-child th,.beitrag-tabelle tr:last-child td{border-bottom:0}
.beitrag-tabelle th{font-weight:600;color:var(--light)}
.beitrag-tabelle td{white-space:nowrap;text-align:right;font-variant-numeric:tabular-nums;color:var(--light)}
.block-download{margin:0}
.download-link{display:inline-flex;align-items:center;gap:12px;padding:10px 16px 10px 10px;background:var(--card);border:1px solid var(--card-border);border-radius:.6rem;color:var(--light)}
.download-link:hover{border-color:var(--accent);color:var(--light)}
.download-zeichen{flex:0 0 auto;font-size:12px;font-weight:700;letter-spacing:.05em;color:var(--btn-text);background:var(--accent);border-radius:.35rem;padding:8px 7px}
.download-text{display:flex;flex-direction:column}

/* ---------- Der Mitgliederbereich (22.10.2026, Regelwerk `der-mitgliederbereich-ist-die-startseite-des-mitglieds`) ----------
   Michael: „links eine Liste mit der Navigation, rechts immer die Anzeige, worum es geht“ — wie die Verein-Seite in
   Mercofina. Auf dem Handy wird die Liste zu einer Leiste oben, die sich seitlich schieben lässt. */
.mb-rahmen{display:grid;grid-template-columns:220px minmax(0,1fr);gap:32px;align-items:start}
.mb-nav{position:sticky;top:16px;background:var(--card);border:1px solid var(--card-border);border-radius:.6rem;padding:12px 10px}
.mb-nav ul{list-style:none;margin:0;padding:0}
.mb-nav li a{display:block;padding:8px 12px;border-radius:.4rem;color:var(--text);text-decoration:none}
.mb-nav li a:hover{background:var(--flaeche,rgba(255,255,255,.06));color:var(--light)}
.mb-nav li a.aktiv{background:var(--accent);color:var(--btn-text);font-weight:600}
.mb-nav .mb-wer{margin:2px 12px 10px}
.mb-nav .mb-nav-fuss{border-top:1px solid var(--card-border);margin-top:10px;padding-top:8px}
.mb-nav .mb-nav-fuss a{font-size:14px;color:var(--muted)}
.mb-inhalt > h1:first-child{margin-top:0}
.mb-gruss{font-size:1.15em;margin:0 0 14px}
.mb-frage{margin:0 0 16px}
/* AM HANDY EINE LEISTE UNTEN (23.10.2026, Regelwerk `der-mitgliederbereich-ist-die-startseite-des-mitglieds` NACHTRAG;
   Michael zur Wisch-Leiste oben: „dieses Untermenü ist auf dem Handy nicht schön“ — „Ja, das klingt gut, mit der Liste
   unten. Das passt für jeden.“): Website, Übersicht, Termine, Kalender, „Mehr“ — wie die Leiste in Mercofina GO. */
.mb-leiste{display:none}
.tb-konto{display:contents}
.wochen-wischen{display:none}
@media (max-width:820px){
  /* Mit der Leiste unten stehen „Meine Daten“ und „Abmelden“ unter „Mehr“ — die obere Leiste bleibt einzeilig. */
  body:has(.mb-leiste) .tb-konto{display:none}
  .wochen-wischen{display:block}
  .mb-rahmen{grid-template-columns:minmax(0,1fr);gap:18px}
  .mb-nav{display:none}
  body:has(.mb-leiste){padding-bottom:calc(72px + env(safe-area-inset-bottom,0px))}
  .mb-leiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--card);border-top:1px solid var(--card-border);
    padding:4px 4px calc(4px + env(safe-area-inset-bottom,0px));box-shadow:0 -4px 16px rgba(0,0,0,.08)}
  .mb-leiste>a,.mb-mehr>summary{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:56px;
    padding:6px 2px;border-radius:.6rem;font-size:12px;line-height:1.2;color:var(--muted);text-decoration:none;cursor:pointer;position:relative}
  .mb-leiste>a{flex:1 1 0;min-width:0}
  .mb-mehr{flex:1 1 0;min-width:0}
  .mb-mehr>summary{list-style:none}
  .mb-mehr>summary::-webkit-details-marker{display:none}
  .mb-leiste>a.aktiv,.mb-mehr>summary.aktiv,.mb-mehr[open]>summary{color:var(--accent);font-weight:600}
  .mb-leiste>a.aktiv::before,.mb-mehr>summary.aktiv::before{content:"";position:absolute;top:0;left:22%;right:22%;height:3px;border-radius:0 0 3px 3px;background:var(--accent)}
  .mb-zahl{position:absolute;top:4px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--accent);
    color:var(--btn-text);font-size:11px;font-weight:700;line-height:18px;text-align:center}
  .mb-mehr-liste{position:absolute;left:8px;right:8px;bottom:calc(100% + 6px);background:var(--card);border:1px solid var(--card-border);
    border-radius:.8rem;box-shadow:0 -8px 28px rgba(0,0,0,.18);padding:6px;max-height:70vh;overflow-y:auto}
  .mb-mehr-liste a{display:block;padding:12px 14px;border-radius:.5rem;color:var(--text);text-decoration:none}
  .mb-mehr-liste a.aktiv{background:var(--accent);color:var(--btn-text);font-weight:600}
  .mb-mehr-liste .mb-mehr-fuss{font-size:14px;color:var(--muted)}
  .mb-mehr-trenner{border:0;border-top:1px solid var(--card-border);margin:4px 8px}
}
/* ---------- Die Schritte des Mitgliedsantrags (22.10.2026, Michael: „mit dem Formular“) ---------- */
.antrag-leiste{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;counter-reset:none}
.antrag-leiste li{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:15px}
.antrag-leiste .nr{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;
  border:2px solid var(--card-border);font-weight:700;font-size:14px;background:var(--card)}
.antrag-leiste li.aktiv{color:var(--light);font-weight:600}
.antrag-leiste li.aktiv .nr{background:var(--accent);border-color:var(--accent);color:var(--btn-text)}
.antrag-leiste li.erledigt .nr{border-color:var(--accent);color:var(--accent)}
.antrag-formular .antrag-abschnitt{margin-top:18px}
.ma-beitrag-satz{margin:4px 0 0;font-size:1.05em}

/* ---------- Als App installieren (/app, 23.10.2026 — Michael: „eine schöne Bedienungsanleitung“) ----------
   Die Handgriffe je Gerät kommen aus frontend/js/appInstallieren.js; hier nur, wie sie aussehen. */
.app-seite{max-width:760px}
.app-einleitung{font-size:1.1em;margin:0 0 18px}
.app-schon{display:inline-block;margin:0 0 16px;padding:6px 14px;border-radius:999px;border:1px solid var(--accent);color:var(--accent);font-weight:600}
.app-schon[hidden]{display:none}
.app-karte{background:var(--card);border:1px solid var(--card-border);border-radius:12px;padding:20px 22px;margin:0 0 18px}
.app-karte>h2{margin:0 0 12px}
.app-geraet>h3{margin:0 0 8px;font-size:1.05em}
.app-schritte{list-style:none;counter-reset:schritt;margin:0;padding:0}
.app-schritte>li{counter-increment:schritt;position:relative;padding:3px 0 3px 42px;margin:0 0 12px}
.app-schritte>li::before{content:counter(schritt);position:absolute;left:0;top:0;width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:var(--btn-text);font-weight:700;font-size:14px;display:flex;align-items:center;justify-content:center}
.app-wege{margin:8px 0 0;padding-left:18px}
.app-wege>li{margin:0 0 6px}
.app-symbol{width:1.15em;height:1.15em;vertical-align:-.2em;color:var(--accent)}
.app-hinweis{color:var(--muted);margin:4px 0 0}
.app-knopf{margin:0 0 16px}
.app-knopf .btn{display:inline-block;width:auto;padding:11px 22px}
.app-knopf[hidden]{display:none}
.app-weitere{margin-top:18px;border-top:1px solid var(--card-border);padding-top:10px}
.app-weitere>summary{cursor:pointer;font-weight:600;color:var(--light);padding:6px 0}
.app-weitere .app-geraet{margin-top:16px}
.app-wissen{margin:0;padding-left:20px}
.app-wissen>li{margin:0 0 8px}
@media (max-width:600px){.app-karte{padding:16px}}

/* DER CODE IN DER ANMELDE-KARTE (23.10.2026, shop/routes/konto.js `loginFormular`). */
.konto-code-auf{margin-top:14px;border-top:1px solid var(--card-border);padding-top:10px}
.konto-code-auf>summary{cursor:pointer;color:var(--accent);font-weight:600}
.konto-code-auf[open]>summary{margin-bottom:6px}

/* DIE OBERE LEISTE AM HANDY: ERST DIE WEGE, DARUNTER DIE SUCHE (23.10.2026; Michael: „Wäre es möglich, das Menü mobil
   so umzubrechen, dass es oben ist, und die Suchleiste darunter? Sähe viel schöner aus“). Vorher brach „Anmelden“ allein
   in eine zweite Zeile. Nur die Reihenfolge: die Suche wird die letzte Zeile in voller Breite, ihr Trennstrich fällt weg. */
@media (max-width:640px){
  .topbar .suche-klein{order:2;flex-basis:100%;display:flex;margin-top:6px}
  .topbar .suche-klein input{flex:1;width:auto;min-width:0}
  .topbar .suche-klein+.trenner{display:none}
}

/* NEUE VERSION in der installierten App (23.10.2026, frontend/js/neuerStand.js, als /assets/neuer-stand.js). */
.neuer-stand{position:fixed;left:8px;right:8px;top:8px;z-index:200;display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:10px 12px;border-radius:12px;background:var(--card);border:1px solid var(--accent);color:var(--text);box-shadow:0 8px 24px rgba(0,0,0,.18)}
.neuer-stand>span{flex:1 1 160px}
.neuer-stand button{border-radius:9px;padding:8px 12px;font:inherit;font-weight:600;cursor:pointer}
.neuer-stand-laden{background:var(--accent);color:var(--btn-text);border:0}
.neuer-stand-spaeter{background:none;color:var(--muted);border:1px solid var(--card-border)}

/* AM HANDY (23.10.2026, Mobil-Messung der ganzen Website): Eingabefelder mindestens 16 px, darunter zoomt iOS beim Antippen
   hinein; Tippziele in der Leiste oben, im Fuß und am Mercofina-Zeichen mindestens 40 px hoch; Kleingedrucktes 12 px. */
@media (max-width:600px){
  /* !important (23.10.2026, Handy-Prüfung): sonst gewann jede Regel mit Klasse — `.termin-anmelden select{font:inherit}`
     blieb bei 14 px, und das iPhone zoomte beim Antippen. Diese eine Regel soll am Handy ausnahmslos gelten. */
  input:not([type=checkbox]):not([type=radio]):not([type=file]),select,textarea{font-size:16px !important}
  .topbar a{display:inline-flex;align-items:center;min-height:40px}
  .fuss-innen a{padding:10px 0}
  .fuss-mercofina a{padding:14px 6px}
  .fuss-sternchen,.fuss-mercofina{font-size:12px}
  /* „Vertrag widerrufen“ im Fuß ist ein Tippziel wie jedes andere (war 38 px hoch). */
  .fuss-unten .btn{padding:11px 26px}
  .rechtstext small{font-size:12px}
}
/* Ja/Nein-Fragen im Mitgliedsantrag (23.10.2026): die Antworten als eigene Zeile unter der Frage, nebeneinander. */
.ja-nein{display:flex;flex-wrap:wrap;gap:8px 22px;margin:-2px 0 14px}
.ja-nein label{display:inline-flex;align-items:center;gap:8px;margin:0;font-weight:500;cursor:pointer;min-height:40px}

/* DIE UNTERSCHRIFTSFLÄCHE (24.10.2026, `der-leihschein-wird-am-handy-unterschrieben`): Papier zum Unterschreiben — weiß in
   beiden Erscheinungen, volle Breite, der Finger zieht die Seite nicht mit. */
.unterschrift-feld { display: block; width: 100%; height: auto; aspect-ratio: 640 / 180; background: #fff; border: 1px solid var(--line, #ccc); border-radius: 10px; touch-action: none; margin: 6px 0; }

/* MEINE WAFFEN (24.10.2026, `meine-waffen-nur-nach-zustimmung`): der Text der Zustimmung lesbar abgesetzt, je WBK eine Karte. */
.mw-text { max-width: 68ch; }
.mw-wbk { border: 1px solid var(--line, #ccc); border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.mw-wbk h3 { margin: 0 0 4px; }
.mw-widerruf, .mw-neu, .mw-zeile, .mw-text-alt { margin: 12px 0; }

/* WAS NOCH OFFEN IST (24.10.2026): über den Bestellungen; „überfällig“ fett, in der Schriftfarbe (Kontrast in beiden Stilen). */
.best-offen { margin: 0 0 18px; }
.best-ueberfaellig { font-weight: 700; }

/* SOFORT FILTERN (24.10.2026, shop.js `data-sofort`): „Anzeigen“ braucht es nur ohne JavaScript — `.btn` setzt sonst `display`. */
[data-ohne-js][hidden] { display: none; }
/* Jahr und Stand je eine Zeile, die Sortierung teilt ihre mit „Zurücksetzen“ — auch am schmalen Handy (24.10.2026). */
.best-filter select[name="jahr"], .best-filter select[name="stand"] { flex-basis: 100%; }
.best-filter select[name="sort"] { flex-basis: 120px; }
.best-filter .btn { flex: none; }

/* DER LEIHSCHEIN, EINFACH (24.10.2026 nachts): erst die Wahl, dann je eingetragener Waffe ein Block; Knöpfe in einer Zeile. */
.leihe-art { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; }
.leihe-art .btn { flex: 1 1 220px; text-align: center; }
.ls-waffe { border-top: 1px solid var(--card-border); padding-top: 10px; margin-top: 10px; }
.ls-waffe:first-child { border-top: 0; padding-top: 0; margin-top: 0; }
.ls-frei summary { cursor: pointer; margin: 10px 0; }
.ls-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
#lsWeitere { margin-top: 12px; }

/* DAS „?“ IM KOPF (24.10.2026): Form und Größe stehen seit dem 25.10.2026 in EINER Datei für alle Oberflächen —
   frontend/css/hilfe-knopf.css, hier als /assets/hilfe-knopf.css (Regelwerk `ein-hilfe-zugang`). Hier nur, was das
   helle Aussehen des Webauftritts anders nennt: die Schrift im Menü. */
body.hell .hilfe-knopf{--hk-text:var(--text)}
/* Die Hilfe selbst: der Inhalt oben als Liste, das Kapitel darunter; die Nummern gehören dem gedruckten Handbuch. */
.mb-hilfe-inhalt ul{margin:0 0 22px;padding-left:20px;columns:2 240px;column-gap:28px}
.mb-hilfe-inhalt li{margin:0 0 6px;break-inside:avoid}
.mb-hilfe .nr{display:none}
.mb-hilfe h2{margin-top:30px;scroll-margin-top:16px}
.mb-hilfe h3{margin-top:20px}
.mb-hilfe img{display:block;max-width:100%;height:auto;border:1px solid var(--card-border);border-radius:.5rem}
.mb-hilfe figure{margin:14px 0}
.mb-hilfe figcaption{font-size:13px;color:var(--muted);margin-top:6px}
.mb-hilfe blockquote{margin:14px 0;padding:10px 14px;border-left:3px solid var(--accent);background:var(--card);border-radius:.4rem}
.mb-hilfe ol,.mb-hilfe ul{padding-left:22px}
.mb-hilfe li{margin:0 0 6px}
.mb-hilfe .tabellenrahmen{overflow-x:auto;max-width:100%}
/* Zwei Knöpfe nebeneinander (nach dem Melden: zurück zur Seite, noch etwas melden), am Handy untereinander. */
.knopf-reihe{display:flex;flex-wrap:wrap;gap:10px}
/* „+ Umfrage“ / „+ Beschluss“ im Mitgliederbereich (26.10.2026, Befund 171): ein aufklappbares Formular über der Liste. */
/* Kalender-Abo (26.10.2026): „abonnieren“ mit „i“ und „Link kopieren“ mit Luft dazwischen — am iPhone lag das „i“ sonst
   zu dicht am zweiten Knopf (Klicktest 67, Handy-Messung). */
.kalender-abo-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:12px}
.neu-anlegen{margin:0 0 18px}
.neu-anlegen>summary{list-style:none;display:inline-flex;cursor:pointer}
.neu-anlegen>summary::-webkit-details-marker{display:none}
.neu-anlegen[open]>summary{margin-bottom:12px}

/* DAS INNERE (06.11.2026, Regelwerk `das-innere-sagt-was-es-ist`): dieselben Wörter wie in Mercofina. Eine Stelle sagt, was etwas ist; die Maße stehen nur hier. */
.nah{margin:8px 0 0}                 /* gehört zum Teil darüber */
.abschnitt{margin-top:16px}          /* beginnt etwas Neues */
.abstand-unten{margin:0 0 8px}
.ohne-rand{margin:0}
.buendig{margin-top:0}
.mittel{font-weight:500}
.fett{font-weight:600}
.betont{font-size:16px}
.mitte{text-align:center}
.rechts{text-align:right}
.ganz{width:100%}
.nowrap{white-space:nowrap}
.feld-auto{display:inline-block;width:auto}
.bild-klein{height:48px;object-fit:contain}
.abstand-gross{margin:0 0 16px}
.daneben{margin-left:10px}
.block{display:block}
.duenn{font-weight:400}
.zeilenweise{white-space:pre-line}
.spalte-bild{width:64px}
.links-buendig{justify-content:flex-start}
.normal-gross{font-size:1rem}
.leere-seite{padding:80px 0}
.text-seite{max-width:820px}
.seite-breit{max-width:1200px}
.zeichen-rund{width:28px;height:28px;flex:0 0 auto}
.ton-rot{color:#fca5a5}
.zeile-zwischen{display:flex;gap:14px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.knopf-eng{padding:7px 14px}

/* DIE RÜCKFRAGE (13.11.2026, `alle-fenster-sind-gleich`, shop.js `mercofinaFrage`): dieselbe Form wie in Mercofina — 560 px
   breit, Kopf 12/24 mit Titel 20 px und ✕ 34 × 34, Inhalt 16/24, Fuß 12/24 mit dem Hauptknopf rechts; am Handy 8 px Rand
   zum Bildschirm, 16 px innen, der Knopf über die volle Breite. Ersetzt `confirm()`/`alert()` im Mitgliederbereich. */
dialog.rueckfrage{width:min(560px,calc(100vw - 32px));max-height:calc(100dvh - 32px);padding:0;border:1px solid var(--card-border);
  border-radius:12px;background:var(--card);color:var(--text);display:flex;flex-direction:column;overflow:hidden}
dialog.rueckfrage:not([open]){display:none}
dialog.rueckfrage::backdrop{background:rgba(0,0,0,.6)}
.rueckfrage-kopf{display:flex;align-items:center;gap:12px;padding:12px 24px;border-bottom:1px solid var(--card-border)}
.rueckfrage-kopf h2{flex:1 1 0;min-width:0;margin:0;font-size:20px;font-weight:700;color:var(--light);overflow-wrap:anywhere}
.rueckfrage-x{flex:none;width:34px;height:34px;padding:0;border:1px solid var(--card-border);border-radius:8px;background:transparent;
  color:var(--text);font-size:16px;line-height:1;cursor:pointer}
.rueckfrage-x:hover{background:rgba(34,197,94,.12)}
.rueckfrage-inhalt{padding:16px 24px;overflow:auto}
.rueckfrage-inhalt p{margin:0;white-space:pre-line}
.rueckfrage-inhalt p+p{margin-top:12px}
.rueckfrage-fuss{display:flex;justify-content:flex-end;padding:12px 24px;border-top:1px solid var(--card-border)}
/* Die Bildansicht (14.11.2026, shop.js `data-bildansicht`): dasselbe Fenster, breiter, das Bild passt hinein. */
dialog.rueckfrage.bildansicht{width:min(1100px,calc(100vw - 32px))}
.bildansicht .rueckfrage-inhalt{display:flex;justify-content:center;padding:8px}
.bildansicht .rueckfrage-inhalt img{display:block;max-width:100%;max-height:calc(100dvh - 120px);object-fit:contain}
@media (max-width:640px){
  dialog.rueckfrage,dialog.rueckfrage.bildansicht{width:calc(100vw - 16px);max-height:calc(100dvh - 16px)}
  .rueckfrage-kopf,.rueckfrage-inhalt,.rueckfrage-fuss{padding-left:16px;padding-right:16px}
  .rueckfrage-fuss>.btn{width:100%}
}