/* Eigene Klassen, die Tailwind ergänzen. Regeln: docs/2026-11-11_Bedienmuster.md.
   Beobachter-Regel: Grün/Gelb/Rot nur für Report-Schwellen und die Gesamt-Ampel, immer mit Wort. Neutrales ist grau
   („Kontext“), Richtung ist ein Pfeil in Marine (.tendenz). Alle Farben als Variablen (dunkles Thema später möglich). */
:root {
  --marine: #1f3a5f; --marine-hell: #2b4d7a; --gold: #c9a24d; --gold-hell: #f6efdf; --gold-dunkel: #7a5d1f;
  --papier: #fafaf9; --karte: #ffffff; --text: #292524; --leise: #78716c; --linie: #e7e5e4; --linie-zart: #f0efed;
  --feldrand: #8c857f;
  --ampel-gruen: #3f9d5a; --ampel-gelb: #d99a2b; --ampel-rot: #c0392b; --neutral: #a8a29e;
}
::selection { background: var(--gold-hell); color: var(--marine); }
body { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 2px solid var(--marine); outline-offset: 2px; }
.navlink:focus-visible, header :focus-visible { outline-color: #fff; }

.navlink { padding: .3rem .5rem; border-radius: .25rem; color: rgb(255 255 255 / .85); background: none; border: 0; cursor: pointer; font: inherit; }
.navlink:hover { background: rgb(255 255 255 / .1); color: #fff; }
.navlink.aktiv { background: var(--gold); color: var(--marine); }
.feld { display: block; width: 100%; margin-top: .25rem; padding: .5rem .75rem; border: 1px solid var(--feldrand); border-radius: .25rem; background: var(--karte); color: var(--text); }
.feld::placeholder { color: var(--leise); }
.feld:focus { outline: 2px solid var(--marine); outline-offset: 1px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: .5rem; padding: 1.25rem; }
.knopf { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; background: var(--marine); color: #fff; border-radius: .25rem; padding: .45rem .9rem; font-size: .875rem; border: 0; cursor: pointer; }
.knopf:hover { background: var(--marine-hell); }
.knopf-zweit { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; border: 1px solid var(--feldrand); border-radius: .25rem; padding: .45rem .9rem; font-size: .875rem; background: var(--karte); color: var(--marine); cursor: pointer; }
.knopf-zweit.aktiv { background: var(--marine); border-color: var(--marine); color: #fff; }
.link { color: var(--marine); text-decoration: underline; text-underline-offset: 2px; background: none; border: 0; cursor: pointer; font: inherit; }
/* kleine Text-Aktionen: lesbar (12 px) und mit Fingerfläche (32 px) */
.link-klein { display: inline-flex; align-items: center; min-height: 2rem; color: var(--marine); text-decoration: underline; text-underline-offset: 2px; font-size: .75rem; line-height: 1rem; background: none; border: 0; cursor: pointer; }
summary { cursor: pointer; min-height: 2rem; display: list-item; }
.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); font-size: .875rem; }
.tabelle th { text-align: left; font-weight: 600; color: var(--marine); border-bottom: 2px solid var(--gold); padding: .4rem .6rem; }
.tabelle td { border-bottom: 1px solid var(--linie-zart); padding: .35rem .6rem; vertical-align: top; }
.tabelle .zahl { text-align: right; font-variant-numeric: tabular-nums; }
.vorbei { color: var(--leise); }

/* Ampel: nur Report-Schwellen und Gesamt-Ampel, immer mit Wort daneben */
.ampel { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; margin-right: .35rem; vertical-align: middle; }
.ampel-gruen { background: var(--ampel-gruen); } .ampel-gelb { background: var(--ampel-gelb); } .ampel-rot { background: var(--ampel-rot); } .ampel-grau { background: var(--neutral); }
.stufe { font-size: .75rem; font-weight: 700; letter-spacing: .02em; }
.stufe-ok { color: #2f7a45; } .stufe-warn { color: #8a6a1f; } .stufe-alert { color: #a8321f; } .stufe-neutral, .stufe-na { color: var(--leise); }
/* Richtung (Tag, Signal, Bericht, historische Reaktion): Pfeil + Wort in Marine, nie grün/rot */
.tendenz { color: var(--marine); font-weight: 600; white-space: nowrap; }
.tendenz-pfeil { display: inline-block; width: 1em; text-align: center; color: var(--marine); font-weight: 700; }
/* Relevanz im Wirtschaftskalender: Gold statt Ampel */
.relevanz { display: inline-block; font-size: .75rem; line-height: 1.1rem; padding: 0 .5rem; border-radius: 999px; border: 1px solid var(--linie); color: var(--leise); white-space: nowrap; }
.relevanz-hoch { background: var(--gold-hell); border-color: var(--gold); color: var(--gold-dunkel); font-weight: 600; }
.relevanz-mittel { border-color: var(--gold); color: var(--gold-dunkel); }

.meldung { border-radius: .25rem; padding: .5rem .75rem; font-size: .875rem; border: 1px solid; }
.meldung-success { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.meldung-error { background: #fef2f2; border-color: #fecaca; color: #991b1b; }
.meldung-warning { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.meldung-info { background: var(--gold-hell); border-color: var(--gold); color: var(--gold-dunkel); }

/* Gesamt-Ampel: der linke Farbrand bleibt ihr vorbehalten */
.ampel-rand { border-left: 7px solid var(--neutral); }
.ampel-rand-ok { border-left-color: var(--ampel-gruen); } .ampel-rand-warn { border-left-color: var(--ampel-gelb); } .ampel-rand-alert { border-left-color: var(--ampel-rot); }
.ampel-rand-na { border-left-color: var(--neutral); }
/* 52-Wochen-Spanne: einfarbig, die Marke zeigt die Lage – keine Wertung */
.balken { height: 6px; border-radius: 3px; margin-top: 2px; position: relative; background: var(--linie); }
.balken .marke { position: absolute; top: -3px; width: 3px; height: 12px; background: var(--marine); border-radius: 2px; transform: translateX(-1px); }

/* Navigation: Rechner oben, Handy unten (Bedienmuster Abschnitt 5) */
.sprung { position: absolute; left: -999px; top: .5rem; background: var(--karte); color: var(--marine); padding: .5rem .75rem; border-radius: .25rem; z-index: 50; }
.sprung:focus { left: .5rem; }
.kopf-handy, .leiste-unten { display: none; }
@media (max-width: 767px) {
  .kopf-rechner { display: none; }
  .kopf-handy { display: flex; align-items: center; height: 3rem; padding: 0 1rem; position: sticky; top: 0; z-index: 30; }
  .leiste-unten { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--karte); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); }
  .leiste-unten a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 3.25rem;
    font-size: .75rem; color: var(--leise); }
  .leiste-unten svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
  .leiste-unten a.aktiv { color: var(--marine); font-weight: 700; box-shadow: inset 0 3px 0 var(--gold); }
  .fuss { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}
/* Listen mit Zeilen zum Antippen (Seite „Mehr“, später Kartenlisten) */
.liste { background: var(--karte); border: 1px solid var(--linie); border-radius: .5rem; }
.liste .zeile { display: flex; align-items: center; gap: .75rem; min-height: 3rem; padding: .6rem .9rem; border-top: 1px solid var(--linie); color: var(--text); width: 100%; text-align: left; background: none; font: inherit; cursor: pointer; }
.liste > .zeile:first-child, .liste > :first-child > .zeile { border-top: 0; }
.liste .zeile .text { flex: 1; min-width: 0; }
.liste .zeile .text small { display: block; font-size: .75rem; color: var(--leise); }
.liste > a.zeile::after { content: "›"; color: var(--marine); font-size: 1.2rem; }
.liste .zeile.abmelden { color: #a8321f; }
/* Zuklappbare Abschnitte der Marktlage: Überschrift + Kurzinfo, am Rechner per Skript offen */
details.abschnitt { border-top: 1px solid var(--linie); padding: .25rem 0 .75rem; }
details.abschnitt > summary { list-style: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; min-height: 2.75rem; padding: .6rem 0;
  font-family: Georgia, serif; font-size: 1.125rem; color: var(--marine); }
details.abschnitt > summary::-webkit-details-marker { display: none; }
details.abschnitt > summary::after { content: "⌄"; margin-left: auto; color: var(--marine); font-family: system-ui, sans-serif; }
details.abschnitt[open] > summary::after { content: "⌃"; }
details.abschnitt > summary .kurz { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; font-size: .8125rem; color: var(--leise); }
/* aufklappbare Listenzeile (Signal, Wert): Zeile ist der Auslöser, Details darunter */
.liste > details.zeile-auf { border-top: 1px solid var(--linie); }
.liste > details.zeile-auf:first-child { border-top: 0; }
.liste > details.zeile-auf > summary.zeile { list-style: none; border-top: 0; }
.liste > details.zeile-auf > summary.zeile::-webkit-details-marker { display: none; }
.liste > details.zeile-auf > summary.zeile::after { content: "⌄"; color: var(--marine); }
.liste > details.zeile-auf[open] > summary.zeile::after { content: "⌃"; }
.kachel { display: flex; flex-direction: column; gap: .15rem; }
/* Handy (< 640 px): Kartenliste statt Tabelle; Rechner: Tabelle (Bedienmuster, Entscheidung 10) */
@media (max-width: 639px) { .nur-rechner { display: none !important; } }
@media (min-width: 640px) { .nur-handy { display: none !important; } }
.liste .zeile .wert { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.liste .zeile .wert small { display: block; font-size: .75rem; color: var(--leise); }
.zeile-mehr { padding: 0 1rem .75rem; font-size: .875rem; color: #57534e; }
.zeile-mehr .aktionen { display: flex; gap: 1rem; margin-top: .25rem; }
/* Erfassen hinter „+ … hinzufügen“: auf Rechner und Handy zugeklappt */
details.erfassen { margin-bottom: 1rem; }
details.erfassen > summary { list-style: none; display: inline-flex; align-items: center; min-height: 2.5rem; padding: .45rem .9rem;
  border: 1px solid var(--feldrand); border-radius: .25rem; background: var(--karte); color: var(--marine); font-size: .875rem; }
details.erfassen > summary::-webkit-details-marker { display: none; }
details.erfassen > summary::after { content: "⌄"; margin-left: .5rem; }
details.erfassen[open] > summary::after { content: "⌃"; }
details.erfassen > form, details.erfassen > .karte { margin-top: .5rem; max-width: 40rem; }