/* Dieselben Farben wie im Dashboard - die Anmeldung soll nicht wie
   eine fremde Seite davor wirken. */
:root{
  color-scheme:dark;
  --bg:#12161c; --panel:#1a2029; --panel-hoch:#1e2530; --line:#2a313c;
  --feld:#141920;
  --text:#e6e9ef; --text2:#c9cfda; --dim:#a3abb9;
  --gruen:#4ec37f; --gelb:#e0b341; --rot:#e0937f; --blau:#6fa8dc;
}
*{box-sizing:border-box}
/* iOS Safari vergroessert Schrift im Querformat sonst von selbst. */
html{-webkit-text-size-adjust:100%; text-size-adjust:100%}

body{
  margin:0; min-height:100vh; min-height:100dvh; padding:24px;
  display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:16px;
  background:var(--bg); color:var(--text);
  font:16px/1.55 system-ui,"Segoe UI",sans-serif;
}

/* Zwei Spalten ab 760px: links wozu, rechts wie. Auf schmalen Fenstern
   steht die Karte zuerst - wer schon eine Anfrage laufen hat, will
   seinen Code eintippen, nicht noch einmal ueberzeugt werden. */
.buehne{
  width:100%; max-width:920px;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:48px;
}

/* Anmeldeseite: vier Spalten nebeneinander - Formular, die vier
   wichtigsten Funktionen, Gesamtscore mit Ampel, weitere Funktionen.
   Die ersten drei laufen beim Scrollen mit, die letzte ist die laengste.
   Unter 1360px zwei mal zwei, unter 760px untereinander. */
.buehne.drei{
  max-width:1360px; display:grid; align-items:start; gap:32px;
  grid-template-columns:minmax(0,340px) minmax(0,280px) minmax(0,360px) minmax(0,280px);
  justify-content:center;
}
.drei .karte{max-width:none; flex:none}
.drei > .links, .drei > .wichtig, .drei > .mitte{position:sticky; top:24px}
.drei > .funktionen{max-width:none}

.funktionen{flex:1 1 340px; max-width:420px}
.vorspann{
  color:var(--dim); font-size:12px; font-weight:700;
  text-transform:uppercase; letter-spacing:.06em; margin:0 0 8px;
}
.anspruch{
  font-size:28px; line-height:1.25; letter-spacing:-.01em;
  margin:0 0 8px; font-weight:800; color:var(--text);
}
/* Gewicht traegt die Hierarchie staerker als Groesse: derselbe Satz,
   zwei Gewichte statt zwei Groessen. */
.anspruch .leicht{font-weight:400; color:var(--text2)}
.mitte .sub, .funktionen .sub{
  color:var(--text2); font-size:14px; line-height:1.6;
  margin:0 0 24px; max-width:44ch;
}
/* Die Ampel als echte Information statt als Bild - dieselben vier
   Farben, die auch auf den Kandidaten-Karten stehen. */
.legende{
  list-style:none; margin:0 0 32px; padding:0;
  display:flex; gap:16px; flex-wrap:wrap;
}
.legende li{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--dim);
}
.legende i{width:7px; height:7px; border-radius:50%; flex:none}
.legende i.gruen{background:var(--gruen)}
.legende i.gelb{background:var(--gelb)}
.legende i.grau{background:var(--dim)}
.legende i.rot{background:var(--rot)}

/* Der Gesamtscore ist die Grafik in der Mitte und hebt sich als
   einzige Flaeche neben dem Formular ab. */
.score{
  background:var(--panel-hoch); border:1px solid var(--line);
  border-left:3px solid var(--gruen); border-radius:12px;
  padding:16px 16px 14px; margin:16px 0 24px;
}
.score .legende{margin:14px 0 0; padding-top:12px;
  border-top:1px solid var(--line)}
.score-kopf{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin:0 0 12px; font-size:15px;
}
.score-kopf b{font-weight:700; color:var(--text)}
.skala{
  list-style:none; margin:0 0 12px; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:4px;
}
.skala li{
  display:flex; flex-direction:column; align-items:center; gap:2px;
  font-size:11px; color:var(--dim); font-variant-numeric:tabular-nums;
}
/* Winkel und Farben wie PFEIL_STUFEN im Dashboard */
.pfeil{width:30px; height:30px}
.pfeil path{fill:none; stroke:currentColor; stroke-width:3;
  stroke-linecap:round; stroke-linejoin:round}
.pfeil.p5{color:#15803d}
.pfeil.p4{color:#6fd66f; transform:rotate(27deg)}
.pfeil.p3{color:#e8d33f; transform:rotate(54deg)}
.pfeil.p2{color:#f0922e; transform:rotate(81deg)}
.pfeil.p1{color:#f05252; transform:rotate(108deg)}
.pfeil.p0{color:#dc2626; transform:rotate(135deg)}
.score-text{margin:0 0 8px; font-size:13px; line-height:1.6; color:var(--text2)}
.score-text b{color:var(--text); font-weight:600}
.score-fuss{margin:0; font-size:12px; color:var(--dim)}

/* Werbesatz als eigenes Element unter der Karte. Er fuellt den Platz
   bis zur Hoehe der Funktionsliste daneben und steht darin mittig; der
   zweite Teil gruen wie die Marke, der kurze Strich trennt ihn von der
   Karte. */
.links{display:flex; flex-direction:column; gap:32px; align-self:stretch}
.claim{
  flex:1 0 auto; display:flex; flex-direction:column;
  justify-content:center; align-items:center;
  text-align:center; padding:8px 8px;
}
.claim::before{
  content:""; display:block; width:40px; height:3px;
  margin:0 0 16px; border-radius:2px; background:var(--gruen);
}
.claim p{
  margin:0; text-wrap:balance; font-size:24px; line-height:1.35;
  font-weight:700; letter-spacing:-.01em; color:var(--text);
}
.claim em{font-style:normal; color:var(--gruen)}
/* Der zweite Satz steht unter dem Signalpfeil in der Mitte und
   braucht dort keinen Platz zu fuellen - nur den Abstand zum Kasten. */
.claim.unter-score{flex:none; padding:8px 8px 0}

.merkmale{list-style:none; margin:0; padding:0; display:grid; gap:16px}
.merkmale li{display:flex; gap:12px; align-items:flex-start}
.merkmale li i{
  flex:none; width:7px; height:7px; border-radius:50%;
  background:var(--blau); margin-top:8px;
}
.merkmale li b{
  display:block; font-size:14px; font-weight:500;
  color:var(--text2); margin-bottom:2px;
}
/* Die vier wichtigsten Funktionen: fett, groesser und als eigene
   Flaechen - der Rest tritt einen Schritt zurueck. */
.merkmale.gross{gap:12px}
.merkmale.gross li{
  background:var(--panel); border:1px solid var(--line);
  border-left:3px solid var(--blau); border-radius:10px; padding:14px;
}
.merkmale.gross li i{display:none}
.merkmale.gross li b{font-size:16px; font-weight:700; color:var(--text);
  margin-bottom:4px}
.merkmale.gross li span{font-size:13px; color:var(--text2)}
.merkmale li span{
  display:block; color:var(--dim); font-size:12px; line-height:1.55;
}

/* Die Karte ist die einzige Flaeche, auf der etwas passiert - sie soll
   sich davon abheben. Im Dark Mode heisst Erhebung: hellere Flaeche,
   nicht Schatten (Schatten sind auf dunklem Grund kaum sichtbar und
   wirken schnell schmutzig). Der Akzentstreifen oben greift dieselbe
   Sprache auf wie die Ampel-Randfarben im Dashboard: eine farbige Kante
   markiert "das hier ist die aktive Flaeche". */
.karte{
  width:100%; max-width:420px; flex:0 1 420px;
  background:var(--panel-hoch); border:1px solid var(--line);
  border-top:3px solid var(--blau);
  border-radius:12px; padding:32px 24px 24px;
}

/* Mittelbreit: oben Formular und wichtigste Funktionen, darunter
   Grafik und weitere Funktionen. */
@media (max-width:1359px){
  .buehne.drei{grid-template-columns:minmax(0,400px) minmax(0,400px)}
  .drei > .links, .drei > .wichtig, .drei > .mitte{position:static}
}

@media (max-width:759px){
  .buehne{flex-direction:column; gap:32px}
  .karte{order:-1}
  .buehne.drei{grid-template-columns:minmax(0,420px); gap:32px}
  .funktionen{max-width:420px}
  .anspruch{font-size:22px}
  .claim p{font-size:21px}
}

.marke{display:flex; align-items:baseline; gap:8px; margin-bottom:24px}
.marke .punkt{
  width:9px; height:9px; border-radius:50%;
  background:var(--gruen); flex:none; transform:translateY(-1px);
}
.marke h1{font-size:16px; margin:0; letter-spacing:-.01em}
.marke span{color:var(--dim); font-size:12px}
.marke a{color:inherit; text-decoration:none}
.marke a:focus-visible{outline:2px solid var(--gruen); outline-offset:2px; border-radius:4px}

h2{font-size:14px; margin:0 0 8px; font-weight:600}
.hinweis{color:var(--dim); font-size:13px; margin:0 0 24px}
.hinweis b{color:var(--text2); font-weight:600}

label{display:block; font-size:13px; font-weight:600; margin-bottom:8px}
.feld{
  width:100%; background:var(--feld); color:var(--text);
  border:1px solid var(--line); border-radius:8px;
  padding:12px; font:inherit; min-height:44px;
  transition:border-color 150ms ease-out, background-color 150ms ease-out;
}
.feld::placeholder{color:#7d8695}
.feld:hover{border-color:#39414d}
.feld:focus-visible{outline:2px solid var(--blau); outline-offset:1px;
  border-color:var(--blau)}
.feld[aria-invalid=true]{border-color:var(--rot)}

/* Der Code wird zeichenweise gelesen - Ziffernbreite und Abstand
   machen aus sechs Stellen drei Paare, die man vorlesen kann. */
.feld.code{
  font-size:24px; letter-spacing:.22em; text-align:center;
  font-variant-numeric:tabular-nums; padding:12px 8px 12px 16px;
  min-height:56px;
}

.knopf{
  width:100%; margin-top:16px; min-height:44px;
  background:#2c3a4d; color:#fff;
  border:1px solid #4a5f7d; border-radius:8px;
  padding:12px 16px; font:inherit; font-weight:600; cursor:pointer;
  transition:background-color 150ms ease-out, border-color 150ms ease-out;
}
.knopf:hover{background:#35465c}
.knopf:active{background:#28323f}
.knopf:focus-visible{outline:2px solid var(--blau); outline-offset:2px}
.knopf[disabled]{opacity:.6; cursor:progress}

.zurueck{
  display:inline-flex; align-items:center; min-height:44px;
  margin-top:16px; background:none; border:none; padding:8px 0;
  color:var(--dim); font:inherit; font-size:13px;
  cursor:pointer; text-decoration:underline;
  transition:color 150ms ease-out;
}
.zurueck:hover{color:var(--text2)}
.zurueck:active{color:var(--text)}
.zurueck:focus-visible{outline:2px solid var(--blau); outline-offset:2px}

/* Meldungen tragen ein Zeichen, nicht nur eine Farbe. */
.meldung{
  display:flex; gap:8px; align-items:flex-start;
  border-radius:8px; padding:12px; margin:0 0 16px;
  font-size:13px; line-height:1.5; border:1px solid;
}
.meldung .z{font-weight:700; flex:none; line-height:1.45}
.meldung.fehler{background:rgba(224,147,127,.10); border-color:#5e3c35;
  color:#f0cdc3}
.meldung.gut{background:rgba(78,195,127,.10); border-color:#2f5d45;
  color:#cdead9}

.fehlerfeld{
  color:var(--rot); font-size:13px; margin:8px 0 0;
  display:flex; gap:8px; align-items:flex-start;
}

.fuss{color:#7d8695; font-size:12px; text-align:center; max-width:420px;
  margin:0}
.fuss a{color:var(--dim)}

/* Kleiner Nachsatz unter dem Formular, erklaert den ungewohnten Ablauf */
.fuss-innen{
  color:var(--dim); font-size:12px; line-height:1.5;
  margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line);
}

@media (prefers-reduced-motion:reduce){*{transition:none !important}}
@media (max-width:480px){
  body{padding:16px; justify-content:flex-start; padding-top:40px}
  .karte{padding:24px 16px 24px}
}
/* Fingerbedienung: Textlinks im Fuss sind sonst 14 px hoch und kaum
   zu treffen. Am PC mit Maus aendert sich nichts. */
@media (pointer:coarse){
  .fuss a, .fuss-innen a{display:inline-block; padding:6px 0}
}

/* Rechtstexte: die Anmeldekarte ist mit 420px fuer Fliesstext zu
   schmal - hier zaehlt Zeilenlaenge, nicht Kompaktheit. */
.karte.breit{max-width:72ch; text-align:left}
.karte.breit h1{font-size:19px; margin:0 0 4px}
.karte.breit h2{font-size:14.5px; margin:26px 0 8px; color:var(--text)}
.karte.breit p{margin:0 0 11px; color:var(--text2); line-height:1.65}
.karte.breit b{color:var(--text); font-weight:600}
.karte.breit .fassung{color:var(--dim); font-size:12px; margin-bottom:20px}
.karte.breit .gross{font-size:16px; color:var(--text); line-height:1.6;
  border-left:3px solid var(--gelb); padding-left:14px; margin-bottom:22px}
.rechtsnav{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 24px}
.rechtsnav.mitte{justify-content:center}
.rechtsnav a{font-size:12px; font-weight:600; color:var(--text2);
  text-decoration:none; padding:8px 12px; border:1px solid var(--line);
  border-radius:6px; background:var(--feld);
  transition:background-color 150ms ease-out, color 150ms ease-out;}
.rechtsnav a:hover{background:#232b36; color:#fff}
.rechtsnav a:active{background:#1c232c}
.rechtsnav a:focus-visible{outline:2px solid var(--blau); outline-offset:2px}
.rechtsnav a[aria-current=page]{background:#2c3a4d; border-color:#4a5f7d;
  color:#fff}
.zustimmzeile{display:flex; gap:8px; align-items:flex-start;
  margin:0 0 16px; color:var(--text2); font-size:13.5px; line-height:1.55}
.zustimmzeile input{width:20px; height:20px; flex:none; margin-top:1px;
  accent-color:var(--blau)}
.zustimmzeile label{display:inline; font-weight:400; margin:0}

/* Spendenseite: Betraege als Kacheln statt als Liste von Radioknoepfen.
   Das eigentliche Radio bleibt fuer Tastatur und Screenreader da, nur
   unsichtbar; das Label ist die Kachel. */
.betraege{border:none; margin:0 0 16px; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px}
.betraege legend{font-size:13px; font-weight:600; padding:0; margin-bottom:8px}
.betraege input{position:absolute; opacity:0; width:1px; height:1px}
.betraege label{
  display:flex; align-items:center; justify-content:center;
  min-height:44px; margin:0; border-radius:8px; cursor:pointer;
  background:var(--feld); border:1px solid var(--line);
  font-variant-numeric:tabular-nums; color:var(--text2);
  transition:background-color 150ms ease-out, border-color 150ms ease-out;
}
.betraege label:hover{border-color:#39414d}
.betraege input:checked + label{background:#1f3a2b; border-color:var(--gruen);
  color:#fff}
.betraege input:focus-visible + label{outline:2px solid var(--blau);
  outline-offset:2px}
.spende{border-top-color:var(--gruen)}
.knopf.spenden{background:#1f5b3a; border-color:#2f7d52}
.knopf.spenden:hover{background:#246a44}
.knopf.zweit{display:flex; align-items:center; justify-content:center;
  text-decoration:none; box-sizing:border-box}
.bank{margin-top:24px; padding-top:16px; border-top:1px solid var(--line)}
.bank h3{font-size:13px; margin:0 0 8px; font-weight:600}
.bank dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px;
  margin:0; font-size:13px}
.bank dt{color:var(--dim)}
.bank dd{margin:0; color:var(--text2); overflow-wrap:anywhere}
.bank .iban{font-variant-numeric:tabular-nums; letter-spacing:.03em;
  user-select:all; color:var(--text)}
@media (max-width:380px){.betraege{grid-template-columns:repeat(2,1fr)}}

/* Kommentare & Nachrichten (kommentare.php). Alles mit "km-" davor, damit
   nichts mit den Klassen der Anmeldung oder des Blattes zusammenstoesst.
   Breite wie die Rechtstexte: hier wird gelesen. */
.km-seite{justify-content:flex-start}
.karte.km{max-width:72ch}
.karte.km h1{font-size:19px; margin:0 0 4px}
.km-unter{color:var(--dim); font-size:12px; margin:0 0 16px}
.km-unter b{color:var(--text2); font-weight:600}
.km-reiter{display:flex; gap:4px; margin:0 0 20px; border-bottom:1px solid var(--line)}
.km-reiter a{display:inline-flex; align-items:center; gap:6px; min-height:44px;
  padding:8px 12px; margin-bottom:-1px; border-bottom:2px solid transparent;
  color:var(--dim); text-decoration:none; font-size:13.5px; font-weight:600;
  transition:color 150ms ease-out, border-color 150ms ease-out}
.km-reiter a:hover{color:var(--text)}
.km-reiter a:focus-visible{outline:2px solid var(--blau); outline-offset:2px}
.km-reiter a[aria-current=page]{color:var(--text); border-bottom-color:var(--blau)}
.km-zahl{display:inline-flex; align-items:center; justify-content:center;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  background:var(--gelb); color:#1a1405; font-size:11px; font-weight:700}
.km-einleitung{color:var(--text2); font-size:13.5px; line-height:1.6; margin:0 0 12px}
.km-einleitung b{color:var(--text); font-weight:600}
.km-regeln{margin:0 0 20px; font-size:13px; color:var(--text2);
  border:1px solid var(--line); border-radius:8px; background:var(--feld)}
.km-regeln summary{cursor:pointer; padding:10px 12px; font-weight:600; color:var(--text2)}
.km-regeln summary:focus-visible{outline:2px solid var(--blau); outline-offset:2px}
.km-regeln ul{margin:0; padding:0 12px 12px 30px; line-height:1.6}
.km-regeln li{margin-bottom:4px}
.km-regeln b{color:var(--text); font-weight:600}
.km-feld{resize:vertical; min-height:96px; line-height:1.5}
.km-hilfe{color:var(--dim); font-size:12px; margin:6px 0 0}
.km-neu-form{margin-bottom:28px}
.km-liste{display:grid; gap:14px}
.km-leer{color:var(--dim); font-size:13px; text-align:center; padding:24px 0; margin:0}
.km-faden{border:1px solid var(--line); border-radius:10px; background:var(--panel);
  padding:14px 14px 6px; scroll-margin-top:16px}
.km-eintrag{padding:0 0 10px}
.km-antwort{margin-left:14px; padding:10px 0 10px 12px; border-left:2px solid var(--line)}
.km-betreiber.km-antwort{border-left-color:var(--blau)}
.km-neu{background:rgba(224,179,65,.06); border-radius:6px}
.km-kopf{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px;
  font-size:12.5px; margin-bottom:4px}
.km-name{color:var(--text); font-weight:600; font-size:13.5px}
.km-kopf time{color:var(--dim); margin-left:auto}
.km-marke{font-size:10.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
  padding:1px 6px; border-radius:4px; background:#2c3a4d; color:#cfe0f3}
.km-marke.km-du{background:#262d38; color:var(--dim)}
.km-marke.km-marke-neu{background:#3a3014; color:var(--gelb)}
.km-text{color:var(--text2); font-size:14px; line-height:1.6; overflow-wrap:anywhere}
.km-aktionen{display:flex; gap:12px; margin-top:4px}
.km-aktionen form{margin:0}
.km-klein{background:none; border:none; padding:6px 0; min-height:32px; cursor:pointer;
  color:var(--dim); font:inherit; font-size:12px; text-decoration:underline}
.km-klein:hover{color:var(--text2)}
.km-klein:focus-visible{outline:2px solid var(--blau); outline-offset:2px}
.km-antworten{margin:2px 0 8px}
.km-antworten summary{cursor:pointer; color:var(--blau); font-size:13px; font-weight:600;
  padding:6px 0; min-height:32px; list-style:none}
.km-antworten summary::-webkit-details-marker{display:none}
.km-antworten summary::before{content:"\21B3  "}
.km-antworten[open] summary{color:var(--dim)}
.km-antworten summary:focus-visible{outline:2px solid var(--blau); outline-offset:2px}
.km-antworten form{margin-top:6px}
.km-antworten .km-feld{min-height:72px}
.knopf.km-knopf-klein{width:auto; margin-top:8px}
.km-mehr{text-align:center; margin:4px 0 0; font-size:13px}
.km-mehr a{color:var(--blau)}
.km .fuss-innen a{color:var(--text2)}
.km-versteckt{position:absolute; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap}
@media (max-width:480px){
  .km-antwort{margin-left:6px}
  .km-kopf time{margin-left:0; width:100%}
}

/* Startseite: zweiter Weg unter dem Einladungs-Formular - Konto anlegen
   oder damit anmelden. Trennlinie mit Text, zwei Knoepfe untereinander. */
.kontoweg{margin-top:20px}
.oder{display:flex; align-items:center; gap:12px; margin:0 0 4px;
  color:var(--dim); font-size:12px}
.oder::before, .oder::after{content:""; flex:1; height:1px;
  background:var(--line)}
.knopf.zweit.leise{background:transparent; margin-top:8px}
.knopf.zweit.leise:hover{background:#1c232c}
.kontoweg-info{color:var(--dim); font-size:12px; line-height:1.5;
  margin:12px 0 0}
.kontoweg-info b{color:var(--text2); font-weight:600}

/* Guthaben-Seite: Paket- und Zahlwegwahl, offene Bestellungen, Gutschein */
.wahl{border:0; padding:0; margin:0 0 16px}
.wahl legend{font-size:13px; font-weight:600; padding:0; margin-bottom:8px}
.bestellung{border:1px solid var(--line); border-radius:8px; padding:16px;
  margin:0 0 20px; background:var(--feld)}
.bestellung.neu{border-color:var(--gruen)}
.bestellung h3{font-size:13.5px; margin:0 0 12px; font-weight:600}
.bestellung dl{display:grid; grid-template-columns:auto 1fr; gap:4px 12px;
  margin:0 0 12px; font-size:13px}
.bestellung dt{color:var(--dim)}
.bestellung dd{margin:0; color:var(--text2); overflow-wrap:anywhere}
.bestellung .iban{font-variant-numeric:tabular-nums; letter-spacing:.03em;
  user-select:all; color:var(--text)}
.bestellung .hinweis{margin:12px 0 0}
.bestellung .zurueck{margin-top:4px}
.gutschein{margin-top:28px; padding-top:16px; border-top:1px solid var(--line)}
.gutschein-zeile{display:flex; gap:8px}
.gutschein-zeile .knopf{width:auto; margin-top:0; flex:none}
/* Guthaben-Verwaltung */
.verwaltung-knoepfe{display:flex; gap:16px; align-items:center; flex-wrap:wrap}
.verwaltung-knoepfe .knopf{width:auto; margin-top:0}
.verwaltung-knoepfe .zurueck{margin-top:0}
.verwaltung-gutschein label{margin-top:12px}
.verwaltung-tabelle{width:100%; border-collapse:collapse; font-size:12.5px;
  margin:0 0 24px}
.verwaltung-tabelle td{padding:6px 8px 6px 0; border-bottom:1px solid var(--line);
  color:var(--text2); vertical-align:top}
.verwaltung-tabelle .iban{font-variant-numeric:tabular-nums; color:var(--text)}

/* Guthaben-Seite: Kostenhinweis oben, eigener Betrag */
.kostenhinweis{border:1px solid #2f5d45; border-left:4px solid var(--gruen);
  background:rgba(78,195,127,.08); border-radius:8px; padding:14px 16px;
  margin:0 0 24px; font-size:13.5px; line-height:1.55; color:var(--text2)}
.kostenhinweis p{margin:0}
.kostenhinweis p + p{margin-top:6px}
.kostenhinweis b{color:var(--text); font-weight:600}
.zustimmzeile.eigen{align-items:center; flex-wrap:wrap}
.betrag-feld{display:inline-flex; align-items:center; gap:6px; margin-left:auto}
.betrag-feld .feld{width:110px; min-height:38px; padding:8px 10px; text-align:right}
.betrag-hinweis{color:var(--dim); font-size:12px; margin:-6px 0 0 28px}

/* Guthaben-Verwaltung: Bereiche, Nutzerliste, Korrektur */
.verwaltung-nav{display:flex; gap:8px; flex-wrap:wrap; margin:0 0 24px}
.verwaltung-nav a{font-size:12px; font-weight:600; color:var(--text2);
  text-decoration:none; padding:8px 12px; border:1px solid var(--line);
  border-radius:6px; background:var(--feld)}
.verwaltung-nav a:hover{background:#232b36; color:#fff}
.verwaltung-tabelle th{text-align:left; font-weight:600; color:var(--dim);
  padding:6px 8px 6px 0; border-bottom:1px solid var(--line); font-size:12px}
.verwaltung-tabelle .betrag{text-align:right; white-space:nowrap;
  font-variant-numeric:tabular-nums}
.verwaltung-tabelle a{color:var(--text)}
.verwaltung-suche{margin:0 0 12px}
.verwaltung-korrektur{margin:16px 0 20px}
.verwaltung-korrektur label{margin-top:12px}
.verwaltung-korrektur .zustimmzeile{margin-top:12px}
.karte.breit h2{margin-top:32px}