,
sondern nur im Wrapper- steht. */
.u18-nav-item:hover > a,
.u18-nav-item:focus-within > a,
.u18-nav-item > a:hover,
.u18-nav-item > a:focus-visible {
color: var(--green-700) !important;
font-weight: 600 !important;
border-bottom: 2px solid var(--green-700) !important;
}
/* Hover-Hintergrund für die Bank-Einträge im Mega-Dropdown */
.u18-mega-bank:hover,
.u18-mega-item:hover {
background: var(--cream-100);
}
/* Headers den korrekten Container-Context für das Mega-Panel geben */
.u18-header {
position: relative;
}
/* ─── Mobile-Drawer ───────────────────────────────────── */
.u18-mobile-drawer {
position: fixed;
inset: 0;
background: var(--green-900);
color: #fff;
z-index: 1000;
padding: 28px clamp(20px, 5vw, 40px);
flex-direction: column;
gap: 24px;
}
html.u18-drawer-open .u18-mobile-drawer {
display: flex !important;
animation: u18DrawerIn 0.25s ease-out;
}
html.u18-drawer-open {
overflow: hidden;
}
/* ─── Footer-Grid: beim Mobile-Stack auf 2 Spalten ─── */
@media (max-width: 960px) {
.u18-footer-grid {
grid-template-columns: 1fr 1fr !important;
}
}
@media (max-width: 560px) {
.u18-footer-grid {
grid-template-columns: 1fr !important;
}
}
/* ─── Admin-Bar-Abstand ───────────────────────────────── */
.admin-bar .u18-mobile-drawer {
top: 32px;
}
@media (max-width: 782px) {
.admin-bar .u18-mobile-drawer {
top: 46px;
}
}
/* ─── Links im Body zurücksetzen ─────────────────────── */
/* Wichtig: :not(.u18-btn*) — sonst überschreibt Link-Farbe
die weiße Schrift auf den grünen Buttons. */
.u18-root a:not([class*="u18-btn"]) {
color: var(--green-700);
}
.u18-root h1 a,
.u18-root h2 a,
.u18-root h3 a {
color: inherit;
text-decoration: none;
}
/* ─── Bank-Logo: Logo füllt die Box, grauer Rahmen außen ─
Äußerer grauer Rahmen bleibt (dezenter Container), innen
füllt das Logo die Box edge-to-edge — kein Padding/weißer
Hintergrund mehr, weil die SVG-Logos ihren eigenen
farbigen Hintergrund mitbringen. Mono-Fallback behält die
weiße Kasten-Füllung. */
/* Gilt für ALLE Größen — sonst wird die Regel von
.u18-bank-logo.sm/lg/xl (höhere Spezifität, setzt eigenes padding)
überschrieben. */
.u18-bank-logo,
.u18-bank-logo.xs,
.u18-bank-logo.sm,
.u18-bank-logo.md,
.u18-bank-logo.lg,
.u18-bank-logo.xl {
padding: 0;
background: transparent;
border: 1px solid var(--ink-100);
overflow: hidden;
}
.u18-bank-logo img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Fallback: Monogramm-Text braucht weißen Hintergrund + Padding */
.u18-bank-logo:has(.u18-bank-logo__mono),
.u18-bank-logo.xs:has(.u18-bank-logo__mono),
.u18-bank-logo.sm:has(.u18-bank-logo__mono),
.u18-bank-logo.md:has(.u18-bank-logo__mono),
.u18-bank-logo.lg:has(.u18-bank-logo__mono),
.u18-bank-logo.xl:has(.u18-bank-logo__mono) {
background: #fff;
}
.u18-bank-logo:has(.u18-bank-logo__mono) { padding: 4px 10px; }
.u18-bank-logo.xs:has(.u18-bank-logo__mono) { padding: 2px 6px; }
.u18-bank-logo.sm:has(.u18-bank-logo__mono) { padding: 3px 8px; }
.u18-bank-logo.md:has(.u18-bank-logo__mono) { padding: 4px 10px; }
.u18-bank-logo.lg:has(.u18-bank-logo__mono) { padding: 5px 12px; }
.u18-bank-logo.xl:has(.u18-bank-logo__mono) { padding: 6px 14px; }
/* Auf dunklem Hintergrund kein grauer Rahmen um die Logo-Boxen —
der hebt sich auf dem Dunkelgrün hässlich hervor, vor allem bei
hellen Logos (DKB, Commerzbank). Gilt sowohl im Final-CTA als
auch in anderen dunklen Panels (z.B. Kontofinder-Vorschau). */
.u18-final-cta .u18-bank-logo,
.u18-dark-panel .u18-bank-logo {
border: 0;
}
/* ─── Single-Konto Hero: linke Spalte vertikal zentriert (Desktop) ─
Auf Desktop hat die rechte Aside-Card (Konditionen) meist mehr
Inhalt als die linke Text-Spalte. Damit die linke Spalte nicht
oben klebt, wird sie vertikal zur Mitte der Row ausgerichtet.
Mobile (≤899px) bleibt unberührt — dort ist der Grid ein Stack. */
@media (min-width: 900px) {
.u18-konto-hero > div:first-child {
align-self: center;
}
}
/* ─── Sticky-Header mit Hide-on-Scroll ──────────────────── */
.u18-site-top {
position: sticky;
top: 0;
z-index: 900;
transition: transform 0.3s ease;
background: #fff;
will-change: transform;
}
.u18-site-top.u18-header-hidden {
transform: translateY(-100%);
}
/* Wenn Admin-Bar aktiv ist, Offset anpassen */
.admin-bar .u18-site-top { top: 32px; }
@media (max-width: 782px) {
.admin-bar .u18-site-top { top: 46px; }
}
/* ─── Rank-Row — Responsive Grid-Areas (Rev F) ─────────────────────
Desktop ≥1200px: 8-Spalten (Rank | Logo | Name | Score | KF1 | KF2 | Details | Eröffnen)
Tablet 900–1199: ohne Score-Bar
Mobile ≤899: 4-Zeilen-Stack ("rank name / logo / kf1 kf2 / btnL btnR")
verhindert Überlappung Logo ↔ Kontoführung auf ≤560 px
──────────────────────────────────────────────────────────────── */
@media (max-width: 1199px) {
.u18-rank-row {
grid-template-columns: 40px 100px minmax(180px, 1.8fr) minmax(90px, 0.7fr) minmax(90px, 0.7fr) auto auto !important;
}
.u18-rank-row > .u18-rank-score { display: none !important; }
}
@media (max-width: 899px) {
.u18-rank-row {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
padding: 20px !important;
grid-template-columns: none !important;
grid-template-areas: none !important;
}
.u18-rank-row > .u18-rank-rank {
font-size: 22px !important;
order: 0;
}
.u18-rank-row > .u18-rank-name { order: 1; }
.u18-rank-row > .u18-rank-logo { order: 2; justify-self: start; align-self: flex-start; }
.u18-rank-row > .u18-rank-score { display: none !important; }
.u18-rank-row > .u18-rank-kf-wrap,
.u18-rank-row::before { display: none; }
.u18-rank-row > .u18-rank-kf1,
.u18-rank-row > .u18-rank-kf2 {
order: 3;
display: inline-block;
width: 48%;
}
.u18-rank-row > .u18-rank-kf1 { order: 3; }
.u18-rank-row > .u18-rank-kf2 { order: 4; }
.u18-rank-row > .u18-rank-details,
.u18-rank-row > .u18-rank-eroeffnen {
order: 5;
width: auto;
}
/* Theme benutzt statt