/* Wird als letzte Datei geladen. Hier stehen nur Korrekturen an Regeln, die der
   Entwurf fuer die Entwurfsansicht gesetzt hatte und die auf einer echten Seite
   nicht aufgehen. Alles andere gehoert in gemeinsam.css oder die Seiten-CSS. */

/* Kopf mit Suchfeld auf schmalen Schirmen: Suche in eine zweite Zeile.
   Vorher ragten Sprachumschalter und Taste rechts aus dem Bild (gemessen bei
   390px: 452px breit). */
@media (max-width: 720px) {
  .kopf-innen { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 10px; }
  .suche { order: 3; flex: 1 1 100%; margin: 4px 0 0; max-width: none; }
  .kopf-rechts { margin-left: auto; gap: 10px; }
}

/* Tabellen, die breiter sind als der Schirm, rollen in ihrem Rahmen und nicht
   mit der ganzen Seite. */
.tafel-rolle, .tabellenrolle { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Fuss: eigene Spaltenaufteilung, weil der Fuss jetzt aus der Huelle kommt. */
@media (max-width: 1024px) { .fuss-raster { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 720px)  { .fuss-raster { grid-template-columns: 1fr; } }

/* --- Trefferliste der Suche --------------------------------------------- */
.trefferliste { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 2px; }
.trefferliste a {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 16px; align-items: baseline;
  padding: 12px 14px; border: 1px solid transparent; border-radius: 8px;
}
.trefferliste a:hover { background: var(--panel); border-color: var(--rule); }
.trefferliste .tick { font-size: 13px; color: var(--tinte3); margin-left: 8px; }
.trefferliste .treffer-note { font-size: 13px; color: var(--tinte2); white-space: nowrap; }
.trefferliste .treffer-branche { grid-column: 1 / -1; font-size: 13px; color: var(--tinte3); }

/* --- Nachbarn im Sektor -------------------------------------------------- */
.nachbarn { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
.nachbar { border: 1px solid var(--rule); border-radius: 12px; padding: 16px 18px; }
.nachbar .was { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--tinte3); margin-bottom: 8px; }
.nachbar a { text-decoration: none; }
.nachbar a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.pflicht table td:first-child { white-space: nowrap; color: var(--tinte2); vertical-align: top; }
@media (max-width: 720px) { .nachbarn { grid-template-columns: 1fr; } }

/* --- Rechenweg je Verfahren, aufklappbar -------------------------------- */
.verfahren { border-top: 1px solid var(--rule); }
.verfahren summary {
  cursor: pointer; padding: 14px 0; font-weight: 600; font-size: 15.5px;
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.verfahren summary::-webkit-details-marker { display: none; }
.verfahren summary::before { content: "+"; color: var(--teal-tief); font-weight: 400; font-size: 18px; width: 14px; }
.verfahren[open] summary::before { content: "−"; }
.verfahren summary:hover { color: var(--teal-tief); }
.verfahren .tabellenrolle { margin-bottom: 20px; }
@media (pointer: coarse) { .verfahren summary { min-height: 44px; } }

/* --- Taste als Link ------------------------------------------------------
   Im Entwurf war das ein <button>, deshalb griff `.kfz a { color: inherit }`
   nie. Als <a> gewinnt diese Regel (gleiche Spezifitaet, aber spaeter in der
   Seiten-CSS), und die Schrift wurde schwarz auf schwarz: die Taste sah aus wie
   ein leerer Kasten. Hier steht sie nach allem anderen. */
.kfz a.taste { color: var(--papier); }
.kfz a.taste:hover { color: var(--papier); background: #000; }
.kfz a.taste.leise { color: var(--tinte); }

/* Treffer sind Kacheln, keine Fliesstext-Verweise: ohne Unterstreichung. */
.trefferliste a, .trefferliste a:hover { text-decoration: none; }
.trefferliste a b { color: var(--tinte); }


/* ==========================================================================
   Pruefung vom 13.10.2026, alle Seiten in drei Breiten (1440, 768, 390 px)
   ========================================================================== */

/* --- Balken ---------------------------------------------------------------
   Die Fuellung ist ein <span>, also ein Inline-Element, und dem sind Breite und
   Hoehe egal: alle Notenbalken standen leer. Dazu kam die Breite als style-Attribut,
   und das verbietet die Inhaltsrichtlinie (style-src 'self') live ohnehin. Die
   Breite steht jetzt als Klasse w-0 bis w-100 in Schritten von 5. */
.leiter-fuell { display: block; height: 100%; width: 0; }
.leiter-fuell.w-0{width:0%}.leiter-fuell.w-5{width:5%}.leiter-fuell.w-10{width:10%}.leiter-fuell.w-15{width:15%}.leiter-fuell.w-20{width:20%}
.leiter-fuell.w-25{width:25%}.leiter-fuell.w-30{width:30%}.leiter-fuell.w-35{width:35%}.leiter-fuell.w-40{width:40%}.leiter-fuell.w-45{width:45%}
.leiter-fuell.w-50{width:50%}.leiter-fuell.w-55{width:55%}.leiter-fuell.w-60{width:60%}.leiter-fuell.w-65{width:65%}.leiter-fuell.w-70{width:70%}
.leiter-fuell.w-75{width:75%}.leiter-fuell.w-80{width:80%}.leiter-fuell.w-85{width:85%}.leiter-fuell.w-90{width:90%}.leiter-fuell.w-95{width:95%}
.leiter-fuell.w-100{width:100%}
.summe-wert { text-align: right; white-space: nowrap; }

/* Restliche Inline-Stile aus den Vorlagen, als Klassen. */
.weiter.ohne-abstand { margin-top: 0; }
.beispielband.grau { border-left-color: var(--tinte3); }

/* --- Seitenrand -----------------------------------------------------------
   Die schmalen Randwerte standen nur in den Seiten-CSS. Seiten, die allein
   gemeinsam.css laden (Impressum, Datenschutz, Risikohinweis, Platzhalter),
   behielten 72px, und .rechtstext setzte den Rand per padding-Kurzschrift auf 0:
   auf dem Telefon stand der Text am Glas. */
@media (max-width: 1024px) { .kfz { --rand: 40px; } }
@media (max-width: 720px)  { .kfz { --rand: 20px; } }
.bahn.rechtstext { padding-left: var(--rand); padding-right: var(--rand); }

/* --- Kopf -----------------------------------------------------------------
   Gemessen: bei 768px war der Kopf 817px breit, die Wartelisten-Taste lag zur
   Haelfte ausserhalb und wurde abgeschnitten. Auf dem Telefon brach die Navigation
   ungeordnet um, der klebende Kopf war bis zu 208px hoch und nahm ein Viertel des
   Schirms, und auf Aktienseiten verschwand die Suche ganz.
   Unter 960px: oben Marke und Tasten in einer Zeile, darunter Navigation oder Suche
   ueber die volle Breite. Der Kopf klebt dann nicht mehr, sondern rollt mit weg. */
.marke { white-space: nowrap; flex: none; }
.kopf-rechts { flex: none; }
@media (max-width: 960px) {
  .kopf { position: relative; }
  .kopf-innen { flex-wrap: wrap; height: auto; column-gap: 12px; row-gap: 0;
                padding-top: 12px; padding-bottom: 12px; }
  .kopf-rechts { margin-left: auto; gap: 10px; }
  .kopf .nav {
    display: flex; order: 3; flex: 1 1 100%; gap: 22px;
    overflow-x: auto; scrollbar-width: none;
    margin: 12px calc(var(--rand) * -1) -12px; padding: 11px 48px 12px var(--rand);
    border-top: 1px solid var(--rule);
    /* Rechts blendet die Leiste aus: so sieht man, dass dahinter noch etwas kommt. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
  }
  .kopf .nav::-webkit-scrollbar { display: none; }
  .kopf .nav a { white-space: nowrap; }
  .kopf .suche { display: flex; order: 3; flex: 1 1 100%; max-width: none; margin: 12px 0 0; }
}
@media (max-width: 420px) {
  .marke { font-size: 17px; }
  .kopf .taste { padding: 8px 12px; font-size: 13.5px; }
  .kopf .sprache > * { padding: 5px 8px; }
}

/* --- Startkarte als Verweis ---------------------------------------------- */
.kfz a.karte-verweis { display: block; color: inherit; text-decoration: none; }
.karte-weiter { color: var(--teal-tief); font-weight: 600; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .kfz a.karte-verweis:hover { transform: translateY(-2px); border-color: var(--tinte3); }
}

/* --- Erklaertabellen: Kennzahlen und Burggraben ----------------------------
   Die dritte Spalte ist Fliesstext. Rechtsbuendig las sie sich wie eine Zahl, sie
   begann oberhalb der Note, und die Zeile zerfiel in drei Ecken. Jetzt: oben
   ausgerichtet, Text links, Bezeichnung und Punkte schmal. */
.kfz table.erklaer td, .kfz table.angaben td { vertical-align: top; }
.kfz table.erklaer th:first-child, .kfz table.erklaer td:first-child { width: 10.5em; padding-right: 16px; }
.kfz table.erklaer th:nth-child(2), .kfz table.erklaer td:nth-child(2) { width: 4.5em; text-align: left; white-space: nowrap; }
.kfz table.erklaer th:last-child, .kfz table.erklaer td:last-child { text-align: left; }
.kfz table.erklaer td:first-child, .kfz table.erklaer td:nth-child(2) { padding-top: 14px; }
.kfz table.angaben td:first-child { width: 13em; padding-right: 24px; }
.kfz table.angaben td:last-child { text-align: left; }

/* Nur die Zahlenreihe ist wirklich breit. Vorher bekam jede Tabelle 620px
   Mindestbreite: auf dem Telefon lagen die Werte der Bewertungsspanne ausserhalb
   des Rahmens, sichtbar war nur die Spalte mit den Namen. */
.tabellenrolle table { min-width: 0; }
.tabellenrolle.breit table { min-width: 620px; }

@media (max-width: 720px) {
  /* Erklaertabellen werden Karten: Bezeichnung und Punkte in einer Zeile, der Text
     darunter ueber die volle Breite. */
  .kfz table.erklaer thead { display: none; }
  .kfz table.erklaer tr {
    display: grid; grid-template-columns: 1fr auto; column-gap: 12px;
    padding: 14px 0; border-bottom: 1px solid var(--rule);
  }
  .kfz table.erklaer td { display: block; width: auto; padding: 0; border: 0; }
  .kfz table.erklaer td:first-child { color: var(--tinte); font-weight: 600; }
  .kfz table.erklaer td:nth-child(2) { text-align: right; }
  .kfz table.erklaer td:last-child { grid-column: 1 / -1; margin-top: 6px; font-size: 14.5px; }

  .kfz table.angaben tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .kfz table.angaben td { display: block; width: auto; padding: 0; border: 0; white-space: normal; }
  .kfz table.angaben td:first-child { font-size: 12.5px; color: var(--tinte3); margin-bottom: 3px; }

  /* Zahlenreihe: das Jahr bleibt beim seitlichen Rollen stehen, sonst weiss man
     nach dem ersten Wischen nicht mehr, welche Zeile man liest. */
  .tabellenrolle.breit th:first-child, .tabellenrolle.breit td:first-child {
    position: sticky; left: 0; z-index: 1; background: var(--papier); padding-right: 12px;
  }
}

/* Rechtsbuendige Kopfzeilen ohne Abstand nach links stiessen aneinander
   ("REIHEJAHRE"). Jede Spalte ausser der ersten haelt Abstand zur Nachbarin. */
.kfz table th + th, .kfz table td + td { padding-left: 14px; }
.kfz td.reihe { white-space: nowrap; }

/* --- Urteilsblock: Erklaerung links statt im Kasten -----------------------
   Neben dem Notenkasten stand links unter dem Ergebnissatz eine 450px hohe
   Leerflaeche, waehrend der Kasten mit dem langen Erklaertext endlos wurde. Die
   Erklaerung steht jetzt unter dem Satz; auf schmalen Schirmen rutscht sie hinter
   die Balken, damit die Noten direkt unter dem Ergebnis folgen. */
.kfz .urteil-erklaer { margin: 28px 0 0; max-width: 54ch; font-size: 14.5px; line-height: 1.65; color: var(--tinte2); }
.urteil-erklaer b { color: var(--tinte); }
@media (max-width: 1024px) {
  .urteil-links { display: contents; }
  .urteil-raster .notenblock { order: 1; }
  .urteil-raster .leitern { order: 2; }
  .kfz .urteil-erklaer { order: 3; margin-top: 0; }
}

/* Metazeile: sieben Felder passen in eine Zeile, statt eines allein in die zweite
   zu schicken. */
.meta { column-gap: 22px; }

/* Pfeil und Text der Herleitung: das Leerzeichen im content verschluckt das
   Inline-Block-Element, also Abstand per Rand. */
.herleitung > summary::before { margin-right: 5px; }

/* Lange Branchennamen ("Services-Prepackaged Software") duerfen umbrechen; sonst
   schieben sie das letzte Feld der Metazeile allein in eine zweite Zeile. */
.meta div:has(.sektor-name) { max-width: 13em; }

/* ==========================================================================
   Methode, Historischer Test, Universum
   Dieselben Bausteine wie die Aktienseite (.abschnitt, .unterzeile, .fussnote,
   Tabellen aus aktie.css), dazu nur, was es dort nicht gibt.
   ========================================================================== */
.seitenkopf { padding: 56px 0 8px; border-bottom: 1px solid var(--rule); }
.seitenkopf h1 { font-size: 40px; letter-spacing: -0.022em; margin: 0 0 16px; }
.kfz .seitenkopf .vorspann { font-size: 18px; line-height: 1.6; color: var(--tinte2); max-width: 64ch; margin: 0; }
.kfz .seiten-zeile { margin: 18px 0 32px; font-size: 13.5px; color: var(--tinte3); }
@media (max-width: 720px) {
  .seitenkopf { padding-top: 36px; }
  .seitenkopf h1 { font-size: 30px; }
  .kfz .seitenkopf .vorspann { font-size: 16.5px; }
}

.kfz .absatz { font-size: 15.5px; line-height: 1.65; color: var(--tinte2); max-width: 72ch; margin: 0 0 18px; }
.kfz .kernsatz { font-family: var(--schrift-anzeige); font-size: 23px; line-height: 1.35;
                 letter-spacing: -0.012em; max-width: 40ch; margin: 4px 0 28px; }
.kfz h3.zwischen { font-size: 18px; margin: 40px 0 10px; }

.kfz ul.punkte { list-style: none; padding: 0; margin: 4px 0 8px; max-width: 76ch; display: grid; gap: 12px; }
.kfz ul.punkte li { position: relative; padding-left: 20px; font-size: 15.5px; line-height: 1.6; color: var(--tinte2); }
.kfz ul.punkte li::before { content: ""; position: absolute; left: 2px; top: .7em; width: 6px; height: 6px;
                            border-radius: 50%; background: var(--teal); }
.kfz ul.punkte li b { color: var(--tinte); }

.kfz .klein { display: block; font-size: 12.5px; line-height: 1.45; color: var(--tinte3); margin-top: 3px; font-weight: 400; }

/* Schwellentabellen: Kennzahl links, fuenf Stufen rechts. Auf dem Telefon rollt
   sie seitlich, die Kennzahl bleibt dabei stehen (.breit, siehe oben). */
.kfz table.schwellen td, .kfz table.schwellen th { vertical-align: top; }
.kfz table.schwellen td:first-child, .kfz table.schwellen th:first-child { width: 42%; text-align: left; padding-right: 16px; }
.kfz table.schwellen td.zahl { white-space: nowrap; }

.kfz table.ergebnis td.wert { color: var(--tinte); }

/* Universum */
.abschnitt.abschnitt-eng { padding-top: 32px; }
.filterzeile { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; flex-wrap: wrap; }
.filterzeile .feld { flex: 1 1 320px; max-width: 460px; }
.treffer-zahl { font-size: 13.5px; color: var(--tinte3); }
.kfz table.universum td { vertical-align: top; text-align: left; }
.kfz table.universum th:nth-child(2), .kfz table.universum td.noten { width: 13em; }
.kfz table.universum th:last-child, .kfz table.universum td:last-child { text-align: right; width: 4em; }
.kfz table.universum td.wert { font-size: 16px; }
.kfz table.universum .tick { font-size: 12.5px; color: var(--tinte3); margin-left: 6px; }
.kfz table.universum a { color: inherit; text-decoration: none; }
.kfz table.universum a:hover b { text-decoration: underline; text-underline-offset: 3px; }
.noten { white-space: nowrap; }
.noten span { display: inline-block; min-width: 2.7em; font-size: 12.5px; color: var(--tinte2);
              font-variant-numeric: tabular-nums; }
@media (max-width: 720px) {
  .kfz table.universum th:nth-child(2), .kfz table.universum td.noten { display: none; }
}

/* Verweise im Fliesstext: `.kfz a { color: inherit }` macht sie sonst unsichtbar. */
.kfz .absatz a, .kfz ul.punkte a, .kfz .fussnote a {
  color: var(--teal-tief); text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
/* Kurze Zuordnungen (Verfahren und Obergrenze) nicht ueber die ganze Breite ziehen. */
.kfz table.kompakt { width: auto; min-width: 0; }
.kfz table.kompakt td:first-child { width: auto; padding-right: 48px; }
.kfz table.kompakt td:last-child { text-align: right; }
/* Filterfeld der Universumsliste, im Stil des Suchfelds im Kopf. */
.filterzeile .feld {
  font: inherit; font-size: 15px; color: var(--tinte);
  background: var(--panel); border: 1px solid var(--rule); border-radius: 8px;
  padding: 10px 14px; min-height: 44px;
}
.filterzeile .feld:focus { outline: 2px solid var(--teal); outline-offset: 1px; background: var(--papier); }
.filterzeile .feld::placeholder { color: var(--tinte3); }

/* Ohne Gesamtpunkte: graue Kachel. Gruen heisst "Note vorhanden", und der weisse
   Strich darauf war kaum zu sehen. */
.kfz .note-gross.leer { background: var(--senke); color: var(--tinte2); }

/* Breite Tabellen rollen auf dem Telefon seitlich. Ohne Hinweis sieht man nur die
   erste Spalte und haelt den Rest fuer nicht vorhanden. Nur dort sichtbar, wo die
   Tabelle tatsaechlich rollt. */
.kfz .wischhinweis { display: none; }
@media (max-width: 720px) {
  .kfz .wischhinweis { display: block; margin: 0 0 6px; font-size: 12.5px; color: var(--tinte3); }
  .kfz .wischhinweis::before { content: "↔ "; }
}