/* Die Waage — Oberflaeche.
 *
 * Die Farben sind die der Seite, an der sie haengt (index.html): Blut, Dorn,
 * Pergament. Dadurch wirkt der Bereich wie ein Teil der Seite und nicht wie
 * eine fremde App hinter einem Knopf.
 *
 * FRAKTUR NUR FUER UEBERSCHRIFTEN. Sie traegt die Handschrift der Seite, ist
 * aber im Fliesstext kaum zu lesen - und hier steht Fliesstext, den man
 * wirklich lesen muss (Argumente, Begruendungen).
 */

@font-face{
  font-family:'UnifrakturMaguntia';
  /* EIGENE Kopie, nicht die der Hauptseite: die Waage laeuft als eigener Dienst
     und soll nicht davon abhaengen, dass daneben ein Dateiserver eine Schrift
     ausliefert - lokal gibt es den gar nicht. Faellt sie aus, greift der
     serif-Rueckfall und die Seite bleibt lesbar. */
  src:url('/waage/unifraktur-maguntia.woff2') format('woff2');
  font-display:swap;
}

:root{
  --grund:#0a0608;
  --flaeche:#140d10;
  --flaeche2:#1c1216;
  --kante:#2f1f24;
  --kante-hell:#432b32;
  --schrift:#ded6cc;
  --leise:#8d7d74;
  --blut:#8b0f16;
  --blut-hell:#c81a24;
  --blut-glut:#ff3b3b;
  --hell:#e8dcc4;      /* die Seite DAFUER */
  --gut:#4d7c3a;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:
    radial-gradient(ellipse 90% 60% at 50% 0%, #150c10 0%, #0a0608 60%),
    var(--grund);
  color:var(--schrift);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  min-height:100vh;
  padding-bottom:60px;
}

h1,h2.gotisch,.gotisch{
  font-family:'UnifrakturMaguntia',serif;
  font-weight:400;
  letter-spacing:.02em;
}

a{color:var(--blut-hell);text-decoration:none}
a:hover{text-decoration:underline}

/* ---------- Kopf ---------- */
.kopf{
  display:flex;align-items:center;gap:14px;
  padding:14px 20px;border-bottom:1px solid var(--kante);
  background:linear-gradient(180deg,#140d10,#0c0709);
  position:sticky;top:0;z-index:20;
}
.kopf .marke{display:flex;align-items:center;gap:10px;font-size:22px}
.kopf .marke .raute{width:10px;height:10px;background:var(--blut);transform:rotate(45deg);
  box-shadow:0 0 14px rgba(200,26,36,.6)}
.kopf .rest{margin-left:auto;display:flex;align-items:center;gap:12px;font-size:13px;color:var(--leise)}
.kopf .zurueck{color:var(--leise);font-size:13px}
.abzeichen{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  font-size:12px;font-weight:700;color:#fff;border:1px solid var(--kante-hell)}

.huelle{max-width:1080px;margin:0 auto;padding:0 20px}

/* ---------- Knoepfe ---------- */
button,.knopf{
  font:inherit;font-size:13.5px;font-weight:560;cursor:pointer;border-radius:8px;
  padding:9px 15px;border:1px solid var(--kante-hell);
  background:var(--flaeche2);color:var(--schrift);transition:.15s;display:inline-block;
}
button:hover,.knopf:hover{border-color:#5c3a43;background:#241519;text-decoration:none}
button:disabled{opacity:.45;cursor:default}
button.wichtig{background:var(--blut);border-color:var(--blut);color:#fff}
button.wichtig:hover{background:var(--blut-hell);border-color:var(--blut-hell)}
button.leise{background:transparent;color:var(--leise);border-color:transparent}
button.leise:hover{color:var(--schrift);border-color:var(--kante)}
button.klein{padding:5px 10px;font-size:12px}

input,textarea,select{
  font:inherit;background:#0e090b;color:var(--schrift);
  border:1px solid var(--kante-hell);border-radius:8px;padding:9px 11px;width:100%;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--blut)}
textarea{resize:vertical;min-height:64px;line-height:1.5}
label.feld{display:block;margin-bottom:12px}
label.feld span{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;
  color:var(--leise);margin-bottom:5px}

.meldung{border-radius:8px;padding:10px 13px;font-size:13.5px;margin:12px 0}
.meldung.schlecht{background:rgba(139,15,22,.16);border:1px solid var(--blut);color:#f0b3b3}
.meldung.gut{background:rgba(77,124,58,.14);border:1px solid var(--gut);color:#c3ddb5}

/* ---------- Anmeldung ---------- */
.anmeldekasten{
  max-width:380px;margin:9vh auto 0;background:var(--flaeche);
  border:1px solid var(--kante);border-radius:14px;padding:26px 24px 22px;
}
.anmeldekasten h1{margin:0 0 4px;font-size:30px;text-align:center}
.anmeldekasten .unter{text-align:center;color:var(--leise);font-size:13px;margin:0 0 20px}

/* ---------- Liste ---------- */
.listenkopf{display:flex;align-items:baseline;gap:14px;padding:26px 0 16px;flex-wrap:wrap}
.listenkopf h1{margin:0;font-size:27px}
.listenkopf .rest{margin-left:auto}

.karten{display:grid;gap:12px}
.eintrag{
  display:grid;grid-template-columns:1fr 190px;gap:18px;align-items:center;
  background:var(--flaeche);border:1px solid var(--kante);border-radius:12px;
  padding:15px 17px;cursor:pointer;transition:.15s;
}
.eintrag:hover{border-color:var(--kante-hell);background:var(--flaeche2)}
.eintrag h3{margin:0 0 5px;font-size:16.5px;font-weight:620}
.eintrag .zeile{font-size:12.5px;color:var(--leise);display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.eintrag .zeile .fremd{color:var(--blut-hell)}

/* Mini-Waage: ein Balken mit Mittelmarke. Kein zweites Waagen-SVG -
   in der Liste zaehlt der Vergleich, nicht das Bild. */
.mini{text-align:right}
.mini .bahn{height:7px;background:#241519;border-radius:99px;position:relative;overflow:hidden}
.mini .bahn .mitte{position:absolute;left:50%;top:0;bottom:0;width:1px;background:#4a3038}
.mini .bahn i{position:absolute;top:0;bottom:0;border-radius:99px}
.mini .bahn i.dafuer{background:var(--hell)}
.mini .bahn i.dagegen{background:var(--blut-hell)}
.mini .wort{font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;margin-top:6px;color:var(--leise)}
.mini .wort.dafuer{color:var(--hell)}
.mini .wort.dagegen{color:var(--blut-hell)}
.mini .wort.alt{color:#7a5a2a}

.leerhinweis{color:var(--leise);text-align:center;padding:50px 20px;font-size:14.5px}

/* ---------- Blatt ---------- */
.frage{padding:24px 0 6px;border-bottom:1px solid var(--kante);margin-bottom:20px}
.frage .kopfzeile{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.frage h1{margin:0;font-size:27px;flex:1;min-width:280px}
.frage .unten{color:var(--leise);margin:8px 0 16px;font-size:13px;display:flex;gap:12px;flex-wrap:wrap}
.marker{font-size:10.5px;text-transform:uppercase;letter-spacing:.12em;color:var(--leise);
  border:1px solid var(--kante-hell);border-radius:99px;padding:3px 9px;white-space:nowrap}
.marker.geteilt{color:var(--blut-hell);border-color:var(--blut);background:rgba(139,15,22,.1)}
.frage .kontext{color:var(--leise);font-size:14px;max-width:70ch;margin:0 0 14px}

.waagefeld{
  background:radial-gradient(120% 90% at 50% 0%,#180f13 0%,#0b0709 70%);
  border:1px solid var(--kante);border-radius:14px;margin-bottom:14px;overflow:hidden;
}
.veraltet{display:none;align-items:center;gap:9px;background:rgba(139,15,22,.14);
  border-bottom:1px solid var(--blut);color:#f0a9a9;font-size:12.5px;padding:9px 16px}
.veraltet b{color:var(--schrift);font-weight:600}
.waagefeld.istalt .veraltet{display:flex}
.waagefeld.istalt svg.waage{opacity:.3;filter:grayscale(.55)}
.waagefeld.istalt .urteil{opacity:.4}

svg.waage{display:block;width:100%;height:auto;max-height:320px;transition:opacity .35s,filter .35s}
/* ZWEI SEKUNDEN (Nutzer-Vorgabe 31.08.). Die Kurve laesst sie am Ende leicht
   nachschwingen - eine Waage kommt nicht abrupt zum Stehen. */
.balken,.schale{transition:transform 2s cubic-bezier(.22,1.06,.36,1)}
/* Beim ersten Zeichnen aus: die Schalen haetten sonst aus der Ecke des SVG
   heranzufliegen, weil sie vorher gar kein transform tragen. */
svg.waage.ohne-schwung .balken,svg.waage.ohne-schwung .schale{transition:none}

.urteil{padding:2px 26px 22px;text-align:center;transition:opacity .35s}
.verdikt{font-size:19px;font-weight:650;margin:0 0 4px}
.verdikt .zahl{color:var(--blut-glut);font-variant-numeric:tabular-nums}
.verdikt.dafuer .zahl{color:var(--hell)}
.verdikt.offen,.verdikt.offen .zahl{color:var(--leise)}
/* ---------- Absolute Gewichte ----------
   Neben dem Prozentwert, weil der ein VERHÄLTNIS ist: er kann fallen, während
   die eigene Seite absolut zulegt. Ohne diese Zeile sieht das aus, als hätte
   das Nachliefern von Argumenten geschadet. */
.gewichte{
  margin:6px 0 2px;font-size:13px;color:var(--leise);
  display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap;
  font-variant-numeric:tabular-nums;
}
.gewichte b{font-weight:600;letter-spacing:.02em}
.gewichte .g-dafuer b{color:var(--hell)}
.gewichte .g-dagegen b{color:var(--blut-hell)}
.gewichte .doppelpunkt{color:#5a4a44}
.gewichte i{font-style:normal;font-size:11.5px;margin-left:5px}
.gewichte i.auf{color:var(--gut)}
.gewichte i.ab{color:#a06a2a}
.gewichte .seit{font-size:11.5px;color:#6a5a52;width:100%;text-align:center}

/* ---------- Woran es hängt ---------- */
.traeger{
  margin:16px auto 0;max-width:68ch;text-align:left;
  border-top:1px solid #241519;padding-top:13px;
}
.tueberschrift{
  font-size:10.5px;text-transform:uppercase;letter-spacing:.14em;
  color:#6f6058;margin-bottom:9px;text-align:center;
}
.tspalten{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tkopf{font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-bottom:6px;color:var(--leise)}
.traeger .pro .tkopf{color:var(--hell)}
.traeger .contra .tkopf{color:var(--blut-hell)}
.tzeile{
  display:flex;align-items:baseline;gap:8px;font-size:13px;
  padding:3px 0;color:var(--schrift);
}
.tzeile.leer{color:#6f6058;font-style:italic}
.tanteil{
  flex:none;width:34px;text-align:right;font-variant-numeric:tabular-nums;
  font-size:12px;color:var(--leise);
}
/* UMBRECHEN, nicht abschneiden: der Titel ist hier die ganze Information -
   "Das französische Haus trägt sich all…" nützt niemandem.
   `min-width:0` ist Pflicht: ein Flex-Element schrumpft sonst nie unter seine
   Textbreite, und der Text lief einfach rechts aus dem Bild (auf dem Handy
   gesehen; die Prüfung auf waagerechten Überlauf schlug dabei NICHT an, weil
   die Zeile den Seitenrand gar nicht verschob). */
.ttitel{flex:1;min-width:0;overflow-wrap:anywhere;line-height:1.4}
.twert{flex:none;font-size:11.5px;color:#6f6058;font-variant-numeric:tabular-nums}

@media (max-width:600px){
  .tspalten{grid-template-columns:1fr;gap:12px}
}

.urteil .zus{color:var(--leise);max-width:68ch;margin:8px auto 0;font-size:14px;text-align:left}
.urteil .stempel{margin-top:14px;font-size:11.5px;color:#6a5a52}
.urteil .keins{color:var(--leise);font-size:14px;padding:6px 0 4px}

.aktionen{display:flex;gap:9px;flex-wrap:wrap;margin:0 0 24px}

.spalten{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.spalte h2{font-size:12px;text-transform:uppercase;letter-spacing:.14em;margin:0 0 12px;
  display:flex;align-items:center;gap:9px;color:var(--leise)}
.spalte h2 .punkt{width:8px;height:8px;border-radius:2px;display:block}
.pro h2 .punkt{background:var(--hell)}
.contra h2 .punkt{background:var(--blut-hell)}
.spalte h2 .n{margin-left:auto;font-variant-numeric:tabular-nums;background:var(--flaeche2);
  border:1px solid var(--kante);border-radius:99px;padding:2px 9px;font-size:11px}

.karte{background:var(--flaeche);border:1px solid var(--kante);border-radius:11px;
  padding:10px 14px;margin-bottom:7px;position:relative;overflow:hidden}
body.mit-details .karte,.karte.offen{padding:12px 14px 13px;margin-bottom:10px}
.karte::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px}
.pro .karte::before{background:var(--hell)}
.contra .karte::before{background:var(--blut-hell)}
/* ---------- Klappen ---------- */
.ansichtsleiste{display:flex;justify-content:flex-end;margin:0 0 8px}

.spalte h2[data-klapp]{cursor:pointer;user-select:none;padding:5px 0;border-radius:6px;transition:.15s}
.spalte h2[data-klapp]:hover{color:var(--schrift)}
.spalte .pfeil{display:inline-block;transition:transform .2s;font-size:10px;color:var(--leise)}
.spalte.zu .pfeil{transform:rotate(-90deg)}
.spalte.zu .spalteninhalt{display:none}
/* Eine zugeklappte Spalte darf nicht spurlos verschwinden - sonst sieht die
   Seite kaputt aus statt eingeklappt. */
.spalte.zu h2{border-bottom:1px dashed var(--kante-hell);margin-bottom:0}

/* ---------- Kompakt vs. Details ----------
   KOMPAKT IST DER STANDARD. Neun Argumente mal 130 px sind 1200 px Scrollweg;
   als Zeile sind es 40 px. Die Bewertung bleibt trotzdem sichtbar - sie ist
   der Kern, nur eben als Zahl statt als Balken. */
.karte .langfassung{display:none}
body.mit-details .karte .langfassung,
.karte.offen .langfassung{display:block}

.karte{cursor:pointer}
.karte .kurzwert{
  float:right;margin-left:10px;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--schrift);letter-spacing:.02em;white-space:nowrap;
}
.karte .kurzwert i{font-style:normal;color:#6f6058;font-size:10.5px}
.karte .kurzwert.offen{color:#6f6058}
/* Im Detailmodus wandert die Zahl weg - sie steht dann doppelt da. */
body.mit-details .karte .kurzwert,
.karte.offen .kurzwert{display:none}

.karte .titel{font-weight:620;font-size:14.5px;margin-bottom:3px;padding-right:52px}
/* Herkunftsmarke. Bewusst leise: sie soll auffindbar sein, wenn man danach
   sucht, aber nicht mit dem Argument selbst um Aufmerksamkeit ringen. */
.karte .herkunft{
  font-size:10px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;
  color:#6f6058;border:1px solid var(--kante);border-radius:99px;
  padding:1px 7px;margin-left:8px;vertical-align:2px;white-space:nowrap;
}
.karte .text{color:var(--leise);font-size:13.5px}
.karte .werkzeug{position:absolute;top:9px;right:9px;display:flex;gap:3px;opacity:0;transition:.15s}
.karte:hover .werkzeug{opacity:1}
.karte .werkzeug button{padding:3px 7px;font-size:11px;border-color:transparent;background:transparent;color:var(--leise)}
.karte .werkzeug button:hover{color:var(--schrift);border-color:var(--kante-hell);background:var(--flaeche2)}

.messung{display:flex;gap:16px;margin-top:11px;padding-top:10px;border-top:1px solid #241519}
.mass{flex:1}
.mass .b{display:flex;justify-content:space-between;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#6f6058;margin-bottom:5px}
.mass .b em{font-style:normal;color:var(--schrift);font-variant-numeric:tabular-nums;letter-spacing:0}
.bahn{height:4px;background:#241519;border-radius:99px;overflow:hidden}
.bahn i{display:block;height:100%;border-radius:99px}
.pro .bahn i{background:var(--hell)}
.contra .bahn i{background:var(--blut-hell)}
.bahn.leise i{opacity:.45}
.karte .warum{margin-top:9px;font-size:12.5px;color:#9a8b80;font-style:italic}
.karte.unbewertet .messung{color:var(--leise)}
.karte .offen-hinweis{margin-top:10px;font-size:11.5px;color:#7a6a60;letter-spacing:.04em}

.neu{width:100%;text-align:left;color:var(--leise);border-style:dashed;background:transparent;padding:11px 14px}
.neu:hover{color:var(--schrift);border-color:var(--kante-hell)}

.fehlt{margin-top:24px;background:var(--flaeche);border:1px solid var(--kante);
  border-left:3px solid var(--blut);border-radius:11px;padding:15px 18px}
.fehlt h3{margin:0 0 12px;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--blut-hell)}

/* Frage und ihr Antwortfeld gehören sichtbar zusammen — deshalb ein Block mit
   gemeinsamer Kante, nicht eine Liste und irgendwo darunter ein Feld. */
.frageblock{margin-bottom:14px;padding-left:13px;border-left:2px solid #3a232a}
.frageblock:last-child{margin-bottom:4px}
.frageblock .fragetext{color:var(--schrift);font-size:14px;margin-bottom:7px;display:flex;gap:9px}
.frageblock .nr{
  flex:none;width:19px;height:19px;border-radius:50%;background:rgba(139,15,22,.22);
  border:1px solid var(--blut);color:var(--blut-hell);
  font-size:11px;font-weight:700;display:grid;place-items:center;margin-top:2px;
}
.frageblock textarea{min-height:44px;font-size:13.5px;padding:7px 10px;transition:border-color .25s}

/* Der Zustand AM FELD - dort schaut man hin. Die Fußzeile liegt unter allen
   Fragen und ist beim Tippen im ersten Feld längst aus dem Blick. */
.frageblock.geaendert textarea{border-color:#c9a227}
.frageblock.gesichert textarea{border-color:var(--gut)}
.frageblock.schiefgegangen textarea{border-color:var(--blut-hell)}
.frageblock.geaendert .fragetext::after{
  content:"ungesichert";
  margin-left:9px;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:#c9a227;white-space:nowrap;
}
.frageblock .fremdantwort{color:var(--leise);font-size:13.5px;padding:2px 0 0 28px}

#antwort-fuss{display:flex;gap:9px;align-items:center;flex-wrap:wrap;
  margin-top:14px;padding-top:12px;border-top:1px solid #241519}
#antworten-stand{font-size:12px;color:#6f6058}
#antworten-stand.gut{color:var(--gut)}
#antworten-stand.schlimm{color:var(--blut-hell)}
#antworten-stand.offen{color:#c9a227}

.ausgang{margin-top:24px;background:var(--flaeche);border:1px solid var(--kante);border-radius:11px;padding:15px 18px}
.ausgang h3{margin:0 0 9px;font-size:12px;text-transform:uppercase;letter-spacing:.14em;color:var(--leise)}
.ausgang p.warum{color:#6f6058;font-size:12.5px;margin:0 0 10px}

/* ---------- Dialog ---------- */
.schleier{position:fixed;inset:0;background:rgba(4,2,3,.8);display:none;z-index:60;
  align-items:center;justify-content:center;padding:20px}
.schleier.auf{display:flex}
.dialog{background:var(--flaeche);border:1px solid var(--kante-hell);border-radius:14px;
  padding:22px 22px 18px;max-width:640px;width:100%;max-height:86vh;overflow:auto}
.dialog h2{margin:0 0 16px;font-size:20px;font-family:'UnifrakturMaguntia',serif;font-weight:400}
.dialog .fuss{display:flex;gap:9px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap}
.dialog .fuss .links{margin-right:auto}
.dialog pre{background:#0e090b;border:1px solid var(--kante);border-radius:8px;padding:12px;
  font-size:12px;line-height:1.45;max-height:340px;overflow:auto;white-space:pre-wrap;word-break:break-word;
  color:#b8aca2;font-family:ui-monospace,Menlo,Consolas,monospace}
.dialog .hinweis{color:var(--leise);font-size:13px;margin:0 0 14px}
.dialog .seitenwahl{display:flex;gap:8px;margin-bottom:14px}
.dialog .seitenwahl button{flex:1}
.dialog .seitenwahl button.aktiv.dafuer{background:var(--hell);border-color:var(--hell);color:#241a10}
.dialog .seitenwahl button.aktiv.dagegen{background:var(--blut);border-color:var(--blut);color:#fff}

/* ---------- Überblick-Stufe ---------- */
body.nur-ueberblick .ansichtsleiste,
body.nur-ueberblick .spalten,
body.nur-ueberblick .fehlt,
body.nur-ueberblick .ausgang{display:none}
.stufenhinweis{color:var(--leise);font-size:13px;font-style:italic}

/* ---------- Freigabe mit Stufen ---------- */
.fgzeile{display:flex;align-items:center;gap:12px;padding:9px 0;border-bottom:1px solid #241519;flex-wrap:wrap}
.fgzeile:last-child{border-bottom:none}
.fgwer{display:flex;align-items:center;gap:10px;flex:1;min-width:130px}
.fgwahl{display:flex;gap:0;border:1px solid var(--kante-hell);border-radius:8px;overflow:hidden}
.fgwahl button{
  border:none;border-radius:0;background:#0e090b;color:var(--leise);
  padding:6px 12px;font-size:12px;border-left:1px solid var(--kante);
}
.fgwahl button:first-child{border-left:none}
.fgwahl button:hover{background:#1c1216;color:var(--schrift)}
.fgwahl button.aktiv{background:var(--blut);color:#fff}

.leute{display:grid;gap:7px;max-height:300px;overflow:auto}
.leute label{display:flex;align-items:center;gap:10px;padding:8px 11px;border:1px solid var(--kante);
  border-radius:8px;cursor:pointer;background:#0e090b}
.leute label:hover{border-color:var(--kante-hell)}
.leute input{width:auto;margin:0}

@media (max-width:760px){
  .spalten{grid-template-columns:1fr}
  .eintrag{grid-template-columns:1fr;gap:12px}
  .mini{text-align:left}
  .frage h1{font-size:22px}
  .kopf .marke{font-size:18px}
}

/* Auf dem Handy brach die Kopfzeile in drei Zeilen um und nahm damit ein
   Viertel des Schirms: der Fraktur-Schriftzug ist breit, und "alle Abwägungen"
   passt nicht daneben. Der Pfeil allein genügt - wohin er führt, ist an dieser
   Stelle die einzige Möglichkeit. */
@media (max-width:520px){
  .kopf{padding:10px 14px;gap:10px}
  .kopf .marke{font-size:17px;white-space:nowrap}
  .kopf .zurueck{font-size:0}
  .kopf .zurueck::before{content:"←";font-size:17px}
  .kopf .rest{gap:8px;font-size:12px}
  .kopf .rest span{max-width:9ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ---------- Zweifelsfall ----------
   Claude haelt die Seite fuer fraglich, hat sie aber nicht angefasst. Dasselbe
   Bernstein wie beim ungesicherten Antwortfeld - beides heisst "das wartet auf
   dich", und zwei Farben fuer dieselbe Aussage waeren eine Vokabel zuviel.
   Der Block steht AUSSERHALB der Langfassung, also auch bei zugeklappter Karte
   sichtbar: eine Aufforderung, die man erst aufklappen muss, ist keine. */
.karte.fraglich{border-color:#6a5418}
.karte.fraglich::before{background:#c9a227}
.karte .zweifel{
  margin:8px 0 2px;padding:8px 10px;border-radius:8px;
  background:rgba(201,162,39,.08);border:1px solid #5a4816;
}
.karte .zw-kopf{font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#d9b23a}
.karte .zw-warum{margin-top:5px;font-size:12.5px;color:#9a8b80;font-style:italic}
.karte .zw-knoepfe{display:flex;gap:6px;margin-top:8px}
.karte .zw-knoepfe button{padding:4px 11px;font-size:11.5px}
.karte .zw-knoepfe button:first-child{border-color:#6a5418;color:#d9b23a}
.karte .zw-knoepfe button:first-child:hover{background:rgba(201,162,39,.14);border-color:#8a6f20}

/* ---------- Wechsel-Protokoll ----------
   Ein Argument, das die Seite gewechselt hat. Schiefergrau-blau: die einzige
   Farbe im Blatt, die weder "meine Seite" (creme) noch "Gegenseite" (rot) noch
   "handle jetzt" (bernstein) bedeutet - genau das soll sie sagen, naemlich
   nichts als "hier ist etwas passiert".

   Deutlich ruhiger als der Zweifelsfall daneben. Der fordert eine Entscheidung,
   das hier ist Historie; zwei gleich laute Marken und man sieht keiner mehr an,
   was zu tun ist. */
.karte.gewechselt::before{background:#5f7d94}
/* Die frische Fassung gewinnt gegen die Wechsel-Farbe: was zu tun ist, schlaegt
   was passiert ist. */
.karte.fraglich::before{background:#c9a227}
.karte .wechsel{
  margin:7px 0 2px;padding:6px 10px;border-radius:8px;
  border-left:2px solid #5f7d94;background:rgba(95,125,148,.07);
}
.karte .we-kopf{font-size:10.5px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:#8fa9bd}
.karte .we-warum{margin-top:4px;font-size:12.5px;color:#8b8078;font-style:italic}
/* Ueberholt: ein volles Urteil ist seither ergangen. Nur noch eine Zeile ohne
   Band und ohne Begruendung - nachvollziehbar bleibt es, laut ist es nicht. */
.karte .wechsel.alt{
  margin:4px 0 0;padding:0;border:0;background:none;
}
.karte .wechsel.alt .we-kopf{color:#5d6a74;font-weight:500;letter-spacing:.03em}

/* Ein Knopf, der auf etwas hinweist, das schieflaeuft. Bernstein wie die
   uebrigen "das wartet auf dich"-Stellen - nicht rot: rot ist im Blatt die
   Gegenseite, und ein roter Knopf hier laese sich als Loeschknopf lesen. */
button.warnknopf{border-color:#6a5418;color:#d9b23a}
button.warnknopf:hover{background:rgba(201,162,39,.14);border-color:#8a6f20;color:#e8cf6a}

/* Kreuz an einer offenen Frage. Sehr leise: es steht neben einer Frage, die man
   meistens beantworten und nicht wegwerfen will. */
.frageblock .fragetext{display:flex;align-items:flex-start;gap:8px}
.frageblock .fragetext .nr{flex:0 0 auto}
.frageblock .frage-weg{
  margin-left:auto;flex:0 0 auto;padding:2px 7px;font-size:11px;line-height:1.2;
  border-color:transparent;background:transparent;color:#6f6058;
}
.frageblock:hover .frage-weg{border-color:var(--kante)}
.frageblock .frage-weg:hover{color:var(--schrift);background:var(--flaeche2)}

/* ---------- Freigabe per Link ---------- */
.fgtitel{font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  color:#8d7d74;margin:18px 0 6px;font-weight:600}
.fgtitel:first-of-type{margin-top:4px}
.linkliste{margin-bottom:4px}
.lkzeile{padding:9px 0;border-bottom:1px solid var(--kante)}
.lkzeile:last-child{border-bottom:0}
.lkkopf{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.lkwas{color:#8d7d74;font-size:12.5px;flex:1;min-width:0}
.lkkopf button{padding:4px 11px;font-size:12px}
.lkzeile .lkweg{border-color:transparent;color:#8d7d74}
.lkzeile .lkweg:hover{border-color:var(--kante-hell);color:var(--schrift)}
.lkadresse{display:flex;align-items:center;gap:8px;margin-top:7px}
.lkadresse code{
  flex:1;min-width:0;overflow-wrap:anywhere;font-size:12px;
  background:var(--flaeche2);border:1px solid var(--kante);border-radius:7px;
  padding:6px 9px;color:#c9bdb2;
}
.lkadresse button{padding:4px 11px;font-size:12px;flex:0 0 auto}

/* In der geteilten Ansicht gibt es kein Konto - der Kopf zeigt sonst eine
   leere Hülle mit Abmelden-Knopf, den niemand druecken kann. */
body.geteilt .kopf .zurueck{display:none}