:root{
  /* Der Grund: ein Mintton, kein Weiss. Er traegt die Karten, und auf ihm
     wirkt Weiss als Flaeche - auf weissem Grund waere eine weisse Karte
     unsichtbar und braeuchte einen Rahmen, um ueberhaupt dazusein. */
  --grund:#eef6f6; --blatt:#fff; --linie:rgba(1,74,80,0.12); --text:#16211f;
  --leise:#59685f; --akzent:#045a62; --warnung:#9b2c2c;

  /* Die Flaeche einer Karte ist DURCHSCHEINEND, nicht weiss. Dadurch nimmt
     sie etwas vom Grund auf und sitzt darin, statt darauf zu kleben. */
  --flaeche:rgba(255,255,255,0.62);
  --schatten:190,40%,30%;

  /* Zwei verschwommene Farbkreise hinter dem Inhalt. Sie sind der Grund,
     warum die Anmeldeseite von repro.dog nicht flach wirkt - ein Verlauf
     haette eine Richtung, zwei Kreise haben eine Tiefe. */
  --schimmer-a:rgba(95,197,219,0.30);
  --schimmer-b:rgba(248,153,33,0.14);

  /* Der Knopf traegt einen Verlauf statt einer Flaeche. Bei einem einzigen
     grossen Knopf je Seite ist das der Unterschied zwischen "angeklickt
     werden" und "da sein". */
  --knopf-von:#017f88; --knopf-bis:#024a52;
}
@media (prefers-color-scheme: dark){:root{
  --grund:#0a1a1c; --blatt:#132a2e; --linie:rgba(150,210,214,0.14); --text:#e9f1ee;
  --leise:#9aaaa2; --akzent:#5fd3dd; --warnung:#f08c8c;
  --flaeche:rgba(19,42,46,0.6);
  --schatten:190,60%,2%;
  --schimmer-a:rgba(95,197,219,0.14);
  --schimmer-b:rgba(248,153,33,0.10);
  --knopf-von:#5fd3dd; --knopf-bis:#2ba7b4;
}}

/* ---------- Umgebungsband (views/umgebungsband.js) ---------- */
/* Nur dev, demo und "unbekannt" tragen es, die Produktion nie. Es laeuft im
   Fluss ganz oben und bleibt beim Scrollen stehen - fixed haette es ueber den
   Inhalt gelegt, und ein Band, das die erste Zeile verdeckt, wird
   abgeschaltet.

   Bauweise und Farben sind die der Samenbank (views/styles.js), damit Gregor
   dasselbe Band nicht zweimal lesen lernen muss: gelb fuer Entwicklung, blau
   fuer Demo, rot fuer "nicht zuzuordnen". */
.umgebungsband{
  position:sticky; top:0; z-index:60;
  min-height:1.7rem; padding:0 0.6rem; text-align:center;
  display:flex; align-items:center; justify-content:center; gap:0.5rem;
  font-size:0.68rem; font-weight:700; letter-spacing:0.07em;
  text-transform:uppercase;
  border-bottom:1px solid rgba(0,0,0,0.2);
}
.umgebungsband-punkt{
  width:7px; height:7px; border-radius:50%;
  background:currentColor; opacity:0.5; flex-shrink:0;
}
/* Zwei Umgebungen, die gleich aussehen, verwechselt man genauso wie zwei
   ohne Band.
   
   Jede der drei traegt ihre Farbe SELBST - auch dev, das sie bis zum
   22.10.2026 aus der Grundregel oben bezog. Das sah gleich aus und war doch
   anders: Die Grundregel galt fuer jede Umgebung, die keine eigene Zeile
   hatte, also auch fuer eine vierte, die jemand ergaenzt. Sie haette
   stillschweigend wie dev ausgesehen - auf einem Band, dessen ganzer Zweck
   es ist, Umgebungen auseinanderzuhalten. Gefunden hat es die
   Klassenpruefung in test/seminarBenutzer.test.js. */
.umgebungsband-dev{ color:#2a1c00; background:#f6c667; }
.umgebungsband-demo{ color:#062a33; background:#93dced; }
.umgebungsband-unbekannt{ color:#fff; background:#a8322a; }
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--text);
  font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
/* Der Kopf traegt dieselbe durchscheinende Flaeche wie die Karten. Mit
   reinem Weiss stand er als Streifen ueber dem Grund, mit einer harten
   Kante - und die Seite zerfiel in "Kopf" und "Rest". */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px;border-bottom:1px solid var(--linie);
  background:var(--flaeche);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  position:sticky; top:0; z-index:50}
/* Mit Umgebungsband klebt der Kopf darunter, nicht am Fensterrand. */
body:has(.umgebungsband) .kopf{top:1.7rem}
/* Das Logo im Kopf.
   
   Bis zum 22.10.2026 hiess es .marke - genau wie die Status-Pillen weiter
   unten im Stylesheet. Die spaetere Regel gewann, und das Logo bekam deren
   Aussehen: einen Rahmen und die Pillenform border-radius:99px. Gregor sah
   den Unterschied zu repro.dog sofort ("Bei repro.dog ist keine Umrandung
   da, daher wirkt es anders") - und es war keine Gestaltungsfrage, sondern
   eine Kaskadenkollision.
   
   Zwei Dinge haetten sie verhindert: ein Name, der die SACHE nennt statt
   ihre Gattung (ein Logo ist keine "Marke" im Sinne eines Etiketts), und
   ein Waechter, der doppelte Selektoren findet - er steht jetzt in
   test/seminarStilKollision.test.js.

   Der Abstand ist 0.9rem, nicht 0.65 wie in der Samenbank. Gregors Blick
   vom 22.10.2026 vormittags: "sieht zu nah am Text aus bei seminar". Der
   Grund steckt im Wort: Unsere Marke beginnt mit dem leisen, duennen
   "seminar." - die der Samenbank mit dem kraeftigen "repro". Ein feiner Text
   direkt neben einem dunklen Kasten draengt sich optisch.

   Dieser Wunsch war drei Tage lang wirkungslos. Er stand in einer Regel
   ".kopf .marke", und am Abend desselben Tages wurde das Logo in .kopfmarke
   umbenannt (siehe oben) - die alte Regel traf danach nichts mehr, und hier
   stand wieder 0.55rem. Gemessen am 25.10.2026: 8,8 px. Gefunden hat es erst
   der Abgleich jeder Regel gegen die echten Seiten im Browser (greg-157);
   der Kollisionswaechter sucht doppelte Selektoren, keine verwaisten.
   test/seminarKopf.test.js prueft jetzt, dass jede Regel unter .kopf etwas
   trifft, das der Kopf auch enthaelt.

   flex:none: Die Marke gibt keinen Platz ab - wird es eng, kuerzt der Name
   rechts (a.wer), nicht das Logo. */
.kopfmarke{display:inline-flex;align-items:center;gap:.9rem;flex:none;
  font-weight:600;color:var(--text);text-decoration:none}
.kopfmarke:hover{opacity:.85}
/* Der Kopf lief auf Telefonbreite ueber den Rand (greg-157, gemessen am
   25.10.2026 in WebKit und Chrome): Marke 173 px, Name und "Abmelden" 216 px,
   mit den Raendern 445 px - auf 390 px stand "Abmelden" halb draussen, auf
   JEDER Verwaltungsseite, und die Seite liess sich seitlich schieben. Nichts
   darin konnte schrumpfen: Der Name stand auf nowrap, und ein Flex-Element
   wird nie schmaler als sein Inhalt, solange min-width nicht 0 ist.

   Jetzt in zwei Stufen:
   1. Unter 520 px steht nur das Zeichen, die Wortmarke wird ausgeblendet -
      fuer das Auge, nicht fuer den Vorleser: Das Zeichen ist aria-hidden,
      und ohne die Wortmarke haette der Link zur Uebersicht keinen Namen.
      Nur im Kopf MIT Anmeldung (:has(.kopfrechts)): Die oeffentlichen Seiten
      haben rechts nichts und behalten die volle Marke.
   2. Reicht es dann noch nicht - ein langer Name auf 320 px -, kuerzt der
      Name mit "...". Er ist der eigene, man erkennt ihn auch gekuerzt.
   Umbrechen in eine zweite Zeile waere die dritte Moeglichkeit gewesen; der
   Kopf klebt oben, und eine doppelt hohe Leiste kostet auf dem Telefon bei
   jedem Scrollen ein Achtel des Bildschirms. */
.kopfrechts{display:flex;align-items:center;gap:12px;min-width:0}
.abmelden{display:flex;align-items:center;gap:10px;margin:0;flex:none}
@media (max-width:520px){
  .kopf:has(.kopfrechts) .kopfmarke .wortmarke{position:absolute;width:1px;height:1px;
    overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
/* Der eigene Name ist der Weg zum eigenen Zugang - Kennwort und
   Anmeldeadresse. Bis zum 22.10.2026 war er nur Text, und /verwaltung/kennwort
   damit allein ueber die Adresszeile erreichbar (Leitlinie 2.19: ein Weg
   ohne Auslöser ist Vorrat). Gregor hat es gesucht und nicht gefunden. */
a.wer{color:var(--leise);font-size:14px;text-decoration:none;
  border-bottom:1px solid transparent;white-space:nowrap;
  min-width:0;overflow:hidden;text-overflow:ellipsis}
a.wer:hover{color:var(--text);border-bottom-color:var(--linie)}
.wer{color:var(--leise);font-size:14px}
.blatt{max-width:880px;margin:0 auto;padding:28px 20px 56px}
h1{font-size:22px;margin:0 0 18px}
h2{font-size:17px;margin:0 0 8px}
.lead{color:var(--leise);margin:0 0 22px}
.formular{display:flex;flex-direction:column;gap:6px;max-width:360px}
label{font-size:14px;color:var(--leise);margin-top:10px}
input,select,textarea{padding:.6rem .75rem;border:1px solid var(--linie);
  border-radius:10px; background:var(--blatt);color:var(--text);font-size:15px}
/* Ein Auswahlfeld ist so breit wie seine laengste Option. Die Seminarauswahl
   in Bestellungen und Rechnungen fuehrt Seminartitel mit ueber 100 Zeichen
   und wurde damit 814 px breit - auf 390 px schob die Seite seitlich
   (gemessen 25.10.2026, sobald das Seminar mit dem langen Titel die erste
   Bestellung hatte; die Liste fuehrt nur Seminare mit Bestellungen). Die
   Option bleibt im Aufklappmenue vollstaendig lesbar. */
select{max-width:100%}
input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--akzent);outline-offset:1px;border-color:transparent}
/* Die Umrisse stehen bei den Feldern und beim Knopf selbst - hier stand bis
   zum 22.10.2026 eine dritte Regel, die beide noch einmal setzte. */
button{margin-top:18px;padding:.55rem 1rem;border:0;border-radius:10px;
  background:linear-gradient(160deg,var(--knopf-von),var(--knopf-bis));
  color:#fff;font-size:15px;font-weight:500;cursor:pointer;
  transition:filter .15s ease, transform .05s ease}
button:hover{filter:brightness(1.08)}
button:active{transform:translateY(1px)}
button:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
@media (prefers-color-scheme: dark){button{color:#06252a}}
.abmelden button{margin:0;padding:6px 12px;font-size:14px;background:transparent;
  color:var(--leise);border:1px solid var(--linie)}
.fehler{color:var(--warnung);background:color-mix(in srgb,var(--warnung) 9%,transparent);
  border:1px solid color-mix(in srgb,var(--warnung) 30%,transparent);
  padding:9px 12px;border-radius:7px;margin:0 0 16px;max-width:360px}
.kacheln{list-style:none;display:grid;gap:12px;padding:0;margin:0 0 30px;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.kachel{background:var(--blatt);border:1px solid var(--linie);border-radius:9px;
  padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.zahl{font-size:26px;font-weight:600;font-variant-numeric:tabular-nums}
.kachel .titel{font-size:14px}
.hinweis{font-size:13px;color:var(--leise)}
.stand{border-top:1px solid var(--linie);padding-top:18px;color:var(--leise)}
.stand p{margin:0;font-size:15px}
.stand a{color:var(--akzent)}
/* Zwei Karten nebeneinander, sobald Platz ist. auto-fill mit einer
   Mindestbreite statt fester Spaltenzahl: So entscheidet der Schirm, nicht
   eine Zahl im Stylesheet - und auf dem Handy bleibt es eine Spalte, ohne
   dass es dafuer eine zweite Regel braucht.
   340px ist die Breite, unter der Titel und Preis sich ins Gehege kommen
   (gemessen am 24.10.2026). */
.karten{list-style:none;padding:0;margin:0 0 26px;display:grid;gap:10px;
  grid-template-columns:repeat(auto-fill,minmax(340px,1fr))}
.karte .wann{font-size:13px;color:var(--leise);font-variant-numeric:tabular-nums}
.karte .was{font-weight:600}
/* Die Hinweiszeile traegt seit dem 24.10.2026 zwei Dinge: links die Art,
   rechts den Preis. space-between statt einer festen Breite - der Preis ist
   im Englischen "€325.00" und im Deutschen "325,00 €", und eine Spalte, die
   fuer das eine passt, schneidet das andere ab. */
.karte .hinweis{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
/* Groesse UND Rand standen bis zum 25.10.2026 in einer Regel ".preis" fuer
   den "Produktkopf der alten Kaufseite" - den gab es nicht mehr, und die
   Regel traf nur noch diese Karten. Beides bleibt, wie Gregor die Startseite
   kennt; es steht jetzt nur dort, wo es wirkt (greg-157).
   Der Rand ist dabei keine Kleinigkeit: In der Flex-Zeile .karte .hinweis ist
   der Preis ein Flex-Element, und dort wirkt ein Rand oben und unten - anders
   als an einem gewoehnlichen Inline-Element. Ohne ihn wurde die Startseite
   auf 390 px um 96 px kuerzer und die Preiszeile rueckte an den Titel
   (gemessen beim Entfernen der alten Regel, Bildvergleich vorher/nachher). */
.karte .preis{font-size:1.35rem;margin:1.2rem 0 .3rem;font-weight:600;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.angebote{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.angebotlink{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  text-decoration:none;color:inherit;border:1px solid var(--linie);border-radius:7px;
  padding:8px 12px;font-size:14px}
.angebotlink:hover{border-color:var(--akzent)}
.kachelLink{display:flex;flex-direction:column;gap:2px;text-decoration:none;color:inherit}
.kachelLink:hover .titel,.kachelLink:hover .was{text-decoration:underline}
/* Links hatten bis zum 24.10.2026 keinen eigenen Fokusstil - bei einem Link
   im Fliesstext traegt der Browserring das noch. Eine ganze Karte ist aber
   eine grosse Flaeche: Ohne sichtbaren Rahmen sieht niemand, wo die Tastatur
   gerade steht. Derselbe Ring wie bei Feldern und Knoepfen (Zeile 1639 ff.),
   damit es nicht zwei Arten von Fokus gibt. */
.kachelLink:focus-visible,.angebotlink:focus-visible{
  outline:2px solid var(--akzent);outline-offset:3px;border-radius:7px}
.tafel-wrap{overflow-x:auto;margin:0 0 14px}
.tafel{width:100%;border-collapse:collapse;font-size:14.5px}
.tafel th{text-align:left;font-weight:600;font-size:13px;color:var(--leise);
  border-bottom:1px solid var(--linie);padding:0 12px 8px 0;white-space:nowrap}
.tafel td{border-bottom:1px solid var(--linie);padding:11px 12px 11px 0;vertical-align:top}
.tafel tr:last-child td{border-bottom:0}
.marke{display:inline-block;padding:2px 8px;border-radius:99px;font-size:12.5px;
  border:1px solid var(--linie);color:var(--leise)}
.marke-veroeffentlicht{color:var(--akzent);border-color:var(--akzent)}
.marke-abgesagt{color:var(--warnung);border-color:var(--warnung)}

/* Einrichtung und Rechtstexte */
/* Hier stand bis zum 22.10.2026 ein zweites .formular mit max-width:46rem.
   Es ueberschrieb die Breite von 360px vierzig Zeilen weiter oben - still,
   denn beide Regeln sahen fuer sich richtig aus. Folge: JEDES Formular war
   46rem breit, auch die Anmeldung mit ihren zwei Feldern. Sie zogen sich
   ueber die ganze Seite, und genau das sah Gregor im Vergleich mit
   repro.dog.

   Die breiten Formulare tragen jetzt .formular-breit - eine Klasse, die es
   weiter unten laengst gab (44rem). Auch DAS hat erst der Waechter gezeigt:
   Mein erster Versuch legte sie ein zweites Mal an, mit 46rem, und machte
   damit denselben Fehler noch einmal.

   Keine Backticks in diesem Kommentar: Das Stylesheet steckt in einem
   JS-Template-String, und ein Backtick darin beendet ihn - das hat sich
   beim Schreiben dieses Kommentars selbst vorgefuehrt. */
fieldset{border:1px solid var(--linie);border-radius:.4rem;padding:1rem 1.2rem;margin:0 0 1.2rem}
legend{padding:0 .4rem;font-weight:600}
.feld{margin:0 0 .9rem}
.feld label{display:block;margin-bottom:.25rem}
/* Die Regel zaehlt NICHT die erlaubten Typen auf, sondern schliesst die
   wenigen aus, die keine Zeile fuellen. Vorher stand hier
   "input[type=text], input[type=date]" - und type=email, type=tel und
   type=password fielen damit auf die Standardbreite des Browsers zurueck.
   Im Kaufformular stand das E-Mail-Feld dadurch halb so breit neben den
   anderen (gesehen im Bildschirmfoto am 22.10.2026, Leitlinie 5.21: eine
   Zelle mit mehreren Teilen braucht EINEN Rhythmus).

   Eine Liste erlaubter Typen muss bei jedem neuen Feld nachgezogen werden
   und wird es nicht (Leitlinie 4.4). Die Ausnahmen dagegen sind endlich:
   Haken, Auswahlknopf und Knopf. */
.feld input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]),
.feld select,.feld textarea{
  width:100%;padding:.45rem .55rem;border:1px solid var(--linie);border-radius:.3rem;
  background:var(--blatt);color:var(--text);font:inherit}
.feld textarea{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;line-height:1.5}
/* Der Hinweis gehoert UNTER das Feld, nicht daneben: Daneben schiebt er das
   Feld schmal und bricht die Flucht der Eingabezeilen. */
.feld .hinweis{display:block;margin-top:.2rem}
/* Ein Feld, das zwei Zeichen aufnimmt, soll nicht so breit sein wie eines
   fuer eine Firmierung. Die Breite ist eine Aussage darueber, was
   hineingehoert (5.21). */
.feld-kurz{max-width:6rem}
.feld .hinweis.mono{display:block;margin-top:.15rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em}
.ampel{font-size:1.05em;line-height:1}
.ampel-gut{color:var(--akzent)}
.ampel-teil{color:#b8860b}
.ampel-offen{color:var(--warnung)}
/* Pflichtangabe im Formular. Eigene Klasse, nicht ampel-offen: Dieselbe Farbe
   wie ein offener Bereitschaftspunkt liess im Durchgang am 21.10.2026 acht
   gefuellte Felder aussehen, als fehle etwas. */
.pflicht{color:var(--leise);font-weight:700;margin-left:.15rem}
.gut{color:var(--akzent)}
.offen{color:var(--warnung)}
.mitte{text-align:center}
.zahl-zelle{text-align:right;font-variant-numeric:tabular-nums}
.meldung{padding:.6rem .8rem;border-radius:.3rem;border:1px solid var(--linie)}
.meldung-gut{border-color:var(--akzent);color:var(--akzent)}
.meldung-fehler{border-color:var(--warnung);color:var(--warnung)}
.meldung-wartet{border-color:var(--leise);color:var(--leise)}
/* Der Zustand einer Bestellung mit Zeichen, nicht nur als Wort: Wer eine
   Liste ueberfliegt, soll den unbezahlten Stapel sehen, ohne zu lesen. */
.statuswort{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap}
.statuswort svg{width:1em;height:1em;flex:none}
.statuswort-gut{color:var(--akzent)}
.statuswort-fehler{color:var(--warnung)}
.statuswort-wartet{color:var(--leise)}
/* In einer Angabenliste steht im Statuswort oft ein ganzer Satz ("aus der
   Umgebung (SEMINAR_SMTP2GO_KEY), endet auf ..."). Ohne Umbruch lief
   /verwaltung/versand auf 390px Breite bis 536px quer - gemessen am
   25.10.2026 in WebKit und Chrome. In Tabellen bleibt es einzeilig. */
.angaben dd .statuswort{display:inline;white-space:normal}
/* Die Marke an einer Testbestellung. Klein, aber nie zu uebersehen - eine
   Testzeile, die wie eine echte aussieht, kostet beim Abgleich einen Tag. */
.marke-test{display:inline-block;padding:0 .35rem;border:1px solid var(--leise);
  border-radius:.25rem;font-size:11.5px;color:var(--leise);vertical-align:.1em}
.liste-schlicht{margin:.5rem 0 0;padding-left:1.1rem}
.liste-schlicht li{margin:.15rem 0}
/* Der Fehler am Feld: nah genug, um dazuzugehoeren, und nicht so gross, dass
   er das Feld verdraengt. */
.feldfehler{margin:.25rem 0 0;font-size:.82rem;color:var(--warnung)}

/* ---------- Die Anmeldeseiten ---------- */
/* Eine Karte auf einer Flaeche mit zwei verschwommenen Farbkreisen. Dieselbe
   Bauweise wie bei repro.dog (views/styles.js, .auth-page/.auth-card) - der
   Unterschied, den Gregor am 22.10.2026 sah, war kein Geschmack, sondern
   diese Struktur: Dort eine Karte mit Mitte, hier flacher Text auf Weiss. */
.anmeldeflaeche{
  min-height:100vh; display:grid; place-items:center; padding:1.5rem;
  position:relative; overflow:hidden; isolation:isolate;
}
/* Wenn das Umgebungsband da ist, zieht es die Hoehe ab - sonst entsteht ein
   Scrollbalken fuer die 1,7rem des Bandes. */
body:has(.umgebungsband) .anmeldeflaeche{min-height:calc(100vh - 1.7rem)}

/* Die zwei Kreise. Sie liegen HINTER dem Inhalt (z-index:-1 in einem
   eigenen Stapelkontext durch isolation) und sind so weich gezeichnet, dass
   man sie nicht als Kreise liest, sondern als Licht. */
.anmeldeflaeche::before, .anmeldeflaeche::after{
  content:""; position:absolute; z-index:-1; border-radius:50%; filter:blur(80px);
}
.anmeldeflaeche::before{width:560px;height:560px;top:-140px;right:-120px;background:var(--schimmer-a)}
.anmeldeflaeche::after{width:500px;height:500px;bottom:-140px;left:-100px;background:var(--schimmer-b)}
/* Auf schmalen Geraeten ruecken die Kreise zusammen, sonst liegen sie
   ausserhalb und die Flaeche ist wieder flach. */
@media (max-width:640px){
  .anmeldeflaeche::before{width:380px;height:380px;top:-120px;right:-120px}
  .anmeldeflaeche::after{width:340px;height:340px;bottom:-120px;left:-110px}
}

.anmeldekarte{
  width:100%; max-width:400px;
  background:var(--flaeche);
  -webkit-backdrop-filter:blur(20px); backdrop-filter:blur(20px);
  border:1px solid var(--linie); border-radius:20px;
  padding:2rem 1.9rem 1.75rem;
  box-shadow:0 20px 50px -20px hsla(var(--schatten),0.35);
}
.anmeldekarte h1{font-size:1.35rem;margin:0 0 1rem}
.anmeldekarte .lead{margin:0 0 1.2rem;font-size:.94rem}
.anmeldekarte .formular{max-width:none}
/* Der Knopf fuellt die Karte: Auf einer Seite mit genau einer Handlung ist
   ein schmaler Knopf in der Ecke eine Suchaufgabe. */
.anmeldekarte button{width:100%;margin-top:1.1rem;padding:.7rem 1rem;font-size:.95rem}
.anmeldekarte .hinweis{margin:.9rem 0 0;line-height:1.5;font-size:.82rem}
/* Der letzte Hinweis bekommt eine trennende Linie: Er gehoert nicht mehr zur
   Handlung, sondern erklaert sie - und ohne Trennung liest man ihn als
   Fortsetzung des Formulars. */
.anmeldekarte .hinweis:last-child{
  margin-top:1.1rem;padding-top:.9rem;border-top:1px solid var(--linie)}
.anmeldekarte .meldung{margin:0 0 1rem}

/* Das Logo in der Karte - frei, ohne Rahmen. Genau der Punkt, an dem die
   alte Fassung scheiterte (siehe .kopfmarke). Derselbe Abstand wie dort,
   aus demselben Grund. */
.anmeldemarke{display:flex;align-items:center;gap:.9rem;margin:0 0 1.5rem}

/* ---------- Was die Karte vom Rest erbt ---------- */
/* Felder und Knopf bekommen die Rundung und den Verlauf der Samenbank. Sie
   gelten ueberall, nicht nur in der Karte: Zwei Knopfformen in einer
   Anwendung sind zwei Anwendungen (Leitlinie 5.21). */

/* Die Knopfleiste IN einer Tabellenzeile (Benutzerverwaltung).
   Ohne eigene Regel saesse das Formular als Block in der Zelle und schoebe
   die Knoepfe untereinander - bei vier Knoepfen wird die Zeile dann viermal
   so hoch wie die daneben, und die Tafel verliert ihre Flucht (5.21). */
.zeilenform{display:flex;flex-wrap:wrap;gap:.4rem;align-items:center;margin:0}
.zeilenform a{white-space:nowrap}

/* Ein Hinweis, der eine Warnung IST, aber keine Meldung sein soll: die
   Sperre eines Kontos in der Benutzertafel. In der Farbe der Warnung, in der
   Groesse eines Hinweises - er steht neben zwei anderen Angaben in derselben
   Zelle und darf sie nicht verdraengen. */
.fehler-leise{font-size:13px;color:var(--warnung)}

/* ===========================================================================
   Die oeffentliche Kaufseite
   ===========================================================================
   Bis zum 24.10.2026 stand das Kaufformular in einer 360px schmalen Spalte,
   waehrend rechts daneben zwei Drittel des Bildschirms leer blieben: 2633px
   Seitenhoehe auf einem 900px hohen Bildschirm - dreimal scrollen fuer einen
   Kauf, und auf dem Handy scrollte es zusaetzlich seitlich.

   Die Hoehe kam nicht von zu viel Inhalt, sondern von ungenutzter Breite.
   Gregors Vorgabe: "Mein Wunsch waere, wenn man ohne zu scrollen kaufen
   koennte." Darum zwei Spalten, und die Felder darin im Raster.

   Die REIHENFOLGE IM HTML ist die fuer das Handy - Angebot, Formular,
   Bezahlen. Auf dem Bildschirm sortiert grid-template-areas um, ohne sie
   anzuruehren: So stimmt die Tastaturfolge in beiden Faellen (Anzahl ->
   Angaben -> Zahlweg -> Knopf), und sie steht nicht in einem tabindex. */
/* ---------------------------------------------------------------------------
   Die Statusseiten: Zahlung, Bestaetigung, Fehler, Aufzeichnung
   ---------------------------------------------------------------------------
   Eine schmale, zentrierte Karte - sie meldet EINEN Zustand, und der steht
   besser in einer Spalte als ueber 880px verteilt. Dasselbe Polster, derselbe
   Radius wie die Bloecke der Kaufseite (.kaufkarte); hier wird nichts neu
   erfunden, nur anders angeordnet. */
.blatt-status{max-width:640px;padding:28px 20px 48px}
/* Zum LESEN, nicht zum Bedienen: etwas breiter als eine Statusmeldung, aber
   schmal genug, dass eine Zeile nicht quer ueber den Schirm laeuft. */
.blatt-lesen{max-width:820px;padding:24px 20px 44px}
.rechtstextkarte,.aufzeichnungskarte{padding:22px 24px}
.aufzeichnungskarte h1{font-size:1.3rem;margin:0 0 .8rem;text-wrap:balance}
.aufzeichnungskarte .hinweis{display:block;margin:.5rem 0 0}
.rechtstextkarte h1{font-size:1.35rem;margin:0 0 .3rem;text-wrap:balance}
.rechtstextkarte .hinweis{margin:0 0 1rem}
.statusseite{display:flex;flex-direction:column;gap:14px}
.statuskarte{padding:22px 24px 20px;text-align:left}
.statuskarte h1{font-size:1.4rem;line-height:1.25;margin:.5rem 0 .4rem;
  text-wrap:balance}
.statuskarte .lead{margin:0 0 1rem;color:var(--leise);font-size:15px}
.statuskarte .statustext{margin:1rem 0 0;font-size:14.5px;line-height:1.55}
/* Das Zeichen traegt die Aussage, bevor jemand liest. Die Farbe kommt vom
   Zustand, nicht vom Zeichen selbst - so gibt es ein Zeichen je Lage und
   nicht drei Farben im SVG. */
.statuszeichen{display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;margin:0 0 .2rem}
.statuskarte-gut .statuszeichen{color:var(--akzent);
  background:color-mix(in srgb, var(--akzent) 10%, transparent)}
.statuskarte-wartet .statuszeichen{color:#8a6410;
  background:color-mix(in srgb, #c98a16 14%, transparent)}
.statuskarte-fehler .statuszeichen{color:var(--warnung);
  background:color-mix(in srgb, var(--warnung) 10%, transparent)}
/* Die Angaben als Paare, nicht als Tabelle: Es sind Beschriftung und Wert,
   keine Zeilen einer Aufstellung - und auf einem Telefon liest sich das
   untereinander besser als zwei gequetschte Spalten. */
.angaben{margin:1rem 0 0;display:flex;flex-direction:column;gap:0}
.angaben > div{display:flex;justify-content:space-between;align-items:baseline;
  gap:14px;padding:.55rem 0;border-top:1px solid var(--linie)}
.angaben > div:first-child{border-top:0;padding-top:0}
.angaben dt{margin:0;color:var(--leise);font-size:13.5px}
.angaben dd{margin:0;font-weight:600;text-align:right;
  font-variant-numeric:tabular-nums;word-break:break-word}
.statusknoepfe{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0 0}
.statusknoepfe .knopf,.statusknoepfe .knopf-leise{display:inline-block;
  padding:.55rem 1rem;border-radius:9px;text-decoration:none;font-size:14.5px;
  font-weight:600}
.statusknoepfe .knopf{background:var(--akzent);color:#fff;border:1px solid var(--akzent)}
.statusknoepfe .knopf:hover{filter:brightness(1.08)}
.statusknoepfe .knopf-leise{background:var(--blatt);color:var(--text);
  border:1px solid var(--linie)}
.statusknoepfe .knopf-leise:hover{border-color:var(--akzent)}
.statusknoepfe a:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
.statusfuss{margin:0;text-align:center;font-size:13px;color:var(--leise)}
.statusfuss a{color:var(--akzent)}
@media (max-width:640px){
  .blatt-status{padding:16px 14px 32px}
  .statuskarte{padding:18px 16px 16px}
  .angaben > div{flex-direction:column;align-items:flex-start;gap:2px}
  .angaben dd{text-align:left}
}

/* Die Sprungmarke: unsichtbar, bis sie den Fokus bekommt. Uebernommen aus
   views/styles.js der Samenbank, damit sich beide Anwendungen hier gleich
   verhalten - wer eine kennt, kennt die andere.
   Nicht display:none: Das naehme sie aus der Tabfolge, und dann waere sie
   genau fuer die nutzlos, fuer die sie da ist. */
.sprungmarke{position:absolute;left:-9999px;top:0;z-index:200;
  width:1px;height:1px;overflow:hidden}
.sprungmarke:focus,.sprungmarke:focus-visible{left:.6rem;top:.6rem;
  width:auto;height:auto;overflow:visible;padding:.5rem .9rem;border-radius:8px;
  border:1px solid var(--linie);background:var(--blatt);color:var(--text);
  font-weight:700;text-decoration:none;outline:2px solid var(--akzent);
  outline-offset:2px;box-shadow:0 6px 20px rgba(0,0,0,.18)}
/* Das Sprungziel bekommt den Fokus nur, damit die naechste Tabulatortaste im
   Formular weitergeht - ein Rahmen um die halbe Spalte waere kein Gewinn. */
.kaufform:focus{outline:none}
/* Das Band eines Seminars im Entwurf: sichtbar, aber nicht schreiend - es
   warnt nicht vor Gefahr, es sagt, in welcher Welt man gerade ist. */
.probeband{margin:0 0 10px;padding:.5rem .8rem;border-radius:9px;font-size:13px;
  line-height:1.4;color:#8a6410;background:color-mix(in srgb,#c98a16 12%,transparent);
  border:1px solid color-mix(in srgb,#c98a16 38%,transparent)}
.blatt-kauf{max-width:1200px;padding:10px 20px 28px}
/* Der Kopf traegt auf der Kaufseite nur das Zeichen - keinen Abmeldeknopf,
   keine Navigation. 14px Polster sind dort fuer eine Zeile zu viel, und
   oberhalb des Inhalts zaehlt jeder Punkt: Band, Kopf und Blattpolster
   ergaben zusammen 100px, bevor das erste Feld begann. Die Verwaltung
   behaelt ihren Kopf - dort steht mehr darin. */
body:has(.blatt-kauf) .kopf{padding:9px 20px}
.kaufraster{display:grid;gap:14px 20px;align-items:start;
  grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr);
  grid-template-areas:"form angebot" "form bezahlen";
  /* Die zweite Zeile nimmt den Rest, damit die Bezahlkarte NICHT in der Mitte
     der freien Flaeche landet: Das Formular links ist hoeher als die beiden
     Karten rechts, und ohne das klaffte dazwischen eine Luecke. */
  grid-template-rows:auto 1fr}
.kaufraster > .kaufangebot{grid-area:angebot}
.kaufraster > .kaufform{grid-area:form}
.kaufraster > .kaufbezahlen{grid-area:bezahlen;align-self:start}


/* Das Angebot: Titel, eine Zeile Eckdaten, der Preis. Die Beschreibung steht
   darunter und ist das Einzige, was wachsen darf. */
/* Das Kopfbild in festem Verhaeltnis, zugeschnitten. Der Punkt ist nicht die
   Optik, sondern die HOEHE: Ohne aspect-ratio bestimmte das hochgeladene Bild
   die Laenge der Seite, und ein Hochformat schoebe das Formular aus dem ersten
   Bildschirm - genau das, was seit dem 24.10.2026 nicht mehr passieren soll.
   Dieselbe Ueberlegung wie beim Videorahmen weiter oben. */
.kaufbild{display:block;width:100%;height:auto;aspect-ratio:16/9;
  object-fit:cover;border-radius:9px;margin:0 0 .7rem;background:var(--grund)}
.kaufangebot h1{font-size:1.18rem;line-height:1.3;margin:0 0 .3rem;
  text-wrap:balance}
.kaufangebot .eckdaten{font-size:13px;color:var(--leise);margin:0 0 .7rem}
.kaufpreis{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;border-top:1px solid var(--linie);padding-top:.6rem;margin:.2rem 0 0}
.kaufpreis .betrag{font-size:1.5rem;font-weight:700;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.kaufpreis .ust{font-size:12px;color:var(--leise)}

/* Die Beschreibung ist der einzige Teil unbekannter Laenge. Zugeklappt
   bleibt die Seite auf einem Bildschirm; die Eckdaten, die den Kauf tragen -
   Titel, Termin, Dauer, Preis - stehen immer offen darueber. */
.kaufbeschreibung{margin:.7rem 0 0;font-size:13.5px;line-height:1.55}
.kaufbeschreibung > summary{cursor:pointer;color:var(--akzent);font-size:13px;
  list-style:none}
.kaufbeschreibung > summary::-webkit-details-marker{display:none}
.kaufbeschreibung > summary::before{content:"▸ ";font-size:.9em}
.kaufbeschreibung[open] > summary::before{content:"▾ "}
.kaufbeschreibung > summary:focus-visible{outline:2px solid var(--akzent);
  outline-offset:2px;border-radius:4px}
.kaufbeschreibung p{margin:.5rem 0 0}

/* Die Anzahl: bis zum 24.10. ein Auswahlfeld mit dem Knopf "Uebernehmen"
   daneben, in einem eigenen Kasten ueber dem Formular. Gregor: "der Button
   Uebernehmen wirkt deplatziert" - er war es auch, denn er gehoerte zu einem
   ZWEITEN Formular, das nur die Seite neu laedt.
   Jetzt sind es Links. Ein Link braucht keinen Absendeknopf, und die
   gewaehlte Zahl ist zu sehen, statt in einer zugeklappten Liste zu stecken. */
.anzahlreihe{display:flex;flex-wrap:wrap;align-items:center;gap:5px;
  margin:.7rem 0 0;border-top:1px solid var(--linie);padding-top:.6rem}
.anzahlreihe .was{font-size:13px;color:var(--leise);margin-right:2px}
.anzahlknopf{min-width:25px;padding:2px 5px;text-align:center;font-size:13px;
  border:1px solid var(--linie);border-radius:7px;text-decoration:none;
  color:var(--text);font-variant-numeric:tabular-nums}
.anzahlknopf:hover{border-color:var(--akzent)}
.anzahlknopf[aria-current]{background:var(--akzent);border-color:var(--akzent);
  color:#fff;font-weight:600}
.anzahlknopf:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
/* Der Satz, der sagt, was die Zahlen bewirken. Er stand bis zum 24.10.2026
   neben dem Knopf "Uebernehmen" und fiel beim Umbau weg - danach waren die
   Zahlen da, aber niemand wusste, dass danach Namen abgefragt werden. Eigene
   Zeile unter der Reihe: flex-basis:100% bricht um, ohne eine zweite
   Umbruchregel zu brauchen. */
.anzahlhinweis{flex-basis:100%;font-size:11.5px;margin-top:1px}
/* Die Wahl "Ich und weitere / Nur andere" steht im Formular, nicht in der
   Angebotskarte - sie gehoert zu den Teilnehmern. Deshalb ohne die obere
   Trennlinie der Anzahlreihe, und die Knoepfe tragen Woerter statt Ziffern. */
.selbstwahl{border-top:0;padding-top:0;margin:.2rem 0 .6rem}
.wahlknopf{min-width:0;padding:3px 9px}

/* Die Felder im Raster. min-width:0 ist noetig, weil ein Grid-Feld sonst von
   seinem Inhalt aufgeblasen wird und die Spalte sprengt - das war mit ein
   Grund fuer das seitliche Scrollen auf dem Handy. */
/* Sechs Spuren statt zwei: So passen zwei HALBE Felder nebeneinander (je 3)
   und drei DRITTEL (je 2) - Postleitzahl, Ort und Land in eine Zeile statt in
   zwei. Mit einem Zweispaltenraster blieb jedes Mal eine halbe Zeile leer,
   und die kostete auf einem 800px hohen Bildschirm genau den Platz, der zum
   Kaufen ohne Scrollen fehlte. */
/* ---------------------------------------------------------------------------
   Ein Block, eine Sprache - links wie rechts
   ---------------------------------------------------------------------------
   Gregor am 24.10.2026: "Irgendwie sieht es noch wie Kraut und Rueben aus.
   Dieses 'Ihre Daten' wirkt fuer mich wie ein Fremdkoerper, dann ist die
   obere Hoehe der beiden Boxen ungleich."

   Die Ursache war nicht Geschmack, sondern ZWEI Gestaltungssprachen auf einer
   Seite: Links standen <fieldset> im Browserstil - die Legende sitzt dort IM
   Rahmen und ragt nach oben heraus, weshalb die Spalte optisch hoeher begann
   als die Karten rechts. Dort stand die Ueberschrift innen.

   Jetzt tragen beide dieselben Werte, aus EINER Regel. Wer das Polster
   aendert, aendert es fuer alle - das ist der Sinn der gemeinsamen Klasse. */
/* EINE Regel fuer jede Karte der Plattform - Kaufseite, Startseite,
   Statusseiten. Bis zum 24.10.2026 trug die Startseite 9px Radius und
   13px/16px Polster, die Kaufseite 12px und 11px/15px: zwei Sprachen auf
   einer Plattform. Wer das Polster hier aendert, aendert es ueberall. */
.kaufkarte,.kaufblock,.karte{background:var(--blatt);border:1px solid var(--linie);
  border-radius:12px;padding:11px 15px}
.karte{display:flex;flex-direction:column;gap:3px}
.kaufblock{margin:0 0 10px;padding-bottom:5px}
/* float loest die Legende aus dem Rahmen, ohne sie aus der BEDEUTUNG zu
   loesen: Die Vorleseausgabe nennt sie weiterhin vor jedem Feld der Gruppe.
   Ein <p> an ihrer Stelle saehe gleich aus und koennte das nicht. */
.kaufblock > legend{float:left;width:100%;padding:0;margin:0 0 7px;
  font-size:13px;font-weight:600;color:var(--leise)}
.kaufblock > .felder{clear:both;display:grid;grid-template-columns:repeat(6,1fr);
  gap:0 14px}
/* min-width:0, weil ein Rasterfeld sonst von seinem Inhalt aufgeblasen wird
   und die Spalte sprengt. */
.kaufform .feld{grid-column:span 3;margin:0 0 .32rem;min-width:0}
.kaufform .feld-drittel{grid-column:span 2}
.kaufform .feld label{font-size:12.5px;margin-top:0;margin-bottom:.08rem}
.kaufform .feld .hinweis{font-size:11.5px;line-height:1.3;margin-top:.06rem}
/* Der erklaerende Satz ueber den Feldern - ganze Breite, leiser als der
   Inhalt, aber vor ihm. */
.blockhinweis{grid-column:1/-1;margin:0 0 .4rem;font-size:11.5px;
  color:var(--leise);line-height:1.4}
/* Die Teilnehmergruppe IN der Karte "Teilnehmende": kein zweiter Rahmen,
   sondern eine Linie an der Seite. Eine Karte in der Karte waere eine
   Schachtel in der Schachtel. */
.kaufform .teilnehmer{grid-column:1/-1;border:0;border-left:2px solid var(--akzent);
  border-radius:0;background:none;padding:1px 0 0 12px;margin:0 0 10px}
.kaufform .teilnehmer > legend{float:left;width:100%;padding:0;margin:0 0 6px;
  font-size:12.5px;font-weight:600;color:var(--text)}
.kaufform .teilnehmer > .felder{clear:both;display:grid;
  grid-template-columns:repeat(6,1fr);gap:0 14px}
/* Die Spezifitaet muss die der allgemeinen Feldregel erreichen: Jene traegt
   vier :not() und damit (0,5,1) - eine schlichte .kaufform input (0,1,1)
   verliert gegen sie, und die Felder blieben so hoch wie vorher. Gemessen am
   24.10.2026, nachdem genau das passiert war. */
.kaufform .feld input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=hidden]),
.kaufform .feld select{padding:.29rem .5rem;font-size:14px}
/* Was ueber beide Spalten geht: lange Eingaben und alles mit Haken. */
.kaufform .feld-weit,.kaufform .feld-haken,.kaufform .anzahlreihe{grid-column:1/-1}
.kaufform .feld-haken{margin:0 0 .22rem}
.kaufform .feld-haken label{font-size:12.5px;line-height:1.33;color:var(--text);
  display:flex;gap:.4rem;align-items:flex-start}
/* ---------------------------------------------------------------------------
   Warum ein Pflichthaken sich zeigt, wenn er fehlt
   ---------------------------------------------------------------------------
   Gregor am 24.10.2026: "der Button Kostenpflichtig Bestellen ist noch tot,
   passiert nix."

   Er war nicht tot. Gemessen an der laufenden Anwendung: Das Formular ist
   ungueltig, drei Pflichthaken fehlten, und der Browser haelt das Absenden an -
   genau wie er soll. Er zeigt dazu eine Blase am ersten fehlenden Haken, aber
   die steht links unten im Formular, waehrend der Knopf rechts oben sitzt.
   Wer dorthin sieht, sieht nichts passieren.

   :user-invalid statt :invalid ist der ganze Punkt: :invalid greift schon beim
   LADEN - dann waere die Seite rot, bevor jemand etwas falsch gemacht hat, und
   nach drei Besuchen sieht niemand mehr hin. :user-invalid greift erst, wenn
   jemand das Feld angefasst ODER abzuschicken versucht hat. Genau dann, wenn
   die Meldung etwas bedeutet.

   Der Rahmen liegt am LABEL, nicht am Kaestchen: Ein 13px grosses Quadrat am
   Zeilenanfang ist keine Flaeche, die auffaellt. Die ganze Zeile schon. */
.kaufform .feld-haken:has(input:user-invalid){
  background:color-mix(in srgb, var(--warnung) 7%, transparent);
  border-left:3px solid var(--warnung);border-radius:4px;
  padding:3px 6px 3px 7px;margin-left:-10px}
.kaufform .feld-haken:has(input:user-invalid) label{color:var(--warnung)}
.kaufform .feld-haken input:user-invalid{outline:2px solid var(--warnung);
  outline-offset:1px}

/* Die Bilderliste in der Verwaltung: Vorschau, Angaben, Entfernen-Knopf in
   einer Zeile. Die Vorschau im selben Verhaeltnis wie auf der Kaufseite -
   wer hier zuschneidet, soll dort keine Ueberraschung erleben. */
/* Zwei Zahlen nebeneinander - zugestimmt und wieder abgemeldet. Keine
   Kacheln mit Rahmen: Es sind zwei Angaben, kein Armaturenbrett. */
.kennzahlen{display:flex;flex-wrap:wrap;gap:1.6rem;margin:0 0 1.2rem}
.kennzahl{display:flex;flex-direction:column;gap:.1rem}
.kennzahl .wert{font-size:1.8rem;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
.kennzahl .was{font-size:12.5px;color:var(--leise)}
.tafel td.zahl,.tafel th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.bildliste{list-style:none;padding:0;margin:0 0 1rem;display:flex;
  flex-direction:column;gap:.6rem}
.bildliste li{display:flex;align-items:center;gap:.9rem;padding:.5rem;
  border:1px solid var(--linie);border-radius:.5rem;background:var(--blatt)}
.bildliste img{width:160px;height:90px;object-fit:cover;border-radius:.3rem;
  background:var(--grund);flex:0 0 auto}
.bildangaben{display:flex;flex-direction:column;gap:.15rem;min-width:0;flex:1}
.bildangaben .dateiname{font-size:13px;word-break:break-all}
.bildliste form{margin:0}
.bildliste button{margin:0}
.bildform input[type=file]{font-size:13px}
@media (max-width:640px){
  .bildliste li{flex-wrap:wrap}
  .bildliste img{width:100%;height:auto;aspect-ratio:16/9}
}

/* Bezahlen und der Knopf - der letzte Block der rechten Spalte. */
/* Die Zahlwege, der Knopf und die Pflichtzeile stehen untereinander - sie
   sind kein Raster, also wird das Raster des Blocks hier aufgehoben. */
.kaufbezahlen > .felder{display:block}
.kaufbezahlen .zahlwege{display:flex;flex-direction:column;gap:.35rem;margin:0}

/* Der Zahlweg als Kachel mit Zeichen (24.10.2026, Gregors Wunsch).

   Der echte Auswahlknopf ist verborgen, aber NICHT abgeschaltet: 1px gross
   und durchsichtig statt display:none. Der Unterschied ist der ganze Punkt -
   ein display:none-Knopf verschwindet aus der Tabfolge und aus der
   Vorleseausgabe, und dann liesse sich der Zahlweg mit der Tastatur gar nicht
   mehr waehlen. So bleibt er bedienbar, und was man sieht, zeichnet das CSS:
   ::before ist der Punkt, und :focus-visible legt den Rahmen um die Kachel,
   damit beim Durchtabben sichtbar ist, worauf man steht. */
.zahlkachel{display:block;cursor:pointer}
.zahlkachel input{position:absolute;width:1px;height:1px;margin:0;padding:0;
  opacity:0;pointer-events:none}
.zahlinhalt{display:flex;align-items:center;gap:.55rem;padding:.5rem .7rem;
  border:1.5px solid var(--linie);border-radius:9px;background:var(--grund);
  font-size:13.5px;line-height:1.25}
/* Der Punkt, der die Auswahl zeigt - gezeichnet, weil der echte Knopf
   verborgen ist. Er sitzt VOR dem Zeichen und ist das, was man zuerst
   ansieht. */
.zahlinhalt::before{content:"";flex:0 0 auto;width:13px;height:13px;
  border:1.5px solid var(--leise);border-radius:50%;background:var(--blatt)}
.zahlkachel input:checked + .zahlinhalt{border-color:var(--akzent);
  background:var(--blatt)}
.zahlkachel input:checked + .zahlinhalt::before{border-color:var(--akzent);
  border-width:4px}
.zahlkachel input:focus-visible + .zahlinhalt{outline:2px solid var(--akzent);
  outline-offset:2px}
.zahlkachel:hover .zahlinhalt{border-color:var(--akzent)}
.zahlinhalt svg{flex:0 0 auto;color:var(--leise)}
.zahlkachel input:checked + .zahlinhalt svg{color:var(--akzent)}
.zahlname{min-width:0}
.kaufbezahlen button{width:100%;margin-top:.7rem;padding:.65rem 1rem;
  font-size:15px}
.kaufbezahlen .pflichtzeile{display:block;margin-top:.45rem;font-size:11.5px}
/* ---------------------------------------------------------------------------
   Der Hinweis NEBEN dem Knopf
   ---------------------------------------------------------------------------
   Gemessen am 24.10.2026 in WebKit, der Maschine hinter Safari: Der erste
   fehlende Pflichthaken steht bei x=158, der Knopf bei x=860 - 702px
   auseinander, in verschiedenen Spalten. Safari zeigt seine Meldung AM HAKEN
   und scrollt nicht (scrollY blieb 0). Wer auf den Knopf sieht, sieht nichts
   geschehen; Gregor: "der Button ... ist noch tot, passiert nix."

   Der Knopf war nie tot - die Rueckmeldung kam nur 702px entfernt an. Dieser
   Satz steht dort, wo der Blick liegt.

   Er ist unsichtbar, solange nichts fehlt, und erscheint, sobald der Browser
   etwas als ungueltig fuehrt. :user-invalid statt :invalid: Letzteres griffe
   schon beim Laden, und ein Hinweis, der immer dasteht, wird nicht gelesen. */
.nochoffen{display:none;margin:.5rem 0 0;padding:.45rem .6rem;font-size:12px;
  line-height:1.35;border-radius:6px;color:var(--warnung);
  background:color-mix(in srgb, var(--warnung) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--warnung) 35%, transparent)}
.kaufraster:has(:user-invalid) .nochoffen{display:block}

/* Das Handy: eine Spalte, Angebot oben, Bezahlen unten - genau die
   Reihenfolge, in der das HTML ohnehin steht. */
@media (max-width:900px){
  .kaufraster{grid-template-columns:1fr;
    grid-template-areas:"angebot" "form" "bezahlen"}
  .kaufform fieldset{grid-template-columns:1fr}
  .kaufform .feld,.kaufform .feld-drittel{grid-column:1/-1}
  .blatt-kauf{padding:12px 14px 32px}
}

/* Das Seminarformular ist breiter als die Anmeldung: Es traegt dreizehn
   Felder, darunter zwei Textbereiche. 360px waeren dort eine Spalte, in der
   man Beschreibungen durch ein Guckloch tippt. */
.formular-breit{max-width:44rem}
.formular-breit fieldset{margin:0 0 1.2rem}
/* Die Knoepfe nebeneinander, mit Umbruch auf schmalen Geraeten (5.20). */
.knopfreihe{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}
/* Die Suchreihe ueber der Tafel: Felder nebeneinander, auf schmalen
   Geraeten untereinander. Die Beschriftungen stehen UEBER den Feldern, nicht
   daneben - daneben schieben sie die Felder schmal und brechen die Flucht
   (5.21). */
.suchreihe{display:flex;flex-wrap:wrap;gap:.5rem .8rem;align-items:flex-end;margin:0 0 1.2rem}
.suchreihe label{display:block;margin:0 0 .15rem;font-size:13px}
.suchreihe input{min-width:9rem}
.suchreihe input[type="search"]{min-width:16rem;flex:1}
.suchreihe button{margin-top:0}
.suchreihe .knopf-leise{align-self:flex-end}
.knopfreihe .knopf-leise{display:inline-block;padding:.5rem .9rem;border-radius:.3rem;
  border:1px solid var(--linie);color:var(--text);text-decoration:none;background:var(--blatt)}
/* Das Video in festem Seitenverhaeltnis (16:9). Ohne das springt die Seite
   beim Laden, und auf dem Handy waere das Fenster entweder zu klein oder
   breiter als der Bildschirm. aspect-ratio statt der alten Padding-Hilfe -
   jeder Browser, der diese Anwendung laedt, kann es. */
.videorahmen{position:relative;width:100%;aspect-ratio:16/9;margin:0 0 1.2rem;
  background:#000;border-radius:.4rem;overflow:hidden}
.videorahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* ---------- Wahlseminare ---------- */
/* Jede Zeile ein eigenes Formular, als Karte abgesetzt: So ist zu sehen,
   was zusammengehoert, und der Speichern-Knopf steht bei SEINEN Feldern.
   Auf schmalen Geraeten stapeln die Felder (5.20). */
/* scroll-margin-top, damit der klebende Kopf das Sprungziel nicht verdeckt
   (Leitlinie 5.30: ein Sprung braucht ein Ziel - und der Kopf bleibt stehen). */
.wahlseminare{margin:2rem 0 0;border-top:1px solid var(--linie);padding-top:1.2rem;
  scroll-margin-top:5rem}
.wahlseminare h2{font-size:1.1rem;margin:0 0 .2rem}
.wahlzeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
  gap:0 1rem;background:var(--blatt);border:1px solid var(--linie);
  border-radius:.4rem;padding:1rem 1.1rem .8rem;margin:0 0 .9rem}
.wahlzeile .feld{margin:0 0 .7rem}
.wahlzeile .feld-schmal{max-width:11rem}
/* Die Fusszeile laeuft ueber die ganze Breite, egal wie viele Spalten das
   Raster gerade hat. */
.wahlzeile-fuss{grid-column:1/-1;display:flex;justify-content:space-between;
  align-items:center;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--linie);
  padding-top:.7rem;margin-top:.2rem}
/* Die neue Zeile hebt sich ab - sie legt an, die anderen aendern. */
.wahlzeile-neu{border-style:dashed}
/* Ein Knopf, der etwas WEGNIMMT, sagt das durch seine Farbe (5.22). */
.knopf-warnung{background:var(--blatt);color:var(--warnung);
  border:1px solid var(--warnung)}
.feld-haken{display:flex;gap:.5rem;align-items:flex-start}
.feld-haken label{display:flex;gap:.5rem;align-items:flex-start;margin:0;font-weight:400}
.feld-haken input{margin-top:.25rem;flex:0 0 auto}
.knopf{display:inline-block;padding:.5rem .9rem;border-radius:.3rem;
  background:var(--akzent);color:#fff;text-decoration:none}
pre.rechtstext{white-space:pre-wrap;font-family:inherit;line-height:1.6;
  background:var(--blatt);border:1px solid var(--linie);border-radius:.4rem;padding:1rem;max-width:44rem}

.knopf-leise{padding:.35rem .8rem;border:1px solid var(--linie);border-radius:.3rem;
  background:var(--blatt);color:var(--text);font:inherit;cursor:pointer}
fieldset.teilnehmer{border-left:3px solid var(--akzent)}


/* ---------- Marke (views/marke.js, E-093) ---------- */
/* Die Regeln kommen AUS dem Markenbaustein, damit es die Farben genau einmal
   gibt. Inline-style waere hier ohnehin verboten: style-src 'self' ohne
   'unsafe-inline' (lib/sicherheitskoepfe.js). */
.wortmarke{letter-spacing:-.01em;white-space:nowrap}
.wortmarke .wm-praefix{font-weight:400}
.wortmarke .wm-wort{font-weight:600}
.wortmarke .wm-endung{font-weight:500}
.wortmarke-farbig .wm-praefix{color:#6f6f71}
.wortmarke-farbig .wm-wort{color:#414042}
.wortmarke-farbig .wm-endung{color:#f26522}
.wortmarke-weiss .wm-praefix{color:#ffffff;opacity:0.62}
.wortmarke-weiss .wm-wort{color:#ffffff}
.wortmarke-weiss .wm-endung{color:#ffffff;opacity:0.78}
.wortmarke-dunkel .wm-praefix{color:#7f8a88}
.wortmarke-dunkel .wm-wort{color:#e7f0ee}
.wortmarke-dunkel .wm-endung{color:#ff8b52}
.marke-zeichen-marke{background:#414042;color:#ffffff}
.marke-zeichen-marke .mz-punkt{color:#f26522}
.marke-zeichen-einfarbig{background:#414042;color:#ffffff}
.marke-zeichen-einfarbig .mz-punkt{color:#ffffff}
.marke-zeichen{display:inline-grid;place-items:center;flex:none;font-weight:600;letter-spacing:-.06em;line-height:1;width:var(--zeichen,32px);height:var(--zeichen,32px);border-radius:calc(var(--zeichen,32px)*.22);font-size:calc(var(--zeichen,32px)*.56)}
.marke-zeichen .mz-text{display:block;white-space:nowrap}
@media (prefers-color-scheme: dark){
  .wortmarke-farbig .wm-praefix{color:#7f8a88}
  .wortmarke-farbig .wm-wort{color:#e7f0ee}
  .wortmarke-farbig .wm-endung{color:#ff8b52}
}

/* ---------- newsletter.repro.dog ---------- */
.bereiche,.reiter{display:flex;flex-wrap:wrap;gap:.35rem .9rem;margin:0 0 22px;padding:0 0 10px;
  border-bottom:1px solid var(--linie);font-size:14px}
.bereiche a,.reiter a{color:var(--leise);text-decoration:none;padding:2px 0;border-bottom:2px solid transparent}
.bereiche a[aria-current],.reiter a[aria-current]{color:var(--text);border-bottom-color:var(--akzent);font-weight:600}
.bereiche a:focus-visible,.reiter a:focus-visible{outline:2px solid var(--akzent);outline-offset:3px}
.sprachwahl{display:flex;gap:.6rem;font-size:14px}
.sprachwahl a{color:var(--leise);text-decoration:none}
.sprachwahl a[aria-current]{color:var(--text);font-weight:700}
/* Der Honigtopf: ein Feld, das Menschen nicht sehen und Formularautomaten
   ausfuellen. Nicht display:none - manche Automaten ueberspringen das. */
.honigtopf{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.inline-form{display:inline-block;margin:0 .4rem .4rem 0}
.inline-form button,.statusknoepfe button{margin-top:0}
.knopf-gefahr{background:var(--warnung)}
.bereitschaft li{margin:0 0 .3rem}
.bereitschaft .gut{color:var(--akzent)}
.bereitschaft .offen{color:var(--warnung)}
.wortlaut{white-space:pre-wrap;font-size:13px;color:var(--leise);max-width:40rem}
.blaettern{display:flex;flex-wrap:wrap;gap:.5rem}
.blatt-weit{max-width:1280px}
.nl-kopf{display:grid;gap:4px;max-width:44rem;margin:0 0 14px}
.nl-titel-input,.nl-betreff-input{width:100%}
.nl-editor{display:grid;grid-template-columns:13rem 1fr 22rem;gap:1.1rem;align-items:start;margin:.5rem 0 1rem}
.nl-sidebar-block{margin-bottom:1.1rem}
.nl-sidebar-block h3{margin:0 0 .3rem;font-size:13px}
.nl-palette,.nl-platzhalter{display:flex;flex-direction:column;gap:.4rem}
.nl-palette-item,.nl-platzhalter-item{margin:0;border:1px solid var(--linie);background:var(--blatt);color:var(--text);
  border-radius:10px;padding:.45rem .65rem;font-size:13px;text-align:left;font-weight:500}
.nl-palette-item:hover,.nl-platzhalter-item:hover{border-color:var(--akzent);filter:none}
.nl-palette-item:disabled,.nl-platzhalter-item:disabled{opacity:.4;cursor:not-allowed}
.nl-canvas-wrap{min-height:18rem}
.nl-canvas{display:flex;flex-direction:column;gap:.7rem;min-height:8rem}
.nl-canvas-empty{text-align:center;padding:2rem 1rem;border:1px dashed var(--linie);border-radius:12px}
.nl-block{border:1px solid var(--linie);border-radius:12px;background:var(--blatt);overflow:hidden}
.nl-block-head{display:flex;align-items:center;gap:.5rem;padding:.35rem .6rem;border-bottom:1px solid var(--linie);font-size:12px}
.nl-block-handle{cursor:grab;color:var(--leise)}
.nl-block-typ{font-weight:700;color:var(--leise);flex:1}
.nl-block-remove{margin:0;border:0;background:transparent;color:var(--leise);padding:.1rem .35rem;font-size:13px}
.nl-block-remove:hover{color:var(--warnung);filter:none}
.nl-block-body{padding:.7rem .85rem;display:flex;flex-direction:column;gap:.5rem}
.nl-block-body input{font-size:14px}
.nl-block-toolbar{display:flex;gap:.35rem}
.nl-block-toolbar button{margin:0;width:1.9rem;height:1.9rem;padding:0;border:1px solid var(--linie);background:var(--blatt);color:var(--text);font-size:13px}
.nl-block-content{border:1px solid var(--linie);border-radius:8px;padding:.55rem .7rem;min-height:3rem;font-size:14px;line-height:1.5;background:var(--blatt)}
.nl-block-content:focus-visible{outline:2px solid var(--akzent);outline-offset:1px}
.nl-block-trenner-vorschau{border-top:1px solid var(--linie);margin:.5rem 0}
.nl-preview-wrap{border:1px solid var(--linie);border-radius:12px;overflow:hidden;background:var(--blatt)}
.nl-preview-head{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.5rem .75rem;border-bottom:1px solid var(--linie)}
.nl-preview-head h3{margin:0;font-size:13px}
.nl-preview-frame{width:100%;height:32rem;border:0;background:#fff}
@media (max-width:1100px){.nl-editor{grid-template-columns:1fr}}