/* Valume — Silbergrau + Orange, hell und dunkel
   ==================================================================
   Grundregel bleibt: Das Grau traegt die Flaeche, Orange traegt die
   Bedeutung. Orange erscheint nur an vier Stellen: Marke, aktiver
   Zustand, primaerer Knopf, Kurslinie. Gruen und Rot bleiben allein
   fuer Auf und Ab reserviert.

   GRAU-FAMILIE: durchgehend kuehl (Blauanteil ueber Rotanteil). Das
   Pastellgrau war warm; warme und kuehle Graus nebeneinander lesen
   sich als Unfall, deshalb ist die Familie einheitlich. Geprueft wird
   das ueber R minus B: bei jedem Grauton hier ist der Wert negativ.

   ZWEI ORANGETOENE, und das ist kein Zufall:
   --accent      leuchtend, fuer Flaechen, Linien und Icons.
   --accent-ink  dunkler, fuer Knopffuellungen und farbigen Text.
   Wer das vertauscht, baut eine Barriere ein, die man erst im
   Sonnenlicht auf dem Handy merkt.

   --auf-akzent ist die Textfarbe AUF einer Akzentfuellung. Hell ist
   sie weiss, dunkel ist sie fast schwarz -- im dunklen Modus ist das
   Orange so hell, dass weisser Text darauf durchfallen wuerde.

   --border kommt in drei Staerken, nach Zweck getrennt:
   --border         dekorative Hairline, kein Kontrastanspruch
   --border-strong  betonte Trennlinie
   --border-field   Rand von BEDIENELEMENTEN. Der muss 3:1 halten
                    (WCAG 1.4.11), weil sich die Feldflaeche selbst nur
                    mit 1,10:1 vom Grund abhebt: Das Feld ist allein an
                    seinem Rand zu erkennen, nicht an seiner Fuellung.

   --accent-rgb existiert, weil rgba() keine Hex-Variable schlucken
   kann. Ueberall wo Transparenz noetig ist, steht
   rgba(var(--accent-rgb), 0.12) statt eines fest eingetippten Werts.

   Alle Werte unten sind gemessen, nicht geschaetzt. Die Zahlen in den
   Kommentaren sind WCAG-Kontrastverhaeltnisse.
   ================================================================== */

:root {
  color-scheme: light dark;

  /* Flaechen */
  --bg: #f1f3f6;             /* Seitengrund, kuehles Silbergrau */
  --bg-rgb: 241, 243, 246;   /* derselbe Ton fuer rgba(), siehe --accent-rgb */
  --schatten-rgb: 24, 30, 42;  /* Schattenton, kuehl wie die Grau-Familie */
  --bg-soft: #e5e9ef;        /* Eingabefelder, gedaempfte Flaechen */
  --card: #ffffff;
  --card-hover: #f8fafc;
  --border: #dce1e9;
  --border-strong: #a3adbd;
  --border-field: #7f8c9f;   /* 3,07:1 auf --bg, 3,41:1 auf --card */

  /* Text */
  --text: #14171d;           /* 16,2:1 auf --bg, 18,0:1 auf --card */
  --text-soft: #3c424e;      /* 9,1:1 auf --bg */
  --muted: #5f6775;          /* 5,1:1 auf --bg, 5,7:1 auf --card,
                                4,7:1 auf --bg-soft */

  /* Marke */
  --accent: #e06a1c;         /* Saettigung 78 %, 3,0:1 auf --bg */
  --accent-ink: #a8430f;     /* 5,4:1 auf --bg, 6,0:1 auf --card,
                                5,3:1 auf --accent-soft */
  --accent-soft: #fdeddf;
  --accent-line: #f0c8a4;
  --accent-rgb: 224, 106, 28;
  --auf-akzent: #ffffff;     /* 6,0:1 auf --accent-ink */

  /* Semantik */
  --good: #127350;           /* 5,3:1 auf --bg */
  --good-soft: #e0f1e9;
  --bad: #bc3a2d;            /* 5,0:1 auf --bg */
  --bad-soft: #fbe7e5;
  --warn: #8a5f0c;           /* 5,1:1 auf --bg */
  --warn-soft: #faf0da;
  /* Kommende Termine im Kalender. Eigenes Token, weil Orange der Marke
     gehoert: solange kommende Earnings --accent trugen, sah eine
     Datenkategorie aus wie das Logo, und im Monatsraster standen orange
     Punkte neben dem orangen "heute"-Kreis. Blau ist hier neutral und
     kollidiert weder mit Gruen (berichtet) noch mit Bernstein (Dividende). */
  --termin: #2a6aa4;         /* 5,1:1 auf --bg */

  /* Zusammengesetztes */
  --radius: 14px;
  --topbar-bg: rgba(241, 243, 246, 0.85);
  --overlay: rgba(16, 21, 31, 0.55);
  /* Schatten kuehl getoent statt neutral schwarz, und weit gestreut statt
     hart: ein grosser, sehr schwacher Radius liest sich als Umgebungslicht,
     ein enger dunkler als aufgeklebter Rand. */
  --schatten-s: 0 1px 2px rgba(24, 30, 42, 0.05), 0 4px 14px rgba(24, 30, 42, 0.05);
  --schatten-m: 0 2px 8px rgba(24, 30, 42, 0.06), 0 18px 44px rgba(24, 30, 42, 0.09);
  --glanz: rgba(24, 30, 42, 0.05);        /* Schimmer auf HELLEM Grund muss
                                             abdunkeln, nicht aufhellen */
  --glanz-stark: rgba(24, 30, 42, 0.09);
}

/* ------------------------------------------------------------------
   Dunkler Modus. Folgt der Systemeinstellung, es gibt bewusst keinen
   Umschalter im Kopf: einer mehr neben Suche, Sprache und Konto, und
   die Leiste platzt. Wer dunkel will, hat es im Betriebssystem
   meistens ohnehin schon gesagt.

   Nur die Tokens werden getauscht, keine einzige Regel weiter unten.
   Genau dafuer sind sie da. Zwei Dinge kippen dabei bewusst um:
   - --glanz hellt jetzt auf statt abzudunkeln,
   - --auf-akzent wird fast schwarz, weil das helle Orange sonst
     weissen Text verschluckt (7,3:1 statt 1,9:1).
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0f1216;
    --bg-rgb: 15, 18, 22;
    --schatten-rgb: 0, 0, 0;   /* auf dunklem Grund traegt nur echtes
                                  Schwarz noch sichtbare Tiefe */
    --bg-soft: #171c22;
    --card: #151a20;
    --card-hover: #1b212a;
    --border: #272e38;
    --border-strong: #454f5e;
    --border-field: #5f6c7f;   /* 3,5:1 auf --bg, 3,3:1 auf --card */

    --text: #e7eaef;           /* 15,6:1 auf --bg */
    --text-soft: #b2b9c5;      /* 9,5:1 auf --bg */
    --muted: #8992a1;          /* 6,0:1 auf --bg, 5,6:1 auf --card */

    --accent: #e88a47;         /* Saettigung 78 %, 7,3:1 auf --bg */
    --accent-ink: #f0a06a;     /* 8,9:1 auf --bg -- im Dunkeln ist der
                                  "Tinten"-Ton HELLER als --accent, nicht
                                  dunkler: er traegt Text, keine Fuellung */
    --accent-soft: #2a1d12;
    --accent-line: #5c3a1d;
    --accent-rgb: 232, 138, 71;
    --auf-akzent: #0f1216;     /* 7,3:1 auf --accent */

    --good: #3fbe8a;           /* 8,0:1 auf --bg */
    --good-soft: #12271f;
    --bad: #f0776a;            /* 6,8:1 auf --bg */
    --bad-soft: #2c1917;
    --warn: #d9a53f;           /* 8,4:1 auf --bg */
    --warn-soft: #2a2113;
    --termin: #6aa8db;         /* 7,4:1 auf --bg */

    --topbar-bg: rgba(15, 18, 22, 0.85);
    --overlay: rgba(6, 8, 11, 0.66);
    --schatten-s: 0 1px 2px rgba(0, 0, 0, 0.35), 0 4px 14px rgba(0, 0, 0, 0.3);
    --schatten-m: 0 2px 8px rgba(0, 0, 0, 0.4), 0 18px 44px rgba(0, 0, 0, 0.45);
    --glanz: rgba(255, 255, 255, 0.05);
    --glanz-stark: rgba(255, 255, 255, 0.09);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }   /* sanftes Scrollen bei Ankerlinks (Hero-CTA -> Sektoren) */

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
}

/* Zahlen sauber untereinander ausrichten */
.sector-change, .stock-price, .num, td, .metric-value { font-variant-numeric: tabular-nums; }

/* ---------- Filmkorn ----------
   Eine grosse, gleichmaessig eingefaerbte Flaeche wirkt digital-steril; ein
   kaum sichtbares Rauschen darueber gibt ihr Oberflaeche. Das Muster kommt
   aus einem SVG-Filter (feTurbulence) als data-URI, also ohne zusaetzlichen
   Netzwerkabruf und ohne Bilddatei.

   Drei Bedingungen, sonst kostet es Bildrate:
   - position: fixed, damit beim Scrollen nichts neu gezeichnet wird,
   - pointer-events: none, sonst faengt die Schicht jeden Klick ab,
   - z-index unter Sprunglink (100) und Dialogen (200+), ueber der Topbar.

   Die Deckkraft ist absichtlich winzig. Wer es nicht will, setzt hier
   opacity: 0 -- die Regel ist die einzige Stelle. */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 90;
  pointer-events: none; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E");
}
/* Auf Papier ist das Korn nur schmutziges Grau. */
@media print { body::after { display: none; } }

/* ---------- Tastatur-Bedienung ---------- */
/* Sprunglink: liegt ausserhalb des Bildes, bis er den Fokus bekommt. Bewusst
   NICHT display:none -- damit fiele er aus der Tab-Reihenfolge und waere
   nutzlos. */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  padding: 10px 18px; border-radius: 9px;
  background: var(--accent-ink); color: var(--auf-akzent);
  font-size: 13.5px; font-weight: 600;
  transition: top 0.18s cubic-bezier(0.32, 0.72, 0, 1);
}
.skip-link:focus { top: 12px; }
/* <main> traegt tabindex="-1", damit der Sprunglink den Fokus wirklich
   uebergibt (ohne das springt nur die Ansicht, der Fokus bleibt oben stehen).
   Der Ring dort waere aber ein Kasten um die halbe Seite. */
main:focus { outline: none; }

/* Raender von Bedienelementen. Zentral statt in zehn Einzelregeln, damit die
   Begruendung an einer Stelle steht: Die Feldfuellung (--bg-soft) hebt sich
   nur mit 1,10:1 vom Seitengrund ab. Ein Eingabefeld ist also allein an
   seinem Rand als Eingabefeld zu erkennen, und der muss dafuer 3:1 halten
   (WCAG 1.4.11). --border allein waere mit 1,18:1 zu wenig.
   Steht bewusst NACH den Einzelregeln: gleiche Spezifitaet, spaeter gewinnt. */
.search input, .auth-field input, .watch-add input, .notiz-feld,
.stock-filter, .field input, .field select, .fin-search,
.comps-load input, .comps-table input[type="text"], .comps-target-grid input,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], select, textarea {
  border-color: var(--border-field);
}

/* Sichtbarer Fokus fuer alles, was bedient werden kann. Es gab dieses Muster
   (2px --accent mit Versatz) schon an sechs Stellen; hier steht es einmal
   zentral, statt es weiter einzeln nachzuziehen.
   :focus-visible statt :focus -- der Ring erscheint bei Tastaturbedienung,
   nicht beim Mausklick. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Eingabefelder setzen ihren Rahmen auf --accent und dazu outline:none. Als
   alleiniger Hinweis ist eine 1px-Farbaenderung fuer Tastaturnutzer zu wenig,
   deshalb bekommen sie denselben Ring wie alle anderen zurueck. */
.search input:focus-visible, .auth-field input:focus-visible,
.watch-add input:focus-visible, .notiz-feld:focus-visible,
.stock-filter:focus-visible, .field input:focus-visible,
.field select:focus-visible, .fin-search:focus-visible,
.comps-load input:focus-visible, .comps-table input[type="text"]:focus-visible,
.comps-target-grid input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
}

a { color: inherit; text-decoration: none; }
code { background: var(--bg-soft); padding: 1px 6px; border-radius: 5px; font-size: 0.88em; }

/* ---------- Topbar ---------- */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 24px;
  padding: 14px 28px;
  background: var(--topbar-bg);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
}
.brand { display: flex; align-items: center; gap: 13px; font-weight: 500; letter-spacing: 5px; font-size: 16.5px; }
.brand .brand-mark { flex-shrink: 0; }
.brand .brand-mark path { stroke: var(--accent); stroke-width: 4.5; }
.brand .brand-sep { width: 1px; height: 26px; background: var(--border); }
.brand-beta {
  font-size: 10px; font-weight: 700; letter-spacing: 1px;
  color: var(--muted); border: 1px solid var(--border); border-radius: 5px;
  padding: 2px 6px; text-transform: uppercase;
}
.search { position: relative; flex: 1; max-width: 420px; }
.search input {
  width: 100%; padding: 9px 14px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); font: inherit; font-size: 14px;
  transition: border-color 0.15s;
}
.search input:focus { outline: none; border-color: var(--accent); }

.search-suggestions {
  display: flex; flex-direction: column;
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden;
  box-shadow: 0 8px 24px rgba(var(--schatten-rgb), 0.084);
  z-index: 60;
}
.search-suggestion {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; text-align: left; background: none; border: none; font: inherit;
  color: var(--text); padding: 9px 14px; cursor: pointer;
}
.search-suggestion:hover, .search-suggestion.active { background: var(--bg-soft); }
.search-suggestion .sug-symbol { font-weight: 600; }
.search-suggestion .sug-name {
  color: var(--muted); font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.topbar nav { display: flex; gap: 4px; margin-left: auto; }
.topbar nav a {
  padding: 7px 14px; border-radius: 8px; color: var(--muted);
  font-weight: 500; font-size: 14px; transition: all 0.15s;
}
.topbar nav a:hover { color: var(--text); background: var(--bg-soft); }
/* Der aktive Punkt traegt Pastellorange, nicht Weiss: Auf dem hellen
   Seitengrund war eine weisse Flaeche kaum vom Hintergrund zu unterscheiden,
   der aktive Zustand ging dadurch verloren. */
.topbar nav a.active { color: var(--accent-ink); background: var(--accent-soft); }

/* ---------- Burger-Menü (nur auf schmalen Screens) ---------- */
/* Der Knopf ist auf breiten Screens komplett aus, das Menü immer eine Zeile.
   Erst unter 900px kippt es: Knopf an, Navigation als Block darunter. */
.nav-toggle {
  display: none;                     /* Standard: Desktop, Knopf nicht nötig */
  align-items: center; justify-content: center;
  width: 40px; height: 40px; flex-shrink: 0;
  margin-left: auto;                 /* schiebt den Knopf an den rechten Rand */
  background: none; border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); cursor: pointer;
}
.nav-toggle:hover { background: var(--bg-soft); }
.nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nav-toggle-bars { display: flex; flex-direction: column; gap: 4px; width: 18px; }
.nav-toggle-bars i { display: block; height: 2px; border-radius: 2px; background: currentColor; }
/* Aufgeklappt wird der Burger zum X: obere und untere Linie kreuzen sich,
   die mittlere verschwindet. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i { transition: transform 0.18s, opacity 0.18s; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.nav-konto-mobil { display: none; }  /* auf breiten Screens ersetzt das Profil-Icon diesen Block */

/* Die zugehörigen Media-Queries stehen NICHT hier, sondern weiter unten hinter
   dem Account-Abschnitt (Suchwort: "Mobil-Umschaltpunkt"). Grund: Bei gleicher
   Spezifität gewinnt in CSS die SPÄTERE Regel — auch gegen eine Media-Query.
   Ein `.account { display: none }` an dieser Stelle würde vom späteren
   `.account { display: flex }` überschrieben, und der Anmelden-Knopf stünde
   auf dem Handy weiter neben dem Burger. Genau das ist beim Bauen passiert. */

/* ---------- Layout ---------- */
.container { max-width: 1240px; margin: 0 auto; padding: 32px 28px 80px; }
.footer {
  border-top: 1px solid var(--border);
  padding: 24px 28px 28px; color: var(--muted); font-size: 12.5px; text-align: center;
}
.footer-claim { font-weight: 600; color: var(--text-soft); letter-spacing: 0.2px; }
/* Meta- und Link-Zeile: die Trennung macht eine Hairline links am Element,
   nicht ein getipptes Zeichen. flex + row-gap faengt den Umbruch auf schmalen
   Screens ab; :first-child bekommt keine Linie, sonst haengt eine im Nichts. */
.footer-meta, .footer-links {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 0 18px; margin-top: 10px;
}
.footer-meta > *, .footer-links > * { position: relative; padding-left: 18px; }
.footer-meta > *::before, .footer-links > *::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 1px; height: 11px; margin-top: -5.5px;
  background: var(--border-strong);
}
.footer-meta > :first-child, .footer-links > :first-child { padding-left: 0; }
.footer-meta > :first-child::before, .footer-links > :first-child::before { display: none; }

/* Sobald die Fusszeile umbricht, fallen die Trennlinien weg. CSS kann das
   erste Element EINER ZEILE nicht ansprechen, nur das erste Element insgesamt
   -- nach einem Umbruch stuende links also eine Linie vor dem ersten Wort und
   haengt im Nichts. Unterhalb der Umbruchbreite trennt deshalb der Abstand
   allein; auf 375px liegen die Punkte ohnehin in drei ruhigen Zeilen. */
@media (max-width: 780px) {
  .footer-meta, .footer-links { gap: 7px 20px; }
  .footer-meta > *, .footer-links > * { padding-left: 0; }
  .footer-meta > *::before, .footer-links > *::before { display: none; }
}
.section-title {
  font-size: 15px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 1.2px;
  margin: 36px 0 14px;
  display: flex; align-items: baseline; gap: 12px;
}
.section-title .more { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--accent-ink); }

/* Prominente Abschnitts-Überschrift + Beschreibung (Startseite: Aktienübersicht) */
.section-head { margin: 44px 0 22px; }
.section-head h2 { font-size: 27px; font-weight: 700; letter-spacing: -0.4px; text-wrap: balance; }
.section-head p {
  margin-top: 12px; color: var(--muted);
  /* 65ch statt 72: ab etwa 75 Zeichen findet das Auge beim Zeilenwechsel den
     Anfang der naechsten Zeile schlechter wieder. */
  font-size: 15.5px; line-height: 1.65; max-width: 65ch; text-wrap: pretty;
}
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

/* ---------- Skyline-Hero (Startseite) ---------- */
/* Volle Breite, Skyline-Bild als Hintergrund. Der Overlay-Verlauf verdunkelt
   das Bild dezent (Text-Lesbarkeit) und blendet unten in die Seitenfarbe --bg
   über, sodass Bild und Seite nahtlos ineinander übergehen. */
.skyline-hero {
  position: relative;
  /* Fuellt den ersten Bildschirm (Viewport minus Topbar), sodass beim Laden nur
     Bild + etwas Hintergrund sichtbar sind; die Sektoren liegen darunter. */
  min-height: calc(100vh - var(--topbar-h, 66px));
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 72px 24px 96px;
  background-color: var(--bg);
  background-position: center center; background-size: cover; background-repeat: no-repeat;
  overflow: hidden;
}
@supports (height: 100dvh) {
  /* dvh faengt die ein-/ausblendende Adressleiste auf Mobil-Browsern ab */
  .skyline-hero { min-height: calc(100dvh - var(--topbar-h, 66px)); }
}
.skyline-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Das Skyline-Foto ist immer dunkel, der Seitengrund darunter je nach Modus
     hell oder dunkel. Der Verlauf muss deshalb zwei Aufgaben erfuellen: oben
     das Bild leicht abdunkeln, damit der weisse Titel darauf steht, und unten
     schnell in den Seitengrund kippen. Der Umschlag liegt bewusst spaet (ab
     72 %) und ist kurz: ein langer Uebergang erzeugt in der Mitte einen
     schmutzigen Graubereich.

     Die unteren drei Stopps standen fest auf dem alten hellen Pastellgrau.
     Im dunklen Modus lief das Bild dadurch in einen hellen Streifen aus, der
     mitten im Nichts endete. Jetzt zieht --bg-rgb den Ton aus dem Token, also
     aus demselben Wert, den auch die Seite darunter benutzt. */
  background: linear-gradient(
    180deg,
    rgba(28, 24, 20, 0.42) 0%,
    rgba(28, 24, 20, 0.30) 34%,
    rgba(28, 24, 20, 0.34) 62%,
    rgba(var(--bg-rgb), 0.30) 80%,
    rgba(var(--bg-rgb), 0.86) 92%,
    var(--bg) 100%                       /* voll deckend -> nahtloser Übergang in die Seite */
  );
}
.skyline-hero-inner { position: relative; z-index: 2; max-width: 720px; }

.hero-brand {
  font-size: 62px; font-weight: 800; letter-spacing: 11px;
  color: #fff; padding-left: 11px;       /* Sperrung hinter dem letzten Buchstaben optisch ausgleichen */
  margin-bottom: 20px; text-shadow: 0 2px 34px rgba(0, 0, 0, 0.55);
}
/* ACHTUNG, nicht auf --text/--muted umstellen: Diese Zeilen liegen auf dem
   dunklen Skyline-Foto, nicht auf dem Seitengrund. Das Foto ist in BEIDEN
   Modi dunkel, die Tokens wechseln aber mit dem Modus -- im hellen Modus
   waere --text fast schwarz auf dunklem Foto, im dunklen Modus zwar hell,
   aber dann haengt die Lesbarkeit an einer Einstellung, die mit dem Bild
   nichts zu tun hat. Die Werte bleiben deshalb bewusst fest und hell. */
/* text-wrap: balance verteilt eine Ueberschrift gleichmaessig auf ihre Zeilen,
   statt die erste vollzulaufen und ein einzelnes Wort auf der letzten stehen
   zu lassen. Greift nur bis etwa vier Zeilen, genau der Fall hier. */
.hero-headline {
  font-size: 31px; font-weight: 700; line-height: 1.25; letter-spacing: -0.3px;
  color: #ffffff; text-shadow: 0 2px 22px rgba(0, 0, 0, 0.6);
  text-wrap: balance;
}
.hero-sub {
  margin: 14px auto 0; max-width: 560px;
  font-size: 16px; color: rgba(255, 255, 255, 0.82); text-shadow: 0 1px 14px rgba(0, 0, 0, 0.65);
  text-wrap: pretty;   /* verhindert nur das einzelne Wort am Absatzende */
}

/* Primaerer CTA: Orange statt Weiss. Auf dem dunklen Foto ist Weiss zwar
   kontraststark, aber es sagt nichts ueber die Marke. Orange traegt hier
   beides, und der weisse Text darauf liegt mit --accent-ink bei 5,2:1. */
.hero-cta {
  display: inline-block; margin-top: 32px;
  padding: 14px 34px; border-radius: 10px;
  background: var(--accent); color: var(--auf-akzent);
  font-size: 15px; font-weight: 700; letter-spacing: 0.2px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
  transition: transform 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              box-shadow 0.22s cubic-bezier(0.32, 0.72, 0, 1),
              background 0.22s cubic-bezier(0.32, 0.72, 0, 1);
}
.hero-cta:hover {
  transform: translateY(-2px); background: var(--accent-ink);
  box-shadow: 0 12px 38px rgba(0, 0, 0, 0.45);
}
.hero-cta:active { transform: translateY(0) scale(0.985); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); }

/* Sprungziel unter der klebrigen Topbar sauber positionieren */
#sektoren { scroll-margin-top: calc(var(--topbar-h, 66px) + 20px); }

@media (max-width: 640px) {
  .skyline-hero { padding: 56px 20px 80px; }
  .hero-brand { font-size: 40px; letter-spacing: 7px; padding-left: 7px; margin-bottom: 14px; }
  .hero-headline { font-size: 22px; }
  .hero-sub { font-size: 14.5px; }
  .hero-cta { margin-top: 26px; padding: 13px 30px; }
}

/* ---------- Account (Topbar) ---------- */
.account { display: flex; align-items: center; gap: 10px; padding-left: 16px; border-left: 1px solid var(--border); }
.account-menu { position: relative; }
.account-avatar {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--accent-ink); color: var(--auf-akzent);
  border: none; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: filter 0.15s;
}
.account-avatar:hover { filter: brightness(1.1); }
.account-dropdown {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + 10px); right: 0;
  min-width: 170px; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; overflow: hidden; box-shadow: 0 8px 24px rgba(var(--schatten-rgb), 0.054);
  z-index: 50;
}
.account-menu.open .account-dropdown { display: flex; }
.account-dropdown-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; font: inherit;
  color: var(--muted); font-size: 13.5px; padding: 10px 14px; cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.account-dropdown-item:hover { color: var(--text); background: var(--bg-soft); }
.account-dropdown form { display: contents; }
.account-login {
  padding: 7px 16px; border-radius: 8px;
  background: var(--accent-ink); color: var(--auf-akzent); font-weight: 600; font-size: 13.5px;
}
.account-login:hover { filter: brightness(1.1); }

/* ---------- Mobil-Umschaltpunkt ---------- */
/* Bewusst HIER und nicht oben beim Burger-Knopf: Diese Regeln müssen NACH den
   Definitionen stehen, die sie überschreiben (.topbar, .account, .container).
   Bei gleicher Spezifität gewinnt in CSS die spätere Regel, und eine
   Media-Query ändert daran nichts. */
@media (max-width: 900px) {
  /* flex-wrap ist der Kern des Ganzen: Das aufgeklappte Menü rutscht damit als
     volle Zeile UNTER Logo und Suche, ohne absolute Positionierung. Absolut
     positionierte Menüs geraten hier leicht hinter den Chart-Canvas oder
     werden von der sticky Topbar abgeschnitten. */
  .topbar { flex-wrap: wrap; gap: 12px; padding: 10px 16px; }
  .search { max-width: none; }
  .nav-toggle { display: flex; }

  /* Zu und aus dem Fluss genommen. Sichtbar erst, wenn .topbar die Klasse
     .nav-open trägt (gesetzt von app.js). */
  .topbar nav { display: none; }
  .topbar.nav-open nav {
    display: flex; flex-direction: column; gap: 2px;
    order: 10; width: 100%; margin-left: 0;
    padding-top: 10px; border-top: 1px solid var(--border);
  }
  /* 44px Höhe ist Apples Mindestmaß für ein Touch-Ziel — darunter trifft man
     mit dem Daumen daneben. */
  .topbar.nav-open nav a { padding: 11px 12px; font-size: 15px; min-height: 44px; display: flex; align-items: center; }

  .account { display: none; }        /* Konto steckt im Menü (.nav-konto-mobil) */
  .topbar.nav-open .nav-konto-mobil {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border);
  }
  .nav-konto-mobil a, .nav-konto-mobil button {
    display: flex; align-items: center; min-height: 44px;
    padding: 11px 12px; border-radius: 8px;
    background: none; border: none; font: inherit; font-size: 15px; font-weight: 500;
    color: var(--muted); text-align: left; cursor: pointer; width: 100%;
  }
  .nav-konto-mobil a:hover, .nav-konto-mobil button:hover { color: var(--text); background: var(--bg-soft); }

  /* iOS zoomt beim Antippen automatisch in jedes Eingabefeld mit weniger als
     16px Schriftgröße — die Seite bleibt danach verschoben. 16px verhindert
     das, ohne das Zoomen der Seite selbst zu sperren. */
  input, select, textarea { font-size: 16px !important; }
}

@media (max-width: 560px) {
  /* Auf einem iPhone-Display konkurrieren Wortmarke und Suchfeld um denselben
     Platz. Die Marke bleibt als Monogramm erkennbar, das Suchfeld ist die
     wichtigere Funktion. */
  .brand .brand-word, .brand .brand-sep, .brand .brand-beta { display: none; }
  .container { padding: 22px 16px 64px; }
}

/* ---------- Auth-Seiten (Login / Registrierung) ---------- */
.auth-wrap { max-width: 400px; margin: 40px auto 0; }
.auth-card { padding: 28px; }
.auth-card h1 { font-size: 22px; font-weight: 700; margin-bottom: 18px; }
.auth-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.auth-field label { font-size: 12.5px; font-weight: 600; color: var(--muted); }
.auth-field input {
  padding: 10px 12px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 14px;
}
.auth-field input:focus { outline: none; border-color: var(--accent); }

/* Name vergeben: Feld pulsiert dezent in Akzentfarbe, solange der Vorschlag dasteht */
@keyframes input-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--accent-rgb), 0); border-color: var(--accent); }
  50%      { box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.55); border-color: var(--accent); }
}
.auth-field input.input-glow {
  animation: input-glow 1.8s ease-in-out infinite;
  border-bottom-left-radius: 0;   /* unten eckig, damit die Subbox bündig anschließt */
  border-bottom-right-radius: 0;
}
/* Namensvorschlag als Subbox unter dem Input — visuell verbunden */
.name-suggestion {
  margin-top: -1px;   /* Borders überlappen, optisch nahtlos */
  padding: 12px 16px;
  background: rgba(var(--accent-rgb), 0.12);   /* leicht helleres Blau */
  border: 1px solid var(--accent);
  border-top: none;   /* oben kein Border, damit's verbunden wirkt */
  border-radius: 0 0 var(--radius) var(--radius);   /* nur unten gerundet */
  font-size: 14px;
  text-align: center;
}
.name-suggestion .btn-link { color: var(--accent-ink); font-weight: 500; }

/* Passwort-Stärke-Indikator */
.pw-meter { margin-top: 8px; }
.pw-bars { display: flex; gap: 6px; }
.pw-bars span {
  flex: 1; height: 5px; border-radius: 3px;
  background: var(--border); transition: background 0.15s;
}
/* Anzahl gefüllter Balken je Stufe (1 / 2 / 3), Farbe pro Stufe */
.pw-meter.weak   .pw-bars span:nth-child(1)      { background: var(--bad); }
.pw-meter.medium .pw-bars span:nth-child(-n+2)   { background: var(--warn); }
.pw-meter.strong .pw-bars span                   { background: var(--good); }
.pw-meter-row {
  display: flex; justify-content: space-between; gap: 10px;
  margin-top: 6px; font-size: 11.5px;
}
.pw-label { font-weight: 700; }
.pw-meter.weak   .pw-label { color: var(--bad); }
.pw-meter.medium .pw-label { color: var(--warn); }
.pw-meter.strong .pw-label { color: var(--good); }
.pw-hint { color: var(--muted); text-align: right; }
.btn-block:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-block { display: block; width: 100%; padding: 11px 0; font-size: 14px; margin-top: 4px; }
.auth-alt { margin-top: 16px; text-align: center; font-size: 13px; color: var(--muted); }
.auth-alt a { color: var(--accent-ink); font-weight: 600; }
.auth-error {
  background: var(--bad-soft); border: 1px solid var(--bad);
  color: var(--bad); padding: 10px 12px; border-radius: 8px;
  font-size: 13px; margin-bottom: 14px;
}
.auth-error .btn-link { display: block; margin-top: 6px; color: var(--accent-ink); }
.auth-note { margin-top: 14px; font-size: 11.5px; color: var(--muted); }
.verify-code-input {
  text-align: center; font-size: 24px; font-weight: 700; letter-spacing: 10px;
}
.btn-link {
  background: none; border: none; padding: 0; font: inherit;
  color: var(--accent-ink); font-weight: 600; cursor: pointer;
}
.btn-link:hover { text-decoration: underline; }
.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 16px 0; color: var(--muted); font-size: 12px;
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* Weiss auf Weiss verschwindet: Seit die Seite hell ist, braucht der
   Google-Knopf einen Rand. Fuellung und Textfarbe bleiben Googles Vorgabe. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 11px 0; border-radius: 8px;
  background: #fff; color: #1f1f1f; font-weight: 600; font-size: 14px;
  border: 1px solid var(--border-strong);
  transition: background 0.15s;
}
.btn-google:hover { background: var(--bg-soft); }

/* ---------- Watchlist ---------- */
.watch-add { display: flex; gap: 10px; margin: 16px 0 20px; max-width: 440px; }
.watch-add input {
  flex: 1; padding: 10px 12px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 14px;
}
.watch-add input:focus { outline: none; border-color: var(--accent); }

.watch-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.watch-table th {
  text-align: left; padding: 10px 12px;
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--muted); border-bottom: 1px solid var(--border);
}
.watch-table td { padding: 12px; border-bottom: 1px solid var(--bg-soft); }
.watch-table tr:last-child td { border-bottom: none; }
.watch-table .num { text-align: right; }
.watch-ticker { font-weight: 600; }
.watch-ticker:hover { color: var(--accent-ink); }
.watch-remove {
  background: none; border: none; color: var(--muted);
  font-size: 17px; line-height: 1; padding: 4px 9px; border-radius: 6px; cursor: pointer;
}
.watch-remove:hover { color: var(--bad); background: var(--bg-soft); }
.watch-empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.watch-empty-actions { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }

.suggest-card { margin-bottom: 20px; }
.suggest-head { padding: 16px 4px 6px; }
.suggest-head h2 { font-size: 16px; font-weight: 700; }
.suggest-head .sub { color: var(--muted); font-size: 13px; margin-top: 4px; }
.suggest-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 2px; padding: 4px 0 12px;
}
.suggest-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px;
}
.suggest-info { display: flex; flex-direction: column; min-width: 0; }
.suggest-name {
  color: var(--muted); font-size: 12.5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.suggest-star { margin-top: 0; padding: 5px 10px; font-size: 15px; gap: 0; }

/* Stern-Button auf der Aktienseite */
.watch-star {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 10px;
  background: var(--card); border: 1px solid var(--border); border-radius: 8px;
  color: var(--muted); padding: 7px 14px; font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.watch-star:hover { color: var(--text); border-color: var(--accent); }
.watch-star.on { color: var(--warn); border-color: var(--warn); }

/* ---------- Page-Head (Unterseiten) ---------- */
.page-head { padding: 8px 0 4px; }
.page-head h1 { font-size: 28px; font-weight: 700; }
.page-head .sub { color: var(--muted); margin-top: 6px; }
.warn-text { color: var(--warn); }

/* Sub-Tabs unter einem Seitentitel (z.B. News: "Alle News" / "Sektor-Signale") */
.subtabs { display: flex; gap: 4px; margin-top: 14px; }
.subtabs a {
  padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 600;
  color: var(--muted); border: 1px solid var(--border);
}
.subtabs a:hover { color: var(--text); background: var(--bg-soft); }
.subtabs a.active { color: var(--text); background: var(--card); border-color: var(--accent); }

/* ---------- Cards ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.card h3 { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.grid { display: grid; gap: 14px; }

/* ---------- Feature-Sektionen (Startseite) ---------- */
/* Abwechselnd Text und Bild-Platzhalter (Muster aus dem Startseiten-Entwurf).
   Standard: Text links / Bild rechts. .reverse dreht die Spalten. */
.features { display: flex; flex-direction: column; gap: 72px; padding: 20px 0 64px; }

.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
/* Text steht immer zuerst im DOM (gut fuer Screenreader). Bei .reverse rutscht
   das Bild per order optisch nach links, ohne die Lesereihenfolge zu aendern. */
.feature.reverse .feature-media { order: -1; }

/* Gestapelte Variante: eine Spalte, Text schmal gehalten, Kachel darunter ueber
   die volle Breite. Zweite Layout-Familie neben dem Split, damit die Startseite
   nicht dreimal dieselbe Figur zeigt. */
.feature.stacked { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; }
.feature.stacked .feature-text { max-width: 62ch; }
.feature.stacked .feature-body { margin-left: auto; margin-right: auto; max-width: 62ch; }
.feature.stacked .feature-media { width: 100%; text-align: left; }

.feature-title {
  font-size: 27px; font-weight: 700; line-height: 1.22; letter-spacing: -0.4px;
  text-wrap: balance;
}
.feature-body {
  margin-top: 16px; color: var(--muted);
  font-size: 15.5px; line-height: 1.65; max-width: 48ch; text-wrap: pretty;
}

/* Bild-Platzhalter: dezenter Verlauf wie die Sektor-Thumbnails, mit schwach
   angedeutetem V/Λ-Monogramm. Spaeter ersetzt ein <img> den Platzhalter. */
.feature-media {
  aspect-ratio: 4 / 3;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: linear-gradient(135deg, var(--bg-soft) 0%, var(--card-hover) 55%, var(--accent-soft) 100%);
  display: flex; align-items: center; justify-content: center;
}
.feature-mark path { stroke: var(--accent); stroke-width: 4.5; opacity: 0.3; }

/* ---------- Schaufenster in den Feature-Sektionen ----------
   Kleine, funktionslose Nachbauten der echten Oberflaeche (News, DCF,
   Kalender). Sie tragen BEWUSST keine Beschriftung wie "Beispiel" -- das
   Bild soll fuer sich sprechen; die Ehrlichkeit steckt darin, dass sie
   aria-hidden sind und nichts Anklickbares vortaeuschen.
   Eigene .demo-*-Klassen statt der echten UI-Klassen: sonst veraendert
   jede spaetere Aenderung an News- oder Kalenderseite still die Startseite. */
.feature-media.demo {
  aspect-ratio: auto;              /* Hoehe kommt vom Inhalt, nicht vom Rahmen */
  display: block; padding: 16px 18px 18px;
  background: linear-gradient(150deg, var(--bg-soft) 0%, var(--card) 70%);
  font-size: 12.5px;
}
.demo-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; padding-bottom: 10px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.demo-titel { font-size: 14px; font-weight: 700; letter-spacing: -0.2px; }
.demo-meta { color: var(--muted); font-size: 11px; font-weight: 600; }

/* --- News --- */
.demo-news { display: flex; flex-direction: column; gap: 12px; }
.demo-news-row { display: grid; gap: 5px; }
.demo-news-row p { color: var(--text); line-height: 1.5; margin: 0; }
.demo-sig {
  justify-self: start; padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 800; letter-spacing: 0.3px;
  border: 1px solid currentColor;
}
.demo-sig.up { color: var(--good); }
.demo-sig.down { color: var(--bad); }
/* Ticker-Reihe: die Tickersymbole standen mit Mittelpunkten getrennt in einer
   Zeichenkette. Jetzt eigene Elemente mit Abstand -- das trennt genauso, und
   ein Screenreader liest drei Symbole statt einer Kette mit Satzzeichen. */
.demo-tags {
  display: flex; flex-wrap: wrap; gap: 4px 10px;
  color: var(--muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.3px;
}
.demo-tags i { font-style: normal; }

/* --- DCF --- */
.demo-annahmen { display: flex; gap: 8px; margin-bottom: 12px; }
.demo-annahmen span {
  flex: 1; display: flex; flex-direction: column; gap: 1px;
  padding: 7px 9px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--border);
  color: var(--muted); font-size: 10px; font-weight: 600;
}
.demo-annahmen b { color: var(--text); font-size: 14px; letter-spacing: -0.3px; }
.demo-tab {
  width: 100%; border-collapse: collapse; margin-bottom: 10px;
  font-variant-numeric: tabular-nums; font-size: 11.5px;
}
.demo-tab th {
  padding: 0 0 5px; text-align: right; color: var(--muted);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
}
.demo-tab th:first-child, .demo-tab td:first-child { text-align: left; }
.demo-tab td { padding: 2.5px 0; text-align: right; color: var(--muted); }
.demo-tab td:last-child { color: var(--text); font-weight: 600; }
.demo-zeile {
  display: flex; justify-content: space-between; gap: 12px; padding: 3px 0;
  color: var(--muted); font-variant-numeric: tabular-nums; font-size: 11.5px;
}
.demo-zeile.summe {
  margin-top: 4px; padding-top: 7px; border-top: 1px solid var(--border);
  color: var(--text); font-weight: 700;
}
.demo-ergebnis {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding: 9px 12px; border-radius: 9px;
  background: rgba(var(--accent-rgb), 0.1); border: 1px solid var(--accent);
  color: var(--muted); font-size: 11.5px; font-weight: 600;
}
.demo-ergebnis strong {
  color: var(--accent-ink); font-size: 19px; letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
}

/* --- Kalender --- */
.demo-kal-tage, .demo-kal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.demo-kal-tage {
  margin-bottom: 4px; color: var(--muted);
  font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-align: center;
}
.demo-kal span {
  position: relative; display: grid; place-items: center;
  aspect-ratio: 1 / 1; border-radius: 7px;
  background: var(--bg); color: var(--muted);
  font-size: 11px; font-variant-numeric: tabular-nums;
}
.demo-kal .we { opacity: 0.45; }
/* Der Punkt markiert einen Termin an diesem Tag -- wie im echten Kalender. */
.demo-kal .hat::after {
  content: ""; position: absolute; bottom: 4px;
  width: 4px; height: 4px; border-radius: 50%;
}
.demo-kal .hat { color: var(--text); font-weight: 700; }
.demo-kal .gruen::after { background: var(--good); }
.demo-kal .blau::after { background: var(--termin); }
.demo-kal .gelb::after { background: var(--warn); }
.demo-kal .heute {
  background: var(--accent-ink); color: var(--auf-akzent); font-weight: 800;
}
.demo-termine {
  display: flex; flex-direction: column; gap: 7px;
  margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--border);
}
.demo-termin {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 11.5px; white-space: nowrap;
}
.demo-termin i { width: 6px; height: 6px; flex: none; border-radius: 50%; }
.demo-termin i.gruen { background: var(--good); }
.demo-termin i.blau { background: var(--termin); }
.demo-termin i.gelb { background: var(--warn); }
.demo-termin b { color: var(--text); font-weight: 700; letter-spacing: 0.2px; }
.demo-termin span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.demo-termin em {
  margin-left: auto; color: var(--muted); font-style: normal;
  font-size: 10.5px; font-variant-numeric: tabular-nums;
}

/* Schmale Screens: gestapelt, Bild immer unter dem Text */
@media (max-width: 900px) {
  .features { gap: 48px; }
  .feature { grid-template-columns: 1fr; gap: 24px; }
  .feature.reverse .feature-media { order: 0; }
  /* Unter 900px sind ohnehin alle Sektionen einspaltig. Die zentrierte
     Ausrichtung der gestapelten Variante faellt hier weg, sonst steht eine
     von dreien mittig und die anderen links. */
  .feature.stacked { justify-items: stretch; text-align: left; }
  .feature-media { aspect-ratio: 16 / 9; }
  /* Die Schaufenster behalten ihre Inhaltshoehe -- 16/9 wuerde sie stauchen. */
  .feature-media.demo { aspect-ratio: auto; }
  .feature-title { font-size: 23px; }
}

/* ---------- Sektor-Grid (Startseite) ---------- */
.sector-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }

.sector-card {
  padding: 0;                                  /* Bild läuft bis an den Kartenrand */
  transition: background 0.6s ease, border-color 0.6s ease,
              transform 0.6s cubic-bezier(0.22, 0.6, 0.3, 1), box-shadow 0.6s ease;
  cursor: pointer;
}
.sector-card:hover {
  background: var(--card-hover);
  border-color: var(--accent);
  transform: translateY(-2px);                 /* dezentes Anheben — wirkt hochwertiger */
  box-shadow: 0 10px 28px rgba(var(--schatten-rgb), 0.105);
}

/* Bildfläche: Sektor-Icon (static/sectors/<slug>.png) mittig auf Verlaufshintergrund. */
/* Die Bildflaeche bleibt DUNKEL, auch wenn die Seite hell ist. Grund: die
   zwoelf Sektor-Icons in static/sectors/ sind reinweisse Silhouetten
   (gemessene Helligkeit 250-255), die auf hellem Grund verschwinden wuerden.
   Alternative, falls die Kacheln spaeter ganz hell werden sollen: die Icons
   einfaerben, das hiesse aber zwoelf Dateien neu erzeugen.

   Der Verlauf war warmes Braun, abgestimmt auf das fruehere Pastellgrau.
   Seit die Grau-Familie kuehl ist, stand hier der einzige warme Block der
   Seite -- elf braune Kacheln auf silbernem Grund. Die Toene sind deshalb
   ins Kuehle gezogen, bleiben aber gleich dunkel: die weissen Icons liegen
   darauf bei 11,3:1 bis 15,8:1, vorher waren es 11,4:1 bis 15,1:1. */
.sector-thumb {
  position: relative; overflow: hidden;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #1e232b 0%, #262e3a 58%, #313b4a 100%);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
}
.sector-icon {
  height: 58%; width: auto; max-width: 72%;
  object-fit: contain;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));
  transition: transform 0.6s cubic-bezier(0.22, 0.6, 0.3, 1);
}
.sector-card:hover .sector-icon { transform: scale(1.06); }

.sector-body { padding: 13px 16px 14px; }
.sector-name { font-weight: 600; font-size: 14.5px; }
.sector-meta { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

/* News-Kacheln: Pfeile neben statt unter dem Sektornamen, Name größer */
.news-sector-card .sector-body { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.news-sector-card .sector-name { font-size: 18px; line-height: 1.25; }
.news-sector-card .sector-meta { margin-top: 0; flex-shrink: 0; align-items: center; }
.news-sector-card .sector-signal-counts { align-items: center; line-height: 1; }
.news-sector-card .count-bull, .news-sector-card .count-bear { display: inline-flex; align-items: center; }
/* optischer Ausgleich: Ziffern+Dreiecke haben volle Versalhoehe und wirken
   trotz mittiger Box hoeher als die Kleinschrift des Namens -> leicht tiefer. */
.news-sector-card .sector-signal-counts { transform: translateY(1.5px); }
.sector-change { font-size: 13px; font-weight: 600; }
.up { color: var(--good); } .down { color: var(--bad); }

/* ---------- Stock page ---------- */
.stock-header { display: flex; justify-content: space-between; align-items: flex-end; padding: 8px 0 20px; flex-wrap: wrap; gap: 12px; }
.stock-header h1 { font-size: 30px; font-weight: 700; }
.stock-price-block { text-align: right; }
.stock-price { font-size: 34px; font-weight: 800; }
.muted { color: var(--muted); font-size: 13.5px; }

.chart { height: 380px; }

/* ---------- Chart: Werkzeuge, Event-Badges, Zeichenebene ---------- */

/* Drei deckungsgleiche Ebenen: Canvas (Chart), SVG (Zeichnungen), HTML (Badges). */
.chart-wrap { position: relative; }
/* Der Chart bewegt sich nur mit dem Hand-Werkzeug. Solange das nicht aktiv
   ist, gehört jede Wischgeste der SEITE -- auf dem Handy sonst der Grund,
   warum man beim Berühren des Charts ungewollt den Ausschnitt verschiebt. */
.chart-wrap.is-pan .chart { touch-action: none; cursor: grab; }
.chart-wrap.is-pan .chart:active { cursor: grabbing; }
/* Und umgekehrt: im Zeichenmodus gehört die Geste dem Chart, sonst scrollt
   die Seite unter dem Finger weg, statt dass eine Linie entsteht. */
.chart-wrap.is-drawing .chart-draw { touch-action: none; }
.chart-wrap > .chart-draw, .chart-wrap > .chart-badges, .chart-wrap > .chart-notes {
  position: absolute; inset: 0;
  /* width/height explizit: ein <svg> ohne Maße fällt sonst auf seine
     Ersatzgröße 300x150 zurück -- inset allein streckt es nicht. */
  width: 100%; height: 100%;
}
.stock-beschreibung { margin: 14px 0 0; line-height: 1.5; }
/* z-index zwingend: Lightweight Charts stapelt seine Canvas-Ebenen selbst,
   ohne das hier liegt der Chart ÜBER den Overlays und fängt jeden Klick ab. */
.chart-draw { pointer-events: none; z-index: 5; }   /* per JS aktiviert, wenn ein Werkzeug läuft */
.chart-notes { pointer-events: none; z-index: 8; }  /* nur die Zettel selbst sind klickbar */
.chart-badges { pointer-events: none; z-index: 10; } /* nur die Badges selbst sind klickbar */

/* Zeitraum-Vorauswahl unter der Werkzeugleiste */
.chart-leiste {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin: 0 0 10px;
}
.chart-ranges { display: flex; gap: 4px; }
.chart-ranges .range {
  padding: 4px 11px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
  font-size: 12px; font-weight: 700; letter-spacing: 0.2px;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chart-ranges .range:hover { color: var(--text); border-color: var(--muted); }
.chart-ranges .range.is-active {
  background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); color: var(--accent-ink);
}
.chart-ranges .range:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.draw-status { font-size: 11.5px; }
.draw-status.fehler { color: var(--bad); }

/* Auf dem Handy braucht die Werkzeugleiste eine eigene Zeile -- sonst
   quetscht sie den Titel "Kurs & Events" auf zwei Zeilen. */
@media (max-width: 640px) {
  .chart-card .card-head { flex-wrap: wrap; }
  .chart-card .chart-tools { width: 100%; justify-content: space-between; }
  .chart-tools .tool { width: 34px; height: 32px; }   /* Fingerkuppen-tauglich */
  .chart-ranges { width: 100%; }
  .chart-ranges .range { flex: 1; padding: 6px 4px; }
}

.chart-tools { display: flex; gap: 4px; }
.chart-tools .tool {
  width: 30px; height: 28px; display: grid; place-items: center; cursor: pointer;
  background: transparent; border: 1px solid transparent; border-radius: 7px;
  color: var(--muted); transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.chart-tools .tool svg {
  width: 15px; height: 15px; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round;
}
.chart-tools .tool[data-tool="cursor"] svg { fill: currentColor; stroke-width: 1; }
.chart-tools .tool:hover { background: var(--bg-soft); color: var(--text); }
.chart-tools .tool.is-active {
  background: rgba(var(--accent-rgb), 0.14); border-color: var(--accent); color: var(--accent-ink);
}
.chart-tools .tool-text {
  width: auto; padding: 0 7px; font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px;
}
.chart-tools .tool-danger:hover { color: var(--bad); }
.chart-tools .tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Prozent-Pille am Event, mit i-Symbol und ausfahrender Schlagzeile */
.ev-badge {
  position: absolute; top: 0; left: 0; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 4px 2px 7px; border-radius: 999px; white-space: nowrap;
  font-size: 11.5px; font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--bg); border: 1px solid currentColor;
}
.ev-badge.up { color: var(--good); }
.ev-badge.down { color: var(--bad); }
.ev-info {
  width: 15px; height: 15px; flex: none; cursor: pointer; padding: 0;
  display: grid; place-items: center; border: none; border-radius: 50%;
  color: var(--bg);
  font: 700 10px/1 "Times New Roman", Georgia, serif; font-style: italic;
}
/* Die Farbe muss von der Pille kommen, NICHT über currentColor: im selben
   Block würde currentColor auf das hier gesetzte color (dunkel) auflösen
   -- das i wäre dunkel auf dunkel und damit unsichtbar. */
.ev-badge.up .ev-info { background: var(--good); }
.ev-badge.down .ev-info { background: var(--bad); }
.ev-badge:hover .ev-info { filter: brightness(1.15); }

/* Tooltip: erscheint bei Hover auf der Pille oder festgeklickt (.pinned).
   Die 10px Rand oben bilden die Brücke, damit der Zeiger die Lücke zwischen
   Pille und Tooltip überqueren kann, ohne dass er zuklappt. */
.ev-tip {
  position: absolute; left: 50%; top: 100%; z-index: 40;
  transform: translateX(-50%); padding-top: 10px;
  width: max-content; max-width: 290px;
  opacity: 0; visibility: hidden; transition: opacity 0.12s;
}
.ev-badge:hover .ev-tip, .ev-badge.pinned .ev-tip { opacity: 1; visibility: visible; }
.ev-badge.down .ev-tip { top: auto; bottom: 100%; padding: 0 0 10px; }
.tip-link {
  display: block; padding: 9px 11px; border-radius: 9px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 10px 28px rgba(var(--schatten-rgb), 0.14);
  color: var(--text); font-weight: 500; white-space: normal;
}
a.tip-link:hover { border-color: var(--accent); }
.tip-headline { display: block; font-size: 12.5px; line-height: 1.45; }
.tip-meta {
  display: flex; justify-content: space-between; gap: 10px; margin-top: 6px;
  color: var(--muted); font-size: 11px; font-weight: 600;
}
a.tip-link .tip-go { color: var(--accent-ink); white-space: nowrap; }

/* Gezeichnete Objekte */
.draw-line { stroke: var(--accent); stroke-width: 1.5; }
.draw-line.hline { stroke-dasharray: 5 4; }
.draw-punkt { fill: var(--accent); }
.draw-label {
  fill: var(--accent); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; paint-order: stroke;
  stroke: var(--bg); stroke-width: 3.5px; stroke-linejoin: round;
}
/* Ausgewähltes Objekt: kräftiger, damit klar ist, was der X-Knopf trifft. */
.draw-line.is-selected { stroke-width: 3; stroke-dasharray: none; }
.draw-punkt.is-selected { r: 5; }

/* Unsichtbare Trefferfläche über jeder Linie. pointer-events wird hier
   ausdrücklich gesetzt: Das <svg> darüber steht im Cursor-Modus auf
   pointer-events:none (damit die Seite scrollen kann) -- ein Kind darf sich
   die Klicks trotzdem zurückholen, und nur das soll es auch. */
.draw-hit {
  stroke: transparent; stroke-width: 16; fill: none;
  pointer-events: stroke; cursor: pointer;
}

/* Knopf zum Löschen GENAU dieses einen Objekts (statt des ganzen Charts) */
.draw-delete {
  position: absolute; top: 0; left: 0; z-index: 35; pointer-events: auto;
  padding: 4px 10px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--card); border: 1px solid var(--bad); color: var(--bad);
  font-size: 11.5px; font-weight: 700;
  box-shadow: 0 6px 18px rgba(var(--schatten-rgb), 0.14);
}
.draw-delete:hover { background: var(--bad); color: var(--bg); }

/* Kurznotiz im Chart: ein kleiner Zettel an der Kerze, bewusst kurz und
   endlich -- im Gegensatz zur Preislinie, die über den ganzen Chart läuft. */
.chart-note {
  position: absolute; top: 0; left: 0; pointer-events: auto; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  max-width: 190px; padding: 4px 9px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 6px 16px rgba(var(--schatten-rgb), 0.135);
  font-size: 11.5px; line-height: 1.35; color: var(--text);
}
.chart-note[hidden] { display: none; }
.chart-note:hover { border-color: var(--accent); }
.chart-note.is-selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.3); }
.note-dot { width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--warn); }
.note-text { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; }

/* Eingabefeld für eine neue Kurznotiz */
.note-editor {
  position: absolute; top: 0; left: 0; z-index: 45; pointer-events: auto;
  width: 220px; padding: 8px; border-radius: 10px;
  background: var(--card); border: 1px solid var(--accent);
  box-shadow: 0 12px 30px rgba(var(--schatten-rgb), 0.14);
}
.note-editor[hidden] { display: none; }
.note-editor textarea {
  width: 100%; resize: vertical; min-height: 46px; padding: 6px 8px;
  border-radius: 7px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px;
}
.note-editor-actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 7px; }
.note-btn {
  padding: 4px 10px; border-radius: 7px; cursor: pointer; font-size: 11.5px; font-weight: 700;
  background: transparent; border: 1px solid var(--border); color: var(--muted);
}
.note-btn:hover { color: var(--text); border-color: var(--muted); }
.note-btn.primary { background: var(--accent-ink); border-color: var(--accent-ink); color: var(--auf-akzent); }

/* Notizen zur Aktie */
.notiz-card .card-head { margin-bottom: 10px; }
.notiz-feld {
  width: 100%; min-height: 96px; resize: vertical; padding: 10px 12px;
  border-radius: 9px; border: 1px solid var(--border);
  background: var(--bg); color: var(--text);
  font: inherit; font-size: 13.5px; line-height: 1.55;
}
.notiz-feld:focus { outline: none; border-color: var(--accent); }

.mess-flaeche { fill: var(--good); fill-opacity: 0.1; }
.mess-flaeche.down { fill: var(--bad); }
.draw-line.mess { stroke-dasharray: 4 3; }
.draw-line.mess.up { stroke: var(--good); }
.draw-line.mess.down { stroke: var(--bad); }

/* Ergebnisfeld des Lineals */
.measure-box {
  position: absolute; top: 0; left: 0; z-index: 30; pointer-events: none;
  display: flex; align-items: baseline; gap: 9px; white-space: nowrap;
  padding: 5px 10px; border-radius: 8px;
  background: var(--card); border: 1px solid var(--border);
  box-shadow: 0 8px 22px rgba(var(--schatten-rgb), 0.14);
  font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.measure-box strong { font-size: 14px; }
.measure-box.up strong { color: var(--good); }
.measure-box.down strong { color: var(--bad); }
.measure-box.up { border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.measure-box.down { border-color: color-mix(in srgb, var(--bad) 45%, transparent); }

/* Das hidden-Attribut wirkt sonst nicht: Der Browser-Standard
   [hidden] { display: none } verliert gegen jede Klassenregel, die
   display setzt -- und beide Elemente hier tun das (flex/inline-flex). */
.measure-box[hidden], .ev-badge[hidden] { display: none; }
.cal-weekdays[hidden], .cal-grid[hidden], .cal-legend[hidden] { display: none; }

/* Marktzustand: offen / Vor- bzw. Nachbörse / geschlossen */
.market-badge {
  display: inline-flex; align-items: center; gap: 5px; vertical-align: middle;
  margin-left: 9px; padding: 2px 8px 2px 6px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.2px;
  border: 1px solid currentColor; color: var(--muted);
}
.market-dot {
  width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none;
}
.market-badge.open { color: var(--good); }
.market-badge.open .market-dot { animation: live-pulse 2.4s ease-in-out infinite; }
.market-badge.pre, .market-badge.post { color: var(--warn); }
.market-badge.closed { color: var(--muted); border-color: var(--border); }
@keyframes live-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .market-dot { animation: none !important; } }

.stock-change { font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.chart-loading {
  height: 100%; display: flex; align-items: center; justify-content: center;
  gap: 10px; color: var(--muted);
}
.chart-legend { display: flex; gap: 14px; font-size: 12px; color: var(--muted); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 4px; }

.fineprint { color: var(--muted); font-size: 11.5px; margin-top: 12px; }

/* ---------- Model cards ---------- */
.model-card .verdict { font-weight: 700; font-size: 15px; margin: 2px 0 8px; }
.tone-good { color: var(--good); } .tone-warn { color: var(--warn); }
.tone-bad { color: var(--bad); } .tone-neutral { color: var(--muted); } .tone-info { color: var(--accent-ink); }

.model-fv { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.model-fv .fv { font-size: 24px; font-weight: 800; }
.model-fv .upside { font-size: 13px; font-weight: 700; }

.kv { width: 100%; font-size: 12.5px; border-collapse: collapse; }
.kv td { padding: 3px 0; border-bottom: 1px solid var(--bg-soft); vertical-align: top; }
.kv td:first-child { color: var(--muted); padding-right: 12px; }
.kv td:last-child { text-align: right; font-weight: 500; }

.model-notes { margin-top: 10px; color: var(--muted); font-size: 11.5px; }
.model-notes p { margin-top: 4px; }

.btn {
  padding: 7px 14px; background: var(--accent-ink); border: none; border-radius: 7px;
  color: #fff; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
/* Die Kurve (0.32, 0.72, 0, 1) startet schnell und laeuft weich aus, statt
   gleichmaessig durchzulaufen wie ease. Der Unterschied ist klein und genau
   deshalb wirksam: die Bewegung fuehlt sich nach Gewicht an, nicht nach
   Zeitschaltuhr. Dieselbe Kurve traegt Sprunglink und Sektor-Karten. */
.btn { transition: filter 0.16s cubic-bezier(0.32, 0.72, 0, 1), transform 0.1s cubic-bezier(0.32, 0.72, 0, 1); }
.btn:hover { filter: brightness(1.1); }
/* Rueckmeldung beim Druecken. Ohne sie bleibt ein Knopf beim Klick voellig
   stumm -- man erfaehrt erst am Ergebnis, ob er getroffen wurde. */
.btn:active { transform: translateY(1px) scale(0.985); }
.btn-ghost { background: var(--bg-soft); color: var(--text); border: 1px solid var(--border); }

/* ---------- Kalender (Monatsansicht) ---------- */
.cal-head { display: flex; justify-content: space-between; align-items: center; margin: 12px 0 18px; }
.cal-title { font-size: 22px; font-weight: 700; text-transform: capitalize; }
.cal-nav { display: flex; gap: 8px; }
.cal-btn {
  padding: 7px 14px; background: var(--card); border: 1px solid var(--border);
  border-radius: 8px; color: var(--text); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.cal-btn:hover { background: var(--card-hover); border-color: var(--accent); }
.cal-arrow { width: 38px; padding: 7px 0; font-size: 17px; line-height: 1; }

.cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--muted); padding: 0 2px 8px;
}
.cal-weekdays span { padding-left: 4px; }

/* Gitterlinien entstehen durch den 1px-Gap, der den Border-Hintergrund durchscheinen lässt */
.cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 1px; background: var(--border);
  border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden;
}
.cal-cell {
  background: var(--card); min-height: 104px; padding: 8px;
  display: flex; flex-direction: column; gap: 5px;
}
.cal-cell.outside { background: var(--bg-soft); }              /* Tage aus Nachbarmonaten gedimmt */
.cal-cell.outside .cal-daynum { color: var(--muted); opacity: 0.55; }

.cal-loading {
  background: var(--card); padding: 40px 0; display: flex;
  align-items: center; justify-content: center; gap: 10px; color: var(--muted);
}

.cal-daynum {
  font-size: 13px; font-weight: 600; color: var(--text);
  width: 25px; height: 25px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.cal-daynum.today { background: var(--accent-ink); color: var(--auf-akzent); }  /* heutiger Tag wie in Apple Kalender */

.cal-events { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal .dot { margin-right: 0; }                                 /* globalen Punkt-Abstand hier neutralisieren */
.cal-event {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  font-size: 11.5px; font-weight: 600; color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 2px 6px; border-radius: 5px; transition: border-color 0.15s;
}
.cal-event:hover { border-color: var(--accent); }
.cal-event span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-event .dot { flex-shrink: 0; }
.cal-more { font-size: 11px; color: var(--muted); padding-left: 2px; }

.cal-legend { display: flex; gap: 18px; margin-top: 14px; font-size: 12px; color: var(--muted); flex-wrap: wrap; }
.cal-legend span { display: flex; align-items: center; gap: 6px; }
.cal-source { margin-left: auto; font-style: italic; }

/* Umfang-Umschalter (Watchlist / S&P 500) — Segmented Control */
.cal-scope {
  display: inline-flex; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 9px; padding: 2px;
}
.cal-seg {
  padding: 6px 14px; background: transparent; border: none; border-radius: 7px;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; transition: background 0.15s, color 0.15s;
}
.cal-seg:hover { color: var(--text); }
.cal-seg.is-active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(var(--schatten-rgb), 0.075); }

/* Tage mit Terminen sind anklickbar und öffnen das Detailpanel */
.cal-cell.has-events { cursor: pointer; }
.cal-cell.has-events:hover { background: var(--card-hover); }
.cal-cell.outside.has-events:hover { background: var(--card); }
.cal-cell.selected { box-shadow: inset 0 0 0 2px var(--accent); }
.cal-cell:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cal-grid.is-loading { opacity: 0.55; transition: opacity 0.15s; }

/* Detailpanel unter dem Raster: alle Termine eines Tages mit Schätzungen */
.cal-detail {
  margin-top: 16px; background: var(--card);
  border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px;
}
.cal-detail-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.cal-detail-head h3 { font-size: 17px; font-weight: 700; margin: 0; white-space: nowrap; }
.cal-detail-count { font-size: 12px; color: var(--muted); }
.cal-detail-head .cal-btn { margin-left: auto; }

.cal-rows { display: flex; flex-direction: column; }
.cal-row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--bg-soft);
}
.cal-row:first-child { border-top: none; }
.cal-row-ticker {
  flex-shrink: 0; min-width: 62px; font-weight: 700; font-size: 14px;
  color: var(--accent-ink); text-decoration: none;
}
.cal-row-ticker:hover { text-decoration: underline; }
.cal-row-main { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cal-row-title { font-size: 13.5px; font-weight: 600; }
.cal-tag {
  font-size: 11px; font-weight: 600; color: var(--muted);
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 1px 7px; border-radius: 20px;
}
.cal-row-nums { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12.5px; color: var(--muted); }
.cal-kv b { color: var(--text); font-weight: 700; }
.cal-kv em { font-style: normal; opacity: 0.75; }
.cal-surprise { font-size: 12px; font-weight: 700; }
.cal-surprise.pos { color: var(--good); }
.cal-surprise.neg { color: var(--bad); }

/* Schmale Screens: kompaktes Raster, Events nur als farbige Punkte (wie Apple auf dem iPhone) */
@media (max-width: 640px) {
  .cal-head { flex-wrap: wrap; gap: 10px; }
  .cal-scope { order: 3; width: 100%; }
  .cal-seg { flex: 1; }
  .cal-cell { min-height: 66px; padding: 5px; gap: 4px; }
  .cal-daynum { width: 22px; height: 22px; font-size: 12px; }
  .cal-events { flex-direction: row; flex-wrap: wrap; gap: 3px; }
  .cal-event { padding: 0; border: none; background: transparent; gap: 0; }
  .cal-event span { display: none; }
  .cal-more { padding-left: 0; }
  .cal-source { margin-left: 0; flex-basis: 100%; }
}

/* ---------- News ---------- */
.news-item { margin-bottom: 12px; }
.news-title { font-weight: 600; font-size: 15px; }
.news-title:hover { color: var(--accent-ink); }
.news-meta { color: var(--muted); font-size: 12px; margin: 4px 0; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.news-summary { color: var(--muted); font-size: 13px; }
.ticker-tag {
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 1px 8px; border-radius: 20px; font-size: 11px; font-weight: 600;
}
.impact-badge {
  padding: 2px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 700;
}
.ai-result { margin-top: 10px; padding: 10px 14px; background: var(--bg-soft); border-radius: 8px; font-size: 12.5px; }
.ai-result .muted { font-size: 11.5px; }

/* ---------- News-Signale (Finnhub -> Keyword-Filter -> Haiku) ---------- */

/* Sektor-Kacheln im Grid: wie auf der Startseite, aber klickbar (kein <a>). */
.news-sector-card.is-active { cursor: pointer; }
.news-sector-card.is-active:hover {
  background: var(--card-hover); border-color: var(--accent);
  transform: translateY(-2px); box-shadow: 0 10px 28px rgba(var(--schatten-rgb), 0.105);
}
.news-sector-card.is-empty { opacity: 0.45; }        /* kein Signal heute -> gedämpft */
.news-sector-card.selected { border-color: var(--accent); }
.news-macro-card .sector-thumb { border-bottom-color: var(--accent); }

/* Ladezustand: Statuszeile mit ruhig laufendem Ticker + sanft pulsierende
   Kacheln, solange der Feed noch geladen und von der KI klassifiziert wird.
   Bewusst entspanntes Tempo (keine hektische Drehung) plus deutlicher
   Hinweis, dass es bei ausgelasteten Servern bis zu einer Minute dauern kann. */
.loading-inline { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); }
.news-loading-wrap { display: flex; flex-direction: column; gap: 6px; }
.news-loading-note { color: var(--muted); font-size: 13px; }

.ticker-loader {
  display: inline-block; width: 130px; height: 20px; overflow: hidden; position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}
.ticker-loader-track {
  display: flex; align-items: flex-end; gap: 5px; width: max-content;
  animation: ticker-scroll 6s linear infinite;
}
.ticker-loader-bar { width: 4px; border-radius: 2px; background: var(--muted); opacity: 0.85; }
.ticker-loader-bar.up { background: var(--good); }
.ticker-loader-bar.down { background: var(--bad); }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.news-sector-card.is-loading { animation: card-pulse 2.6s ease-in-out infinite; }
.news-sector-card.is-loading .sector-thumb::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(100deg,
    transparent 30%, rgba(var(--accent-rgb), 0.12) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 3.2s linear infinite;
}
@keyframes card-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; } }
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ticker-loader-track, .news-sector-card.is-loading, .news-sector-card.is-loading .sector-thumb::before {
    animation: none;
  }
}

/* bullish/bearish-Zähler in der Kachel */
.sector-signal-counts { display: flex; gap: 20px; font-size: 17px; font-weight: 700; }
.count-bull { color: var(--good); }
.count-bear { color: var(--bad); }
.count-bull.muted-count, .count-bear.muted-count { color: var(--muted); }

/* Gruppen-Kopf (im Detail-Panel) */
.sector-group-head {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--border);
}
.sector-group-head h2 { font-size: 17px; font-weight: 700; }
.sector-group-counts { font-size: 12.5px; color: var(--muted); }

/* Etikett der Nachrichtenlage.
   KEIN uppercase mehr: Die Beschriftung ist seit 2026-08-14 ein Satzfragment
   ("Nachrichten überwiegend positiv") statt eines Einwortlabels ("BULLISH").
   In Versalien wäre das eine schwer lesbare Textwand, und Screenreader lesen
   lange Versalfolgen teils buchstabierend vor. */
.signal-badge {
  padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  letter-spacing: 0.1px; border: 1px solid transparent;
  white-space: nowrap; line-height: 1.5;
}
.signal-bullish { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.signal-bearish { color: var(--bad); border-color: var(--bad); background: var(--bad-soft); }
.signal-neutral { color: var(--muted); border-color: var(--border); }

/* Detail-Panel unter dem Grid */
/* min-height gibt genug Scroll-Raum, damit auch ein kurzes Detail (Sektor mit
   nur 1 News) beim Klick sauber nach oben scrollt statt am unteren Rand zu
   kleben. Der Leerraum darunter ist unsichtbar (nur beim Grid oben sichtbar). */
#sector-detail {
  scroll-margin-top: calc(var(--topbar-h, 66px) + 16px);
  min-height: 70vh;
}
.sector-detail-card { margin-top: 22px; }
/* News sammeln sich jetzt dauerhaft an (siehe pipeline.py) statt nach 48h zu
   verschwinden -- ohne Deckel würde ein aktiver Sektor die Seite endlos lang
   machen. Eigener Scroll-Bereich statt Pagination: einfach runterscrollen. */
.sector-news-rows {
  max-height: 640px;
  overflow-y: auto;
  padding-right: 6px;
}
.sector-news-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-bottom: 1px solid var(--bg-soft);
}
.sector-news-row:last-child { border-bottom: none; }
/* Etikett + KI-Kennzeichen stehen untereinander in einer eigenen Spalte: Die
   Beschriftung ist mehrwortig geworden, nebeneinander würde sie die Zeile
   auseinanderziehen. */
.sector-news-signal {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  flex-shrink: 0;
  /* Feste Spaltenbreite, damit alle Meldungstexte an derselben Kante
     beginnen. Die Etiketten sind unterschiedlich lang ("Nachrichten positiv"
     126px, "Nachrichten leicht negativ" 162px); ohne min-width rutschte der
     Text je Zeile um bis zu 36px hin und her und die Liste wirkte zerfranst. */
  min-width: 168px;
}
.sector-news-main { flex: 1; min-width: 0; }
.sector-news-row .news-title { font-size: 13.5px; font-weight: 500; }
.sector-news-row .news-title:hover { color: var(--accent-ink); }
.sector-news-meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 4px; font-size: 11.5px;
}
/* Markt-Gegeneffekt-Tag: kontrastiert mit dem Sektor-Badge (bullish für den
   Sektor, aber z.B. bearish für den Gesamtmarkt). */
.market-effect {
  font-size: 10.5px; font-weight: 600; padding: 1px 8px; border-radius: 20px;
  border: 1px solid transparent; text-transform: capitalize;
}
.market-bullish { color: var(--good); border-color: color-mix(in srgb, var(--good) 40%, transparent); }
.market-bearish { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 40%, transparent); }
.sector-news-tickers { display: flex; gap: 4px; flex-wrap: wrap; }

/* Firmen-Chips im Detail-Panel */
.sector-companies { margin-top: 18px; }
.sector-companies-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.6px;
  margin-bottom: 10px;
}
.company-signal-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.company-signal-chip {
  display: flex; flex-direction: column; gap: 4px; padding: 12px 14px;
}
/* flex-wrap ist hier Pflicht, nicht Geschmack: Das Etikett heisst seit
   2026-08-14 "Nachrichten überwiegend negativ" statt "Bearish" und ist damit
   rund viermal so breit. Zusammen mit Ticker und KI-Kennzeichen lief die
   Zeile in der Chipbreite über (gemessen: 7px). */
.company-signal-top {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 4px 8px;
}
/* Im Chip darf das Etikett INNERLICH umbrechen. flex-wrap allein reicht nicht:
   Das Etikett traegt white-space:nowrap und ist damit EIN unteilbarer Kasten
   von ~204px, waehrend der Chip-Innenraum ~187px hat. Umbrechen kann die Zeile
   also nur zwischen den Kaesten, nicht im laengsten. Gemessen im dunklen
   Theme, wo die Spalten schmaler sind. */
.company-signal-top .signal-badge { white-space: normal; }
.company-signal-name { font-size: 12.5px; color: var(--muted); }
.company-signal-sector { font-size: 11px; color: var(--muted); }

/* ---------- Listen ---------- */
.list-card { padding: 8px 20px; }
.list-row { display: flex; gap: 14px; padding: 10px 0; border-bottom: 1px solid var(--bg-soft); align-items: baseline; }
.list-row:last-child { border-bottom: none; }
.list-date { color: var(--accent-ink); font-size: 12.5px; font-weight: 600; white-space: nowrap; min-width: 84px; }
.event-type { font-size: 11px; text-transform: uppercase; letter-spacing: 0.8px; color: var(--muted); }

.error-card { border-color: var(--bad); color: var(--bad); margin-bottom: 20px; }

/* ---------- Skeleton-Loading (glowender Shimmer) ---------- */
/* Wandernder Lichtstreifen in Akzentfarbe + sanft pulsierendes Glow (box-shadow),
   statt des reinen Grau-Pulses -- signalisiert "lädt" deutlicher im dunklen Theme. */
@keyframes skeleton-shimmer {
  0%   { background-position: 160% 0; }
  100% { background-position: -60% 0; }
}
@keyframes skeleton-glow {
  0%, 100% { box-shadow: 0 0 0 rgba(var(--accent-rgb), 0); }
  50%      { box-shadow: 0 0 16px rgba(var(--accent-rgb), 0.45); }
}
.skeleton, .skeleton-row, .skeleton-card, .skeleton-text {
  background: linear-gradient(
    100deg,
    var(--bg-soft) 35%,
    rgba(var(--accent-rgb), 0.28) 50%,
    var(--bg-soft) 65%
  );
  background-size: 250% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite,
             skeleton-glow 1.6s ease-in-out infinite;
}
.skeleton { color: transparent; border-radius: 6px; }
.skeleton-row { height: 16px; border-radius: 6px; margin: 14px 0; }
.skeleton-card { min-height: 130px; }

/* ---------- Sheen (Licht wischt beim Hover einmal dezent über die Karte) ---------- */
/* Bewusst zurückhaltend: kaum sichtbarer Schimmer statt Metall-Show.
   Zwei Schichten wie bei echtem Licht:
   ::before = breiter, weicher Lichthof
   ::after  = schmalere Reflexkante, nur einen Hauch heller */
.sector-card, .model-card { position: relative; overflow: hidden; }

.sector-card::before, .model-card::before,
.sector-card::after,  .model-card::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;              /* Klicks/Links darunter bleiben klickbar */
  border-radius: inherit;
  transform: translateX(-101%);      /* links ausserhalb geparkt -> unsichtbar */
  opacity: 0;
}

/* Schicht 1: breiter Lichthof, warm getoent.
   UMGEDREHT gegenueber dem dunklen Theme: Dort war der Wischer heller als
   die Karte. Auf einer weissen Karte ist "heller" unsichtbar, also muss er
   jetzt leicht abdunkeln und dabei ins Orange gehen. */
.sector-card::before, .model-card::before {
  z-index: 1;
  background: linear-gradient(
    100deg,
    transparent 22%,
    rgba(var(--accent-rgb), 0.02) 38%,
    rgba(var(--accent-rgb), 0.07) 50%,
    rgba(var(--accent-rgb), 0.02) 62%,
    transparent 78%
  );
}

/* Schicht 2: schmale Reflexkante. Asymmetrischer Abfall (links haerter,
   rechts weicher) = wandernde Lichtkante statt simplem Streifen. */
.sector-card::after, .model-card::after {
  z-index: 2;
  background: linear-gradient(
    100deg,
    transparent 40%,
    rgba(var(--accent-rgb), 0.05) 46%,
    rgba(var(--accent-rgb), 0.14) 49.2%,
    rgba(var(--accent-rgb), 0.20) 50%,   /* staerkster Punkt — bewusst schwach */
    rgba(var(--accent-rgb), 0.12) 51.5%,
    rgba(var(--accent-rgb), 0.04) 56%,
    transparent 64%
  );
}

/* Beim Hover: beide Schichten wischen einmal zuegig durch. Ease-out (schneller
   Start) sorgt dafuer, dass der Lichtstreifen fast sofort ueber die Karte laeuft
   statt erst nach ~1 s. "both" laesst sie danach unsichtbar stehen. */
.sector-card:hover::before, .model-card:hover::before,
.sector-card:hover::after,  .model-card:hover::after {
  animation: sheen-sweep 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both,
             sheen-fade  1.4s linear both;
}

@keyframes sheen-sweep {
  from { transform: translateX(-101%); }   /* links ausserhalb */
  to   { transform: translateX(101%); }    /* rechts ausserhalb */
}

/* Schnell aufblenden (Streifen ist beim Eintreffen schon voll da), am Ende sanft raus */
@keyframes sheen-fade {
  0% { opacity: 0; }
  10%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

/* Barrierefreiheit: wer System-weit "Bewegung reduzieren" gewaehlt hat, bekommt keinen Sweep */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sector-card:hover::before, .model-card:hover::before,
  .sector-card:hover::after,  .model-card:hover::after { animation: none; }
  .sector-card:hover { transform: none; }
  .skeleton, .skeleton-row, .skeleton-card, .skeleton-text { animation: none; opacity: 0.6; }
}

/* ---------- Sektorseite: Aktien-Liste ---------- */
/* Anzahl-Badge auf den Sektor-Karten der Startseite */
.sector-count {
  background: var(--bg-soft); border: 1px solid var(--border);
  padding: 1px 9px; border-radius: 20px; font-size: 11px; font-weight: 600;
  color: var(--muted);
}

.sector-page-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 16px; flex-wrap: wrap; margin: 6px 0 22px;
}
.back-link { color: var(--muted); font-size: 13px; font-weight: 600; }
.back-link:hover { color: var(--accent-ink); }
.sector-page-title { font-size: 30px; font-weight: 700; margin: 6px 0 2px; }

/* Filterfeld über der Liste */
.stock-filter {
  width: 100%; padding: 11px 16px; margin-bottom: 18px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); font: inherit; font-size: 14px;
  transition: border-color 0.15s;
}
.stock-filter:focus { outline: none; border-color: var(--accent); }

/* Kompakte Aktien-Karten, automatisch umbrechendes Raster. Heißt bewusst
   NICHT .stock-grid -- der Name war früher schon mal doppelt vergeben
   (Aktienseiten-Layout, inzwischen entfernt) und quetschte dadurch den
   Chart; eigener Name beugt einer Wiederholung vor. */
.stock-chip-grid { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.stock-chip {
  padding: 13px 15px; display: flex; flex-direction: column; gap: 3px;
  transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.stock-chip:hover {
  background: var(--card-hover); border-color: var(--accent);
  transform: translateY(-2px);
}
.chip-top { display: flex; align-items: center; justify-content: space-between; }
.chip-symbol { font-weight: 700; font-size: 14px; letter-spacing: 0.4px; color: var(--accent-ink); }
.chip-name { font-weight: 600; font-size: 14px; line-height: 1.3; }
.chip-sub { font-size: 12px; }

/* ---------- Eigene Modelle: Karten auf der Aktienseite ---------- */
/* Zwei Karten nebeneinander (DCF + Reverse DCF), unter ~760px gestapelt.
   auto-fit statt auto-fill: bei genau zwei Kacheln sollen sie die Breite
   teilen, nicht links kleben. */
.editable-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

.section-head-row {
  display: flex; align-items: baseline; gap: 12px;
  flex-wrap: wrap; margin: 28px 0 0;
}
.section-head-row .section-title { margin: 0; }
.section-hint { color: var(--muted); font-size: 12.5px; }

.model-card-editable { border-color: #26324f; }
.model-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.model-card-head h3 { margin-bottom: 10px; }

.model-badge {
  flex-shrink: 0; padding: 3px 9px; border-radius: 20px;
  background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--muted); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.3px; text-transform: uppercase;
}
.model-badge.eigen { color: var(--accent-ink); border-color: var(--accent); }

.model-headline-label { color: var(--muted); font-size: 12px; margin: -4px 0 10px; }

.model-edit { display: inline-block; margin-top: 14px; text-decoration: none; }

/* "Erstellen +"-Karte: steht anstelle einer Bewertung, solange der Nutzer
   noch keine gespeichert hat (oder nicht eingeloggt ist). Die ganze Karte
   ist ein Link -- kein Extra-Knopf nötig, um zu verstehen, was zu tun ist. */
.model-card-empty {
  display: flex; flex-direction: column; align-items: flex-start;
  justify-content: center; min-height: 128px;
  transition: background 0.15s, border-color 0.15s;
}
.model-card-empty:hover { background: var(--card-hover); border-color: var(--accent); }
.model-create { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; font-size: 20px; font-weight: 700; }
.model-create-plus { color: var(--accent-ink); font-size: 24px; font-weight: 800; }

/* ---------- Editor-Seite (DCF / Reverse DCF) ---------- */
.editor-head {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 20px; flex-wrap: wrap; margin: 22px 0 20px;
}
.editor-back { color: var(--muted); font-size: 13px; font-weight: 500; }
.editor-back:hover { color: var(--text); }
.editor-title { font-size: 27px; font-weight: 700; letter-spacing: -0.4px; margin-top: 6px; }
.editor-sub { color: var(--muted); font-size: 14px; }
.editor-actions { display: flex; gap: 8px; }
.editor-actions .btn { padding: 9px 16px; font-size: 13px; }
.btn.btn-ok { background: var(--good); color: #06281c; }
.btn-ghost.btn-danger { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 35%, transparent); }
.btn-ghost.btn-danger:hover { background: var(--bad-soft); border-color: var(--bad); }

/* Formular links, Ergebnis rechts. Das Ergebnis klebt beim Scrollen, damit
   man beim Drehen an Annahme Nr. 12 noch sieht, was sie anrichtet. */
.editor-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.editor-form { display: flex; flex-direction: column; gap: 14px; }
.editor-result { display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--topbar-h, 62px) + 14px); }

.editor-section h3 {
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); margin-bottom: 6px;
}
.editor-help { color: var(--muted); font-size: 12.5px; line-height: 1.6; margin-bottom: 14px; }

.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field[hidden] { display: none; }
.field > label { font-size: 13px; font-weight: 600; }
/* type="text" seit dem freien Rechner (Firmenname, Währung) -- vorher gab es
   im Editor ausschliesslich Zahlenfelder. */
.field input[type="number"], .field input[type="text"], .field select {
  width: 100%; padding: 8px 11px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 14px;
  font-variant-numeric: tabular-nums;
}
.field select { cursor: pointer; }
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field-hint { color: var(--muted); font-size: 11.5px; line-height: 1.55; }

/* Einheit hinter dem Feld (%, ×, Mio.) — spart eine Zeile Erklärung. */
.input-unit { position: relative; display: flex; align-items: center; }
.input-unit input { padding-right: 52px; }
.input-unit .unit {
  position: absolute; right: 11px; color: var(--muted);
  font-size: 12.5px; font-weight: 600; pointer-events: none;
}

.field-check > label { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: 13px; cursor: pointer; }
.field-check input { width: 16px; height: 16px; accent-color: var(--accent); }

.manuell-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.manuell-jahr { display: flex; flex-direction: column; gap: 3px; }
.manuell-jahr span { color: var(--muted); font-size: 11px; font-weight: 600; }
.manuell-jahr input {
  width: 100%; padding: 6px 8px; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: inherit; font-size: 13px;
}

/* Wachstumspfad als Balkenreihe */
.pfad-vorschau { margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--border); }
.pfad-titel { color: var(--muted); font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.pfad-balken-reihe { display: flex; align-items: flex-end; gap: 3px; height: 54px; margin: 8px 0 4px; }
.pfad-balken { flex: 1; background: linear-gradient(180deg, var(--accent), #2c5cab); border-radius: 3px 3px 0 0; }
.pfad-fuss { display: flex; justify-content: space-between; color: var(--muted); font-size: 11.5px; }

/* Ergebniskarte */
.result-big { font-size: 34px; font-weight: 800; letter-spacing: -0.8px; line-height: 1.1; }
.result-label { color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.result-upside { font-size: 13.5px; font-weight: 700; margin-top: 6px; }
.result-upside.up { color: var(--good); } .result-upside.down { color: var(--bad); }
.result-card .verdict { font-weight: 700; font-size: 14px; margin: 12px 0 10px; }
.result-card .kv { margin-top: 4px; }
.note-warn { color: var(--warn); }
.note-bad { color: var(--bad); }

.detail-scroll { max-height: 320px; overflow-y: auto; }
.detail-table { width: 100%; font-size: 12.5px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
/* NUR thead: Seit die Jahreszeile ein <th scope="row"> ist (Screenreader
   sollen "Jahr 3, Barwert ..." lesen statt nur die nackte Zahl), gäbe eine
   Regel auf `th` allein auch den Zeilenköpfen sticky, Versalien und
   Muted-Grau. Die sollen aber aussehen wie eine normale Zelle. */
.detail-table thead th {
  position: sticky; top: 0; background: var(--card);
  text-align: right; color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px; padding: 4px 0 6px;
}
.detail-table tbody th {
  text-align: left; font-weight: 400; color: var(--text);
  padding: 4px 0; border-bottom: 1px solid var(--bg-soft);
}
.detail-table th:first-child, .detail-table td:first-child { text-align: left; }
.detail-table td { text-align: right; padding: 4px 0; border-bottom: 1px solid var(--bg-soft); }
.detail-table .tv-row td,
.detail-table .tv-row th { font-weight: 700; border-top: 1px solid var(--border); border-bottom: none; padding-top: 8px; }

@media (max-width: 980px) {
  .editor-grid { grid-template-columns: 1fr; }
  .editor-result { position: static; }
}

/* ---------- Geschäftszahlen: die drei Abschlüsse auf der Aktienseite ---------- */
/* Zugeklappt eine Karte wie jede andere, aufgeklappt eine Tabelle mit allen
   Positionen. Die Karte IST der Schalter (kein separater Knopf) -- dieselbe
   Idee wie bei der "Erstellen +"-Karte darüber. */
.fin-toggle {
  display: flex; align-items: center; gap: 16px; width: 100%;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fin-toggle:hover { background: var(--card-hover); border-color: var(--accent); }
.fin-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fin-toggle.is-open { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

.fin-toggle-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.fin-toggle-title { font-size: 15px; font-weight: 700; letter-spacing: -0.1px; }

.fin-chevron { margin-left: auto; flex-shrink: 0; line-height: 0; }
.fin-chevron svg {
  width: 20px; height: 20px; fill: none;
  stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 0.2s ease, stroke 0.15s;
}
.fin-toggle:hover .fin-chevron svg { stroke: var(--accent); }
.fin-toggle.is-open .fin-chevron svg { transform: rotate(180deg); stroke: var(--accent); }

/* Das Panel schließt optisch an die Karte an: gleiche Fläche, gleicher Rahmen,
   nur die obere Kante fehlt -- so wirken Schalter und Inhalt als ein Objekt. */
.fin-panel {
  background: var(--card);
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  padding: 4px 20px 18px;
}
.fin-status { display: flex; align-items: center; gap: 10px; color: var(--muted); padding: 22px 0; }
.fin-leer { color: var(--muted); font-size: 13px; padding: 18px 0; }

.fin-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 14px 0 16px;
}

/* Segmented Control -- generisch gehalten, damit künftige Umschalter sie
   mitbenutzen können (der Kalender hat für dieselbe Optik noch seine
   eigenen .cal-scope/.cal-seg aus einer früheren Runde). */
.seg {
  display: inline-flex; background: var(--bg-soft);
  border: 1px solid var(--border); border-radius: 9px; padding: 2px;
}
.seg-btn {
  padding: 6px 13px; background: transparent; border: none; border-radius: 7px;
  color: var(--muted); font: inherit; font-size: 13px; font-weight: 600;
  cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s;
}
.seg-btn:hover { color: var(--text); }
.seg-btn.is-active { background: var(--card); color: var(--text); box-shadow: 0 1px 3px rgba(var(--schatten-rgb), 0.075); }

.fin-search {
  margin-left: auto; min-width: 190px; padding: 7px 12px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px;
  color: var(--text); font: inherit; font-size: 13px;
}
.fin-search:focus { outline: none; border-color: var(--accent); }
.fin-search::placeholder { color: var(--muted); }

/* Tabelle: Kopfzeile klebt beim Scrollen oben, die Positionsspalte links.
   Ohne beides verliert man bei 69 Bilanzzeilen sofort die Orientierung,
   welche Zahl zu welcher Periode gehört. */
.fin-table-wrap { max-height: 62vh; overflow: auto; border-top: 1px solid var(--border); }
.fin-table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  font-size: 13px; font-variant-numeric: tabular-nums;
}
.fin-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--card); text-align: right; white-space: nowrap;
  color: var(--muted); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.5px;
  padding: 10px 0 9px 18px; border-bottom: 1px solid var(--border);
}
.fin-table .fin-corner {
  left: 0; z-index: 3; text-align: left; padding-left: 0;
  text-transform: none; letter-spacing: 0.2px; font-size: 11.5px;
}
.fin-table .fin-corner .fin-unit { margin-left: 8px; }

.fin-per { display: block; color: var(--text); font-size: 12px; }
.fin-per-datum {
  display: block; margin-top: 1px;
  font-size: 10px; font-weight: 500; letter-spacing: 0.2px; text-transform: none;
}

.fin-table tbody th {
  position: sticky; left: 0; z-index: 1;
  background: var(--card); text-align: left; font-weight: 500;
  padding: 7px 18px 7px 0; vertical-align: top;
  /* Rahmen rechts statt Schatten: markiert die Kante der klebenden Spalte,
     wenn die Zahlen darunter horizontal weggescrollt werden. */
  border-right: 1px solid var(--border); border-bottom: 1px solid var(--bg-soft);
}
.fin-table tbody td {
  text-align: right; white-space: nowrap;
  padding: 7px 0 7px 18px; border-bottom: 1px solid var(--bg-soft);
}
.fin-table tbody tr:hover th, .fin-table tbody tr:hover td { background: var(--card-hover); }

.fin-label { display: block; font-weight: 600; }
.fin-de { display: block; color: var(--muted); font-size: 11.5px; font-weight: 400; line-height: 1.4; }
.fin-unit {
  display: inline-block; margin-top: 2px;
  color: var(--muted); font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.4px;
}

.fin-quelle { color: var(--muted); font-size: 11.5px; margin-top: 12px; }

@media (max-width: 700px) {
  /* Der Umschalter Income Statement / Balance Sheet / Cash Flow ist zu breit
     für ein Handy-Display. Ohne diese Regel ragte der DRITTE Reiter aus der
     Karte heraus und war nicht erreichbar -- die Seite selbst scrollt nicht
     waagerecht, also gab es keinen Weg dorthin. Jetzt scrollt die Reiterleiste
     selbst. Die Bildlaufleiste wird versteckt: Auf Touch-Geräten zieht man
     ohnehin mit dem Finger, und eine sichtbare Leiste unter drei Knöpfen sieht
     nach Fehler aus.
     max-width statt width, damit die Regel auf breiteren Karten (Tablet quer)
     nichts kaputt macht. */
  .seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .seg::-webkit-scrollbar { display: none; }

  .fin-panel { padding: 4px 14px 16px; }
  .fin-search { margin-left: 0; width: 100%; }
  .fin-table { font-size: 12.5px; }
  .fin-table tbody th { max-width: 190px; padding-right: 12px; }
  .fin-table thead th, .fin-table tbody td { padding-left: 12px; }
}

/* ---------- Comps: Comparable Company Analysis ---------- */
/* Vier Blöcke untereinander: Eingabe -> Multiples -> Benchmark -> implizite
   Bewertung. Die Tabellen sind bewusst breiter als der Container und scrollen
   waagerecht; die Namensspalte bleibt dabei stehen, sonst weiss man nach drei
   Spalten nicht mehr, wessen Zahlen man liest. */

.comps-toolbar {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between; margin: 20px 0 16px;
}
.comps-load { display: flex; gap: 8px; flex: 1; min-width: 280px; max-width: 620px; }
.comps-load input {
  flex: 1; padding: 8px 13px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 14px;
}
.comps-load input:focus { outline: none; border-color: var(--accent); }
.comps-toolbar-right { display: flex; gap: 8px; }
.comps-toolbar .btn { padding: 8px 15px; font-size: 13px; white-space: nowrap; }

.comps-hinweis {
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  background: var(--card); border-radius: 8px;
  padding: 11px 15px; margin-bottom: 16px;
  color: var(--muted); font-size: 13px; line-height: 1.6;
}
.comps-hinweis.warn { border-left-color: var(--warn); }
.comps-hinweis.fehler { border-left-color: var(--bad); color: var(--bad); }

/* Peer-Vorschläge: Chips zum Einzelklick, damit die Peer-Auswahl eine
   Entscheidung bleibt und keine Massenübernahme. */
.comps-peers {
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--card); padding: 12px 15px; margin-bottom: 16px;
}
.comps-peers-head {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
  color: var(--muted); font-size: 13px; margin-bottom: 10px;
}
.comps-peers-head b { color: var(--text); font-weight: 600; }
.comps-peers-head .btn { padding: 6px 12px; font-size: 12px; }
.comps-peers-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.comps-peer-chip {
  padding: 5px 11px; border-radius: 999px;
  background: var(--bg-soft); border: 1px solid var(--border);
  color: var(--text); font: inherit; font-size: 12.5px;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .12s, color .12s;
}
.comps-peer-chip:hover:not(:disabled) { border-color: var(--accent); color: var(--accent-ink); }
.comps-peer-chip:disabled { opacity: .5; cursor: default; }

/* Herkunftsetikett unter dem Firmennamen: Periode und Währung der Zeile. */
.comps-zeile-meta {
  margin: 3px 0 0 24px; font-size: 11px; color: var(--muted);
  white-space: nowrap; letter-spacing: .01em;
}

.comps-section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 18px; overflow: hidden;
}
.comps-sec-head { padding: 16px 20px 14px; border-bottom: 1px solid var(--border); }
.comps-sec-head h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.2px; }
.comps-sec-head p {
  color: var(--muted); font-size: 12.5px; line-height: 1.65;
  margin-top: 7px; max-width: 88ch;
}
.comps-sec-head em { color: var(--text); font-style: normal; font-weight: 600; }
.comps-step {
  display: inline-block; margin-right: 9px;
  color: var(--accent-ink); font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums; vertical-align: 2px;
  border: 1px solid var(--accent); border-radius: 5px; padding: 0 5px;
}

.comps-scroll { overflow-x: auto; }

.comps-table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.comps-table th, .comps-table td {
  padding: 7px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--border);
}
.comps-table thead th {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.7px;
  font-weight: 600; color: var(--muted);
  background: var(--bg-soft); vertical-align: bottom;
}
.comps-table thead tr:last-child th { border-bottom: 1px solid var(--border); }
.comps-table th.grp {
  text-align: center; color: var(--accent-ink); letter-spacing: 1px;
  border-left: 1px solid var(--border);
}
.comps-table .lbl { text-align: left; }
.comps-table td.num { font-size: 13px; }
.comps-table td.divide, .comps-table th.divide { border-left: 1px solid var(--border); }
.comps-table tbody tr:hover td { background: var(--card-hover); }
.comps-table tbody tr:last-child td { border-bottom: none; }
.comps-table td.neg { color: var(--bad); }

/* Namensspalte bleibt beim Querscrollen stehen. */
.comps-table .stick {
  position: sticky; left: 0; z-index: 1;
  background: var(--card); text-align: left;
  border-right: 1px solid var(--border);
}
.comps-table thead .stick { background: var(--bg-soft); z-index: 3; }
.comps-table tbody tr:hover .stick { background: var(--card-hover); }

/* Ausgeschlossene Peers bleiben lesbar, treten aber zurück. */
.comps-table tr.raus td { color: var(--muted); opacity: 0.65; }
.comps-table tr.trenner td { border-top: 1px solid var(--border); }

.comps-name-cell { display: flex; align-items: center; gap: 9px; }
.comps-name-cell input[type="checkbox"] {
  width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0;
}
.comps-table input[type="text"] {
  width: 94px; padding: 5px 8px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 6px;
  color: var(--text); font: inherit; font-size: 13px;
  text-align: right; font-variant-numeric: tabular-nums;
}
.comps-table input.comps-name { width: 172px; text-align: left; font-weight: 500; }
.comps-table input[type="text"]:focus { outline: none; border-color: var(--accent); }
.comps-table input::placeholder { color: var(--muted); opacity: 0.55; }

.comps-del {
  background: none; border: none; color: var(--muted);
  font-size: 18px; line-height: 1; padding: 2px 6px; cursor: pointer;
}
.comps-del:hover { color: var(--bad); }

.comps-sec-foot {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-top: 1px solid var(--border);
}
.comps-count { color: var(--muted); font-size: 12.5px; }
.comps-leer {
  padding: 24px 20px; color: var(--muted); font-size: 13px;
  text-align: center; white-space: normal; line-height: 1.6;
}

/* Median ist der Anker der ganzen Analyse -> dezent hervorgehoben. */
.comps-table .med { background: rgba(var(--accent-rgb), 0.07); }
.comps-table thead th.med { color: var(--accent-ink); }
.comps-table td.med { font-weight: 600; color: var(--text); }

.comps-n {
  display: inline-block; min-width: 22px;
  border: 1px solid var(--border); border-radius: 999px;
  padding: 0 7px; font-size: 11px; color: var(--muted);
}
.comps-n.duenn { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }

/* Zieleingabe */
.comps-target { padding: 16px 20px; border-bottom: 1px solid var(--border); }
.comps-target-load {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin-bottom: 16px;
}
.comps-target-load .btn { padding: 7px 13px; font-size: 12.5px; white-space: nowrap; }
.comps-target-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px 14px;
}
.comps-target-grid .field { margin-bottom: 0; gap: 4px; }
.comps-target-grid label {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--muted); font-weight: 600;
}
.comps-target-grid input {
  width: 100%; padding: 7px 11px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px;
  color: var(--text); font: inherit; font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.comps-target-grid input:focus { outline: none; border-color: var(--accent); }

/* Football Field */
.comps-ff-head {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 10px 20px; padding: 16px 20px 10px; border-top: 1px solid var(--border);
}
.comps-ff-head h3 { font-size: 14px; font-weight: 600; }
.comps-legend { display: flex; flex-wrap: wrap; gap: 16px; color: var(--muted); font-size: 12px; }
.comps-legend i { display: inline-block; margin-right: 6px; vertical-align: 1px; }
.comps-legend .sw-bar { width: 20px; height: 9px; border-radius: 2px; background: var(--accent); opacity: 0.75; }
.comps-legend .sw-med { width: 2px; height: 12px; background: var(--text); }
.comps-legend .sw-spot { width: 2px; height: 12px; background: var(--warn); }

.comps-ff { padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 9px; }
.comps-ff-row {
  display: grid; grid-template-columns: minmax(120px, 180px) 1fr minmax(104px, auto);
  align-items: center; gap: 14px;
}
.comps-ff-label { text-align: right; color: var(--muted); font-size: 12.5px; }
.comps-ff-track {
  position: relative; height: 22px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 5px;
}
.comps-ff-bar {
  position: absolute; top: 3px; bottom: 3px;
  background: var(--accent); opacity: 0.75; border-radius: 2px;
}
.comps-ff-med { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--text); }
.comps-ff-spot { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--warn); }
.comps-ff-val { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.comps-ff-axis {
  display: grid; grid-template-columns: minmax(120px, 180px) 1fr minmax(104px, auto);
  gap: 14px; margin-top: 2px;
  font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums;
}
.comps-ff-axis .enden { display: flex; justify-content: space-between; gap: 10px; }

.comps-notes { color: var(--muted); font-size: 12.5px; line-height: 1.7; margin-top: 20px; }
.comps-notes p { margin-bottom: 8px; }
.comps-notes b { color: var(--text); font-weight: 600; }
.comps-notes em { color: var(--text); font-style: normal; font-weight: 600; }

@media (max-width: 760px) {
  .comps-toolbar { flex-direction: column; align-items: stretch; }
  .comps-load { max-width: none; }
  .comps-ff-row, .comps-ff-axis { grid-template-columns: 96px 1fr; }
  .comps-ff-val { grid-column: 2; text-align: right; }
  .comps-ff-axis .enden { grid-column: 2; }
  /* Der Mittelwert der Achse fliegt raus, sonst überlappen die Zahlen. */
  .comps-ff-axis .enden span:nth-child(2) { display: none; }
}

/* ---------- Footer-Links (Impressum/Datenschutz/Disclaimer) ---------- */
.footer a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.footer a:hover { color: var(--text); }

/* ---------- Rechtstexte (Impressum, Datenschutz, Disclaimer) ---------- */
.legal { max-width: 760px; margin: 0 auto; line-height: 1.7; }
.legal h1 { font-size: 26px; font-weight: 700; margin-bottom: 4px; }
.legal h2 { font-size: 16px; font-weight: 600; margin: 32px 0 10px; }
.legal p { margin-bottom: 12px; color: var(--text); }
.legal ul { margin: 0 0 12px 20px; }
.legal li { margin-bottom: 4px; }
.legal a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }
.legal .muted { margin-bottom: 24px; }

/* ---------- /mobil — Valume aufs Handy holen ---------- */
.mobil { max-width: 760px; margin: 0 auto; line-height: 1.7; }
.mobil h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; line-height: 1.2; }
.mobil h2 { font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.mobil .mobil-h2 { margin-top: 40px; }
.mobil p { margin-bottom: 12px; }
.mobil-sub { color: var(--muted); font-size: 15.5px; margin: 10px 0 28px; }
.mobil em { font-style: normal; font-weight: 600; color: var(--text); }
.mobil-fussnote { color: var(--muted); font-size: 13px; margin-top: 28px; }
.mobil-pfad { color: var(--muted); font-size: 13.5px; white-space: nowrap; }

/* QR-Karte: Code links, Erklärung rechts; auf dem Handy gestapelt. */
.mobil-qr-karte {
  display: grid; grid-template-columns: auto 1fr; gap: 26px; align-items: center;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px;
}
/* Weisser Rahmen um den Code: Ein QR-Code MUSS hellen Grund und einen
   Ruherand haben, sonst findet die Kamera ihn auf dem dunklen Layout nicht. */
.mobil-qr { background: #fff; border-radius: 10px; padding: 10px; line-height: 0; }
.mobil-qr img { display: block; width: 200px; height: 200px; }
.mobil-qr-text p { color: var(--muted); font-size: 14px; margin-bottom: 10px; }
.mobil-url { font-size: 13.5px; }
.mobil-url b { color: var(--text); word-break: break-all; }

.mobil-schritte { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 24px; }
.mobil-schritte section {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}
.mobil-schritte ol { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.mobil-schritte li { margin-bottom: 8px; }
.mobil-schritte b { color: var(--text); font-weight: 600; }

@media (max-width: 640px) {
  .mobil-qr-karte { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 18px; }
  .mobil-schritte { grid-template-columns: 1fr; }
}

/* ---------- Learning Page ---------- */
.learn-head { max-width: 760px; margin: 0 auto 36px; text-align: center; }
.learn-head h1 { font-size: 32px; font-weight: 800; letter-spacing: -0.5px; }
.learn-head p { margin-top: 10px; color: var(--muted); font-size: 15.5px; line-height: 1.6; }

/* Ein Grid fuer Kopf + Gliederung + Inhalt. Die Bereichsnamen erlauben es, die
   Gliederung auf dem Handy vor den Kopf zu ziehen, ohne das HTML zu doppeln. */
.learn-layout {
  display: grid;
  /* minmax(0, 1fr) statt 1fr: sonst zieht ein breiter Block im Text (Tabelle,
     Formel) die Spalte auf seine min-content-Breite und die ganze Seite
     scrollt seitwaerts. */
  grid-template-columns: 270px minmax(0, 1fr);
  grid-template-areas: "kopf kopf" "toc inhalt";
  gap: 0 40px; align-items: start;
  transition: grid-template-columns 0.18s ease;
}
.learn-head { grid-area: kopf; }
.learn-toc { grid-area: toc; }
.learn-content { grid-area: inhalt; }

/* Eingeklappt: die Spalte schrumpft auf den Knopf, der Text bekommt den Platz. */
.learn-layout.toc-zu { grid-template-columns: 46px minmax(0, 1fr); gap: 0 24px; }
.learn-layout.toc-zu .learn-content { margin: 0 auto; }

/* Sidebar: sticky, ausfahrbare Gliederung */
.learn-toc {
  position: sticky; top: 88px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px 18px; font-size: 13.5px;
}
.learn-toc-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.learn-toc-title {
  font-size: 11px; font-weight: 700; letter-spacing: 1.4px; color: var(--muted);
  text-transform: uppercase; padding: 0 6px;
}
.learn-toc-body { padding-top: 10px; }

/* Klapp-Knopf: 34px, damit er auch mit dem Daumen sicher zu treffen ist. */
.learn-toc-toggle {
  flex-shrink: 0; width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px;
  color: var(--muted); cursor: pointer; transition: color 0.15s, border-color 0.15s;
}
.learn-toc-toggle:hover { color: var(--text); border-color: var(--accent); }
.learn-toc-toggle-icon {
  width: 7px; height: 7px;
  border-right: 1.7px solid currentColor; border-bottom: 1.7px solid currentColor;
  transform: rotate(135deg);            /* offen: Pfeil nach links = zuklappen */
  transition: transform 0.18s;
}
.toc-zu .learn-toc { padding: 6px; }
.toc-zu .learn-toc-title,
.toc-zu .learn-toc-body { display: none; }
.toc-zu .learn-toc-head { justify-content: center; }
.toc-zu .learn-toc-toggle-icon { transform: rotate(-45deg); }  /* zu: Pfeil nach rechts */
.learn-toc-link, .learn-toc-group summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 9px 6px; border-radius: 7px; color: var(--text); font-weight: 600;
  cursor: pointer; list-style: none; transition: background 0.15s, color 0.15s;
}
.learn-toc-link::-webkit-details-marker { display: none; }
.learn-toc-group summary::-webkit-details-marker { display: none; }
.learn-toc-link:hover, .learn-toc-group summary:hover { background: var(--bg-soft); }
.learn-toc-link.active { color: var(--accent-ink); background: var(--bg-soft); }
.learn-toc-group summary::after {
  content: ""; width: 7px; height: 7px; flex-shrink: 0;
  border-right: 1.6px solid var(--muted); border-bottom: 1.6px solid var(--muted);
  transform: rotate(-45deg); transition: transform 0.15s;
}
.learn-toc-group[open] summary::after { transform: rotate(45deg); }
.learn-toc-sub { display: flex; flex-direction: column; padding: 2px 0 6px 14px; }
.learn-toc-sub a {
  padding: 7px 10px; border-radius: 6px; color: var(--muted); font-weight: 500;
  border-left: 1px solid var(--border); margin-left: 3px; transition: background 0.15s, color 0.15s;
}
.learn-toc-sub a:hover { color: var(--text); background: var(--bg-soft); }
.learn-toc-sub a.active { color: var(--accent-ink); border-left-color: var(--accent); background: var(--bg-soft); }
.learn-toc-divider { height: 1px; background: var(--border); margin: 10px 4px; }

/* Zurueck/Weiter am Kapitelende. Das leere <span> im Template haelt "Weiter"
   rechts, wenn es kein vorheriges Kapitel gibt — deshalb space-between. */
.learn-pager {
  display: flex; justify-content: space-between; gap: 16px;
  margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border);
}
.learn-pager-link {
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
  padding: 12px 16px; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--card); transition: border-color 0.15s, background 0.15s;
}
.learn-pager-link:hover { border-color: var(--accent); background: var(--bg-soft); }
.learn-pager-link.next { text-align: right; margin-left: auto; }
.learn-pager-label {
  font-size: 11px; font-weight: 700; letter-spacing: 1.2px;
  text-transform: uppercase; color: var(--muted);
}
.learn-pager-titel { font-weight: 600; color: var(--text); }

/* Handy: eine Zeile, ganz oben ueber der Ueberschrift, standardmaessig offen.
   Nicht sticky — unter der ebenfalls stickyen Topbar wuerde sie verschwinden. */
@media (max-width: 900px) {
  .learn-layout,
  .learn-layout.toc-zu {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "toc" "kopf" "inhalt";
    gap: 0;
  }
  .learn-head { margin-bottom: 26px; }
  .learn-toc, .toc-zu .learn-toc {
    position: static; margin-bottom: 18px; padding: 8px 10px;
  }
  /* Auch zugeklappt volle Zeile: Titel links, Knopf rechts. */
  .learn-toc-head, .toc-zu .learn-toc-head { justify-content: space-between; }
  /* Die Beschriftung bleibt auch im zugeklappten Zustand stehen, damit man den
     Knopf ueberhaupt einordnen kann. */
  .toc-zu .learn-toc-title { display: block; }
  .learn-toc-body { padding-top: 8px; max-height: 62vh; overflow-y: auto; }
  .learn-toc-toggle-icon { transform: rotate(-135deg); }        /* offen: nach oben */
  .toc-zu .learn-toc-toggle-icon { transform: rotate(45deg); }  /* zu: nach unten */
  .learn-toc-link, .learn-toc-group summary { padding: 11px 8px; min-height: 44px; }
  .learn-toc-sub a { padding: 10px; min-height: 40px; }
}

/* Content */
/* min-width: 0 hebt die automatische Mindestbreite von Grid-Items auf. Ohne sie
   waechst die Textspalte auf die min-content-Breite ihres breitesten Kindes
   (Tabelle, Formel) und schiebt sich aus dem Raster heraus. */
.learn-content { width: 100%; max-width: 780px; min-width: 0; }
.learn-section { padding-top: 8px; margin-bottom: 64px; scroll-margin-top: 84px; }
.learn-section:first-child { padding-top: 0; }
.learn-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: 1.2px; color: var(--accent-ink); text-transform: uppercase; margin-bottom: 8px; }
.learn-section h2 { font-size: 25px; font-weight: 800; letter-spacing: -0.4px; margin-bottom: 12px; }
.learn-section h3 { font-size: 16.5px; font-weight: 700; margin: 28px 0 10px; }
.learn-section h4 { font-size: 14px; font-weight: 700; margin: 18px 0 8px; color: var(--text); }
.learn-lead { font-size: 16px; line-height: 1.7; color: var(--text); margin-bottom: 20px; }
.learn-section p { line-height: 1.75; color: var(--text); margin-bottom: 12px; }
.learn-section p.muted { color: var(--muted); }
.learn-section ul, .learn-section ol { margin: 0 0 14px 20px; line-height: 1.7; }
.learn-section li { margin-bottom: 6px; }
.learn-section li::marker { color: var(--accent-ink); }
.learn-section strong { color: var(--text); font-weight: 700; }

.learn-box {
  background: var(--bg-soft); border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: 10px; padding: 16px 18px; margin: 18px 0;
}
.learn-box h4 { margin-top: 0; color: var(--accent-ink); font-size: 12.5px; letter-spacing: 0.6px; text-transform: uppercase; }
.learn-box ul { margin-bottom: 0; }

.learn-formula {
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; margin: 16px 0; font-size: 15.5px; text-align: center;
  font-variant-numeric: tabular-nums; overflow-x: auto;
}
.learn-formula sub, .learn-formula sup { font-size: 0.7em; }

.learn-rule {
  border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin: 18px 0;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), 0.08), transparent);
}
.learn-rule p { margin-bottom: 0; font-weight: 600; }

.learn-example {
  background: var(--card-hover); border: 1px solid var(--border); border-radius: 10px;
  padding: 16px 18px; margin: 16px 0;
}
.learn-example h4 { margin-top: 0; color: var(--good); }

.learn-mistakes { border-left-color: var(--bad); }
.learn-mistakes h4 { color: var(--bad); }

.learn-fazit { border-left-color: var(--good); }
.learn-fazit h4 { color: var(--good); }

.learn-table-wrap { overflow-x: auto; margin: 16px 0; }
.learn-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.learn-table th, .learn-table td { padding: 9px 12px; border-bottom: 1px solid var(--border); text-align: left; }
.learn-table th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.5px; }
.learn-table td.num, .learn-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.learn-table tbody tr:last-child td { border-bottom: none; }
.learn-table tfoot td { border-top: 1px solid var(--border); font-weight: 700; }

.learn-related { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.learn-related a {
  padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  color: var(--muted); font-size: 12.5px; font-weight: 600; transition: all 0.15s;
}
.learn-related a:hover { color: var(--text); border-color: var(--accent); background: var(--bg-soft); }

.learn-flow { display: flex; flex-direction: column; align-items: center; gap: 2px; margin: 16px 0; font-size: 13.5px; }
.learn-flow-step { background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; padding: 8px 16px; text-align: center; }
.learn-flow-arrow { color: var(--muted); font-size: 12px; }

/* ---------- Rechner-Seite (/rechner) ---------- */
/* Drei gleichwertige Werkzeugkarten nebeneinander, darunter die Suche für die
   Geschäftszahlen. minmax(320px, 1fr): Unter drei Spalten (schmales Fenster)
   bricht das Raster von selbst auf zwei und dann eine Spalte um -- die Karten
   tragen Fließtext, unter ~320px wird der unlesbar schmal. */
.rechner-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 16px;
}

.rechner-card { display: flex; flex-direction: column; padding: 22px 22px 18px; }
.rechner-card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.rechner-card-head h3 { font-size: 19px; font-weight: 700; letter-spacing: -0.3px; margin: 0; }

/* Suche sitzt unten bündig: margin-top:auto schiebt sie ans Kartenende,
   damit die drei Felder trotz verschieden langer Texte auf einer Linie stehen. */
.rechner-suche { margin-top: auto; padding-top: 18px; }
.rechner-suche label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--muted);
}
/* .search bringt position:relative fuer die Vorschlagsliste mit; die Breite
   der Topbar-Variante gilt hier nicht. */
.rechner-search { max-width: none; }

.rechner-zahlen-suche { max-width: 520px; }
.rechner-zahlen-suche label {
  display: block; margin-bottom: 6px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.4px;
  text-transform: uppercase; color: var(--muted);
}

/* Der Zahlenblock auf /rechner hat keine Aufklapp-Karte über sich, deshalb
   bekommt er selbst den Rahmen, den sonst .fin-toggle + .fin-panel teilen. */
#zahlen-block .fin-panel { border-radius: var(--radius); border-top: 1px solid var(--border); padding-top: 14px; }

/* Rücklink in der Überschrift der Comps-Seite */
.zurueck-link { color: var(--muted); font-weight: 600; }
.zurueck-link:hover { color: var(--text); }
.zurueck-pfeil { color: var(--muted); margin: 0 2px; }

@media (max-width: 560px) {
  /* iOS zoomt beim Antippen automatisch in Felder unter 16px hinein. */
  .rechner-search input, .rechner-zahlen-suche input { font-size: 16px; }
}

/* Zweiter Weg unter dem Suchfeld: rechnen ohne Ticker. Gleiche Maße wie
   .search input, damit beide Wege optisch gleichwertig nebeneinanderstehen. */
.rechner-ohne-ticker {
  display: block; width: 100%; margin-top: 8px; padding: 9px 14px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 9px;
  color: var(--accent-ink); font-size: 14px; font-weight: 600; text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.rechner-ohne-ticker:hover { border-color: var(--accent); }

/* Editor ohne Ticker: statt "Bewertung speichern" steht dort der Hinweis,
   wo der Stand liegt. */
.editor-hinweis { font-size: 12px; align-self: center; max-width: 180px; line-height: 1.4; }

/* ---------- Suche: "gibt es nicht"-Meldung + Prüfzustand ----------
   Julians Regel 2026-07-30: Kein Suchfeld springt mehr los, bevor der Server
   den Ticker bestätigt hat. Die drei Zustände dazu:
   .is-pruefend = läuft gerade, .is-fehler = abgewiesen, .such-fehler = warum. */
.such-fehler {
  margin-top: 6px; font-size: 12px; line-height: 1.45;
  color: var(--bad);
}
/* In der Topbar (und in jedem .search-Feld) darf die Meldung NICHT im Fluss
   stehen -- sie würde die Kopfzeile in dem Moment höher machen, in dem sie
   erscheint, und die ganze Seite verspringt. Also schwebt sie wie die
   Vorschlagsliste darunter. */
.search > .such-fehler {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0;
  margin-top: 0; padding: 9px 14px;
  background: var(--card); border: 1px solid var(--bad);
  border-radius: 10px; box-shadow: 0 8px 24px rgba(var(--schatten-rgb), 0.084);
  z-index: 59;
}
.search input.is-fehler, input.is-fehler { border-color: var(--bad); }
input.is-pruefend { opacity: 0.75; }
.search-leer {
  padding: 10px 14px; font-size: 13px; color: var(--muted); line-height: 1.45;
}

/* Währungsauswahl im freien Rechner: dasselbe Vorschlagsfeld wie bei der
   Ticker-Suche, deshalb braucht der Rahmen position:relative. */
.waehrung-wahl { position: relative; }
.waehrung-name { color: var(--muted); }
.waehrung-name:not(:empty)::before { content: " — "; }

/* ---------- Seite "Ticker nicht gefunden" ---------- */
.notfound-page { max-width: 620px; margin: 0 auto; padding: 40px 0 60px; }
.notfound-title { font-size: 27px; margin-bottom: 10px; }
.notfound-lead { color: var(--muted); line-height: 1.6; margin-bottom: 24px; }
.notfound-lead strong { color: var(--text); }
.notfound-card { margin-bottom: 16px; }
.notfound-card h3 { margin-bottom: 12px; font-size: 15px; }
.notfound-card .rechner-search { position: relative; max-width: none; }
.notfound-hinweis { font-size: 12px; margin-top: 10px; line-height: 1.5; }
.notfound-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }

@media (max-width: 560px) {
  /* iOS zoomt bei Feldern unter 16px automatisch hinein. */
  .notfound-card input { font-size: 16px; }
}

/* --- Kontolöschung (account.html / account_loeschen.html) ------------------
   Steht bewusst am DATEIENDE: .btn-loeschen muss .btn (Zeile ~969) bei
   gleicher Spezifität überschreiben — in CSS gewinnt die spätere Regel. */
.konto-loeschen-zeile { margin-top: 22px; padding-top: 14px; border-top: 1px solid var(--border); text-align: center; }
.btn-link-loeschen { color: var(--bad); }
.btn-link-loeschen:hover { color: var(--bad); }
.btn-loeschen { background: var(--bad); color: #2b0808; }
.btn-loeschen:hover { filter: brightness(1.08); }

/* ---------- Rundgang (tour.js) --------------------------------------------
   Drei Ebenen: ein Backdrop, der Klicks abfaengt, der "Scheinwerfer" (leeres
   Kaestchen ueber dem Ziel, das per riesigem box-shadow alles andere
   abdunkelt) und die Hinweiskarte selbst. Alles position:fixed -- so bleiben
   die Koordinaten aus getBoundingClientRect direkt verwendbar, auch auf
   Seiten mit sticky Topbar. */
.tour-backdrop { position: fixed; inset: 0; z-index: 200; background: transparent; }
/* BEWUSST OHNE Transition auf Position und Groesse: Ein gleitender
   Scheinwerfer sieht huebsch aus, steht aber waehrend der Bewegung neben dem
   Ziel -- und wenn im selben Moment das Burger-Menue aufklappt oder die Seite
   scrollt, zeigt er auf etwas Falsches. Genauigkeit schlaegt hier Eleganz. */
.tour-spot {
  position: fixed; z-index: 201; pointer-events: none;
  box-shadow: 0 0 0 9999px var(--overlay), 0 0 0 2px var(--accent) inset;
  border-radius: 10px;
}

.tour-karte {
  position: fixed; z-index: 202; width: 320px; max-width: calc(100vw - 24px);
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px 13px;
  box-shadow: 0 18px 50px rgba(var(--schatten-rgb), 0.14);
}
.tour-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.tour-zaehler { color: var(--accent-ink); font-size: 11.5px; font-weight: 700; letter-spacing: 0.8px; font-variant-numeric: tabular-nums; }
.tour-x {
  background: none; border: none; color: var(--muted); cursor: pointer;
  font-size: 13px; line-height: 1; padding: 4px; border-radius: 6px;
}
.tour-x:hover { color: var(--text); background: var(--bg-soft); }

.tour-titel { font-size: 15.5px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 5px; }
.tour-text { color: var(--muted); font-size: 13.5px; line-height: 1.6; }

.tour-aktionen { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.tour-skip {
  background: none; border: none; padding: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: 12.5px;
}
.tour-skip:hover { color: var(--text); text-decoration: underline; }
.tour-weiter {
  background: var(--accent-ink); color: var(--auf-akzent); border: none; border-radius: 8px;
  padding: 8px 18px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.tour-weiter:hover { filter: brightness(1.08); }

/* Sichtbar nur, solange der Rundgang laeuft. Ohne diese Regel blieben Backdrop
   und Karte nach dem Beenden als toter Schleier auf der Seite stehen -- genau
   das ist beim Bauen passiert. */
body:not(.tour-laeuft) .tour-backdrop,
body:not(.tour-laeuft) .tour-spot,
body:not(.tour-laeuft) .tour-karte { display: none; }

/* "Anleitung" im Fussbereich ist ein Knopf (startet den Rundgang), sieht aber
   aus wie die Links daneben. */
.footer-link {
  /* padding-block statt padding: sonst ueberschreibt diese Regel das
     padding-left, aus dem die Hairline-Trenner ihren Abstand nehmen. */
  background: none; border: none; padding-block: 0; cursor: pointer;
  color: var(--muted); font: inherit; font-size: inherit;
  text-decoration: underline; text-underline-offset: 2px;
}
.footer-link:hover { color: var(--text); }

@media (max-width: 560px) {
  /* Volle Breite minus Rand. Die Position rechnet tour.js weiter selbst aus --
     eine fest unten klebende Karte wuerde genau die Ziele verdecken, die unten
     auf der Seite liegen. */
  .tour-karte { width: calc(100vw - 24px); padding: 13px 15px 12px; }
  .tour-weiter { padding: 10px 20px; }   /* Daumenflaeche */
}


/* ---------- Sprachumschalter ---------- */
/* Zwei Sprachen, zwei sichtbare Knoepfe -- kein Aufklappmenue. Ein Dropdown
   verlangt einen Klick, nur um zu zeigen, was ueberhaupt zur Wahl steht, und
   nimmt in der ohnehin vollen Kopfzeile nicht weniger Platz weg. */
.sprachwahl { display: flex; align-items: center; gap: 2px; padding: 2px;
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: 8px; }
.sprachwahl form { display: contents; }
.sprach-btn {
  background: none; border: none; font: inherit;
  padding: 4px 9px; border-radius: 6px;
  color: var(--muted); font-size: 12px; font-weight: 600; letter-spacing: 0.4px;
  cursor: pointer; transition: color 0.15s, background 0.15s;
}
.sprach-btn:hover { color: var(--text); }
.sprach-btn.is-active { color: var(--text); background: var(--card); cursor: default; }
.sprach-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
/* Im Kopf steht der Umschalter links vom Konto-Bereich; das margin-left:auto
   der Navigation schiebt beide gemeinsam nach rechts. */
.sprachwahl-kopf { display: flex; flex-shrink: 0; }
/* Im Burger-Menue nur auf schmalen Screens (dort ist .sprachwahl-kopf aus). */
.nav-konto-mobil .sprachwahl { display: none; }

/* ---------- Sprachwahl beim ersten Besuch ---------- */
/* Erscheint genau einmal, solange kein valume_lang-Cookie da ist. Bewusst ein
   echter Dialog mit Schleier und nicht nur ein Balken: Die Frage soll einmal
   beantwortet und danach nie wieder gestellt werden. */
.sprach-dialog {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: var(--overlay);
  backdrop-filter: blur(6px);
}
.sprach-dialog-karte {
  width: 100%; max-width: 420px; text-align: center;
  background: var(--card); border: 1px solid var(--border); border-radius: 16px;
  padding: 30px 28px 22px;
  box-shadow: 0 24px 60px rgba(var(--schatten-rgb), 0.135);
}
.sprach-dialog-mark { margin-bottom: 14px; }
.sprach-dialog-mark path { stroke: var(--text); stroke-width: 4.5; }
.sprach-dialog-karte h2 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.sprach-dialog-karte p { color: var(--muted); font-size: 14px; line-height: 1.5; }
.sprach-dialog-knoepfe { display: flex; gap: 10px; margin: 22px 0 14px; }
.sprach-dialog-knoepfe form { flex: 1; display: flex; }
.sprach-dialog-knoepfe .btn { flex: 1; justify-content: center; text-align: center; }
.sprach-dialog-fuss { font-size: 12.5px; }

@media (max-width: 900px) {
  /* Auf dem Handy steckt die Sprache im Burger-Menue: Neben Logo, Suchfeld und
     Burger ist in der Kopfzeile kein Platz fuer einen dritten Bedienpunkt. */
  .sprachwahl-kopf { display: none; }
  .nav-konto-mobil .sprachwahl {
    display: flex; align-self: flex-start;
    margin-top: 8px; padding: 3px;
  }
  .nav-konto-mobil .sprach-btn {
    min-height: 38px; padding: 6px 16px; font-size: 14px;
    display: flex; align-items: center; justify-content: center; width: auto;
  }
  .sprach-dialog-knoepfe { flex-direction: column; }
}

/* ---------- KI-Kennzeichnung (Art. 50 AI Act) ---------- */
/* Sitzt an JEDER einzelnen KI-Ausgabe, nicht nur unter der Liste. Bewusst
   dezent, aber mit echtem Kontrast: --muted liegt bei 4,8:1 auf --bg, das
   Kennzeichen darf nicht das erste sein, was jemand nicht mehr entziffert.
   Der Titel erklärt beim Draufzeigen, was das Kürzel bedeutet. */
.ki-badge {
  display: inline-block;
  padding: 1px 6px;
  border: 1px solid var(--border);
  border-radius: 5px;
  background: var(--bg-soft);
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.6px;
  line-height: 1.6;
  white-space: nowrap;
  cursor: help;
}
/* Im Fliesstext der Methodik-Seite: gleiche Optik, aber an der Schriftlinie
   ausgerichtet statt als eigener Block. */
.ki-badge-inline { vertical-align: baseline; cursor: default; }

/* Rechtshinweis über dem News-Grid. Kein Kleingedrucktes: Er steht vor der
   ersten Einordnung und muss lesbar sein, darum --text statt --muted. */
.news-rechtshinweis {
  margin-top: 10px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  max-width: 780px;
}
.news-rechtshinweis a {
  color: var(--accent-ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.fineprint a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Kontaktformular ---------- */
.kontakt-form { margin-top: 22px; max-width: 560px; }
.kontakt-form textarea {
  width: 100%;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  /* 16px-Regel: Unter 16px zoomt iOS beim Antippen automatisch in das Feld
     hinein und die Seite steht danach schief. Nicht kleiner setzen. */
  font-size: 16px;
  font-family: inherit;
  line-height: 1.55;
  resize: vertical;
}
.kontakt-form textarea:focus,
.kontakt-form select:focus { outline: 2px solid var(--accent-ink); outline-offset: 1px; }
.kontakt-form select {
  width: 100%;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 16px;
  font-family: inherit;
}
.kontakt-hinweis { font-size: 12.5px; margin: 16px 0 14px; }
.kontakt-ok {
  border: 1px solid var(--good);
  background: var(--good-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-top: 18px;
}
.kontakt-ok h2 { margin-top: 0; }

/* Honigtopf gegen Spam-Bots: für Menschen unsichtbar, für Bots ein Feld wie
   jedes andere. Bewusst NICHT display:none und nicht visibility:hidden --
   manche Bots werten genau das aus und lassen solche Felder dann leer. */
.honigtopf {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Hinweis auf Nutzungsbedingungen/Datenschutz am Registrieren-Knopf.
   Bewusst NICHT --muted: Dieser Satz bezieht die Bedingungen in den Vertrag
   ein, er muss ohne Mühe lesbar sein. */
.auth-agb {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
  margin: 4px 0 14px;
}
.auth-agb a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Nur für Screenreader ---------- */
/* Text, der vorgelesen, aber nicht angezeigt wird -- z.B. <caption> einer
   Tabelle, deren Überschrift optisch schon darüber steht.
   BEWUSST NICHT display:none oder visibility:hidden: Beides nimmt das Element
   auch aus der Vorlesereihenfolge, der Text wäre also für niemanden da. Die
   1px-Clip-Technik lässt es im Baum, macht es aber unsichtbar. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- News-Zeilen auf schmalen Screens ---------- */
/* Die Etiketten heissen seit 2026-08-14 "Nachrichten klar positiv" statt
   "Bullish" und sind damit ~150px breit. Nebeneinander mit dem Text blieben
   auf einem 375px-Screen nur ~120px fuer die Einordnung uebrig: gemessen
   14 Zeilen Umbruch fuer einen Satz. Darum stapeln: Etikett und
   KI-Kennzeichen als eigene Zeile ueber dem Text, Ticker darunter. */
@media (max-width: 640px) {
  .sector-news-row { flex-direction: column; gap: 6px; }
  .sector-news-signal { flex-direction: row; align-items: center; gap: 6px; }
  .sector-news-main { width: 100%; }
  .sector-news-tickers { width: 100%; }
}