/* Seitenmuster (AP-D2): Start, Vergleich, Kennzahlen, System; ab AP-S2 Ranglisten, ab AP-K1 Meine Strategien. Seitengerüst und Grundelemente:
   basis.css; Bausteine: bausteine.css. Farben, Abstände, Radien nur über Tokens aus
   design-tokens.css. */

.klein {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.grund {
  color: var(--color-negative);
}

/* --- Start ---------------------------------------------------------------------------- */

.start-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-6);
}

/* --- Vergleich ------------------------------------------------------------------------ */

.annahmen {
  max-width: var(--content-reading-max);
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border-left: var(--space-1) solid var(--color-action);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

.auswahl-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-3) var(--space-6);
}

.ankreuzfeld.gesperrt {
  color: var(--color-text-muted);
}

.zaehler {
  margin-top: var(--space-4);
}

/* Hinweis bei Abweichung: der Text sagt es, die Farbe ergänzt nur */
.ist-abweichung {
  color: var(--color-warning);
  font-weight: var(--font-weight-medium);
}

/* je Position eine Zeile in allen Breiten: Nr. · Ticker/ISIN (flexibel) · % (schmal) */
.vergleich-formular .positionen {
  display: grid;
  gap: var(--space-2);
  max-width: 36rem;
  margin: var(--space-3) 0 var(--space-2);
}

.vergleich-formular .positionen-kopf,
.vergleich-formular .position {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) 6rem;
  gap: var(--space-2);
  align-items: center;
}

.vergleich-formular .position[hidden] {
  display: none;
}

.vergleich-formular .positionen-kopf {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.vergleich-formular .nr {
  color: var(--color-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.vergleich-formular .position .eingabe {
  min-height: var(--control-height-sm);
  padding: var(--space-1) var(--space-2);
}

.positionen-leiste {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  max-width: 36rem;
  margin: 0 0 var(--space-6);
  padding-left: calc(2rem + var(--space-2));
}

.positionen-leiste .feld-hilfe {
  margin: 0;
}

.einstellungen-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-4) var(--space-6);
}

.einstellungen-raster .eingabe-mit-einheit .eingabe {
  max-width: 10rem;
}

.speichern-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3) var(--space-4);
}

.speichern-zeile .feld {
  flex: 1 1 18rem;
  max-width: 28rem;
}

.vergleich-ergebnis {
  scroll-margin-top: var(--space-16);
}

.vergleich-ergebnis:focus {
  outline: none;
}

.vergleich-ergebnis > h2 {
  margin-top: var(--space-8);
}

/* AP-B4b: Rückrechnungen im Vergleich – Hinweis zum gemeinsamen Starttag über der Grafik */
.gemeinsamer-start {
  margin: 0 0 var(--space-4);
}

/* --- Rückrechnungen (AP-B4b) ---------------------------------------------------------- */

.rueckrechnung-formular {
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-4) var(--space-6);
  align-items: start;
}

.rueckrechnung-formular .feld-breit {
  grid-column: 1 / -1;
}

.rueckrechnung-formular .eingabe-mit-einheit .eingabe {
  max-width: 10rem;
}

.feld-titel {
  font-weight: var(--font-weight-medium);
}

.feste-auswahl {
  margin: 0;
}

.fortschritt {
  display: grid;
  gap: var(--space-1);
  margin-top: var(--space-2);
  min-width: 10rem;
}

.fortschritt progress {
  width: 100%;
  height: var(--space-2);
  accent-color: var(--color-action);
}

.fortschritt-text {
  font-variant-numeric: tabular-nums;
}

.leer-satz {
  margin: 0;
  color: var(--color-text-muted);
}

.stand-meldungen:empty {
  display: none;
}

.stand-meldungen {
  margin-top: var(--space-4);
}

.vermerk {
  color: var(--color-warning);
}

.hinweise {
  margin: 0 0 var(--space-6);
  padding-left: var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.kurve-schalter {
  margin: 0 0 var(--space-3);
}

/* K3 (AP-09b): die Kurve nutzt mehr Höhe; die Achse passt sich den Werten an (vergleich.js) */
.kurve {
  height: clamp(22rem, 60vh, 36rem);
}

.zusammensetzung-block + .zusammensetzung-block {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: var(--border-width) solid var(--color-border);
}

.zusammensetzung-titel {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-md);
}

.zusammensetzung-block .hinweise {
  margin: var(--space-3) 0 0;
}

/* --- Kennzahlen ----------------------------------------------------------------------- */

.einleitung-punkte {
  display: grid;
  gap: var(--space-2);
  max-width: var(--content-reading-max);
  margin: 0 0 var(--space-4);
  padding-left: var(--space-5);
}

.katalog-gruppe {
  margin: var(--space-8) 0 var(--space-2);
}

.katalog-tabelle td:first-child {
  min-width: 12rem;
}

.katalog-tabelle td[data-spalte="Erklärung"] {
  min-width: 20rem;
}

/* --- System --------------------------------------------------------------------------- */

.statuskarten {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-6);
  align-items: start;
}

.statuskarte {
  overflow-wrap: anywhere;
}

.statuskarte p:last-child {
  margin-bottom: 0;
}

/* AP-D3 (E-03): Tabelle „Letzte Läufe“ – Zahlspalten so schmal wie ihr Inhalt, der Rest
   (mindestens 16rem) geht an „Grund“ */
.laeufe-tabelle .spalte-schmal {
  width: 1%;
  white-space: nowrap;
}

.laeufe-tabelle .spalte-grund {
  min-width: 16rem;
}

/* AP-R3 (Prüfbericht AP-D3, H-2): Datum und Uhrzeit in einer Zeile */
.laeufe-tabelle .spalte-zeit {
  white-space: nowrap;
}

/* --- Ranglisten (AP-S2) --------------------------------------------------------------- */

/* Übersicht: drei Karten nebeneinander ab 1024 px, darunter untereinander */
.ranglisten-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0 var(--space-6);
  align-items: start;
}

.top-liste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.top-eintrag {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr) auto;
  gap: var(--space-2);
  align-items: baseline;
  padding: var(--space-2) 0;
  border-bottom: var(--border-width) solid var(--color-border);
}

.top-eintrag:last-child {
  border-bottom: 0;
}

.top-rang {
  color: var(--color-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.top-name {
  min-width: 0;
  overflow-wrap: anywhere;
}

.top-punkte,
.rangliste-punkte {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

.ranglisten-universum,
.erklaerung-text {
  max-width: var(--content-reading-max);
}

.erklaerung-text p {
  margin: 0 0 var(--space-3);
}

.erklaerung-text p:last-child {
  margin-bottom: 0;
}

/* Hinweistext E5: unten auf jeder Ranglisten-Seite, kleine Schrift */
.ranglisten-hinweis {
  max-width: var(--content-reading-max);
  margin: var(--space-6) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.ranglisten-befehl {
  margin: 0;
  text-align: center;
}

.filter-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr));
  gap: var(--space-4) var(--space-6);
  align-items: start;
}

.filter-auswahl {
  display: grid;
  gap: var(--space-2);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.filter-formular .formular-aktionen {
  margin-top: var(--space-4);
}

/* Zahlen mit Einheit („7,10 %“, „13,9 Mrd. €“) nicht umbrechen */
.rangliste-tabelle td.zahl {
  white-space: nowrap;
}

/* AP-R3: deutsche Ländernamen („Deutschland“) sind länger als bei EODHD („Germany“) –
   etwas weniger Innenabstand, damit die Liste mit zehn Spalten in die Karte passt */
.rangliste-tabelle th,
.rangliste-tabelle td {
  padding-right: var(--space-3);
  padding-left: var(--space-3);
}

/* Prüfbefund M1: lange Spaltenköpfe („Momentum 6 Monate (Gleichstand)“) umbrechen, damit die
   Tabelle auch bei 1024 px ganz in die Karte passt */
.rangliste-tabelle thead th {
  white-space: normal;
  vertical-align: bottom;
}

/* AP-R3 (Prüfbericht AP-B3, H6): Auswahl am Stichtag – Name und Spaltenkopf „Rang (0–100)“
   brechen nicht mitten im Wort bzw. in der Klammer um */
.rangliste-tabelle td.auswahl-name {
  min-width: 12rem;
}

.rangliste-tabelle .spalte-rang {
  white-space: nowrap;
}

/* Die Liste blendet am Handy Nebenspalten aus statt seitlich zu wischen */
.rangliste-liste .wischhinweis {
  display: none;
}

/* Aktienansicht: Kopf je Verfahren (Punkte, Kaufkandidat) */
.bewertung-kopf {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-8);
  margin: 0 0 var(--space-4);
}

.bewertung-kopf dt {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.bewertung-kopf dd {
  margin: 0;
}

.bewertung-summe {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
}

.kriterium-grund {
  color: var(--color-text-muted);
}

.kriterien-tabelle td.zelle-name {
  min-width: 12rem;
}

/* AP-R4 (Prüfbericht AP-S2 H5): Hinweistext der Karten auf der Aktienseite einheitlich unter
   dem Titel, nicht je nach Länge daneben oder darunter */
.bewertung .karte-kopf,
.fair-value-karte .karte-kopf {
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-1);
}

/* AP-R4 (K-01): Kriterien eines Verfahrens aufklappbar; Abstand zur Tabelle */
.bewertung-kriterien[open] > summary {
  margin-bottom: var(--space-2);
}

/* --- Aktie im Zeitverlauf (AP-W1) ------------------------------------------------------- */

/* AP-R4 (K-01, K-08): Karte „Wert nach historischer Bewertung (Fair Value)“ als eigene Karte
   direkt unter dem Kasten „Aktie“; der Kurs steht im Untertitel */
.fair-value-karte .karte-untertitel {
  color: var(--color-text);
  font-size: var(--font-size-md);
  font-variant-numeric: tabular-nums lining-nums;
}

.verlauf-jahre-titel {
  margin: var(--space-8) 0 var(--space-2);
  font-size: var(--font-size-md);
}

.fair-value-tabelle td.zahl {
  white-space: nowrap;
}

/* Grundlage: am Desktop als Text, am Handy aufklappbar (Responsiv unten) */
.fair-value-grundlage-schmal {
  display: none;
}

.fair-value-grundlage-schmal p {
  margin: var(--space-1) 0 0;
}

.fair-value-verweis {
  margin: var(--space-3) 0 0;
  font-size: var(--font-size-sm);
}

.fair-value-wert {
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
}

.fair-value-grund {
  color: var(--color-text-muted);
}

/* Hinweistext E7: kleine Schrift unter der Karte */
.fair-value-hinweis {
  max-width: var(--content-reading-max);
  margin: var(--space-3) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* vier Grafiken: zwei nebeneinander ab 1024 px, darunter untereinander */
.verlauf-raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-8) var(--space-6);
}

.verlauf-raster .diagramm-flaeche {
  height: var(--chart-min-height);
}

.verlauf-jahre-tabelle td.zahl {
  white-space: nowrap;
}

/* AP-R4 (K-05): Spaltenköpfe dürfen umbrechen, schmalere Zellen – die Tabelle passt bei 1440
   und 1024 px ganz in die Karte; am Handy bleibt der Wisch-Hinweis */
.verlauf-jahre-tabelle thead th {
  white-space: normal;
  vertical-align: bottom;
}

.verlauf-jahre-tabelle th,
.verlauf-jahre-tabelle td {
  padding-right: var(--space-2);
  padding-left: var(--space-2);
}

.verlauf-jahre-tabelle abbr[title],
.kennwerte-tabelle abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

/* AP-R4 (K-10): Kennwerte unter jeder Grafik als kleine Tabelle (heute, Mittel, Tief) */
.kennwerte {
  margin-top: var(--space-3);
}

.kennwerte .wischhinweis {
  display: none;
}

.kennwerte-tabelle {
  font-size: var(--font-size-sm);
}

.kennwerte-tabelle th,
.kennwerte-tabelle td {
  padding: var(--space-1) var(--space-2);
}

.kennwerte-tabelle td.zahl {
  white-space: nowrap;
}

.kennwerte-monat {
  display: block;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* K-04: Erklärung der Markierung „über 60“ direkt an der Grafik */
.diagramm-kappung {
  margin: var(--space-2) 0 0;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

/* --- Meine Strategien (AP-K1) ----------------------------------------------------------- */

/* Knopf „Für meine Strategie merken“ bzw. „Gemerkt ✓“ + „Entfernen“ in einer Zeile */
.merk-formular {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

/* Variantenzähler (E12): gut sichtbar über dem Formular */
.varianten {
  max-width: var(--content-reading-max);
  margin: 0 0 var(--space-6);
  padding: var(--space-4) var(--space-5);
  border-left: var(--space-1) solid var(--color-warning);
  border-radius: var(--radius-sm);
  background: var(--color-warning-bg);
}

.varianten-zahl {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-medium);
}

.varianten-wert {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  font-variant-numeric: tabular-nums lining-nums;
}

.varianten-satz {
  margin: 0;
}

/* Gewichte-Tabelle: kompakte Eingaben, Anteil nicht umbrechen */
.eingabe-kompakt {
  min-height: var(--control-height-sm);
  padding: var(--space-1) var(--space-2);
}

.eingabe-gewicht {
  max-width: 6rem;
}

.gewichte-tabelle td.zelle-name {
  min-width: 14rem;
}

.gewichte-tabelle output {
  font-variant-numeric: tabular-nums lining-nums;
  white-space: nowrap;
}

/* Verteilung auf die Familien (E10): je Familie Name, Balken (<meter>), Prozent */
.familien-titel {
  margin: var(--space-6) 0 var(--space-3);
  font-size: var(--font-size-md);
}

.familien {
  display: grid;
  gap: var(--space-2);
  max-width: 36rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.familie {
  display: grid;
  grid-template-columns: 8rem minmax(0, 1fr) 4.5rem;
  gap: var(--space-3);
  align-items: center;
}

.familie-balken {
  width: 100%;
  height: var(--space-3);
  accent-color: var(--color-action);
}

/* Balkenfarbe aus dem Aktions-Token statt Browser-Grün (Grün ist Statusfarben vorbehalten) */
.familie-balken::-webkit-meter-bar {
  background: var(--color-canvas-dense);
  border: 0;
  border-radius: var(--radius-pill);
}

.familie-balken::-webkit-meter-optimum-value {
  background: var(--color-action);
  border-radius: var(--radius-pill);
}

.familie-balken::-moz-meter-bar {
  background: var(--color-action);
  border-radius: var(--radius-pill);
}

.familie-wert {
  text-align: right;
  font-variant-numeric: tabular-nums lining-nums;
}

.familien-hinweis {
  max-width: var(--content-reading-max);
  margin: var(--space-4) 0 0;
  padding: var(--space-3) var(--space-4);
  border-left: var(--space-1) solid var(--color-info);
  border-radius: var(--radius-sm);
  background: var(--color-info-bg);
}

.familien-hinweis[hidden] {
  display: none;
}

.ankreuzfeld-abstand {
  margin-top: var(--space-4);
}

.fehlerliste {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
}

/* Rangliste: Note groß, Wert klein darunter */
.eigene-rangliste .note {
  display: block;
  font-weight: var(--font-weight-medium);
}

/* --- Responsiv ------------------------------------------------------------------------ */

@media (min-width: 64rem) {
  .statuskarten {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* AP-K1: vier Karten – zwei nebeneinander, ab 100rem alle vier */
  .ranglisten-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .verlauf-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 75rem) {
  .start-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

@media (min-width: 100rem) {
  .ranglisten-raster {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 74.99rem) {
  .katalog-tabelle td:first-child,
  .katalog-tabelle td[data-spalte="Erklärung"] {
    min-width: 0;
  }

  /* Prüfbefund M1: auf dem Tablet schmalere Zellen, damit alle Spalten in die Karte passen */
  .rangliste-tabelle th,
  .rangliste-tabelle td {
    padding: var(--space-2) var(--space-2);
  }

  /* AP-R3: Mindestbreite des Namens (Auswahl am Stichtag) nur am Desktop */
  .rangliste-tabelle td.auswahl-name {
    min-width: 8rem;
  }
}

@media (max-width: 47.99rem) {
  .kurve {
    height: 20rem;
  }

  /* AP-S2 (E3): am Handy bleiben Rang, Name und Punkte */
  .rangliste-tabelle .spalte-neben {
    display: none;
  }

  .kriterien-tabelle td.zelle-name {
    min-width: 0;
  }

  /* AP-R4 (K-08): am Handy Wert und Abstand in einer Zeile, Grundlage aufklappbar */
  .fair-value-tabelle tbody tr {
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: var(--space-4);
  }

  .fair-value-tabelle tbody th,
  .fair-value-tabelle .fair-value-grund,
  .fair-value-tabelle .fair-value-grundlage {
    grid-column: 1 / -1;
  }

  .fair-value-grundlage-breit {
    display: none;
  }

  .fair-value-grundlage-schmal {
    display: block;
  }

  .kennwerte-tabelle th,
  .kennwerte-tabelle td {
    padding: var(--space-1);
  }

  /* AP-R3: am Handy darf ein sehr langes Wort im Namen umbrechen */
  .rangliste-tabelle td.auswahl-name {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .formular-aktionen .knopf {
    width: 100%;
  }

  .gewichte-tabelle td.zelle-name {
    min-width: 0;
  }

  .familie {
    grid-template-columns: 6.5rem minmax(0, 1fr) 4rem;
    gap: var(--space-2);
  }

  /* AP-B4b: gestapelte Zeilen – „Abbrechen“ (Formular) nach dem Namen, Befehlshinweis zuletzt */
  .auftraege-tabelle .zeilenaktionen > form {
    order: 2;
    justify-self: start;
  }

  .ergebnisse-tabelle .zeilenaktionen > .metadaten {
    order: 6;
  }
}

/* K1 (AP-09b): auch auf dem Handy bleibt je Position eine Zeile; nur die Nummer wird schmaler */
@media (max-width: 700px) {
  .vergleich-formular .positionen-kopf,
  .vergleich-formular .position {
    grid-template-columns: 1.5rem minmax(0, 1fr) 5.5rem;
  }

  .positionen-leiste {
    padding-left: 0;
  }
}