/*
 * bankdaten.css — Ergaenzung zu zinsrechner.css fuer die beiden Bankdaten-Tools
 * (IBAN-Rechner, Bankleitzahlen- und BIC-Suche) auf modern-banking.de.
 *
 * zinsrechner.css ist Voraussetzung und wird NICHT angefasst: Tokens, Eingabe-Karte,
 * Felder, Segmented-Pills, Button, Fehlerbox, Kennzahl-Karten und Detailtabelle kommen
 * von dort. Hier steht nur, was es dort nicht gibt:
 *   - Kennzahl-Werte, die lange Zeichenketten tragen (IBAN, BIC) statt Betraege
 *   - Kopier-Schaltflaeche an der Kennzahl
 *   - Status-Karte gueltig/ungueltig fuer die IBAN-Pruefung
 *   - aufklappbare Trefferkarten der Suche (ersetzt die alte Detailseite)
 *
 * Alles unter dem Wrapper-Scope .zr — kein Konflikt mit style.css.
 * DE-only (Bankleitzahl und BIC-Bestand der Deutschen Bundesbank).
 */

/* ---- Kennzahl mit langer Zeichenkette ---------------------------
 * Die Betrags-KPI von zinsrechner.css rechnet mit ~12 Zeichen. Eine IBAN hat 22,
 * in Papierform 27 — deshalb eigene Groesse, Ziffernabstand und ein Umbruch, der
 * die Karte in schmalen Containern nicht sprengt. */
.zr-kpi-wert--kette {
  font-size: 20px;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
@container zr (min-width: 26em) { .zr-kpi-wert--kette { font-size: 23px; } }
.zr-kpi-wert--kette-klein { font-size: 17px; letter-spacing: .03em; }
@container zr (min-width: 26em) { .zr-kpi-wert--kette-klein { font-size: 19px; } }

/* Leitkennzahl ueber die volle Rasterbreite. Anders als ein Geldbetrag passt eine
   22-stellige IBAN nicht in eine halbe Spalte — sie braeche mitten in der Zahl um.
   Nebeneffekt: die beiden folgenden Karten fuellen das Zweierraster sauber aus. */
.zr-kennzahlen .bd-kpi-voll { grid-column: 1 / -1; }

/* Zusatzzeile unter dem Kennzahl-Wert (Bankname, Ort, Einordnung) */
.bd-kpi-sub {
  display: block;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.4;
  margin-top: var(--zr-sp-2);
  color: var(--zr-text-70);
}
.zr-kpi--haupt .bd-kpi-sub { color: rgba(0, 69, 120, .82); }

/* ---- Kopier-Schaltflaeche ---------------------------------------
 * Nur mit JS sinnvoll (Zwischenablage), deshalb ueber .zr-js eingeblendet. */
.bd-copy { display: none; }
.zr-js .bd-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--zr-sp-3);
  background: rgba(0, 69, 120, .12);
  color: var(--zr-primary-darker);
  border: 1px solid rgba(0, 69, 120, .28);
  border-radius: var(--zr-r-s);
  padding: 7px 12px;
  font: 600 12px/1 -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.zr-js .bd-copy:hover { background: rgba(0, 69, 120, .2); }
.zr-js .bd-copy:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(0, 69, 120, .35); }
/* Auf den dunklen Karten (nicht --haupt) dreht sich der Kontrast um */
.zr-kpi:not(.zr-kpi--haupt) .bd-copy {
  background: rgba(255, 255, 255, .12);
  color: var(--zr-weiss);
  border-color: rgba(255, 255, 255, .28);
}
.zr-kpi:not(.zr-kpi--haupt) .bd-copy:hover { background: rgba(255, 255, 255, .2); }
.bd-copy::before {
  content: "";
  width: 13px; height: 13px;
  flex: 0 0 auto;
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23004578' stroke-width='1.6'%3E%3Crect x='5.5' y='5.5' width='8' height='9' rx='1.5'/%3E%3Cpath d='M10.5 3.5H3.9c-.8 0-1.4.6-1.4 1.4v6.6'/%3E%3C/svg%3E");
}
.zr-kpi:not(.zr-kpi--haupt) .bd-copy::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='1.6'%3E%3Crect x='5.5' y='5.5' width='8' height='9' rx='1.5'/%3E%3Cpath d='M10.5 3.5H3.9c-.8 0-1.4.6-1.4 1.4v6.6'/%3E%3C/svg%3E");
}
.bd-copy--fertig::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23004578' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
}
.zr-kpi:not(.zr-kpi--haupt) .bd-copy--fertig::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E");
}

/* Das Feldfehler-Symbol (feine Kontur, an der ersten Textzeile ausgerichtet) steht
 * seit v=7 in zinsrechner.css und gilt damit fuer alle fuenf Werkzeuge — hier ist
 * bewusst keine eigene Fassung mehr hinterlegt. */

/* ---- Status-Karte (IBAN-Pruefung) -------------------------------
 * Gueltig traegt die Mint-Hauptkarte aus zinsrechner.css. Ungueltig braucht eine
 * eigene, rote Variante — Farbe allein reicht nicht, deshalb zusaetzlich das
 * Symbol vor dem Text (A11y: nicht nur Farbe). */
.zr-kpi--negativ {
  background: rgba(255, 208, 208, .16);
  border-color: var(--zr-fehler);
}
.zr-kpi--negativ .zr-kpi-wert { color: var(--zr-fehler); }
.bd-status { display: flex; align-items: center; gap: var(--zr-sp-2); }
.bd-status::before {
  content: "";
  flex: 0 0 auto;
  width: 22px; height: 22px;
}
.zr-kpi--haupt .bd-status::before {
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23004578'/%3E%3Cpath d='M6 11.4l3.4 3.4L16 8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.zr-kpi--negativ .bd-status::before {
  background: no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Ccircle cx='11' cy='11' r='10' fill='%23ffd0d0'/%3E%3Cpath d='M7.5 7.5l7 7M14.5 7.5l-7 7' fill='none' stroke='%23a11' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---- Hinweis-Streifen im Ergebnis -------------------------------
 * Fuer Sachverhalte, die das Ergebnis einordnen, ohne es zu entwerten:
 * mehrere BIC zu einer Bankleitzahl, geplante Loeschung, gekuerzte Trefferliste. */
.bd-hinweis {
  border-left: 3px solid var(--zr-kosten);
  background: rgba(255, 181, 158, .12);
  border-radius: 0 var(--zr-r-s) var(--zr-r-s) 0;
  padding: var(--zr-sp-2) var(--zr-sp-3);
  font-size: 12px;
  color: var(--zr-text-70);
  margin: 0 0 var(--zr-sp-3);
}

/* ---- Trefferliste der Suche -------------------------------------
 * Ersetzt bankleitzahlen_details.php: die Detailfelder stecken in jeder Karte und
 * klappen an Ort und Stelle auf. <details>/<summary> arbeiten nativ, also auch
 * ohne JavaScript. */
.bd-trefferzahl {
  font-size: 13px;
  color: var(--zr-text-70);
  margin: 0 0 var(--zr-sp-3);
}
.bd-trefferzahl b { color: var(--zr-weiss); font-weight: 700; }

.bd-liste { margin: 0 0 var(--zr-sp-4); }

.bd-karte {
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--zr-r-m);
  margin-bottom: var(--zr-sp-2);
  transition: background .15s, border-color .15s;
}
.bd-karte:hover { background: rgba(255, 255, 255, .12); }
.bd-karte[open] { background: rgba(255, 255, 255, .12); border-color: rgba(169, 246, 219, .4); }

.bd-karte > summary {
  cursor: pointer;
  padding: var(--zr-sp-3);
  list-style: none;
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr) 14px;
  grid-template-areas:
    "blz name pfeil"
    "bic ort pfeil";
  gap: 2px var(--zr-sp-3);
  align-items: baseline;
}
.bd-karte > summary::-webkit-details-marker { display: none; }
.bd-karte > summary:focus-visible { outline: 2px solid var(--zr-accent); outline-offset: 2px; border-radius: var(--zr-r-m); }

.bd-karte-blz {
  grid-area: blz;
  font-size: 17px;
  font-weight: 700;
  color: var(--zr-weiss);
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
}
.bd-karte-bic {
  grid-area: bic;
  font-size: 12px;
  font-weight: 600;
  color: var(--zr-accent);
  letter-spacing: .03em;
}
.bd-karte-name {
  grid-area: name;
  font-size: 14px;
  font-weight: 600;
  color: var(--zr-text);
  overflow-wrap: anywhere;
}
.bd-karte-ort { grid-area: ort; font-size: 12px; color: var(--zr-text-50); }

/* Pfeil ueber beide Zeilen, damit er in der Karte mittig sitzt */
.bd-karte > summary::after {
  content: "";
  grid-area: pfeil;
  align-self: center;
  width: 8px; height: 8px;
  border-right: 2px solid var(--zr-text-50);
  border-bottom: 2px solid var(--zr-text-50);
  transform: rotate(45deg);
  transition: transform .2s;
}
.bd-karte[open] > summary::after { transform: rotate(-135deg); }

/* Schmaler Container: BLZ/BIC ueber den Namen stapeln statt nebeneinander */
@container zr (max-width: 30em) {
  .bd-karte > summary {
    grid-template-columns: minmax(0, 1fr) 14px;
    grid-template-areas:
      "blz pfeil"
      "bic pfeil"
      "name pfeil"
      "ort pfeil";
    gap: 3px var(--zr-sp-2);
  }
  .bd-karte-name { margin-top: var(--zr-sp-1); }
}

.bd-detail {
  margin: 0;
  padding: 0 var(--zr-sp-3) var(--zr-sp-3);
  display: grid;
  grid-template-columns: minmax(0, 11em) minmax(0, 1fr);
  gap: var(--zr-sp-1) var(--zr-sp-3);
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: var(--zr-sp-3);
  font-size: 13px;
}
/* Die Beschriftungen sind lang ("Bankleitzahllöschung geplant"): umbrechen statt in
   die Wertspalte laufen — ein Ueberlauf legte sich sonst ueber den Wert daneben. */
.bd-detail dt { color: var(--zr-text-50); overflow-wrap: anywhere; }
.bd-detail dd { margin: 0; color: var(--zr-text); overflow-wrap: anywhere; }
/* Auffaellige Werte (geplante Loeschung, Nachfolge-Bankleitzahl) in der Zweitfarbe */
.bd-detail dd.bd-achtung { color: var(--zr-kosten); font-weight: 600; }
@container zr (max-width: 26em) {
  .bd-detail { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bd-detail dt { margin-top: var(--zr-sp-2); }
}

/* ---- Leeres Ergebnis --------------------------------------------- */
.bd-leer {
  background: rgba(255, 255, 255, .06);
  border: 1px dashed rgba(255, 255, 255, .28);
  border-radius: var(--zr-r-l);
  padding: var(--zr-sp-4);
  text-align: center;
  color: var(--zr-text-70);
  font-size: 14px;
}
.bd-leer b { display: block; color: var(--zr-weiss); font-size: 15px; margin-bottom: var(--zr-sp-2); }

/* ---- Hinweise nur ohne JavaScript ---------------------------------
 * Der IBAN-Rechner zeigt ohne JS beide Eingabewege untereinander; mit JS blendet
 * bankdaten.js den nicht gewaehlten aus und der Hinweis ist gegenstandslos. */
.zr-js .bd-nojs { display: none; }

/* Gegenstueck zu .zr-submit-hinweis ("ein Klick ist nicht nötig"): der greift nur
 * mit JS. Ohne JS stuende die Schaltflaeche sonst unkommentiert da, obwohl der
 * Klick dort der einzige Weg zum Ergebnis ist. Gleiche Optik, gleiche Position. */
.bd-submit-nojs {
  font-size: 11px;
  color: var(--zr-text-50);
  margin-top: var(--zr-sp-2);
  text-align: right;
}
.zr-js .bd-submit-nojs { display: none; }

/* ---- Ladezustand der Server-Abfrage -------------------------------
 * Nur mit JS sichtbar: die Bankdaten kommen per fetch, das Ergebnis bleibt
 * solange stehen und wird dezent gedimmt (kein Springen des Layouts). */
.bd-laedt { opacity: .55; transition: opacity .15s; }

/* ---- Ergebnis-Fussnoten ------------------------------------------ */
.bd-quelle { font-size: 11px; color: var(--zr-text-50); margin: var(--zr-sp-2) 0 0; }

/* ---- Erlaeuterungstext unter dem Rechner --------------------------
 * Der Fliesstext der Alt-Seiten, jetzt aufklappbar unter dem Werkzeug. */
/* 4em Luft nach oben: der Textblock soll nicht wie eine Fortsetzung des
   Rechenergebnisses wirken, sondern als eigener Abschnitt lesbar sein. */
.bd-wissen { margin-top: 4em; }
/* Seitlicher Einzug wie im uebrigen Fliesstext der Site (h1 und p tragen dort 5%).
   Explizit fuer ALLE direkten Kinder, nicht nur die Ueberschriften: die Absaetze
   bekaemen ihre 5% zwar aus der globalen p-Regel der style.css, dann haenge die
   Buendigkeit aber an einer fremden Regel. Ueberschreibt sie, addiert sich nicht. */
.zr .bd-wissen > * { padding-left: 5%; padding-right: 5%; }
/* Doppelte Klasse, damit die Angabe die Elementregel h2 aus style.css (1.9em)
   sicher schlaegt, ohne dort etwas zu aendern. */
.zr .bd-wissen-titel.bd-wissen-titel {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--zr-weiss);
  margin: var(--zr-sp-4) 0 var(--zr-sp-3);
}
.zr .bd-wissen-titel.bd-wissen-titel:first-child { margin-top: 0; }
.bd-wissen p { font-size: 13px; color: var(--zr-text-70); margin: 0 0 var(--zr-sp-3); }
.bd-wissen p:last-child { margin-bottom: 0; }
.bd-wissen code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  background: rgba(0, 0, 0, .18);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--zr-weiss);
}

/* ---- Aufbau-Schema der IBAN --------------------------------------
 * Zeigt am konkreten Ergebnis, welcher Abschnitt was bedeutet. */
.bd-schema {
  display: flex;
  flex-wrap: wrap;
  gap: var(--zr-sp-2);
  margin: 0 0 var(--zr-sp-4);
}
.bd-schema-teil {
  flex: 0 1 auto;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--zr-r-s);
  padding: var(--zr-sp-2) var(--zr-sp-3);
  min-width: 0;
}
.bd-schema-wert {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: var(--zr-weiss);
  font-variant-numeric: tabular-nums;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}
.bd-schema-label {
  display: block;
  font-size: 11px;
  color: var(--zr-text-50);
  margin-top: 2px;
}