/* Bankseiten-Design 14.10.2026 – aus vorschau/comdirect-gemeinschaftskonto/modern.html übernommen.
   Gilt nur für Bankseiten (build_site.py: bank_page_modern). Übrige Seiten nutzen weiter site.css. */
@font-face{font-family:"Inter";src:url(../fonts/inter-latin-var.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Bricolage";src:url(../fonts/bricolage-grotesque-latin-var.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{
 --bg:#FFFFFF; --soft:#F4F7F7; --soft2:#EEF3F4; --ink:#0F1E24; --text:#3B4A50; --muted:#6A7980; --line:#E5EAEC;
 --petrol:#0F4C5C; --petrol-deep:#0A3642; --action:#0E7C86; --action-hover:#0A6A73; --tint:#E6F0F1; --apricot:#FFA552; --apricot-soft:#FCEBDD; --warm:#FFF6EE;
 --r-lg:24px; --r:16px; --r-sm:12px; --wrap:1180px; --g:20px;
 --head:"Bricolage",system-ui,sans-serif; --body:"Inter",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font:400 16.5px/1.6 var(--body);-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
img{max-width:100%;display:block}
a{color:var(--petrol)}
h1,h2,h3{font-family:var(--head);color:var(--ink);font-weight:600;margin:0;letter-spacing:-.025em;line-height:1.08}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--g)}
@media(min-width:760px){:root{--g:32px}}
.visually-hidden,.skip:not(:focus){position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid var(--petrol);outline-offset:2px;border-radius:6px}
.num{font-variant-numeric:tabular-nums}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--action);color:#fff;text-decoration:none;font:600 15.5px/1 var(--body);padding:15px 22px;border-radius:12px;border:0;cursor:pointer;transition:background .15s,transform .15s}
.btn:hover{background:var(--action-hover)}
.btn:active{transform:translateY(1px)}
.btn svg{width:14px;height:14px}
.btn.sm{padding:11px 16px;font-size:14.5px;border-radius:10px}
.btn.ghost{background:transparent;color:var(--petrol);box-shadow:inset 0 0 0 1.5px #62828A}
.btn.ghost:hover{box-shadow:inset 0 0 0 1.5px var(--petrol);background:transparent}
.link{font-weight:600;text-decoration:none;color:var(--petrol)}
.link:hover{text-decoration:underline}

/* Header */
.site-head{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;gap:24px;height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 1.1rem/1 var(--head);letter-spacing:-.02em}
.brand b{color:var(--petrol)}
.brand .brand-logo{display:block;height:29px;width:auto}.brand .brand-logo-dark{display:none}
html[data-theme="dark"] .brand .brand-logo-light{display:none}html[data-theme="dark"] .brand .brand-logo-dark{display:block}
.nav{margin-left:auto}
.nav ul{list-style:none;display:flex;gap:6px;margin:0;padding:0;align-items:center}
.nav a{display:block;text-decoration:none;color:var(--text);font-size:15px;font-weight:500;padding:8px 12px;border-radius:10px}
.nav a:hover{background:var(--soft)}
.nav .btn{color:#fff;margin-left:8px}
.menu-btn{display:none;margin-left:auto;background:var(--soft);border:0;border-radius:10px;font:600 15px var(--body);padding:10px 14px;color:var(--ink)}
@media(max-width:979px){.menu-btn{display:block}.nav{display:none;position:absolute;top:64px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line)}.nav.open{display:block}.nav ul{flex-direction:column;align-items:stretch;padding:8px var(--g) 16px}.nav .btn{margin:8px 0 0}}

/* Hero */
.hero{position:relative;padding:28px 0 56px;background:
 radial-gradient(900px 420px at 85% 0%, #E3EFF1 0%, rgba(227,239,241,0) 70%),
 radial-gradient(520px 300px at 10% 10%, #FFF3E8 0%, rgba(255,243,232,0) 70%), #fff}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:0 0 36px;padding:0;font-size:13.5px;color:var(--muted)}
.crumbs li+li::before{content:"/";margin-right:6px;color:#B8C3C7}
.crumbs a{color:var(--muted);text-decoration:none}.crumbs a:hover{color:var(--ink)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.eyebrow{display:flex;align-items:center;margin-bottom:20px}
.eyebrow img{height:30px;width:auto;border-radius:6px}
.hero h1{font-size:clamp(2.4rem,1.4rem + 3.4vw,4rem);letter-spacing:-.035em;line-height:1.02}
.hero h1 span{display:block;color:var(--petrol)}
.lead{font-size:18.5px;line-height:1.55;color:var(--text);margin:22px 0 0;max-width:34em}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:30px}
.hero-cta .btn{padding:17px 26px;font-size:16px}
.hero-cta small{color:var(--muted);font-size:13.5px}
.author{display:flex;align-items:center;gap:12px;margin-top:30px;font-size:14px;color:var(--muted)}
.author img{width:40px;height:40px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 0 0 4px var(--line)}
.author b{color:var(--ink);font-weight:600}
.author a{color:inherit}
/* Steckbrief */
.facts{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:0 30px 60px -40px rgba(15,76,92,.45),0 2px 6px rgba(15,30,36,.04)}
.facts-top{display:block;padding-bottom:22px;border-bottom:1px solid var(--line)}
.facts .label{font-size:13.5px;color:var(--muted);font-weight:500;margin-bottom:6px}
.facts .price{font:600 4rem/0.9 var(--head);letter-spacing:-.05em;color:var(--ink)}
.facts .price small{font:500 15px var(--body);letter-spacing:0;color:var(--muted);margin-left:6px}
.facts .cond{font-size:14px;color:var(--muted);margin-top:10px}
.facts-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.fact{background:var(--soft);border-radius:var(--r-sm);padding:14px 16px}
.fact span{display:block;font-size:12.5px;color:var(--muted);font-weight:500;margin-bottom:4px}
.fact b{font:600 1.05rem/1.25 var(--head);color:var(--ink);letter-spacing:-.01em}
.facts .btn{width:100%;padding:17px}
.facts .note{display:flex;justify-content:space-between;gap:10px;margin-top:14px;font-size:13px;color:var(--muted)}
@media(max-width:899px){.hero-grid{grid-template-columns:1fr;gap:32px}.facts{padding:22px}.facts .price{font-size:3.2rem}.facts>.btn,.facts .note{display:none}.facts-grid{margin-bottom:0}.fact b{font-size:.98rem}}

/* Tabs */
.tabs{position:sticky;top:64px;z-index:20;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;align-items:center;gap:16px;height:54px}
.tabs ul{list-style:none;display:flex;gap:4px;margin:0;padding:0;overflow-x:auto;scrollbar-width:none;flex:1}
.tabs ul::-webkit-scrollbar{display:none}
.tabs ul a{display:block;white-space:nowrap;text-decoration:none;color:var(--muted);font-size:14.5px;font-weight:500;padding:8px 14px;border-radius:999px}
.tabs ul a:hover{color:var(--ink)}
.tabs ul a.on{background:var(--soft2);color:var(--ink)}
.tabs .cta{display:flex;align-items:center;gap:14px;opacity:0;pointer-events:none;transition:opacity .2s}
.tabs.show .cta{opacity:1;pointer-events:auto}
.tabs .cta b{font:600 1.05rem var(--head);color:var(--ink)}
@media(max-width:979px){.tabs .cta{display:none}}

/* Sections */
.sec{padding:88px 0}
.sec.tight{padding:64px 0}
.sec.soft{background:var(--soft)}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:36px}
.sec-head h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);max-width:20em}
.sec-head p{color:var(--muted);font-size:14px}
section[id]{scroll-margin-top:130px}
@media(max-width:759px){.sec{padding:64px 0}.sec-head{flex-direction:column;align-items:flex-start}}

/* Passt / Passt weniger */
.fit{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.fit-card{border-radius:var(--r-lg);padding:30px 32px}
.fit-card.yes{background:var(--tint)}
.fit-card.no{background:var(--warm);box-shadow:inset 0 0 0 1px #F6E2CF}
.fit-card h3{font-size:1.3rem;margin-bottom:18px;display:flex;align-items:center;gap:12px}
.fit-card h3 i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none}
.fit-card.yes h3 i{background:var(--petrol);color:#fff}
.fit-card.no h3 i{background:var(--apricot);color:#15252B}
.fit-card ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fit-card li{padding-left:22px;position:relative;font-size:16.5px;line-height:1.5;color:var(--ink)}
.fit-card li::before{content:"";position:absolute;left:2px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--petrol)}
.fit-card.no li::before{background:var(--apricot)}
.fit-card li span{color:var(--text)}
@media(max-width:759px){.fit{grid-template-columns:1fr}.fit-card{padding:24px}}

/* Quiz */
.quiz-wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:center;margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:36px}
.quiz-intro h3{font-size:1.6rem;margin-bottom:10px}
.quiz-intro p{color:var(--muted)}
.bk-quiz{margin:0}
.bk-quiz .qk,.bk-quiz>h2{display:none}
.steps3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:18px}
.steps3 i{height:5px;border-radius:5px;background:var(--soft2)}
.steps3 i.cur{background:var(--apricot)}.steps3 i.done{background:var(--petrol)}
.bk-quiz fieldset{border:0;margin:0;padding:0}
.bk-quiz legend{padding:0}
.bk-quiz .n{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.bk-quiz .qt{display:block;font:600 1.4rem/1.25 var(--head);letter-spacing:-.02em;color:var(--ink)}
.bk-quiz .help{font-size:14px;color:var(--muted);margin:10px 0 0}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}
.opts label{position:relative;cursor:pointer}
.opts input{position:absolute;opacity:0}
.opts label>span{display:flex;align-items:center;justify-content:center;gap:10px;height:56px;border-radius:14px;background:var(--soft);font-weight:600;color:var(--ink);transition:background .15s,box-shadow .15s}
.opts label:hover>span{background:var(--soft2)}
.opts input:checked+span{background:var(--tint);box-shadow:inset 0 0 0 2px var(--petrol)}
.opts input:focus-visible+span{outline:3px solid var(--petrol);outline-offset:2px}
.opts .mk,.opts .x{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#fff;font-size:11px;color:var(--petrol)}
.opts .x{color:#B4621F}
.opts .mk svg{width:12px;height:12px}
.res .rh{font:600 1.4rem var(--head);color:var(--ink);margin-bottom:8px}
.res .rh.ok{color:var(--petrol)}
.res ul{margin:8px 0 0;padding-left:18px;color:var(--text)}
.res .ra{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:18px}
.res .alt{font-weight:600}
.again{margin-top:14px;background:none;border:0;color:var(--muted);font:500 14px var(--body);text-decoration:underline;cursor:pointer;padding:0}
@media(max-width:899px){.quiz-wrap{grid-template-columns:1fr;gap:24px;padding:24px}}

/* Tarife */
.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.plan{position:relative;border-radius:var(--r-lg);padding:28px;background:#fff;border:1px solid var(--line)}
.plan.top{background:linear-gradient(180deg,#F1F7F8, #fff 60%);border:1.5px solid var(--petrol);box-shadow:0 24px 48px -36px rgba(15,76,92,.6)}
.plan .tag{position:absolute;top:22px;right:22px;font-size:12px;font-weight:600;color:var(--petrol);background:#fff;border:1px solid #CFE0E3;padding:4px 10px;border-radius:999px}
.plan h3{font-size:1.15rem;margin-bottom:16px}
.plan .pr{font:600 3rem/1 var(--head);letter-spacing:-.045em;color:var(--ink)}
.plan .pr small{font:500 14px var(--body);color:var(--muted);letter-spacing:0;margin-left:4px}
.plan .cond{font-size:13.5px;color:var(--muted);margin-top:8px;min-height:2.8em;line-height:1.4}
.plan ul{list-style:none;margin:20px 0 0;padding:20px 0 0;border-top:1px solid var(--line);display:grid;gap:10px;font-size:15px;color:var(--ink)}
.plan li{display:flex;gap:10px}
.plan li::before{content:"";flex:none;width:18px;height:18px;margin-top:2px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%230E7C86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.plan li.no{color:var(--muted)}
.plan li.no::before{background:var(--soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5 8h6' fill='none' stroke='%236A7980' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}
@media(max-width:859px){.plans{grid-template-columns:1fr}.plan .cond{min-height:0}}

/* Konditionen-Tabelle */
.spec{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.spec-row{display:grid;grid-template-columns:240px 1fr;gap:24px;padding:20px 28px;border-top:1px solid var(--line);align-items:baseline}
.spec-row:first-child{border-top:0}
.spec-row dt{font-weight:600;color:var(--ink);font-size:15px}
.spec-row dd{margin:0;font-size:16px;color:var(--text)}
.spec-row dd strong{color:var(--ink);font-weight:600}
.src{font-size:13.5px;color:var(--muted)}
@media(max-width:759px){.spec-row{grid-template-columns:1fr;gap:4px;padding:16px 20px}}

/* Gut zu wissen */
.know-h{font-size:1.25rem;margin:56px 0 18px}
.know{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.k{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px}
.ki{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--apricot-soft);color:#A65A1C;margin-bottom:16px}
.k h4{font:600 1.08rem/1.3 var(--head);color:var(--ink);margin:0 0 6px;letter-spacing:-.01em}
.k p{font-size:15px;color:var(--text)}
@media(max-width:859px){.know{grid-template-columns:1fr}}

/* Schritte */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;counter-reset:s}
.steps li{counter-increment:s;background:var(--soft);border-radius:var(--r-lg);padding:28px}
.steps li::before{content:counter(s);display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--petrol);color:#fff;font:600 1.05rem var(--head);margin-bottom:20px}
.steps h3{font-size:1.2rem;margin-bottom:8px}
.steps p{font-size:15px}
@media(max-width:859px){.steps{grid-template-columns:1fr}}

/* Alternativen */
.alts{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.alt{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;transition:box-shadow .2s,transform .2s}
.alt:hover{box-shadow:0 24px 48px -32px rgba(15,30,36,.35);transform:translateY(-2px)}
.alt .logo{height:28px;margin-bottom:20px}
.alt .logo img{height:28px;width:auto}
.alt .p{font:600 2rem/1 var(--head);letter-spacing:-.04em;color:var(--ink)}
.alt .p small{font:500 13.5px var(--body);color:var(--muted);letter-spacing:0;margin-left:4px}
.alt .c{font-size:14px;color:var(--muted);margin:8px 0 16px}
.alt .diff{font-size:14.5px;color:var(--ink);background:var(--soft);border-radius:var(--r-sm);padding:12px 14px;margin-bottom:20px}
.alt .diff b{display:block;font-size:12.5px;color:var(--petrol);font-weight:600;margin-bottom:2px}
.alt .act{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:10px}
.alt .act .link{font-size:14px}
@media(max-width:859px){.alts{grid-template-columns:1fr}}

/* FAQ */
.faq-grid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:64px;align-items:start}
.faq-side{position:sticky;top:140px}
.faq-side p{color:var(--muted);margin-top:14px;max-width:24em}
.faq{display:grid;gap:10px}
.faq details{background:var(--soft);border-radius:var(--r);padding:0 22px;transition:background .15s}
.faq details[open]{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 0;font-weight:600;color:var(--ink);font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:28px;height:28px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v8M4 8h8' fill='none' stroke='%230E7C86' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat;transition:transform .2s}
.faq details[open] summary::after{transform:rotate(45deg);background-color:var(--soft)}
.faq .a{padding:0 0 20px;font-size:15.5px}
@media(max-width:899px){.faq-grid{grid-template-columns:1fr;gap:24px}.faq-side{position:static}}

/* Kommentare */
.cgrid{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);gap:64px;align-items:start}
.cside h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem);margin-bottom:14px}
.c-intro{color:var(--muted)}
.c-list{margin:0;padding:0}
.c-empty{margin-top:18px;font-size:14.5px;color:var(--muted);background:var(--soft);border-radius:12px;padding:14px 16px}
.c-form{background:var(--soft);border-radius:var(--r-lg);padding:28px;display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start}
.c-form h3{grid-column:1/-1;font-size:1.2rem}
.c-field{display:grid;gap:6px;font-size:14px;color:var(--ink);font-weight:600}
.c-field:nth-of-type(3){grid-column:1/-1}
.c-field em{font-style:normal;font-weight:400;color:var(--muted)}
.c-field input,.c-field textarea{font:400 16px var(--body);color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;width:100%}
.c-field input:focus,.c-field textarea:focus{outline:none;border-color:var(--petrol);box-shadow:0 0 0 4px rgba(15,76,92,.12)}
.c-field small{font-weight:400;color:var(--muted);font-size:13px;line-height:1.45}
.c-hp{position:absolute;left:-9999px}
.c-note{grid-column:1/-1;font-size:13px;color:var(--muted)}
.c-form .btn{grid-column:1/-1;justify-self:start}
.c-status{grid-column:1/-1;margin:0}
@media(max-width:899px){.cgrid{grid-template-columns:1fr;gap:24px}.c-form{grid-template-columns:1fr;padding:22px}}
/* Newsletter */
.nl-band{padding:0 0 88px}
.nl-box{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;padding:44px 48px;border-radius:28px;background:linear-gradient(120deg,#E6F0F1 0%,#F3F7F7 55%,#FFF4EA 100%)}
.nl-kopf{display:block}
.nl-icon,.nl-vorteile{display:none}
.nl-titel{font:600 clamp(1.6rem,1.3rem + 1vw,2.1rem)/1.1 var(--head);letter-spacing:-.025em;color:var(--ink);margin:0 0 10px}
.nl-text{color:var(--text);max-width:30em}
.nl-meta{margin-top:14px;font-size:13.5px;color:var(--muted)}
.nl-feld{display:flex;gap:8px;background:#fff;border-radius:14px;padding:6px;box-shadow:0 10px 30px -20px rgba(15,76,92,.5)}
.nl-feld input{flex:1;min-width:0;border:0;background:transparent;font:400 16px var(--body);padding:12px 12px;color:var(--ink)}
.nl-feld input:focus{outline:none}
.nl-knopf{display:inline-flex;align-items:center;gap:8px;background:var(--petrol);color:#fff;border:0;border-radius:10px;padding:0 20px;font:600 15px var(--body);cursor:pointer;min-height:48px}
.nl-knopf svg{width:16px;height:16px}
.nl-check{display:flex;gap:10px;margin-top:14px;font-size:13px;color:var(--muted);line-height:1.5}
.nl-check input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;border-radius:6px;border:1.5px solid #62828A;background:#fff;margin:0;cursor:pointer}
.nl-check input:checked{background:var(--petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-color:var(--petrol)}
.nl-honig{position:absolute;left:-9999px}
.nl-status{margin-top:10px;font-weight:600;color:var(--petrol)}
.nl-status:empty{display:none}
.nl-form{margin:0}
@media(max-width:859px){.nl-box{grid-template-columns:1fr;gap:24px;padding:28px 22px}}

/* Footer hell */
.site-foot{background:var(--soft);padding:64px 0 28px;font-size:14.5px}
.site-foot .wrap>div:first-child,.foot-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.site-foot h2{font:600 13px var(--body);letter-spacing:0;color:var(--ink);margin:0 0 14px;text-transform:none}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.site-foot a{color:var(--text);text-decoration:none}.site-foot a:hover{color:var(--petrol)}
.site-foot p{color:var(--muted);margin:12px 0 0}
.foot-bottom{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;border-top:1px solid var(--line);margin-top:48px;padding-top:20px;color:var(--muted);font-size:13px}
@media(max-width:859px){.foot-grid{grid-template-columns:1fr 1fr}}

/* Handy-Leiste */
.mbar{display:none}
@media(max-width:759px){.mbar{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:40;align-items:center;gap:12px;padding:10px 10px 10px 18px;background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:18px;box-shadow:0 16px 40px -16px rgba(15,30,36,.35);transform:translateY(140%);transition:transform .25s}.mbar.show{transform:none}.mbar b{font:600 1.3rem var(--head);color:var(--ink)}.mbar small{display:block;font-size:12px;color:var(--muted)}.mbar .btn{margin-left:auto}}

/* ===== Lesbarkeit 14.10.: weniger enge Titel, dunklerer Text, Mindestgrößen ===== */
:root{--text:#2B3A40;--muted:#56666C}
body{font-size:17px;font-feature-settings:normal;line-height:1.62}
h1,h2,h3,h4,.price,.pr,.p,.qt,.nl-titel,.fit-card h3,.k h4{font-optical-sizing:none;font-variation-settings:"opsz" 24}
.hero h1{letter-spacing:-.022em;line-height:1.05;font-size:clamp(2.3rem,1.4rem + 3vw,3.6rem)}
.sec-head h2,.faq-side h2,.cside h2{letter-spacing:-.018em;line-height:1.12}
h3,h4,.fit-card h3,.quiz-intro h3,.steps h3,.plan h3{letter-spacing:-.01em!important}
.facts .price,.plan .pr,.alt .p{letter-spacing:-.025em}
.bk-quiz .qt{letter-spacing:-.012em}
.lead{color:var(--text)}
.facts .label,.fact span,.crumbs ol,.src,.facts .note,.plan .cond,.alt .c,.c-note,.nl-check,.nl-meta,.foot-bottom,.author,.bk-quiz .help,.c-field small{font-size:14px!important}
.fact span{color:var(--muted)}
.fit-card li span,.k p,.steps p,.spec-row dd{color:var(--text)}
.spec-row dd,.k p,.steps p,.alt .diff,.plan ul{font-size:16px}
.nav a{color:#24343A}
.tabs ul a{color:#4C5C62;font-size:15px}

/* Quiz hervorheben 14.10. */
.quiz-wrap{margin-top:28px;padding:40px;gap:56px;align-items:start;border:0;background:linear-gradient(135deg,#DCEBEE 0%,#EAF3F4 55%,#FFF1E4 100%);box-shadow:0 30px 60px -44px rgba(15,76,92,.55)}
.quiz-intro{padding-top:6px}
.qbadge{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--petrol);font-size:14px;font-weight:600;padding:7px 14px 7px 10px;border-radius:999px;margin-bottom:18px}
.qbadge svg{background:var(--petrol);color:#fff;border-radius:50%;padding:2px;width:18px;height:18px}
.quiz-intro h3{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem)!important;letter-spacing:-.018em!important;margin-bottom:12px}
.quiz-intro p{color:var(--text);font-size:16.5px}
.bk-quiz{background:#fff;border-radius:20px;padding:28px;box-shadow:0 2px 6px rgba(15,30,36,.05)}
.opts label>span{background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--line)}
.opts label:hover>span{box-shadow:inset 0 0 0 1.5px var(--petrol);background:#fff}
@media(max-width:899px){.quiz-wrap{padding:22px;gap:18px}.bk-quiz{padding:20px}}

/* ===== Weniger Boxen 14.10.: Karten nur für Produkte (Steckbrief, Tarife, Alternativen) ===== */
/* Passt / Passt weniger: offen, zwei Spalten mit Trennlinie */
.fit{gap:0;grid-template-columns:1fr 1fr}
.fit-card{background:none!important;box-shadow:none!important;border-radius:0;padding:4px 40px 4px 0}
.fit-card.no{padding:4px 0 4px 40px;border-left:1px solid var(--line)}
@media(max-width:759px){.fit{grid-template-columns:1fr;gap:28px}.fit-card,.fit-card.no{padding:0;border:0}}
/* Quiz: ein Feld, keine Karte in der Karte */
.quiz-wrap{margin-top:56px}
.bk-quiz{background:none;box-shadow:none;padding:0;border-radius:0}
.steps3 i{background:rgba(15,76,92,.12)}
.opts label>span{background:#fff;box-shadow:0 1px 2px rgba(15,30,36,.06),inset 0 0 0 1px rgba(15,76,92,.12)}
.bk-quiz .help{color:var(--text)}
/* Konditionen-Tabelle ohne Kasten */
.spec{background:none;border:0;border-radius:0;margin-top:40px;border-top:1px solid #DCE3E5}
.spec-row{padding:18px 0;border-top:0;border-bottom:1px solid #DCE3E5}
@media(max-width:759px){.spec-row{padding:14px 0}}
/* Gut zu wissen: offene Spalten */
.know{gap:40px}
.k{background:none;border:0;padding:0}
.ki{background:#fff}
/* Schritte: Zeitleiste statt Kästen */
.steps{gap:40px;position:relative}
.steps li{background:none;padding:0;position:relative}
.steps li::before{border-radius:50%;position:relative;z-index:1;box-shadow:0 0 0 6px #fff}
.steps li:not(:last-child)::after{content:"";position:absolute;top:20px;left:52px;right:-28px;height:2px;background:var(--line)}
@media(max-width:859px){.steps{gap:28px}.steps li:not(:last-child)::after{display:none}}
/* FAQ: Linien statt Kästen */
.faq{gap:0;border-top:1px solid var(--line)}
.faq details,.faq details[open]{background:none;box-shadow:none;border-radius:0;padding:0;border-bottom:1px solid var(--line)}
.faq summary::after{background-color:var(--soft)}
/* Kommentar-Formular ohne Kasten */
.c-form{background:none;padding:0}
.c-field input,.c-field textarea{background:var(--soft);border-color:transparent}

.alt .diff{background:none;border-radius:0;padding:0 0 0 14px;border-left:2px solid var(--apricot)}
.c-empty{background:none;padding:0}

/* Steckbrief kompakt */
.facts{padding:22px 24px}
.facts-top{padding-bottom:14px}
.facts .label{margin-bottom:2px}
.facts .price{font-size:3rem}
.facts .cond{margin-top:6px}
.facts-grid{display:block;margin:6px 0 16px}
.fact{display:flex;justify-content:space-between;align-items:baseline;gap:12px;background:none;border-radius:0;padding:10px 0;border-bottom:1px solid var(--line)}
.fact:last-child{border-bottom:0}
.fact span{margin:0;font-size:15px!important}
.fact b{font-size:15.5px;text-align:right}
.facts>.btn{padding:14px}
.facts .note{margin-top:10px}

/* ===== Seitennavigation links (ab 1100px) ===== */
.layout{display:block}
.side{display:none}
@media(min-width:1100px){
 :root{--wrap:1240px}
 .tabs{display:none}
 .layout{display:grid;grid-template-columns:220px minmax(0,1fr);gap:64px;align-items:start;padding-top:24px}
 .side{display:block;position:sticky;top:96px}
 .content .wrap{max-width:none;padding:0}
 .content .sec{padding:88px 0;background:none;border-top:1px solid var(--line)}
 .content .sec:first-child{border-top:0}
 .content .sec.soft{background:none}
 .faq-grid,.cgrid{grid-template-columns:1fr;gap:28px}
 .faq-side{position:static}
 .steps li:not(:last-child)::after{right:-28px}
}
.side-h{font-size:13px;font-weight:600;color:var(--muted);margin:0 0 10px;padding-left:16px}
.side-nav{list-style:none;margin:0;padding:0;border-left:2px solid var(--line)}
.side-nav a{display:block;margin-left:-2px;padding:8px 0 8px 16px;border-left:2px solid transparent;text-decoration:none;color:var(--muted);font-size:15px;font-weight:500;line-height:1.35;transition:color .15s,border-color .15s}
.side-nav a:hover{color:var(--ink)}
.side-nav a.on{color:var(--petrol);border-left-color:var(--petrol);font-weight:600}
.side-cta{margin-top:28px;padding:18px;border-radius:16px;background:var(--soft)}
.side-cta img{height:20px;width:auto;margin-bottom:12px}
.side-cta .sp{font-size:14px;color:var(--muted)}.side-cta .sp b{font:600 1.6rem var(--head);color:var(--ink);letter-spacing:-.02em}
.side-cta .sc{font-size:13.5px;color:var(--muted);margin:2px 0 12px}
.side-cta .btn{width:100%;padding:12px 10px}
.side-cta .sn{font-size:12.5px;color:var(--muted);margin-top:8px;text-align:center}

@media(min-width:1100px){.alt .act{flex-direction:column;align-items:stretch;gap:12px}.alt .act .btn{width:100%;white-space:nowrap;font-size:14px;padding:12px 8px}.alt .act .link{text-align:center}}

/* Buttons heller 14.10.: Hauptbutton helleres Petrol (4,9:1), Nebenbuttons getönt */
.btn{background:#0E7C86;box-shadow:none}
.btn:hover{background:#0A6A73}
.btn.soft,.nav .btn,.alt .act .btn{background:#E3EFF1;color:var(--petrol)!important}
.btn.soft:hover,.nav .btn:hover,.alt .act .btn:hover{background:#D3E6E9}
@media(min-width:900px){.hero-cta .btn{background:#E3EFF1;color:var(--petrol)}.hero-cta .btn:hover{background:#D3E6E9}}

/* Keine Verläufe mehr 14.10.: ruhige Volltöne */
.hero{background:#fff!important}
.quiz-wrap{background:#EEF5F6!important;box-shadow:none!important}
.nl-box{background:#F4F7F7!important}
.plan.top{background:#fff!important}

/* Hintergrund-Varianten zur Auswahl (Vorschau) */
body[data-bg="grau"]{background:#F2F5F6}
body[data-bg="grau"] .hero{background:#F2F5F6!important}
body[data-bg="papier"]{background:#FAF8F4}
body[data-bg="papier"] .hero{background:#FAF8F4!important}
body[data-bg="grau"] .site-head,body[data-bg="papier"] .site-head{background:rgba(255,255,255,.92)}
body[data-bg="grau"] .content .sec,body[data-bg="papier"] .content .sec{border-top-color:rgba(15,30,36,.08)}
body[data-bg="grau"] .side-cta,body[data-bg="papier"] .side-cta{background:#fff}
body[data-bg="grau"] .facts,body[data-bg="papier"] .facts{border-color:transparent}
body[data-bg="grau"] .quiz-wrap{background:#fff!important}
body[data-bg="papier"] .quiz-wrap{background:#fff!important}
body[data-bg="grau"] .nl-box,body[data-bg="papier"] .nl-box{background:#fff!important}
body[data-bg="grau"] .site-foot{background:#E9EEEF}
body[data-bg="papier"] .site-foot{background:#F3EFE7}
body[data-bg="grau"] .ki,body[data-bg="papier"] .ki{background:var(--apricot-soft)}
body[data-bg="grau"] .faq summary::after,body[data-bg="papier"] .faq summary::after{background-color:#fff}
body[data-bg="grau"] .c-field input,body[data-bg="grau"] .c-field textarea,body[data-bg="papier"] .c-field input,body[data-bg="papier"] .c-field textarea{background:#fff;border-color:var(--line)}
body[data-bg="band"] .hero{background:#EEF5F6!important}
body[data-bg="band"] .site-foot{background:#EEF5F6}




@media(max-width:759px){}

/* Wechsel Weiß / Hellgrau 14.10. */
:root{--band:#F2F5F6}
.hero{background:var(--band)!important}
.facts{border-color:transparent}
.content .sec{border-top:0!important;background:none}
.sec.band{background:var(--band)!important}
@media(min-width:1100px){
 .content .sec.band{background:none!important;position:relative;isolation:auto}
 .content .sec.band::before{content:"";position:absolute;top:0;bottom:0;left:-100vw;right:-100vw;background:var(--band);z-index:-1}
 .content{position:relative;z-index:0}
 body{overflow-x:clip}
 .layout{padding-top:0}
 .side{z-index:2}
}
.sec.band .side-cta{background:#fff}
.side-cta{background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.sec.band .faq summary::after{background-color:#fff}
.comments.band .c-field input,.comments.band .c-field textarea{background:#fff;border-color:var(--line)}
.sec.band .ki{background:#fff}
.nl-box{background:var(--band)!important}
.site-foot{background:var(--band)}
.nl-band{padding-top:88px}

/* Übergang sauber: keine Rundung an Bändern, Seitenleiste als eigene ruhige Karte */
.content .sec{border-radius:0!important}
@media(min-width:1100px){
 .side{padding:20px 18px 18px;background:#fff;border-radius:18px;box-shadow:0 1px 2px rgba(15,30,36,.05),0 12px 32px -20px rgba(15,30,36,.25);margin-top:88px}
 .side-h{padding-left:14px}
 .side-cta{margin-top:18px;padding:16px 0 0;border-radius:0;background:none!important;box-shadow:none!important;border-top:1px solid var(--line)}
}

/* Ein einziger, leichter Verlauf: nur im Seitenkopf */
.hero{background:linear-gradient(120deg,#E6F0F1 0%,#F2F5F6 55%,#F9F3EC 100%)!important}
@media(min-width:900px){.hero-cta .btn{background:#fff!important;box-shadow:inset 0 0 0 1px #CFE0E3}.hero-cta .btn:hover{background:#F4F9FA!important}}

/* Seitenleiste bleibt auf ruhigem Weiß: Bänder beginnen erst rechts von ihr */
@media(min-width:1100px){
 .content .sec.band::before{left:-32px!important;right:-100vw!important}
 .side{background:none;box-shadow:none;border-radius:0;padding:0;margin-top:88px}
 .side-h{padding-left:16px}
 .side-cta{margin-top:24px;padding:18px!important;border-radius:16px!important;background:var(--band)!important;border-top:0!important}
 .layout{position:relative}
 .layout::before{content:"";position:absolute;top:0;bottom:0;left:calc(var(--g) + 220px + 32px);width:1px;background:var(--line);z-index:1}
}

/* Kommentare aufgeräumt */
.comments .cgrid{grid-template-columns:1fr!important;gap:24px}
.cside h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem)!important;margin-bottom:10px}
.c-intro{max-width:40em}
.c-empty{display:inline-flex;align-items:center;gap:8px;margin-top:14px;font-size:14.5px}
.c-empty::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--apricot)}
.c-form{background:#fff!important;border-radius:20px;padding:28px!important;box-shadow:0 1px 2px rgba(15,30,36,.04);gap:18px 20px}
.c-form h3{font-size:1.1rem!important;margin-bottom:-4px}
.c-field input,.c-field textarea,.comments.band .c-field input,.comments.band .c-field textarea{background:var(--soft)!important;border:1px solid transparent!important}
.c-field input:focus,.c-field textarea:focus{background:#fff!important;border-color:var(--petrol)!important}
.c-field textarea{min-height:120px}
.c-field:nth-of-type(3) small,.c-note{font-size:13px!important;color:var(--muted)}
.c-note{margin-top:-6px}
.c-form .btn{background:#0E7C86;color:#fff}

/* Newsletter: derselbe leichte Verlauf wie im Kopf, Knopf im hellen Petrol */
.nl-box{background:linear-gradient(120deg,#E6F0F1 0%,#F2F5F6 55%,#F9F3EC 100%)!important}
.nl-knopf{background:#0E7C86}.nl-knopf:hover{background:#0A6A73}

/* Footer-Links: deutlicher Hover */
.site-foot a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:4px;text-decoration-thickness:1.5px;transition:color .15s,text-decoration-color .15s}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--petrol);text-decoration-color:currentColor}
.site-foot .brand{text-decoration:none!important}

/* Einwilligung Kommentare */
.c-consent{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--text);cursor:pointer}
.c-consent input{appearance:none;-webkit-appearance:none;flex:none;width:20px;height:20px;margin:1px 0 0;border-radius:6px;border:1.5px solid #62828A;background:#fff;cursor:pointer}
.c-consent input:checked{background:#0E7C86 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.3l2.6 2.6L12 5.4' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;border-color:#0E7C86}
.c-consent input:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
.c-consent input[aria-invalid="true"]{border-color:#B3412A;box-shadow:0 0 0 3px rgba(179,65,42,.15)}
.c-note{margin-top:-8px}
/* Fokus im Formular klar: weiß + Petrol-Rand */
.comments .c-form .c-field input:focus,.comments .c-form .c-field textarea:focus{outline:none!important;background:#fff!important;border:1px solid #0E7C86!important;box-shadow:0 0 0 4px rgba(43,122,139,.15)!important}
.c-status.err{color:#A3361B;font-size:14.5px;font-weight:600}.c-status.ok{color:var(--petrol);font-weight:600}

/* ===== Zwei Button-Arten 14.10. =====
   Partner (führt zur Bank, Partnerlink): Apricot-Fläche, Tinte, Pfeil ↗
   Service (auf unserer Seite): Petrol */
a.btn.bank,.alt .act a.btn.bank{background:#FFA552!important;color:#15252B!important;box-shadow:none!important}
a.btn.bank:hover,.alt .act a.btn.bank:hover{background:#E68E44!important}
a.btn.bank:focus-visible{outline:3px solid var(--petrol);outline-offset:2px}
@media(min-width:900px){.hero-cta a.btn.bank{background:#fff!important;box-shadow:inset 0 0 0 1.5px #FFA552!important}.hero-cta a.btn.bank:hover{background:#FFF6EE!important}}
.c-form .btn,.nl-knopf,.nav .btn{background:#0E7C86!important;color:#fff!important}
.c-form .btn:hover,.nl-knopf:hover,.nav .btn:hover{background:#0A6A73!important}

/* FAQ: Antwort klar vom Frage-Text getrennt */
.faq details{transition:background .15s}
.faq details[open]{background:#F7FAFA!important;border-radius:14px!important;border-bottom-color:transparent!important;margin:6px 0;padding:0 20px!important}
.faq details[open]+details{border-top:0}
.faq summary{outline:none}
.faq summary:focus-visible{outline:2px solid var(--petrol);outline-offset:4px;border-radius:10px}
.faq summary:focus:not(:focus-visible){outline:none}
.faq details[open] summary{color:var(--petrol);padding-bottom:10px}
.faq details[open] summary::after{background-color:#fff!important}
.faq .a{padding:0 48px 20px 0!important}
.faq .a p{margin:0;padding-left:16px;border-left:2px solid #CFE0E3;font-size:16px;line-height:1.6;color:#3B4A50}

/* Partner-Buttons sanfter: helles Apricot statt vollem Orange */
a.btn.bank,.alt .act a.btn.bank{background:#F8D5B4!important;color:#15252B!important}
a.btn.bank:hover,.alt .act a.btn.bank:hover{background:#F4C49A!important}
.side-cta .btn{white-space:nowrap;font-size:14px;padding:12px 8px}

/* FAQ final: alle Fragen gleich ausgerichtet, offen = Petrol-Frage + Antwort darunter, keine Box */
.faq details,.faq details[open]{background:none!important;border-radius:0!important;margin:0!important;padding:0!important;border-bottom:1px solid var(--line)!important}
.faq details[open] summary{color:var(--petrol);padding-bottom:6px}
.faq details[open] summary::after{background-color:var(--tint)!important}
.faq .a{padding:0 64px 22px 0!important}
.faq .a p{padding-left:0!important;border-left:0!important;font-size:16px;line-height:1.65;color:#46565C;max-width:62em}

/* FAQ weich öffnen */
.faq .a{overflow:hidden}
.faq summary::after{transition:transform .3s cubic-bezier(.2,.7,.2,1),background-color .2s}
.faq summary{transition:color .2s}
.faq details.closing summary::after{transform:none}.faq details.closing summary{color:var(--ink)}
.faq .a{padding:0 64px 0 0!important}.faq .a p:last-child{padding-bottom:22px!important}
/* Button-Farbvarianten (Vorschau) */
body[data-btn="petrol"] a.btn.bank,body[data-btn="pfirsich"] .alt .act a.btn.bank{background:#F8D5B4!important;color:#15252B!important;box-shadow:none!important}
body[data-btn="petrol"] a.btn.bank:hover,body[data-btn="pfirsich"] .alt .act a.btn.bank:hover{background:#F4C49A!important}
body[data-btn="petrol"] .c-form .btn,body[data-btn="pfirsich"] .nl-knopf,body[data-btn="pfirsich"] .nav .btn{background:#0E7C86!important;color:#fff!important;box-shadow:none!important}
body[data-btn="petrol"] .c-form .btn:hover,body[data-btn="pfirsich"] .nl-knopf:hover,body[data-btn="pfirsich"] .nav .btn:hover{background:#0A6A73!important}
@media(min-width:900px){body[data-btn="petrol"] .hero-cta a.btn.bank{background:#fff!important;box-shadow:inset 0 0 0 1.5px #F8D5B4!important;color:#15252B!important}}
body[data-btn="petrol"] a.btn.bank,body[data-btn="petrol"] .alt .act a.btn.bank{background:#0E7C86!important;color:#fff!important;box-shadow:none!important}
body[data-btn="petrol"] a.btn.bank:hover,body[data-btn="petrol"] .alt .act a.btn.bank:hover{background:#0A6A73!important}
body[data-btn="petrol"] .c-form .btn,body[data-btn="petrol"] .nl-knopf,body[data-btn="petrol"] .nav .btn{background:#fff!important;color:#0F4C5C!important;box-shadow:inset 0 0 0 1.5px #0E7C86!important}
body[data-btn="petrol"] .c-form .btn:hover,body[data-btn="petrol"] .nl-knopf:hover,body[data-btn="petrol"] .nav .btn:hover{background:#EEF5F6!important}
@media(min-width:900px){body[data-btn="petrol"] .hero-cta a.btn.bank{background:#fff!important;box-shadow:inset 0 0 0 1.5px #0E7C86!important;color:#15252B!important}}
body[data-btn="mint"] a.btn.bank,body[data-btn="mint"] .alt .act a.btn.bank{background:#CFE6E9!important;color:#0F4C5C!important;box-shadow:none!important}
body[data-btn="mint"] a.btn.bank:hover,body[data-btn="mint"] .alt .act a.btn.bank:hover{background:#BCDCE0!important}
body[data-btn="mint"] .c-form .btn,body[data-btn="mint"] .nl-knopf,body[data-btn="mint"] .nav .btn{background:#0F4C5C!important;color:#fff!important;box-shadow:none!important}
body[data-btn="mint"] .c-form .btn:hover,body[data-btn="mint"] .nl-knopf:hover,body[data-btn="mint"] .nav .btn:hover{background:#0A3642!important}
@media(min-width:900px){body[data-btn="mint"] .hero-cta a.btn.bank{background:#fff!important;box-shadow:inset 0 0 0 1.5px #CFE6E9!important;color:#15252B!important}}
body[data-btn="sand"] a.btn.bank,body[data-btn="sand"] .alt .act a.btn.bank{background:#EADBC8!important;color:#15252B!important;box-shadow:none!important}
body[data-btn="sand"] a.btn.bank:hover,body[data-btn="sand"] .alt .act a.btn.bank:hover{background:#E0CCB3!important}
body[data-btn="sand"] .c-form .btn,body[data-btn="sand"] .nl-knopf,body[data-btn="sand"] .nav .btn{background:#0E7C86!important;color:#fff!important;box-shadow:none!important}
body[data-btn="sand"] .c-form .btn:hover,body[data-btn="sand"] .nl-knopf:hover,body[data-btn="sand"] .nav .btn:hover{background:#0A6A73!important}
@media(min-width:900px){body[data-btn="sand"] .hero-cta a.btn.bank{background:#fff!important;box-shadow:inset 0 0 0 1.5px #EADBC8!important;color:#15252B!important}}
body[data-btn="koralle"] a.btn.bank,body[data-btn="koralle"] .alt .act a.btn.bank{background:#F3B7A1!important;color:#15252B!important;box-shadow:none!important}
body[data-btn="koralle"] a.btn.bank:hover,body[data-btn="koralle"] .alt .act a.btn.bank:hover{background:#EEA48A!important}
body[data-btn="koralle"] .c-form .btn,body[data-btn="koralle"] .nl-knopf,body[data-btn="koralle"] .nav .btn{background:#0E7C86!important;color:#fff!important;box-shadow:none!important}
body[data-btn="koralle"] .c-form .btn:hover,body[data-btn="koralle"] .nl-knopf:hover,body[data-btn="koralle"] .nav .btn:hover{background:#0A6A73!important}
@media(min-width:900px){body[data-btn="koralle"] .hero-cta a.btn.bank{background:#fff!important;box-shadow:inset 0 0 0 1.5px #F3B7A1!important;color:#15252B!important}}
body[data-btn="tinte"] a.btn.bank,body[data-btn="tinte"] .alt .act a.btn.bank{background:#1F3640!important;color:#fff!important;box-shadow:none!important}
body[data-btn="tinte"] a.btn.bank:hover,body[data-btn="tinte"] .alt .act a.btn.bank:hover{background:#15252B!important}
body[data-btn="tinte"] .c-form .btn,body[data-btn="tinte"] .nl-knopf,body[data-btn="tinte"] .nav .btn{background:#E3EFF1!important;color:#0F4C5C!important;box-shadow:none!important}
body[data-btn="tinte"] .c-form .btn:hover,body[data-btn="tinte"] .nl-knopf:hover,body[data-btn="tinte"] .nav .btn:hover{background:#D3E6E9!important}
@media(min-width:900px){body[data-btn="tinte"] .hero-cta a.btn.bank{background:#fff!important;box-shadow:inset 0 0 0 1.5px #1F3640!important;color:#15252B!important}}





@media(max-width:759px){}

/* FAQ ohne Sprung: Frage-Abstand bleibt gleich, Antwort rückt per Margin hoch */
.faq summary,.faq details[open] summary{padding:18px 0!important}
.faq .a{margin-top:0}.faq .a p{margin-top:-4px!important}
/* Fokusrahmen nur bei Tastatur */
.faq summary:focus,.faq summary:focus-visible{outline:none!important}
html.kbd .faq summary:focus-visible{outline:2px solid var(--petrol)!important;outline-offset:2px;border-radius:8px}

/* Quiz-Ergebnis: Buttons in Proportion */
.res .ra{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:22px}
.res .ra .btn{padding:13px 20px!important;font-size:15px!important;min-height:0}
.res .ra a.alt{all:unset;cursor:pointer;font:600 15px var(--body);color:var(--petrol);display:inline-flex;align-items:center;gap:6px}
.res .ra a.alt::after{content:"→"}
.res .ra a.alt:hover{text-decoration:underline;text-underline-offset:4px}
.res .ra a.alt:focus-visible{outline:2px solid var(--petrol);outline-offset:3px;border-radius:4px}
.res ul{margin:10px 0 0;padding-left:20px;display:grid;gap:8px}
.res li{line-height:1.5}
.again{display:inline-block;margin-top:16px;font-size:14px;color:var(--muted)}

/* Tarifkarten: gleiche Zeilen zum Vergleichen + Button je Tarif */
.plan{display:flex;flex-direction:column}
.plan .cond{min-height:2.9em}
.pr-list{margin:18px 0 0;padding:0;border-top:1px solid var(--line)}
.pr-row{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:15px}
.pr-row dt{color:var(--muted);margin:0}
.pr-row dd{margin:0;font-weight:600;color:var(--ink);text-align:right}
.pr-row.neg dd{color:#9A4F17}
.pr-row .ok{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--tint);color:var(--petrol);font-size:13px}
.pr-row .no{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#F8E6D6;color:#9A4F17;font-size:14px}
.pr-row .na{font-weight:400;color:var(--muted);font-size:14px}
.plan .good{margin:16px 0 20px;font-size:15px;line-height:1.5;color:var(--text)}
.plan .good b{display:block;font-size:13px;color:var(--petrol);margin-bottom:2px}
.plan>.btn{margin-top:auto;width:100%}
.plan>a.btn.alt2,.plan>a.btn.bank.alt2{background:#fff!important;box-shadow:inset 0 0 0 1.5px var(--line)!important;color:var(--ink)!important}
.plan>a.btn.alt2:hover,.plan>a.btn.bank.alt2:hover{box-shadow:inset 0 0 0 1.5px var(--petrol)!important;background:#fff!important}
.plans-note{margin-top:14px;font-size:14px;color:var(--muted)}

.again{display:inline-flex!important;align-items:center;gap:6px;text-decoration:none!important}
.again::before{content:"";width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M3 4v5h5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 12a9 9 0 1 0 3-6.7' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M3 4v5h5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}
.again:hover{color:var(--petrol)!important;text-decoration:underline!important;text-underline-offset:3px}

/* Quiz Feinschliff */
.again[hidden],.res[hidden]{display:none!important}
.quiz-wrap{align-items:center}
.bk-quiz .n{font-size:15px!important;font-weight:600!important;color:var(--petrol)!important;margin-bottom:8px}
.bk-quiz .qt{font-size:1.5rem!important;line-height:1.25}
.bk-quiz .help{font-size:16px!important;line-height:1.55;color:var(--text)!important;margin-top:12px!important;padding:12px 14px;background:rgba(255,255,255,.6);border-radius:12px}

.opts{margin-top:18px}
.opts label>span{height:54px;font-size:17px}
.quiz-intro p{font-size:17px!important}
.qbadge{font-size:15px!important}
.res .rh{font-size:1.5rem}
.res li{font-size:16.5px}
.again{font-size:15px!important}

/* Gut zu wissen als eigener Block (warmer Hinweis) */
.know-sec{padding:64px 0!important}
.know-sec{background:#FBF5EE!important}
@media(min-width:1100px){.content .know-sec{background:none!important;position:relative}.content .know-sec::before{content:"";position:absolute;top:0;bottom:0;left:-32px;right:-100vw;background:#FBF5EE;z-index:-1}}
.know-head{margin-bottom:28px}
.know-badge{display:inline-block;font-size:13.5px;font-weight:600;color:#9A4F17;background:#F6E3D0;padding:5px 12px;border-radius:999px;margin-bottom:12px}
.know-head h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.1rem)!important}
.know-sec .know{gap:20px}
.know-sec .k{background:#fff!important;border:1px solid #F0E4D6!important;border-radius:18px!important;padding:24px!important}
.know-sec .ki{background:#FBEBDD!important}

/* Quiz: feste Höhe, Ja/Nein immer an derselben Stelle */
.quiz-wrap{align-items:start!important}
.bk-quiz{display:flex;flex-direction:column}
.bk-quiz fieldset:not([hidden]){display:flex;flex-direction:column}
.bk-quiz fieldset .opts{padding-top:18px}
.opts input:focus+span{outline:none}
html.kbd .opts input:focus-visible+span{outline:2px solid var(--petrol);outline-offset:2px}
html:not(.kbd) .opts input:focus-visible+span{outline:none}

/* Übergang Konditionen → Gut zu wissen ruhiger */
#konditionen{padding-bottom:56px!important}
.know-sec{padding:56px 0 64px!important}
.spec .spec-row:last-child{border-bottom:0}

/* Gut zu wissen gehört zur Eröffnung: weißer Grund, warme Karten, direkt vor den Schritten */
.know-sec{background:#fff!important;padding:72px 0 24px!important}
@media(min-width:1100px){.content .know-sec::before{display:none}}
.know-sec .k{background:#FCF7F1!important;border-color:#F3E6D8!important}
.know-sec .ki{background:#fff!important}
#eroeffnung{padding-top:56px!important}
#konditionen{padding-bottom:72px!important}

/* Tarifnamen im Text als kleine Marke */
.tarif{display:inline-block;font:600 .86em/1.35 var(--body);color:var(--petrol);background:var(--tint);padding:0 .45em;border-radius:6px;letter-spacing:.01em;white-space:nowrap}
.faq details[open] summary .tarif,h2 .tarif{font-size:.8em}

/* Gut zu wissen als ein warmer Hinweis-Kasten am Ende der Konditionen */
.know-box{margin-top:48px;background:#FBF3EA;border:1px solid #F1E2D1;border-radius:22px;padding:30px 32px 32px}
.know-box .know-head{margin-bottom:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.know-box .know-badge{margin:0;order:2}
.know-box .know-head h2{font-size:1.4rem!important;margin:0}
.know-box .know{gap:0!important}
.know-box .k{background:none!important;border:0!important;border-radius:0!important;padding:0 24px!important;border-left:1px solid #EBD8C3!important}
.know-box .k:first-child{padding-left:0!important;border-left:0!important}
.know-box .ki{background:#fff!important;width:40px;height:40px;margin-bottom:12px}
#konditionen{padding-bottom:88px!important}
#eroeffnung{padding-top:88px!important}
@media(max-width:859px){.know-box{padding:22px}.know-box .k{padding:16px 0!important;border-left:0!important;border-top:1px solid #EBD8C3!important}.know-box .k:first-child{border-top:0!important;padding-top:0!important}}
/* Tarifnamen-Varianten (Vorschau) */
body[data-tarif="a"] .tarif{background:none;padding:0;border-radius:0;font-family:var(--head);font-weight:700;font-size:1em;color:var(--petrol);letter-spacing:-.005em}
body[data-tarif="b"] .tarif{background:none;padding:0;border-radius:0;font-weight:700;font-size:1em;color:var(--ink);text-decoration:underline;text-decoration-style:dotted;text-decoration-color:#0E7C86;text-decoration-thickness:2px;text-underline-offset:4px}
body[data-tarif="c"] .tarif{background:#fff;color:var(--petrol);box-shadow:inset 0 0 0 1.2px #9EC3CA;padding:0 .5em;border-radius:999px;font-size:.84em}
body[data-tarif="d"] .tarif{background:none;padding:0;color:var(--ink);font-weight:600;font-size:1em}
body[data-tarif="d"] .tarif::before{content:"";display:inline-block;width:.5em;height:.5em;border-radius:2px;background:#0E7C86;margin-right:.32em;vertical-align:.08em;transform:rotate(45deg)}
body[data-tarif="e"] .tarif{background:#0F4C5C;color:#fff;padding:.05em .5em;border-radius:5px;font:600 .74em/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:.12em}




@media(max-width:759px){}

/* Gut zu wissen als eigener Abschnitt, Hintergrund im Wechsel */
.know-sec2 .know-head{margin-bottom:28px;display:block}
.know-sec2 .know-badge{margin:0 0 12px}
.know-sec2 .know-head h2{font-size:clamp(1.8rem,1.3rem + 1.6vw,2.6rem)!important}
.know-sec2 .know{gap:20px!important}
.know-sec2 .k{background:#FBF5EE!important;border:1px solid #F1E3D3!important;border-radius:18px!important;padding:24px!important;border-left:1px solid #F1E3D3!important}
.know-sec2 .k:first-child{padding-left:24px!important}
.know-sec2 .ki{background:#fff!important}
#konditionen{padding-bottom:88px!important}#eroeffnung{padding-top:88px!important}
/* Karten auf Weiß brauchen Kontur */
#alternativen .alt{box-shadow:0 1px 2px rgba(15,30,36,.04),0 14px 30px -24px rgba(15,30,36,.3)}
.comments:not(.band) .c-form{background:var(--band)!important}
.comments:not(.band) .c-field input,.comments:not(.band) .c-field textarea{background:#fff!important;border:1px solid var(--line)!important}
.sec.band .faq summary::after{background-color:#fff!important}
.sec.band .steps li::before{box-shadow:0 0 0 6px var(--band)}
.nl-band{padding-top:0!important}
.fact span{white-space:nowrap}

/* Checkliste als farbiges Band */
.need-sec{background:#E6F0F1!important;padding:72px 0!important}
@media(min-width:1100px){.content .need-sec{background:none!important;position:relative}.content .need-sec::before{content:"";position:absolute;top:0;bottom:0;left:-32px;right:-100vw;background:#E6F0F1;z-index:-1}}
.need{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:48px;align-items:center}
.need-head h2{font-size:clamp(1.6rem,1.2rem + 1.2vw,2.2rem)!important;margin-bottom:12px}
.need-head p{color:var(--text);margin-bottom:24px}
.need-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.need-list li{display:flex;gap:14px;align-items:flex-start;background:#fff;border-radius:16px;padding:18px}
.need-list .ni{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#E6F0F1;color:var(--petrol)}
.need-list b{display:block;font:600 1.02rem/1.3 var(--head);color:var(--ink);margin-bottom:4px}
.need-list span:not(.ni){display:block;font-size:14.5px;line-height:1.45;color:var(--text)}
@media(max-width:899px){.need{grid-template-columns:1fr;gap:24px}.need-list{grid-template-columns:1fr}}
#eroeffnung{padding-top:88px!important}
.know-sec2{padding-bottom:88px!important}
#eroeffnung .steps li::before{box-shadow:0 0 0 6px #fff}
/* Etikett-Farben */
body[data-tarif="e1"] .tarif{background:#0E7C86;color:#fff;padding:.05em .5em;border-radius:5px;font:600 .74em/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:.12em}
body[data-tarif="e2"] .tarif{background:#D6E8EB;color:#0F4C5C;padding:.05em .5em;border-radius:5px;font:600 .74em/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:.12em}
body[data-tarif="e3"] .tarif{background:#F6E1CD;color:#8A4512;padding:.05em .5em;border-radius:5px;font:600 .74em/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:.12em}
body[data-tarif="e4"] .tarif{background:#fff;color:#0F4C5C;box-shadow:inset 0 0 0 1.3px #7FB0B9;padding:.05em .5em;border-radius:5px;font:600 .74em/1.4 var(--body);letter-spacing:.06em;text-transform:uppercase;vertical-align:.12em}
.fact .tarif{display:inline-block!important;margin:0 0 0 .15em!important;font-size:.72em}


/* Steckbrief noch kompakter */
.facts{padding:20px 22px 16px!important}
.facts-top{display:flex!important;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:12px!important}
.facts .label{display:none}
.facts .price{font-size:2.6rem!important}
.facts .cond{margin:0!important;text-align:right;max-width:none;font-size:13.5px!important;line-height:1.35}
.facts-grid{margin:0 0 14px!important}
.fact{padding:8px 0!important}
.fact span,.fact b{font-size:14.5px!important}
.fact .tarif{font-size:10.5px!important}
.facts>.btn{padding:12px!important;font-size:15px}
.facts .note{margin-top:8px!important;font-size:12.5px!important}

/* ===== Kopfzeile neu mit Dropdowns ===== */
.site-head{background:rgba(255,255,255,.96)!important;backdrop-filter:blur(10px)!important}
.hd{height:68px!important;gap:28px!important}
.nav{margin-left:auto}
.nv{list-style:none;display:flex;align-items:center;gap:4px;margin:0;padding:0}
.nv>li{position:relative}
.nl{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px;border:0;background:none;border-radius:10px;font:500 15.5px var(--body);color:#24343A;text-decoration:none;cursor:pointer}
.nl:hover,.dd.open .nl{background:var(--soft);color:var(--ink)}
.nl .chev{transition:transform .2s;color:var(--muted)}
.dd.open .chev{transform:rotate(180deg)}
.nv-cta{margin-left:10px}
.nv-cta .btn{padding:11px 18px!important}
.dd-panel{position:absolute;top:calc(100% + 10px);left:-12px;min-width:320px;background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:0 24px 60px -24px rgba(15,30,36,.35);padding:18px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s;z-index:40}
.dd-panel::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.dd.open .dd-panel{opacity:1;visibility:visible;transform:none}
.dd-wide{width:720px;left:-180px}
.dd-cols{display:grid;grid-template-columns:1.35fr 1fr;gap:22px}
.dd-h{font-size:12.5px;font-weight:600;color:var(--muted);margin:0 0 10px 8px}
.dd-tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:4px}
.dd-tiles a{display:flex;align-items:center;gap:12px;padding:10px;border-radius:12px;text-decoration:none;color:var(--ink)}
.dd-tiles a:hover,.dd-tiles a[aria-current]{background:var(--soft)}
.dd-tiles .lg{flex:none;display:grid;place-items:center;width:52px;height:36px;border-radius:9px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.dd-tiles img{max-width:40px;max-height:18px;width:auto;height:auto}
.dd-tiles b{display:block;font-weight:600;font-size:14.5px}
.dd-tiles small{display:block;font-size:12.5px;color:var(--muted);line-height:1.3}
.dd-more{border-left:1px solid var(--line);padding-left:20px}
.dd-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:2px 10px}
.dd-list a{display:block;padding:6px 8px;border-radius:8px;font-size:14px;color:var(--text);text-decoration:none}
.dd-list a:hover{background:var(--soft);color:var(--ink)}
.dd-all{display:inline-block;margin:12px 0 0 8px;font-weight:600;font-size:14px;color:var(--petrol);text-decoration:none}
.dd-all:hover{text-decoration:underline}
.dd-rat{list-style:none;margin:0;padding:0;display:grid;gap:2px;min-width:300px}
.dd-rat a{display:block;padding:10px 12px;border-radius:12px;text-decoration:none}
.dd-rat a:hover{background:var(--soft)}
.dd-rat b{display:block;font-weight:600;font-size:14.5px;color:var(--ink)}
.dd-rat small{display:block;font-size:13px;color:var(--muted)}
.mb-ic{display:inline-block;width:16px;height:2px;background:currentColor;position:relative;margin-right:8px;vertical-align:middle;box-shadow:0 -5px 0 currentColor,0 5px 0 currentColor}
@media(max-width:979px){
 .nav{position:absolute;top:68px;left:0;right:0;background:#fff;border-bottom:1px solid var(--line);max-height:calc(100vh - 68px);overflow:auto;display:none}
 .nav.open{display:block}
 .nv{flex-direction:column;align-items:stretch;padding:8px var(--g) 18px;gap:0}
 .nl{width:100%;justify-content:space-between;height:50px;padding:0 4px;border-radius:0;border-bottom:1px solid var(--line)}
 .nl:hover,.dd.open .nl{background:none}
 .dd-panel{position:static;opacity:1;visibility:visible;transform:none;display:none;box-shadow:none;border:0;padding:8px 0 12px;width:auto;min-width:0}
 .dd.open .dd-panel{display:block}
 .dd-cols{grid-template-columns:1fr}
 .dd-more{border:0;padding:0}
 .nv-cta{margin:14px 0 0}.nv-cta .btn{width:100%}
}

/* Dropdown-Korrekturen gegen alte .nav-Regeln */
.nav .dd-panel ul{display:grid!important;flex-direction:initial!important;align-items:initial!important;padding:0!important;gap:4px!important}
.nav .dd-tiles{grid-template-columns:1fr 1fr!important}
.nav .dd-list{grid-template-columns:1fr 1fr!important;gap:2px 10px!important}
.nav .dd-rat{grid-template-columns:1fr!important;gap:2px!important}
.nav .dd-panel a{border-bottom:0!important;font-weight:inherit}
.nav .dd-tiles a{display:flex!important;padding:10px!important}
.nav .dd-list a{padding:6px 8px!important}
.nav .dd-rat a{display:block!important;padding:10px 12px!important}
.nav a.nl{display:inline-flex!important;align-items:center;height:40px;padding:0 14px!important;border-bottom:0!important}
.nav .nv-cta .btn{color:#fff}
.dd-ratgeber,#dd-ratgeber{width:320px}
.menu-btn{display:none;align-items:center;white-space:nowrap}
@media(max-width:979px){.menu-btn{display:inline-flex!important}
 .nav .dd-tiles,.nav .dd-list{grid-template-columns:1fr!important}
 .nav a.nl{width:100%;height:50px;padding:0 4px!important;border-bottom:1px solid var(--line)!important}
}

/* Quiz: kein Leerraum unten, ruhigere Ja/Nein-Buttons */
.bk-quiz{display:flex;flex-direction:column}
.bk-quiz:has(.res:not([hidden])) .steps3{margin-bottom:auto!important}
.bk-quiz:has(.res:not([hidden])) .again{margin-bottom:auto!important}
.bk-quiz .res:not([hidden]){padding-top:16px}
.bk-quiz .again:not([hidden]){align-self:flex-start;margin-top:12px!important}
.quiz-wrap{padding:40px 44px!important;align-items:center!important}
.bk-quiz .help{margin-top:14px!important}
.bk-quiz fieldset .opts{padding-top:20px!important;gap:12px!important;grid-template-columns:1fr 1fr}
.opts label>span{justify-content:flex-start!important;gap:12px!important;height:56px!important;padding:0 18px!important;border-radius:14px!important;background:#fff!important;box-shadow:inset 0 0 0 1.5px #DCE6E8!important;font:600 16.5px var(--body)!important;color:var(--ink)!important;transition:box-shadow .15s,background .15s}
.opts label:hover>span{box-shadow:inset 0 0 0 1.5px var(--petrol)!important}
.opts input:checked+span{background:#EEF6F7!important;box-shadow:inset 0 0 0 2px var(--petrol)!important}
.opts .mk,.opts .x{width:28px!important;height:28px!important;border-radius:50%!important;font-size:13px!important;display:grid!important;place-items:center}
.opts .mk{background:#E3EFF1!important;color:var(--petrol)!important}
.opts .mk svg{width:14px!important;height:14px!important}
.opts .x{background:#FBEBDD!important;color:#9A4F17!important}
@media(max-width:899px){.quiz-wrap{padding:24px!important}}

/* Banken-Dropdown kompakt */
.dd-wide{width:540px!important;left:-140px!important;padding:14px!important}
.dd-cols{display:block!important}
.dd-h{font-size:12px!important;margin:4px 0 6px 8px!important}
.nav .dd-tiles{grid-template-columns:repeat(3,1fr)!important;gap:2px!important}
.nav .dd-tiles a{padding:7px 8px!important;gap:10px!important;border-radius:10px}
.dd-tiles .lg{width:36px!important;height:26px!important;border-radius:7px!important}
.dd-tiles img{max-width:28px!important;max-height:13px!important}
.dd-tiles .tx{font-size:14px;font-weight:600;color:var(--ink)}
.dd-more{border-left:0!important;padding:10px 0 0!important;margin-top:8px;border-top:1px solid var(--line)!important}
.nav .dd-list{grid-template-columns:repeat(3,1fr)!important;gap:0 4px!important}
.nav .dd-list a{padding:5px 8px!important;font-size:13.5px!important}
.dd-all{display:block!important;margin:8px 0 0!important;padding:10px 8px 2px;border-top:1px solid var(--line);font-size:13.5px!important}
.nav a.dd-all{color:var(--petrol)!important;font-weight:600!important;border-radius:0!important}

.res .rh{font-size:1.35rem!important;margin-bottom:6px!important}
.res ul{gap:4px!important;margin-top:6px!important}
.res li{font-size:15px!important;line-height:1.45!important}
.res .ra{margin-top:14px!important}
.bk-quiz .again:not([hidden]){margin-top:8px!important}

/* Banken nach Art gruppiert */
.dd-wide{width:600px!important;left:-160px!important;padding:16px 14px 12px!important}
.bcats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 12px}
.bcat+.bcat{border-left:1px solid var(--line);padding-left:12px}
.nav .bl{grid-template-columns:1fr!important;gap:0!important}
.nav .bl a{display:flex!important;align-items:center;gap:9px;padding:5px 6px!important;border-radius:8px;font-size:14px;color:var(--text);text-decoration:none}
.nav .bl a:hover,.nav .bl a[aria-current]{background:var(--soft);color:var(--ink)}
.nav .bl a[aria-current]{font-weight:600}
.bl .lg{flex:none;display:grid;place-items:center;width:28px;height:20px;border-radius:5px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.bl .lg img{max-width:22px;max-height:10px;width:auto;height:auto}
.bl .lg i{font-style:normal;font-size:10px;font-weight:700;color:var(--muted)}
@media(max-width:979px){.bcats{grid-template-columns:1fr}.bcat+.bcat{border:0;padding:0;margin-top:8px}}

/* Banken-Menü: nur Top 5 */
.dd-bank5{width:320px;left:-60px;padding:12px!important}
.nav .b5{grid-template-columns:1fr!important;gap:0!important}
.nav .b5 a{display:flex!important;align-items:center;gap:12px;padding:8px!important;border-radius:10px;text-decoration:none}
.nav .b5 a:hover,.nav .b5 a[aria-current]{background:var(--soft)}
.b5 .lg{flex:none;display:grid;place-items:center;width:44px;height:30px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.b5 .lg img{max-width:34px;max-height:14px;width:auto;height:auto}
.b5 .bn{display:block;font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.25}
.b5 .bn small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:1px}
@media(max-width:979px){.dd-bank5{width:auto}}

/* Ratgeber-Menü (19.10.2026): links Themenbereiche, rechts bis zu fünf Themen; Höhe fest nach dem längsten Bereich */
.nav .rg{grid-template-columns:1fr!important;gap:0!important}
.nav .rg a{display:flex!important;align-items:flex-start;gap:12px;padding:6px 10px!important;border-radius:10px;text-decoration:none}
.nav .rg a:hover,.nav .rg a[aria-current]{background:var(--soft)}
.rgd{flex:none;width:7px;height:7px;margin:7px 3px 0;border-radius:50%;background:#0E7C86;opacity:.55;box-shadow:0 0 0 4px #E6F0F1;transition:opacity .15s,transform .15s}
.nav .rg a:hover .rgd,.nav .rg a:focus-visible .rgd,.nav .rg a[aria-current] .rgd{opacity:1;transform:scale(1.25)}
.rg .rt{display:block;font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3}
.rg .rt small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);line-height:1.3}
.rgp-hm{display:none}
@media(min-width:980px){
 #dd-ratgeber.dd-rg{width:690px;left:50%;margin-left:-345px;padding:0!important;display:grid;grid-template-columns:254px 1fr}
 .rg-cats{display:flex;flex-direction:column;gap:2px;padding:12px 8px;background:#F4F7F7;border-right:1px solid #E5EAEC;border-radius:17px 0 0 17px}
 .rg-cats .dd-h,.rgp-h{margin:2px 0 6px 10px}
 .rgk{position:relative;display:flex;align-items:center;gap:10px;width:100%;padding:7px 26px 7px 8px;border:0;border-radius:10px;background:none;font:inherit;color:var(--ink);text-align:left;cursor:pointer}
 .rgk:hover{background:#EAF1F2}
 .rgk[aria-selected="true"]{background:#FFFFFF;box-shadow:0 1px 3px rgba(15,30,36,.08)}
 .rgk-i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#E6F0F1;color:#0F4C5C}
 .rgk[aria-selected="true"] .rgk-i{background:#0F4C5C;color:#FFFFFF}
 .rgk-t{display:block;min-width:0;font-weight:600;font-size:14.5px;line-height:1.3}
 .rgk-t small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);line-height:1.3}
 .rgk-a{position:absolute;right:8px;top:50%;margin-top:-7.5px;color:#0F4C5C;opacity:0;transition:opacity .15s}
 .rgk[aria-selected="true"] .rgk-a{opacity:1}
 .rg-panels{display:grid;padding:12px 10px}
 .rgp{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .15s}
 .dd.open .rgp.on{visibility:visible;opacity:1} /* nur im offenen Menü sichtbar, sonst fängt das unsichtbare Panel die Maus ab */
}
@media(max-width:979px){
 #dd-ratgeber.dd-rg{width:auto}
 .rg-cats,.rgp-hd{display:none}
 .rgp-hm{display:inline}
 .rgp+.rgp{margin-top:10px}
}

/* Gut zu wissen offen, ohne Kästen */
.know-sec2 .know{gap:0!important}
.know-sec2 .k{background:none!important;border:0!important;border-radius:0!important;padding:4px 32px!important;border-left:1px solid var(--line)!important}
.know-sec2 .k:first-child{padding-left:0!important;border-left:0!important}
.know-sec2 .ki{background:#FBEBDD!important;width:44px;height:44px;border-radius:12px;margin-bottom:16px}
.know-sec2 .k h4{font-size:1.1rem}
.know-sec2{padding:80px 0!important}
@media(max-width:859px){.know-sec2 .k{padding:18px 0!important;border-left:0!important;border-top:1px solid var(--line)!important}.know-sec2 .k:first-child{border-top:0!important;padding-top:0!important}}

/* Abstand Kommentare → Konto-Update */
.nl-band{padding:88px 0 96px!important}
.layout{padding-bottom:0}
@media(min-width:1100px){.side{margin-bottom:40px}}

/* Prämie mit Marker */
.fact-praemie span small{display:block;font-size:12px!important;color:var(--muted);white-space:normal}
.fact-praemie{align-items:center!important}
mark.pm{background:linear-gradient(transparent 12%,#F8D5B4 12%,#F8D5B4 88%,transparent 88%);color:var(--ink);padding:0 .3em;border-radius:3px;font-weight:700;font-size:16px}

.fact-praemie{align-items:flex-start!important}
.fact-praemie>span{padding-top:1px}
.fact-praemie .pv{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.fact-praemie .pv small{font-size:12.5px;color:var(--muted);line-height:1.35;white-space:nowrap}
.fact-praemie .pv small:first-of-type{margin-top:3px}

/* Steckbrief lesbarer */
.facts .cond{font-size:14.5px!important;color:#3B4A50!important;line-height:1.4}
.fact>span{color:#2B3A40!important;font-size:15.5px!important}
.fact b{font-size:15.5px!important;color:var(--ink)}
.fact-praemie .pv small{font-size:14px!important;color:#3B4A50!important;line-height:1.45}
mark.pm{font-size:17px!important}
.facts .note{font-size:13.5px!important;color:#56666C!important}
.fact{padding:10px 0!important}

/* Tarifnamen in den Karten wie die Etiketten im Text */
.plan h3{display:inline-block;background:#D6E8EB;color:#0F4C5C!important;font:700 13px/1.4 var(--body)!important;letter-spacing:.08em!important;text-transform:uppercase;padding:4px 10px;border-radius:6px;margin-bottom:18px!important}
.plan .tag{top:24px!important;right:24px!important;background:none!important;border:0!important;padding:0!important;font-size:13px!important;color:var(--petrol)!important;font-weight:600}
.plan .tag::before{content:"✓ "}
.plan h3{width:max-content!important;display:block!important}
.plan .tag{top:31px!important}

.fact-praemie{display:grid!important;grid-template-columns:auto 1fr;align-items:center!important;row-gap:2px}
.fact-praemie .pv{grid-column:2}
.fact-praemie .pc{grid-column:1/-1;text-align:right;font-size:13.5px;color:#3B4A50;white-space:nowrap}

/* Eine Bank-Schaltfläche im Kopf: Desktop nur in der Karte, Handy nur unter dem Text */
@media(min-width:900px){.hero-cta a.btn{display:none!important}.hero-cta .link{font-size:16px}}

/* Kommentare: offen, ohne Kasten */
.cgrid{grid-template-columns:1fr!important}
.c-demo{list-style:none;margin:20px 0 8px!important;padding:0}
.cm{padding:18px 0;border-top:1px solid var(--line)}
.c-demo>.cm:last-child{border-bottom:1px solid var(--line)}
.cm-h{display:flex;align-items:center;gap:10px;margin-bottom:6px;font-size:14.5px}
.cm-h b{color:var(--ink)}
.cm-h time{color:var(--muted);font-size:13.5px}
.av{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:#E6F0F1;color:var(--petrol);font-weight:700;font-size:14px;object-fit:cover}
.au{font-size:12px;font-weight:600;color:var(--petrol);background:#E6F0F1;padding:2px 8px;border-radius:999px}
.cm p{margin:0 0 0 42px;font-size:16px;color:var(--text)}
.cm-re{list-style:none;margin:14px 0 0 42px;padding:0 0 0 18px;border-left:2px solid #CFE0E3}
.cm-re .cm{border-top:0;padding:4px 0}
.c-form{background:none!important;box-shadow:none!important;border:0!important;padding:28px 0 0!important;border-radius:0!important}
.c-field input,.c-field textarea,.comments .c-form .c-field input,.comments .c-form .c-field textarea{background:#fff!important;border:1px solid #D5DEE1!important}

/* Kommentar-Liste (gleiches Markup wie main.js) */
.c-list{list-style:none;margin:24px 0 8px!important;padding:0}
.c-list>li{padding:20px 0;border-top:1px solid #D5DEE1}
.c-list>li:last-child{border-bottom:1px solid #D5DEE1}
.c-meta{display:flex;align-items:center;gap:10px;margin:0 0 6px;font-size:14.5px}
.c-meta strong{color:var(--ink)}
.c-meta time{color:var(--muted);font-size:13.5px}
.c-badge{font-size:12px;font-weight:600;color:var(--petrol);background:#fff;box-shadow:inset 0 0 0 1px #CFE0E3;padding:2px 8px;border-radius:999px}
.c-text{margin-left:42px}.c-text p{margin:0;font-size:16px;color:var(--text)}
.c-author{margin:14px 0 0 42px;padding-left:18px;border-left:2px solid #CFE0E3}

/* Sprunglinks im Kopf */
.jumps{display:flex;flex-wrap:wrap;gap:10px}
.jump{display:inline-flex;align-items:center;gap:8px;padding:9px 14px 9px 10px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px #D5E3E6;color:var(--petrol);font-weight:600;font-size:15px;text-decoration:none;transition:background .15s,box-shadow .15s}
.jump svg{flex:none;width:22px;height:22px;padding:4px;border-radius:50%;background:#E3EFF1;transition:transform .2s}
.jump:hover{background:#fff;box-shadow:inset 0 0 0 1px var(--petrol)}
.jump:hover svg{transform:translateY(2px)}
#check{scroll-margin-top:110px}

/* Zähler + Sortierung */
.c-bar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:28px}
.c-count{margin:0;font-weight:600;color:var(--ink);font-size:15px}
.c-count span{font-weight:400;color:var(--muted)}
.c-sort{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--muted)}
.c-sort select{font:500 14px var(--body);color:var(--ink);background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%230E7C86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 10px center/12px no-repeat;border:1px solid #D5DEE1;border-radius:10px;padding:8px 32px 8px 12px;appearance:none;-webkit-appearance:none;cursor:pointer}
.c-sort select:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.c-bar+.c-list,.c-bar+*+.c-list{margin-top:14px!important}

/* Sprunglinks deutlicher */
.jump{background:#fff!important;box-shadow:0 1px 2px rgba(15,30,36,.06),inset 0 0 0 1.5px #9EC3CA!important;padding:10px 16px 10px 10px!important}
.jump svg{background:var(--petrol)!important;color:#fff;width:24px!important;height:24px!important}
.jump:hover{box-shadow:inset 0 0 0 1.5px var(--petrol)!important}

/* Fußzeile etwas dunkler, bleibt hell */
.site-foot{background:#E4ECEE!important}
.foot-bottom{border-top-color:#CFDADD!important}
.site-foot p,.foot-bottom{color:#4E5E64!important}

/* Sortier-Dropdown im Seitenstil */
.srt{position:relative}
.srt-btn{display:inline-flex;align-items:center;gap:10px;font:500 14px var(--body);color:var(--ink);background:#fff;border:1px solid #D5DEE1;border-radius:10px;padding:8px 12px;cursor:pointer}
.srt-btn svg{color:var(--petrol);transition:transform .2s}
.srt-btn[aria-expanded="true"]{border-color:var(--petrol)}
.srt-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.srt-btn:focus-visible{outline:2px solid var(--petrol);outline-offset:2px}
.srt-list{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:200px;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 40px -20px rgba(15,30,36,.35);outline:none}
.srt-list li{display:flex;align-items:center;gap:8px;padding:8px 10px 8px 30px;border-radius:8px;font-size:14px;color:var(--text);cursor:pointer;position:relative}
.srt-list li.act{background:var(--soft);color:var(--ink)}
.srt-list li[aria-selected="true"]{color:var(--petrol);font-weight:600}
.srt-list li[aria-selected="true"]::before{content:"";position:absolute;left:10px;width:14px;height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.6' fill='none' stroke='%230E7C86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat}

/* Fußzeile: Text dunkler für den neuen Grund */
.site-foot a{color:#1F2E34!important}
.site-foot a:hover{color:var(--petrol)!important}
.site-foot p,.foot-bottom{color:#3B4A50!important}
.site-foot h2{color:#0F1E24!important}

/* Prämie als klarer Hinweis im Steckbrief */
.praemie-box{display:flex;gap:12px;align-items:flex-start;margin:4px 0 6px;padding:12px 14px;background:#FCEBDD;border-radius:12px}
.pb-ic{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:10px;background:#fff;color:#A65A1C}
.pb-t{margin:0;font-size:15.5px;color:var(--ink);line-height:1.35}
.pb-t b{font-weight:700}
.pb-d{margin:3px 0 0;font-size:14px;color:#4A3A2C;line-height:1.45}

/* Alternativen: einheitliche Logos, klare Hierarchie */
.alt .logo{height:36px!important;display:flex;align-items:center;margin-bottom:18px}
.alt .logo img{height:auto!important;width:auto!important;max-height:30px;max-width:120px}
.alt .c{font-size:15.5px!important;color:var(--text)!important;margin:8px 0 18px}
.alt .diff{font-size:14.5px!important;line-height:1.5;color:#3B4A50!important}
.alt .diff b{font-size:12.5px}
#alternativen .sec-head{align-items:baseline}

/* Steckbrief schmaler */
@media(min-width:900px){.hero-grid{grid-template-columns:minmax(0,1fr) 420px!important;gap:64px!important}.facts{justify-self:end;width:100%}}
.facts-top{display:block!important}.facts .cond{text-align:left!important;margin-top:6px!important}

/* Sprunglinks in Button-Form wie die Hauptschaltfläche (Nebenform) */
.jump{border-radius:12px!important;padding:0 18px 0 14px!important;height:48px;gap:8px!important;background:#fff!important;box-shadow:inset 0 0 0 1.5px #0E7C86!important;font:600 15.5px var(--body)!important;color:var(--petrol)!important}
.jump svg{background:none!important;color:var(--petrol)!important;width:18px!important;height:18px!important;padding:0!important}
.jump:hover{background:#F2F8F9!important}
.ast{font-size:.8em;line-height:1;align-self:flex-start;margin:2px 0 0 -5px}

/* Handy: Überlauf beheben */
@media(max-width:859px){
 .nl-band .nl-box,.nl-box{grid-template-columns:minmax(0,1fr)!important;padding:24px 20px!important;gap:20px!important}
 .nl-feld{flex-direction:column;align-items:stretch}.nl-knopf{justify-content:center}
 .foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;gap:28px 20px!important}
 .foot-grid>div:first-child{grid-column:1/-1}
 .foot-bottom{flex-direction:column}
}
html,body{overflow-x:clip}

/* Feinschliff Gesamtprüfung */
@media(max-width:1099px){.layout.wrap{padding:0!important;max-width:none!important}}
.side-cta .btn{font-size:13.5px!important;padding:11px 6px!important;gap:5px!important}
.foot-bottom{gap:6px 24px!important}
@media(min-width:860px){.foot-bottom{flex-wrap:nowrap!important;align-items:baseline}.foot-bottom span:last-child{white-space:nowrap}}

/* Ergänzungen für den Generator */
.c-empty{margin:16px 0 0;font-size:15px;color:var(--muted)}
.c-list:empty{display:none}
.know-prose{max-width:46em;color:var(--text)}
.steps li>p:only-child{margin-top:0}
.ki svg,.vs-ki svg{width:22px;height:22px}
.c-bar:has(+ .c-list:empty){display:none}
.know-prose p+p{margin-top:12px}
/* Weiße Seite: Abschnitte durch feine Linien getrennt; nur die Kommentare behalten den grauen Streifen (15.10.2026) */
.sec.band:not(.comments){background:none!important}
.content .sec.band:not(.comments)::before{display:none!important}
.layout::before{display:none!important}
.sec.band:not(.comments) .faq summary::after{background-color:var(--soft)!important}
.sec.band:not(.comments) .ki{background:#FBEBDD}
.sec.band:not(.comments) .steps li::before{box-shadow:0 0 0 6px #fff}
.content>.sec+.sec{border-top:1px solid var(--line)!important}
.content>.sec+.comments,.content>.comments+.sec{border-top:0!important}
.need-sec{background:none!important;padding:88px 0!important}
.content .need-sec::before{display:none!important}
.need-list li{background:var(--soft)}
.need-list .ni{background:#fff}
@media(max-width:759px){.need-sec{padding:64px 0!important}}
@media(min-width:1100px){
 .content .comments.band::before{left:-100vw!important;right:-100vw!important;border-radius:0!important}
 .side{background:none!important;box-shadow:none!important;border-radius:0!important;padding:0!important}
 .side-cta .btn{width:100%}
}
@media(max-width:1099px){.content>.sec+.sec{border-top:0!important}.content>.sec+.sec:not(.comments)>.wrap{position:relative}.content>.sec+.sec:not(.comments)>.wrap::before{content:"";position:absolute;left:var(--g);right:var(--g);top:-64px;border-top:1px solid var(--line)}}

/* ---------- Kopf: Suche und Hell/Dunkel (15.10.2026) ---------- */
.hd-tools{display:flex;align-items:center;gap:2px}
.ib{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:0;border-radius:10px;background:none;color:var(--text);cursor:pointer;padding:0}
.ib:hover{background:var(--soft);color:var(--ink)}
.ib svg{width:20px;height:20px}
.ib .i-sun{display:none}
html[data-theme="dark"] .ib .i-sun{display:block}
html[data-theme="dark"] .ib .i-moon{display:none}
.nv-tools{display:flex;align-items:center;gap:2px;margin-left:6px}
.hd-tools-m{display:none}
@media(max-width:979px){.nv-tools{display:none!important}.hd-tools-m{display:flex;margin-left:auto}.hd-tools-m+.menu-btn{margin-left:4px}}
.ib kbd{display:none}

/* ---------- Suche ---------- */
.srch{position:fixed;inset:0;z-index:100;background:rgba(15,30,36,.38);display:flex;align-items:flex-start;justify-content:center;padding:10vh 16px 16px}
.srch[hidden]{display:none}
.srch-box{width:100%;max-width:640px;background:#fff;border-radius:18px;box-shadow:0 30px 80px -20px rgba(15,30,36,.45);overflow:hidden;display:flex;flex-direction:column;max-height:76vh}
.srch-in{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line)}
.srch-in svg{width:20px;height:20px;color:var(--muted);flex:none}
.srch-in input{flex:1;border:0;outline:0;background:none;font:500 17px/1.3 var(--body);color:var(--ink);min-width:0}
.srch-in input::placeholder{color:var(--muted)}
.srch-x{border:0;background:var(--soft);color:var(--muted);font:600 12px var(--body);padding:6px 9px;border-radius:8px;cursor:pointer}
.srch-res{list-style:none;margin:0;padding:8px;overflow:auto}
.srch-h{font-size:12.5px;font-weight:600;color:var(--muted);margin:10px 10px 6px}
.srch-res a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;text-decoration:none;color:var(--ink)}
.srch-res a[aria-selected="true"],.srch-res a:hover{background:var(--soft)}
.srch-res .t{font-weight:600;font-size:15.5px;line-height:1.3}
.srch-res .d{display:block;font-size:13.5px;color:var(--muted);font-weight:400;margin-top:2px;line-height:1.4}
.srch-res .k{margin-left:auto;flex:none;font-size:11.5px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:#0F4C5C;background:#E6F0F1;border-radius:6px;padding:3px 7px}
.srch-res mark{background:#FCEBDD;color:inherit;border-radius:3px;padding:0 1px}
.srch-empty{padding:22px 14px;color:var(--muted);font-size:15px}
.srch-foot{border-top:1px solid var(--line);padding:10px 18px;font-size:12.5px;color:var(--muted);display:flex;gap:16px}
.srch-foot kbd{font:600 11.5px var(--body);background:var(--soft);border-radius:5px;padding:2px 6px;margin-right:4px}
@media(max-width:600px){.srch{padding:0}.srch-box{max-width:none;max-height:100vh;height:100%;border-radius:0}.srch-foot{display:none}}
body.srch-open{overflow:hidden}
.srch-in input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
@media(max-width:479px){.menu-btn .mb-t{display:none}.menu-btn .mb-ic{margin-right:0}.menu-btn{padding:10px 12px}.hd{gap:12px!important}}
@media(max-width:479px){.site-head .brand{font-size:1rem;gap:8px;min-width:0}.site-head .brand img{height:25px;width:auto}.hd-tools-m .ib{width:36px}.hd-tools-m{gap:0}}
@media(max-width:359px){.site-head .brand img{width:28px;object-fit:cover;object-position:left center}}

/* Modell-Karten: Bedingungsliste und „Für alle drei Modelle“ (15.10.2026) */
.plan .kw{margin:16px 0 20px}
.plan .kw p{font-size:13px;font-weight:600;color:var(--petrol);margin-bottom:8px}
.plan .kw ul{margin:0;padding:0;border:0;gap:7px;font-size:14.5px!important;color:var(--text)}
.plan .kw li::before{width:16px;height:16px;background-size:11px}
.plans-all{margin-top:20px;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 24px}
.pa-h{font-size:13px;font-weight:600;color:var(--muted);margin-bottom:12px}
.plans-all dl{margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px 24px}
.plans-all dt{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--muted);margin-bottom:4px}
.pa-i{display:inline-flex;color:var(--petrol)}.pa-i svg{width:18px;height:18px}
.plans-all dd{margin:0;font-size:15px;color:var(--ink);line-height:1.4}
@media(max-width:859px){.plans-all dl{grid-template-columns:1fr 1fr}}
@media(max-width:479px){.plans-all dl{grid-template-columns:1fr}}
body[data-btn] .plan>a.btn.bank.alt2{background:#fff!important;box-shadow:inset 0 0 0 1.5px var(--line)!important;color:var(--ink)!important}
body[data-btn] .plan>a.btn.bank.alt2:hover{box-shadow:inset 0 0 0 1.5px var(--petrol)!important}
@media(max-width:699px){.alt .act{flex-direction:column;align-items:stretch;gap:12px}.alt .act .btn{width:100%}.alt .act .link{text-align:center}}
/* Sprungziele: Überschrift landet knapp unter dem Kopf, nicht 90px tiefer (15.10.2026) */
section[id]{scroll-margin-top:62px}
@media(min-width:1100px){section[id]{scroll-margin-top:4px}}
@media(max-width:759px){section[id]{scroll-margin-top:84px}}
@media(max-width:1099px){#check{scroll-margin-top:136px}}
/* Modell-Karten kompakter (15.10.2026) */
.plan{padding:22px 22px 20px!important}
.plan h3{margin-bottom:12px!important}
.plan .tag{top:22px!important;right:22px!important}
.plan .pr{font-size:2.35rem!important}
.plan .pr small{font-size:13.5px}
.plan .cond{min-height:2.7em!important;margin-top:6px;font-size:13.5px!important}
.pr-list{margin-top:12px!important}
.pr-list .pr-row{padding:9px 0!important;font-size:14.5px}
.pr-list .pr-row dt{color:var(--muted)}
.pr-list .pr-row dd{text-align:right}
.plan .kw{margin:12px 0 16px}
.plan .kw ul{gap:5px!important;font-size:14px!important;line-height:1.4}
.plan .good{margin:12px 0 16px!important;font-size:14.5px!important;line-height:1.45}
.plan>.btn{padding-top:12px!important;padding-bottom:12px!important}
.plans{gap:16px!important}
@media(max-width:859px){.plan .cond{min-height:0!important}}
/* Alternativen-Karten mit leichtem Hintergrund, damit sie sich vom Weiß abheben (15.10.2026) */
article.alt{background:var(--soft)!important;border-color:transparent!important;box-shadow:none!important}
article.alt:hover{box-shadow:0 14px 30px -24px rgba(15,30,36,.35)!important}
article.alt .diff{background:#fff;border-radius:10px;padding:10px 12px!important}
/* Alternativen: Eckdaten statt „Anders als …“ (15.10.2026) */
.alt .kp{list-style:none;margin:4px 0 20px;padding:14px 0 0;border-top:1px solid var(--line);display:grid;gap:8px;font-size:14.5px;line-height:1.4;color:var(--ink)}
.alt .kp li{display:flex;gap:9px}
.alt .kp li::before{content:"";flex:none;width:17px;height:17px;margin-top:1px;border-radius:50%;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%230E7C86' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat}
.alt .c{margin-bottom:12px}
/* Lesbarkeit: kleinste Schriften angehoben (15.10.2026) */
body[data-tarif="e2"] .tarif{font-size:max(12px,.74em)}
.mbar small{font-size:13px}
.c-field small,.c-note{font-size:13.5px!important}
.fact .tarif{font-size:12px!important}
/* Kommentare als Box wie der Kurz-Check, kein grauer Streifen mehr (15.10.2026) */
.sec.comments.band{background:none!important}
.content .comments.band::before{display:none!important}
.content>.sec+.comments{border-top:1px solid var(--line)!important}
.comments .cgrid{background:#EEF5F6;border-radius:var(--r-lg);padding:40px 44px!important}
.comments .c-field input,.comments .c-field textarea{background:#fff!important;border:1px solid var(--line)!important}
@media(max-width:759px){.comments .cgrid{padding:24px 20px!important;margin:0 var(--g)}.content>.sec.comments>.wrap::before{display:none}}
@media(max-width:1099px){.content>.sec+.comments{border-top:1px solid var(--line)!important}}
/* Fokusrahmen an Knöpfen und Links nur bei Tastaturbedienung, nicht nach einem Klick (15.10.2026) */
html:not(.kbd) .btn:focus-visible,html:not(.kbd) button:focus-visible,html:not(.kbd) a:focus-visible,html:not(.kbd) summary:focus-visible{outline:none!important}
html:not(.kbd) .btn:focus,html:not(.kbd) button:focus{outline:none!important}
/* Vor der Kommentar-Box keine Trennlinie, die Box trennt selbst (15.10.2026) */
.content>.sec+.comments,.content>.sec.comments{border-top:0!important}
.content>.sec.comments{padding-top:0!important}
/* Modell-Karten: weiß, feiner Rahmen und deutlicher Schatten; Aktiv mit Petrol-Rahmen (15.10.2026) */
.plan,.plan.top{background:#fff!important}
.plan{border:1px solid var(--line)!important;box-shadow:0 2px 4px rgba(15,30,36,.04),0 18px 40px -22px rgba(15,30,36,.28)!important}
.plan.top{border:1.5px solid var(--petrol)!important;box-shadow:0 2px 4px rgba(15,30,36,.05),0 22px 44px -22px rgba(15,76,92,.4)!important}
.plans-all{background:#fff!important;border:1px solid var(--line)!important;box-shadow:0 2px 4px rgba(15,30,36,.04),0 18px 40px -26px rgba(15,30,36,.25)!important}
/* „Für alle drei Modelle“ als leichte Zeile mit Chips statt Kasten (15.10.2026) */
.pa2{margin-top:28px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px}
.pa2-h{font-size:14px;font-weight:600;color:var(--muted);margin-right:4px}
.pa2 ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.pa2 li{display:flex;align-items:center;gap:8px;background:var(--soft);border-radius:999px;padding:8px 16px 8px 12px;font-size:14.5px;color:var(--text);line-height:1.3}
.pa2 li b{color:var(--ink);font-weight:600}
.pa2 .pa-i{display:inline-flex;color:var(--petrol)}.pa2 .pa-i svg{width:18px;height:18px}
.pa2+.plans-note{margin-top:14px}
@media(max-width:600px){.pa2{flex-direction:column;align-items:flex-start}.pa2 li{border-radius:12px}}
/* Bankseiten ohne Gemeinschaftskonto (15.10.2026) */
.st-chip{display:inline-flex;align-items:center;gap:8px;background:#FCE6D2;color:#7A3A0B;box-shadow:inset 0 0 0 1px #EBB98C;font-size:13.5px;font-weight:600;border-radius:6px;padding:7px 12px 7px 8px;margin-bottom:20px}
.st-chip span{display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#CC6E1F;color:#fff;font-size:12px;font-weight:700;line-height:1}
.facts-none .label{font-size:13.5px;color:var(--muted);margin-bottom:4px}
.none-st{font:600 1.45rem/1.2 var(--head);color:var(--ink);letter-spacing:-.01em;padding-bottom:18px;border-bottom:1px solid var(--line)}
.none-h{font-size:13.5px;font-weight:600;color:var(--muted);margin:18px 0 8px}
.mini{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:4px}
.mini a{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;text-decoration:none;color:var(--ink)}
.mini a:hover{background:var(--soft)}
.mini .lg{display:grid;place-items:center;width:52px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff;flex:none}
.mini .lg img{max-width:40px;max-height:20px}
.mini .bn{display:flex;flex-direction:column;font-weight:600;font-size:15px;line-height:1.25}
.mini .bn small{font-weight:400;font-size:13.5px;color:var(--muted)}
.mini .go{margin-left:auto;color:var(--petrol)}
.facts-none .btn{width:100%}
.plan .pr small,.alt .p small,.facts .price small,.side-cta .sp small{margin-left:0!important}

/* Banklogo klein oben rechts in der Faktenkarte, auf Höhe des Preises (15.10.2026) */
.facts{position:relative}
.facts-logo{position:absolute;top:24px;right:24px;display:flex;align-items:center;justify-content:flex-end;height:30px;pointer-events:none}
.facts-logo img{height:26px;width:auto;max-width:150px;object-fit:contain;object-position:right center}
.facts-logo+.facts-top .price{padding-right:160px}
.facts-logo+.facts-top .cond{text-align:left!important;flex-basis:100%;margin-top:10px!important;line-height:1.4}
.facts-logo+.facts-top{padding-bottom:16px!important}
.facts .price{font-size:2.15rem!important}
@media(max-width:899px){.facts-logo{top:22px;right:22px}}

/* H1: Umbruch per CSS statt Block-Span, damit Dreifachklick und Kopieren die ganze Überschrift erfassen (15.10.2026) */
.hero h1 span{display:inline}
/* 21.10.2026: kein Zwangsumbruch mehr, der farbige Teil läuft in der Zeile weiter */
.facts-top+.praemie-box{margin-top:16px!important}
/* Tarifname unter „Konditionen im Detail“ (15.10.2026) */
.prod-tag{display:flex;align-items:center;gap:10px;margin:14px 0 0;font-size:14px;color:var(--muted)}
.prod-tag b{display:inline-block;font:600 13.5px/1 var(--body);letter-spacing:.01em;color:#0F4C5C;background:#D6E8EB;padding:7px 11px;border-radius:6px}

/* Feinschliff 15.10.2026: Tarif-Zeile und Quelle auf einer Linie */
@media(min-width:900px){#konditionen .sec-head:has(.prod-tag){align-items:center}#konditionen .sec-head:has(.prod-tag) .src{margin:0;align-self:flex-end;line-height:28px}#konditionen .prod-tag{line-height:28px}}

/* Quadratisches Logo (Consorsbank, Sprechblase): höher, damit die Schrift lesbar bleibt (18.10.2026) */
.facts-logo img[src*="consorsbank"]{height:46px;margin-top:-6px}
.side-cta img[src*="consorsbank"]{height:40px!important;width:auto}

/* Ratgeberseiten im Bankseiten-Design (18.10.2026) */
.art-prose{max-width:none}
.art-prose p{max-width:46em}
.art-prose p+p,.art-prose p+ul,.art-prose ul+p,.art-prose ol+p,.art-prose p+ol{margin-top:14px}
.art-prose ul{margin:12px 0 0;padding-left:1.2em;max-width:46em}
.art-prose ul li{margin:6px 0}
.art-prose ul li::marker{color:var(--apricot)}
.art-prose ol.steps{list-style:none;counter-reset:st;margin:14px 0 0;padding:0;max-width:46em}
.art-prose ol.steps li{counter-increment:st;position:relative;padding:0 0 16px 48px;min-height:34px}
.art-prose ol.steps li::before{content:counter(st);position:absolute;left:0;top:-3px;width:32px;height:32px;border-radius:50%;background:var(--tint);color:var(--petrol);font:600 14px/32px var(--body);text-align:center}
.art-prose .table-wrap{overflow-x:auto;margin:6px 0 4px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.art-prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.art-prose th{text-align:left;font-weight:600;color:var(--ink);background:var(--soft);padding:12px 16px;font-size:13.5px}
.art-prose td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
.art-prose td:first-child{font-weight:600;color:var(--ink)}
.art-prose .btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.art-prose .btn-row>span{display:inline-flex;flex-direction:column;gap:4px}
.art-prose .textlinks{list-style:none;padding:0;margin:16px 0 0}
.art-prose .textlinks a{font-weight:600;text-decoration:none}
.art-prose .textlinks a::after{content:" →"}
.art-prose .picks,.know-prose .picks{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:16px;margin-top:8px}
.art-prose .proto.pick,.know-prose .proto.pick{background:var(--soft);border-radius:var(--r-lg);padding:24px;display:flex;flex-direction:column;gap:8px}
.art-prose .proto.pick .proto-title,.know-prose .proto.pick .proto-title{font-size:1.2rem}
.art-prose .proto.pick p,.know-prose .proto.pick p{max-width:none;margin:0;font-size:15.5px}
.art-prose .proto.pick .btn-row,.know-prose .proto.pick .btn-row{margin-top:auto;padding-top:10px}
.art-prose .pick-for,.know-prose .pick-for{font-size:13px!important;font-weight:600;color:var(--petrol);text-transform:none}
.hero-art .hero-grid>*{min-width:0}
.hero-art h1{overflow-wrap:anywhere}
.hero-art .hero-cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.art-prose ol.steps{display:block!important;grid-template-columns:none!important}
.art-prose ol.steps li{display:block!important;width:auto!important;border:0!important;padding-top:0!important;margin:0!important}
.art-prose ol.steps li::after{display:none!important}

/* Vergleichsseite im Bankseiten-Design (18.10.2026) */
.vg-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;margin-bottom:18px}
.vg-chips{display:flex;flex-wrap:wrap;gap:8px}
.vg-chip{font:500 14px/1 var(--body);color:var(--petrol);background:#fff;border:1px solid #CFE0E3;border-radius:999px;padding:9px 14px;cursor:pointer}
.vg-chip:hover{border-color:var(--petrol)}
.vg-chip[aria-pressed="true"]{background:var(--petrol);border-color:var(--petrol);color:#fff}
.vg-meta{display:flex;gap:14px;align-items:center;font-size:14px;color:var(--muted)}
.vg-reset{font:600 14px var(--body);color:var(--petrol);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.vg-list{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff}
.vg-row{display:grid;grid-template-columns:40px minmax(180px,1.3fr) minmax(150px,1fr) minmax(210px,1.2fr) 180px;gap:18px;align-items:center;padding:20px 22px;border-top:1px solid var(--line)}
.vg-row:first-child{border-top:0}
.vg-row[hidden]{display:none}
.vg-top{background:var(--tint)}
.vg-rank{width:30px;height:30px;border-radius:50%;background:var(--soft2);color:var(--ink);font:600 14px/30px var(--body);text-align:center}
.vg-top .vg-rank{background:var(--petrol);color:#fff}
.vg-logo{display:inline-flex;align-items:center;width:148px;height:44px}
.art-prose a.vg-logo{text-decoration:none}
.art-prose td>a.vg-logo{display:flex}
.art-prose td>a.vg-logo+br{display:none}
.art-prose td>a.vg-logo+br+span{display:flex;flex-direction:column;align-items:center;gap:4px;width:148px;margin-top:8px}
.art-prose td>a.vg-logo+br+span>.btn{box-sizing:border-box;width:148px}
.vg-logo-frame{display:inline-flex;flex:0 0 148px;align-items:center;justify-content:center;width:148px;height:44px;box-sizing:border-box;padding:8px 10px;background:#fff;border-radius:6px}
.vg-logo-frame .logo-ico{width:128px;max-width:128px;gap:6px}
.vg-logo-frame .logo-ico img{width:24px;max-width:24px;height:28px}
.vg-logo-frame .logo-name{font:600 13px/1.1 var(--body);color:#15252B;white-space:normal}
.vg-logo img{height:28px;width:128px;max-width:128px;object-fit:contain;object-position:center}
.vg-logo img[src*="consorsbank"]{height:28px}
.vg-tag{display:inline-block;margin:6px 0 0 0;font:600 12px/1 var(--body);color:#8A4512;background:var(--apricot-soft);border-radius:6px;padding:5px 8px}
.vg-note{font-size:14px;color:var(--muted);margin-top:6px!important;line-height:1.45}
.vg-p{font:600 1.5rem/1.1 var(--head);color:var(--ink)}
.vg-p small{font:400 13px var(--body);color:var(--muted);margin-left:4px}
.vg-c{font-size:13.5px;color:var(--muted);margin-top:4px!important;line-height:1.4}
.vg-crit{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.vg-crit li,.vg-rows li{display:flex;align-items:flex-start;gap:8px;font-size:14px}
.vg-crit .k{color:var(--text)}
.vg-crit .v{margin-left:auto;font-weight:600;color:var(--ink)}
.vg-crit li.no .v{color:#8A4512}
.vg-crit li.info .v{color:var(--muted);font-weight:500}
.vg-act{display:flex;flex-direction:column;align-items:stretch;gap:8px;text-align:center}
.vg-act .link{font-size:14px;font-weight:600}
.vg-empty{margin-top:16px;padding:18px;border-radius:var(--r);background:var(--soft);color:var(--text)}
.vg-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.vg-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;background:#fff;display:flex;flex-direction:column}
.vg-card[hidden]{display:none}
.vg-card-h{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.vg-card-h img{height:28px;width:128px;max-width:128px;object-fit:contain;object-position:center}
.vg-card-h img[src*="consorsbank"]{height:28px}
.vg-stamp{font-size:12.5px;color:var(--muted);white-space:nowrap}
.vg-rows{list-style:none;margin:6px 0 0;padding:0}
.vg-rows li{padding:10px 0;border-bottom:1px solid var(--line)}
.vg-rows .k{flex:0 0 42%;color:var(--muted)}
.vg-rows .v{color:var(--ink)}
.vg-good{margin-top:14px!important;font-size:14px;background:var(--apricot-soft);color:#5A3210;border-radius:var(--r-sm);padding:10px 12px}
.vg-card-f{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin-top:auto;padding-top:16px}
.vg-card-f .link{font-size:14px;font-weight:600}
.vg-src{font-size:12.5px;color:var(--muted);width:100%}
.mk{flex:none}
@media(max-width:1099px){.vg-row{grid-template-columns:36px 1fr 1fr;grid-template-areas:"r b p" "r c a"}.vg-rank{grid-area:r;align-self:start}.vg-bank{grid-area:b}.vg-price{grid-area:p}.vg-crit{grid-area:c}.vg-act{grid-area:a;align-self:end}}
@media(max-width:699px){.vg-row{grid-template-columns:32px 1fr;grid-template-areas:"r b" "r p" "r c" "r a";gap:12px}.vg-cards{grid-template-columns:1fr}}
.vg-row{grid-template-columns:36px minmax(170px,1.15fr) minmax(140px,1fr) minmax(170px,.95fr) 210px;gap:16px}
.vg-crit .v{white-space:nowrap}
.vg-act .btn{white-space:nowrap;justify-content:center}
@media(max-width:1099px){.vg-row{grid-template-columns:36px 1fr 1fr}}
@media(max-width:699px){.vg-row{grid-template-columns:32px 1fr}}
.vg-act .btn{white-space:normal;font-size:14px;line-height:1.25;padding-left:12px;padding-right:12px}
.vg-crit .k{white-space:nowrap}

/* ---- Einfache Seiten: Methodik, Über mich, Rechtliches, Newsletter, 404 (18.10.2026) ---- */
.hero-info{padding-bottom:64px}
.hero-info .hero-grid{grid-template-columns:minmax(0,1fr) auto;align-items:center}
.hero-info .lead{max-width:40em}
.info-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.info-photo img{width:240px;height:240px;border-radius:50%;object-fit:cover;border:6px solid #fff;box-shadow:0 18px 40px -20px rgba(15,61,71,.35)}
.info-main{padding-bottom:24px}
.info-main .content{max-width:none}
@media (min-width:900px){.info-main .sec .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.75fr);gap:56px;align-items:start}.info-main .sec .sec-head{margin:0}.info-main .sec-full .wrap{display:block}.info-main .info-prose{max-width:44em}.info-main .sec-full .info-prose{max-width:none}}
.info-main .sec{padding:56px 0}
.info-main .sec .wrap{padding:0}
.info-main .sec-head{margin-bottom:18px}
.info-main .sec-head h2{font-size:clamp(1.5rem,1.2rem + 1vw,2rem)}
.info-prose h2{font-size:1.5rem;margin:40px 0 12px;letter-spacing:-.015em}
.info-prose h2:first-child{margin-top:0}
.info-prose h3{font-size:1.15rem;margin:28px 0 8px}
.info-prose ul,.info-prose ol{padding-left:1.2em;margin:12px 0}
.info-prose li+li{margin-top:6px}
.info-prose a{color:var(--petrol)}
.info-prose .nl-box{margin:0}
@media (max-width:760px){.hero-info .hero-grid{grid-template-columns:1fr;gap:24px}.info-photo{order:-1}.info-photo img{width:140px;height:140px}.info-main .sec{padding:40px 0}}

/* Abstand nach Tabellen in Ratgebertexten (18.10.2026) */
.art-prose .table-wrap+p,.art-prose .table-wrap+ul,.art-prose .table-wrap+ol{margin-top:18px}
.art-prose p+.table-wrap{margin-top:14px}

/* Badge „Kurz erklärt“: eckiger, wie der Status-Chip (18.10.2026) */
.know-badge{border-radius:6px;padding:6px 11px}

/* Einheitliche Ecken für Badges, Tags und Filter-Chips: 6px statt Pille (18.10.2026) */
.plan .tag,.qbadge,.au,.c-badge,.pa2 li,.vg-chip,.vg-tag,.st-chip,.know-badge,body[data-tarif="c"] .tarif{border-radius:6px}
.tabs ul a{border-radius:8px}
.jump{border-radius:10px}

/* „Gut zu wissen“: Kartentitel jetzt h3 statt h4 (Überschriften-Reihenfolge), gleiches Aussehen (18.10.2026) */
.know .k h3{font:600 1.08rem/1.3 var(--head);color:var(--ink);margin:0 0 6px;letter-spacing:-.01em!important;font-optical-sizing:none;font-variation-settings:"opsz" 24}
.know-sec2 .know .k h3{font-size:1.1rem}
.mini .lg img{width:auto;height:auto}

/* Barrierefreiheit 18.10.2026 */
.art-prose thead td.ecke{background:var(--soft);padding:12px 16px}
.table-wrap:focus-visible{outline:3px solid var(--petrol);outline-offset:2px;border-radius:12px}
.nl-feld:focus-within{box-shadow:0 0 0 2px var(--petrol),0 0 0 5px rgba(15,76,92,.15)!important}
.c-field input:focus-visible,.c-field textarea:focus-visible,.comments .c-form .c-field input:focus-visible,.comments .c-form .c-field textarea:focus-visible{box-shadow:0 0 0 2px #0E7C86!important}
.bk-quiz .res:focus{outline:none}
.mini .lg-txt{display:inline-flex;align-items:center;justify-content:center;font:700 15px/1 var(--head);color:var(--petrol)}

/* Vor-/Nachteile: zwei Spalten und Karten mit Fettzeilen (18.10.2026) */
.pc{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:20px}
.pc-col{border:1px solid var(--line);border-radius:16px;padding:22px 24px;background:#fff}
.pc-col h3{font:600 1.1rem/1.3 var(--head);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.pc-pro{background:#F3F8F8}
.pc-con{background:#FBF6F1}
.pc-col ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.pc-col li{display:flex;gap:10px;align-items:flex-start;line-height:1.45}
.pc-col li .mk,.lc-i>.mk{flex:none;display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;margin-top:1px}
.pc-con li .mk,.lc-no>.mk{background:#F6E3D0!important;color:#9A4F17!important}
.lc{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.lc-i{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:#fff}
.lc-i h3{font:600 1.02rem/1.35 var(--head);margin:0 0 6px;letter-spacing:-.01em}
.lc-i p{margin:0;color:var(--text);line-height:1.55;font-size:.97rem}
.lc-i .textlinks{margin:10px 0 0;padding:0}
.lc-i .textlinks li{list-style:none}
@media (max-width:760px){.pc,.lc{grid-template-columns:1fr}}
.pc-pro li .mk,.lc-ok>.mk{background:#D6E8EB!important;color:#0F4C5C!important}
.lc-info>.mk{background:#EEF2F3!important;color:var(--muted)!important}

/* „Kurz erklärt“ birüzisch wie der Status-Chip, Icons bleiben apricot (18.10.2026) */
.know-badge{background:#D6E8EB!important;color:#0F4C5C!important}
.lc-logo{flex:none;display:grid;place-items:center;width:52px;height:34px;border:1px solid var(--line);border-radius:8px;background:#fff}
.lc-logo img{max-width:40px;max-height:18px;width:auto;height:auto}

/* Icon-Logos (Sparkasse, Volksbank, Deutsche Bank) mit Namen daneben, 18.10.2026 */
.logo-ico{display:inline-flex;align-items:center;gap:8px;max-width:100%}
.logo-ico img{flex:none}
.logo-name{display:inline-block;text-decoration:none;font:640 1.05rem/1.1 var(--font-head,inherit);color:var(--ink,#13222b);white-space:nowrap}
/* Tabellen in übrigen Bank-Abschnitten (18.10.2026) */
.know-prose .table-wrap{overflow-x:auto;margin:14px 0 18px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.know-prose table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
/* Handy: Tabellen mit höchstens drei Spalten passen ohne Querscrollen (20.10.2026) */
@media(max-width:600px){.art-prose table:not(:has(tr>:nth-child(4))),.know-prose table:not(:has(tr>:nth-child(4))){min-width:0;font-size:14px}.art-prose table:not(:has(tr>:nth-child(4))) :is(th,td),.know-prose table:not(:has(tr>:nth-child(4))) :is(th,td){padding-left:12px;padding-right:12px;hyphens:auto;-webkit-hyphens:auto}}
.know-prose th{text-align:left;font-weight:600;color:var(--ink);background:var(--soft);padding:12px 16px;font-size:13.5px}
.know-prose td{padding:13px 16px;border-top:1px solid var(--line);vertical-align:top}
.know-prose td:first-child{font-weight:600;color:var(--ink)}

/* Aktionsfarbe für Bedienelemente und Statuszeichen (19.10.2026):
   Buttons, Auswahl, Fortschritt, Häkchen und Nummern in #0E7C86 wie Logo und Buttons.
   Fließtext-Links, Überschriften-Akzente und Navigation bleiben dunkles Petrol. Warnzeichen bleiben Apricot. */
.btn.ghost,.jump,.quiz-wrap,.bk-quiz,.qbadge,.opts,.fit-card,.steps,.art-prose ol.steps,.pr-row .ok,.plan.top,.plan .tag,.vg-chip,.vg-top .vg-rank,.nl-check,.c-field,.nl-feld{--petrol:var(--action)}
.steps3 i.cur,.steps3 i.done{background:var(--action)!important}
/* Dunkelmodus dazu: tools/make_dark.py (Zusatzblock) */

/* Kontrast-Korrekturen (19.10.2026, tools/check_kontrast.py):
   kleine Apricot-Punkte brauchen einen dunkleren Ton, damit sie 3:1 erreichen; Zeichen auf Apricot immer in Tinte. */
.fit-card.no li::before,.c-empty::before{background:#CC6E1F}
.bk-quiz legend .n{color:#0A6A73!important}
.btn.ghost,.jump,.nl-check a{color:#0A6A73!important}
/* Kurzer Check: gewählte Antwort füllt ihr Zeichen (wie die Statuszeichen in den Kriterienzeilen), 19.10.2026 */
.opts input:checked+span .mk{background:var(--action)!important;color:#fff!important}
.opts input:checked+span .x{background:var(--apricot)!important;color:#15252B!important}
/* Autorenkarte: erscheint beim Überfahren oder Fokussieren des Namens in der Autorenzeile (19.10.2026). Esc schließt (bank.js). */
.ap{position:relative;display:inline-block}
.ap-card{position:absolute;left:-14px;top:100%;z-index:40;display:block;width:min(320px,calc(100vw - 32px));margin-top:10px;padding:16px 18px 16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 36px rgba(15,30,36,.14),0 2px 6px rgba(15,30,36,.06);color:var(--text);font-size:14px;font-weight:400;line-height:1.55;letter-spacing:0;white-space:normal;text-align:left;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.ap-card::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.ap:focus-within .ap-card{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
@media(hover:hover){.ap:hover .ap-card{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease .12s,transform .16s ease .12s,visibility 0s linear .12s}}
.ap.ap-off .ap-card{opacity:0;visibility:hidden}
.ap-top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.author .ap-card .ap-top img{width:48px;height:48px;flex:none;border-radius:50%;object-fit:cover;box-shadow:none}
.ap-top b{display:block;font-size:15px;line-height:1.3}
.ap-top small{display:block;color:var(--muted);font-size:13px;line-height:1.35}
.ap-bio{display:block}
.author .ap-card .ap-more{display:inline-block;margin-top:10px;color:var(--petrol);font-weight:600;text-decoration:none}
.author .ap-card .ap-more::after{content:" →"}
.author .ap-card .ap-more:hover{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.ap-card{transform:none!important;transition:none!important}}
@media(max-width:600px){.author{position:relative}.author .ap{position:static}.author .ap-card{left:0;width:100%}}
.ap.ap-up .ap-card{top:auto;bottom:100%;margin:0 0 10px}
.ap.ap-up .ap-card::before{top:auto;bottom:-12px}
@media(max-width:600px){.author:has(.ap-up) .ap-card{top:auto;bottom:100%}}

/* 320 px (WCAG 1.4.10, 20.10.2026): Faktenkarte im Kopf darf die Spalte nicht verbreitern.
   Bisher: Bezeichnung nowrap + langer Wert → Kopf breiter als der Bildschirm, Lead abgeschnitten. */
@media (max-width:359px){
  .hero-grid>*{min-width:0}
  .facts .fact{flex-wrap:wrap;row-gap:2px}
  .facts .fact span{white-space:normal}
  .facts .fact b{margin-left:auto}
  .fact-praemie .pv small,.fact-praemie .pc{white-space:normal}
  .facts-logo{position:static;justify-content:flex-start;margin-bottom:14px}
  .facts-logo+.facts-top .price{padding-right:0}
}

/* Vergleich: Filterleiste als Tabellenkopf (20.10.2026, kompakt) */
.vg-filter{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"k o" "m m" "n s";align-items:end;gap:14px 24px;background:var(--soft);border:1px solid var(--line);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:18px 22px 14px}
.vg-filter .vg-must{padding-bottom:14px;border-bottom:1px solid var(--line)}
.vg-filter fieldset{border:0;margin:0;padding:0;min-width:0}
.vg-filter legend{font:600 13px/1 var(--body);color:var(--muted);margin-bottom:8px;padding:0}
.vg-g-k{grid-area:k}.vg-g-o{grid-area:o}.vg-sort{grid-area:s}.vg-must{grid-area:m}.vg-n{grid-area:n}
.vg-seg-o{display:inline-flex;flex-wrap:nowrap;gap:2px;background:#fff;border:1px solid #CFE0E3;border-radius:10px;padding:3px}
.vg-opt{position:relative;display:inline-flex}
.vg-opt input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.vg-opt span{display:inline-flex;align-items:center;gap:6px;min-height:34px;box-sizing:border-box;padding:6px 12px;border-radius:7px;font:500 14px/1.2 var(--body);color:var(--text);cursor:pointer;white-space:nowrap}
.vg-opt span:hover{color:var(--ink);background:var(--soft2)}
.vg-opt input:checked+span{background:var(--action);color:#fff}
.vg-opt input:focus-visible+span{outline:2px solid var(--action);outline-offset:2px}
.vg-cnt{font:500 12px/1 var(--body);color:var(--muted)}
.vg-opt input:checked+span .vg-cnt{color:#fff;opacity:.8}
.vg-zero span{opacity:.5}
.vg-must legend{float:left;margin:0 12px 0 0;line-height:36px}
.vg-must-o{display:flex;flex-wrap:wrap;gap:6px}
.vg-chk span{background:#fff;border:1px solid #CFE0E3;border-radius:999px}
.vg-chk input:checked+span{border-color:var(--action)}
.vg-chk input:checked+span::before{content:"";width:9px;height:5px;border:solid #fff;border-width:0 0 2px 2px;transform:translateY(-2px) rotate(-45deg)}
.vg-sort{justify-self:end;position:relative}
.vg-sort-b{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:8px 12px;font:500 14px var(--body);color:var(--muted);background:#fff;border:1px solid #CFE0E3;border-radius:10px;cursor:pointer}
.vg-sort-b b{font-weight:600;color:var(--ink)}
.vg-sort-b .chev{transition:transform .15s}
.vg-sort-b[aria-expanded="true"]{border-color:var(--action)}
.vg-sort-b[aria-expanded="true"] .chev{transform:rotate(180deg)}
.vg-sort-b:focus-visible{outline:2px solid var(--action);outline-offset:2px}
.vg-filter .vg-sort-m{position:absolute;right:0;top:calc(100% + 6px);z-index:20;min-width:100%;box-sizing:border-box;padding:6px;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 32px rgba(15,30,36,.14)}
.vg-sort-m[hidden]{display:none}
.vg-mi{position:relative;display:block}
.vg-mi input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.vg-mi span{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 34px;border-radius:8px;font:500 14px/1.2 var(--body);color:var(--text);white-space:nowrap;cursor:pointer;position:relative}
.vg-mi span:hover{background:var(--soft2);color:var(--ink)}
.vg-mi input:checked+span{color:var(--ink);font-weight:600}
.vg-mi input:checked+span::before{content:"";position:absolute;left:13px;top:50%;width:10px;height:5px;border:solid var(--action);border-width:0 0 2px 2px;transform:translateY(-70%) rotate(-45deg)}
.vg-mi input:focus-visible+span{outline:2px solid var(--action);outline-offset:-2px}
.vg-n{justify-self:start;align-self:center;display:flex;gap:12px;align-items:baseline;margin:0!important;font:600 14px var(--body);color:var(--ink);white-space:nowrap}
.vg-hint{margin:10px 0 0!important;font-size:12.5px;color:var(--muted)}
.vg-toggle,.vg-done{display:none}
.vg-thead{display:grid;grid-template-columns:36px minmax(170px,1.15fr) minmax(140px,1fr) minmax(170px,.95fr) 210px;gap:16px;padding:10px 22px;background:#fff;border:1px solid var(--line);border-bottom:0;font:600 12px/1.2 var(--body);letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.vg-filter~.vg-list{border-radius:0 0 var(--r-lg) var(--r-lg)}
.vg-bonus{display:inline-flex;align-items:center;gap:5px;margin:6px 0 0 6px;font:600 12px/1 var(--body);color:var(--petrol);background:var(--tint);border-radius:6px;padding:4px 8px;vertical-align:top}
.vg-bonus svg{width:14px;height:14px}
a.vg-logo+.vg-bonus{margin-left:0}
@media(max-width:1099px){.vg-thead{display:none}}
@media(max-width:699px){
  .vg-filter{grid-template-columns:auto 1fr;grid-template-areas:"t s" "n n" "k k" "o o" "m m" "d d";gap:12px;padding:14px 16px}
  .vg-toggle{grid-area:t;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:9px 14px;font:600 15px var(--body);color:var(--action);background:#fff;border:1px solid #CFE0E3;border-radius:10px;cursor:pointer}
  .vg-toggle[aria-expanded="true"]{border-color:var(--action)}
  .vg-n{justify-self:start;font-weight:500;color:var(--muted)}
  .vg-filter .vg-must{padding-bottom:0;border-bottom:0}
  .vg-seg-o{flex-wrap:wrap}
  .vg-filter.js:not(.open) .vg-seg,.vg-filter.js:not(.open) .vg-must{display:none}
  .vg-filter.js:not(.open){grid-template-areas:"t s" "n n"}
  .vg-sort-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .vg-sort-b{min-height:44px}
  .vg-seg-o{display:flex;width:100%;box-sizing:border-box}
  .vg-seg-o .vg-opt{flex:1 1 auto}
  .vg-seg-o .vg-opt span{width:100%;justify-content:center}
  .vg-g-k .vg-seg-o{flex-direction:column}
  .vg-g-k .vg-seg-o .vg-opt span{justify-content:space-between}
  .vg-must legend{float:none;line-height:1;margin-bottom:8px}
  .vg-filter.js.open .vg-done{grid-area:d;display:flex;justify-content:center;width:100%}
}

/* Vergleich: Zeile ruhiger (20.10.2026) */
.vg-row{grid-template-columns:32px 160px minmax(150px,1fr) minmax(190px,1fr) 150px;grid-template-areas:"r b p c a" "r n n n a";gap:10px 20px;align-items:center;padding:18px 22px}
.vg-thead{grid-template-columns:32px 160px minmax(150px,1fr) minmax(190px,1fr) 150px;gap:20px}
.vg-rank{grid-area:r;align-self:start;margin-top:8px}.vg-bank{grid-area:b}.vg-price{grid-area:p}.vg-crit{grid-area:c}.vg-act{grid-area:a}
.vg-row .vg-logo-frame{border:1px solid var(--line)}
.vg-badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.vg-badges .vg-tag,.vg-badges .vg-bonus{margin:0}
.vg-row .vg-note{grid-area:n;margin:0!important;font-size:13.5px;line-height:1.45;color:var(--muted);padding-top:10px;border-top:1px dashed var(--line)}
.vg-crit{gap:7px}
.vg-crit li{align-items:center}
.vg-crit .k{white-space:normal}
.vg-crit li.ok .k{color:var(--ink)}
.vg-crit li.no .k{color:#8A4512}
.vg-crit li.info .k{color:var(--muted)}
.vg-act .btn{white-space:nowrap}
@media(max-width:1099px){.vg-row{grid-template-columns:32px 1fr 1fr;grid-template-areas:"r b p" "r c a" "r n n"}}
@media(max-width:699px){.vg-row{grid-template-columns:28px 1fr;grid-template-areas:"r b" "r p" "r c" "r n" "r a";gap:12px;padding:16px}}

/* Seitenleiste passt immer in den Bildschirm (20.10.2026): eigene Bildlaufleiste, auf niedrigen Bildschirmen enger */
@media(min-width:1100px){
 .side{max-height:calc(100vh - 112px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
}
@media(min-width:1100px) and (max-height:900px){
 .side-nav a{padding-top:6px;padding-bottom:6px;font-size:14.5px}
 .side-cta{margin-top:16px;padding:14px!important}
 .side-cta .sp b{font-size:1.3rem}
}
@media(min-width:1100px) and (max-height:760px){
 .side-cta{display:none}
}
/* Vergleichszeile lesbarer (20.10.2026) */
.vg-row .vg-c{font-size:14px;line-height:1.45;color:var(--text);margin-top:6px!important;max-width:30ch}
.vg-row .vg-note{font-size:14px;color:var(--text);padding-top:12px}
.vg-crit{gap:8px}
.vg-crit li{font-size:14.5px}
/* Vergleich: Merkmale mit Kreis-Symbolen wie bei Vor-/Nachteilen (20.10.2026) */
.vg-crit li{align-items:center;gap:10px}
.vg-crit li .mk{flex:none;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%}
.vg-crit li .mk svg{width:11px;height:11px}
.vg-crit li.ok .mk{background:#D6E8EB;color:#0F4C5C}
.vg-crit li.no .mk{background:#F6E3D0;color:#9A4F17}
.vg-crit li.info .mk{background:#EEF2F3;color:var(--muted)}
.vg-crit li.ok .k,.vg-crit li.no .k{color:var(--ink)}
.vg-crit li.info .k{color:var(--muted)}
#vergleich .sec-head .link{white-space:nowrap}
a.vg-logo,a.vg-logo:hover{text-decoration:none}
/* Mini-Vergleich ohne Kosten-/Eröffnungsgruppen (Tagesgeld): keine leere Zeile oben */
.vg-mini:not(:has(.vg-seg)){grid-template-areas:"m m" "n s"}
@media(max-width:699px){.vg-mini:not(:has(.vg-seg)){grid-template-areas:"t s" "n n" "m m" "d d"}}
.vg-after{margin-top:18px}
/* Kostenpunkte (€-Symbol) in Mini-Vergleichen */
.vg-crit li.eur .mk{background:#EEF2F3;color:var(--ink)}
.vg-crit li.eur .k{color:var(--ink)}
/* Mini-Vergleiche (Vereinskonto, Tagesgeld): breitere Spalte „Auf einen Blick“, damit Merkmale einzeilig bleiben */
@media(min-width:1100px){
 .vg-mini~.vg-list .vg-row,.vg-mini~.vg-thead{grid-template-columns:32px 150px minmax(140px,.85fr) minmax(240px,1.25fr) 150px}
}
.vg-logo-frame img[src*="consorsbank"]{height:40px!important;width:auto!important;max-width:128px}
/* Prüfung 20.10.2026: alle Vergleichstabellen mit breiter Spalte „Auf einen Blick“; Textlogos auch im Dunkelmodus dunkel (Rahmen bleibt weiß) */
@media(min-width:1100px){
 .vg-row,.vg-thead{grid-template-columns:32px 150px minmax(140px,.85fr) minmax(240px,1.25fr) 150px}
}
.vg-logo-frame b{color:#15252B}
/* „black“ wird von make_dark.py nicht umgefärbt: Textlogo auf weißem Rahmen bleibt im Dunkelmodus dunkel */
html[data-theme="dark"] .vg-logo-frame b{color:black!important}
/* Prämie sichtbar (20.10.2026): warmes Badge + eigene Zeile mit Bedingung */
.vg-bonus{background:var(--apricot);color:#15252B;font-size:12.5px;padding:5px 9px}
.vg-bonus svg{color:#15252B}
html[data-theme="dark"] .vg-bonus{background:#FFA552!important;color:black!important}
html[data-theme="dark"] .vg-bonus svg{color:black!important}
.vg-row .vg-foot{grid-area:n;padding-top:12px;border-top:1px dashed var(--line);display:grid;gap:8px}
.vg-row .vg-foot .vg-note{grid-area:auto;padding-top:0;border-top:0}
.vg-pr{display:flex;gap:10px;align-items:flex-start;margin:0!important;padding:10px 12px;background:#FCEBDD;border-radius:10px;font-size:14px;line-height:1.45;color:#4A3A2C}
.vg-pr svg{flex:none;width:18px;height:18px;margin-top:1px;color:#A65A1C}
.vg-pr b{color:var(--ink)}
/* Vergleich 20.10.2026: Bedingung unter dem Preis deutlicher; „!“-Symbole ruhig, Apricot bleibt der Prämie */
.vg-row .vg-c{font-size:14.5px!important;color:var(--ink)!important;font-weight:500}
.vg-crit li.no .mk{background:#EDE6DF;color:#6B5A4A}
html[data-theme="dark"] .vg-crit li.no .mk{background:#3A3430!important;color:#D9CBBE!important}

/* Antwortsatz vor Icon-Karten (20.10.2026) */
.lc-intro{margin:0 0 18px}.lc-intro p{margin:0 0 10px}
/* Textlinks im Inhalt (20.10.2026): ruhige Unterstreichung, beim Überfahren/Fokus Apricot-Linie + leichter Hintergrund */
main :is(.art-prose,.know-prose,.lc,.faq,.pc,.picks,.know,.alts,.lead) a:not(.btn):not(.link):not(.vg-logo):not([class*="btn"]){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;text-decoration-color:color-mix(in srgb,currentColor 40%,transparent);border-radius:3px;transition:text-decoration-color .15s,text-decoration-thickness .15s,background-color .15s}
main :is(.art-prose,.know-prose,.lc,.faq,.pc,.picks,.know,.alts,.lead) a:not(.btn):not(.link):not(.vg-logo):not([class*="btn"]):is(:hover,:focus-visible){text-decoration-color:var(--apricot);text-decoration-thickness:2px;background-color:color-mix(in srgb,var(--apricot) 14%,transparent)}
main .textlinks a:is(:hover,:focus-visible),main a.link:is(:hover,:focus-visible){text-decoration:underline;text-decoration-color:var(--apricot);text-decoration-thickness:2px;text-underline-offset:4px}

/* Entscheidungshilfe vor dem FAQ (20.10.2026) */
.decide{list-style:none;margin:20px 0 0;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.decide .dec-row{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr) auto;gap:20px;align-items:center;padding:18px 22px;border-top:1px solid var(--line);margin:0}
.decide .dec-row:first-child{border-top:0}
.decide .dec-row::before{content:none}
.decide p{margin:0;max-width:none}
.decide .dec-sit{font-weight:600;color:var(--ink);font-size:15.5px;line-height:1.4}
.decide .dec-pick{display:flex;gap:14px;align-items:center}
.decide .dec-bank{display:block;color:var(--ink);font-size:16px}
.decide .dec-bank a{color:inherit}
.decide .dec-why{display:block;font-size:14.5px;color:var(--muted);line-height:1.45;margin-top:2px}
.decide .btn-row{margin:0;justify-content:flex-end;flex-wrap:nowrap}
.decide .dec-ini{font:700 11px var(--body);color:#0F1E24;letter-spacing:.02em}
@media(max-width:1279px){.decide .dec-row{grid-template-columns:minmax(0,1fr) auto;gap:10px 20px}.decide .dec-sit{grid-column:1/-1}}
@media(max-width:599px){.decide .dec-row{grid-template-columns:1fr;padding:16px}.decide .btn-row{justify-content:flex-start}}
.decide .btn-row{flex-direction:column;align-items:stretch;gap:8px}
@media(max-width:599px){.decide .btn-row{align-items:flex-start}}

/* Karten: Text nach den Karten (lc-outro) und neutrales i-Zeichen für Regeln (20.10.2026) */
.lc-outro{margin-top:20px}
.lc-outro p{margin:0 0 12px}
.lc-rule>.mk{background:#D6E8EB!important;color:#0F4C5C!important}
.lc-ini{font:700 9.5px/1.1 var(--body);color:black;letter-spacing:.01em;text-align:center;padding:0 3px}

/* Schritte im Fließtext von Bankseiten (know-prose ohne art-prose) wie im Ratgeber: senkrechte Liste mit Nummer, Abstand zu Text davor/danach (20.10.2026) */
.know-prose:not(.art-prose) ol.steps{display:block;list-style:none;counter-reset:st;margin:16px 0;padding:0;max-width:46em;gap:0}
.know-prose:not(.art-prose) ol.steps li{counter-increment:st;position:relative;padding:0 0 16px 48px;min-height:34px;background:none;border-radius:0}
.know-prose:not(.art-prose) ol.steps li::before{content:counter(st);position:absolute;left:0;top:-3px;width:32px;height:32px;margin:0;border-radius:50%;background:var(--tint);color:var(--petrol);font:600 14px/32px var(--body);text-align:center;box-shadow:none!important;display:block}
.know-prose:not(.art-prose) ol.steps li::after{display:none!important}
.know-prose:not(.art-prose) ol.steps li:last-child{padding-bottom:0}
.know-prose:not(.art-prose) ol.steps{--petrol:var(--action)}

/* Gemeinschaftsdepot-Karten auf Bankseiten ohne Gemeinschaftskonto (20.10.2026): Abstand zum Fließtext */
.know-prose:not(.art-prose) .picks{margin:16px 0}
.know-prose + .alts{margin-top:20px}
/* Karten-Buttons einheitlich (20.10.2026, Alesia „не перфект“): Hauptbutton volle Breite, Detail-Link als Textlink darunter – wie die Bankkarten unter „Gute Alternativen“ */
:is(.art-prose,.know-prose) .proto.pick .btn-row{display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:6px}
:is(.art-prose,.know-prose) .proto.pick .btn-row>span,:is(.art-prose,.know-prose) .proto.pick .btn-row .btn:not(.ghost){width:100%}
:is(.art-prose,.know-prose) .proto.pick .btn-row .btn:not(.ghost){justify-content:center;text-align:center;white-space:nowrap}
:is(.art-prose,.know-prose) .proto.pick .btn-row .btn.ghost{box-shadow:none;border:0;background:none;min-height:0;padding:6px 0;justify-content:center;text-decoration:underline;text-underline-offset:3px}
/* Kartenraster ohne Lücke: 2 oder 4 Karten stehen zu zweit statt 3 + 1 bzw. 2 + leerer Platz */
@media(min-width:860px){.alts:has(>:nth-child(2):last-child),.alts:has(>:nth-child(4):last-child),.picks:has(>:nth-child(2):last-child),.picks:has(>:nth-child(4):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Lange Bank-Buttons („Bei der Commerzbank eröffnen“) bleiben einzeilig: weniger Innenabstand, auf schmalen Handys etwas kleinere Schrift (20.10.2026) */
.btn.bank{padding-left:18px;padding-right:18px;text-align:center}
@media(max-width:380px){.btn.bank{font-size:14.5px;padding-left:14px;padding-right:14px;gap:6px}}
/* Handy-Leiste unten und Sprungknöpfe im Kopf einzeilig halten (20.10.2026) */
@media(max-width:759px){.mbar .btn{white-space:nowrap;flex:none}.mbar>div{min-width:0}}
@media(max-width:380px){.jump{font-size:14.5px!important;padding:0 12px 0 10px!important;gap:6px!important;white-space:nowrap}}
/* Faktenkarte am Handy: Logo über dem Preis, damit „4,90 € / Monat“ in einer Zeile bleibt (20.10.2026) */
@media (max-width:479px){.facts-logo{position:static;justify-content:flex-start;margin-bottom:14px}.facts-logo+.facts-top .price{padding-right:0}.facts .price{white-space:nowrap}}

/* Ghost-Button: deutlicher Hover, seit der Ruhe-Rahmen kräftiger ist (21.10.2026) */
.btn.ghost:hover,.btn.ghost:focus-visible{background:#E1EFF1;box-shadow:inset 0 0 0 2px #0E7C86;color:#0A5A62!important}

/* Bank-Logos in Tabellen, erste Spalte (21.10.2026): Logo in weißem Rahmen vor dem Namen */
td a.tb-bank{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.tb-logo{flex:none;display:inline-grid;place-items:center;width:46px;height:30px;background:#fff;border:1px solid var(--line);border-radius:6px;padding:0 5px;box-sizing:border-box}
.tb-logo img{display:block;width:auto;height:auto;max-width:100%;max-height:16px}
@media(max-width:600px){td a.tb-bank{flex-direction:column;align-items:flex-start;gap:6px;white-space:normal}}

/* Tabellen-Logos: Hover nur am Namen (Unterstrich), keine Fläche hinter Logo + Name (21.10.2026) */
main td a.tb-bank:is(:hover,:focus-visible){background-color:transparent!important}
main td a.tb-bank:is(:hover,:focus-visible) .tb-logo{border-color:#9FBCC1}

/* 21.10.2026 Startseite FAQ: Kreuz im offenen Zustand war var(--tint) = fast unsichtbar */
.home-body .faq details[open] summary::after{background-color:currentColor!important}

/* 21.10.2026 Newsletter-Einwilligung: Link bekam keinen Hover – jetzt wie Textlinks (Apricot-Unterstrich + Tönung) */
.nl-check a:is(:hover,:focus-visible){text-decoration:underline;text-decoration-color:var(--apricot);text-decoration-thickness:2px;background-color:color-mix(in srgb,var(--apricot) 14%,transparent)}

/* 21.10.2026 Ein Hover für alle unterstrichenen Textlinks im Inhalt: Apricot-Unterstrich 2px + leichte Apricot-Tönung. Ausnahmen bewusst: Tabellenlinks mit Bank-Logo (ohne Tönung), Fußzeile/Menüs (eigenes Muster) */
main :is(.c-consent,.src,.lagen-more,.signed,.section-head,.wrap>p,.ap,.textlinks) a:not([class*="btn"]):is(:hover,:focus-visible){text-decoration-line:underline;text-decoration-color:var(--apricot)!important;text-decoration-thickness:2px!important;background-color:color-mix(in srgb,var(--apricot) 14%,transparent)}

/* 21.10.2026 Autorenkarte öffnet auch beim Überfahren des Fotos; Esc schließt */
@media(hover:hover){.author:has(>img:hover) .ap-card{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease .12s,transform .16s ease .12s,visibility 0s linear .12s}}
.author .ap.ap-off .ap-card{opacity:0;visibility:hidden}

/* 21.10.2026 Vergleich, Karten „Alle Konditionen im Detail“: Zeilen nebeneinanderliegender Karten auf gleicher Höhe (Subgrid), Logo links bündig, Wertspalte breiter */
@supports (grid-template-rows:subgrid){.vg-card{display:grid;grid-template-rows:subgrid;grid-row:span 10;row-gap:0}.vg-rows{display:grid;grid-template-rows:subgrid;grid-row:span 7;row-gap:0}.vg-good{align-self:start}.vg-card-f{align-self:end}}
.vg-rows .k{flex:0 0 40%}
.vg-card-h img{object-position:left center}

/* 21.10.2026 Logo-Links (Vergleich, Tabellen mit großem Logo): Hover wie bei den kleinen Tabellen-Logos – Rahmen wird Petrol-hell */
main a.vg-logo:is(:hover,:focus-visible) .vg-logo-frame{outline:1px solid #9FBCC1;outline-offset:-1px}

/* 21.10.2026 Karten kompakter: Fußzeile bleibt unten, auch ohne Hinweisbox; Zeilen etwas enger */
@supports (grid-template-rows:subgrid){.vg-card-f{grid-row:-2/-1}}
.vg-rows li{padding:8px 0}

/* 21.10.2026 Vergleichsliste: Produktname unter dem Logo */
.vg-prod{margin:8px 0 0!important;max-width:148px;font-size:14px;font-weight:600;line-height:1.3;color:var(--ink)}
@media(max-width:600px){.vg-prod{max-width:none}}

/* 21.10.2026 Prämien-Badge: Erklärfenster bei Hover, Fokus oder Tippen (wie die Autorenkarte), Esc schließt */
.vg-bw{position:relative;display:inline-flex}
button.vg-bonus{border:0;cursor:help;font-family:var(--body)}
.vg-pop{position:absolute;left:0;top:100%;z-index:45;display:block;width:min(300px,calc(100vw - 48px));margin-top:8px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);box-shadow:0 14px 36px rgba(15,30,36,.14),0 2px 6px rgba(15,30,36,.06);color:var(--text);font:400 14px/1.5 var(--body);text-align:left;white-space:normal;opacity:0;visibility:hidden;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease,visibility 0s linear .16s}
.vg-pop::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
.vg-pop b{display:block;margin-bottom:4px;color:var(--ink);font-weight:650}
.vg-pop small{display:block;margin-top:8px;color:var(--muted);font-size:12.5px;line-height:1.4}
.vg-bw:focus-within .vg-pop,.vg-bw.open .vg-pop{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease,transform .16s ease}
@media(hover:hover){.vg-bw:hover .vg-pop{opacity:1;visibility:visible;transform:none;transition:opacity .16s ease .12s,transform .16s ease .12s,visibility 0s linear .12s}}
.vg-bw.off .vg-pop{opacity:0;visibility:hidden}
@media(prefers-reduced-motion:reduce){.vg-pop{transform:none!important;transition:none!important}}

/* 21.10.2026 Karten-Fußzeile: Button, „… im Detail“ und Quelle immer untereinander und oben bündig – Buttons nebeneinanderliegender Karten auf gleicher Höhe */
.vg-card-f{flex-direction:column;flex-wrap:nowrap;align-items:flex-start;gap:10px}
@supports (grid-template-rows:subgrid){.vg-card .vg-card-f{align-self:start}}

/* 21.10.2026 Prämien-Badge: deutlicher, dass sich ein Fenster öffnet – Info-Symbol im Badge, Hover/Offen kräftiger mit Ring, Fenster mit Spitze zum Badge */
button.vg-bonus{cursor:pointer;transition:background-color .15s,box-shadow .15s}
button.vg-bonus::after{content:"";flex:none;width:14px;height:14px;margin-left:2px;background:currentColor;opacity:.75;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Ccircle cx=%278%27 cy=%278%27 r=%276.25%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27/%3E%3Cpath d=%27M8 7.2v4%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%278%27 cy=%274.9%27 r=%271%27/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3E%3Ccircle cx=%278%27 cy=%278%27 r=%276.25%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%271.5%27/%3E%3Cpath d=%27M8 7.2v4%27 stroke=%27%23000%27 stroke-width=%271.6%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%278%27 cy=%274.9%27 r=%271%27/%3E%3C/svg%3E") center/contain no-repeat}
.vg-bw:is(:hover,:focus-within,.open) button.vg-bonus{background:#F28F3B!important;box-shadow:0 0 0 3px rgba(255,165,82,.35)}
.vg-pop::after{content:"";position:absolute;left:22px;top:-6px;width:10px;height:10px;background:inherit;border-left:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}

/* 21.10.2026 Karten neu geordnet: Quelle oben bei „Geprüft am“, Fußzeile eine Zeile (Button + Details) direkt unter den Zeilen, Hinweis als leiser Text ganz unten – keine Lücke mehr zwischen Zeilen und Button */
.vg-stamp{text-align:right;line-height:1.35}
.vg-stamp small{display:block;font-size:12px;color:var(--muted)}
.vg-card .vg-card-f{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 18px;padding-top:16px}
.vg-good{background:none!important;padding:0!important;margin-top:12px!important;color:var(--muted)!important;font-size:13.5px;line-height:1.5}
@supports (grid-template-rows:subgrid){.vg-card .vg-card-f{grid-row:9/10;align-self:start}.vg-card .vg-good{grid-row:10/11;align-self:start}}

/* 21.10.2026 Prämien-Badge besser lesbar (Variante C): weiß mit Apricot-Rahmen, dunkle Schrift, Geschenk-Symbol orange */
button.vg-bonus{background:#fff!important;color:#15252B!important;box-shadow:inset 0 0 0 1.5px #F28F3B}
button.vg-bonus svg{color:#E07A26!important}
.vg-bw:is(:hover,:focus-within,.open) button.vg-bonus{background:#FFF1E4!important;box-shadow:inset 0 0 0 1.5px #E07A26,0 0 0 3px rgba(255,165,82,.3)}
html[data-theme="dark"] button.vg-bonus{background:#151A1C!important;color:#F3E6DA!important;box-shadow:inset 0 0 0 1.5px #FFA552}
html[data-theme="dark"] button.vg-bonus svg{color:#FFA552!important}
html[data-theme="dark"] .vg-bw:is(:hover,:focus-within,.open) button.vg-bonus{background:#2A2017!important}

/* 21.10.2026 „Details“-Links in Vergleichsliste und Karten mit Pfeil wie die übrigen Weiterlesen-Links; Pfeil rückt beim Hover leicht nach rechts */
:is(.vg-card-f,.vg-act,.proto-foot) a.link{display:inline-flex;align-items:center;gap:6px}
:is(.vg-card-f,.vg-act,.proto-foot) a.link::after{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s ease}
:is(.vg-card-f,.vg-act,.proto-foot) a.link:is(:hover,:focus-visible)::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){:is(.vg-card-f,.vg-act,.proto-foot) a.link::after{transition:none}}
.vg-act a.link{justify-content:center}

/* 21.10.2026 Prämie als eigene Zeile unten in der Bankzeile (Variante 3) statt Badge neben dem Logo */
.vg-row .vg-strip{grid-column:1/-1;position:relative;display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:2px;padding:10px 14px;border-radius:10px;background:#FFF1E4;box-shadow:inset 0 0 0 1px #F6C79B;color:#5A2E0E;font-size:15px;line-height:1.4}
.vg-strip>svg{flex:none;width:18px;height:18px;color:#E07A26}
.vg-strip b{color:#15252B;font-weight:650}
.vg-more{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:4px 2px;border:0;background:none;font:600 14px/1.2 var(--body);color:#0A6A73;cursor:pointer;white-space:nowrap}
.vg-more::after{content:"";flex:none;width:15px;height:15px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 7.2v4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 7.2v4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='1'/%3E%3C/svg%3E") center/contain no-repeat}
.vg-more:is(:hover,:focus-visible),.vg-strip.open .vg-more{text-decoration:underline;text-decoration-color:var(--apricot);text-decoration-thickness:2px;text-underline-offset:4px}
.vg-strip .vg-pop{left:auto;right:0}
.vg-strip .vg-pop::after{left:auto;right:34px}
@media(max-width:699px){.vg-more{margin-left:28px}}
html[data-theme="dark"] .vg-row .vg-strip{background:#2A2017;box-shadow:inset 0 0 0 1px #6B4526;color:#F3E6DA}
html[data-theme="dark"] .vg-strip b{color:#fff}
html[data-theme="dark"] .vg-strip>svg{color:#FFA552}
html[data-theme="dark"] .vg-more{color:#ACDEEB}
@media(max-width:699px){.vg-row .vg-strip{display:grid;grid-template-columns:18px 1fr;align-items:start;gap:6px 10px}.vg-strip>svg{margin-top:1px}.vg-strip .vg-more{grid-column:2;justify-self:start;margin-left:0}}
@media(max-width:699px){.vg-strip .vg-pop::after{right:auto;left:70px}}

/* 21.10.2026 Prämienzeile bündig mit Logo-Spalte, „So geht’s“ direkt nach der Frist */
.vg-row .vg-strip{grid-column:2/-1}
.vg-strip .vg-more{margin-left:8px}
.vg-strip .vg-pop{left:0;right:auto}
.vg-strip .vg-pop::after{left:22px;right:auto}
@media(max-width:699px){.vg-strip .vg-more{margin-left:0}.vg-strip .vg-pop::after{left:40px}}
.vg-strip .vg-pop::after{left:var(--ax,22px)!important}
@media(max-width:699px){.vg-strip .vg-pop{width:100%;box-sizing:border-box}}

/* 21.10.2026 Rangnummer als kleiner Kreis an der Logo-Ecke statt eigener Spalte (Variante 2) – mehr Platz für Konditionen */
.vg-row.vg-nr{grid-template-columns:160px minmax(150px,1fr) minmax(190px,1fr) 150px;grid-template-areas:"b p c a" "n n n a"}
@media(max-width:1099px){.vg-row.vg-nr{grid-template-columns:1fr 1fr;grid-template-areas:"b p" "c a" "n n"}}
@media(max-width:699px){.vg-row.vg-nr{grid-template-columns:1fr;grid-template-areas:"b" "p" "c" "n" "a"}}
.vg-nr .vg-bank{position:relative}
.vg-nr .vg-bank .vg-rank{position:absolute;left:-10px;top:-10px;z-index:2;width:26px;height:26px;margin:0;font:600 13px/26px var(--body);box-shadow:0 0 0 3px var(--bg,#fff)}
.vg-nr.vg-top .vg-bank .vg-rank{box-shadow:0 0 0 3px var(--tint)}
.vg-row.vg-nr .vg-strip{grid-column:1/-1}

/* 21.10.2026 Leere Ecke oben links in Tabellen: keine eigene obere Linie (sah aus wie halbe Kante) */
:is(.art-prose,.know-prose) thead td:is(.ecke,:empty){border-top:0!important}

/* 21.10.2026 Vergleichsliste: Prüfdatum neben der Kontenzahl; Kopfzeile ohne „#“-Spalte passend zur Rangnummer an der Logo-Ecke */
.vg-n .vg-stand{font-weight:500;color:var(--muted);white-space:normal}
.vg-n .vg-stand::before{content:"·";margin-right:12px;color:var(--muted)}
.vg-thead.vg-nr{grid-template-columns:160px minmax(150px,1fr) minmax(190px,1fr) 150px;gap:20px}

/* 21.10.2026 Autorenzeile Variante A: Name oben, darunter „Aktualisiert“ und „… geprüft“ mit Symbolen */
.author .au-t{display:flex;flex-direction:column;gap:3px;line-height:1.35}
.author .au-n{font-size:15px;color:var(--ink)}
.author .au-n small{margin-left:4px;font-size:13.5px;color:var(--muted)}
.author .au-m{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:13.5px;color:var(--muted)}
.author .au-m>span{display:inline-flex;align-items:center;gap:5px}
.author .au-m svg{flex:none;color:#0A6A73}
html[data-theme="dark"] .author .au-m svg{color:#ACDEEB}
.author .au-m>span{gap:0;white-space:pre-wrap}.author .au-m svg{margin-right:5px}

/* 21.10.2026 Autorenkarte öffnet unter der ganzen Autorenzeile (verdeckt die Datumszeile nicht mehr) */
.author{position:relative}
.author .ap{position:static}
.author .ap-card{top:100%;left:52px}
.author .ap.ap-up .ap-card{top:auto;bottom:100%}
@media(max-width:600px){.author .ap-card{left:0}}

/* 21.10.2026 Autorenkarte: „Autorin von …“ ohne Einzug (Leerzeichen zwischen Name und Zusatz) */
.ap-top>span{display:flex;flex-direction:column}
.author .ap-card small{margin-left:0}

/* 21.10.2026 Hinweis in den Karten als Fußleiste der Karte (heller Streifen mit Info-Symbol) statt grauer Text unter dem Button */
.vg-card .vg-good{display:flex;gap:10px;align-items:flex-start;margin:18px -24px -24px!important;padding:14px 24px 16px!important;background:#F4F7F7!important;border-top:1px solid var(--line);border-radius:0 0 var(--r-lg) var(--r-lg)!important;color:var(--text)!important;font-size:14px;line-height:1.5}
.vg-card .vg-good::before{content:"";flex:none;width:16px;height:16px;margin-top:2px;background:#0A6A73;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 7.2v4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='1'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6.25' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Cpath d='M8 7.2v4' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='4.9' r='1'/%3E%3C/svg%3E") center/contain no-repeat}
html[data-theme="dark"] .vg-card .vg-good{background:#1B2224!important}
html[data-theme="dark"] .vg-card .vg-good::before{background:#ACDEEB}
.vg-card .vg-good{align-self:stretch!important}

/* 21.10.2026 Tabellen mit kurzer Beschriftungsspalte und langen Werten: erste Spalte ab Tablet nicht umbrechen */
@media(min-width:601px){table.tb-k1 :is(th,td):first-child{white-space:nowrap;-webkit-hyphens:manual;hyphens:manual}}

/* 21.10.2026 Entscheidungshilfe: ruhigere Abstände, Buttons gleich breit (linke Kanten bündig) */
.decide .dec-row{padding:22px 24px;row-gap:12px}
.decide .dec-why{margin-top:4px}
.decide .btn-row .btn{min-width:250px;justify-content:center}
@media(max-width:599px){.decide .dec-row{padding:18px 16px}.decide .btn-row .btn{min-width:0;width:100%}.decide .btn-row{align-items:stretch}}
/* Situation immer als Zeile über Bank und Button – die Inhaltsspalte ist nur ~760 px breit */
@media(min-width:600px){.decide .dec-row{grid-template-columns:minmax(0,1fr) auto}.decide .dec-sit{grid-column:1/-1}}

/* 21.10.2026 Entscheidungshilfe: kurze Buttons („Zur DKB“, 180 px), klare Rangfolge – Situation 16 px, Bankname ohne Unterstrich (erst beim Hover) */
.decide .btn-row .btn{min-width:180px}
.decide .dec-sit{font-size:16px}
.decide .dec-bank{font-size:15.5px;font-weight:650}
.decide .dec-bank a{text-decoration:none!important;background:none!important}
.decide .dec-bank a:is(:hover,:focus-visible){text-decoration:underline!important;text-decoration-color:var(--apricot)!important;text-decoration-thickness:2px!important;text-underline-offset:3px}
.decide .dec-why{color:var(--text);opacity:.85}

/* 21.10.2026 Entscheidungshilfe: alle Buttons exakt gleich breit */
.decide .btn-row .btn{width:200px;min-width:0;justify-content:center;white-space:nowrap}
@media(max-width:599px){.decide .btn-row .btn{width:100%}}

/* 21.10.2026 Startseite FAQ wie auf den übrigen Seiten: gleiche Schrift, Kreis-Symbol, Antwort volle Breite */
:root .home-body .faq summary{font-family:Inter,system-ui,-apple-system,sans-serif;font-size:17px;line-height:1.62;color:#0F1E24}
:root .home-body .faq details[open] summary{color:#0F4C5C}
:root .home-body .faq summary::after{-webkit-mask:none!important;mask:none!important;width:28px;height:28px;margin-top:0;border-radius:50%;background:#F4F7F7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v8M4 8h8' fill='none' stroke='%230E7C86' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat!important}
:root .home-body .faq details[open] summary::after{background-color:#F4F7F7!important}
:root .home-body .faq .a{max-width:none}
:root .home-body .faq details{border-bottom-color:#E5EAEC}
html[data-theme="dark"] .home-body .faq summary{color:#E6EEF0}
html[data-theme="dark"] .home-body .faq details[open] summary{color:#ACDEEB}
html[data-theme="dark"] .home-body .faq summary::after,html[data-theme="dark"] .home-body .faq details[open] summary::after{background:#1B2224 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 4v8M4 8h8' fill='none' stroke='%23ACDEEB' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat!important}
html[data-theme="dark"] .home-body .faq details{border-bottom-color:#2C3638}
:root .home-body .faq details{border-bottom-color:#E5EAEC!important}
html[data-theme="dark"] .home-body .faq details{border-bottom-color:#2C3638!important}

/* Hinweis-Karten (.lc-i): etwas mehr Innenabstand und Luft zwischen Karten (21.10.2026) */
.lc{gap:20px}
.lc-i{padding:22px 24px 22px 22px;gap:14px}
.lc-i h3{margin:0 0 8px}
@media (max-width:600px){.lc{gap:14px}.lc-i{padding:18px 18px 18px 16px;gap:12px}}

/* Zusatz zum Banknamen in Tabellen („Online-Konto“, „Aktiv“) als zweite Zeile unter dem Namen (21.10.2026) */
td .tb-zus{display:block;margin:2px 0 0 56px;font-size:.86em;font-weight:400;line-height:1.35;color:var(--muted)}
@media(max-width:600px){td .tb-zus{margin-left:0}}

/* Sehr schmale Handys (≤ 340 px): Tabellenzellen etwas schmaler polstern, damit 3 Spalten ohne Querscrollen passen (21.10.2026) */
@media(max-width:340px){:is(.art-prose,.know-prose) table :is(th,td){padding-left:9px!important;padding-right:9px!important}}

/* Empfehlungskarten (.pick): Bank-Logo vor dem Titel, wie in den Tabellen (21.10.2026) */
:is(.art-prose,.know-prose) .pick-head{display:flex;align-items:center;gap:12px}
:is(.art-prose,.know-prose) .pick-logos{flex:none;display:flex;gap:6px}
:is(.art-prose,.know-prose) .pick-logo{display:grid;place-items:center;width:56px;height:36px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:0 6px;box-sizing:border-box}
:is(.art-prose,.know-prose) .pick-logo img{display:block;max-width:100%;max-height:18px;width:auto;height:auto}
:is(.art-prose,.know-prose) .pick-head .proto-title{margin:0}

/* Empfehlungskarten: Teile einer Reihe auf einer Linie (Subgrid), zwei Logos kleiner (21.10.2026) */
:is(.art-prose,.know-prose) .picks{grid-auto-rows:auto}
:is(.art-prose,.know-prose) .proto.pick{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:10px;align-content:start}
:is(.art-prose,.know-prose) .picks:not(:has(.pick-for:not(:empty))) .proto.pick{grid-row:span 3}
:is(.art-prose,.know-prose) .proto.pick .pick-for:empty{display:none}
:is(.art-prose,.know-prose) .proto.pick .pick-for{align-self:start}
:is(.art-prose,.know-prose) .pick-body{display:flex;flex-direction:column;gap:8px}
:is(.art-prose,.know-prose) .proto.pick .btn-row{align-self:start;margin-top:0}
:is(.art-prose,.know-prose) .pick-logos:has(.pick-logo+.pick-logo){gap:4px}
:is(.art-prose,.know-prose) .pick-logos:has(.pick-logo+.pick-logo) .pick-logo{width:46px;height:32px;padding:0 5px}
:is(.art-prose,.know-prose) .pick-head:has(.pick-logo+.pick-logo){gap:8px}
:is(.art-prose,.know-prose) .pick-logos:has(.pick-logo+.pick-logo) .pick-logo img{max-height:14px}

/* „… im Detail“ in Empfehlungskarten: Pfeil wie „Details →“ im Vergleich (21.10.2026) */
:is(.art-prose,.know-prose) .proto.pick a.btn.ghost{display:inline-flex;align-items:center;justify-content:center;gap:6px}
:is(.art-prose,.know-prose) .proto.pick a.btn.ghost::after{content:"";flex:none;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s ease}
:is(.art-prose,.know-prose) .proto.pick a.btn.ghost:is(:hover,:focus-visible)::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){:is(.art-prose,.know-prose) .proto.pick a.btn.ghost::after{transition:none}}

/* Text-Links mit Pfeil überall gleich: ohne Unterstrich, beim Überfahren orange Linie wie „Details →“ im Vergleich (21.10.2026) */
:is(.art-prose,.know-prose) .proto.pick .btn-row a.btn.ghost{text-decoration:none}
:is(.art-prose,.know-prose) .proto.pick .btn-row a.btn.ghost:is(:hover,:focus-visible),:root .dd-all:is(:hover,:focus-visible),:root .nav a.dd-all:is(:hover,:focus-visible){background:none!important;box-shadow:none!important;text-decoration:underline;text-decoration-color:var(--apricot);text-decoration-thickness:2px;text-underline-offset:4px}

/* Kurzlisten mit Logos (Seitenleiste „Beliebte …“, Menü „Banken“): Unterzeile besser lesbar (21.10.2026) */
:root body .mini .bn small{font-size:14.5px;line-height:1.45;color:var(--text);display:block;margin-top:2px}
:root body .b5 .bn small{font-size:13.5px;line-height:1.4;color:var(--text);margin-top:2px}

/* Vergleich: Button-Spalte breiter, damit „Zur Deutschen Bank“ samt Pfeil in den Button passt; alle Buttons gleich breit (21.10.2026) */
@media(min-width:1100px){:root .vg-row.vg-nr,:root .vg-thead.vg-nr{grid-template-columns:160px minmax(120px,1fr) minmax(150px,1fr) 204px}
:root .vg-row.vg-nr .vg-act .btn{width:100%;box-sizing:border-box;padding-left:14px;padding-right:14px}}

/* Hinweis-Absätze („Gut zu wissen:“, „Wichtig:“, „Tipp:“, „Hinweis:“): farbige Linie links (21.10.2026) */
main p.hinweis{border-left:4px solid var(--apricot);background:var(--soft);border-radius:0 12px 12px 0;padding:14px 18px;margin:20px 0}
main p.hinweis strong:first-child{color:var(--ink)}

/* Zwei Angaben in einer Tabellenzelle als kurze Liste (Bedingung · was als Eingang zählt) (21.10.2026) */
main td ul.tb-list{margin:0;padding:0;list-style:none;display:grid;gap:6px}
main td ul.tb-list li{position:relative;padding-left:14px;margin:0}
main td ul.tb-list li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--petrol)}

/* Hinweis-Kästen: volle Breite, Farbe je Art (Gut zu wissen petrol, Tipp grün, Wichtig orange, Hinweis blau) (21.10.2026) */
main p.hinweis{--hw:var(--petrol);border-left-color:var(--hw);background:var(--soft)}  /* Hintergrund überall gleich, nur die Linie trägt die Farbe */
main p.hinweis.hw-gut{--hw:#0E7C86}
main p.hinweis.hw-tipp{--hw:#2F8F5B}
main p.hinweis.hw-wichtig{--hw:#E8913A}
main p.hinweis.hw-info{--hw:#4A6FA5}

/* Liste in Tabellenzellen dezenter: kleiner grauer Punkt statt kräftigem Petrol (21.10.2026) */
main td ul.tb-list li{padding-left:12px}
main td ul.tb-list li::before{width:4px;height:4px;top:.72em;background:color-mix(in srgb,var(--muted) 60%,transparent)}

/* Fließtext: Zeilenumbruch ohne einzelne kurze Zeilen (text-wrap:pretty), Überschriften ausgeglichen (21.10.2026) */
main :is(.art-prose,.know-prose,.lead) p,main :is(.art-prose,.know-prose) li{text-wrap:pretty}
main :is(.art-prose,.know-prose) :is(h2,h3){text-wrap:balance}

/* Farbe der Hinweis-Linie nach Wichtigkeit: Tipp grün < Gut zu wissen petrol < Hinweis orange < Wichtig rot (21.10.2026) */
main p.hinweis.hw-tipp{--hw:#2F8F5B}
main p.hinweis.hw-gut{--hw:#0E7C86}
main p.hinweis.hw-info{--hw:#E8913A}
main p.hinweis.hw-wichtig{--hw:#C8473A}

/* Status-Plakette in Tabellen (Ja / Einzelfall / Nein / Unklar), auf einen Blick lesbar (21.10.2026) */
main td .tb-st{display:flex;width:fit-content;align-items:center;gap:5px;margin:0 0 5px;padding:2px 9px 2px 7px;border-radius:999px;font-size:13px;font-weight:600;line-height:1.5;white-space:nowrap}
main td .tb-st.st-ja{background:#DDF1E5;color:#1F6B42}
main td .tb-st.st-nein{background:#F8E0DD;color:#9B3328}
main td .tb-st.st-einzelfall{background:#F8EAD5;color:#8A5A12}
main td .tb-st.st-unklar{background:#ECEFF0;color:#56666C}
/* Vergleich: Filterleiste springt nicht beim Filtern (21.10.2026) */
html{scrollbar-gutter:stable}
.vg-cnt{display:inline-block;min-width:2ch;font-variant-numeric:tabular-nums;text-align:center}
.vg-chk span{padding-left:16px;padding-right:16px}
.vg-chk input:checked+span{padding-left:6px;padding-right:9px}
.vg-reset[hidden]{display:inline-block;visibility:hidden}
#vg-n{font-variant-numeric:tabular-nums}
@media(min-width:700px){
  .vg-filter .vg-n{grid-row:n;grid-column:1/-1;padding-right:300px;box-sizing:border-box;min-width:0}
}
@media(max-width:699px){
  .vg-filter .vg-n{flex-wrap:wrap;row-gap:4px;white-space:normal}
  .vg-filter .vg-n .vg-stand{order:3;flex-basis:100%}
  .vg-filter .vg-n .vg-stand::before{content:none}
  .vg-toggle{min-width:126px;justify-content:center}
}

/* Reiter-Leiste: Verlauf und Pfeil, wenn sie seitlich weitergeht (21.10.2026) */
.tabs-sc{position:relative;flex:1;min-width:0;display:flex}
.tabs-sc ul{flex:1;min-width:0;scroll-behavior:smooth}
.tabs-sc.mr ul{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 72px),transparent calc(100% - 8px));mask-image:linear-gradient(to right,#000 calc(100% - 72px),transparent calc(100% - 8px))}
.tabs-sc.ml ul{-webkit-mask-image:linear-gradient(to right,transparent 8px,#000 72px);mask-image:linear-gradient(to right,transparent 8px,#000 72px)}
.tabs-sc.ml.mr ul{-webkit-mask-image:linear-gradient(to right,transparent 8px,#000 72px,#000 calc(100% - 72px),transparent calc(100% - 8px));mask-image:linear-gradient(to right,transparent 8px,#000 72px,#000 calc(100% - 72px),transparent calc(100% - 8px))}
.tabs-ar{position:absolute;top:50%;transform:translateY(-50%);display:none;place-items:center;width:32px;height:32px;padding:0;border-radius:50%;background:#fff;border:1px solid #CFE0E3;box-shadow:0 2px 6px rgba(15,30,36,.10);color:var(--petrol);cursor:pointer}
.tabs-ar.r{right:0}.tabs-ar.l{left:0}.tabs-ar.l svg{transform:rotate(180deg)}
.tabs-ar:hover{border-color:var(--petrol)}
.tabs-sc.mr .tabs-ar.r,.tabs-sc.ml .tabs-ar.l{display:grid}
/* 21.10.2026 Rangnummer sitzt außerhalb der Logo-Fläche: Mittelpunkt genau auf der Ecke, überdeckt kein Logo mehr (Revolut, DKB …) */
.vg-nr .vg-bank .vg-rank{left:-16px;top:-16px;width:24px;height:24px;font:600 12px/24px var(--body)}
.vg-nr .vg-logo-frame{padding-left:12px}
/* Weiterlesen-Links („Link:“-Zeilen, .textlinks) wie „… im Detail →“: Pfeil-Icon, ohne Unterstrich, beim Überfahren orange Linie und Pfeil rückt (21.10.2026) */
:root main .textlinks a{display:inline;font-weight:600;color:var(--petrol);text-decoration:none!important;background:none!important;box-shadow:none!important}
:root main .textlinks a::after{content:""!important;display:inline-block;vertical-align:-1px;margin-left:6px;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s ease}
:root main .textlinks a:is(:hover,:focus-visible){text-decoration-line:underline!important;text-decoration-color:var(--apricot)!important;text-decoration-thickness:2px!important;text-underline-offset:4px}
:root main .textlinks a:is(:hover,:focus-visible)::after{transform:translateX(3px)}
:root main .textlinks li+li{margin-top:8px}
@media(prefers-reduced-motion:reduce){:root main .textlinks a::after{transition:none}}

/* Status-Plakette und Begründung in einer Zeile, Plaketten gleich breit → Text bündig (21.10.2026, „kompakter“) */
main td .tb-stz{display:flex;align-items:baseline;gap:12px}
@media(min-width:601px){main td .tb-st{min-width:98px;box-sizing:border-box;justify-content:center}}
main td .tb-stz .tb-st{flex:none;margin:0;position:relative;top:-1px}
main td .tb-stz .tb-stt{min-width:0}
@media(max-width:600px){main td .tb-stz{flex-direction:column;align-items:flex-start;gap:4px}main td .tb-stz .tb-st{top:0}}
@media(max-width:360px){main td .tb-st{font-size:12.5px;padding:2px 7px 2px 5px;gap:4px}}

/* Bankkarten (.lc-i mit Logo): Logo und Titel in einer Zeile, Text darunter über die ganze Breite – kein Einzug links (21.10.2026) */
.lc-i:has(>.lc-logo){display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:0;align-items:center;align-content:start}
.lc-i:has(>.lc-logo)>div{display:contents}
.lc-i:has(>.lc-logo)>div>h3{grid-column:2;margin:0}
.lc-i:has(>.lc-logo)>div>:not(h3){grid-column:1/-1}
.lc-i:has(>.lc-logo)>div>h3+*{margin-top:12px}
/* Alle Karten mit Symbol links (Hinweis-Karten mit i/Häkchen, Prämien-Kasten, „Das brauchen Sie“): Symbol und Titel in einer Zeile, Text darunter über die volle Breite – kein Einzug (21.10.2026) */
:is(.lc-i:has(>.mk),.praemie-box,.need-list li:has(>.ni)){display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:12px;row-gap:0;align-items:center;align-content:start}
:is(.lc-i:has(>.mk),.praemie-box,.need-list li:has(>.ni))>div{display:contents}
:is(.lc-i:has(>.mk),.praemie-box,.need-list li:has(>.ni))>div>:first-child{grid-column:2;margin:0}
:is(.lc-i:has(>.mk),.praemie-box,.need-list li:has(>.ni))>div>:not(:first-child){grid-column:1/-1}
.lc-i:has(>.mk)>div>:nth-child(2){margin-top:12px}
:is(.praemie-box,.need-list li:has(>.ni))>div>:nth-child(2){margin-top:8px}
.lc-i>.mk{margin-top:0}
/* Rangnummern 2+ besser sichtbar: weiße Fläche, Petrol-Rand und Petrol-Ziffer; Platz 1 bleibt gefüllt (21.10.2026) */
.vg-nr:not(.vg-top) .vg-bank .vg-rank{background:#fff;color:var(--petrol);font-weight:700;box-shadow:inset 0 0 0 1.5px #7FAAB2,0 0 0 3px var(--bg,#fff)}
/* Rangnummer mit Luft zum Zeilenrand (oben ≥ 10 px, links ≥ 8 px), statt direkt an der Linie (21.10.2026) */
:root .vg-row.vg-nr{padding-top:28px}
@media(max-width:699px){:root .vg-row.vg-nr{padding-top:26px;padding-left:24px}}
/* Vergleich: Bank, Preis und Merkmale oben bündig – Rangnummer hat in jeder Zeile denselben Abstand zur Linie (21.10.2026) */
:root .vg-row.vg-nr :is(.vg-bank,.vg-price,.vg-crit){align-self:start}
/* „Details“ unter den Bank-Buttons (Alternativen-Karten) mit Pfeil wie überall (21.10.2026) */
:root .alt .act a.link{text-decoration:none;font-weight:600;color:var(--petrol)}
:root .alt .act a.link::after{content:"";display:inline-block;vertical-align:-1px;margin-left:6px;width:14px;height:14px;background:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h10M9 4l4 4-4 4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .15s ease}
:root .alt .act a.link:is(:hover,:focus-visible){text-decoration:underline;text-decoration-color:var(--apricot);text-decoration-thickness:2px;text-underline-offset:4px;background:none}
:root .alt .act a.link:is(:hover,:focus-visible)::after{transform:translateX(3px)}
@media(prefers-reduced-motion:reduce){:root .alt .act a.link::after{transition:none}}
/* Alternativen-Karten: Häkchen besser sichtbar – gefüllter Kreis wie im Vergleich statt weiß auf hellgrau (21.10.2026) */
:root .alt .kp li{gap:10px}
:root .alt .kp li::before{width:20px;height:20px;margin-top:0;background:#D6E8EB url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.3 2.3 4.7-4.9' fill='none' stroke='%230F4C5C' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}

/* Alternativen-Karten: Einschränkung mit „!“ wie im Vergleich; Trennlinie in allen Karten einer Reihe auf gleicher Höhe (21.10.2026) */
:root .alt .kp li.kp-hin::before{background:#F6E3D0 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3.8v5' fill='none' stroke='%239A4F17' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='8' cy='12' r='1.3' fill='%239A4F17'/%3E%3C/svg%3E") center/12px no-repeat}
@media(min-width:860px){:root .alts{row-gap:0}:root .alts>.alt{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0;margin-bottom:20px}:root .alts>.alt>.act{align-self:end}}
/* Tarif-Plakette bleibt im Satz, auch in Bausteinen, deren Text-Span als Block gesetzt ist („Das brauchen Sie“) (21.10.2026) */
:root main span.tarif{display:inline-block!important;width:auto!important}
/* Tarifkarten: „Günstigstes Modell“ als Plakette auf der oberen Kartenlinie statt rechts oben im Inhalt – überdeckt nie den Modellnamen (21.10.2026) */
:root .plan .tag{position:absolute!important;top:0!important;right:auto!important;left:50%!important;transform:translate(-50%,-50%);background:#fff!important;border:1.5px solid var(--petrol)!important;padding:3px 12px!important;border-radius:999px!important;font-size:12.5px!important;line-height:1.3;white-space:nowrap;z-index:1}
:root .plans:has(.plan .tag){margin-top:14px}
/* Tarifkarten: bei zwei Modellen zwei gleich breite Spalten über die ganze Breite statt einer leeren dritten Spalte (21.10.2026) */
@media(min-width:860px){:root .plans:has(>.plan:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Aufzählungen im Fließtext (Ratgeber und Bankseiten): eigener runder Punkt in Petrol statt schwarzem Standard-Punkt, etwas mehr Luft (21.10.2026) */
:is(.art-prose,.know-prose) ul:not([class]){list-style:none;padding-left:0;margin:14px 0 0;max-width:46em}
:is(.art-prose,.know-prose) ul:not([class])>li{position:relative;padding-left:22px;margin:8px 0}
:is(.art-prose,.know-prose) ul:not([class])>li::before{content:"";position:absolute;left:4px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--action,#0E7C86)}
:is(.art-prose,.know-prose) td ul:not([class])>li{padding-left:16px}
:is(.art-prose,.know-prose) td ul:not([class])>li::before{left:2px;width:5px;height:5px;background:#9AB0B5}

/* Quellenangaben im Text klein und grau wie die Quellenzeile der Konditionen (21.10.2026) */
:root main .quellen{font-size:13.5px;line-height:1.5;color:var(--muted)}
:root main .quellen a{color:var(--muted);text-decoration-color:#C9D6D9;text-decoration-thickness:1px}
:root main .quellen a:is(:hover,:focus-visible){color:var(--petrol);text-decoration-color:var(--apricot)}
:root main p.mit-quelle{margin-top:10px}
:root main p.mit-quelle .mehr{display:block;margin-top:6px}
/* Quellen als Fußnoten: hochgestellte Nummer im Text, Liste „Quellen“ am Seitenende (21.10.2026) */
:root main sup.fn{font-size:.68em;line-height:0;vertical-align:.55em;margin-left:1px;font-weight:600}
:root main sup.fn a{color:var(--petrol);text-decoration:none!important;background:none!important;padding:0 1px;border-radius:3px}
:root main sup.fn a:is(:hover,:focus-visible){color:var(--petrol);background:none!important;text-decoration:underline!important;text-decoration-color:var(--apricot)!important;text-decoration-thickness:2px!important;text-underline-offset:2px}
:root main sup.fn .fn-sep{color:var(--muted)}
:root .q-sec{padding-top:40px!important;padding-bottom:40px!important;border-top:1px solid var(--line)}
:root .q-sec .q-h{font-size:1.25rem!important;margin:0 0 4px}
:root .q-sec .q-note{font-size:13.5px;color:var(--muted);margin:0 0 14px}
:root .q-list{margin:0;padding-left:1.8em;columns:2 320px;column-gap:40px;font-size:14px;line-height:1.5;color:var(--text)}
:root .q-list li{break-inside:avoid;margin:0 0 8px;padding-left:2px}
:root .q-list li::marker{color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
:root .q-list a{color:var(--text);text-decoration-color:#C9D6D9}
:root .q-list a:is(:hover,:focus-visible){color:var(--petrol);text-decoration-color:var(--apricot)}
:root .q-list .q-host{color:var(--muted);font-size:12.5px;white-space:nowrap}
:root .q-list li:target{background:var(--tint);border-radius:6px;outline:4px solid var(--tint)}
/* Fußnoten-Nummern überall gleiche Farbe (in Schritt-Listen wird --petrol umdefiniert) (21.10.2026) */
:root main sup.fn a,:root main sup.fn a:is(:hover,:focus-visible){color:#0F4C5C}
/* Konditionen-Liste (.spec): Beschriftungsspalte so breit wie die längste Beschriftung (max. 230 px) statt fest 240 px/30 % – mehr Platz für die Werte (21.10.2026) */
@media(min-width:760px){
  :root .spec{display:grid;grid-template-columns:minmax(110px,max-content) minmax(0,1fr);column-gap:40px}
  :root .spec-row{grid-column:1/-1;grid-template-columns:subgrid!important;gap:0 40px}
  :root .spec-row dt{max-width:230px}
}

/* Startseite Lage-Karte: „Details →“ als Textlink wie in den Vergleichskarten (22.10.2026) */
.proto-foot a.link{font-weight:600;color:var(--petrol);text-decoration:none}

/* Startseite Lage-Karte (22.10.2026): „Details →“ in Farbe/Größe wie die Details-Links der Karten; „Für:“-Zeile ruhig, Lage als Zitat statt fett */
.home-body .proto .proto-foot a.link{color:#0F4C5C;font-size:15px}
html[data-theme="dark"] .home-body .proto .proto-foot a.link{color:#ACDEEB}
.home-body .finder-a .proto .proto-for b{font-weight:400;color:var(--ink)}
.home-body .finder-a .proto .proto-for b::before{content:"„"}
.home-body .finder-a .proto .proto-for b::after{content:"“"}

/* Vergleich: „Zurücksetzen“ mit Symbol (22.10.2026) */
.vg-reset{display:inline-flex;align-items:center;gap:6px;text-decoration:none}
.vg-reset span{text-decoration:underline;text-underline-offset:3px}
.vg-reset svg{flex:none;width:14px;height:14px}
.vg-reset:is(:hover,:focus-visible) span{text-decoration-color:var(--apricot);text-decoration-thickness:2px}

/* Banken-Menü mit zweiter Spalte „Oft gesucht“ (22.10.2026) */
.dd-bank5.has-oft{width:640px}
.dd-bank5 .b5-cols{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.b5 .lg-ini{font:700 12px var(--body);color:var(--muted);letter-spacing:.02em}
@media(max-width:979px){.dd-bank5.has-oft{width:auto}.dd-bank5 .b5-cols{grid-template-columns:1fr}.dd-bank5 .b5-cols>div+div{margin-top:14px}}

/* Schritte mit Überschrift im Fließtext (z. B. Newsletter „So funktioniert die Anmeldung“): kein Abstand über dem Titel (22.10.2026) */
:is(.art-prose,.know-prose) ol.steps>li>h3{margin:0 0 4px}
/* Seitenkarte: Anbieter ohne Logo zeigen ihr Kürzel (22.10.2026) */
.lg.lg-ini{font:700 12px var(--body);color:var(--muted);letter-spacing:.02em}
/* Ratgeber-Kopf: Knopf zur Entscheidungshilfe neben „Häufige Fragen“, gleiche Höhe wie der Sprunglink (22.10.2026) */
.hero-cta a.btn.dec{display:inline-flex!important;align-items:center;background:var(--action)!important;color:#fff!important;box-shadow:none!important;padding:0 22px;min-height:48px;font-size:15.5px}
.hero-cta a.btn.dec:hover,.hero-cta a.btn.dec:focus-visible{background:var(--action-hover)!important}
@media(max-width:479px){.hero-cta a.btn.dec{font-size:14.5px;padding:0 16px}}
/* Startseite Lage-Karte: „Für: …“ besser lesbar, so groß wie die Lagen links (22.10.2026) */
.home-body .finder-a .proto .proto-for{font-size:15.5px;line-height:1.45}
@media(max-width:479px){.home-body .finder-a .proto .proto-for{font-size:15px}}
/* Sprungziele mit id direkt an der Überschrift (z. B. #haeufige-fragen) nicht unter dem festen Kopf verstecken (22.10.2026) */
main :is(h2,h3)[id]{scroll-margin-top:96px}
@media(max-width:899px){main :is(h2,h3)[id]{scroll-margin-top:84px}}
/* Sehr schmale Bildschirme (≤ 359 px): Bank-Knöpfe mit Kurzform „Zur …“, Ghost-Knöpfe mit weniger Innenabstand – einzeilig (22.10.2026) */
.lb-s{display:none}
@media(max-width:359px){.lb-l{display:none}.lb-s{display:inline}.btn-row .btn.ghost{padding-left:16px;padding-right:16px}}