/* ZinsAdmin Frontend v1.0 */

/* ===== Variables ===== */
:root {
    --za-blue: #185FA5;
    --za-blue-light: #E6F1FB;
    --za-blue-dark: #0C447C;
    --za-green: #0F6E56;
    --za-green-light: #E1F5EE;
    --za-green-dark: #085041;
    --za-red: #A32D2D;
    --za-red-light: #FCEBEB;
    --za-red-dark: #791F1F;
    --za-amber: #BA7517;
    --za-amber-light: #FAEEDA;
    --za-amber-dark: #633806;
    /* Leicht verstaerkt (vorher #F7FAFC): gegenueber Weiss lag das Verhaeltnis bei
       1,048 und war auf vielen Bildschirmen kaum zu sehen. Jetzt 1,086 - immer
       noch dezent, aber verlaesslich als Flaeche erkennbar. Der Ton bleibt leicht
       blaustichig, passend zum Markenblau. Gilt fuer alle 21 Verwendungen
       (Tabellenkoepfe, Sekundaerbutton, Rechnerflaechen, Karten) - bewusst EIN
       Wert statt eines zweiten Tokens, damit die Flaechen einheitlich bleiben.
       Hinweis: das ist eine Gestaltungsfrage, keine Barrierefreiheitsanforderung -
       fuer reine Flaechen ohne Bedeutungstraeger gibt es keinen Mindestkontrast. */
    --za-gray-50: #F2F6FA;
    /* EIGENER Ton fuer Hover-Zustaende auf Flaechen.
       Vorher diente --za-gray-50 beiden Rollen: als ruhige Flaeche (Zebra-Zeilen,
       Tabellenkoepfe) UND als Hover-Farbe. Auf einer Zebra-Zeile war der Hover
       damit unsichtbar, weil beide denselben Wert hatten. Zwei Rollen, zwei
       Tokens - sonst kollidiert es beim naechsten Feinschliff wieder.
       Werte: 1,20 zu Weiss und 1,11 zur Zebra-Zeile - auf beiden erkennbar. */
    --za-hover: #E3EBF6;
    --za-gray-100: #EDF2F7;
    --za-gray-300: #E2E8F0;
    --za-gray-500: #718096;
    --za-gray-700: #4A5568;
    --za-gray-900: #1A202C;
    --za-radius: 12px;
    --za-radius-sm: 8px;
    --za-border: 1px solid var(--za-gray-300);
    --za-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

/* ===== Base ===== */
.za { color: #222628; line-height: 1.6; }
.za p { line-height: 28px; }
.za *, .za *::before, .za *::after { box-sizing: border-box; }

/* ===== Section Card ===== */
.za-sec {
    position: relative;
    margin-top: 80px;
    background: #fff;
    border: var(--za-border);
    border-radius: 12px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: var(--za-shadow);
}

/* Dauerhafte, automatische Loesung: eine .za-sec-Box OHNE Marker-Tab (.za-marker)
   braucht immer den kleineren Abstand - unabhaengig davon, ob irgendwo manuell
   .za-sec-tight ergaenzt wurde. Das greift auch bei Boxen, die direkt im
   Seiten-Content stehen (nicht in einer PHP-Datei, in der ich eine Klasse
   nachtragen koennte). .za-sec-tight bleibt als explizite Klasse an den
   bestehenden Stellen weiterhin bestehen (redundant, aber risikofrei), diese
   Regel deckt einfach jeden Fall zusaetzlich ab, auch kuenftige. */
.za-sec:not(:has(.za-marker)) { margin-top: 40px; }

.za-sec-title {
    font-size: 28px;
    font-weight: 600;
    margin: 0 0 20px;
    color: #185FA5;
}

.za-marker {
    position: absolute;
    top: -1px;
    transform: translateY(-100%);
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    padding: 6px 16px;
    background: #185FA5;
    border: 1px solid #E2E8F0;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    z-index: 1;
    line-height: 1.4;
}

.za-sec-sub {
    font-size: 18px;
    margin: 0 0 24px;
    color: var(--za-gray-900);
    margin: 0 0 20px;
}

.za-sec-intro {
    font-size: 18px;
    color: #222628;
    line-height: 1.7;
    margin: 0 0 24px;
}

.za-sec-intro p {
    margin: 0 0 12px;
}

.za-sec-intro p:last-child {
    margin-bottom: 0;
}

/* Ratgeber: "Das Wichtigste in Kuerze"-Box (Haken-Liste statt Fliesstext-Absatz,
   sonst identische Optik wie .za-sec-intro - gleiche Farben/Groessen). */
.za-ratgeber-intro {
    font-size: 18px;
    color: #222628;
    line-height: 1.7;
    margin: 0 0 24px;
}
.za-ratgeber-intro p { margin: 0 0 10px; }
.za-ratgeber-intro p:last-child { margin-bottom: 0; }
.za-ratgeber-intro ul { margin: 0; padding: 0; list-style: none; }
.za-ratgeber-intro li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.za-ratgeber-intro li:last-child { margin-bottom: 0; }
.za-ratgeber-intro li::before { content: ''; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border-radius: 50%; background: var(--za-blue-light); }
.za-ratgeber-intro li::after { content: '\2713'; position: absolute; left: 3px; top: 3px; font-size: 14px; font-weight: 700; color: var(--za-blue); }

/* Reduzierter Abstand fuer .za-sec-Boxen OHNE Marker-Tab: 50% des Bankseiten-Werts
   (80px). .za-sec selbst NICHT geaendert, damit Boxen MIT Tab (die den vollen
   Abstand brauchen, um Platz fuer den Tab zu lassen) unangetastet bleiben - z.B.
   auf Bankseiten. Allgemein einsetzbar, nicht auf Ratgeber-Seiten beschraenkt
   (auch z.B. auf der Kurznews-Uebersicht genutzt). */
.za-sec-tight { margin-top: 40px; }

/* Autor-Box am Ratgeber-Artikelende (#tg-autor): dort ist .za-fazit-autor der einzige
   Boxinhalt (kein vorangehender Fliesstext wie bei der Bankseiten-Fazit-Box), daher
   braucht es die dortige Trennlinie/den Extra-Abstand nicht - nur das gleichmaessige
   Padding der umgebenden .za-sec (oben/unten je 24px). Scoped per ID, Bankseiten-Variante
   (#tg-fazit .za-fazit-autor) bleibt unveraendert. */
#tg-autor .za-fazit-autor { margin-top: 0; border-top: 0; padding-top: 0; }

/* Ratgeber: Fliesstext-Typografie innerhalb za_ratgeber_content (H2-Hauptabschnitte,
   H3-Unterabschnitte, Absaetze, Listen, Links, Tabellenabstand). EIN durchgehendes
   Feld ohne Kachel-Unterteilung, siehe za_ratgeber_content-Template. Basiswerte
   (Schriftgroesse/Abstaende) 1:1 von .za-fazit-content uebernommen - das ist das
   sitesweite Standardstyling fuer Fliesstext auf den Bankseiten (18px, nicht 16px). */
.za-ratgeber-content { font-size: 18px; color: #222628; line-height: 1.7; }
.za-ratgeber-content p { margin: 0 0 12px; }
.za-ratgeber-content p:last-child { margin-bottom: 0; }
.za-ratgeber-content h2 { font-size: 26px; font-weight: 600; color: var(--za-blue); margin: 40px 0 16px; }
.za-ratgeber-content h2:first-child { margin-top: 0; }
.za-ratgeber-content h3 { font-size: 20px; font-weight: 600; color: var(--za-gray-900); margin: 28px 0 12px; }
.za-ratgeber-content h3:first-child { margin-top: 0; }
.za-ratgeber-content ul, .za-ratgeber-content ol { margin: 0 0 12px; padding-left: 20px; }
.za-ratgeber-content li { margin-bottom: 4px; }
.za-ratgeber-content a { color: var(--za-blue); text-decoration: underline; }
.za-ratgeber-content a:hover { text-decoration: none; }
.za-ratgeber-content table { margin: 20px 0; }

/* Ratgeber: Quellen-Linkliste */
.za-ratgeber-quellen-list { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.7; color: #222628; }
.za-ratgeber-quellen-list li { margin-bottom: 8px; }
.za-ratgeber-quellen-list a { color: var(--za-blue); text-decoration: underline; }
.za-ratgeber-quellen-list a:hover { text-decoration: none; }

/* ===== Navigation Bar ===== */
/* =====================================================================
   SUB-NAVIGATION der Bankseiten (v3.14.0)
   Vorher: weisse, schwebende Leiste mit hellgrauen Links. Die inaktiven Links
   lagen bei einem Kontrast von 4,02 zu Weiss - unter dem AA-Mindestwert von 4,5.
   Jetzt: durchgehende dunkle Leiste am oberen Rand, aktiver Punkt als helle
   Pille. Alle Zustaende liegen deutlich ueber 4,5.
   ===================================================================== */
.za-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Ueber die volle Breite, nicht schwebend im Container */
    /* Volle Breite OHNE Ueberlauf: statt das Element auf 100vw zu ziehen (was die
       Scrollbarbreite mitzaehlt und die Seite seitlich verschiebbar macht), wird
       die Farbe per Schatten ueber den Rand hinaus gemalt und mit clip-path nach
       oben und unten begrenzt. Das Element selbst bleibt exakt containerbreit -
       es kann also gar kein waagerechtes Scrollen entstehen. */
    box-shadow: 0 0 0 100vmax var(--za-blue-dark);
    clip-path: inset(0 -100vmax);
    margin-top: -2rem;   /* hebt das Polster des Seitencontainers auf */
    margin-bottom: 24px;
    background: var(--za-blue-dark);
    /* Ecken ausdruecklich zuruecksetzen: eine Altregel weiter unten im Stylesheet
       setzte hier 12px (schwebende Leiste), siehe Hinweis dort. */
    border-radius: 0;
}

.za-nav-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    /* Dieselbe Containerbreite und derselbe Innenabstand wie Seitenkopf und
       Inhaltsbereich - dadurch beginnen Logo, erste Sprungmarke und die
       Inhaltsbox auf einer senkrechten Linie. Vorher hatte die Leiste eine
       eigene Breite (1200px) und war zentriert, sodass das Auge bei jedem
       Abschnitt neu ansetzen musste. */
    max-width: var(--gb-container-width, 1200px);
    margin: 0 auto;
    padding: 0 32px;
}

.za-nav-links {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    flex: 1;
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    white-space: nowrap;
    padding: 8px 0;
}
.za-nav-links::-webkit-scrollbar { display: none; }

.za-nav-links a {
    font-size: 15px;
    font-weight: 500;
    /* 6,45 zu #0C447C - deutlich ueber dem AA-Mindestwert */
    color: #C3D3E5;
    text-decoration: none;
    padding: 9px 16px;
    border-radius: 999px;
    flex-shrink: 0;
    transition: background-color .15s, color .15s;
}
.za-nav-links a:hover,
.za-nav-links a:focus-visible {
    color: #fff;
    background: rgba(255, 255, 255, 0.14);
}
/* Aktiver Punkt als helle Pille - 9,84 zu Weiss */
.za-nav-links a.active {
    color: var(--za-blue-dark);
    background: #fff;
    font-weight: 600;
}


@media (hover: none) {
    /* Kein klebender Hover-Hintergrund nach dem Antippen */
    .za-nav-links a:hover { background: transparent; color: #C3D3E5; }
    .za-nav-links a.active:hover { background: #fff; color: var(--za-blue-dark); }
}


/* ===== Badge ===== */
.za-bdg {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: var(--za-radius-sm);
    line-height: 1.4;
}

.za-bdg-teal { background: var(--za-green-light); color: var(--za-green-dark); }
.za-bdg-blue { background: var(--za-blue-light); color: var(--za-blue-dark); }
.za-bdg-amber { background: var(--za-amber-light); color: var(--za-amber-dark); }
.za-bdg-red { background: var(--za-red-light); color: var(--za-red-dark); }
.za-bdg-green { background: var(--za-green-light); color: var(--za-green-dark); }

/* ===== Hero (Full Width + Metric Boxes) ===== */
.za-hero-wrap {
    background: #fff;
    border-radius: var(--za-radius);
    padding: 8px 32px 28px 32px;
    margin-bottom: 20px;
    box-shadow: var(--za-shadow);
}

.za-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.za-metric {
    background: var(--za-gray-50);
    border-radius: var(--za-radius-sm);
    padding: 14px 16px;
    text-align: center;
}

.za-metric-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--za-gray-500);
    margin: 0 0 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.za-metric-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--za-blue);
    margin: 0;
}

.za-hero-wrap h1 {
    font-size: 32px;
    font-weight: 600;
    margin: 0 0 16px;
    line-height: 1.3;
    color: var(--za-blue);
}

.za-hero-intro {
    font-size: 18px;
    line-height: 1.4;
    color: var(--za-gray-900);
    margin: 0;
}

.za-hero-intro a { color: var(--za-blue); text-decoration: underline; }
.za-hero-intro a:hover { text-decoration: none; }
.za-hero-intro strong { font-weight: 600; }

.za-hero-intro p { margin: 0; }

/* ===== Sidebar Cards ===== */
.za-sb-card {
    background: #fff;
    border-radius: var(--za-radius);
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: var(--za-shadow);
}

.za-sb-card h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--za-gray-900);
}

/* Sidebar: Author */
.za-sb-autor-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.za-sb-autor-av {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--za-blue-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 15px;
    color: var(--za-blue-dark);
    flex-shrink: 0;
}

.za-sb-autor-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.za-sb-autor-name {
    font-weight: 600;
    font-size: 14px;
    margin: 0;
    color: var(--za-gray-900);
}

.za-sb-autor-rolle {
    font-size: 12px;
    color: var(--za-gray-500);
    margin: 2px 0 0;
    line-height: 1.5;
}

/* Sidebar: Bewertung */
.za-sb-logo-wrap {
    text-align: center;
    margin-bottom: 14px;
}

.za-sb-logo {
    max-width: 140px;
    height: auto;
}

.za-sb-bw-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    padding: 5px 0;
}

.za-sb-bw-label { color: var(--za-gray-500); }
.za-sb-bw-stars { color: var(--za-amber); font-size: 14px; letter-spacing: 1px; }

.za-sb-bw-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    margin-top: 8px;
    border-top: 1px solid var(--za-gray-100);
    font-size: 13px;
}

.za-sb-bw-total-label { font-weight: 600; color: var(--za-gray-900); }
.za-sb-bw-total-val { font-weight: 600; }

.za-sb-cta {
    display: block;
    margin-top: 14px;
    padding: 11px;
    background: #ff9c11;
    color: #fff;
    border-radius: var(--za-radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: background 0.15s;
}

.za-sb-cta:hover { background: var(--za-blue-dark); color: #fff; }
.za-sb-cta svg { vertical-align: -3px; margin-right: 4px; }

.za-sb-date {
    font-size: 11px;
    color: var(--za-gray-500);
    text-align: center;
    margin: 10px 0 0;
}

/* Sidebar: Alternativen */
.za-sb-alt-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--za-gray-100);
    font-size: 14px;
}

.za-sb-alt-item:last-of-type { border-bottom: none; }
.za-sb-alt-name { font-weight: 600; color: var(--za-gray-900); }
.za-sb-alt-dur { font-size: 12px; color: var(--za-gray-500); }
.za-sb-alt-rate { font-weight: 600; color: var(--za-blue); }

.za-sb-alt-more {
    font-size: 13px;
    color: var(--za-blue);
    text-decoration: none;
    font-weight: 600;
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.za-sb-alt-more:hover { text-decoration: underline; }

/* ===== Layout (Content + Sidebar Grid) ===== */
.za-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

.za-layout-main { min-width: 0; }

.za-layout-sidebar {
    
    top: 60px;
    margin-top: 2rem;
}

/* ===== Pro / Con ===== */
.za-procon {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.za-procon-col h3 {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.za-procon-col ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.za-procon-col li {
    font-size: 18px;
    padding: 8px 0;
    border-bottom: 1px solid var(--za-gray-100);
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.5;
}

.za-procon-col li:last-child { border-bottom: none; }

.za-ico-pro { color: var(--za-green); flex-shrink: 0; margin-top: 2px; }
.za-ico-con { color: var(--za-red); flex-shrink: 0; margin-top: 2px; }

/* ===== Rechner ===== */
.za-calc {
    padding: 0;
}

.za-calc-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: stretch;
}

.za-calc-col-title {
    font-size: 18px;
    color: #185FA5;
    font-weight: 600;
    color: #222628;
    margin: 0 0 16px;
}

.za-calc-left, .za-calc-right {
    display: flex;
    flex-direction: column;
}

.za-calc-left .za-calc-slider {
    background: #F7FAFC;
    padding: 20px 24px;
    border-radius: 8px;
    margin-bottom: 12px;
    flex: 1;
}

.za-calc-right .za-calc-result {
    background: var(--za-blue-light);
    border-radius: var(--za-radius-sm);
    padding: 16px 20px;
    margin-bottom: 12px;
    flex: 1;
}

.za-calc-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--za-gray-900);
}

.za-calc-slider-val {
    font-weight: 600;
    color: var(--za-gray-900);
}

.za-calc input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    appearance: none;
    background: #cbd5e0;
    border-radius: 3px;
    outline: none;
}

.za-calc input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--za-blue);
    border-radius: 50%;
    cursor: pointer;
}

.za-calc input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--za-blue);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.za-calc-right .za-calc-result:last-child { margin-bottom: 0; }

.za-calc-result-val {
    font-size: 22px;
    font-weight: 600;
    color: var(--za-blue);
    display: block;
    margin: 0;
}

.za-calc-result-label {
    font-size: 18px;
    color: var(--za-gray-900);
    display: block;
    margin: 0;
}

.za-calc-result-sub {
    font-size: 14px;
    font-weight: 400;
    color: #4A7FBA;
}

/* Info tooltip on result box */
.za-calc-result-info {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.za-calc-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #B5D4F4;
    color: #185FA5;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    font-style: normal;
}

.za-calc-info-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    background: #E6F1FB;
    color: #185FA5;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 8px;
    border: 0.5px solid #B5D4F4;
    white-space: nowrap;
    z-index: 10;
    line-height: 1.6;
}

.za-calc-info-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 16px;
    border: 5px solid transparent;
    border-top-color: #E6F1FB;
}

.za-calc-result-info:hover .za-calc-info-tip {
    display: block;
}

.za-calc-col-toggle {
    margin-bottom: 12px;
}

.za-calc-col-toggle-spacer {
    height: 34px;
}

.za-calc-detail {
    font-size: 18px;
    color: var(--za-gray-500);
    margin-top: 16px;
    margin-bottom: 0;
    text-align: right;
}

/* Sliders row (used in Vergleich wechsel-rechner) */
.za-calc-sliders {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.za-calc-sliders .za-calc-slider {
    flex: 1;
    min-width: 0;
    background: #F7FAFC;
    padding: 20px 24px;
    border-radius: 8px;
}

/* Results row (used in Vergleich wechsel-rechner) */
.za-calc-results {
    display: flex;
    gap: 16px;
}

.za-calc-results .za-calc-result {
    flex: 1;
    background: var(--za-blue-light);
    border-radius: var(--za-radius-sm);
    padding: 16px;
}

/* Monthly Bars */
.za-bars-section {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--za-gray-100);
}

.za-bars-title {
    font-size: 18px;
    font-weight: 600;
    color: #222628;
    margin: 0 0 12px;
}

.za-bars-chart {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 120px;
    position: relative;
}

.za-bar {
    flex: 1;
    border-radius: 3px 3px 0 0;
    min-width: 0;
    position: relative;
    transition: height 0.2s;
}

.za-bar-ak { background: #185FA5; }
.za-bar-bk { background: #CBD5E0; }

.za-bar-tip {
    position: absolute;
    top: -18px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.za-bar-ak .za-bar-tip { color: #185FA5; }
.za-bar-bk .za-bar-tip { color: #718096; }

.za-bars-divider {
    position: absolute;
    bottom: 0;
    top: 0;
    border-left: 2px dashed #E8960F;
    z-index: 1;
}

.za-bars-divider span {
    position: absolute;
    top: -18px;
    left: 4px;
    font-size: 11px;
    font-weight: 600;
    color: #E8960F;
    white-space: nowrap;
}

.za-bars-months {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    border-top: 1px solid var(--za-gray-100);
    padding-top: 4px;
}

.za-bars-months span {
    flex: 1;
    text-align: center;
    font-size: 10px;
    color: #718096;
}

.za-bars-summary {
    display: flex;
    gap: 12px;
    margin-top: 16px;
}

.za-bars-sum {
    flex: 1;
    border-radius: var(--za-radius-sm);
    padding: 12px 14px;
    text-align: center;
}

.za-bars-sum-val {
    font-size: 18px;
    font-weight: 600;
    display: block;
}

.za-bars-sum-lbl {
    font-size: 13px;
    display: block;
    margin-top: 2px;
}

.za-bars-sum.ak { background: #F7FAFC; }
.za-bars-sum.ak .za-bars-sum-val { color: #185FA5; }
.za-bars-sum.ak .za-bars-sum-lbl { color: #718096; }

.za-bars-sum.bk { background: #F7FAFC; }
.za-bars-sum.bk .za-bars-sum-val { color: #718096; }
.za-bars-sum.bk .za-bars-sum-lbl { color: #718096; }

.za-bars-sum.total { background: #E6F1FB; }
.za-bars-sum.total .za-bars-sum-val { color: #185FA5; }
.za-bars-sum.total .za-bars-sum-lbl { color: #185FA5; }

/* ===== Rendite-Tabelle (Edge-to-Edge Striped) ===== */
#tg-rendite.za-sec {
    padding: 0;
    overflow: hidden;
}

#tg-rendite .za-sec-title {
    padding: 24px 28px 4px;
    margin: 0;
}

#tg-rendite .za-sec-sub {
    padding: 0 28px 12px;
}

/* Amount Tags */
.za-rtable-tags {
    display: flex;
    gap: 8px;
}

.za-rtable-tag {
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--za-gray-700);
    background: var(--za-gray-50);
    border: 1px solid var(--za-gray-300);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    outline: none;
}

.za-rtable-tag:focus { outline: none; box-shadow: none; }

.za-rtable-tag:hover {
    background: var(--za-gray-100);
    border-color: var(--za-gray-500);
}

.za-rtable-tag-active {
    background: var(--za-blue);
    color: #fff;
    border-color: var(--za-blue);
}

.za-rtable-tag-active:hover {
    background: var(--za-blue-dark);
    border-color: var(--za-blue-dark);
    color: #fff;
}

/* Table */
.za-rtable {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    color: var(--za-gray-900);
    border: none;
}

.za-rtable thead {
    border-bottom: 1px solid var(--za-gray-300);
}

.za-rtable th {
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: var(--za-gray-900);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 12px 28px;
    border: none;
    background: var(--za-gray-50);
}

.za-rtable td {
    padding: 14px 28px;
    border: none;
    color: var(--za-gray-900);
}

.za-rtable tbody tr:nth-child(odd) { background: #fff; }
.za-rtable tbody tr:nth-child(even) { background: var(--za-gray-50); }
.za-rtable tbody tr:hover { background: #edf2f7; }

.za-rtable .za-val-good { color: var(--za-blue); font-weight: 600; }
.za-rtable .za-val-warn { color: var(--za-red); font-weight: 600; }

/* Unified Tip/Hinweis Style */
.za-tip {
    font-size: 18px;
    margin: 16px 28px 24px;
    padding: 12px 16px;
    background: var(--za-amber-light);
    border-radius: var(--za-radius-sm);
    color: var(--za-amber-dark);
    display: block;
    line-height: 1.6;
}

.za-tip svg { display: inline; vertical-align: -2px; margin-right: 6px; }
.za-tip a { color: var(--za-amber-dark); font-weight: 600; text-decoration: underline; }
.za-tip a:hover { text-decoration: none; }

.za-tip-muted {
    background: var(--za-gray-50);
    color: var(--za-gray-500);
}

/* Toggle Switch */
.za-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
}

.za-toggle input { display: none; }

.za-toggle-slider {
    display: block;
    position: relative;
    width: 38px;
    height: 22px;
    background: var(--za-gray-300);
    border-radius: 11px;
    transition: background 0.2s;
    flex-shrink: 0;
}

.za-toggle-slider::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.za-toggle input:checked + .za-toggle-slider {
    background: var(--za-blue);
}

.za-toggle input:checked + .za-toggle-slider::after {
    transform: translateX(16px);
}

.za-toggle-label {
    color: var(--za-gray-700);
    font-weight: 600;
}

/* Controls row (tags + toggle) */
.za-rtable-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 28px 16px;
    flex-wrap: wrap;
    gap: 12px;
}

/* ===== Konditionen Table (Edge-to-Edge Striped) ===== */
#tg-konditionen.za-sec {
    padding: 0;
    overflow: hidden;
}

#tg-konditionen .za-sec-title {
    padding: 24px 28px 16px;
    margin: 0;
}

/* Tab-Marker: old inline styles removed, see .za-marker above */

.za-kond-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 18px;
    color: var(--za-gray-900);
    border: none;
}

.za-kond-table th,
.za-kond-table td {
    text-align: left;
    padding: 14px 28px;
    vertical-align: top;
    border: none;
}

.za-kond-table th {
    font-weight: 600;
    color: var(--za-gray-900);
    width: 200px;
    white-space: nowrap;
}

/* Wiederverwendung von .za-kond-table ausserhalb des edge-to-edge #tg-konditionen
   (z.B. in Ratgeber-Artikeln): dort hat die umgebende .za-sec bereits eigenes
   Padding, das volle Zellen-Padding wuerde sich sonst addieren. */
.za-sec:not(#tg-konditionen) .za-kond-table th,
.za-sec:not(#tg-konditionen) .za-kond-table td { padding-left: 0; padding-right: 24px; }
.za-sec:not(#tg-konditionen) .za-kond-table th:last-child,
.za-sec:not(#tg-konditionen) .za-kond-table td:last-child { padding-right: 0; }

.za-kond-table td {
    color: var(--za-gray-900);
    font-weight: 400;
}

/* Striped rows ? no borders */
.za-kond-table tr:nth-child(odd) { background: var(--za-gray-50); }
.za-kond-table tr:nth-child(even) { background: #fff; }

/* Hover */
.za-kond-table tr:hover { background: #edf2f7; }

/* Zinsen groups */
.za-kond-group-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--za-gray-500);
    margin-bottom: 0;
    margin-top: 10px;
}

.za-kond-group-label:first-child { margin-top: 0; }

.za-kond-tier {
    font-size: 16px;
    padding: 2px 0;
    color: var(--za-gray-900);
}

/* Small subtext */
.za-kond-small {
    font-size: 13px;
    color: var(--za-gray-500);
    font-weight: 400;
}

/* Website link */
.za-kond-link {
    color: var(--za-blue);
    text-decoration: none;
}

.za-kond-link:hover { text-decoration: underline; }

/* Hinweis box ? matches .za-tip style */
.za-kond-hinweis {
    margin: 16px 28px 24px;
    padding: 12px 16px;
    background: var(--za-amber-light);
    border-radius: var(--za-radius-sm);
    color: var(--za-amber-dark);
    font-size: 13px;
    line-height: 1.6;
}

.za-kond-hinweis .za-kond-hinweis-title {
    font-weight: 600;
    font-size: 18px;
    color: var(--za-amber-dark);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.za-kond-hinweis .za-kond-hinweis-title svg { color: var(--za-amber-dark); flex-shrink: 0; }

.za-kond-hinweis p {
    font-size: 18px;
    color: var(--za-amber-dark);
    margin: 0;
    line-height: 1.6;
}

/* ===== Bewertung ===== */
.za-bw-category {
    margin-bottom: 16px;
}

.za-bw-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0 6px;
    border-bottom: 1px solid var(--za-gray-100);
}

.za-bw-cat-label {
    font-size: 18px;
    font-weight: 600;
    color: #222628;
}

.za-bw-cat-score {
    font-size: 18px;
    font-weight: 600;
    color: var(--za-blue);
}

.za-bw-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px 8px 16px;
    font-size: 18px;
}

.za-bw-row-label { flex: 1; color: #222628; }

.za-bw-bar-wrap {
    width: 120px;
    height: 6px;
    background: var(--za-gray-100);
    border-radius: 3px;
    overflow: hidden;
}

.za-bw-bar {
    height: 6px;
    border-radius: 3px;
    background: var(--za-blue);
    transition: width 0.6s ease;
}

.za-bw-row-score {
    font-weight: 600;
    min-width: 45px;
    text-align: right;
    color: var(--za-gray-500);
    font-size: 14px;
}

.za-bw-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
    padding: 16px 20px;
    background: var(--za-blue-light);
    border-radius: var(--za-radius-sm);
}

.za-bw-total-score {
    font-size: 28px;
    font-weight: 600;
    color: var(--za-blue);
}

.za-bw-total-label {
    font-size: 18px;
    color: var(--za-blue);
    margin-left: 8px;
}

.za-bw-total-note {
    font-size: 18px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: var(--za-radius-sm);
}

/* ===== Alternativen ===== */
.za-alt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.za-alt-card {
    background: #fff;
    border: var(--za-border);
    border-radius: var(--za-radius);
    padding: 16px;
    text-align: center;
    transition: border-color 0.15s;
}

.za-alt-card:hover { border-color: var(--za-blue); }
.za-alt-card.za-alt-current { border: 2px solid var(--za-blue); }

.za-alt-name { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
.za-alt-rate { font-size: 24px; font-weight: 600; color: var(--za-blue); margin: 0; }
.za-alt-detail { font-size: 13px; color: var(--za-gray-500); margin: 4px 0 0; }
.za-alt-score { font-size: 13px; margin-top: 10px; }

/* ===== Er?ffnung Timeline ===== */
.za-timeline {
    display: flex;
    position: relative;
    margin-top: 12px;
}

.za-timeline::before {
    content: '';
    position: absolute;
    top: 22px;
    left: 24px;
    right: 24px;
    height: 2px;
    background: var(--za-gray-300);
}

.za-tl-step {
    flex: 1;
    text-align: center;
    position: relative;
    z-index: 1;
}

.za-tl-dot {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--za-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.za-tl-dot svg { width: 20px; height: 20px; stroke: var(--za-blue); fill: none; stroke-width: 2; }

.za-tl-title { font-size: 14px; font-weight: 600; margin: 0; }
.za-tl-desc { font-size: 12px; color: var(--za-gray-500); margin: 2px 0 0; }

/* ===== Vergleich & Gauge ===== */
#tg-vergleich.za-sec { padding: 0; overflow: hidden; }
#tg-vergleich .za-sec-title { padding: 24px 28px 4px; margin: 0; }
#tg-vergleich .za-sec-title + p { padding: 0 28px 8px; }

.za-gauge-section {
    margin: 0 0 10px 0;
    padding: 16px 28px 0;
}

.za-gauge-track {
    width: 100%;
    margin: 0 0 20px;
}

.za-gauge-range {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
}

.za-gauge-range-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--za-gray-500);
}

.za-gauge-bar {
    height: 10px;
    border-radius: 5px;
    background: linear-gradient(to right, #22943e, #5cb85c, #8cc152, #c4d42e, #e8c430, #e89f30, #e87830, #d94545);
    position: relative;
}

.za-gauge-dot {
    position: absolute;
    top: 50%;
    transform: translateX(-50%);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 3px solid #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    margin-top: -11px;
    cursor: pointer;
    transition: transform 0.15s;
}

.za-gauge-dot:hover { transform: translateX(-50%) scale(1.2); }

.za-gauge-dot-bank { background: #185FA5; }
.za-gauge-dot-avg { background: #E8960F; }
.za-gauge-dot-ezb { background: #1a202c; }

/* Tooltip */
.za-gauge-tt {
    display: none;
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    background: #E6F1FB;
    color: #185FA5;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 10px;
    border-radius: 6px;
    pointer-events: none;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

.za-gauge-tt::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -4px;
    border: 4px solid transparent;
    border-top-color: #E6F1FB;
}

.za-gauge-dot:hover .za-gauge-tt { display: block; }

/* Legend left-aligned, vertical, inline values */
.za-gauge-legend {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.za-gauge-legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--za-gray-700);
}

.za-gauge-legend-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex-shrink: 0;
}

.za-gauge-legend-item strong {
    font-size: 16px;
    font-weight: 600;
    margin-left: 4px;
}

.za-gauge-text {
    font-size: 18px;
    color: #222628;
    line-height: 1.6;
    padding: 0 28px;
    margin: 0;
}

/* Wechsel Calculator */
.za-wechsel-section {
    padding: 24px 28px;
    margin: 0 0 24px;
}

.za-wechsel-section h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--za-gray-900);
    margin: 0 0 4px;
}

.za-wechsel-desc {
    font-size: 15px;
    color: var(--za-gray-500);
    margin: 0 0 16px;
}

.za-wechsel-diff-box {
    background: var(--za-blue-light);
}

/* Vergleich Alternativen */
.za-vergleich-alts {
    margin: 0 0 20px;
}

.za-vergleich-alts h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--za-gray-900);
    margin: 0 0 12px;
    padding: 0 28px;
}

/* Toggles row */
.za-calc-toggles {
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

/* Hausbank input box (unified style) */
.za-calc-hb-box {
    background: #F7FAFC;
    padding: 20px 24px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.za-calc-hb-title {
    font-size: 18px;
    font-weight: 600;
    color: #222628;
    margin: 0 0 10px;
}

.za-calc-hb-box .za-calc-slider-header {
    font-size: 18px;
}

.za-calc-hb-box input[type="range"] {
    width: 100%;
    height: 6px;
    -webkit-appearance: none;
    background: #cbd5e0;
    border-radius: 3px;
    outline: none;
    margin-bottom: 12px;
}

.za-calc-hb-box input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 20px;
    height: 20px;
    background: var(--za-blue);
    border-radius: 50%;
    cursor: pointer;
}

.za-calc-hb-box input[type="range"]::-moz-range-thumb {
    width: 20px;
    height: 20px;
    background: var(--za-blue);
    border-radius: 50%;
    cursor: pointer;
    border: none;
}

.za-calc-hb-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 18px;
    color: var(--za-gray-700);
}

.za-calc-hb-row select {
    padding: 8px 12px;
    font-size: 18px;
    font-family: inherit;
    border: 1px solid var(--za-gray-300);
    border-radius: var(--za-radius-sm);
    background: #fff;
    outline: none;
}

.za-calc-hb-row select:focus { border-color: var(--za-blue); }

.za-bars-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 8px;
}

/* ===== Zinshistorie Chart ===== */
.za-zh-tabs {
    display: flex;
    gap: 6px;
    padding: 0 28px 16px;
}

.za-zh-tab {
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: var(--za-gray-700);
    background: var(--za-gray-50);
    border: 1px solid var(--za-gray-300);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.15s;
    outline: none;
}

.za-zh-tab:focus { outline: none; box-shadow: none; }

.za-zh-tab-active {
    background: var(--za-blue);
    color: #fff;
    border-color: var(--za-blue);
}

.za-chart-wrap {
    padding: 0 28px;
    margin-bottom: 12px;
}

.za-chart-legend {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 0 28px 8px;
}

.za-chart-legend-item {
    font-size: 13px;
    color: var(--za-gray-700);
    display: flex;
    align-items: center;
    gap: 6px;
}

.za-chart-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ===== Schnell-Check ===== */
.za-sc-items {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.za-sc-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 0.5px solid #E2E8F0;
}

.za-sc-item:first-child { padding-top: 0; }
.za-sc-item:last-child { border-bottom: none; padding-bottom: 0; }

.za-sc-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.za-sc-content { flex: 1; }

.za-sc-q {
    color: #185FA5;
    font-size: 18px;
    font-weight: 600;
    color: #222628;
    margin: 0 0 4px;
}

.za-sc-a {
    font-size: 18px;
    color: #222628;
    line-height: 1.6;
    margin: 0;
}

.za-sc-a strong { font-weight: 600; }
.za-sc-a a { color: var(--za-blue); text-decoration: underline; }
.za-sc-a a:hover { text-decoration: none; }

/* ===== Fazit ===== */
.za-fazit-content {
    font-size: 18px;
    line-height: 1.7;
    color: #222628;
    padding: 0 4px;
}

.za-fazit-content a { color: var(--za-blue); text-decoration: underline; }
.za-fazit-content a:hover { text-decoration: none; }
.za-fazit-content p { margin: 0 0 12px; }
.za-fazit-content p:last-child { margin-bottom: 0; }
.za-fazit-content ul, .za-fazit-content ol { margin: 0 0 12px; padding-left: 20px; }
.za-fazit-content li { margin-bottom: 4px; }

/* ===== CTA ===== */
.za-cta-row {
    display: flex;
    gap: 12px;
    margin: 24px 0;
}

.za-cta-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: #ff9c11;
    color: #fff;
    border: none;
    border-radius: var(--za-radius-sm);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.za-cta-primary:hover { background: var(--za-blue-dark); color: #fff; }

.za-cta-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    background: var(--za-gray-50);
    color: var(--za-gray-700);
    border: var(--za-border);
    border-radius: var(--za-radius-sm);
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.15s;
}

.za-cta-secondary:hover { background: var(--za-gray-100); color: var(--za-gray-900); }

/* ===== FAQ ===== */
.za-faq-item {
    border-bottom: 1px solid var(--za-gray-100);
}

.za-faq-item:last-child { border-bottom: none; }

.za-faq-q {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    cursor: pointer;
    font-size: 18px;
    font-weight: 600;
    color: var(--za-blue);
    text-align: left;
}

.za-faq-q:hover { color: var(--za-blue-dark); }

/* Plus/Minus-Kreis rechts (loest den Pfeil ab). Nur Theme-Farben. */
.za-faq-toggle {
    flex-shrink: 0;
    width: 28px; height: 28px; margin-left: 16px;
    border: 1px solid var(--za-gray-100);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--za-blue);
    font-size: 18px; font-weight: 600; line-height: 1;
    transition: background 0.15s;
}
.za-faq-toggle::before { content: "+"; }
.za-faq-item.za-open .za-faq-toggle::before { content: "\2212"; } /* Minuszeichen */
.za-faq-q:hover .za-faq-toggle { background: var(--za-blue-light); }

.za-faq-a {
    font-size: 15px;
    color: var(--za-gray-500);
    line-height: 1.7;
    padding: 0 0 14px;
    display: none;
}

.za-faq-item.za-open .za-faq-a { display: block; }


/* ===== Responsive ===== */
.za-alt-list { display: none; padding: 0; }

@media (max-width: 768px) {
    .za-metrics { grid-template-columns: repeat(2, 1fr); }
    .za-layout { grid-template-columns: 1fr; }
    .za-layout-sidebar { position: static; }
    .za-procon { grid-template-columns: 1fr; }
    .za-calc-grid { grid-template-columns: 1fr; }
    .za-calc-sliders { flex-direction: column; gap: 16px; }
    .za-bars-summary { flex-direction: column; }
    .za-gauge-legend { flex-direction: column; gap: 8px; align-items: flex-start; }
    .za-kond-table th { width: 120px; font-size: 14px; }
    .za-alt-grid { grid-template-columns: 1fr; }
    .za-timeline { flex-wrap: wrap; gap: 16px; }
    .za-timeline::before { display: none; }
    .za-cta-row { flex-direction: column; }
}

/* ===== Bewertung Badge ===== */

#tg-bewertung { position: relative; }

.za-bw-badge {
    float: right;
    width: 260px;
    margin: 0 0 16px 24px;
    border: 2px solid #185FA5;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    text-align: center;
}
.za-bw-badge-top {
    background: #185FA5;
    padding: 8px 16px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0;
}
.za-bw-badge-logo {
    padding: 14px 20px 6px;
}
.za-bw-badge-logo img {
    max-width: 180px;
    max-height: 80px;
    object-fit: contain;
}
.za-bw-badge-bank {
    font-size: 14px;
    color: #718096;
    padding: 0 16px 10px;
}
.za-bw-badge-body {
    padding: 0 16px 14px;
}
.za-bw-badge-score-row {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}
.za-bw-badge-note {
    font-size: 22px;
    font-weight: 600;
    color: #185FA5;
}
.za-bw-badge-divider {
    width: 1px;
    height: 18px;
    background: #CBD5E0;
    align-self: center;
}
.za-bw-badge-pts {
    font-size: 22px;
    font-weight: 600;
    color: #185FA5;
}
.za-bw-badge-foot {
    font-size: 14px;
    color: #718096;
    margin-top: 4px;
    padding-top: 8px;
    border-top: 1px solid #E2E8F0;
}

@media (max-width: 782px) {
    #tg-bewertung .za-sec-title,
    #tg-bewertung .za-sec-sub { padding-right: 0; }
    .za-bw-badge { float: none; margin: 0 auto 16px; }
}

/* Statisches Testsiegel ([za_testsiegel], z.B. Musterbank auf "So testen wir"):
   ohne Logo braucht der Bankname den oberen Abstand, den sonst der Logo-Block liefert. */
.za-testsiegel--nologo .za-bw-badge-bank { padding-top: 14px; }
/* Tabellen im Ratgeber-Fliesstext starten immer unterhalb eines rechts floatenden
   Siegels statt daneben zusammengequetscht zu werden. */
.za-ratgeber-content table { clear: both; }
.za-top-banken-table th { width: auto; white-space: normal; }
/* Platzierung bewusst hier, weit VOR jedem @media-Block: die spaeteren
   Mobile-Regeln fuer .za-tb-rank (Badge-Kreis, font-weight:700) muessen diese
   Basisregel bei gleicher Spezifitaet ueberschreiben koennen. Stand sie einmal
   NACH dem Mobile-Block, gewann sie dort faelschlich zurueck - das sass hinter
   der schlecht zentrierten Ziffer. */
.za-tb-rank { font-weight: inherit; margin-right: 4px; }
.za-tb-rank::after { content: "."; }

/* ===== User Custom CSS (from template export) ===== */

.za-layout a { color: #247dff; }
h3 { color: #185FA5; }
.za-vergleich-alts h3 { color: #185FA5; }
.za-rtable { margin-top: 20px; }

#tg-hero.za-sec { margin-top: 0; }

/* Bewertung detail wrapper */
.za-bw-detail-wrap { margin-top: 60px; clear: both; }

/* Barchart: left-align with headline */
.za-bars-chart-wrap { margin-left: 0; padding-left: 0; }
.za-bars-chart-wrap svg { display: block; overflow: visible; }
/* Die Sprechblase ragt oben und seitlich ueber die Zeichenflaeche hinaus.
   Ohne Platz im Umfeld schneidet der Container sie ab - deshalb hier Luft
   nach oben und KEIN overflow, das einen Beschnitt ausloesen wuerde. */
.za-bars-chart-wrap { padding-top: 30px; margin-top: -30px; }
/* Der Tooltip liegt ueber allem, was danach kommt (z.B. der Zeitleiste). */
.za-bars-chart-wrap .za-bar-tt { pointer-events: none; }
.za-bars-chart-wrap:hover { position: relative; z-index: 6; }

/* Fazit Autor/EEAT */
.za-fazit-autor {
    margin-top: 24px;
    border-top: 1px solid #E2E8F0;
    padding-top: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.za-fazit-autor-photo {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}
.za-fazit-autor-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.za-fazit-autor-body { flex: 1; }
.za-fazit-autor-label {
    font-size: 12px;
    font-weight: 600;
    color: #185FA5;
    margin: 0 0 2px;
}
.za-fazit-autor-name {
    font-size: 18px;
    font-weight: 600;
    color: #222628;
    margin: 0 0 6px;
}
.za-fazit-autor-desc {
    font-size: 14px;
    color: #718096;
    line-height: 22px;
    margin: 0 0 8px;
}
.za-fazit-autor-meta {
    font-size: 13px;
    color: #94B8DB;
}

/* User CSS overrides (from editor export 2.3.14) */
.za .za-sec h3 { font-size: 18px; margin-bottom: 6px; color: #185FA5; }
.za-hero-wrap h1 { font-size: 32px; }
.za-sc-q { color: #185FA5; }
.za-sec-title { margin: 0 0 20px; }
.za-calc-col-title { color: #185FA5; }
.za-bars-title { font-size: 18px !important; color: #185FA5; margin-bottom: 20px !important; }
.za-calc-detail { font-size: 14px; }
#tg-vergleich .za-sec-title { margin-bottom: 20px; }

h3.za-sc-q { line-height: 36px; margin-bottom: 0 !important; }

#tg-rendite.za-sec,
#tg-konditionen.za-sec,
#tg-vergleich.za-sec {
    overflow: visible;
}

/* Marker-Tab: Spezifit?t-Fix */
.za-sec .za-sec-title .za-marker,
.za .za-sec h2 .za-marker {
    position: absolute;
    top: -1px;
    transform: translateY(-100%);
    display: inline-block;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    -webkit-text-fill-color: #fff;
    padding: 6px 16px;
    background: #185FA5;
    border: 1px solid #E2E8F0;
    border-bottom: 0;
    border-radius: 8px 8px 0 0;
    z-index: 1;
    line-height: 1.4;
}

a.za-cta-primary { color: #fff; }
a.za-sb-cta { color: #fff; }

/* ===== Tagesgeld-News Timeline ===== */

.za-news-list { display: flex; flex-direction: column; gap: 0; list-style: none; padding: 0; margin: 0; }

.za-news-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 0;
    border-bottom: 1px solid var(--za-gray-100);
}
.za-news-item:last-child { border-bottom: none; }

.za-news-hidden { display: none; }

.za-news-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 18px;
    font-weight: 600;
}
.za-news-ico-up   { background: #E1F5EE; color: #0F6E56; }
.za-news-ico-down { background: #FCEBEB; color: #A32D2D; }
.za-news-ico-info { background: #E6F1FB; color: #185FA5; }
.za-news-ico-new  { background: #FAEEDA; color: #854F0B; }
.za-news-ico-end  { background: #F7FAFC; color: #718096; }

.za-news-body { flex: 1; }
.za-news-date { font-size: 13px; font-weight: 600; color: #718096; margin: 0 0 4px; }
.za-news-text { font-size: 18px; color: #222628; line-height: 28px; margin: 0; }
.za-news-text strong { font-weight: 600; }
.za-news-text a { color: #185FA5; text-decoration: underline; }

.za-news-more { margin-top: 16px; }
.za-news-more a { font-size: 14px; font-weight: 600; color: #185FA5; text-decoration: none; }
.za-news-more a:hover { text-decoration: underline; }
.za-kurznews-loadmore-btn { background: none; border: 0; padding: 0; font: inherit; font-size: 14px; font-weight: 600; color: #185FA5; text-decoration: none; cursor: pointer; }
.za-kurznews-loadmore-btn:hover { text-decoration: underline; }
.za-kurznews-loadmore-btn:disabled { color: var(--za-gray-500); cursor: default; text-decoration: none; }

/* v3.14.2: entfernt. Diese Regel stammt aus der Zeit der schwebenden weissen
   Leiste (abgerundet, 40px unter dem Seitenkopf). Sie ueberschrieb die neue
   randlose Leiste, weil sie spaeter im Stylesheet steht. */

/* User CSS export v2.3.21 */
.za-faq-a { font-size: 18px; color: #222628; line-height: 1.6; }
.za-fazit-autor-desc { font-size: 16px; color: #222628; line-height: 24px !important; }
.za-fazit-autor-label { font-size: 14px; }
.za-fazit-autor-photo { width: 70px; height: 70px; }

/* Hero byline */
.za-hero-byline {
    font-size: 14px;
    color: #718096;
    margin: 0 0 6px;
}

/* Transparenz-Hinweis */
.za-transparenz {
    font-size: 14px;
    color: #718096;
    line-height: 22px;
    padding: 12px 0;
    border-top: 1px solid #EDF2F7;
}
.za-transparenz p { margin: 0; font-size: 14px; line-height: 22px; }
.za-transparenz strong { color: #4A5568; font-weight: 600; }

/* ===== Sidebar: updated styles ===== */

/* Sidebar bewertung: 16px font */
.za-sb-bewertung { font-size: 16px; }
.za-sb-bw-label, .za-sb-bw-score, .za-sb-bw-total-label, .za-sb-bw-total-val { font-size: 16px; }

/* Sidebar autor: date + linked name */
.za-sb-autor-img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; }
.za-sb-autor-date { font-size: 13px; color: #718096; margin: 0 0 2px; }
.za-sb-autor-name { font-size: 16px; font-weight: 600; margin: 0; }
.za-sb-autor-name a { color: #185FA5; text-decoration: none; }
.za-sb-autor-name a:hover { text-decoration: underline; }

/* Sidebar Newsletter / Zins-Wecker */
.za-sb-nl-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}
.za-sb-nl-icon { font-size: 32px; line-height: 1; flex-shrink: 0; }
.za-sb-nl-title { font-size: 16px; font-weight: 600; color: #222628; display: block; }
.za-sb-nl-sub { font-size: 13px; color: #718096; margin: 0; }
.za-sb-nl-text { font-size: 14px; color: #4A5568; line-height: 22px; margin: 0 0 12px; }
.za-sb-nl-form { display: flex; gap: 6px; }
.za-sb-nl-form input[type="email"] {
    flex: 1;
    padding: 9px 10px;
    border: 1px solid #E2E8F0;
    border-radius: 8px;
    font-size: 13px;
    min-width: 0;
}
.za-sb-nl-form button {
    padding: 9px 14px;
    background: #ff9c11;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.za-sb-nl-form button:hover { background: #e88a00; }

/* Sidebar Alternativen: simplified */
.za-sb-alt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #EDF2F7;
    font-size: 14px;
}
.za-sb-alt-row:last-child { border-bottom: none; }
.za-sb-alt-bank a { color: #185FA5; text-decoration: none; font-weight: 500; }
.za-sb-alt-bank a:hover { text-decoration: underline; }
.za-sb-alt-zins { font-weight: 600; color: #185FA5; }

/* Sidebar Ratgeber */
.za-sb-rg-list { list-style: none; padding: 0; margin: 0; }
.za-sb-rg-list li { padding: 8px 0; border-bottom: 1px solid #EDF2F7; }
.za-sb-rg-list li:last-child { border-bottom: none; }
.za-sb-rg-list a { color: #185FA5; text-decoration: none; font-size: 14px; font-weight: 500; }
.za-sb-rg-list a:hover { text-decoration: underline; }

/* ===== Weitere Banken (internes Linking) ===== */

.za-weitere-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 12px;
}

.za-weitere-card {
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    padding: 14px 12px;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.za-weitere-card:hover {
    border-color: #185FA5;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.za-weitere-logo {
    width: 100%;
    height: 28px;
    background: #fff;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.za-weitere-logo img {
    max-height: 28px;
    max-width: 90%;
    object-fit: contain;
}
.za-weitere-logo span {
    font-size: 10px;
    color: #94B8DB;
}

.za-weitere-name {
    font-size: 14px;
    font-weight: 600;
    color: #222628;
    margin: 0 0 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.za-weitere-prod {
    font-size: 14px;
    color: #718096;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.za-weitere-zins {
    font-size: 16px;
    font-weight: 600;
    color: #185FA5;
}

@media (max-width: 782px) {
    .za-weitere-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 480px) {
    .za-weitere-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Sidebar: Badge/Siegel integration */
.za-sb-siegel {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

/* User CSS export v2.3.30 */
.za-sc-a a { text-decoration: none; }
.za-sb-autor-name { font-weight: 400; }
.za-sb-autor-date { font-size: 16px; color: #222628; }
.za-sb-autor-img { width: 66px; height: 66px; }
.za-fazit-autor-label { font-size: 16px; font-weight: 400; color: #222628; margin-bottom: 8px; margin-top: 8px; }
.za-layout a:hover { color: #185fa5; }

/* Sidebar headings (span instead of h3) */
.za-sb-heading {
    display: block;
    font-size: 16px;
    font-weight: 600;
    color: #222628;
    margin: 0 0 12px;
}

/* User CSS export v2.3.32 */
.za-sb-siegel { margin-bottom: 0; }
.za-sb-siegel .za-bw-badge { width: 100%; float: none; margin: 0; }

/* FAQ button accessibility reset */
.za-faq-heading { margin: 0; padding: 0; font-size: inherit; font-weight: inherit; line-height: inherit; }
.za-faq-q {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: none;
    border-bottom: 1px solid var(--za-gray-100);
    padding: 14px 0;
    margin: 0;
    cursor: pointer;
    text-align: left;
    width: 100%;
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    color: #222628;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.za-faq-q:focus-visible {
    outline: 2px solid #185FA5;
    outline-offset: 2px;
    border-radius: 4px;
}
.za-faq-item:last-child .za-faq-q { border-bottom: none; }
.za-open .za-faq-q { border-bottom: none; }

/* v3.22.0: Sidebar-Zinswecker - Icon ist ein ruhiges Inline-SVG (kein Emoji,
   keine Animation): Emoji rendern auf jedem System anders, und eine
   Endlos-Animation wirkt auf einem Finanzportal unserioes. */
.za-sb-nl-icon { display: inline-flex; align-items: center; color: #185FA5; }
.za-sb-nl-header { align-items: center; }

/* User CSS export v2.3.33 (comprehensive) */
.za-sb-nl-text { font-size: 14px; color: #4A5568; line-height: 22px !important; margin: 0 0 12px; }
.za-fazit-content a { text-decoration: none; }
.za-sb-nl-title { font-size: 18px; font-weight: 600; color: #222628; display: block; line-height: 32px; }
.za-sb-nl-form { display: block; gap: unset; }
.za-sb-nl-form input[type="email"] { flex: unset; padding: 9px 10px; border: 1px solid #E2E8F0; border-radius: 8px; font-size: 16px; min-width: 0; display: block; width: 100%; box-sizing: border-box; }
.za-sb-nl-form button { padding: 9px 14px; background: #ff9c11; color: #fff; border: none; border-radius: 8px; font-size: 16px; font-weight: 600; cursor: pointer; white-space: nowrap; display: block; width: 100%; margin-top: 8px; }
.za-sb-nl-form button:hover { background: #e88a00; }
.za-sb-heading { display: block; font-size: 18px; font-weight: 600; color: #222628; margin: 0 0 12px; }
/* v3.14.2: entfernt - setzte den CTA zurueck auf Orange und ueberschrieb damit
   den transparenten Button mit weissem Rahmen (aus einem alten CSS-Export). */
.za-cta-row { display: inline-block; gap: unset; margin: 12px 0; }
.za-cta-primary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: #ff9c11; color: #fff; border: none; border-radius: var(--za-radius-sm); font-size: 18px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s; margin-right: 12px; }
.za-cta-primary:hover { background: #e88a00; color: #fff !important; }
.za-cta-secondary { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--za-gray-50); color: var(--za-gray-700); border: var(--za-border); border-radius: var(--za-radius-sm); font-size: 18px; font-weight: 600; text-decoration: none; cursor: pointer; transition: background 0.15s; }
.za-cta-secondary:hover { background: var(--za-hover); color: #185fa5; }

/*  ==================================================
   MOBILE RESPONSIVE ? 768px / 480px / 360px
  -- ==================================================-- */

/*  1. Global: Overflow & Hyphenation-- */
.za-kond-table td,
.za-kond-table th,
.za-rtable td,
.za-rtable th,
.za-sc-a,
.za-faq-a,
.za-gauge-text,
.za-sec-sub,
.za-sec-intro,
.za-hero-intro,
.za-fazit-content,
.za-bw-row-label,
.za-news-text {
    overflow-wrap: break-word;
    word-wrap: break-word;
    }

/*  12. Autorenbox: Mobile-Top (hidden desktop)-- */
.za-autor-mobile { display: none; }

/*  ==================================================
   TABLET ? max-width: 768px
  -- ==================================================-- */
@media (max-width: 768px) {

    /*  2. Subnavi-- */

    /*  8. Hero Metrics: 2x2 grid-- */
    .za-metrics {
        grid-template-columns: 1fr 1fr;
    }

    /*  10. Pro/Con: stack-- */
    .za-procon {
        flex-direction: column;
    }
    .za-procon-col {
        width: 100%;
    }

    /*  5. Rechner: single column-- */
    .za-calc-grid {
        grid-template-columns: 1fr;
    }
    .za-calc-left, .za-calc-right {
        padding: 0;
    }

    /*  9. Bewertung Badge: center-- */
    .za-bw-badge {
        position: static;
        margin: 0 auto 20px;
    }
    #tg-bewertung {
        padding-right: 0;
    }
    #tg-bewertung .za-sec-title,
    #tg-bewertung .za-sec-sub {
        padding-right: 0;
    }

    /*  4. Vergleichstabelle: scrollable wrapper-- */
    .za-vergleich-alts {
        position: relative;
    }
    /* Alternativen: einfache Top-Liste auf dem Smartphone.
       ACHTUNG, hier lag ein Fehler: die Regel galt fuer JEDE Tabelle mit der
       Klasse .za-rtable - also auch fuer die Banken-Uebersicht A-Z, die dadurch
       mobil komplett leer war (Ueberschriften ohne Inhalt). Jetzt auf den
       Alternativen-Bereich eingeschraenkt, fuer den sie gedacht war. */
    .za-vergleich-alts .za-rtable { display: none; }
    .za-alt-list { display: block; }
    .za-alt-list-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        padding: 11px 28px;
        border-bottom: 1px solid #EDF2F7;
    }
    .za-alt-list-row:last-child { border-bottom: none; }
    .za-alt-list-bank { font-size: 16px; }
    .za-alt-list-bank a { color: #185FA5; text-decoration: none; }
    .za-alt-list-zins { font-size: 16px; font-weight: 600; color: #222628; flex-shrink: 0; padding-left: 16px; }

    /*  7. Zinshistorie SVG: scrollable-- */
    .za-chart-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .za-chart-wrap svg {
        min-width: 600px;
    }

    /*  11. CTA Row: full width stacked-- */
    .za-cta-row {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .za-cta-primary, .za-cta-secondary {
        display: flex;
        justify-content: center;
        width: 100%;
        margin-right: 0;
    }

    /*  12. Autorenbox Mobile-- */
    .za-autor-mobile { display: block; margin-bottom: 20px; }
    .za-layout-sidebar .za-sb-autor { display: none; }

    /*  6. Gauge: hide tooltips + padding fix-- */
    .za-gauge-tt { display: none; }

    /*  9. Bewertung rows: bar on top, label below-- */
    .za-bw-row {
        flex-wrap: wrap;
        align-items: center;
    }
    .za-bw-bar-wrap {
        order: 1;
        flex: 1;
        min-width: 0;
    }
    .za-bw-row-score {
        order: 2;
        flex-shrink: 0;
        min-width: 50px;
        text-align: right;
        margin-left: 10px;
    }
    .za-bw-row-label {
        order: 3;
        flex-basis: 100%;
        width: 100%;
        margin-top: 0;
        margin-bottom: 0;
        font-size: 14px;
        color: #718096;
        line-height: 1.3;
    }
}

/*  ==================================================
   PHONE ? max-width: 480px
  -- ==================================================-- */
@media (max-width: 480px) {

    /*  Global: section spacing-- */
    /* margin-top stand hier einmal (40px) - fossil, das vereinheitlichte
       Abstandssystem (Mobile-Runde 4, unten) ist die einzige Quelle dafuer. */
    .za-sec {
        padding: 16px 14px;
    }
    #tg-vergleich.za-sec {
        padding: 16px 14px;
    }
    .za-marker {
        font-size: 14px;
        padding: 4px 12px;
    }
    .za-sec-title {
        font-size: 22px;
    }

    /*  2. Subnavi: compact-- */

    /*  3. Konditionstabelle: stacked-- */
    .za-kond-table,
    .za-kond-table thead,
    .za-kond-table tbody,
    .za-kond-table tr,
    .za-kond-table th,
    .za-kond-table td {
        display: block;
        width: 100%;
    }
    .za-kond-table tr {
        border-bottom: 1px solid #EDF2F7;
        padding: 10px 0;
    }
    .za-kond-table th {
        font-size: 12px;
        color: #718096;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.03em;
        padding: 0 0 2px;
        border: none;
    }
    .za-kond-table td {
        font-size: 15px;
        padding: 0;
        border: none;
    }

    /* Mehrspaltige Ratgeber-Vergleichstabellen (z.B. Steuersatz nach Kirchensteuer-Satz):
       beim Stacken braucht jeder Wert seine eigene Mini-Spaltenueberschrift, sonst ist
       nicht erkennbar welche Spalte ("Ohne KiSt"/"8%"/"9%") ein Wert gehoert. */
    /* Kopfzeile (nur Spaltenlabels, keine data-label-Zellen) ist gestapelt ueberfluessig
       und wuerde als kurioser Block aus Fettschrift-Labels erscheinen - ausblenden. */
    .za-kond-table--wide tr:first-child:not(:has(td[data-label])) { display: none; }
    /* Label UEBER dem Wert, beides linksbuendig.
       Vorher stand das Label gefloatet links und der Wert rechtsbuendig. Das sieht
       bei kurzen Werten ("43/50") gut aus, bricht aber, sobald ein Wert mehrzeilig
       wird: die erste Zeile beginnt hinter dem Float, die zweite ueber die volle
       Breite - der Text franste rechts aus und wirkte unausgerichtet.
       Flex oder Grid koennen das nicht loesen, weil beide jedes Inline-Kind
       (<strong>, <span>, <a>) zu einem eigenen Item machen wuerden und die Zelle
       damit auseinanderfiele. Label ueber Wert ist gegenueber JEDEM Zelleninhalt
       robust und die uebliche Darstellung in App-Listen. */
    .za-kond-table--wide td[data-label] {
        display: block;
        margin-top: 0;
        padding: 8px 0;
        border-top: 1px solid #EDF2F7;
        text-align: left;
        font-size: 16px;
    }
    .za-kond-table--wide td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        font-size: 13px;
        font-weight: 400;
        line-height: 1.3;
        color: #718096;
        text-transform: none;
        letter-spacing: 0;
    }
    .za-kond-table--wide th + td[data-label] { border-top: 0; }

    /*  5. Rechner: slider thumb bigger-- */
    .za-calc input[type="range"] {
        height: 6px;
    }
    .za-calc input[type="range"]::-webkit-slider-thumb {
        width: 24px;
        height: 24px;
    }
    .za-calc input[type="range"]::-moz-range-thumb {
        width: 24px;
        height: 24px;
    }

    /*  5. Bars chart: readable, horizontal scroll-- */
    .za-bars-chart-wrap {
        /* `overflow-x: auto` erzeugt einen Scroll-Container, der auch senkrecht
           beschneidet - genau daran wurden die Tooltips abgeschnitten. Auf dem
           Smartphone ist das waagerechte Scrollen noetig, dort verzichten wir
           dafuer auf die Sprechblasen (Touch kennt kein Hover).
           Die Weichzeichnung am Rand ist entfallen, sie wirkte wie ein Fehler. */
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding-top: 0;
        margin-top: 0;
    }
    .za-bars-chart-wrap .za-bar-tt { display: none; }
    .za-bars-chart-wrap svg {
        min-width: 480px;
    }
    .za-bars-section h3 { font-size: 16px; }

    /*  8. Hero metrics: text smaller-- */
    .za-metric-label { font-size: 11px; }
    .za-metric-value { font-size: 18px; }

    /*  11. Weitere Banken: 2 columns-- */
    .za-weitere-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /*  13. FAQ: tap targets-- */
    .za-faq-q {
        min-height: 44px;
        padding: 12px 0;
        font-size: 16px;
    }
    .za-faq-a {
        font-size: 15px;
    }

    /*  13. Schnellcheck: tap targets-- */
    .za-sc-item {
        padding: 14px 12px;
    }
    .za-sc-q {
        font-size: 16px;
    }
    .za-sc-a {
        font-size: 15px;
    }

        /*  Vergleich: parent padding, children reset-- */
    #tg-vergleich .za-sec-title { padding: 0; margin-bottom: 10px; }
    #tg-vergleich .za-sec-title + p { padding: 0; }
    .za-gauge-section { padding: 16px 0 0; }
    .za-gauge-text { padding: 0; }
    .za-vergleich-alts h3 { padding: 0; }
    .za-alt-list-row { padding: 11px 0; }

    /*  Bewertung: children reset, right padding fix-- */
    .za-bw-row { padding: 6px 0 6px 0; }
    .za-bw-row-score { padding-right: 0; }
    .za-bw-detail-wrap { padding: 0; }

    /*  News items: compact-- */
    .za-news-item {
        padding: 12px 0;
    }

    /*  Sidebar cards: spacing-- */
    .za-sb-card {
        padding: 14px;
    }
}

/*  ==================================================
   NARROW PHONE ? max-width: 380px
  -- ==================================================-- */
@media (max-width: 380px) {
    .za-weitere-grid {
        grid-template-columns: 1fr;
    }
    .za-metrics {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .za-metric-value { font-size: 16px; }
    .za-gauge-legend-item { font-size: 13px; }
}

/* User CSS export v2.3.40 ? mobile overrides */
@media (max-width: 768px) {
    .za-hero-wrap h1 { font-size: 22px; }
    .za-metric { padding: 8px; }
    .za-metric-label { font-size: 11px !important; }
    /* .za-sec { margin-top: 80px } stand hier (Desktop-Wert im Mobile-Export,
       fossil) - entfernt, Quelle ist allein die Mobile-Runde 4 weiter unten. */
    .za-sec-title { font-size: 18px; margin-bottom: 10px; }
    .za .za-sec h3 { font-size: 16px; margin-bottom: 6px; color: #185FA5; line-height: 21px; }
    .za p { line-height: 24px; font-size: 16px; }
    .za-sc-a { font-size: 16px; line-height: 24px; }
    .za-procon-col li { font-size: 16px; line-height: 24px; }
    span.za-calc-result-sub { display: block; }
    .za-calc-result-label { font-size: 16px; }
    .za-calc-detail { font-size: 14px !important; color: var(--za-gray-500); margin-top: 0; margin-bottom: 0; text-align: left; line-height: 21px !important; }
    .za-kond-table { margin: 0; width: 100%; }
    .za-kond-table tr { padding: 10px 14px; }
    .za-kond-table th, .za-kond-table td { padding-left: 14px; padding-right: 14px; font-size: 16px; line-height: 24px; }
    .za-kond-table th { font-size: 16px !important; }
    .za-calc-grid { gap: 8px; }
    .za-bw-row-label { font-size: 16px; }
}

/* User CSS v2.3.45 */
.za-gauge-legend { flex-direction: unset; gap: 10px; }
.za-layout-sidebar { margin-top: 0; }
.za-gauge-section { margin: 20px 0 40px 0; }
button.za-faq-q:focus { background-color: #fff; }
button.za-faq-q:hover { background-color: #fff; }
.za-faq-item { border-bottom: none; }
.za-faq-q { border-bottom: none; }

@media (max-width: 768px) {
    .za-hero-wrap { padding: 16px 14px; }
    .za-sec { padding: 16px 14px !important; }
    #tg-konditionen.za-sec { padding: 16px 14px; }
    #tg-konditionen .za-sec-title { padding: unset; }
    .za-kond-table tr { padding: 8px; }
    .za-kond-table { margin: 20px 0 0 0; }
    .za-gauge-section { margin: 10px 0 30px 0; }
    .za-alt-list { margin-top: 20px; }
    #tg-bewertung { padding-right: unset; }
    .za-bw-row { gap: 0; }
    .za-bw-bar-wrap { height: 8px; }
    .za-bw-bar { height: 8px; }
}

/* User CSS v2.3.47 */
@media (max-width: 768px) {
    .za-gauge-legend { flex-direction: column; }
    .za-bars-section { display: none; }

    /* Nav: edge-to-edge, no border */

    /* CTA scrolls with links (now inside za-nav-links) */
}


/* RankMath Breadcrumb in Hero */
.za-hero-wrap .rank-math-breadcrumb {
    font-size: 14px;
    color: #718096;
    margin-bottom: 8px;
}
.za-hero-wrap .rank-math-breadcrumb a {
    color: #718096;
    text-decoration: none;
}
.za-hero-wrap .rank-math-breadcrumb a:hover {
    color: #185FA5;
}

/* Breadcrumb styling */
.rank-math-breadcrumb p { margin-bottom: 10px; }
nav.rank-math-breadcrumb { color: #718096; font-size: 14px; }
.rank-math-breadcrumb a { color: #718096; }
span.last { color: #000; }

/* User CSS v2.3.78 */
.za-bw-bar { height: 8px; }
.za-bw-bar-wrap { height: 8px; }
.za-rtable { font-size: 18px; }


/* ===== Vergleichsseite (v2.3.96) - only existing tokens, typo scale 20/18/14 ===== */

/* Kopf: intro card + sidebar reuse .za-layout / .za-hero-wrap / .za-sb-card */
.za-vgl-kopf .za-hero-wrap { margin-bottom: 0; }
.za-vgl-kopf .za-sb-autor-date { margin: 2px 0 0; }

/* Zinsaenderungen card */
.za-zae-list { list-style: none; margin: 0; padding: 0; }
.za-zae-list li { display: grid; grid-template-columns: 48px 1fr auto; gap: 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--za-gray-300); font-size: 14px; }
.za-zae-list li:last-child { border-bottom: none; }
.za-zae-list time { color: var(--za-gray-500); }
.za-zae-list a { color: var(--za-gray-900); text-decoration: none; font-weight: 500; }
.za-zae-list a:hover { color: var(--za-blue); text-decoration: underline; }
.za-zae-up { color: var(--za-green); white-space: nowrap; font-weight: 600; }
.za-zae-down { color: var(--za-red); white-space: nowrap; font-weight: 600; }
.za-zae-all { display: block; margin-top: 12px; font-size: 14px; font-weight: 500; }

/* Rechner card */
.za-vgl-grid { display: grid; grid-template-columns: 1fr 0.85fr 1.15fr 1.3fr; gap: 16px; align-items: end; }
.za-vgl-field label { display: block; font-size: 14px; color: var(--za-gray-500); margin-bottom: 6px; }
.za-vgl-in { display: flex; align-items: center; border: var(--za-border); border-radius: var(--za-radius); background: #fff; height: 40px; padding: 0 12px; }
.za-vgl-in input, .za-vgl-in select { border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; width: 100%; color: var(--za-gray-900); padding: 0; margin: 0; height: auto; box-shadow: none; }
.za-vgl-in span { color: var(--za-gray-500); font-size: 13px; margin-left: 8px; white-space: nowrap; }
.za-vgl-in:focus-within { border-color: var(--za-blue); box-shadow: 0 0 0 3px var(--za-blue-light); }
.za-vgl-hausbank { display: flex; align-items: center; gap: 10px; }
.za-vgl-hausbank .za-toggle { flex: none; }
/* Input schrumpft auf Inhaltsbreite (statt volle Spaltenbreite auszufuellen) und der Wert
   ist rechtsbuendig - dadurch ruecken Zahl und "% Zinsen"-Label direkt zusammen, statt dass
   das Label bei kurzen Werten weit rechts "schwebt". */
.za-vgl-hausbank .za-vgl-in { flex: 0 0 auto; }
.za-vgl-hausbank .za-vgl-in input { width: 52px; text-align: right; }
.za-vgl-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-top: 1px solid var(--za-gray-300); margin-top: 18px; padding-top: 14px; }
.za-vgl-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.za-vgl-chip { display: inline-flex; align-items: center; gap: 6px; border: var(--za-border); border-radius: 999px; padding: 5px 12px; cursor: pointer; background: #fff; font-size: 14px; user-select: none; color: var(--za-gray-900); }
.za-vgl-chip input { accent-color: var(--za-blue); margin: 0; }
.za-vgl-chip:has(input:checked) { border-color: var(--za-blue); background: var(--za-blue-light); color: var(--za-blue-dark); }
.za-vgl-chip:focus-within { outline: 3px solid var(--za-blue-light); outline-offset: 2px; }

/* Table */
/* No overflow here: table-layout:fixed keeps the table at 100% width, and any
   overflow value other than visible would (a) turn this into the sticky
   containing scroller, breaking position:sticky against the page, and
   (b) clip the tooltips. */
.za-vgl-wrap { margin-top: 20px; }
table.za-vgl { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; margin: 0; background: transparent; border: 0; }
/* Reset theme table styles (GeneratePress adds borders/padding/background/stripes) */
table.za-vgl thead, table.za-vgl tbody, table.za-vgl tr { border: 0; background: transparent; }
table.za-vgl th, table.za-vgl td { border: 0; background: transparent; padding: 0; }
/* Header background = page background (#f0f4fa from the GB section wrapper),
   NOT transparent: while stuck, rows scroll underneath and a truly transparent
   header would render unreadable text over them. Visually identical to
   transparent in resting state. */
table.za-vgl thead th { text-align: left; font-size: 13px; font-weight: 500; color: var(--za-gray-500); padding: 8px 12px 10px; white-space: nowrap; border: 0; position: sticky; top: 0; z-index: 3; background: #f0f4fa; }
.za-vgl th.za-vgl-r, .za-vgl td.za-vgl-r { text-align: right; }
.za-vgl tbody.za-vgl-hidden { display: none; }
table.za-vgl tr.za-vgl-main td { background: #fff; padding: 18px 12px; vertical-align: middle; border-top: var(--za-border); }
table.za-vgl tr.za-vgl-main td:first-child { border-left: var(--za-border); border-radius: var(--za-radius) 0 0 0; }
table.za-vgl tr.za-vgl-main td:last-child { border-right: var(--za-border); border-radius: 0 var(--za-radius) 0 0; }
/* Hover auf dem ganzen tbody (nicht nur tr.za-vgl-main): seit der Details-Button eine
   eigene Zeile ist, wuerde ein Hover nur auf der Hauptzeile die Karte optisch zerreissen -
   morerow bliebe weiss. So faerben sich beide Zeilen gemeinsam ein, sobald irgendwo in der
   Karte gehovert wird. */
table.za-vgl tbody:not(.za-vgl-open):hover tr.za-vgl-main td,
table.za-vgl tbody:not(.za-vgl-open):hover tr.za-vgl-morerow td { background: var(--za-hover); }
table.za-vgl tr.za-vgl-gap td { padding: 0; height: 12px; border: 0; background: transparent; }
.za-vgl-prov { min-width: 190px; }
.za-vgl-logo { display: block; width: 120px; height: 32px; object-fit: contain; object-position: left center; margin-bottom: 6px; }
.za-vgl-pname { display: block; font-weight: 600; color: var(--za-gray-900); text-decoration: none; font-size: 14px; line-height: 1.3; }
.za-vgl-pname:hover { color: var(--za-blue); }
.za-vgl-val { font-size: 18px; font-weight: 600; color: var(--za-gray-900); line-height: 1.2; white-space: nowrap; }
.za-vgl-val small { display: block; font-size: 14px; font-weight: 400; color: var(--za-gray-500); margin-top: 3px; }
/* Ertrag-Zelle: eigener Flex-Container (nur hier, nicht bei den anderen za-vgl-val-Zellen),
   damit Betrag + Hausbank-Badge sicher auf getrennten Zeilen stehen. align-items:flex-end
   ist der eigentliche Fix: ohne das wuerde flex-direction:column die Kinder per Default
   (align-items:stretch) auf volle Spaltenbreite ziehen - dann waere die Pille wieder so
   breit wie die Zelle. */
.za-vgl-val.za-vgl-ertrag { display: flex; flex-direction: column; align-items: flex-end; }
.za-vgl-ertrag .za-vgl-ev { color: var(--za-gray-900); }
.za-vgl-val small.za-vgl-hbv { position: relative; cursor: help; color: var(--za-green-dark); font-weight: 600; background: var(--za-green-light); border-radius: 999px; padding: 2px 10px; display: inline-flex; align-items: center; margin-top: 4px; }
/* Spezifitaet bewusst >= der gruenen Basis-Regel (.za-vgl-val small.za-vgl-hbv),
   sonst konnte Rot nie greifen: das JS setzte .za-vgl-neg korrekt, Gruen gewann trotzdem. */
.za-vgl-val small.za-vgl-hbv.za-vgl-neg { color: var(--za-red-dark); background: var(--za-red-light); }
.za-vgl-hbv.za-vgl-hidden { visibility: hidden; }
table.za-vgl tbody.za-vgl-hidden { display: none; }
/* Gleiches Tooltip-Design wie auf der Produktseite (.za-calc-info-tip, Rechner-Chart-Tooltip):
   helles Blau statt dunklem Grau, exakt dieselben Farben/Werte. */
.za-vgl-hbv::after { content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 6px); background: var(--za-blue-light); color: var(--za-blue); border: 0.5px solid #B5D4F4; font-size: 13px; font-weight: 400; padding: 10px 14px; border-radius: var(--za-radius-sm); white-space: normal; width: max-content; max-width: 300px; text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s; z-index: 5; }
.za-vgl-hbv:hover::after, .za-vgl-hbv:focus-visible::after, .za-vgl-hbv.za-vgl-show::after { opacity: 1; }
.za-vgl-act { text-align: right; white-space: nowrap; }
.za-vgl-btn.za-cta-primary { margin-right: 0; font-size: 16px; padding: 8px 16px; }
/* Details-Button: eigene volle Zeile unter dem Angebot (tr.za-vgl-morerow), nicht mehr
   in der Aktion-Spalte - daher genuegt text-align:center auf der Elternzelle, kein
   margin-auto-Trick mehr noetig. */
/* !important noetig: GeneratePress (bzw. Browser-UA-Styles) legen auf :hover/:focus/:active
   eine eigene, spaeter/staerker greifende Hintergrundfarbe fuer <button> an - unser einfacher
   Basis-Reset (nur Ruhezustand) reicht dagegen nicht aus. */
.za-vgl-more,
.za-vgl-more:hover,
.za-vgl-more:focus,
.za-vgl-more:focus-visible,
.za-vgl-more:active { background: transparent !important; box-shadow: none; padding: 4px 0; border: 0; font: inherit; font-size: 14px; color: var(--za-blue); cursor: pointer; text-decoration: underline; }
.za-vgl-more::after { content: " \25BE"; }
.za-vgl-open .za-vgl-more::after { content: " \25B4"; }
table.za-vgl tr.za-vgl-morerow td { background: #fff; text-align: center; border-left: var(--za-border); border-right: var(--za-border); border-bottom: var(--za-border); border-top: 1px solid var(--za-gray-100); border-radius: 0 0 var(--za-radius) var(--za-radius); padding: 6px 12px 12px; }
table.za-vgl tbody.za-vgl-open tr.za-vgl-morerow td { border-bottom: 0; border-radius: 0; }

/* Detail panel */
.za-vgl tr.za-vgl-det { display: none; }
.za-vgl tbody.za-vgl-open tr.za-vgl-det { display: table-row; }
table.za-vgl tr.za-vgl-det > td { background: #fff; border: var(--za-border); border-top: 0; border-radius: 0 0 var(--za-radius) var(--za-radius); padding: 20px 12px; }
.za-vgl-det-in { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 24px; }
/* War <h4>, ist jetzt <span class="za-vgl-det-h"> (Block-Editor darf hier keine eigene
   Ueberschriften-Hierarchie vorschlagen) - display:block haelt die Optik 1:1 wie vorher. */
.za-vgl-det-in .za-vgl-det-h { display: block; margin: 0 0 10px; font-size: 18px; font-weight: 600; color: var(--za-blue); }
.za-vgl-kv { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; font-size: 15px; }
.za-vgl-kv dt { color: var(--za-gray-500); font-weight: 400; }
.za-vgl-kv dt::after { content: ":"; }
.za-vgl-kv dd { margin: 0; color: var(--za-gray-900); font-weight: 600; }
.za-vgl-kv dd div + div { margin-top: 2px; }
.za-vgl-tier-phase { font-size: 12px; font-weight: 400; color: var(--za-gray-500); margin-top: 2px; }
.za-vgl-det-link { display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 500; color: var(--za-blue); text-decoration: none; }
.za-vgl-det-link:hover { text-decoration: underline; }
.za-vgl-empty { margin: 16px 0; color: var(--za-gray-500); }

/* Fakten + So testen wir */
.za-vgl-two { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px; }
.za-vgl-two .za-sec { margin-top: 0; }
.za-vgl-two .za-sec-title { font-size: 22px; }
.za-vgl-facts { list-style: none; margin: 0; padding: 0; }
.za-vgl-facts li { padding: 8px 0; border-bottom: 1px solid var(--za-gray-300); }
.za-vgl-facts li:last-child { border-bottom: none; }
.za-vgl-facts b { font-weight: 600; }

/* Zinswecker bar */
.za-wecker { background: var(--za-blue); color: #fff; border-radius: var(--za-radius); padding: 24px 28px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin: 20px 0; }
.za-wecker h2 { margin: 0 0 6px; font-size: 22px; color: #fff; }
.za-wecker p { margin: 0; color: #fff; opacity: .92; }
.za-wecker-form { display: flex; gap: 8px; flex: none; }
/* v3.22.0: min-width 260px entfernt - mit dem laengeren Button "Zinswecker
   aktivieren" brach der Button in der 460px-Formularspalte auf zwei Zeilen um
   (im Browser gesehen). Feld nimmt den Rest, Button bleibt einzeilig. */
.za-wecker-form input[type="email"] { height: 46px; border: 0; border-radius: var(--za-radius-sm); padding: 0 14px; font: inherit; min-width: 0; flex: 1; }
.za-wecker-form .za-cta-primary { margin-right: 0; white-space: nowrap; flex: none; }

/* Honeypot: nur ueber Klasse versteckt (kein inline style, kein type=hidden) -
   gleiches Muster wie .za-kontakt-hp in ZA_Kontakt. */
.za-nl-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ===== [za_logo] (v3.22.0): Inline-SVG, helle Variante fuer dunkle Flaechen ===== */
.za-logo { display: inline-block; line-height: 0; text-decoration: none; }
.za-logo svg { display: block; height: auto; max-width: 100%; }
.za-logo-text { font-weight: 700; font-size: 22px; color: inherit; line-height: 1; }

/* ===== Zinswecker v3.22.0: Titel-Klasse, Datenschutzhinweis, Footer-Variante ===== */
.za-wecker .za-wecker-titel { margin: 0 0 6px; font-size: 22px; font-weight: 600; color: #fff; line-height: 1.3; }
.za-wecker-formwrap { flex: none; width: 480px; max-width: 100%; }
.za-nl-hinweis { margin: 10px 0 0; font-size: 12px; color: rgba(255,255,255,0.65); }
.za-nl-hinweis a { color: inherit; text-decoration: underline; }
.za-sb-nl-hinweis { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--za-gray-500); }
.za-sb-nl-hinweis a { color: inherit; text-decoration: underline; }
.za-sb-nl-icon svg { display: block; color: var(--za-blue); }

/* Footer-Variante: kein eigener Hintergrund, sitzt direkt auf dem dunklen
   Seitenfuss. Eyebrow in CTA-Orange, Titel weiss, Formular rechts. */
.za-wecker--footer { background: transparent; border-radius: 0; padding: 0; margin: 0; gap: 48px; }
.za-wecker--footer .za-wecker-text { max-width: 560px; }
.za-wecker-eyebrow { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #ff9c11; }
.za-wecker--footer .za-wecker-titel { font-size: 24px; }
.za-wecker--footer p { color: rgba(255,255,255,0.78); }
.za-wecker--footer .za-wecker-form input[type="email"] { min-width: 0; flex: 1; background: #fff; }
@media (max-width: 900px) {
    .za-wecker--footer { flex-direction: column; align-items: stretch; gap: 20px; }
    .za-wecker-formwrap { width: 100%; }
}

/* Footer-Linkspalten (v3.23.1): .gbp-footer__title ist eine GenerateBlocks-
   Global Class aus dem Footer-Blockmarkup, nicht plugineigen - Override hier,
   da frontend.css sitewide laedt und die Global-Class-Definition selbst
   keinen Abstand zur ersten Zeile vorsieht. */
.gbp-footer__title { margin-bottom: 1rem; }

/* Responsive */
@media (max-width: 1024px) {
    .za-vgl-grid { grid-template-columns: 1fr 1fr; }
    .za-vgl-two { grid-template-columns: 1fr; }
    .za-wecker { flex-direction: column; align-items: stretch; }
    .za-wecker-form input[type="email"] { min-width: 0; flex: 1; }
}
@media (max-width: 900px) {
    .za-vgl thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    .za-vgl, .za-vgl tbody, .za-vgl tr, .za-vgl td { display: block; }
    .za-vgl tr.za-vgl-main { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; background: #fff; border: var(--za-border); border-bottom: 0; border-radius: var(--za-radius) var(--za-radius) 0 0; padding: 14px; }
    .za-vgl tr.za-vgl-main td { padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent; }
    .za-vgl tr.za-vgl-main td[data-l]::before { content: attr(data-l); display: block; font-size: 14px; color: var(--za-gray-500); margin-bottom: 2px; }
    .za-vgl-prov, .za-vgl-act { grid-column: 1 / -1; }
    .za-vgl-act { display: flex !important; justify-content: space-between; align-items: center; text-align: left; }
    .za-vgl-val { white-space: normal; }
    .za-vgl-hbv::after { right: auto; left: 0; max-width: 220px; }
    .za-vgl tr.za-vgl-det > td { padding: 14px; }
    .za-vgl-det-in { grid-template-columns: 1fr; }
    table.za-vgl tr.za-vgl-gap td { height: 10px; }
}
@media (max-width: 768px) {
    .za-vgl-foot { flex-direction: column; align-items: stretch; }
    .za-wecker { padding: 20px 16px; }
}

/* ===== Lexikon (Glossar) ===== */
.za-lexikon-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 24px;
}
.za-lexikon-toc-list a {
    color: var(--za-blue);
    text-decoration: none;
    font-size: 15px;
}
.za-lexikon-toc-list a:hover { text-decoration: underline; }
@media (max-width: 768px) {
    .za-lexikon-toc-list { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .za-lexikon-toc-list { grid-template-columns: 1fr; }
}

/* ===== Ratgeber-Uebersicht (Kartenraster) ===== */
.za-ratgeber-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 16px;
}
.za-ratgeber-card {
    display: block;
    padding: 20px;
    border: 1px solid var(--za-gray-100);
    border-radius: var(--za-radius);
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.za-ratgeber-card:hover {
    border-color: var(--za-blue);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.za-ratgeber-card-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--za-blue);
    margin: 0 0 8px;
}
.za-ratgeber-card-desc {
    font-size: 14px;
    color: var(--za-gray-500);
    margin: 0;
    line-height: 1.5;
}

/* ===== Ratgeber-Uebersicht ([za_ratgeber_uebersicht]) ===== */
.za-ratgeber-uebersicht-h2 {
    font-size: 26px;
    font-weight: 600;
    color: var(--za-blue);
    margin: 48px 0 20px;
}
.za-ratgeber-uebersicht-h2--first { margin-top: 0; }

.za-ratgeber-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 20px;
}
.za-ratgeber-card {
    display: block;
    background: #fff;
    border: var(--za-border);
    border-radius: var(--za-radius);
    padding: 24px 28px;
    box-shadow: var(--za-shadow);
    text-decoration: none;
    color: inherit;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.za-ratgeber-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}
.za-ratgeber-card h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--za-blue);
    margin: 0 0 8px;
}
.za-ratgeber-card p {
    font-size: 15px;
    color: var(--za-gray-700);
    line-height: 1.5;
    margin: 0;
}
@media (max-width: 900px) {
    .za-ratgeber-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .za-ratgeber-grid { grid-template-columns: 1fr; }
}

/* ===== Top-5-Tabelle ([za_top5_tabelle]) ===== */
.za-top5-bank {
    color: var(--za-blue);
    text-decoration: none;
    font-weight: 400;
}
.za-top5-bank:hover { text-decoration: underline; }

@media (max-width: 480px) {
    /* Kopfzeile (Spaltenlabels) ist ueberfluessig, sobald jede Zelle per
       data-label ihre eigene Mini-Ueberschrift zeigt (.za-kond-table--wide) -
       sonst wuerde eine leere erste "Karte" mit nur Fettschrift-Labels erscheinen. */
    .za-top5-table tr:first-child { display: none; }
    /* Echte Card-Optik pro Bank (nicht nur gestapelte Zeilen mit duennem Trennstrich),
       passend zu den anderen Card-Elementen auf der Seite (z.B. .za-ratgeber-card). */
    .za-top5-table tr {
        background: #fff;
        border: var(--za-border);
        border-radius: var(--za-radius);
        box-shadow: var(--za-shadow);
        padding: 16px;
        margin-bottom: 12px;
    }
    .za-top5-table tr:last-child { margin-bottom: 0; }
}

/* ===== [za_vgl_kopf produkt="festgeld"]: zusaetzlicher Abstand nach unten ===== */
/* Nur fuer die Festgeld-Seite (ueber die produkt-Modifier-Klasse), da dort direkt
   im Anschluss das externe [festgeld]-Vergleichswidget mit eigenen Tabs folgt, die
   sonst ohne Luft am Intro-Bereich kleben. Betrifft NICHT die bestehende Tagesgeld-
   Seite (.za-vgl-kopf--tagesgeld) oder irgendein anderes bestehendes Layout. */
.za-vgl-kopf--festgeld { margin-bottom: 32px; }

/* ===== [za_vgl_kopf toc="..."]: Inhaltsverzeichnis-Box in der Sidebar ===== */
.za-sb-toc-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--za-gray-900);
}
.za-sb-toc-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.za-sb-toc-list li {
    border-top: var(--za-border);
    padding: 10px 0;
}
.za-sb-toc-list li:first-child { border-top: none; padding-top: 0; }
.za-sb-toc-list li:last-child { padding-bottom: 0; }
.za-sb-toc-list a {
    color: var(--za-blue);
    text-decoration: none;
    font-size: 15px;
    font-weight: 500;
}
.za-sb-toc-list a:hover { text-decoration: underline; }

/* =====================================================================
   MOBILE-OPTIMIERUNG (v2.9.0) - App-Feeling auf dem Smartphone
   Ziel: kein Zoom, nichts laeuft aus den Boxen, keine unzuverlaessigen
   Hover-Effekte, kompaktere Karten. Nur Ergaenzungen/Ueberschreibungen,
   Desktop bleibt unveraendert.
   ===================================================================== */

/* --- Touch-Geraete (kein echter Mauszeiger): Hover/Tooltips komplett aus.
   iOS/Android simulieren :hover beim Antippen ("sticky hover") - dadurch
   klebten Tooltips fest oder liefen aus dem Screen, Hover-Hintergruende
   blieben nach dem Tippen haengen. (hover: none) trifft genau diese Geraete,
   unabhaengig von der Bildschirmbreite. --- */
@media (hover: none) {
    /* Punkt 2: Tooltip auf dem Hausbank-Vergleichs-Chip in der Ergebniskarte */
    .za-vgl-hbv::after,
    .za-vgl-hbv:hover::after,
    .za-vgl-hbv:focus-visible::after,
    .za-vgl-hbv.za-vgl-show::after { display: none; }
    .za-vgl-val small.za-vgl-hbv { cursor: default; }

    /* Punkt 6: Gauge-Tooltip im Zins-Farbverlauf. Die bisherige Regel
       .za-gauge-tt { display:none } verlor gegen .za-gauge-dot:hover .za-gauge-tt
       (hoehere Spezifitaet) - beim Antippen erschien der Tooltip trotzdem und
       lief am Rand aus dem Screen. Die Werte stehen ohnehin in der Legende. */
    .za-gauge-dot:hover .za-gauge-tt,
    .za-gauge-tt { display: none; }
    .za-gauge-dot:hover { transform: translateX(-50%); }

    /* Hover-Hintergruende in Tabellen neutralisieren (bleiben sonst nach dem
       Antippen stehen). Zebra-Faerbung der Konditionstabelle bleibt erhalten. */
    .za-kond-table tr:nth-child(odd):hover { background: var(--za-gray-50); }
    .za-kond-table tr:nth-child(even):hover { background: #fff; }
    table.za-vgl tbody:not(.za-vgl-open):hover tr.za-vgl-morerow td { background: #fff; }
    /* Die Hauptzellen (Zinssatz, Zinsgarantie, ...) hatte ich beim ersten Mal nicht mit
       erfasst - dieselbe Hover-Regel faerbte sie beim Antippen grau (klebender Hover). */
    table.za-vgl tbody:not(.za-vgl-open):hover tr.za-vgl-main td { background: #fff; }
    .za-rtable tbody tr:hover { background: transparent; }
    /* iOS/Android zeigen beim Antippen von Elementen mit Klick-Handlern ein
       halbtransparentes blau-graues Tap-Highlight - fuer App-Feeling abschalten. */
    .za, .za * { -webkit-tap-highlight-color: transparent; }
}

@media (max-width: 768px) {
    /* --- Punkt 1a: kein Auto-Zoom beim Fokus auf Eingabefelder.
       iOS Safari zoomt automatisch in jedes Feld mit weniger als 16px
       Schriftgroesse hinein. 16px ist der einzige zuverlaessige Weg das zu
       verhindern - user-scalable=no wird von iOS seit Jahren ignoriert und
       waere zudem ein Barrierefreiheits-Problem. --- */
    .za-vgl-in input,
    .za-vgl-in select,
    .za-wecker-form input[type="email"] { font-size: 16px; }

    /* --- Punkt 1b: Rechner-Box kompakter. Betrag|Dauer teilen sich eine
       Zeile; Hausbank (Toggle + Eingabe + "% Zinsen", ~200px) und Sortierung
       bleiben auf voller Breite, weil sie nicht in eine halbe Spalte passen
       wuerden. 3 statt 4 Zeilen, engere Abstaende, kleinere Filter-Chips. --- */
    .za-vgl-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .za-vgl-grid > .za-vgl-field:nth-child(3),
    .za-vgl-grid > .za-vgl-field:nth-child(4) { grid-column: 1 / -1; }
    .za-vgl-field label { margin-bottom: 4px; font-size: 13px; }
    .za-vgl-foot { margin-top: 12px; padding-top: 10px; gap: 8px; }
    .za-vgl-chips { gap: 6px; }
    .za-vgl-chip { padding: 4px 10px; font-size: 13px; }

    /* --- Punkt 2: Ergebniskarte zweispaltig (bisher wurde das Grid ab 768px
       auf eine Spalte gezwungen - eine Karte fuellte fast den ganzen Screen).
       Zinssatz|Zinsgarantie, Oe-Zins|Gutschrift, Einlagensicherung|Zinsertrag,
       darunter der Button auf voller Breite. Zinsertrag links wie alles andere
       (eine einheitliche Flucht statt eines rechtsbuendigen Ausreissers). --- */
    .za-vgl tr.za-vgl-main { grid-template-columns: 1fr 1fr; gap: 12px 12px; padding: 12px; }
    .za-vgl tr.za-vgl-main td.za-vgl-r { text-align: left; }
    .za-vgl tr.za-vgl-main .za-vgl-val.za-vgl-ertrag { align-items: flex-start; }
    .za-vgl tr.za-vgl-main td[data-l]::before { font-size: 13px; }
    .za-vgl-act .za-vgl-btn { width: 100%; justify-content: center; }

    /* --- Punkt 3: Details im Vergleich - EINE Flucht. Bisher bemass jede der
       drei Listen ihre Label-Spalte an ihrem eigenen laengsten Label
       (max-content), dadurch sprangen die Werte von Block zu Block. Auf dem
       Smartphone stehen die Bloecke untereinander, deshalb jetzt eine feste
       50/50-Aufteilung fuer alle - Werte beginnen ueberall an derselben Stelle,
       lange Labels duerfen umbrechen. --- */
    .za-vgl-kv { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
    .za-vgl-kv dt { white-space: normal; }

    /* --- Punkt 4: Tabellen laufen nicht mehr aus den Boxen.
       Root Cause bei der Konditionstabelle: white-space:nowrap aus der
       Basis-Regel wurde beim Mobile-Stacking nie zurueckgesetzt - lange
       Labels konnten nicht umbrechen und schoben die ganze Seite in die
       Breite. Fuer alle anderen Tabellen im Ratgeber-Content (z.B. aus dem
       Editor eingefuegt) scrollt die Tabelle notfalls IN SICH SELBST statt die
       Box zu sprengen - bewusst overflow auf dem <table>, NIE auf .za-sec
       (das wuerde position:sticky und Tooltips zerstoeren). --- */
    .za-kond-table th { white-space: normal; width: 100%; }
    .za-ratgeber-content table:not(.za-kond-table) {
        display: block;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    /* Lange Woerter/URLs koennen eine Box ebenfalls sprengen - Umbruch erlauben
       (overflow-wrap ist NICHT die overflow-Eigenschaft, keine Sticky-Landmine). */
    .za-sec, .za-hero-wrap { overflow-wrap: break-word; }

    /* --- Punkt 5/7/8: Icon + Text. Bisher standen Ueberschrift UND Fliesstext
       rechts neben dem Icon, die Icon-Spalte blieb darunter leer. Jetzt: Icon
       und Ueberschrift in einer Zeile, der Fliesstext darunter ueber die volle
       Breite. Rein per CSS: display:contents loest den Text-Wrapper auf, seine
       Kinder werden direkte Grid-Zellen. Kein Template angefasst. --- */
    .za-sc-item,
    .za-news-item,
    .za-fazit-autor {
        display: grid;
        grid-template-columns: auto 1fr;
        column-gap: 12px;
        row-gap: 6px;
        align-items: center;
    }
    .za-sc-content,
    .za-news-body,
    .za-fazit-autor-body { display: contents; }
    /* Zeile 1, rechts neben dem Icon: die Ueberschrift bzw. das Datum/Label */
    .za-sc-q,
    .za-news-date,
    .za-fazit-autor-label { grid-column: 2; margin: 0; }
    /* Zeile 2 ff., volle Breite: der eigentliche Text */
    .za-sc-a,
    .za-news-text,
    .za-fazit-autor-desc,
    .za-fazit-autor-name,
    .za-fazit-autor-meta { grid-column: 1 / -1; }
    .za-sc-icon, .za-news-icon, .za-fazit-autor-photo { margin-top: 0; }
}

/* ===================================================================
   TAGESGELDRECHNER [za_zinsrechner] (v3.0.0)
   =================================================================== */
.za-zr-modi { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 20px; background: var(--za-gray-50); padding: 4px; border-radius: 999px; }
.za-zr-modus { flex: 1; text-align: center; padding: 8px 14px; border-radius: 999px; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--za-gray-500); user-select: none; white-space: nowrap; }
.za-zr-modus input { position: absolute; opacity: 0; width: 0; height: 0; }
.za-zr-modus:has(input:checked) { background: #fff; color: var(--za-blue); box-shadow: var(--za-shadow); }
.za-zr-modus:focus-within { outline: 3px solid var(--za-blue-light); outline-offset: 2px; }

.za-zr-cols { display: grid; grid-template-columns: 55fr 45fr; gap: 24px; align-items: start; }
.za-zr-field { margin-bottom: 14px; }
.za-zr-field label { display: block; font-size: 14px; color: var(--za-gray-500); margin-bottom: 6px; }
/* Ausblenden hat Vorrang vor dem Grid-Fluss: ein verstecktes Feld darf keine
   Rasterzelle belegen, sonst entstuende eine Luecke im Zwei-Spalten-Layout. */
.za-zr-field[hidden] { display: none !important; }
.za-zr-field.za-zr-invalid .za-vgl-in { border-color: #b3261e; }
.za-zr-err { color: #b3261e; font-size: 13px; margin: 6px 0 0; }
/* Punkt 2: mehrere Felder pro Zeile statt jeweils voller Breite */
.za-zr-zeile { display: grid; gap: 0 14px; }
.za-zr-zeile2 { grid-template-columns: 1fr 1fr; }
.za-zr-zeile-laufzeit { grid-template-columns: 1fr 1fr 1.4fr; }
/* Punkt 7: Sparrate/Inflation nehmen nur kleine Werte auf */
.za-zr-schmal { max-width: 220px; }
.za-zr-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.za-zr-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
.za-zr-switchrow { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-top: 1px solid var(--za-gray-100); font-size: 15px; }
.za-zr-block { padding: 12px 0 4px; }
.za-zr-note { font-size: 13px; color: var(--za-gray-500); margin: 4px 0 0; }

.za-zr-ergebnis { background: var(--za-gray-50); border: var(--za-border); border-radius: var(--za-radius); padding: 18px; position: sticky; top: 1rem; }
.za-zr-out.za-zr-stale { opacity: 0.45; }
.za-zr-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-top: 1px solid var(--za-gray-100); }
.za-zr-row:first-child { border-top: 0; }
.za-zr-row-l { color: var(--za-gray-500); font-size: 15px; }
.za-zr-row-v { font-weight: 600; color: var(--za-gray-900); text-align: right; }
.za-zr-row.za-zr-haupt { border-top: 0; display: block; margin-bottom: 6px; }
.za-zr-row.za-zr-haupt .za-zr-row-l { display: block; font-size: 15px; }
.za-zr-row.za-zr-haupt .za-zr-row-v { display: block; text-align: left; font-size: 32px; line-height: 1.2; color: var(--za-blue); }
.za-zr-neg { color: #b3261e; }
.za-zr-hinweise { background: var(--za-amber-light, #FAEEDA); color: #854F0B; border-radius: var(--za-radius-sm); padding: 10px 12px; margin-bottom: 12px; font-size: 14px; }
.za-zr-hinweise p { margin: 0; }

.za-zr-ab { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.za-zr-ab-col h3 { font-size: 15px; margin: 0 0 6px; color: var(--za-blue); }
.za-zr-abfazit { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--za-gray-100); font-size: 15px; }

/* Punkt 4: eigene, bewusst zurueckhaltende Box UNTER der Ergebniskarte -
   keine Signalfarbe, damit sie dem eigentlichen Ergebnis nicht die Schau stiehlt. */
.za-zr-bruecke {
    margin-top: 14px;
    background: #fff;
    border: var(--za-border);
    border-radius: var(--za-radius);
    padding: 14px 16px;
    font-size: 15px;
    color: var(--za-gray-900);
}
.za-zr-bruecke p { margin: 0 0 10px; }
.za-zr-bruecke-btn {
    display: inline-block;
    color: var(--za-blue);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--za-blue);
    border-radius: 8px;
    padding: 8px 16px;
}
.za-zr-bruecke-btn:hover { background: var(--za-blue); color: #fff; }
.za-zr-sub { font-size: 14px; color: var(--za-gray-500); font-weight: 400; }

.za-zr-verlauf-wrap { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--za-gray-100); }
.za-zr-chart { display: flex; align-items: flex-end; gap: 3px; height: 120px; margin: 12px 0 18px; }
.za-zr-bar { flex: 1; background: var(--za-blue); border-radius: 3px 3px 0 0; min-width: 3px; }
.za-zr-datenschutz { font-size: 13px; color: var(--za-gray-500); margin: 16px 0 0; }

/* Mobile-Leiste mit dem Hauptergebnis */
.za-zr-mobilebar { display: none; }

@media (max-width: 1023px) {
    .za-zr-cols { grid-template-columns: 1fr; }
    .za-zr-ergebnis { position: static; }
}
@media (max-width: 768px) {
    /* Bei vier Optionen wird das Segmented Control zu eng - umbrechen statt quetschen */
    .za-zr-modi { border-radius: var(--za-radius); }
    .za-zr-modus { flex: 1 1 45%; font-size: 14px; padding: 8px 6px; }
    .za-zr-grid3, .za-zr-grid2 { grid-template-columns: 1fr; }
    .za-zr-zeile2 { grid-template-columns: 1fr 1fr; }
    .za-zr-zeile-laufzeit { grid-template-columns: 1fr 1fr; }
    .za-zr-zeile-laufzeit > .za-zr-field:last-child { grid-column: 1 / -1; }
    .za-zr-schmal { max-width: none; }
    .za-zr-ab { grid-template-columns: 1fr; }
    .za-zr-row.za-zr-haupt .za-zr-row-v { font-size: 28px; }
    /* Kein Auto-Zoom beim Fokus (siehe Mobile-Block oben) */
    .za-zr input, .za-zr select { font-size: 16px; }
    .za-zr-mobilebar {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
        background: #fff; border-top: var(--za-border); box-shadow: 0 -2px 12px rgba(0,0,0,0.08);
        padding: 10px 16px; font-size: 15px;
    }
    .za-zr-mobilebar button { background: var(--za-blue); color: #fff; border: 0; border-radius: 8px; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
    .za-zr { padding-bottom: 8px; }
}

/* ===== Verlaufsdiagramm: Tooltip je Balken ===== */
.za-zr-bar { position: relative; }
.za-zr-bar-tip {
    display: none;
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--za-blue-light);
    color: var(--za-blue);
    border: 0.5px solid #B5D4F4;
    border-radius: var(--za-radius-sm);
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.45;
    white-space: nowrap;
    text-align: left;
    pointer-events: none;
    z-index: 5;
}
.za-zr-bar:hover .za-zr-bar-tip { display: block; }
/* Randbalken: Tooltip nach innen ziehen, damit er nicht aus der Box laeuft
   (derselbe Fehler wie frueher beim Zins-Farbverlauf). */
.za-zr-bar:nth-child(-n+3) .za-zr-bar-tip { left: 0; transform: none; }
.za-zr-bar:nth-last-child(-n+3) .za-zr-bar-tip { left: auto; right: 0; transform: none; }
/* Auf Touch-Geraeten kein Hover: dort taeuscht ein "klebender" Tooltip nur. */
@media (hover: none) {
    .za-zr-bar:hover .za-zr-bar-tip { display: none; }
}

/* =====================================================================
   STARTSEITE (v3.2.0)
   Baut konsequent auf den bestehenden Bausteinen auf: .za-sec (weisse Box),
   .za-sec-title + .za-marker (Ueberschrift mit Tab), .za-cta-primary /
   .za-cta-secondary (Buttons), .za-ratgeber-card (Kartenoptik) und den
   vorhandenen CSS-Variablen. Keine neuen Farben, keine neue Typografie.
   ===================================================================== */

/* --- CTAs im Kopf --- */
.za-kopf-ctas { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

/* --- Empfehlungen --- */
.za-emp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: stretch; }
.za-emp-karte {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: var(--za-border);
    border-radius: var(--za-radius);
    box-shadow: var(--za-shadow);
    padding: 20px 18px 18px;
}
/* Hervorgehobene Karte: Akzentrahmen in der Markenfarbe, kein neuer Farbton */
.za-emp-karte--top { border-color: var(--za-blue); box-shadow: 0 0 0 2px var(--za-blue-light), var(--za-shadow); }
.za-emp-badge {
    position: absolute; top: 0; left: 18px; transform: translateY(-50%);
    background: var(--za-blue); color: #fff;
    font-size: 13px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
}
.za-emp-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; min-height: 32px; }
.za-emp-logo { width: 40px; height: 28px; object-fit: contain; flex-shrink: 0; }
.za-emp-bank { font-weight: 600; color: var(--za-gray-900); }
.za-emp-zins { margin-bottom: 12px; }
.za-emp-zins strong { display: block; font-size: 30px; line-height: 1.15; color: var(--za-blue); }
.za-emp-zins-sub { font-size: 14px; color: var(--za-gray-500); }
.za-emp-text { font-size: 15px; color: var(--za-gray-700); flex: 1; }
.za-emp-text p { margin: 0 0 10px; }
.za-emp-links { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.za-emp-cta { justify-content: center; }
.za-emp-detail { font-size: 15px; color: var(--za-blue); text-decoration: none; }
.za-emp-detail:hover { text-decoration: underline; }

/* --- Trust / So arbeiten wir --- */
.za-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 18px; }
.za-trust-kachel {
    background: var(--za-gray-50);
    border-radius: var(--za-radius-sm);
    padding: 16px 14px;
    text-align: center;
}
.za-trust-wert { display: block; font-size: 26px; font-weight: 600; color: var(--za-blue); line-height: 1.2; }
.za-trust-label { display: block; font-size: 14px; color: var(--za-gray-500); margin-top: 4px; }
.za-trust-text p { margin: 0 0 10px; }
.za-trust-links { margin: 14px 0 0; }
.za-trust-links a { color: var(--za-blue); text-decoration: none; font-weight: 500; }
.za-trust-links a:hover { text-decoration: underline; }
.za-trust-sep { color: var(--za-gray-500); }

/* --- Wissen: Kartenraster (gleiche Optik wie die Ratgeber-Karten) --- */
.za-wissen-grid { display: grid; gap: 16px; }
.za-wissen-grid--3 { grid-template-columns: repeat(3, 1fr); }
.za-wissen-grid--2 { grid-template-columns: repeat(2, 1fr); }
.za-wissen-karte {
    display: flex; flex-direction: column;
    background: #fff;
    border: var(--za-border);
    border-radius: var(--za-radius);
    padding: 18px;
    transition: transform .15s, box-shadow .15s;
}
.za-wissen-karte:hover { transform: translateY(-2px); box-shadow: var(--za-shadow); }
.za-wissen-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--za-blue-light); color: var(--za-blue);
    margin-bottom: 12px;
}
.za-wissen-titel { font-size: 17px; font-weight: 600; color: var(--za-blue); margin: 0 0 8px; }
.za-wissen-text { font-size: 15px; color: var(--za-gray-700); flex: 1; }
.za-wissen-text p { margin: 0 0 8px; }
.za-wissen-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; color: var(--za-blue); text-decoration: none; font-weight: 500; font-size: 15px; }
.za-wissen-link:hover { text-decoration: underline; }

/* --- Zinsaenderungen auf der Startseite --- */
.za-start-news-liste { list-style: none; margin: 0; padding: 0; }
.za-start-news-item {
    display: grid;
    grid-template-columns: 96px minmax(160px, 1fr) 2fr;
    gap: 12px;
    align-items: center;
    padding: 10px 0;
    border-top: 1px solid var(--za-gray-100);
    font-size: 15px;
}
.za-start-news-item:first-child { border-top: 0; }
.za-start-news-datum { color: var(--za-gray-500); }
.za-start-news-bank { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.za-start-news-bank img { width: 20px; height: 20px; object-fit: contain; }
.za-start-news-bank a { color: var(--za-blue); text-decoration: none; }
.za-start-news-bank a:hover { text-decoration: underline; }
.za-start-news-more { margin: 16px 0 0; }

/* --- Banken-Raster --- */
.za-banken-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.za-banken-kachel {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
    background: #fff;
    border: var(--za-border);
    border-radius: var(--za-radius-sm);
    padding: 14px 10px;
    min-height: 84px;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.za-banken-kachel:hover { transform: translateY(-2px); box-shadow: var(--za-shadow); }
.za-banken-kachel img { max-width: 100%; height: 26px; object-fit: contain; }
.za-banken-name { font-size: 13px; font-weight: 600; color: var(--za-gray-700); text-align: center; }
.za-banken-zins { font-size: 14px; font-weight: 600; color: var(--za-blue); }

/* --- Top-5-Button --- */
.za-top5-button { margin: 18px 0 0; }

@media (max-width: 1023px) {
    /* 40px statt 26px: das Badge ragt oben aus der Karte heraus und stiess
       sonst optisch an die Karte darueber. */
    .za-emp-grid { grid-template-columns: 1fr; gap: 40px; }
    .za-wissen-grid--3, .za-wissen-grid--2 { grid-template-columns: repeat(2, 1fr); }
    .za-banken-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .za-wissen-grid--3, .za-wissen-grid--2 { grid-template-columns: 1fr; }
    .za-banken-grid { grid-template-columns: repeat(3, 1fr); }
    .za-trust-grid { grid-template-columns: repeat(2, 1fr); }
    .za-kopf-ctas { flex-direction: column; }
    .za-kopf-ctas a { justify-content: center; }
    /* Zinsaenderungen: Datum und Bank in eine Zeile, Text darunter -
       drei Spalten waeren auf dem Smartphone unlesbar schmal. */
    .za-start-news-item { grid-template-columns: auto 1fr; gap: 4px 10px; }
    .za-start-news-text { grid-column: 1 / -1; color: var(--za-gray-700); }
}

/* Sicherheitsnetz gegen leere Rasterzellen: wpautop() kann <br>/<p> zwischen die
   Karten setzen - jedes davon wuerde eine Grid-Zelle belegen und die Karten im
   Zickzack "huepfen" lassen. Alles, was keine Karte ist, wird ausgeblendet. */
.za-emp-grid > :not(.za-emp-karte),
.za-wissen-grid > :not(.za-wissen-karte),
.za-banken-grid > :not(.za-banken-kachel) { display: none; }

/* ===== Startseite: Hero ueber die volle Viewport-Breite ===== */
/* Breakout aus dem 75%-Container: das Element wird auf die Viewport-Breite
   gezogen, der Inhalt darin wieder auf die Containerbreite begrenzt. Das
   Hintergrundbild kommt per CSS-Variable aus dem aktiven Theme (Template),
   Layout und Uebergang liegen komplett hier. */
.za-start-hero {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-top: -2rem; /* hebt das Section-Padding des Wrappers oben auf */
    margin-bottom: 8px;
    /* Seitliches Padding = genau der Weg, um den das Element nach links
       herausgezogen wurde (50vw - 50% des Containers). Der Inhalt landet damit
       exakt auf den Kanten des Seitencontainers, buendig mit allen Boxen darunter.
       Die Scrollbar-Breite kuerzt sich dabei heraus (in Margin und Padding gleich). */
    padding: 56px calc(50vw - 50%) 48px;
    background-color: var(--za-bg, #f0f4fa);
    background-image:
        linear-gradient(to bottom, rgba(240, 244, 250, 0) 0%, rgba(240, 244, 250, 0) calc(100% - 120px), #f0f4fa 100%),
        var(--za-hero-bg, var(--za-pattern));
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
}
.za-hero-inner {
    /* keine eigene max-width: die Breite ergibt sich aus dem Seitencontainer */
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) 380px;
    gap: 40px;
    align-items: center;
}
.za-hero-inner > * { min-width: 0; }
.za-hero-kleinzeile { font-size: 14px; color: var(--za-gray-500); margin: 0 0 10px; }
.za-hero-h1 { font-weight: 400; margin: 0 0 20px; }
/* Der per h1_fett hervorgehobene Kernbegriff: eigene Zeile in Markenblau.
   #185FA5 ist exakt --za-blue, deshalb die Variable statt des Hex-Werts. */
.za-hero-h1 strong { font-weight: 700; color: var(--za-blue); display: block; }
.za-hero-vorteile { list-style: none; margin: 0 0 22px; padding: 0; }
.za-hero-vorteile li { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 10px; font-size: 18px; color: var(--za-gray-900); }
/* Oranges Check-Kaestchen (Stil der Live-Startseite): CTA-Orange, kein neuer Farbwert */
.za-hero-check {
    flex-shrink: 0; margin-top: 3px;
    width: 20px; height: 20px; border-radius: 4px;
    background: #ff9c11; color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
}
.za-hero-cta { margin: 0 0 12px; }
/* Trust-Zeile bewusst UNTER dem Button, nicht daneben */
.za-hero-trust { display: block; margin: 0; font-size: 13px; color: var(--za-gray-500); }
.za-hero-form {
    background: #fff;
    border: var(--za-border);
    border-radius: var(--za-radius);
    box-shadow: var(--za-shadow);
    padding: 24px 22px;
}
.za-hero-form-titel { font-size: 18px; font-weight: 600; color: var(--za-gray-900); margin: 0 0 14px; }
.za-hero-label { display: block; font-size: 14px; color: var(--za-gray-500); margin-bottom: 6px; }
.za-hero-segment { margin-bottom: 0; }
.za-hero-segment .za-zr-modus { padding: 8px 6px; font-size: 14px; }
/* Wie der orange CTA links: gleiche Groesse, KEINE volle Kartenbreite */
.za-hero-submit { margin-top: 10px; }
.za-hero-form-hinweis { font-size: 12px; color: var(--za-gray-500); margin: 10px 0 0; }

/* Blauer Button (Sekundaer-CTA der Vorlage) - ausschliesslich Theme-Tokens,
   gleiche Groesse wie .za-cta-primary */
.za-cta-blue {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    /* Exakt die Werte der WIRKSAMEN .za-cta-primary-Regel. Achtung: .za-cta-primary
       ist im Stylesheet ZWEIMAL definiert (14px 28px weiter oben, 6px 12px weiter
       unten) - es gilt die spaetere. Daran orientiert sich dieser Button, sonst
       ist er rund 12px hoeher als der orange CTA daneben.
       Kein line-height-Override: der <a> erbt die Theme-Zeilenhoehe, der Button
       muss das ueber font: inherit ebenfalls tun, sonst weichen die Hoehen ab. */
    padding: 6px 12px;
    background: var(--za-blue); color: #fff;
    border: none; border-radius: var(--za-radius-sm);
    font: inherit; font-size: 18px; font-weight: 600; text-decoration: none;
    cursor: pointer; transition: background 0.15s;
}
.za-cta-blue:hover { background: var(--za-blue-dark); color: #fff; }

/* Logo-Leiste direkt unter dem Hero: Box ohne Titel, kleinere Kacheln, nur Logos */
.za-start-banken--kompakt { margin-top: 0; padding: 18px 24px; }
.za-start-banken--kompakt .za-banken-grid { grid-template-columns: repeat(8, 1fr); gap: 8px; }
.za-start-banken--kompakt .za-banken-kachel { min-height: 56px; padding: 10px 8px; border: 0; background: transparent; }
.za-start-banken--kompakt .za-banken-kachel:hover { transform: none; box-shadow: none; }
.za-start-banken--kompakt .za-banken-kachel img { height: 22px; opacity: .85; }
.za-start-banken--kompakt .za-banken-zins { display: none; }

/* Nummerierte Schritte: 4 Kacheln nebeneinander (Vorlage). min-width:0 auf den
   Grid-Kindern ist Pflicht - ohne das brechen lange Woerter buchstabenweise um. */
.za-schritte { list-style: none; margin: 0; padding: 0; counter-reset: schritt; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.za-schritte li {
    counter-increment: schritt;
    min-width: 0;
    background: var(--za-gray-50); border-radius: var(--za-radius-sm); padding: 20px 18px;
    font-size: 16px; color: var(--za-gray-700);
}
.za-schritte li::before {
    content: counter(schritt);
    display: flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%; margin-bottom: 12px;
    background: var(--za-blue); color: #fff;
    font-size: 18px; font-weight: 600;
}
.za-schritte strong { display: block; margin-bottom: 6px; font-size: 16px; color: var(--za-gray-900); }

/* Haken-Liste (Tarifcheck-Muster "Vorteile auf einen Blick") - in za_box nutzbar */
.za-haken { list-style: none; margin: 0; padding: 0; }
.za-haken li { position: relative; padding-left: 28px; margin-bottom: 10px; }
/* Die senkrechte Position wird BERECHNET, nicht fest gesetzt.
   Ein fester Wert kann nicht ueberall stimmen: auf der Startseite haben die
   Eintraege keinen Innenabstand, auf den Bankseiten dagegen `padding: 8px 0`
   (.za-procon-col li) - genau daher kamen die 8px Unterschied. Die Formel
   setzt das Icon auf die Mitte der ersten Textzeile:
     Innenabstand oben + halbe Zeilenhoehe - halbe Icon-Hoehe
   --za-icon-top wird dort ueberschrieben, wo der Innenabstand abweicht. */
.za-haken li, .za-kreuz li { --za-icon-oben: 0px; }
.za-haken li::before {
    content: ""; position: absolute; left: 0;
    top: calc(var(--za-icon-oben) + 0.5lh - 9px);
    width: 18px; height: 18px;
    border-radius: 50%; background: var(--za-green-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233B6D11' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
    background-size: 12px; background-repeat: no-repeat; background-position: center;
}

@media (max-width: 1023px) {
    .za-start-hero { grid-template-columns: 1fr; padding: 24px 20px; }
    .za-start-banken--kompakt .za-banken-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 768px) {
    .za-start-banken--kompakt .za-banken-grid { grid-template-columns: repeat(3, 1fr); }
    .za-hero-vorteile li { font-size: 16px; }
    .za-hero-form input, .za-hero-form select { font-size: 16px; }
}

/* Logo-Leiste: Zins-Badge oben rechts am Logo (Top-10 nach Neukundenzins) */
.za-start-banken--kompakt .za-banken-kachel { position: relative; overflow: visible; padding-top: 16px; }
.za-banken-badge {
    position: absolute; top: -8px; right: 6px;
    background: var(--za-blue); color: #fff;
    font-size: 12px; font-weight: 600; line-height: 1;
    padding: 4px 8px; border-radius: 999px;
    box-shadow: var(--za-shadow);
}
.za-start-banken--kompakt .za-banken-grid { grid-template-columns: repeat(5, 1fr); gap: 14px 10px; }
@media (max-width: 1023px) { .za-start-banken--kompakt .za-banken-grid { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 768px)  { .za-start-banken--kompakt .za-banken-grid { grid-template-columns: repeat(2, 1fr); } }

/* ===== Startseite nach Vorlage (v3.4.0): weitere Bausteine ===== */

/* Empfehlungen: Logo 260px breit, Name klein darunter, grosser Zins */
.za-emp-kopf { flex-direction: column; align-items: flex-start; gap: 6px; }
.za-emp-logo { width: 260px; max-width: 100%; height: auto; max-height: 60px; object-fit: contain; object-position: left center; }
.za-emp-bank { font-size: 14px; font-weight: 400; color: var(--za-gray-500); }
.za-emp-zins strong { font-size: 36px; }
.za-emp-karte:hover { border-color: var(--za-blue); box-shadow: var(--za-shadow); }

/* Wissen: ganze Kachel ist ein Link */
a.za-wissen-karte { text-decoration: none; color: inherit; }
a.za-wissen-karte:hover { border-color: var(--za-blue); background: var(--za-hover); }
.za-wissen-karte .za-wissen-link { color: var(--za-blue); }

/* Zwei Boxen nebeneinander ([za_zeile]) */
.za-zeile { display: grid; grid-template-columns: var(--za-zeile, 1fr 1fr); gap: 24px; align-items: start; margin-top: 80px; }
.za-zeile > * { min-width: 0; }
.za-zeile > .za.za-sec { margin-top: 0; } /* die Zeile traegt den Abstand, nicht die Boxen (Spezifitaet > :has-Regel) */

/* Transparenz-Karte dunkel: Theme-Dunkelblau, Tab-Label in CTA-Orange, 2x2 Kacheln */
.za-start-trust--dunkel { background: var(--za-blue-dark); border-color: var(--za-blue-dark); color: #fff; }
.za-start-trust--dunkel .za-sec-title { color: #fff; }
.za-start-trust--dunkel .za-marker { background: #ff9c11; color: #fff; }
.za-start-trust--dunkel .za-trust-grid { grid-template-columns: repeat(2, 1fr); }
.za-start-trust--dunkel .za-trust-kachel { background: rgba(255, 255, 255, 0.12); text-align: left; }
.za-start-trust--dunkel .za-trust-wert { color: #fff; font-size: 28px; }
.za-start-trust--dunkel .za-trust-label { color: rgba(255, 255, 255, 0.8); }
.za-start-trust--dunkel .za-trust-text { font-size: 17px; color: #fff; }
.za-start-trust--dunkel .za-trust-links a { color: #fff; text-decoration: underline; }
.za-start-trust--dunkel .za-trust-sep { color: rgba(255, 255, 255, 0.6); }

/* Zinsaenderungen: Aenderung rechts, farbcodiert (gruen hoch, rot runter, blau neu) */
.za-start-news-item { grid-template-columns: 96px 1fr auto; }
.za-start-news-text { font-weight: 600; text-align: right; white-space: nowrap; }
.za-start-news-text--hoch { color: var(--za-green-dark); }
.za-start-news-text--runter { color: var(--za-red-dark); }
.za-start-news-text--neu { color: var(--za-blue); }

/* Top 5: Ertrag rechtsbuendig und fett */
.za-top5-table .za-top5-ertrag { text-align: right; }

/* Karten-Innenabstand/Abstaende nach Vorlage bleiben Theme-Werte (.za-sec) */

@media (max-width: 900px) {
    .za-hero-inner { grid-template-columns: 1fr; gap: 24px; }
    .za-start-hero { padding-top: 36px; padding-bottom: 32px; }
    .za-schritte { grid-template-columns: 1fr 1fr; }
    /* v3.17.3 fand die 80px-Regel (.za-zeile > .za.za-sec + .za.za-sec, drei
       Klassen, gewann deshalb IMMER) und setzte sie auf 45px. Das reichte
       NICHT, gemessen am 18.09.2026 im echten Browser (390px):
         Vorteile -> Nachteile      81px statt 45px
         Transparenz -> naechste Box 57px statt 45px
       Ursache, zwei Effekte des GRIDS, die man dem CSS-Text nicht ansieht:
       1. In einem Grid fallen Margins nicht zusammen. Ueberall sonst auf der
          Seite liegt die 12px-margin-bottom der vorherigen Box IN der 45px-
          margin-top der naechsten (Block-Fluss, margin collapsing). In der
          Zeile addiert sie sich: 12 + 24 (gap) + 45 = 81.
       2. Die margin-bottom der LETZTEN Zeilen-Box zaehlt zur Hoehe des Grids
          und addiert sich ebenfalls zur naechsten Box: 12 + 45 = 57.
       Loesung: gestapelt ist die Zeile gar kein Grid mehr, sondern ein
       unsichtbarer Block. Dann verhalten sich beide Boxen exakt wie jede
       andere .za-sec auf der Seite - dieselben Regeln, dieselben Werte,
       kein eigener Abstandswert mehr, der auseinanderlaufen koennte.
       Die Kind-Regel muss die Desktop-Regel (.za-zeile > .za.za-sec, 3 Klassen,
       margin-top: 0) mit gleicher Spezifitaet ueberschreiben, daher hier
       explizit mit den Werten des Desktop-Systems (80/40); der Mobile-Block
       (v3.17.0, unten) setzt sie mit denselben Selektoren auf seine Werte. */
    .za-zeile { display: block; margin-top: 0; }
    .za-zeile > .za.za-sec { margin-top: 80px; }
    .za-zeile > .za.za-sec:not(:has(.za-marker)) { margin-top: 40px; }
    .za-emp-logo { width: 200px; }
    .za-start-news-item { grid-template-columns: auto 1fr; }
    .za-start-news-text { grid-column: 1 / -1; text-align: left; white-space: normal; }
}
@media (max-width: 600px) {
    .za-schritte { grid-template-columns: 1fr; }
}

/* ===== Startseite v3.4.1: Nachbesserungen ===== */
/* Empfehlungen: Logo 180px, Luft ueber dem Logo (Badge ragt in die Karte), mehr
   Abstand zwischen Headline und Karten */
.za-emp-grid { margin-top: 28px; }
.za-emp-karte { padding-top: 32px; }
.za-emp-logo { width: 180px; }
/* Persoenliches Intro mit Autorenzeile (Text kommt aus dem Editor) */
.za-emp-intro { display: flex; gap: 14px; align-items: flex-start; margin-top: 8px; }
.za-emp-autor-bild { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.za-emp-intro-text p { margin: 0 0 8px; }
.za-emp-autor { font-size: 15px; color: var(--za-gray-500); }
.za-emp-autor strong { color: var(--za-gray-900); }

/* Hero-Breakout: 100vw schliesst die Scrollbar mit ein, was einen horizontalen
   Scrollbalken erzeugen kann. overflow-x: clip beschneidet nur - es macht den
   body NICHT zum Scroll-Container (anders als hidden), position: sticky bleibt
   damit intakt. Bewusst nur auf Seiten mit dem Hero. */
body:has(.za-start-hero) { overflow-x: clip; }

@media (max-width: 900px) {
    .za-emp-intro { flex-direction: column; }
}

/* ===== v3.4.3 ===== */

/* Top-5-Tabelle: Innenabstand links/rechts, Text startet nicht am Rand */
.za-top5-table th, .za-top5-table td { padding-left: 14px; padding-right: 14px; }
.za-top5-table td.za-top5-ertrag { font-weight: 600; }

/* Kreuz-Liste (Nachteile) - Gegenstueck zur Haken-Liste, Theme-Rot */
.za-kreuz { list-style: none; margin: 0; padding: 0; }
.za-kreuz li { position: relative; padding-left: 28px; margin-bottom: 10px; }
.za-kreuz li::before {
    content: ""; position: absolute; left: 0;
    top: calc(var(--za-icon-oben) + 0.5lh - 9px);
    width: 18px; height: 18px;
    border-radius: 50%; background: var(--za-red-light);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23791F1F' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E");
    background-size: 11px; background-repeat: no-repeat; background-position: center;
}
@media (max-width: 480px) {
    /* Gestapelt: das Stacking der kond-table setzt eigene Innenabstaende */
    .za-top5-table th, .za-top5-table td { padding-left: 0; padding-right: 0; }
}

/* ===== v3.6.0 ===== */
/* Hintergrundmuster auf ALLEN Seiten: dezent hinter dem Seitenhintergrund.
   --za-pattern wird global im <head> gesetzt (relativer Pfad, damit Staging
   und Live jeweils ihr eigenes Bild laden). Der Hero ueberschreibt es nicht,
   er nutzt dieselbe Variable. */
/* Wurzel-relativer Pfad: der Browser loest ihn gegen die Domain auf, von der
   die Seite kommt - auf Staging also tagesgeld1.org, nach dem Go-Live
   tagesgeld.org. Kein PHP, kein Filter, keine Domain im Code.
   Ueberschreibbar im ZinsAdmin-Editor unter "Eigenes CSS":
   :root { --za-pattern: url("..."); }  oder  :root { --za-pattern: none; } */
:root { --za-pattern: url("/wp-content/uploads/tgpattern.png"); }
body { background-image: var(--za-pattern, none); background-position: center top; background-repeat: no-repeat; background-attachment: scroll; }

/* Empfehlungskarte: Logo + Name oben, Zins mit "p.a." auf einer Linie */
.za-emp-zins { display: flex; align-items: baseline; gap: 8px; margin: 0 0 14px; }
.za-emp-zins strong { display: inline; font-size: 36px; line-height: 1.1; }
.za-emp-zins .za-emp-zins-sub { font-size: 14px; color: var(--za-gray-500); }
.za-emp-vorteile { margin-bottom: 16px; flex: 1; }
.za-emp-vorteile li { font-size: 15px; color: var(--za-gray-700); }
.za-emp-links { margin-top: auto; }
.za-emp-cta { width: 100%; justify-content: center; }

/* Produktseiten-Vor-/Nachteile nutzen jetzt dieselben Icons wie die Startseite.
   Die alten Icon-Spans entfallen, .za-haken/.za-kreuz bringen sie per ::before. */
.za-procon-col .za-haken li, .za-procon-col .za-kreuz li { font-size: 17px; }

/* ===== v3.6.3 ===== */
/* Oranges Check-Kaestchen: bewusst CTA-Orange (Intro-Akzent der Startseite),
   die gruenen Haken bleiben in den Inhaltsboxen. */
.za-hero-check { margin-top: 5px; }

/* Testnote unter der Punktzahl: naeher dran und besser lesbar. Bewusst eigene
   Klasse statt der globalen .za-kond-small, die auch in den Konditionstabellen
   auf den Bankseiten genutzt wird. */
.za-tb-note {
    display: block;
    margin-top: 1px;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    color: var(--za-gray-700);
}

/* ===== Banken A-Z (/tagesgeld-banken) ===== */
.za-az-index { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 24px; }
.za-az-index a {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 34px; height: 34px; padding: 0 8px;
    background: var(--za-gray-50);
    border: var(--za-border);
    border-radius: var(--za-radius-sm);
    color: var(--za-blue);
    font-weight: 600; font-size: 15px; text-decoration: none;
}
.za-az-index a:hover { background: var(--za-blue-light); }
/* scroll-margin, damit der Sprungziel-Titel nicht unter einem Sticky-Header landet */
.za-az-titel { scroll-margin-top: 90px; margin: 28px 0 10px; font-size: 20px; color: var(--za-blue); }
.za-banken-table { width: 100%; border-collapse: collapse; }
.za-banken-table th, .za-banken-table td { padding: 10px 14px; text-align: left; }
.za-banken-table thead th { background: var(--za-gray-50); font-size: 15px; }
.za-banken-table tbody tr { border-top: 1px solid var(--za-gray-100); }
.za-banken-table tbody tr:hover { background: var(--za-hover); }
.za-banken-table td a { color: var(--za-blue); font-weight: 600; text-decoration: none; }
.za-banken-table td a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    /* Stapeln statt scrollen: vier Spalten waeren auf dem Smartphone unlesbar.
       data-label liefert die Beschriftung, die im Kopf stand. */
    .za-banken-table thead { display: none; }
    .za-banken-table tbody tr { display: block; padding: 10px 0; }
    .za-banken-table tbody td { display: flex; justify-content: space-between; gap: 16px; padding: 3px 0; }
    .za-banken-table tbody td::before { content: attr(data-label); color: var(--za-gray-500); font-size: 14px; }
    .za-banken-table tbody td[data-label="Bank"] { font-size: 17px; }
    .za-banken-table tbody td[data-label="Bank"]::before { display: none; }
}

/* ===== v3.7.2 ===== */
/* Kopf ohne Sidebar: eine Spalte statt 1fr + 300px */
.za-layout--voll { grid-template-columns: 1fr; }

/* Banken A-Z: EINE Flucht ueber alle Buchstabengruppen.
   Jede Gruppe ist eine eigene <table>, und Browser berechnen Spaltenbreiten je
   Tabelle aus deren Inhalt - deshalb sprangen die Spalten von Gruppe zu Gruppe.
   table-layout: fixed nimmt die Breiten aus den Vorgaben statt aus dem Inhalt,
   damit stehen alle Tabellen exakt gleich. */
.za-banken-table { table-layout: fixed; }
.za-banken-table th:nth-child(1), .za-banken-table td:nth-child(1) { width: 30%; }
.za-banken-table th:nth-child(2), .za-banken-table td:nth-child(2) { width: 30%; }
.za-banken-table th:nth-child(3), .za-banken-table td:nth-child(3) { width: 16%; }
.za-banken-table th:nth-child(4), .za-banken-table td:nth-child(4) { width: 24%; }
/* Lange Produktnamen umbrechen lassen statt die Spalte zu sprengen */
.za-banken-table td { overflow-wrap: anywhere; }

@media (max-width: 768px) {
    /* Gestapelt gelten die festen Breiten nicht mehr */
    .za-banken-table { table-layout: auto; }
    .za-banken-table td:nth-child(n) { width: auto; }
}

/* ===== v3.8.6 ===== */
/* Zwei Boxen sind bewusst "edge-to-edge": #tg-konditionen und #tg-vergleich haben
   padding: 0, der Innenabstand steckt in der Ueberschrift. Solange der Marker IM
   h2 stand, erbte er diesen Abstand. Seit v3.8.5 steht er davor und verlor ihn -
   er klebte dadurch an der linken Kartenkante, waehrend er ueberall sonst auf der
   Hoehe des Textes sitzt. Die 28px entsprechen dem padding-left der Ueberschrift
   in genau diesen beiden Boxen. */
#tg-konditionen > .za-marker,
#tg-vergleich > .za-marker,
#tg-rendite > .za-marker { left: 28px; }

/* =====================================================================
   MOBILE-RUNDE 3 (v3.10.0) - die seit Runde 2 hinzugekommenen Bausteine
   Leitgedanke: App- statt Web-Feeling. Konkret heisst das drei Dinge:
   1. Jedes Tippziel mindestens 44px hoch (Apple/Google-Richtwert fuer den
      Daumen) - kleinere Ziele fuehren zu Fehlklicks, nicht nur zu Frust.
   2. Listen und Tabellen werden zu Karten statt zu gequetschten Spalten.
   3. Hover-Effekte auf Touch abschalten, sonst "klebt" der Zustand nach
      dem Antippen fest.
   ===================================================================== */

@media (hover: none) {
    /* Angetippte Karten behielten ihren Hover-Zustand - typisches Web-Artefakt,
       das sich auf dem Smartphone wie ein Darstellungsfehler anfuehlt. */
    .za-wissen-karte:hover,
    .za-banken-kachel:hover,
    .za-emp-karte:hover { transform: none; box-shadow: none; }
    a.za-wissen-karte:hover { background: #fff; border-color: var(--za-gray-100); }
    .za-banken-kachel:hover { transform: none; box-shadow: none; }
    .za-faq-q:hover .za-faq-toggle { background: transparent; }
    /* Stattdessen eine kurze Rueckmeldung beim Antippen - das ist es, was
       sich nach App anfuehlt. */
    .za-wissen-karte:active,
    .za-banken-kachel:active,
    .za-emp-karte:active { transform: scale(0.985); transition: transform .06s; }
}

@media (max-width: 768px) {
    /* ---- Hero ---- */
    /* Drei Segmente nebeneinander wurden auf schmalen Geraeten zu eng; die
       Beschriftung kuerzt sich dort auf die Zahl plus "Mon.". */
    .za-hero-segment .za-zr-modus { padding: 12px 4px; font-size: 15px; }
    .za-hero-check { width: 22px; height: 22px; }
    .za-hero-vorteile li { gap: 10px; }
    /* Buttons ueber die volle Breite: mit dem Daumen deutlich sicherer zu
       treffen als ein Button in Textbreite. */
    .za-hero-cta .za-cta-primary,
    .za-cta-blue { width: 100%; justify-content: center; }
    .za-hero-submit { padding: 14px 20px; }

    /* ---- Empfehlungen ---- */
    .za-emp-karte { padding-top: 34px; }
    .za-emp-badge { font-size: 12px; padding: 4px 10px; }
    .za-emp-zins strong { font-size: 32px; }
    .za-emp-vorteile li { font-size: 16px; margin-bottom: 12px; }
    .za-emp-cta { padding: 14px 20px; }

    /* ---- Haken- und Kreuzlisten (Vorteile/Nachteile, auch Produktseiten) ---- */
    .za-haken li, .za-kreuz li { font-size: 16px; margin-bottom: 12px; line-height: 1.5; }

    /* ---- Intro-Absaetze in allen Boxen ---- */
    .za-sec-intro { font-size: 16px; }

    /* ---- Banken-Logoleiste ---- */
    .za-banken-kachel { min-height: 72px; }
    .za-start-banken--kompakt .za-banken-kachel { min-height: 64px; padding-top: 14px; }
    .za-banken-badge { font-size: 11px; padding: 3px 7px; top: -6px; right: 4px; }

    /* ---- A-Z-Sprungleiste: echte Tippziele statt 34px-Kacheln ---- */
    .za-az-index { gap: 8px; }
    .za-az-index a { min-width: 44px; height: 44px; font-size: 16px; }
    .za-az-titel { font-size: 22px; margin-top: 32px; }

    /* ---- FAQ: groesseres Tippziel, ohne den Kreis optisch aufzublasen ---- */
    .za-faq-q { padding-top: 14px; padding-bottom: 14px; }
    .za-faq-toggle { width: 32px; height: 32px; font-size: 20px; margin-left: 12px; }

    /* ---- Tests-Tabelle: dieselbe Card-Optik wie die Top-5-Tabelle ---- */
    .za-top-banken-table tr:first-child { display: none; }
    .za-top-banken-table tr {
        display: block;
        background: #fff;
        border: var(--za-border);
        border-radius: var(--za-radius);
        box-shadow: var(--za-shadow);
        padding: 16px;
        margin-bottom: 12px;
    }
    .za-top-banken-table tr:last-child { margin-bottom: 0; }
    .za-tb-note { font-size: 16px; }

    /* ---- Banken A-Z: Bankname als Karten-Titel, Rest als Wertepaare ---- */
    .za-banken-table tbody tr {
        background: #fff;
        border: var(--za-border);
        border-radius: var(--za-radius);
        padding: 14px 16px;
        margin-bottom: 10px;
    }
    .za-banken-table tbody td[data-label="Bank"] { font-weight: 600; margin-bottom: 6px; }
    .za-banken-table tbody td[data-label="Bank"] a { font-size: 17px; }

    /* ---- Zinsaenderungen ---- */
    .za-start-news-item { padding: 12px 0; }
    .za-start-news-more .za-cta-secondary { width: 100%; justify-content: center; }

    /* ---- Trust-Kacheln ---- */
    .za-trust-kachel { padding: 14px 12px; }
    .za-start-trust--dunkel .za-trust-wert { font-size: 24px; }

    /* ---- Schritte ----
       ACHTUNG, hier lag ein Fehler in v3.10.0: `display: grid` auf dem <li>
       macht JEDES Kind zu einem eigenen Rasterfeld. Die Nummer (::before) landete
       in Spalte 1, der <strong>-Titel in Spalte 2 - und der nackte Textknoten
       dahinter in der naechsten Zeile, Spalte 1, also in 40px Breite. Ergebnis:
       der Text brach buchstabenweise um. Deshalb bleibt es beim Blockfluss mit
       der Nummer ueber dem Text, wie am Desktop. */
    .za-schritte li { display: block; padding: 16px; }
    .za-schritte li::before { width: 36px; height: 36px; font-size: 17px; margin-bottom: 10px; }

    /* ---- Ueberschriften und Tab-Label ---- */
    .za-sec-title { font-size: 22px; }
    .za-marker { font-size: 14px; padding: 5px 12px; }
}

@media (max-width: 480px) {
    /* Auf sehr schmalen Geraeten haben drei volle Segmente keinen Platz mehr. */
    .za-hero-segment .za-zr-modus { font-size: 14px; padding: 12px 2px; }
    .za-emp-logo { width: 160px; }
    /* Vier Kennzahlen untereinander lesen sich besser als 2x2 gequetscht. */
    .za-trust-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
    .za-banken-grid,
    .za-start-banken--kompakt .za-banken-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Mobile-Nachbesserung (v3.10.1) ===== */
@media (max-width: 768px) {
    /* Zinswecker: Eingabefeld und Button untereinander. Nebeneinander blieb vom
       Feld neben dem Button nur ein Stummel uebrig, in den keine Adresse passt. */
    .za-wecker-form { flex-direction: column; gap: 10px; }
    .za-wecker-form input[type="email"] { width: 100%; height: 50px; }
    .za-wecker-form .za-cta-primary { width: 100%; justify-content: center; }

    /* Zwischenueberschriften im Fliesstext: die Theme-Groesse war auf schmalen
       Geraeten zu gross und wurde am Rand abgeschnitten. */
    .za-box-inhalt h3,
    .za-ratgeber-content h3 { font-size: 19px; line-height: 1.35; margin: 24px 0 10px; }
    .za-box-inhalt h2,
    .za-box-inhalt h3 { overflow-wrap: anywhere; }

    /* Gestapelte Tabellen bekommen etwas mehr Luft zwischen den Wertepaaren */
    .za-kond-table--wide td[data-label] { padding: 10px 0; }
    .za-kond-table--wide th { font-size: 16px; padding-bottom: 4px; }
}

/* =====================================================================
   HAUPTMENUE: einheitliche Optik fuer alle Links
   Bewusst NICHT mehr zweispaltig: das Raster wurde von GenerateBlocks im
   geoeffneten Zustand ueberschrieben. Statt mit steigender Spezifitaet
   dagegenzuhalten (was beim naechsten GB-Update erneut bricht), bleibt es
   einspaltig und dafuer schmal - zehn Eintraege sind so gut lesbar.
   ===================================================================== */

/* --- Farben: Haupt- und Unterpunkte gleich, Blau erst beim Ueberfahren --- */
.gb-menu .gb-menu-link,
.gb-menu .sub-menu a {
    color: var(--za-gray-900);
    transition: background-color .15s, color .15s;
}
.gb-menu .gb-menu-link:hover,
.gb-menu .gb-menu-link:focus-visible,
.gb-menu .sub-menu a:hover,
.gb-menu .sub-menu a:focus-visible {
    color: var(--za-blue);
    background-color: var(--za-blue-light);
}
/* Hauptpunkte: Hervorhebung als Pille, wie die Segment-Buttons im Hero.
   Rechteckig wirkte hart und passte zu keinem anderen Element der Seite. */
.gb-menu > li > .gb-menu-link { border-radius: 999px; }
/* Die aktuelle Seite wird BEWUSST NICHT dauerhaft hervorgehoben: ein blau
   gefaerbter, fetter Menuepunkt zieht permanent Aufmerksamkeit auf die Seite,
   auf der man ohnehin schon ist. Blau bleibt der Hover- und Fokuszustand. */

/* --- Untermenues allgemein (Banken und Ratgeber) --- */
.gb-menu .gb-sub-menu,
.gb-menu .sub-menu { width: 300px; min-width: 0; }
.gb-menu .gb-sub-menu .gb-menu-link,
.gb-menu .sub-menu a {
    padding: 8px 16px;          /* flachere Zeilen als die 10-18px zuvor */
    font-size: 15px;
    line-height: 1.35;
}
/* Die Hervorhebung soll die Kanten der Box gar nicht erst beruehren: statt die
   Ecken der ersten und letzten Zeile einzeln zu runden (was an der Ueberschrift
   und am Abschluss-Link ohnehin falsch sass), bekommt das Untermenue seitlichen
   Innenabstand und jede Zeile eine gleichmaessige, dezente Rundung. */
.gb-menu .gb-sub-menu,
.gb-menu .sub-menu { padding-left: 6px; padding-right: 6px; }
.gb-menu .gb-sub-menu .gb-menu-link,
.gb-menu .sub-menu a { border-radius: 8px; }

/* --- Banken-Untermenue --- */
/* Ueberschrift ueber der Liste: als ::before, damit dafuer kein zusaetzlicher
   Menuepunkt noetig ist, der sonst ein (leerer) Link waere. */
.za-menu-banken-aktiv .gb-sub-menu::before,
.za-menu-banken-aktiv .sub-menu::before {
    content: "Top 10 nach Einstiegszins";
    display: block;
    padding: 10px 10px 8px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--za-gray-500);
    border-bottom: 1px solid var(--za-gray-100);
    margin-bottom: 4px;
}
/* Bankname links, Zins rechts - bei 300px Breite stehen sie nah beieinander */
.za-menu-banken-aktiv .gb-sub-menu .gb-menu-link,
.za-menu-banken-aktiv .sub-menu a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    column-gap: 12px;
}
.za-menu-zins {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;   /* gleiche Ziffernbreite: die Werte fluchten */
    font-weight: 600;
    color: var(--za-blue);
    font-size: 14px;
}
/* Abschluss-Link mit Trennlinie */
/* Gilt fuer JEDEN Abschluss-Link, nicht nur fuer den im Banken-Menue: die
   Klasse wird von beiden Quellen gesetzt (Banken-Automatik und der generische
   za-menu-abschluss). Die Regel war zuvor auf das Banken-Menue eingeschraenkt,
   der Ratgeber-Link waere dadurch ohne Linie und ohne Fettung geblieben. */
.gb-menu .za-menu-alle {
    border-top: 1px solid var(--za-gray-100);
    margin-top: 4px;
    padding-top: 2px;
}
.gb-menu .za-menu-alle > a,
.gb-menu .za-menu-alle > .gb-menu-link { font-weight: 600; }

@media (max-width: 992px) {
    /* Im Overlay ueber die volle Breite, groessere Tippziele */
    .gb-menu .gb-sub-menu,
    .gb-menu .sub-menu { width: 100%; }
    .gb-menu .gb-sub-menu .gb-menu-link,
    .gb-menu .sub-menu a { padding: 12px 32px; font-size: 16px; }
    .za-menu-banken-aktiv .gb-sub-menu::before,
    .za-menu-banken-aktiv .sub-menu::before { padding-left: 26px; padding-right: 26px; }
    /* Auf Touch keinen Hover-Hintergrund stehen lassen */
    .gb-menu .gb-menu-link:hover,
    .gb-menu .sub-menu a:hover { background-color: transparent; }
}

/* ===== Stapelreihenfolge: Header ueber allem (v3.11.5) =====
   Die klebende Sub-Navigation der Bankseiten (.za-nav) liegt auf z-index 100 -
   genauso hoch wie das Menue-Dropdown. Bei Gleichstand gewinnt das Element, das
   spaeter im Dokument steht: die Sub-Navi schob sich dadurch DURCH das
   aufgeklappte Menue und verdeckte den ersten Eintrag.

   Damit so etwas nicht bei jedem neuen klebenden Element erneut passiert, hier
   die verbindliche Reihenfolge von unten nach oben:
     5   Tooltips innerhalb von Tabellen
     50  mobile Ergebnisleiste des Rechners
     100 klebende Sub-Navigation und Tabellenkoepfe der Seite
     900 Seitenkopf mit Hauptmenue
     910 aufgeklapptes Dropdown

   position: relative ist noetig, weil z-index auf statisch positionierten
   Elementen wirkungslos bleibt. */
.gb-site-header,
.site-header { position: relative; z-index: 900; }
.gb-menu .gb-sub-menu,
.gb-menu .sub-menu { z-index: 910; }

/* ===== v3.12.0: Uebernahme der manuellen Anpassungen aus dem Live-Betrieb ===== */

/* Die Icon-Position folgt dem Innenabstand der Listeneintraege. Auf den
   Bankseiten haben sie 8px oben, deshalb hier der abweichende Wert. */
.za-procon-col .za-haken li,
.za-procon-col .za-kreuz li { --za-icon-oben: 8px; }

/* Rueckfalloption fuer Browser ohne die lh-Einheit (vor 2023): dort greift der
   bisherige Festwert. Die Abweichung betraegt wenige Pixel und faellt nur auf,
   wenn man beide Varianten nebeneinander sieht. */
@supports not (height: 1lh) {
    .za-haken li::before,
    .za-kreuz li::before { top: calc(var(--za-icon-oben) + 4px); }
}

/* Hero: heller Blauton statt des Seitenhintergrunds */
.za-start-hero { background-color: var(--za-blue-light); }

/* Autorenbild in der Empfehlungsbox groesser */
.za-emp-autor-bild { width: 90px; height: 90px; }

/* Empfehlungskarten leicht abgesetzt vom weissen Boxhintergrund */
.za-emp-karte { background: var(--za-gray-50); }

/* Konditionstabelle: Staffel-Beschriftungen auf Fliesstextgroesse.
   BEWUSST nur ab Tabletbreite: in Mobile-Runde 2 wurden beide auf 16px gesetzt,
   damit sie sich auf dem Smartphone in die uebrigen Zellen einfuegen. Eine
   unbeschraenkte 18px-Regel wuerde das ueberschreiben, weil sie spaeter im
   Stylesheet steht - Media Queries erhoehen die Spezifitaet nicht. */
@media (min-width: 769px) {
    .za-kond-group-label,
    .za-kond-tier { font-size: 18px; }
}

/* ===== v3.13.0 ===== */

/* 1) Empfehlungskarten: kein Hover mehr auf der Karte - nur der CTA ist klickbar.
   Ein Hover-Effekt auf einer Flaeche, die gar nicht klickbar ist, verspricht
   etwas, das nicht eingeloest wird. */
.za-emp-karte:hover { border-color: var(--za-gray-100); box-shadow: none; transform: none; }
.za-emp-karte--top:hover { border-color: var(--za-blue); box-shadow: 0 0 0 2px var(--za-blue-light), var(--za-shadow); }
/* Begruendungstext statt Haken-Liste */
.za-emp-text { font-size: 16px; line-height: 1.55; color: var(--za-gray-700); flex: 1; }
.za-emp-text p { margin: 0 0 10px; }
.za-emp-text p:last-child { margin-bottom: 0; }

/* 3) Nummern und Icons ragen zur Haelfte aus der Box heraus.
   Die Box bekommt oben Platz fuer die herausragende Haelfte, das Element wird
   absolut positioniert. `overflow: visible` ist noetig, sonst beschneidet die
   Box es. Die Rasterabstaende wachsen mit, damit die Nummern nicht in die
   darueberliegende Zeile ragen. */
.za-schritte { margin-top: 24px; row-gap: 40px; }
.za-schritte li { position: relative; overflow: visible; padding-top: 32px; }
.za-schritte li::before {
    position: absolute;
    top: -22px;
    left: 18px;
    margin-bottom: 0;
    box-shadow: 0 0 0 4px #fff;   /* heller Ring trennt die Nummer von der Boxkante */
}
.za-wissen-grid { margin-top: 24px; row-gap: 40px; }
.za-wissen-karte { position: relative; overflow: visible; padding-top: 32px; }
.za-wissen-icon {
    position: absolute;
    top: -18px;
    left: 18px;
    margin-bottom: 0;
    background: var(--za-blue-light);
    box-shadow: 0 0 0 4px #fff;
}

@media (max-width: 768px) {
    /* Gestapelt braucht es weniger Abstand zwischen den Karten */
    .za-schritte, .za-wissen-grid { row-gap: 34px; }
    .za-schritte li, .za-wissen-karte { padding-top: 28px; }
}

/* =====================================================================
   CTA der Sub-Navigation - EINZIGE Definition (v3.14.3)
   Zuvor war .za-nav-cta an NEUN Stellen im Stylesheet gesetzt: Farbe, Polster,
   Hoehe und Reihenfolge widersprachen sich, und welche Regel gewann, hing
   allein von der Position in der Datei ab. Genau daher kamen der orange
   Button und der falsche Hover-Zustand. Alles steht jetzt hier.
   ===================================================================== */
.za-nav-cta {
    /* inline-block statt inline-flex: bei einem Flex-Container erbt der Textknoten
       keine text-decoration, ein Unterstrich im Hover wuerde also gar nicht
       erscheinen. Als inline-block verhaelt sich der CTA wie ein normaler Link. */
    display: inline-block;
    align-self: center;
    box-sizing: border-box;
    flex-shrink: 0;
    /* Bleibt am rechten Rand stehen, waehrend die Sprungmarken daneben
       waagerecht scrollen - er liegt ausserhalb des Scrollbereichs. */
    margin-left: auto;
    white-space: nowrap;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    background: transparent;
    border: 0;
    /* Trennstrich statt Rahmen: eine kurze senkrechte Linie grenzt den CTA von
       den Sprungmarken ab, ohne ihn als Kasten zu umranden. Oben und unten
       bleibt Luft, damit es wie ein schlichtes | wirkt und nicht wie eine
       durchgezogene Spaltentrennung. */
    position: relative;
    padding: 8px 16px 8px 20px;
    margin-left: 4px;
    /* KEINE Rundung: der Hover-Unterstrich folgte ihr und erzeugte eine
       Klammer-Optik statt einer geraden Linie. */
    border-radius: 0;
    text-decoration: none;
    transition: color .15s;
}
.za-nav-cta::before {
    content: "";
    position: absolute;
    left: 0;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: rgba(255, 255, 255, 0.35);
}
/* Der Trennstrich bleibt im Hover stehen: er grenzt den CTA dauerhaft von den
   Sprungmarken ab. Frueher verschwand er, weil der Hover eine weisse Pille war -
   seit der Hover nur noch unterstreicht, waere sein Verschwinden ein Bruch. */
/* Als inline-block richtet sich das Icon ueber vertical-align aus, nicht ueber flex. */
.za-nav-cta svg { margin-left: 5px; vertical-align: -2px; }
/* Hover: nur ein dezenter weisser Unterstrich, Schrift bleibt weiss.
   Dieselbe Sprache wie die aktive Sprungmarke auf dem Smartphone - eine weisse
   Pille haette den Button im Hover zu einem anderen Element gemacht. */
/* Hover wie bei jedem normalen Link: unterstrichen, sonst nichts. */
.za-nav-cta:hover,
.za-nav-cta:focus-visible {
    background: transparent;
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 2px;
}
/* Auf Touch keinen Hover-Zustand stehen lassen */
@media (hover: none) {
    .za-nav-cta:hover { background: transparent; color: #fff; text-decoration: none; }
}
/* Absicherung: sollte der CTA je wieder im Scrollbereich landen, wuerde
   `.za-nav-links a` (Klasse + Element) seine Rundung uebersteuern. Diese Regel
   hat dieselbe Spezifitaet und steht spaeter, gewinnt also. */
.za-nav-links a.za-nav-cta { border-radius: 0; }

/* Kurzform auf schmalen Geraeten: "Weiter zur Bank" wird zu "Zur Bank" */
.za-nav-cta-lang { display: inline; }
@media (max-width: 782px) {
    .za-nav-cta { font-size: 14px; padding: 6px 12px 6px 14px; }
    .za-nav-cta-lang { display: none; }
}
@media (max-width: 480px) {
    .za-nav-cta { font-size: 13px; padding: 6px 10px 6px 12px; }
}

/* =====================================================================
   SUB-NAVIGATION MOBIL - EINZIGE Definition (v3.14.4)
   Zuvor lagen die Mobilregeln an VIER Stellen im Stylesheet verteilt und
   ueberschrieben sich gegenseitig; unter anderem stammten der weisse Kasten,
   die eckigen Ecken und die weich ausgeblendeten Raender (mask-image) aus
   Altbloecken, nicht aus den zuletzt geschriebenen Regeln.
   ===================================================================== */
@media (max-width: 782px) {
    /* Flachere Leiste: die Hoehe kam vorher aus doppelten Polstern an Leiste,
       Scrollbereich und Links. Jetzt traegt nur der Scrollbereich das Polster. */
    .za-nav { margin-bottom: 16px; }
    .za-nav-inner { padding: 0 12px; gap: 6px; }
    .za-nav-links { padding: 5px 0; gap: 2px; }

    .za-nav-links a {
        padding: 6px 10px;
        font-size: 14px;
        border-radius: 0;
        background: transparent;
    }
    /* Aktiver Punkt als Unterstrich statt Kasten: bei kurzen Woertern ("Test",
       "FAQ") wurde die Pille fast kreisrund. Der Unterstrich sitzt unter dem
       Wort, ist damit immer gleich hoch und folgt der Wortbreite.
       box-shadow statt border-bottom, damit die Zeilenhoehe unveraendert bleibt. */
    .za-nav-links a.active {
        background: transparent;
        color: #fff;
        font-weight: 600;
        box-shadow: inset 0 -2px 0 0 #fff;
    }
    .za-nav-links a:hover { background: transparent; }

    /* KEINE Maske am Scrollbereich: die weich ausgeblendeten Raender liessen
       den ersten und letzten Eintrag unscharf wirken. */
    .za-nav-links { mask-image: none; -webkit-mask-image: none; padding-right: 0; }

    /* Der CTA behaelt seine Pillenform und bleibt sichtbar: er liegt ausserhalb
       des Scrollbereichs, deshalb wandert er beim Wischen nicht mit. */
    .za-nav-cta {
        border-radius: 0;
        font-size: 13px;
        font-weight: 600;
        padding: 6px 12px 6px 14px;
        border: 0;
        margin-left: 4px;
    }
}
@media (max-width: 480px) {
    .za-nav-inner { padding: 0 10px; gap: 4px; }
    .za-nav-links a { padding: 6px 8px; font-size: 13px; }
    .za-nav-cta { padding: 6px 10px 6px 12px; font-size: 13px; margin-left: 2px; }
}

/* Text auf der Flucht, Polster bleibt erhalten.
   Erster Versuch war, dem ersten Eintrag das linke Polster zu nehmen - dann
   sass der Text zwar richtig, aber die Hover-Flaeche klebte am Buchstaben.
   Stattdessen behaelt jeder Eintrag sein Polster, und die ganze Leiste wird um
   genau diese Polsterbreite nach links gezogen. Ergebnis: der Text beginnt auf
   der Linie von Logo und Inhaltsbox, die Hover-Flaeche hat weiterhin Luft. */
@media (min-width: 783px) {
    .za-nav-links { margin-left: -16px; }
}

/* =====================================================================
   MOBILE-RUNDE 4 (v3.17.0)
   Gemeldete Punkte aus zwei Durchgaengen, zusammengefasst statt einzeln
   geflickt. Leitgedanke: EINE Groesse je Element-Art, halbierte Abstaende,
   keine Eingabefelder unter 48px Hoehe.
   ===================================================================== */
@media (max-width: 768px) {

    /* ---- Abstaende zwischen den Boxen halbiert ----
       80px (bzw. 40px ohne Tab-Label) sind am Desktop richtig, auf dem
       Smartphone kostet das eine halbe Bildschirmhoehe pro Uebergang. */
    /* Einheitlicher OPTISCHER Abstand von 20px zwischen allen Boxen.
       Boxen mit Tab-Label brauchen mehr Rand, weil das Label aus der Box
       herausragt (position: absolute, translateY(-100%)) und sonst an die
       vorherige Box stoesst: 20px Abstand + Labelhoehe.
       v3.18.0: Die Labelhoehe stand hier als "25px" im Kommentar - gemessen
       waren es 30,6px (14px Schrift x 1.4 + 2x5px Polster + 1px Rand), der
       sichtbare Abstand ueber Tab-Boxen also 14,4px statt 20px. Deshalb ist
       die Hoehe jetzt FEST (line-height 20px statt 1.4 => 20 + 10 + 1 = 31px)
       und der Rand wird daraus BERECHNET, statt einen zweiten, unabhaengig
       gepflegten Zahlenwert zu haben, der wieder auseinanderlaufen kann. */
    :root { --za-tab-h: 31px; }
    .za-marker,
    .za-sec .za-sec-title .za-marker,
    .za .za-sec h2 .za-marker { font-size: 14px; line-height: 20px; padding: 5px 12px; }
    .za-sec { margin-top: calc(20px + var(--za-tab-h)); margin-bottom: 12px; padding: 18px 16px; }
    .za-sec:not(:has(.za-marker)) { margin-top: 20px; }
    .za-sec-tight { margin-top: 20px; }
    /* Boxen in einer [za_zeile] (gestapelt = Block, siehe Kommentar bei
       @media 900px): dieselben Werte, mit der Spezifitaet der Desktop-Regel. */
    .za-zeile > .za.za-sec { margin-top: calc(20px + var(--za-tab-h)); }
    .za-zeile > .za.za-sec:not(:has(.za-marker)) { margin-top: 20px; }
    .za-sec-title { margin-bottom: 12px; }

    /* ---- Eingabefelder: nie unter 48px ----
       Gilt fuer Zinswecker, Kontaktformular, Rechner und Vergleich
       gleichermassen - die 16px verhindern zusaetzlich den iOS-Zoom. */
    .za-wecker-form input[type="email"],
    .za-zr input[type="text"], .za-zr input[type="number"], .za-zr select,
    .za-vgl-in, .za-kontakt-feld input, .za-kontakt-feld textarea,
    .za-hero-form input, .za-hero-form select {
        min-height: 48px;
        font-size: 16px;
    }

    /* ---- Rechner: erste Zeile einspaltig ----
       Anlagebetrag und Zinssatz nebeneinander liessen je ~45% Breite - der
       Betrag wurde auf "10." abgeschnitten. Betrifft alle vier Tabs, weil
       jeder mit dieser Zeile beginnt. */
    .za-zr-zeile2 { grid-template-columns: 1fr; }

    /* ---- Segment-Buttons: kleiner, mit erkennbarem Ruhezustand ----
       Inaktive Optionen waren grau auf hellgrau und kaum zu sehen. */
    .za-zr-modi, .za-hero-segment { padding: 3px; gap: 2px; }
    /* v3.17.3: reine Textfarbe genuegte nicht - inaktive Segmente hatten
       weder Flaeche noch Kontur und wirkten wie freistehender Text statt wie
       ein antippbares Element ("nackt", so die Rueckmeldung). Jetzt ein
       dezenter weisser Rand: sichtbar genug, um als eigenes Feld erkennbar zu
       sein, aber klar schwaecher als die aktive Flaeche mit Schatten. */
    .za-zr-modus, .za-hero-segment .za-zr-modus {
        padding: 9px 6px;
        font-size: 14px;
        color: var(--za-gray-700);
        background: #fff;
        border: 1px solid var(--za-gray-100);
    }
    .za-zr-modus:has(input:checked),
    .za-hero-segment .za-zr-modus:has(input:checked) {
        background: #fff;
        color: var(--za-blue);
        border-color: var(--za-blue);
        box-shadow: var(--za-shadow);
    }

    /* ---- Buttons: EINE Groesse ueberall ----
       Zuvor reichten die Werte von 6px/18px bis 16px/20px - je nach Baustein.
       Volle Breite, weil ein Button in Textbreite mit dem Daumen schwerer zu
       treffen ist. */
    .za-cta-primary, .za-cta-secondary, .za-emp-cta, .za-hero-submit,
    .za-wecker-form .za-cta-primary, .za-start-news-more .za-cta-secondary {
        padding: 13px 20px;
        font-size: 16px;
        min-height: 48px;
        width: 100%;
        justify-content: center;
        margin-right: 0;
        margin-top: 16px;
    }
    /* In Fliesstext eingebettete Buttons bleiben schmal */
    .za-vgl-more, .za-vgl-det-link, .za-nav-cta { width: auto; min-height: 0; margin-top: 0; }
    /* v3.22.0: der Wecker-Button gehoert zu seinem Eingabefeld - die 16px
       margin-top von oben addierten sich zum 10px-Gap des Formulars (26px
       gemessen), das Feld wirkte vom Button getrennt. */
    .za-wecker-form .za-cta-primary { margin-top: 0; }

    /* ---- Gestapelte Tabellen: weniger Leerraum ----
       Label ueber Wert ist richtig, kostete aber zwei Zeilen je Wert. Mit
       engerem Zeilenabstand und kleinerem Label bleibt die Lesbarkeit, die
       Seite wird aber deutlich kuerzer. */
    /* Label NEBEN den Wert statt darueber: das halbiert die Hoehe jeder Zeile.
       Warum als inline-block und nicht per Flex oder Grid? Die Zellen enthalten
       mehrere Inline-Kinder (<strong>88/100</strong><span>Sehr gut</span>) -
       Flex und Grid wuerden daraus eigene Items machen und die Zelle
       auseinanderreissen. Ein inline-block-Label mit fester Mindestbreite laesst
       den Wert einfach dahinter weiterlaufen und funktioniert mit jedem Inhalt.
       Mehrzeilige Werte rutschen sauber unter das Label statt auszufransen. */
    .za-kond-table--wide td[data-label] { padding: 5px 0; line-height: 1.35; }
    .za-kond-table--wide td[data-label]::before {
        display: inline-block;
        /* v3.17.3: 108px reichte fuer "Produkt & Zugang" nicht - der Wert
           stand fast ohne Luft daneben ("klebt"). 140px passen die laengste
           Beschriftung bequem, kuerzere Labels (Zinsertrag, Sicherheit)
           bekommen dieselbe Breite, wodurch die Werte aller Zeilen zusaetzlich
           sauber untereinander fluchten. */
        min-width: 140px;
        margin-bottom: 0;
        font-size: 13px;
        vertical-align: top;
    }
    .za-kond-table--wide td[data-label] .za-tb-note { margin-left: 140px; }
    .za-kond-table--wide th { padding-bottom: 2px; }
    /* v3.17.4: .za-kond-table tr:nth-child(odd) { background: var(--za-gray-50) }
       hat durch die Pseudoklasse mehr Spezifitaet als die einfache Kartenfarbe
       .za-top-banken-table/.za-top5-table tr { background:#fff } weiter oben
       und schlug durch - jede zweite Karte war grau statt weiss getont. Beide
       Tabellen tragen dieselbe Basisklasse za-kond-table, betroffen also
       beide. Hier explizit mit derselben Spezifitaet neutralisiert. */
    .za-top-banken-table tr:nth-child(odd),
    .za-top-banken-table tr:nth-child(even),
    .za-top5-table tr:nth-child(odd),
    .za-top5-table tr:nth-child(even) { background: #fff; }
    .za-top-banken-table tr, .za-top5-table tr { padding: 12px; margin-bottom: 8px; }
    .za-banken-table tbody tr { padding: 10px 12px; margin-bottom: 6px; }
    .za-banken-table tbody td { padding: 2px 0; }

    /* ---- Ranking-Badge der Test-Tabelle: derselbe Kreis wie bei
       "In 4 Schritten" (v3.13.0) - herausragend, mit weissem Ring, damit die
       lange Bankbezeichnung ("Hamburg Direct Bank Tagesgeld") nicht mehr neben
       einer Praefix-Zahl um den Platz konkurriert und in eine Zeile passt. */
    /* v3.18.0 - Rueckmeldung 18.09. (Screenshot), im Browser nachgemessen:
       - Karten hatten 8px Abstand, der Badge ragt aber 14px + 4px Ring ueber
         die Kartenkante -> er ueberdeckte die Karte darueber um 9px.
       - Badge-Unterkante bis Bankname waren 24px (34px Karten-Polster + 4px
         th-Polster) - viel zu weit.
       Werte jetzt wie beim Schritte-/Wissen-Muster (v3.13.0): 8px Luft ueber
       dem Ring (14 + 4 + 8 = 26px Kartenabstand) und 10px zwischen Kreis und
       Text (Kreis endet bei +14px, Text beginnt bei 24px). */
    .za-top-banken-table tr { position: relative; overflow: visible; padding-top: 24px; margin-bottom: 26px; }
    .za-top-banken-table { margin-top: 28px; } /* erste Karte: Badge ragt 18px ueber, Einleitung endet 24px davor (Margin-Collapse) - 28px = 10px Luft */
    .za-tb-rank {
        position: absolute;
        top: -14px;
        left: 16px;
        width: 28px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        /* v3.17.4: gleicher Stil wie die Wissen-Icons (za-wissen-icon) -
           heller Blauton statt kraeftigem Blau, Text in Markenblau statt Weiss. */
        background: var(--za-blue-light);
        color: var(--za-blue);
        font-size: 14px;
        line-height: 1;
        /* Steht bewusst NACH der Basisregel oben (font-weight: inherit) - sonst
           gewinnt bei gleicher Spezifitaet die spaetere Regel im Stylesheet,
           unabhaengig davon, ob sie in einer Media Query steht. Das war der
           Grund, warum die Ziffer nicht sauber zentriert wirkte: sie erbte
           die duennere Schrift von <th>, die Glyphenbox sass dadurch nicht
           mittig im Kreis. */
        font-weight: 700;
        box-shadow: 0 0 0 4px #fff;
    }
    .za-tb-rank::after { content: none; }
    /* text-transform: die Regel .za-kond-table th (@media 480px, Konditions-
       tabelle der Bankseiten) setzt Grossbuchstaben - fuer den Bankname der
       Test-Karten falsch (zu laut, braucht zu viel Platz). Nur hier aus. */
    .za-top-banken-table th { display: block; padding-top: 0; text-transform: none; letter-spacing: 0; }
    /* Punktzahl und Note in EINER Zeile ("95/100 - Sehr gut"). Die Regel
       .za-kond-table--wide td[data-label] .za-tb-note { margin-left: 140px }
       (weiter oben, 4 Klassen/Attribute) rueckte die Note als Block unter den
       Wert ein - mit derselben Spezifitaet neutralisiert. */
    .za-kond-table--wide td[data-label] .za-tb-note { display: inline; margin: 0; }
    .za-top-banken-table .za-tb-note::before { content: "\2013"; margin: 0 5px; } /* Gedankenstrich mit festem Abstand statt Leerzeichen im content (das hintere fiel weg) */

    /* ---- A-Z-Sprungleiste kompakter ---- */
    .za-az-index { gap: 6px; }
    .za-az-titel { margin-top: 24px; margin-bottom: 8px; }

    /* ---- Autorenbild umfliessen lassen ----
       Bild und Text standen als Block untereinander bzw. nebeneinander mit
       fester Spalte; float laesst den Text darum herumlaufen und spart Hoehe. */
    .za-emp-intro { display: block; }
    .za-emp-autor-bild {
        width: 72px; height: 72px;
        float: left;
        margin: 0 14px 8px 0;
    }
    .za-emp-intro::after { content: ""; display: table; clear: both; }
}

@media (max-width: 480px) {
    .za-sec { padding: 16px 14px; }
    .za-zr-modus { font-size: 13px; padding: 9px 4px; }
    .za-emp-autor-bild { width: 60px; height: 60px; margin-right: 12px; }
}

/* ===== Ranking-Badge der Test-Tabelle (v3.17.3) =====
   Desktop: Platzierung bleibt Fliesstext "1. Bankname" - das ::after haengt
   den Punkt an, den das PHP nicht mehr mitliefert.
   Mobil (@media unten): derselbe herausragende Kreis wie bei "In 4 Schritten"
   und den Wissenskarten (v3.13.0) - dasselbe Muster, konsistent uebertragen. */
/* margin-right statt Leerzeichen im PHP: das war zuvor Teil des Textes
   ("1. ") und fehlte, seit die Zahl in einem eigenen span steckt. */