/* ===========================================================================
   crAIze Club - Oberflaeche.
   Uebernommen von craize.de: dieselben Farben, dieselben Schriften,
   dieselbe Formensprache (Pillen-Knoepfe, 18px-Radien, Mono-Grossbuchstaben
   als Beschriftung).

   Warum eine Datei statt CSS in jeder Vorlage: Die Oberflaeche hat drei
   Einstiege (Verein, Plattformverwaltung, angemeldet-noch-nichts) und ein
   halbes Dutzend Seiten ohne Anmeldung. Dreimal dieselbe Palette zu
   pflegen heisst, dass sie beim naechsten Markenwechsel an zwei Stellen
   stimmt und an einer nicht.

   Die Variablennamen sind bewusst die alten (--papier, --tinte, --akzent):
   Fuenfzig Vorlagen benutzen sie. Getauscht wurden die Werte, nicht die
   Namen - so ist der Markenwechsel eine Aenderung an dieser Datei und
   nicht an fuenfzig.
   =========================================================================== */

/* --- Schriften: mitgeliefert, nicht nachgeladen ---------------------------
   craize.de laedt Space Grotesk, Inter und JetBrains Mono von Google.
   Hier liegen sie im Paket. Der Grund ist nicht Geschwindigkeit: Eine
   Vereinsverwaltung, die bei jedem Seitenaufruf die IP-Adresse eines
   Mitglieds an einen Dritten meldet, waere ein Datenschutzproblem, das
   sich niemand einhandeln muss. Alle drei stehen unter der SIL Open Font
   License; die Lizenztexte liegen in schrift/ daneben.
   ------------------------------------------------------------------------ */
@font-face{font-family:"Inter var";src:url("schrift/inter.260c81a4759b.woff2") format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("schrift/space-grotesk-500.ab4861869c91.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("schrift/space-grotesk-700.f9e147a59a93.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"JetBrains Mono var";src:url("schrift/jetbrains-mono.b058178d7f30.woff2") format("woff2");
  font-weight:100 800;font-style:normal;font-display:swap}

:root{
  /* Flaechen. --papier ist der Seitengrund, --flaeche die Karte darauf. */
  --papier:#07090f; --flaeche:#0b0f1a; --flaeche2:#141b2b;
  --erhaben:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));

  /* Schrift. Drei Stufen genuegen - eine vierte wird nicht mehr gelesen. */
  --tinte:#eef2f8; --tinte-leise:#aab4c6; --leise:#6b7689;

  --linie:rgba(255,255,255,.10); --linie-fein:rgba(255,255,255,.055);
  --linie-stark:rgba(255,255,255,.18);

  --akzent:#4cf0ff; --akzent-2:#3b6cff; --akzent-hell:rgba(76,240,255,.10);
  --verlauf:linear-gradient(120deg,#4cf0ff,#3b6cff);

  /* Zustandsfarben, auf dunklem Grund neu gesetzt: Das alte Waldgruen und
     das alte Ziegelrot verschwinden auf #07090f fast vollstaendig. */
  --gut:#3ddc97; --gut-hell:rgba(61,220,151,.12);
  --warn:#ffb547; --warn-hell:rgba(255,181,71,.12);
  --schlecht:#ff5d7a; --schlecht-hell:rgba(255,93,122,.12);

  /* Ein- und Ausgaenge in den Finanzgrafiken. Dieses Paar besteht den
     Rot-Gruen-Test; die Richtung steckt ohnehin in der Lage zur Nulllinie. */
  --ein:#3ddc97; --aus:#ff8a5b;

  /* --serif heisst weiter --serif, ist aber die Display-Schrift der Marke.
     Der Name bleibt, weil fuenfzig Vorlagen ihn benutzen. */
  --serif:"Space Grotesk","Segoe UI",system-ui,sans-serif;
  --sans:"Inter var","Inter","Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  --mono:"JetBrains Mono var","JetBrains Mono",ui-monospace,SFMono-Regular,Consolas,monospace;

  --radius:18px; --radius-klein:12px;
  --ruck:cubic-bezier(.22,1,.36,1);
  --breite:1160px;
}

*{box-sizing:border-box}
html{color-scheme:dark}
body{margin:0;background:var(--papier);color:var(--tinte);
  font:16px/1.6 var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--akzent);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
summary:focus-visible,textarea:focus-visible{outline:2px solid var(--akzent);outline-offset:2px}
::selection{background:rgba(76,240,255,.25)}

/* --- Kopf ---------------------------------------------------------------- */
header.kopf{background:rgba(11,15,26,.86);border-bottom:1px solid var(--linie);
  position:sticky;top:0;z-index:30;backdrop-filter:blur(14px)}
.kopf .oben{max-width:var(--breite);margin:0 auto;padding:13px 22px 0;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}

/* Die Marke: Zeichen als SVG, Schriftzug als Text. Siehe marke/craize-club.svg. */
.marke{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marke .zeichen{width:30px;height:30px;display:block;flex:none}
.wortmarke{font-family:var(--serif);font-weight:700;font-size:1.12rem;
  letter-spacing:-.025em;color:var(--tinte);white-space:nowrap}
.wortmarke b{font-weight:700;background:var(--verlauf);-webkit-background-clip:text;
  background-clip:text;color:transparent}
.wortmarke .teil{font-family:var(--mono);font-weight:500;font-size:.58em;
  letter-spacing:.18em;text-transform:uppercase;color:var(--leise);
  margin-left:7px;vertical-align:2px}
.markentrenner{width:1px;height:26px;background:var(--linie);flex:none}

.vereinsname{font-family:var(--serif);font-size:1.12rem;font-weight:600;letter-spacing:-.015em}
/* Das Logo bestimmt die Hoehe nicht mit: Ein zu hohes Bild darf den
   Kopf nicht auseinanderdruecken, ein zu breites nichts verdecken. */
.logo{height:32px;width:auto;max-width:150px;object-fit:contain;vertical-align:middle}
@media(max-width:640px){.logo{height:26px;max-width:104px}}
.kopf .konto{margin-left:auto;font-size:13.5px;color:var(--leise);
  display:flex;gap:14px;align-items:center}

/* Vereinswechsel - reines HTML, kein Skript. */
.wechsel{position:relative}
.wechsel>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px}
.wechsel>summary::-webkit-details-marker{display:none}
.wechsel>summary::after{content:"";border:5px solid transparent;
  border-top-color:var(--leise);margin-top:5px;align-self:center}
.wechsel[open]>summary::after{transform:rotate(180deg);margin-top:-5px}
.wechsel>summary:hover .vereinsname{color:var(--akzent)}
.wechselliste{position:absolute;top:calc(100% + 10px);left:0;z-index:40;min-width:288px;
  background:var(--flaeche2);border:1px solid var(--linie-stark);border-radius:var(--radius-klein);
  box-shadow:0 18px 40px rgba(0,0,0,.55);padding:6px}
.wechselliste a{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:9px 12px;border-radius:8px;text-decoration:none;color:var(--tinte);font-size:14.5px}
.wechselliste a:hover{background:rgba(255,255,255,.06)}
.wechselliste a[aria-current]{font-weight:600;color:var(--akzent)}
.wechselliste .rolle{font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;color:var(--leise)}
.wechselliste hr{border:0;border-top:1px solid var(--linie-fein);margin:6px 0}

.rollenfahne{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--akzent);background:var(--akzent-hell);
  border:1px solid rgba(76,240,255,.22);border-radius:999px;padding:3px 10px}

/* Navigation: Pillen wie auf craize.de, der aktive Punkt gefuellt. */
nav.haupt{max-width:var(--breite);margin:0 auto;padding:8px 22px 10px;
  display:flex;gap:2px;flex-wrap:wrap}
nav.haupt a{padding:8px 14px;border-radius:999px;color:var(--tinte-leise);
  text-decoration:none;font-size:14.5px;font-weight:500;
  transition:color .2s,background .2s}
nav.haupt a:hover{color:var(--tinte);background:rgba(255,255,255,.06)}
nav.haupt a.aktiv{color:#05070c;background:var(--tinte);font-weight:600}

/* --- Inhalt -------------------------------------------------------------- */
main{max-width:var(--breite);margin:0 auto;padding:34px 22px 90px}
h1{font-family:var(--serif);font-size:2rem;font-weight:700;letter-spacing:-.03em;
  line-height:1.12;margin:0 0 6px}
.unterzeile{color:var(--tinte-leise);margin:0 0 28px}
h2{font-family:var(--serif);font-size:1.3rem;font-weight:600;letter-spacing:-.02em;
  margin:36px 0 14px;padding-bottom:9px;border-bottom:1px solid var(--linie)}
h3{font-family:var(--serif);font-weight:600;letter-spacing:-.015em}

/* Kacheln. Die Fugen sind Rahmen der Kachel, nicht Luecken im Hintergrund:
   bei ungerader Kachelzahl bliebe sonst ein grauer Streifen stehen. */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);overflow:hidden;margin-bottom:28px}
.kachel{background:var(--erhaben);padding:19px 21px;border-left:1px solid var(--linie-fein)}
.kachel:first-child{border-left:0}
.kachel .zahl{font-family:var(--serif);font-size:2rem;font-weight:700;line-height:1;
  letter-spacing:-.035em;font-variant-numeric:tabular-nums}
.kachel .bez{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--leise);margin-top:8px}
.kachel .zusatz{font-size:13px;color:var(--tinte-leise);margin-top:5px;line-height:1.45}

/* --- Tabellen ------------------------------------------------------------ */
table{width:100%;border-collapse:collapse;font-size:15px}
th{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--leise);text-align:left;padding:0 14px 9px 0;
  border-bottom:1px solid var(--linie);font-weight:500}
td{padding:11px 14px 11px 0;border-bottom:1px solid var(--linie-fein);vertical-align:top}
tr:hover td{background:rgba(255,255,255,.028)}
td.zahl,th.zahl{font-family:var(--mono);font-variant-numeric:tabular-nums;
  text-align:right;white-space:nowrap}
.tabellenrahmen{overflow-x:auto;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);padding:4px 18px}

/* --- Knoepfe ------------------------------------------------------------- */
/* Der volle Knopf ist hell auf dunkel, nicht akzentfarben: Weisse Schrift
   auf #4cf0ff ist nicht lesbar - der Kontrast liegt unter 2:1. */
.knopf{display:inline-flex;align-items:center;gap:9px;padding:9px 20px;border-radius:999px;
  background:var(--tinte);color:#05070c;border:1px solid var(--tinte);
  font:inherit;font-weight:600;font-size:14.5px;cursor:pointer;text-decoration:none;
  transition:background .22s,border-color .22s,color .22s,transform .22s var(--ruck)}
.knopf:hover{background:var(--akzent);border-color:var(--akzent);color:#05070c}
.knopf.leise{background:transparent;color:var(--tinte-leise);border-color:var(--linie-stark)}
.knopf.leise:hover{border-color:var(--akzent);color:var(--akzent);background:rgba(76,240,255,.06)}
.knopf:disabled,.knopf[aria-disabled=true]{opacity:.45;cursor:not-allowed}

/* --- Fahnen -------------------------------------------------------------- */
.fahne{display:inline-block;font-family:var(--mono);font-size:10px;letter-spacing:.07em;
  text-transform:uppercase;padding:2px 9px;border-radius:999px;
  border:1px solid currentColor;white-space:nowrap}
.f-gut{color:var(--gut);background:var(--gut-hell)}
.f-warn{color:var(--warn);background:var(--warn-hell)}
.f-schlecht{color:var(--schlecht);background:var(--schlecht-hell)}

/* --- Formulare ----------------------------------------------------------- */
form.formular{max-width:700px;background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius);padding:28px}
fieldset{border:0;padding:0;margin:0 0 26px}
legend{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--akzent);font-weight:500;padding:0 0 10px}
.feld{margin-bottom:18px}
.feld label{display:block;font-size:13.5px;color:var(--tinte-leise);margin-bottom:6px;font-weight:500}
.feld input[type=text],.feld input[type=email],.feld input[type=password],
.feld input[type=date],.feld input[type=number],.feld input[type=search],
.feld input[type=url],.feld input[type=tel],.feld select,.feld textarea{
  width:100%;padding:10px 12px;background:#070a12;border:1px solid var(--linie);
  border-radius:10px;color:var(--tinte);font:inherit}
.feld input:focus,.feld select:focus,.feld textarea:focus{border-color:rgba(76,240,255,.45)}
.feld input[type=file]{color:var(--tinte-leise);font-size:14px}
.feld .hilfe{font-size:12.5px;color:var(--leise);margin-top:5px;line-height:1.5}
.feld .fehler{font-size:13.5px;color:var(--schlecht);margin-top:5px;font-weight:500}
.aktionen{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin-top:26px;padding-top:21px;border-top:1px solid var(--linie)}
input[type=checkbox],input[type=radio]{accent-color:var(--akzent)}

/* --- Baender ------------------------------------------------------------- */
.meldung{padding:13px 18px;margin-bottom:22px;border-radius:var(--radius-klein);
  border:1px solid var(--linie);border-left:3px solid var(--akzent);background:var(--flaeche)}
.meldung.success{border-left-color:var(--gut)}
.meldung.error{border-left-color:var(--schlecht)}
.warnband{background:var(--warn-hell);border:1px solid rgba(255,181,71,.35);
  border-radius:var(--radius-klein);padding:15px 18px;margin-bottom:24px;font-size:14.5px}
.warnband b{color:var(--warn)}
.notband{background:var(--schlecht-hell);border:1px solid rgba(255,93,122,.4);
  border-radius:var(--radius-klein);padding:15px 18px;margin-bottom:24px;font-size:14.5px}
.leer{color:var(--leise);padding:34px 0;text-align:center}
.suchleiste{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}
.suchleiste input,.suchleiste select{padding:9px 13px;border:1px solid var(--linie);
  border-radius:999px;font:inherit;font-size:14.5px;background:#070a12;color:var(--tinte)}
.suchleiste input:focus,.suchleiste select:focus{border-color:rgba(76,240,255,.45)}

/* Mono-Grossbuchstaben mit Punkt davor - die Beschriftung von craize.de.
   Hier fuer Seiten, die eine Zeile Einordnung ueber der Ueberschrift
   vertragen. */
.marker{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--akzent);display:inline-flex;
  align-items:center;gap:9px;margin-bottom:14px}
.marker::before{content:"";width:7px;height:7px;border-radius:50%;
  background:var(--akzent);box-shadow:0 0 12px var(--akzent)}

/* --- Plattformebene ------------------------------------------------------
   Dieselbe Formensprache, anderer Akzent: Wer auf /adm arbeitet, sieht an
   der Farbe, dass er eine Ebene ueber dem Verein ist. Das war schon vorher
   so und bleibt so - nur nicht mehr als zweite, eigene Palette.
   ------------------------------------------------------------------------ */
body.plattform{--akzent:#ffb547;--akzent-2:#ff8a5b;--akzent-hell:rgba(255,181,71,.12);
  --verlauf:linear-gradient(120deg,#ffb547,#ff8a5b)}
body.plattform .wortmarke b{background:var(--verlauf);-webkit-background-clip:text;
  background-clip:text;color:transparent}
body.plattform .marke .zeichen{filter:hue-rotate(168deg) saturate(1.25)}

.knopf.gefahr{background:var(--schlecht);border-color:var(--schlecht);color:#1a0509}
.knopf.gefahr:hover{background:#ff7d94;border-color:#ff7d94;color:#1a0509}
.hinweis{background:var(--flaeche);border:1px solid var(--linie);
  border-radius:var(--radius-klein);padding:16px 18px;color:var(--tinte-leise);font-size:14px}
.meldung.erfolg{border-left-color:var(--gut)}
.meldung.fehler{border-left-color:var(--schlecht)}
.marke-gut{color:var(--gut)} .marke-warn{color:var(--warn)} .marke-schlecht{color:var(--schlecht)}

/* --- Einstiegsseiten ohne Kopf (Anmeldung, Einladung, Fehler) -------------
   Bewusst NICHT .tafel: So heisst im Finanzblatt die Diagrammtafel, und
   eine Klasse, die an zwei Stellen etwas anderes meint, faellt genau dann
   auf, wenn jemand die eine aendert und die andere kaputtgeht.
   ------------------------------------------------------------------------ */
.einstieg-mitte{min-height:100dvh;display:grid;place-items:center;padding:28px}
.einstiegskarte{width:100%;max-width:430px;background:var(--flaeche);
  border:1px solid var(--linie);border-radius:var(--radius);padding:34px 32px;
  box-shadow:0 26px 70px rgba(0,0,0,.45)}
.einstiegskarte .marke{margin-bottom:22px}
.einstiegskarte h1{font-size:1.5rem;margin-bottom:4px}
.einstiegskarte .sub{color:var(--leise);margin:0 0 26px;font-size:14.5px}

/* Der Schein hinter der Anmeldekarte - derselbe Effekt wie im Kopfbereich
   von craize.de, nur ruhiger: ein Farbfleck, keine Animation. */
.einstieg-mitte::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;
  background:radial-gradient(760px circle at 50% -10%,rgba(59,108,255,.20),transparent 62%),
             radial-gradient(520px circle at 82% 108%,rgba(76,240,255,.11),transparent 60%)}

@media(max-width:640px){
  .kopf .oben{padding:12px 16px 0}
  .kopf .konto{width:100%;margin:8px 0 0}
  nav.haupt{padding:6px 12px 10px}
  main{padding:26px 16px 70px}
  h1{font-size:1.6rem}
}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:.01ms !important;animation-duration:.01ms !important}
}