/* Homöopathie-Apotheke - ruhiges, helles Design (mobile-first) */

:root {
    --sage:        #7c9885;
    --sage-dark:   #5f7a68;
    --sage-light:  #e8efe9;
    --cream:       #faf7f0;
    --cream-deep:  #f1ece0;
    --ink:         #2f3a33;
    --muted:       #6b7670;
    --line:        #e2ddd0;
    --white:       #ffffff;
    --danger:      #b4544a;
    --gold:        #c9a24b;

    --g4: #356d28;  /* stark  (frische, klar gestufte Skala) */
    --g3: #5f9a3c;  /* mittel-stark */
    --g2: #9cc25f;  /* mittel  */
    --g1: #c8dca0;  /* schwach */

    /* Hoehe der Topbar. Alles, was `position: sticky` benutzt, haengt daran, damit
       es nicht hinter der Topbar verschwindet (Etappe 6, Auftrag 4). */
    --topbar-h: 4rem;

    --radius: 14px;
    --shadow: 0 2px 10px rgba(47, 58, 51, 0.06);
    --shadow-lg: 0 6px 24px rgba(47, 58, 51, 0.10);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
/* Das Attribut hidden MUSS jede Layoutregel schlagen. [hidden]{display:none}
   stammt aus dem Browser-Stylesheet, und jede Autoren-Regel mit display
   gewinnt dagegen, unabhaengig von der Spezifitaet. Zwei Stellen waren live
   betroffen: die Begriffswolke in indikationen.php (.refidx-cloud ist
   display:flex und blieb bei jeder Suche stehen) und die ok-Knoepfe in
   sammlungen.php (.btn ist display:inline-flex und verschwand nie).
   !important ist hier richtig, weil das Attribut per Definition staerker
   sein soll als Layout. Befund des Frontend-Gutachters, 19.08.2026. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--sans);
    color: var(--ink);
    background: var(--cream);
    line-height: 1.55;
}

h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.2; color: var(--ink); }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.25rem; }
a { color: var(--sage-dark); }

/* ---------- Topbar ---------- */
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap;
    padding: .75rem 1rem;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    position: sticky; top: 0; z-index: 20;
}
.brand { display: flex; align-items: center; gap: .5rem; text-decoration: none; color: var(--ink); }
.brand-mark { color: var(--sage); font-size: 1.3rem; }
.brand-name { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; }
.nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav a {
    text-decoration: none; color: var(--muted);
    padding: .45rem .7rem; border-radius: 999px; font-size: .95rem;
}
.nav a.is-active { background: var(--sage-light); color: var(--sage-dark); font-weight: 600; }
.nav a:hover { background: var(--cream-deep); }
.nav-logout { color: var(--muted); }
.nav-toggle { display: none; background: var(--white); border: 1px solid var(--line); border-radius: 10px; font-size: 1.4rem; line-height: 1; padding: .35rem .6rem; cursor: pointer; color: var(--ink); }

/* iPhone-Notch / Safe-Areas */
.topbar { padding-left: calc(1rem + env(safe-area-inset-left)); padding-right: calc(1rem + env(safe-area-inset-right)); }
.container { padding-left: calc(1rem + env(safe-area-inset-left)); padding-right: calc(1rem + env(safe-area-inset-right)); }

/* Mobil: Navigation einklappen, Touch-freundlich, kein iOS-Auto-Zoom */
@media (max-width: 720px) {
    .nav-toggle { display: inline-flex; align-items: center; }
    .nav { display: none; width: 100%; flex-direction: column; gap: .15rem; margin-top: .5rem; }
    .nav.open { display: flex; }
    .nav a { padding: .8rem .9rem; border-radius: 10px; font-size: 1.02rem; }
    .nav-logout { border-top: 1px solid var(--line); margin-top: .25rem; border-radius: 0; }
    /* Eingabefelder >= 16px, sonst zoomt iOS Safari beim Fokus hinein */
    input, select, textarea { font-size: 16px; }
    .btn { min-height: 44px; }
    .btn-sm { min-height: 40px; }
    .page-head { gap: .6rem; }
    .page-head .actions { width: 100%; }
}

/* ---------- Layout ---------- */
.container { max-width: 880px; margin: 0 auto; padding: 1.25rem 1rem 3rem; }
.footer { text-align: center; padding: 1.5rem 1rem 2.5rem; }
.disclaimer { color: var(--muted); font-size: .82rem; max-width: 540px; margin: 0 auto; }

.page-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.subtitle { color: var(--muted); margin: 0 0 1.25rem; }

/* ---------- Karten ---------- */
.card {
    background: var(--white); border: 1px solid var(--line);
    border-radius: var(--radius); padding: 1.1rem 1.2rem;
    box-shadow: var(--shadow); margin-bottom: .85rem;
}
.card-link { display: block; text-decoration: none; color: inherit; transition: box-shadow .15s, transform .15s; }
.card-link:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }

.result-head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.result-name { font-family: var(--serif); font-size: 1.2rem; font-weight: 600; }
.potenz { color: var(--sage-dark); font-weight: 600; font-size: .95rem; }
.result-desc { color: var(--muted); margin: .35rem 0 .6rem; font-size: .92rem; }

/* ---------- Badges ---------- */
.badges { display: flex; gap: .4rem; flex-wrap: wrap; }
.badge {
    display: inline-flex; align-items: center; gap: .35rem;
    padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
    background: var(--cream-deep); color: var(--ink);
}
.badge .dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; }
.badge.g3 { background: #e4ede3; color: var(--g3); } .badge.g3 .dot { background: var(--g3); }
.badge.g2 { background: #ecf1e8; color: var(--sage-dark); } .badge.g2 .dot { background: var(--g2); }
.badge.g1 { background: #f0f1ea; color: var(--muted); } .badge.g1 .dot { background: var(--g1); }

.stock { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 999px; font-size: .8rem; font-weight: 600; }
.stock.yes { background: var(--sage-light); color: var(--sage-dark); }
.stock.no  { background: #f6efee; color: var(--danger); }

/* ---------- Suche ---------- */
.search-hero { text-align: center; padding: 1rem 0 1.5rem; }
.search-box { display: flex; gap: .5rem; margin: 1rem auto 0; max-width: 560px; }
.search-box input[type="search"] {
    flex: 1; font-size: 1.1rem; padding: .85rem 1rem;
    border: 1px solid var(--line); border-radius: 999px; background: var(--white);
}
.search-box input[type="search"]:focus { outline: 2px solid var(--sage); border-color: var(--sage); }
.search-options { display: flex; justify-content: center; gap: 1rem; margin-top: .75rem; color: var(--muted); font-size: .9rem; }
.search-meta { color: var(--muted); margin: 1rem 0; font-size: .9rem; }

/* ---------- Forms ---------- */
.field { margin-bottom: 1rem; }
.field label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .92rem; }
.field input[type="text"], .field input[type="password"], .field textarea, .field select {
    width: 100%; padding: .7rem .8rem; font-size: 1rem; font-family: inherit;
    border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink);
}
.field textarea { min-height: 110px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid var(--sage); border-color: var(--sage); }
.hint { color: var(--muted); font-size: .82rem; margin-top: .25rem; }
/* .muted wird in konto.php verwendet und war nie definiert, die Stelle blieb
   dadurch wirkungslos. Gleiche Wirkung wie .hint, damit konto.php unveraendert
   bleiben kann. Neue Vorlagen sollen .hint benutzen. */
.muted { color: var(--muted); font-size: .82rem; margin-top: .25rem; }
.row { display: flex; gap: .75rem; flex-wrap: wrap; }
.row > .field { flex: 1; min-width: 160px; }

.checkbox { display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; }
.checkbox input { width: 1.1rem; height: 1.1rem; accent-color: var(--sage); }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
    padding: .7rem 1.2rem; border-radius: 999px; border: 1px solid transparent;
    font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer;
    text-decoration: none; transition: background .15s, box-shadow .15s;
}
.btn-primary { background: var(--sage); color: var(--white); }
.btn-primary:hover { background: var(--sage-dark); }
.btn-ghost { background: var(--white); color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { background: var(--cream-deep); }
.btn-danger { background: var(--white); color: var(--danger); border-color: #e6cdca; }
.btn-danger:hover { background: #f6efee; }
.btn-sm { padding: .4rem .8rem; font-size: .88rem; }
.btn-block { width: 100%; }
.actions { display: flex; gap: .6rem; flex-wrap: wrap; margin-top: 1.25rem; }

/* ---------- Indikationszeilen im Formular ---------- */
.ind-row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.ind-row input[type="text"] { flex: 1; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; font-size: 1rem; }
.ind-row select { padding: .6rem .5rem; border: 1px solid var(--line); border-radius: 10px; font-size: .95rem; background: var(--white); }
.ind-remove { background: none; border: none; color: var(--danger); font-size: 1.3rem; cursor: pointer; line-height: 1; padding: .2rem .4rem; }

/* ---------- Liste / Tabelle ---------- */
/* Der Filterstreifen laeuft beim Scrollen mit. Er ist das Werkzeug, das
   unabhaengig von der Buchstabenverteilung traegt: eine Liste ueber fuenf
   Bildschirme durchsucht man mit drei getippten Zeichen schneller als mit einem
   Sprungbuchstaben -- und in Heidis Bestand mit 57 A-Namen ist er ohnehin die
   einzige Moeglichkeit. Er haengt an --topbar-h wie die A-Z-Leiste, sonst kleben
   beide uebereinander. */
.list-controls { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1rem;
  position: sticky; top: var(--topbar-h); z-index: 5;
  background: var(--cream); padding: .5rem 0; }
/* Die Buchstabenleiste rutscht darunter. Zusammen sind das auf 375px rund 90px,
   also 13 Prozent des Bildschirms -- vertretbar, weil beide Reihen Werkzeuge
   sind, mit denen man in einer 3800px langen Liste arbeitet. */
.az-bar { top: calc(var(--topbar-h) + 3.4rem); }
.list-controls input[type="search"] { flex: 1; min-width: 180px; padding: .65rem .9rem; border: 1px solid var(--line); border-radius: 999px; font-size: 1rem; }

.mittel-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.mittel-row .meta { display: flex; flex-direction: column; gap: .2rem; }
.mittel-row .name { font-family: var(--serif); font-size: 1.1rem; font-weight: 600; }
.mittel-row .sub { color: var(--muted); font-size: .85rem; }

/* Kompakte Mittel-Liste (skaliert auf hunderte Einträge) */
.list-toolbar { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 1rem; }
.list-count { margin-left: auto; color: var(--muted); font-size: .85rem; }
.mittel-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--white); box-shadow: var(--shadow); }
.m-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-bottom: 1px solid var(--line); }
.m-row:last-child { border-bottom: none; }
.m-row:hover { background: var(--cream); }
.m-row .sel { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--sage); }
.m-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; text-decoration: none; color: inherit; }
.m-name { font-family: var(--serif); font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row .m-sub { color: var(--muted); font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-row .toggle .track { flex: none; }

/* A-Z-Sprungleiste */
.az-bar { display: flex; flex-wrap: wrap; gap: .25rem; margin-bottom: .6rem; }
.az-letter { border: 1px solid var(--line); background: var(--white); color: var(--sage-dark); border-radius: 8px; min-width: 1.9rem; padding: .25rem 0; font-size: .85rem; font-weight: 600; cursor: pointer; }
.az-letter:hover { background: var(--sage-light); }

/* Lager-Label nur in der grossen Ansicht zeigen */
.m-row .toggle .lbl { display: none; }
.mittel-list.comfortable .m-row { padding: .95rem 1rem; gap: .8rem; }
.mittel-list.comfortable .m-name { font-size: 1.15rem; }
.mittel-list.comfortable .m-row .m-sub { font-size: .9rem; white-space: normal; }
.mittel-list.comfortable .toggle .lbl { display: inline; font-size: .8rem; color: var(--muted); min-width: 84px; }

/* Einklappbare Kurzhilfe */
.hint-box { background: var(--sage-light); border: 1px solid var(--sage); border-radius: 12px; padding: .7rem 1rem; margin-bottom: 1rem; }
.hint-box > summary { cursor: pointer; font-weight: 600; color: var(--sage-dark); list-style-position: inside; }
.hint-box[open] > summary { margin-bottom: .3rem; }

/* Overflow-Härtung (kein horizontales Überlaufen) */
.card, .container p, .ind-list li, .result-desc, .m-sub, .tl-notiz, .disclaimer, td { overflow-wrap: anywhere; }
.brand { min-width: 0; }
.brand-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Lager-Umschalter */
.toggle { position: relative; display: inline-flex; align-items: center; cursor: pointer; gap: .5rem; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track { width: 46px; height: 26px; background: #d8d2c4; border-radius: 999px; transition: background .2s; position: relative; flex: none; }
.toggle .track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.toggle input:checked + .track { background: var(--sage); }
.toggle input:checked + .track::after { transform: translateX(20px); }
.toggle .lbl { font-size: .85rem; color: var(--muted); min-width: 84px; }

/* ---------- Detail ---------- */
/* ---- Etappe 6, Auftrag 6: Sektionsgrenzen sichtbar machen ----
   Der Auftraggeber vermisste die Trennung zwischen "Kommentar hinzufügen" und
   "Für Fortgeschrittene". Gemessen sind dort 22,4px Abstand gegen 24px an jeder
   anderen Sektionsgrenze, der Unterschied ist also 1,6px. Die Stelle ist kein
   Sonderfall: es fehlt an ALLEN Grenzen eine sichtbare Linie. .detail-section war
   bisher ein Aussenabstand und sonst nichts (eine einzige Regel in dieser Datei),
   waehrend .pt-acc Rahmen, Radius und weissen Grund hat. Der Aufklapper sah also
   wie eine Karte aus, die Sektion nicht. */
.detail-section, .sec-acc { margin-top: 1.8rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line); }
.detail-section > h2, .sec-acc > summary { margin-top: 0; }
/* Die erste Sektion braucht keine Linie: darueber trennt schon der Kopfbereich. */
.ref-actions + .detail-section, .ref-actions + .sec-acc,
.page-head + .detail-section, .page-head + .sec-acc { border-top: none; padding-top: 0; }
/* Ein Aufklapper auf oberster Ebene liest sich sonst als Teil der vorigen Sektion.
   .sec-acc traegt die Sektionsgrenze, .pt-acc bleibt der Kasten fuer alles, was
   INNERHALB einer Sektion klappt. */
.sec-acc > summary { font-size: 1.25rem; }
.sec-acc { border-radius: 0; background: transparent; border-left: none;
  border-right: none; border-bottom: none; }
.sec-acc[open] > summary { border-bottom: none; margin-bottom: .4rem; }
.ind-list { list-style: none; padding: 0; margin: .5rem 0 0; }
.ind-list li { display: flex; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.ind-list li:last-child { border-bottom: none; }
.ind-list .ind-name { font-weight: 500; }

/* ---------- Meldungen ---------- */
.flash { padding: .8rem 1rem; border-radius: 10px; margin-bottom: 1rem; font-size: .95rem; }
.flash.ok    { background: var(--sage-light); color: var(--sage-dark); }
.flash.error { background: #f6efee; color: var(--danger); }
.empty { text-align: center; color: var(--muted); padding: 2.5rem 1rem; }

/* ---------- Login ---------- */
.auth-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.auth-card { width: 100%; max-width: 360px; text-align: center; }
.auth-card .brand-mark { font-size: 2.2rem; color: var(--sage); display: block; margin-bottom: .25rem; }

/* Synonyme */
.syn-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }
.syn-tag { display: inline-flex; align-items: center; gap: .3rem; background: var(--cream-deep); padding: .15rem .55rem; border-radius: 999px; font-size: .8rem; }
.syn-tag a { color: var(--muted); text-decoration: none; }

/* ---------- Mittel-Porträt: "Wo es wirkt" + verlinkte Beziehungen ---------- */
.pt-where { margin: 1.3rem 0; }
.pt-where-h { font-size: 1.15rem; margin: 0 0 .2rem; }
.pt-bars { display: flex; flex-direction: column; gap: .35rem; margin-top: .5rem; }
.pt-bar { display: grid; grid-template-columns: 140px 1fr 30px; align-items: center; gap: .6rem;
  padding: .22rem .4rem; margin: 0 -.4rem; border-radius: 8px; text-decoration: none; color: inherit;
  transition: background .15s; }
.pt-bar:hover { background: var(--cream-deep); }
.pt-bar-lbl { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pt-bar-track { height: 12px; background: var(--cream-deep); border-radius: 999px; overflow: hidden; }
.pt-bar:hover .pt-bar-track { background: #e7dfcd; }
.pt-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--g3); transition: filter .15s; }
.pt-bar-fill.g4 { background: var(--g4); } .pt-bar-fill.g3 { background: var(--g3); }
.pt-bar-fill.g2 { background: var(--g2); } .pt-bar-fill.g1 { background: var(--g1); }
.pt-bar:hover .pt-bar-fill { filter: brightness(.92); }
.pt-bar-val { font-size: .8rem; color: var(--muted); text-align: right; }
@media (max-width: 560px) { .pt-bar { grid-template-columns: 108px 1fr 26px; } .pt-bar-lbl { font-size: .85rem; } }
.ref-rel a { color: var(--sage-dark); text-decoration: none; border-bottom: 1px dotted var(--sage); }
.ref-rel a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.ref-essence { font-family: var(--serif); font-size: 1.08rem; line-height: 1.5; color: var(--ink); margin: .2rem 0 .6rem; }
.pt-ins-row { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 1.1rem; }
.pt-ins-card { background: var(--sage-light); color: var(--ink); border-radius: 10px; padding: .45rem .7rem; font-size: .88rem; }
.pt-ins-card b { color: var(--sage-dark); }
.pt-keys { list-style: none; padding: 0; margin: .4rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .25rem .9rem; }
.pt-keys li { position: relative; padding: .15rem .5rem .15rem 1.4rem; border-radius: 7px; line-height: 1.45; transition: background .15s; }
.pt-keys li::before { content: "\2740"; position: absolute; left: .4rem; top: .15rem; color: var(--sage); font-size: .82rem; }
.pt-keys li:hover { background: var(--sage-light); }
.ref-vt-acc { margin: .4rem 0; }
.ref-vt-h { margin: 0 0 .4rem; }
.ref-vt-intro { line-height: 1.6; margin: .2rem 0 .5rem; }
.pt-acc { border: 1px solid var(--line); border-radius: 10px; margin-bottom: .4rem; background: var(--white); overflow: hidden; }
.pt-acc > summary { cursor: pointer; padding: .55rem .8rem; font-family: var(--serif); font-weight: 600; color: var(--ink); list-style-position: inside; transition: background .12s, color .12s; }
.pt-acc > summary:hover { background: var(--cream); color: var(--sage-dark); }
.pt-acc[open] > summary { border-bottom: 1px solid var(--line); }
.pt-acc .pt-acc-body { padding: .55rem .9rem .8rem; line-height: 1.6; }

/* Zugriffs-Stufen: Vorschau-Hinweis + Modus-Auswahl */
.stufe-preview-bar { margin: 0 0 1rem; padding: .5rem .85rem; background: var(--cream-deep); border: 1px solid var(--gold); border-radius: 10px; font-size: .9rem; color: var(--ink); }
.stufe-preview-bar a { color: var(--sage-dark); font-weight: 600; margin-left: .3rem; }
.modus-opt { display: inline-flex; align-items: center; gap: .35rem; margin: 0 1.1rem .4rem 0; }

/* Stufen-Umschalter in der Kopfzeile (immer sichtbar fuer angemeldete Nutzer) */
.topbar-left { display: flex; align-items: center; gap: .6rem; min-width: 0; }
.stufe-switch { display: inline-flex; align-items: center; gap: .35rem; margin: 0; flex: 0 0 auto; }
.stufe-switch-lbl { font-size: .8rem; color: var(--muted); }
.stufe-switch select { font-family: inherit; font-size: .85rem; padding: .28rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--cream); color: var(--ink); cursor: pointer; }
.stufe-switch select:hover { border-color: var(--sage); }
@media (max-width: 720px) { .stufe-switch-lbl { display: none; } }

/* Laien-Startseite: gefuehrter Einstieg + Sicherheitshinweise */
.complaint-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.complaint-chips .chip { text-decoration: none; font-size: .9rem; padding: .35rem .8rem; border-radius: 999px; background: var(--sage-light); color: var(--sage-dark); border: 1px solid transparent; transition: background .12s, border-color .12s; }
.complaint-chips .chip:hover { background: var(--cream-deep); border-color: var(--sage); }
.laie-note { margin-top: .8rem; font-size: .82rem; color: var(--muted); }
.safety-card { margin: 0 0 1.3rem; border: 1px solid var(--line); border-left: 4px solid var(--danger); border-radius: 12px; background: var(--white); overflow: hidden; }
.safety-card > summary { cursor: pointer; padding: .7rem .9rem; font-family: var(--serif); font-weight: 600; color: var(--ink); list-style-position: inside; }
.safety-card > summary::marker { color: var(--danger); }
.safety-card[open] > summary { border-bottom: 1px solid var(--line); }
.safety-card .safety-body { padding: .6rem .9rem .85rem; line-height: 1.55; }
.safety-card .safety-body ul { margin: .4rem 0 .6rem 1.1rem; }
.safety-card .safety-body li { margin: .25rem 0; }
.safety-foot { font-size: .85rem; color: var(--muted); }
.laie-recs { margin: 0 0 1.4rem; }
.laie-recs > h2 { margin-bottom: .15rem; }
.laie-own-head { margin: 1.3rem 0 .2rem; }
.rec-essence { margin: .15rem 0 0; font-size: .85rem; color: var(--muted); font-style: italic; }
.rec-mod { margin: .25rem 0 0; font-size: .84rem; color: var(--muted); }
.rec-mod .rec-mod-k { font-weight: 600; color: var(--ink); }
.mod-laie .lm-line { margin: .25rem 0; font-size: .95rem; }
.mod-laie .lm-k { font-weight: 600; }
.mod-laie .lm-w { color: var(--danger); }
.mod-laie .lm-b { color: var(--sage-dark); }
.mod-konsistenz { background: var(--cream-deep); border-radius: 8px; padding: .35rem .6rem; margin: .3rem 0 0; }

/* Lernbereich */
.lern-grid { display: grid; gap: .7rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .lern-grid { grid-template-columns: 1fr 1fr; } }
.lern-card { display: flex; align-items: flex-start; gap: .7rem; }
.lern-num { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 999px; background: var(--sage-light); color: var(--sage-dark); font-weight: 700; display: flex; align-items: center; justify-content: center; }
.lern-card-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.lern-card-title { font-weight: 600; color: var(--ink); }
.lern-card-teaser { font-size: .88rem; color: var(--muted); }
.lern-body { line-height: 1.65; }
.lern-body p { margin: .5rem 0; }
.lern-try { margin: .85rem 0; }
.lern-nav { display: flex; justify-content: space-between; gap: .6rem; margin-top: 1.2rem; flex-wrap: wrap; }
.lern-progress { color: var(--sage-dark); font-weight: 600; margin: .2rem 0 .8rem; }
.lern-card.is-done .lern-num { background: var(--sage-dark); color: #fff; }
.lern-quiz { margin-top: 1rem; }
.lern-q { font-weight: 600; margin: .2rem 0 .6rem; }
.lern-opts { display: flex; flex-direction: column; gap: .4rem; margin: .4rem 0 .6rem; }
.lern-opt { display: flex; gap: .5rem; align-items: flex-start; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.lern-opt:hover { background: var(--cream); }
.lern-ok { color: var(--sage-dark); font-weight: 600; }
.lern-wrong { color: var(--danger); }
.lern-profi { margin-top: 1.4rem; border: 1px solid var(--sage); background: var(--sage-light); }
.lern-lvl { margin: 1.3rem 0 .3rem; }
.lern-admin { margin-top: .6rem; }
.lern-admin > summary { cursor: pointer; font-size: .9rem; color: var(--sage-dark); }
.lern-admin-body { margin-top: .4rem; }
.lern-admin-row { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .25rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }

/* Mittelvergleich (Differential) */
.cmp-form { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.1rem; }
.cmp-form input[type=text] { flex: 1 1 160px; min-width: 0; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; }
.cmp-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: .92rem; }
.cmp-table th, .cmp-table td { border: 1px solid var(--line); padding: .5rem .6rem; text-align: left; vertical-align: top; }
.cmp-table thead th { background: var(--cream-deep); font-family: var(--serif); }
.cmp-table thead th a { color: var(--ink); text-decoration: none; }
.cmp-table tbody th { background: var(--cream); white-space: nowrap; width: 1%; font-size: .82rem; color: var(--muted); font-weight: 600; }
.cmp-chip { display: inline-block; background: var(--sage-light); color: var(--sage-dark); border-radius: 999px; padding: .12rem .5rem; margin: .1rem .2rem .1rem 0; font-size: .82rem; }
.cmp-inv { margin: .1rem 0 1.1rem; display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; font-size: .9rem; }
.cmp-inv select { padding: .4rem .6rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }

/* Austausch: Kommentare zu einem Mittel */
.komm-section { margin-top: 1.4rem; }
.komm-list { display: flex; flex-direction: column; gap: .7rem; margin: .5rem 0 1rem; }
.komm { border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; background: var(--white); }
.komm-meta { font-size: .82rem; color: var(--muted); }
.komm-text { margin-top: .25rem; line-height: 1.55; white-space: pre-line; }
.komm-form textarea { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; font: inherit; box-sizing: border-box; }

/* Mehrbenutzer-Inventar */
.holders-line { color: var(--sage-dark); font-size: .85rem; margin: .4rem 0 0; }
/* .holders wurde nur von mittel.php benutzt und ist mit der Ergebniszeile .res
   entfallen. Das !important hatte jede Grau-Regel ueberstimmt, auch dort, wo
   niemand das Mittel an Lager hat, und damit Gruen ohne Bestand gezeigt. */
.syn-label { font-size: .8rem; color: var(--muted); margin-top: .7rem; font-weight: 600; }

/* Tagebuch-Zeitstrahl */
.timeline { margin-top: .5rem; }
.tl-item { position: relative; margin-left: .3rem; padding: 0 0 1rem 1.1rem; border-left: 2px solid var(--sage-light); }
.tl-item:last-child { border-left-color: transparent; }
.tl-item::before { content: ''; position: absolute; left: -7px; top: .25rem; width: 12px; height: 12px; border-radius: 50%; background: var(--sage); border: 2px solid var(--white); }
.tl-meta { color: var(--muted); font-size: .8rem; }
.tl-gabe { margin: .2rem 0; }
.tl-notiz { font-size: .92rem; white-space: pre-line; }
.tl-del { background: none; border: none; color: var(--muted); font-size: .78rem; cursor: pointer; text-decoration: underline; padding: 0; }

/* Kombi-Suche / Repertorisierung */
.rep-scroll { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.rep-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--white); }
.rep-table th, .rep-table td { padding: .5rem .55rem; border-bottom: 1px solid var(--line); text-align: left; white-space: nowrap; }
.rep-table thead th { background: var(--cream); position: sticky; top: 0; }
.rep-sym { font-weight: 600; color: var(--muted); }
.rep-cell { text-align: center; }
.rep-empty { color: #cfcabb; }

/* Etikett-Scan (OCR) */
.scan-img { max-width: 100%; max-height: 260px; border-radius: 12px; margin-top: .8rem; border: 1px solid var(--line); display: block; }
.scan-canvas { max-width: 100%; border: 1px solid var(--line); border-radius: 12px; margin-top: .8rem; display: block; touch-action: none; cursor: crosshair; }
.scan-status { margin-top: .8rem; color: var(--muted); font-size: .9rem; }
.scan-progress { margin-top: .6rem; height: 8px; background: var(--cream-deep); border-radius: 999px; overflow: hidden; }
.scan-progress .bar { height: 100%; width: 0; background: var(--sage); transition: width .2s; }
.scan-raw { margin-top: .8rem; padding: .7rem .9rem; background: var(--cream-deep); border-radius: 10px; font-size: .82rem; white-space: pre-wrap; max-height: 180px; overflow: auto; }
.scan-actions { display: flex; gap: .4rem; align-items: center; flex-wrap: wrap; }

/* Wikipedia-Vorschlag */
.wiki-tools { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; margin-top: .5rem; }
.wiki-box { margin-top: .7rem; padding: .9rem 1rem; background: var(--cream); border: 1px solid var(--line); border-radius: 12px; }
.wiki-extract { white-space: pre-line; margin: .4rem 0 .6rem; font-size: .92rem; max-height: 220px; overflow: auto; }
.wiki-actions { display: flex; gap: .5rem; flex-wrap: wrap; }
.wiki-alts { margin-top: .6rem; display: flex; gap: .35rem; flex-wrap: wrap; align-items: center; }
.wiki-alt { cursor: pointer; border: 1px solid var(--line); }
.wiki-alt:hover { background: var(--sage-light); }

/* Abgesetzter Referenz-Abschnitt in Suche/Kombi-Suche */
.ref-section { margin-top: 1.6rem; padding-top: 1rem; border-top: 2px solid var(--sage-light); }
.ref-section > h2 { color: var(--sage-dark); margin-bottom: .2rem; }

/* Referenz-Volltext */
.ref-volltext { white-space: pre-line; font-size: .92rem; line-height: 1.5; max-height: 480px; overflow: auto; background: var(--cream); border: 1px solid var(--line); border-radius: 10px; padding: .8rem 1rem; margin-top: .4rem; }
.src-tag { display: inline-block; min-width: 1.1rem; text-align: center; font-size: .62rem; font-weight: 700; color: var(--sage-dark); background: var(--sage-light); border-radius: 4px; padding: 0 .25rem; margin-left: .15rem; vertical-align: middle; }

/* Bild der Grundessenz (klein, rund, einheitlich getönt) */
.mittel-bild { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--sage-light); box-shadow: var(--shadow); filter: saturate(.9) sepia(.12); flex: none; }
.bild-candidates { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.bild-cand { width: 84px; height: 84px; border-radius: 10px; object-fit: cover; border: 2px solid var(--line); cursor: pointer; }
.bild-cand:hover { border-color: var(--sage); }
.bild-cand.sel { border-color: var(--sage); box-shadow: 0 0 0 2px var(--sage-light); }
#bild-preview-wrap { margin-top: .4rem; }

/* Kopier-Zeile für Teilen-Links */
.copy-row { display: flex; gap: .5rem; margin-top: .6rem; flex-wrap: wrap; }
.copy-input { flex: 1; min-width: 200px; padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; font-size: .9rem; background: var(--cream); color: var(--ink); }

@media (min-width: 640px) {
    h1 { font-size: 1.9rem; }
}

/* Druckansicht */
@media print {
    .topbar, .footer, .no-print, form, .search-box, .search-options,
    .list-controls, .ind-remove, .btn { display: none !important; }
    .toggle input, .toggle .track { display: none !important; }   /* Schalter weg, Text bleibt */
    .toggle .lbl { color: #000; min-width: 0; }
    body { background: #fff; color: #000; }
    .container { max-width: none; padding: 0; }
    .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
    a { color: #000; text-decoration: none; }
}

/* Referenz: schlanke A-Z-Liste + serverseitige Echtzeitsuche */
#ref-search { width: 100%; }
/* Etappe 6, Auftrag 4: die Leiste war schon `sticky`, klebte aber HINTER der
   Topbar. Beide wollten an `top: 0`, und die Topbar liegt mit z-index 20 ueber
   z-index 4. --topbar-h ist gemessen, nicht geschaetzt: Desktop .75rem*2
   Innenabstand + 38px Navigationszeile = 62px, mobil .75rem*2 + 36px
   Hamburger-Zeile = 60px. 4rem deckt beides mit Luft.
   Bekannte Einschraenkung: bei offenem Hamburger-Menue waechst die Topbar und die
   Leiste sitzt zu hoch. Hinnehmbar, weil man mit offenem Menue nicht scrollt. */
.az-bar { position: sticky; top: var(--topbar-h); z-index: 4; background: var(--cream); padding: .35rem 0; border-bottom: 1px solid var(--line); }
/* Ohne das verschwindet die angesprungene Zeile unter der geklebten Leiste. */
.res[data-initial] { scroll-margin-top: calc(var(--topbar-h) + 3rem); }
.az-letter.is-empty, .az-letter:disabled { opacity: .32; cursor: default; }
.az-letter.is-active { background: var(--sage); color: var(--white); border-color: var(--sage); }
/* Die frueheren Zeilenklassen .ref-lean/.rl/.rl-n/.rl-s/.rl-sub/.rl-snip sind
   entfallen: alle Mitteltreffer laufen jetzt ueber .res (Designspec 7.2).
   Das mehrspaltige A-Z-Stoebern steckt in .res-list.res-cols. */

/* Quellen-Mehrfachfilter (Checkboxen) + Suchbereich-Umschalter */
.src-filter { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .7rem; }
.src-filter-lbl { font-weight: 600; color: var(--muted); font-size: .9rem; }
.src-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border: 1px solid var(--line);
  border-radius: 999px; font-size: .88rem; cursor: pointer; background: var(--white); color: var(--muted); user-select: none; }
.src-chip input { margin: 0; accent-color: var(--sage-dark); }
.src-chip.on { background: var(--sage-light); border-color: var(--sage); color: var(--ink); font-weight: 600; }
.src-chip .n { color: var(--muted); font-weight: 400; font-size: .78rem; }
.src-chip.on .n { color: var(--sage-dark); }
.src-all { margin-left: .2rem; }

.ref-scope { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; margin: 0 0 .5rem; }
.ref-scope-lbl { font-weight: 600; color: var(--muted); font-size: .9rem; margin-right: .15rem; }
.ref-scope-btn { padding: .3rem .8rem; border: 1px solid var(--line); background: var(--white); color: var(--muted);
  border-radius: 999px; font-size: .88rem; font-family: var(--sans); cursor: pointer; }
.ref-scope-btn:hover { background: var(--cream-deep); }
.ref-scope-btn.is-active { background: var(--sage); border-color: var(--sage); color: var(--white); font-weight: 600; }

/* ---- Repertorium (gewichtete Repertorisation) ---- */
.rep-searchbox { position: relative; margin: 0 0 1rem; }
#rep-search { width: 100%; padding: .7rem 1rem; border: 1px solid var(--line); border-radius: 999px; font-size: 1rem; }
.rep-results { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + .3rem); background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); max-height: 60vh; overflow: auto; }
.rep-hit { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; padding: .55rem .8rem;
  border-bottom: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.rep-hit:last-child { border-bottom: none; }
.rep-hit:hover { background: var(--sage-light); }
.rep-hit-pfad { min-width: 0; }
.rep-hit-n { flex: none; font-size: .75rem; color: var(--muted); font-weight: 600; white-space: nowrap; }
.rep-hit-n::after { content: " M"; }
.rep-hit-empty { display: block; padding: .6rem .8rem; color: var(--muted); }
/* Offenlegung der Sprachluecke: warum bei "muskelkater" Rubriken ueber
   "wie zerschlagen" erscheinen (rep_rubrik_search_laie()). Klebt oben, damit
   der Grund beim Scrollen durch bis zu 40 Treffer sichtbar bleibt. Sage statt
   Rot/Gruen: das ist eine Erklaerung, keine Warnung und kein Besitz. */
.rep-hit-hint { position: sticky; top: 0; z-index: 1; padding: .55rem .8rem;
  background: var(--sage-light); border-bottom: 1px solid var(--line);
  font-size: .82rem; line-height: 1.4; color: var(--ink); }

.rep-basket { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: .6rem .8rem; margin-bottom: 1rem; box-shadow: var(--shadow); }
.rep-basket-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.rep-rub-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .3rem; }
.rep-rub { display: flex; align-items: center; gap: .5rem; }
.rep-rub-no { flex: none; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--sage); color: #fff;
  font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.rep-rub-pfad { min-width: 0; flex: 1; }
.rep-rub-n { color: var(--muted); font-size: .75rem; margin-left: .3rem; white-space: nowrap; }
.rep-rub-x { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--cream-deep); color: var(--muted);
  text-decoration: none; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; line-height: 1; }
.rep-rub-x:hover { background: #ecd9d6; color: var(--danger); }

.rep-result-head { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin: .2rem 0 .5rem; flex-wrap: wrap; }
.rep-meta { font-weight: 600; color: var(--muted); }
.rep-legend { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: var(--muted); }
.rep-dot { display: inline-block; width: .8rem; height: .8rem; border-radius: 50%; vertical-align: middle; }
.rep-dot.g0 { background: transparent; border: 1px solid var(--line); }
.rep-dot.g1 { background: var(--g1); }
.rep-dot.g2 { background: var(--g2); }
.rep-dot.g3 { background: var(--g3); }
.rep-dot.g4 { background: var(--g4); }

.rep-grid { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--white); }
.rep-rrow { display: flex; align-items: center; gap: .5rem; padding: .5rem .7rem; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.rep-rrow:last-child { border-bottom: none; }
.rep-rrow:nth-child(odd) { background: #fbfcfb; }
.rep-rank { flex: none; width: 1.7rem; color: var(--muted); font-size: .8rem; font-weight: 600; text-align: right; }
.rep-rname { flex: 1 1 9rem; min-width: 7rem; font-weight: 600; color: var(--sage-dark); text-decoration: none; }
.rep-rname:hover { text-decoration: underline; }
.rep-rname-plain { color: var(--ink); font-weight: 500; }
.rep-dots { display: inline-flex; flex-wrap: wrap; gap: .22rem; flex: 2 1 auto; }
.rep-score { flex: none; font-variant-numeric: tabular-nums; color: var(--ink); font-size: .85rem; white-space: nowrap; }
.rep-cov { flex: none; }

/* ---- Modalitäten ---- */
.mod-remedy { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); padding: .7rem .85rem; margin: .6rem 0 1rem; box-shadow: var(--shadow); }
.mod-remedy-h { font-size: 1.05rem; margin: 0 0 .5rem; }
.mod-line { display: flex; gap: .45rem; align-items: baseline; margin: .4rem 0; flex-wrap: wrap; }
.mod-line-lbl { flex: none; font-weight: 600; }
.mod-line-lbl.mod-schlechter { color: var(--danger); }
.mod-line-lbl.mod-besser { color: var(--sage-dark); }
.mod-chips { display: inline-flex; flex-wrap: wrap; gap: .3rem; }
.mod-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .55rem; border: 1px solid var(--line);
  border-radius: 999px; font-size: .82rem; text-decoration: none; color: var(--ink); background: var(--cream); }
.mod-chip:hover { background: var(--sage-light); border-color: var(--sage); }

.mod-cols { display: grid; grid-template-columns: 1fr; gap: 1.2rem; }
@media (min-width: 720px) { .mod-cols { grid-template-columns: 1fr 1fr; } }
.mod-col-h { font-size: 1.05rem; margin: 0 0 .6rem; padding-bottom: .3rem; border-bottom: 2px solid var(--line); }
.mod-col-h.mod-schlechter { color: var(--danger); border-color: #e7c4be; }
.mod-col-h.mod-besser { color: var(--sage-dark); border-color: #cfe0cf; }
.mod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.mod-card { display: flex; flex-direction: column; gap: .1rem; padding: .55rem .7rem; border: 1px solid var(--line);
  border-radius: 12px; background: var(--white); text-decoration: none; color: var(--ink); box-shadow: var(--shadow); }
.mod-card:hover { border-color: var(--sage); background: var(--sage-light); }
.mod-card.mod-schlechter { border-left: 3px solid var(--danger); }
.mod-card.mod-besser { border-left: 3px solid var(--sage); }
.mod-card-lbl { font-weight: 600; }
.mod-card-kat { font-size: .75rem; color: var(--muted); }

.mod-detail-title { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.mod-dir { font-size: .8rem; font-weight: 700; padding: .15rem .5rem; border-radius: 999px; }
.mod-dir.mod-schlechter { background: #f6e2dd; color: var(--danger); }
.mod-dir.mod-besser { background: var(--sage-light); color: var(--sage-dark); }
.mod-rubs { margin: .4rem 0 0; padding-left: 1.2rem; }
.mod-rubs li { margin: .15rem 0; font-size: .9rem; }

/* ---- Unter-Reiter (Sub-Navigation) ---- */
.subnav { display: flex; flex-wrap: wrap; gap: .2rem; margin: 0 0 1.1rem; border-bottom: 1px solid var(--line); }
.subnav-item { padding: .5rem .9rem; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .92rem;
  border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.subnav-item:hover { color: var(--ink); background: var(--cream-deep); }
.subnav-item.is-active { color: var(--sage-dark); border-bottom-color: var(--sage); }

.hero-handoff { margin: .7rem 0 0; font-size: .92rem; color: var(--muted); }

.rep-q-tag { display: inline-block; font-size: .68rem; font-weight: 700; color: var(--gold, #c9a24b);
  border: 1px solid #e7d6b0; background: #fbf3e6; border-radius: 4px; padding: 0 .3rem; vertical-align: middle; }

/* ======================================================================
   Etappe 2: Steckbrief (referenz_view.php) und einheitliche Ergebniszeile
   ----------------------------------------------------------------------
   FARBREGEL, drei getrennte Zeichensysteme:
   1. Gruen (--sage*) codiert als BEDEUTUNG ausschliesslich Besitz und
      Bestand: .res.is-mine, .res-hold, .stock.yes, .own-* im Steckbrief.
      Die alte gruene Wertigkeitsskala --g1..--g4 wird im Steckbrief nicht
      mehr verwendet.
   2. Wertigkeit und Grad nutzen die einfarbige Ordinalrampe --w1..--w4
      (Tinten-/Braunton) und immer ein Textlabel; als Form ein QUADRAT,
      damit es formal von den Besitz-Punkten unterscheidbar bleibt.
   3. Abdeckungszahlen sind Text, nie Farbe.
   Rot (--danger) bleibt dem Sicherheitsband vorbehalten.
   ====================================================================== */
:root {
    --w4: #4a4038;  /* stark    (Ordinalrampe, bewusst KEIN Gruenton) */
    --w3: #6e6055;  /* mittel */
    --w2: #9a8b7c;  /* schwach */
    --w1: #c8bcab;  /* erwaehnt */
}
.wgrad { display: inline-block; width: .62rem; height: .62rem; border-radius: 2px;
  background: var(--w1); vertical-align: middle; flex: none; }
.wgrad.w1 { background: var(--w1); } .wgrad.w2 { background: var(--w2); }
.wgrad.w3 { background: var(--w3); } .wgrad.w4 { background: var(--w4); }
/* Ordinalrampe als Satz von Quadraten: n von max gefuellt, dazu IMMER ein
   Textlabel. Die leeren Quadrate stehen nach den gefuellten, damit die Stufe
   auch ohne Farbunterscheidung ablesbar bleibt. */
.wset { display: inline-flex; align-items: center; gap: .12rem; vertical-align: middle; }
.wgrad.is-off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.wlabel { font-size: .78rem; color: var(--muted); margin-left: .3rem; white-space: nowrap; }

/* ---- Kopfbereich ---- */
.abk-tag { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em;
  color: var(--muted); background: var(--cream-deep); border: 1px solid var(--line);
  border-radius: 5px; padding: .05rem .35rem; }

/* ---- Etappe 6, Auftrag 5: Kopf als Karte ----
   Der Auftraggeber wollte den Kopf "hinterlegt, wie eine Art CV oder Steckbrief".
   Die Karte nimmt die Breite der Inhaltsspalte ein, und die ist mit
   `.container { max-width: 880px; margin: 0 auto }` zentriert; "vollbreit" heisst
   also die Spalte und nicht das Fenster.
   KEIN Schatten: --shadow bleibt .card und .card-link vorbehalten, die Kopfkarte
   soll ein Blatt Papier sein und kein schwebendes Element.
   Nicht uebernommen von Wikipedias Taxobox: das rechts angedockte Kaestchen (ihr
   CSS setzt float:right ohne Breitenangabe, und mobil schaltet Wikipedia selbst
   auf die vollbreite Form um) und das gruene Kopfband -- Gruen bedeutet hier
   Besitz und wuerde als Bestandsanzeige gelesen. */
.crumb { font-size: .82rem; color: var(--muted); margin: 0 0 .5rem; }
.crumb a { color: var(--muted); }
.crumb a:hover { color: var(--sage-dark); }
.crumb span { margin: 0 .3rem; }
.crumb .crumb-here { margin: 0; }

.ref-card { background: var(--cream-deep); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1rem; }
.ref-card-top { display: flex; align-items: baseline; justify-content: space-between;
  gap: .6rem .9rem; flex-wrap: wrap; }
.ref-card-top h1 { margin: 0; min-width: 0; overflow-wrap: break-word; }
.ref-namen { margin: .3rem 0 0; font-family: var(--serif); font-size: 1.02rem;
  font-weight: 600; line-height: 1.45; }
.ref-namen .abk-tag { margin-left: .35rem; vertical-align: .1em; }
.ref-kopf-leer { margin: .5rem 0 0; font-family: var(--sans); font-size: .92rem; color: var(--muted); }

/* Datenblatt: das Grid sitzt auf der ZEILE, nicht auf der <dl>. Sobald an einer
   <dl> irgendein display-Wert steht, verliert sie in Safari und VoiceOver ihre
   Listensemantik. minmax(0, 12rem) statt 12rem, weil eine nackte Spaltenbreite von
   langem, umbruchresistentem Inhalt aufgeblasen werden kann. */
.ref-sheet { margin: .8rem 0 0; font-family: var(--sans); font-size: .92rem; }
.ref-sheet dd { margin: 0; overflow-wrap: break-word; }
.ref-sheet dt { color: var(--muted); }
.ref-row { padding: .3rem 0; border-top: 1px solid var(--line); }
.ref-row:first-child { border-top: none; padding-top: 0; }
@media (min-width: 40em) {
  .ref-row { display: grid; grid-template-columns: minmax(0, 12rem) 1fr;
    gap: 0 .9rem; align-items: start; }
}
@media (max-width: 40em) {
  .ref-sheet dt { font-size: .8rem; margin-bottom: .1rem; }
}
.ref-card-tools { margin: .9rem 0 0; padding-top: .7rem;
  border-top: 1px solid var(--line); font-size: .84rem; }
.ref-card-tools a { margin-right: .9rem; }
/* Mittelseite: Bild und Titel als eine Einheit links, Bestandsschalter rechts.
   Der Schalter statt einer Textangabe, weil Bestand hier bedienbar ist. */
.mv-titel { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.mv-titel h1 { margin: 0; min-width: 0; overflow-wrap: break-word; }
.ref-card .toggle { flex: none; }
/* Bestandszustand als Chip. .stock.no ist ROT und bleibt dem Sicherheitsband
   vorbehalten; der neutrale Zustand braucht eine eigene Klasse. Die Kante ist
   noetig, weil der Chip auf --cream-deep sitzt und sonst in der Flaeche
   verschwindet; der gruene Chip hebt sich mit --sage-light selbst ab. */
.stock.none { background: var(--cream-deep); color: var(--muted);
  border: 1px solid var(--line); }

/* ---- Etappe 6, Auftrag 7: Sprungliste zu den Abschnitten ---- */
.sec-nav { margin: 0 0 1.6rem; }
.sec-nav-h { margin: 0 0 .35rem; font-family: var(--serif); font-weight: 600;
  font-size: .95rem; color: var(--muted); }
.sec-nav ol { margin: 0; padding: 0 0 0 1.3rem; }
.sec-nav li { margin: .12rem 0; }
.sec-nav a { font-size: .92rem; }
@media (min-width: 40em) {
  .sec-nav ol { columns: 2; column-gap: 2rem; }
}
/* Sprungziele nicht unter die geklebte Topbar schieben. */
.detail-section[id], details[id], h1[id] { scroll-margin-top: 5rem; }
html { scroll-behavior: smooth; }
/* Weiches Scrollen schadet bei Vestibularbeschwerden. */
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.sec-top { margin: .8rem 0 0; font-size: .84rem; }
/* Prosa-Charakterisierung (Sektion 3) und Quellentext-Bloecke (Sektion 6 und 7). */
.ref-prosa { font-family: var(--serif); font-size: 1.05rem; line-height: 1.6; margin: .2rem 0 0; }
.ref-kennz, .ref-region { line-height: 1.6; font-size: .95rem; }
.reg-src { font-weight: 400; color: var(--muted); font-size: .85rem; }
/* .ref-syn* ist mit Etappe 5 entfallen: die Synonyme stehen jetzt als Zeile
   "Auch bekannt als" im Kopf-Datenblatt (Designspec Etappe 5, 3.5). */
.ref-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .2rem 0 1rem; }
.ref-shop { font-size: .82rem; color: var(--muted); text-decoration: underline; }
.ref-shop:hover { color: var(--ink); }

/* ---- Abschnittskopf ---- */
.sec-sub { color: var(--muted); font-size: .86rem; margin: .1rem 0 .55rem; }
.sec-foot { color: var(--muted); font-size: .82rem; margin: .35rem 0 0; }

/* ---- Sicherheitsband (Sektion 2): der einzige rote Bereich der Seite ---- */
.sec-warn { border-left: 4px solid var(--danger); padding-left: .8rem; }
.sec-warn > h2 { color: var(--ink); }
.ref-warn { margin: .4rem 0; font-size: .92rem; background: #fbf3e6;
  border: 1px solid #e7d6b0; border-radius: 8px; padding: .5rem .7rem; }
/* Ausloeser = Aetiologie aus der Quelle. Bewusst ruhig gehalten (kein Warnton),
   damit es nicht wie eine Warnung gelesen wird. */
.ref-cause { margin: .4rem 0; font-size: .92rem; background: #f2f5f2;
  border: 1px solid #dbe3db; border-radius: 8px; padding: .5rem .7rem; }

/* ---- Anwendungsgebiete (Sektion 3): neutrale Chips, keine Farbcodierung ---- */
.ind-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
.ind-chip { display: inline-block; padding: .25rem .6rem; background: var(--white);
  border: 1px solid var(--line); border-radius: 999px; font-size: .82rem; line-height: 1.35;
  color: var(--ink); text-decoration: none; }
.ind-chip:hover { background: var(--cream-deep); border-color: var(--w2); }
.ind-chip-n { color: var(--muted); font-size: .72rem; margin-left: .25rem; }
.ind-all { margin-top: .6rem; }

/* ---- Wer es im Schrank hat (Sektion 6): die einzige Gruen-Stelle ---- */
.own-line { margin: .25rem 0; font-size: .92rem; }
.own-neutral { color: var(--muted); }
.own-others { margin: .25rem 0 0; font-size: .9rem; color: var(--sage-dark); }
.own-others.is-none { color: var(--muted); }

/* ---- Vertraeglichkeit (Sektion 7) ---- */
.rel-line { margin: .3rem 0; font-size: .92rem; }
.rel-k { font-weight: 600; }
.rel-line a, .rel-body a { color: var(--sage-dark); text-decoration: none; border-bottom: 1px dotted var(--sage); }
.rel-line a:hover, .rel-body a:hover { color: var(--ink); border-bottom-color: var(--ink); }

/* ---- Wo dieses Mittel im Koerper ansetzt (Sektion 9): einfarbig, mit Textlabel ---- */
.pt-bar-2 { grid-template-columns: minmax(0, 1fr) 96px; }
.pt-bar-fill.ink { background: var(--w3); }

/* ---- Hinweise zur Datenqualitaet (Sektion 13): neutral, nie rot ---- */
.dq-note { margin: 1.2rem 0 0; padding: .5rem .7rem; background: var(--cream-deep);
  border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: .85rem; }

/* ======================================================================
   Einheitliche Ergebniszeile .res
   [Streifen] Name [Typ] worum es geht   Relevanz   bei wem   Quellen
   Ersetzt schrittweise .card.card-link, .m-row und .rl fuer Mitteltreffer.
   ====================================================================== */
.res-list { border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  background: var(--white); box-shadow: var(--shadow); }
.res { display: flex; align-items: baseline; gap: .5rem; padding: .55rem .75rem;
  border-bottom: 1px solid var(--line); border-left: 3px solid transparent;
  text-decoration: none; color: inherit; }
.res:last-child { border-bottom: none; }
.res:hover { background: var(--cream); }
.res.is-mine { border-left-color: var(--sage); }   /* Besitzstreifen, kostet keine Breite */
.res-name { font-family: var(--serif); font-weight: 600; flex: 0 1 auto; min-width: 0;
  overflow-wrap: anywhere; }
/* Die Potenz ist eine Angabe, kein Besitz. In der Ergebniszeile steht sie
   unmittelbar neben dem gruenen Besitzstreifen und darf dort nicht gruen sein.
   Ausserhalb von .res bleibt .potenz unveraendert (fremde Vorlagen). */
.res .potenz { color: var(--muted); }
.res-type { flex: none; font-size: .64rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); background: var(--cream-deep);
  border-radius: 4px; padding: 0 .3rem; }
/* Etappe 6, Auftrag 1: der Mittelname brach auf dem Desktop mitten im Wort um
   (bei 641px und mehr 50 von 50 Namen, bei 640px und darunter keiner). Ursache ist
   NICHT .res-name, sondern dieses Element: mit `flex: 1 1 auto` geht seine
   Max-Content-Breite (bis 150 Zeichen) in die Schrumpfrechnung ein und draengt den
   Namen zusammen. Mit `flex: 1 1 0` beginnt die Beschreibung bei 0 und waechst nur
   in den Platz, der uebrig ist. min-width verhindert, dass sie zu einer Reihe von
   Auslassungspunkten schrumpft: darunter lieber gar keine Beschreibung. */
.res-sub { flex: 1 1 0; min-width: 6rem; color: var(--muted); font-size: .84rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.res-sub.res-snip { font-style: italic; }
.res-rel { flex: none; font-size: .78rem; color: var(--ink); }
.res-hold { flex: none; font-size: .78rem; color: var(--sage-dark); }
.res-src { flex: none; margin-left: auto; font-size: .72rem; font-weight: 600;
  color: var(--muted); white-space: nowrap; letter-spacing: .02em; }
/* Abdeckung/Relevanz ist Text, nie Farbe. Die zweite, kleinere Zeile nennt bei
   einer kombinierten Suche, WELCHE Begriffe getroffen haben (Designspec 7.3). */
.res-rel-w { display: block; font-size: .72rem; color: var(--muted); }
.res-list .empty { padding: 1rem .85rem; margin: 0; }
/* Niemand hat es an Lager: die Aussage bleibt, aber ohne Gruen. */
.res-hold.is-none { color: var(--muted); }
.res-rel.is-none { color: var(--muted); }
/* Handlungslink in der Relevanzspalte (Abgleich): Text, kein farbiges Abzeichen. */
.res-act { color: var(--sage-dark); text-decoration: none; border-bottom: 1px dotted var(--sage); }
.res-act:hover { color: var(--ink); border-bottom-color: var(--ink); }
/* Ohne Quellenkuerzel rueckt das letzte Element an den rechten Rand. */
.res > .res-hold:last-child, .res > .res-rel:last-child { margin-left: auto; }
/* Zeile mit einer zusaetzlichen vollbreiten Reihe (Modalitaeten der
   Laien-Empfehlung). */
.res.res-stack { flex-wrap: wrap; }
.res-mod { flex: 1 1 100%; font-size: .8rem; color: var(--muted); }
.res-mod .rec-mod-k { font-weight: 600; color: var(--ink); }

/* Erkannte Suchbedingungen ueber der Liste (Designspec 8.4 A) */
.such-bed { margin: .2rem 0 .6rem; font-size: .9rem; color: var(--muted); }
.sb-tag { display: inline-block; }
.sb-tag strong { color: var(--ink); }
.sb-typ { font-size: .82rem; }

/* Das gemeinte Mittel bei einer Kombinationssuche: eigene Karte ueber der Liste
   (Designspec 8.4 C). Steht hier und nicht mehr in referenz.php, weil die
   Suchseite dieselbe Karte rendert (Designspec Etappe 5, 2.2). */
.ref-meant { margin: .2rem 0 .8rem; padding: .7rem .9rem; border: 1px solid var(--line);
  border-radius: 8px; background: var(--white); }
.ref-meant .rm-n { display: block; font-weight: 600; font-size: 1.02rem; }
.ref-meant .rm-t { display: block; margin: .25rem 0 .45rem; font-size: .92rem; }
.ref-meant .rm-l a { font-weight: 600; }
.ref-meant .rm-l span.sep { margin: 0 .45rem; color: var(--muted); }

/* Zwischenzeile zwischen zwei Gruppen einer gemischten Liste (Designspec 7.4)
   und ueber den nur im Text erwaehnenden Treffern (Designspec 8.4 B). */
.res-group { padding: .45rem .75rem; background: var(--cream-deep);
  border-bottom: 1px solid var(--line); font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
/* Treffer, die den Suchbegriff nur im Text erwaehnen: abgestuft, nicht entfernt. */
.res.is-text { color: var(--muted); }
.res.is-text .res-name { font-weight: 400; }
/* Das gemeinte Mittel einer Kombinationssuche. Bewusst KEIN Gruenton:
   Gruen bedeutet Besitz. */
.res.is-meant { outline: 2px solid var(--ink); outline-offset: -2px; }

/* Zeile mit Bedienelementen (Auswahlhaken, Lager-Schalter): dann ist die Zeile
   ein <div> und der Link liegt innen in .res-main. */
.res.has-ctl { align-items: center; }
.res-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline;
  gap: .5rem; text-decoration: none; color: inherit; }
.res-main > .res-hold { margin-left: auto; }
.res .sel { width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--sage); }
.res .toggle { flex: none; margin-left: auto; }
.res .toggle .track { flex: none; }
.res .toggle .lbl { display: none; }
.res-list.comfortable .res { padding: .95rem 1rem; gap: .8rem; }
.res-list.comfortable .res-name { font-size: 1.15rem; }
.res-list.comfortable .res-sub { white-space: normal; }
.res-list.comfortable .toggle .lbl { display: inline; font-size: .8rem;
  color: var(--muted); min-width: 84px; }

/* Reine Namensliste (A-Z-Stoebern): mehrspaltig, wie bisher die schlanke Liste.
   Nur fuer Zeilen ohne Relevanz-, Bestands- und Betreffangabe. */
@media (min-width: 720px) {
    .res-list.res-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .res-list.res-cols .empty { grid-column: 1 / -1; }
    /* In der schmalen Spalte umbrechen, Bestand auf eigener Zeile (wie bisher). */
    .res-list.res-cols .res { flex-wrap: wrap; }
    .res-list.res-cols .res-hold { flex: 1 1 100%; }
    /* display:grid wuerde sonst das hidden-Attribut aushebeln. */
    /* .res-list[hidden] entfiel am 19.08.2026: seit [hidden]{display:none
       !important} weiter oben entscheidet diese Regel in keiner Konstellation
       mehr etwas, auch nicht innerhalb dieses Media-Blocks. Sie stehen zu
       lassen hiesse, den naechsten Leser einen Grund suchen zu lassen, den es
       nicht gibt. Das ist das Muster, aus dem die 13 toten Klassen entstanden
       sind. Befund der zweiten Design- und Frontend-Runde. */
}
/* Etappe 6, Auftrag 1: Grenze von 40rem auf 48rem gehoben. Zwischen 641 und 768px
   (Tablet im Hochformat) reicht die Breite fuer Name, Relevanz, Bestand, Quellen
   UND eine brauchbare Beschreibung in einer Zeile nicht; dort ist die zweizeilige
   Form die richtige. 48rem = 768px ist der uebliche Tablet-Knick. */
@media (max-width: 48rem) {
    .res { flex-wrap: wrap; }
    .res-name { order: 1; } .res-type { order: 2; } .res-src { order: 3; margin-left: auto; }
    .res-sub { order: 4; flex: 1 1 100%; white-space: normal; overflow: visible;
      display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
    .res-rel { order: 5; } .res-hold { order: 6; }
    .res-main { order: 1; flex-wrap: wrap; }
    .res .toggle { order: 7; }
}

/* ---- Nahe verwandte Mittel: Kraftgraph in der Kopfkarte ----
   Die Anordnung rechnet d3-force im Browser (public/assets/d3-force.min.js, 18 KB),
   gezeichnet wird ein SVG OHNE viewBox: 1 Einheit = 1 Pixel, damit die Schrift auf
   dem Telefon nicht mitskaliert wird. Die erste Fassung hatte einen viewBox von 660
   Einheiten, und auf 375 px wurden aus 14 px Schrift 8 px.
   KEIN Gruen: Gruen bedeutet in dieser App ausschliesslich Besitz. Die Kantenarten
   unterscheiden sich ueber die Linienart, nur die Literaturangabe hat einen Akzent
   in --gold -- das traegt auch fuer Farbenblinde und im Schwarzweissdruck. */
.ref-card-body { display: grid; gap: .9rem 1.4rem; align-items: start; }
@media (min-width: 48em) {
  .ref-card-body { grid-template-columns: minmax(0, 1fr) 22rem; }
}
.nb-graph { margin: 0; min-width: 0; }
.nb-graph > figcaption { font-family: var(--serif); font-weight: 600; font-size: .95rem;
  color: var(--muted); margin-bottom: .2rem; }
.nb-svg { display: block; width: 100%; height: auto; touch-action: none;
  background: var(--white); border: 1px solid var(--line); border-radius: 10px; }
.nb-edge { stroke: var(--line); stroke-width: 1.5; }
.nb-edge.nb-literatur { stroke: var(--gold); stroke-width: 1.8; stroke-dasharray: 6 4; }
.nb-edge.nb-familie { stroke-dasharray: 2 4; }
.nb-node { cursor: grab; text-decoration: none; }
.nb-node circle { fill: var(--white); stroke: var(--muted); stroke-width: 1.5; }
.nb-node.nb-literatur circle { stroke: var(--gold); }
.nb-node text { font-family: var(--serif); font-size: 13px; fill: var(--ink); }
.nb-node:hover circle, .nb-node:focus circle { fill: var(--gold); stroke: var(--gold); }
.nb-node:hover text, .nb-node:focus text { font-weight: 600; }
.nb-center circle { fill: var(--ink); }
.nb-center text { font-family: var(--serif); font-size: 14px; font-weight: 600; fill: var(--ink); }
/* Liste: ohne JavaScript die Hauptform, mit JavaScript ersetzt sie die Grafik. */
.nb-list { list-style: none; margin: .3rem 0 0; padding: 0; }
.nb-graph.has-graph .nb-list { display: none; }
.nb-li { display: flex; align-items: baseline; gap: .5rem; padding: .35rem .1rem;
  border-bottom: 1px solid var(--line); font-size: .92rem; }
.nb-li:last-child { border-bottom: none; }
.nb-li > a { font-family: var(--serif); font-weight: 600; text-decoration: none; color: inherit; }
.nb-why { margin-left: auto; font-size: .76rem; color: var(--muted); white-space: nowrap; }
.nb-leg { display: flex; flex-wrap: wrap; gap: .1rem .9rem; margin-top: .4rem;
  font-size: .78rem; color: var(--muted); }
.nb-leg i { display: inline-block; width: 22px; border-top: 2px solid var(--line);
  vertical-align: middle; margin-right: .3rem; }
.nb-leg i.lit { border-top-style: dashed; border-top-color: var(--gold); }
.nb-leg i.fam { border-top-style: dotted; }
.nb-foot { margin: .35rem 0 0; font-size: .74rem; color: var(--muted); line-height: 1.4; }
/* Verlinkte Modalitaeten-Stichworte: Text mit Unterstreichung, kein Abzeichen. */
.lm-rub { color: var(--ink); text-decoration: none; border-bottom: 1px dotted var(--sage); }
.lm-rub:hover { color: var(--sage-dark); border-bottom-style: solid; }
/* Im Druck ist die Liste nuetzlicher als eine Momentaufnahme der Anordnung. */
@media print {
  .nb-svg { display: none; }
  .nb-graph.has-graph .nb-list { display: block; }
}

/* ---- Sammlungen (public/sammlungen.php) ----
   Die Seite war "unstrukturiert", weil alles gleichzeitig aufgeklappt war: ueber
   fuenfzig Bedienelemente bei drei Sammlungen. Jetzt Liste in der einheitlichen
   Zeile `.res`, und je Sammlung eine eigene Ansicht. Diese Regeln ersetzen den
   Inline-<style>-Block, der vorher am Fuss der Seite stand. */
.sml-neu { margin: 0 0 1.2rem; }
.sml-edit .field { margin-bottom: .6rem; }
.sml-edit .field label { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .15rem; }
.sml-edit .field input[type=text] { width: 100%; max-width: 28rem; padding: .45rem .6rem;
  border: 1px solid var(--line); border-radius: 8px; }
.sml-list { display: flex; flex-direction: column; }
.sml-row { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  padding: .5rem .1rem; border-bottom: 1px solid var(--line); }
.sml-row:last-child { border-bottom: none; }
.sml-name { flex: 0 0 auto; min-width: 9rem; font-family: var(--serif); font-weight: 600;
  color: inherit; text-decoration: none; }
.sml-name:hover { text-decoration: underline; }
.sml-note { display: flex; gap: .35rem; align-items: center; flex: 1 1 16rem; margin: 0; }
.sml-note input[type=text] { flex: 1 1 auto; min-width: 0; padding: .35rem .55rem;
  border: 1px solid var(--line); border-radius: 8px; font-size: .88rem; }
.sml-saved { font-size: .76rem; color: var(--sage-dark); white-space: nowrap; }
/* Gescheitertes Speichern muss man SEHEN. Rot ist sonst dem Sicherheitsband
   vorbehalten; hier geht es um verlorene Eingaben des Nutzers, das ist der
   eine andere Fall, in dem eine Warnfarbe gerechtfertigt ist. */
.sml-saved.is-fail { color: var(--danger); font-weight: 600; white-space: normal; }
.sml-del { margin: 0; flex: none; }
.sml-row .x { background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 1.2rem; line-height: 1; padding: .2rem .35rem; min-width: 2rem; min-height: 2rem; }
.sml-row .x:hover { color: var(--danger); }
.sml-add { display: flex; gap: .5rem; align-items: end; flex-wrap: wrap; margin-top: .9rem; }
.sml-add-lbl { font-size: .85rem; color: var(--muted); flex: 1 1 100%; margin-bottom: -.2rem; }
.sml-add select { padding: .45rem .5rem; border: 1px solid var(--line); border-radius: 8px;
  max-width: 24rem; flex: 1 1 14rem; }
.sml-gruppe { margin: .9rem 0 0; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }

/* ---- Fachwerkzeuge (public/werkzeuge.php) und Bruecke ins Repertorium ----
   Eine Tuer fuer die fuenf Werkzeuge, die Vorwissen verlangen. Die
   Hauptnavigation hat danach drei Nachschlage-Punkte statt sieben. Je Werkzeug
   ein Satz, wofuer es gut ist, und einer, was es kostet. */
.wz-list .wz-row { align-items: flex-start; padding: .75rem .85rem; gap: .15rem .8rem; flex-wrap: wrap; }
.wz-row .res-name { flex: 0 0 100%; font-size: 1.05rem; }
.wz-text { flex: 1 1 100%; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.wz-kosten { color: var(--ink); }
@media (min-width: 44em) {
  .wz-row .res-name { flex: 0 0 11rem; }
  .wz-text { flex: 1 1 0; }
}
/* Bruecke unter der Trefferliste: ein Hinweis, kein Handlungsknopf. */
.such-bruecke { margin: .8rem .1rem 0; max-width: 46rem; }

/* ---- Potenz-Auswahl im Mittel-Formular ----
   Der Auftraggeber wollte die gaengigen Potenzen zur Hand haben, ohne dass sie
   staendig Platz brauchen. Bewusst ein Aufklapper zum Antippen und kein Oeffnen
   bei Mouseover: auf dem Telefon gibt es kein Mouseover. */
.pot-pick { margin-top: .35rem; }
.pot-pick > summary { font-size: .82rem; color: var(--muted); cursor: pointer;
  list-style: none; }
.pot-pick > summary::before { content: '+ '; font-weight: 700; }
.pot-pick[open] > summary::before { content: '\2212 ';   /* U+2212 Minus, Gegenstueck zu content: '+ '.
     Hier stand bis 19.08.2026 das Steuerzeichen U+0091 plus die Ziffer 2,
     also ein unsichtbares Zeichen und eine sinnlose 2 auf dem Aufklapper
     der Potenzliste (Befund des Design-Gutachters). */ }
.pot-pick > summary:hover { color: var(--sage-dark); }
.pot-pick-body { margin-top: .4rem; padding: .5rem .6rem; background: var(--cream);
  border: 1px solid var(--line); border-radius: 10px; }
.pot-grp { border: none; margin: 0 0 .5rem; padding: 0; }
.pot-grp:last-of-type { margin-bottom: .2rem; }
/* Die Legende trug .74rem in Versalien und Grau, also die kleinste Schrift der
   Seite. Seit dem 19.08.2026 steht dort die EINZIGE Erklaerung, die eine Laiin
   zu TM, D, C, M, XM, Q/LM und K bekommt ("Dezimal (D), je Schritt 1 zu 10
   verduennt"). Ein erklaerender Satz in Versalien und 12 px ist keiner.
   Befund der zweiten Gutachterrunde. */
.pot-grp > legend { padding: 0; font-size: .84rem; color: var(--ink);
  font-weight: 600; letter-spacing: 0; }
.pot-opt { display: inline-flex; align-items: center; gap: .3rem; margin: .2rem .7rem .2rem 0;
  font-size: .88rem; white-space: nowrap; }
.pot-opt input { accent-color: var(--sage); width: 1.05rem; height: 1.05rem; }

/* ---- Heilmethode im Mittel-Formular ----
   Zwei Knoepfe statt eines Auswahlfeldes: es gibt genau zwei Werte, und die Wahl
   soll sichtbar sein statt hinter einem zugeklappten Feld zu stehen. */
.feldlabel { display: block; font-size: .85rem; color: var(--muted); margin-bottom: .15rem; }
.meth-wahl { display: flex; flex-wrap: wrap; gap: .3rem .9rem; padding-top: .3rem; }
.meth-opt { display: inline-flex; align-items: center; gap: .35rem; font-size: .95rem;
  min-height: 2.2rem; cursor: pointer; }
.meth-opt input { accent-color: var(--sage); width: 1.1rem; height: 1.1rem; }

/* ---- Quellen-Anzahl als abzaehlbarer Vierer-Satz (Etappe 6, Auftrag 2) ----
   EIN Ton fuer alle gefuellten Quadrate: gezaehlt wird eine ANZAHL, nicht ein
   Grad. wgrad_html() nimmt einen dunkleren Ton bei hoeherem Rang und kodierte
   "mehr = staerker" damit doppelt; zwei Quellen sind aber nicht "mittel", sie
   sind zwei. Bewusst kein Gruenton, Gruen heisst in dieser App Besitz. */
.res-qn { flex: none; margin-left: auto; display: inline-flex; align-items: center;
  gap: .35rem; white-space: nowrap; }
.qn-set { display: inline-flex; gap: .12rem; }
.qn-set i { display: block; width: .5rem; height: .5rem; border-radius: 2px;
  background: var(--w3); }
.qn-set i.qn-off { background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.qn-lbl { font-size: .72rem; color: var(--muted); }
/* Auf schmalen Schirmen nur die Zahl: die Zeile hat dort schon drei Reihen, und
   die Quadrate kosten mehr Platz als sie tragen. */
@media (max-width: 30rem) { .qn-set { display: none; } }
/* Trefferort einmal ueber der Liste, wenn er bei allen Zeilen derselbe ist. */
.such-relall { margin: .2rem .1rem .5rem; font-size: .85rem; color: var(--muted); }

/* Druck: Aufklapper sollen den Inhalt mitdrucken, wo der Browser das zulaesst. */
@media print {
    details > summary { list-style: none; font-weight: 600; }
    details > *:not(summary) { display: block !important; }
    .sec-warn { border-left: 3px solid #000; }
}

/* Heilmethode im Verzeichnis (seit 19.08.2026). Segment-Optik statt Haekchen:
   die Quellen sind eine Mehrfachauswahl, die Methode eine Entweder-oder-Wahl.
   Steht ueber dem Quellenfilter und ist NICHT eingeklappt, weil ihr Zweck genau
   die Auffindbarkeit der 32 Gemma-Stoffe ist. */
.ref-meth { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 .6rem; }
.ref-meth .ref-scope-btn { text-decoration: none; }