/* Rentnerado, Endfassung: Piste 1 « Klartext » (Aufbau nach finanztip.de) mit Kopf, Bühne und Ranglistenkarten der Piste 2 */
@font-face{font-family:'Literata';font-style:normal;font-weight:500 800;font-display:swap;src:url(/schrift/literata-500-800.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:italic;font-weight:400;font-display:swap;src:url(/schrift/figtree-400i.woff2) format('woff2')}
@font-face{font-family:'Figtree';font-style:normal;font-weight:400 800;font-display:swap;src:url(/schrift/figtree-400-800.woff2) format('woff2')}
:root{
  --nacht:#14213D; --nacht2:#22325A; --sonne:#FFC23D; --sonne2:#F2AE14;
  --moos:#2E7D4F; --moos-hell:#E2F0E7; --blau:#1F4FD1; --grund:#EEF1F5;
  --linie:#D5DBE5; --text:#1A2232; --grau:#4D586B; --zelle:#F3F5F9;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{margin:0;background:var(--grund);color:var(--text);font:400 19px/1.62 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-underline-offset:3px}
h1,h2,h3{font-family:Literata,Georgia,serif;color:var(--nacht);line-height:1.18;letter-spacing:-.01em}
h1{font-size:44px;font-weight:700;margin:14px 0 18px}
h2{font-size:31px;font-weight:650;margin:58px 0 14px}
h3{font-size:23px;font-weight:600;margin:0 0 8px}
.i{width:22px;height:22px;flex:none;vertical-align:-4px}

/* Oberleiste */
.oberleiste{position:sticky;top:0;z-index:50;background:var(--blau)}
.oberleiste-link{display:flex;align-items:center;justify-content:center;gap:22px;padding:9px 16px;color:#fff;text-decoration:none;font-weight:800;font-size:18px}
.ol-kurz{display:none}
.ol-knopf{display:inline-flex;align-items:center;gap:6px;background:#fff;color:var(--blau);padding:7px 17px;border-radius:999px;font-weight:800;white-space:nowrap}
.ol-knopf .i{width:18px;height:18px}
.oberleiste-link:hover .ol-knopf{background:var(--sonne);color:var(--nacht)}

/* Kopf: weiss und schlicht (nach Piste 2), Farben der Piste 1 */
.kopf{background:#fff;border-bottom:1px solid var(--linie)}
.kopf-oben{max-width:1130px;margin:0 auto;display:flex;align-items:center;gap:20px;padding:20px 14px 10px}
.kopf-logo{display:block;line-height:0}
.kopf-knoepfe{margin-left:auto;display:flex;gap:12px}
.pille{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--nacht);border-radius:999px;padding:8px 20px;color:var(--nacht);text-decoration:none;font-weight:700;font-size:17px;white-space:nowrap}
.pille .i{width:18px;height:18px}
.pille:hover{background:var(--grund)}
.pille.voll{background:var(--sonne);border-color:var(--sonne);font-weight:800}
.pille.voll:hover{background:var(--sonne2);border-color:var(--sonne2)}
.kopf-navi{max-width:1130px;margin:0 auto;display:flex;gap:27px;padding:4px 14px 13px}
.kopf-navi a{color:var(--nacht);text-decoration:none;font-weight:600;font-size:17px;white-space:nowrap}
.kopf-navi a:hover{color:var(--blau)}
.kopf-navi a.aktiv{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:9px;text-decoration-color:var(--sonne)}

/* Bühne der Startseite (Aufbau Piste 2, Farben Piste 1) */
.promo{background:var(--nacht);color:#E8ECF4;overflow:hidden}
.promo-innen{max-width:1130px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:46px;align-items:center;padding:40px 14px 46px}
.promo-bild{position:relative;display:block;padding:24px 0}
.promo-streifen{position:absolute;left:-200px;right:22%;top:50%;height:44px;background:var(--sonne);transform:translateY(-50%)}
.promo-bild img{position:relative;width:86%;margin-left:6%;border:9px solid #fff;border-radius:6px;transform:rotate(-5deg);box-shadow:0 18px 30px rgba(0,0,0,.35);transition:transform .25s}
a.promo-bild:hover img{transform:rotate(-3deg) scale(1.02)}
.promo-text{min-width:0}
.promo-text h1{color:#fff;font-size:42px}
.promo-text p{font-size:19px;margin:0 0 12px;max-width:640px}
.promo .autor{color:#C9D1E0}
.promo .autor a{color:#fff}
.promo-logos{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.promo-logos a{background:#fff;border-radius:6px;padding:9px 12px;display:block;border:2px solid transparent}
.promo-logos a:hover{border-color:var(--sonne)}
.promo-logos img{height:24px;width:auto;max-width:118px}
.abz{display:inline-block;font-weight:800;font-size:15px;line-height:1.2;padding:5px 9px;border-radius:3px;margin:0 6px 4px 0}
.abz.marke{background:var(--sonne);color:var(--nacht)}
.abz.empf{background:var(--moos);color:#fff}
.abz.gruen{background:var(--moos-hell);color:#1D5C38}
.abz.hell{background:#E4EAF7;color:#1B3366}
.abz.platz{background:var(--nacht);color:#fff}

/* Inhalt */
.haupt{max-width:1130px;margin:0 auto;padding:0 14px}
.buehne{max-width:900px;margin:0 0 0 76px;padding-top:30px}
.krume{font-size:16px;color:var(--grau);display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0}
.krume a{color:var(--grau);text-decoration:none}
.krume a:hover{text-decoration:underline}
.krume .i{width:15px;height:15px}
.lead{font-size:22px;line-height:1.5;color:var(--text)}
.autor{display:flex;align-items:center;gap:13px;margin:8px 0 18px}
.autor-bilder{display:flex}
.autor img{width:46px;height:46px;border-radius:50%;border:3px solid var(--grund)}
.autor-siegel{width:46px;height:46px;border-radius:50%;background:#fff;border:3px solid var(--grund);margin-left:-12px;display:grid;place-items:center}
.autor p{margin:0;font-size:17px;line-height:1.35}
.autor p span{color:var(--grau)}
.promo .autor p span{color:#C9D1E0}
.promo .autor img,.promo .autor-siegel{border-color:var(--nacht)}
.logozeile{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin:4px 0 6px}
.logozeile span{font-size:15px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--grau);margin-right:6px}
.logozeile a{display:block;background:#fff;border:1px solid var(--linie);border-radius:6px;padding:8px 11px;transition:border-color .15s}
.logozeile a:hover{border-color:var(--blau)}
.logozeile img{height:24px;width:auto;max-width:130px}
.buehne-logo{display:inline-block;margin:20px 0 0}
.buehne-logo img{height:40px;width:auto}

/* Podest = Auf einen Blick */
.aufeinenblick{margin:26px 0 0 76px;max-width:900px}
.blick-titel{font-family:Figtree,sans-serif;font-size:17px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;color:var(--grau);margin:0 0 10px}
.podest{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:17px}
.podest-karte{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:6px;overflow:hidden;text-decoration:none;color:var(--text);padding-bottom:16px;box-shadow:0 1px 3px rgba(20,33,61,.14);transition:transform .15s,box-shadow .15s;height:100%}
.podest-karte:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(20,33,61,.16)}
.podest-band{align-self:stretch;background:#5E6B80;color:#fff;font-weight:800;font-size:15px;padding:5px 0;margin-bottom:18px}
.podest-1 .podest-band{background:var(--moos)}
.podest-karte .markenlogo{height:38px;width:auto;max-width:76%;margin-bottom:10px}
.podest-name{font-size:17px}
.podest-note{display:flex;align-items:center;gap:7px;margin:6px 0 13px;font-size:16px;color:var(--grau)}
.podest-note b{color:var(--text);font-size:19px}
.podest-klein{font-size:15px;color:var(--grau);margin-top:10px;padding:0 16px;line-height:1.38}
.aufeinenblick.klein{margin:22px 0}
.knopf-gelb,a.cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--sonne);color:var(--nacht);font-weight:800;text-decoration:none;border-radius:999px;padding:12px 26px;font-size:18px;border:0;transition:background .15s;text-align:center}
.knopf-gelb:hover,a.cta:hover{background:var(--sonne2)}
.knopf-gelb.gross{font-size:21px;padding:16px 38px}
.podest-karte .knopf-gelb{min-width:76%}
.punkte{display:inline-flex;gap:3px}
.punkte i{width:15px;height:9px;border-radius:5px;background:#CFD6E0}
.punkte i.an{background:var(--moos)}
.knopf-rand{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:999px;padding:11px 18px;font-weight:800;text-decoration:none;font-size:17px;text-align:center;border:1.5px solid var(--linie);color:var(--nacht);background:#fff}
.knopf-rand:hover{border-color:var(--nacht)}

/* Auf einen Blick als Liste */
.aufeinenblick.liste{background:#fff;border-radius:8px;padding:24px 34px 12px;box-shadow:0 1px 3px rgba(20,33,61,.1)}
.aufeinenblick.liste .haken li{font-size:18px}
.haken{list-style:none;padding:0;margin:0 0 24px}
.haken li{display:flex;gap:12px;align-items:flex-start;margin:0 0 11px}
.haken .i{color:var(--moos);width:25px;height:25px;margin-top:3px}

/* Matrix */
.matrix-bereich{margin:30px 0 34px;background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(20,33,61,.1);border:1px solid var(--linie);overflow:hidden}
.matrix-leiste{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 22px;border-bottom:1px solid var(--linie)}
.matrix-leiste p{margin:0;font-size:17px}
.matrix-pfeile{display:flex;gap:8px}
.matrix-pfeile button{width:42px;height:42px;border-radius:50%;border:1px solid var(--linie);background:#fff;cursor:pointer;color:var(--nacht);display:grid;place-items:center}
.matrix-pfeile button:first-child .i{transform:rotate(180deg)}
.matrix-rahmen{overflow-x:auto;scroll-snap-type:x proximity}
.matrix{border-collapse:separate;border-spacing:0;font-size:16px;min-width:100%}
.matrix th,.matrix td{padding:13px 12px;border-bottom:1px solid #E7EBF1;text-align:center;vertical-align:middle;min-width:172px;scroll-snap-align:start}
.matrix th[scope=row]{position:sticky;left:0;background:#fff;z-index:2;text-align:left;min-width:150px;font-weight:700;border-right:1px solid #E7EBF1}
.matrix thead th{padding:0;border:0;text-align:left}
.matrix thead th:first-child{position:sticky;left:0;background:#fff;z-index:2}
.matrix .rang{display:inline-block;background:#5E6B80;color:#fff;font-weight:800;font-size:14px;padding:2px 9px}
.matrix .sieger{display:inline-block;background:var(--moos);color:#fff;font-weight:800;font-size:14px;padding:2px 9px}
.matrix thead th.erster .rang{background:var(--moos)}
.matrix td.erster{background:#F3FAF5;box-shadow:inset 2px 0 0 var(--moos),inset -2px 0 0 var(--moos)}
.matrix .logo img{height:32px;width:auto;margin:0 auto 6px;max-width:150px}
.m-name{display:block;font-weight:700;font-size:16px}
.knopf-blau{display:inline-block;background:var(--nacht);color:#fff;font-weight:800;padding:9px 18px;border-radius:999px;text-decoration:none;white-space:nowrap}
.knopf-blau:hover{background:var(--blau)}
.m-note{display:block;font-size:18px;margin-top:4px}
.m-urteil{display:block;font-size:15px;color:var(--grau)}
.m-staerken td{vertical-align:top}
.m-staerken ul{text-align:left;margin:0;padding-left:17px;font-size:15px;line-height:1.4}
.m-staerken li{margin-bottom:5px}
.matrix-quelle{font-size:15px;color:var(--grau);padding:9px 22px;margin:0}

/* Ranglistenkarten (Aufbau Piste 2, Farben Piste 1) */
.rangliste{margin:26px 0 30px}
.eintrag{background:#fff;border:1.5px solid var(--linie);border-radius:8px;padding:14px;margin-bottom:17px}
.eintrag.erster{border-color:var(--moos);box-shadow:0 0 0 1px var(--moos)}
.eintrag-abz{margin-bottom:10px}
.eintrag-reihe{display:grid;grid-template-columns:150px 1.25fr 1.25fr 112px 176px;gap:8px;align-items:stretch}
.eintrag-logo{display:grid;place-items:center;padding:6px}
.eintrag-logo img{max-width:136px;max-height:44px;width:auto}
.zelle{background:var(--zelle);border-radius:4px;padding:12px 14px;display:flex;flex-direction:column;font-size:16px;line-height:1.4}
.zelle h3{font-size:21px;margin:0 0 4px}
.zelle h3 a{color:var(--nacht);text-decoration:none}
.zelle h3 a:hover{color:var(--blau)}
.zelle p{margin:0 0 8px}
.zelle-fuss{margin-top:auto;font-size:14px;color:var(--grau);border-top:1px solid #DFE4EC;padding-top:6px}
.zelle-punkte ul{list-style:none;margin:0;padding:0}
.zelle-punkte li{display:flex;gap:6px;margin-bottom:6px}
.zelle-punkte .i{width:18px;height:18px;color:var(--moos);margin-top:1px}
.zelle-note{align-items:center;text-align:center}
.notekreis{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:76px;height:76px;border-radius:50%;border:5px solid var(--moos);background:#fff;line-height:1}
.notekreis b{font-family:Literata,serif;font-size:24px;font-weight:800;color:var(--nacht)}
.notekreis small{font-size:12px;color:var(--grau);margin-top:3px}
.eintrag-knoepfe{display:flex;flex-direction:column;justify-content:center;gap:10px}
.eintrag-knoepfe .knopf-gelb{padding:11px 18px;font-size:17px}
.eintrag-fuss{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--linie);margin-top:10px;font-size:15px;border-radius:4px}
.eintrag-fuss > *{padding:8px 12px;text-align:center;display:flex;align-items:center;justify-content:center;gap:6px}
.eintrag-fuss a{border-right:1px solid var(--linie);font-weight:700;text-decoration:none}
.eintrag-fuss a:hover{text-decoration:underline}
.eintrag-fuss .i{width:16px;height:16px}
.eintrag-fuss.einzeln{grid-template-columns:1fr}
.artikel:not(.breit) .eintrag-reihe{grid-template-columns:130px 1fr 1fr 100px}
.artikel:not(.breit) .eintrag-knoepfe{grid-column:1/-1;flex-direction:row}
.artikel:not(.breit) .eintrag-knoepfe a{flex:1}

/* Markenkarten */
.markenkarte{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 1px 3px rgba(20,33,61,.1);border:1px solid var(--linie);margin:18px 0 22px}
.mk-bild{position:relative;display:block;overflow:hidden;cursor:pointer;background:#ddd;min-height:220px}
.mk-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .35s}
.mk-bild::after{content:"";position:absolute;inset:0;background:rgba(20,33,61,0);transition:background .2s}
.mk-bild:hover img{transform:scale(1.04)}
.mk-bild:hover::after{background:rgba(20,33,61,.18)}
.mk-pille{position:absolute;z-index:2;right:14px;bottom:14px;display:inline-flex;gap:6px;align-items:center;background:#fff;color:var(--nacht);font-weight:800;font-size:16px;padding:7px 14px;border-radius:999px;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.mk-pille .i{width:17px;height:17px}
.mk-text{padding:24px 28px 22px}
.mk-logo{display:inline-block}
.mk-logo img{height:34px;width:auto;margin-bottom:12px}
.mk-text h3{font-size:22px}
.mk-text h3 a{color:inherit;text-decoration:none}
.mk-note{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:17px}
.mk-text p{margin:0 0 6px}
.mk-knoepfe{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:14px 0 0!important}
.mk-test{display:inline-flex;align-items:center;gap:3px;font-weight:700;text-decoration:none}

/* Artikel */
.artikel-haupt .buehne{padding-top:26px}
.artikel-raster{display:grid;grid-template-columns:62px minmax(0,1fr);gap:14px;margin-top:30px;max-width:978px}
.artikel-raster.ohne-kapitel{grid-template-columns:minmax(0,1fr);margin-left:76px;max-width:900px}
.artikel-raster.voll{grid-template-columns:minmax(0,1fr);max-width:none;margin-left:0}
.kapitel{position:sticky;top:76px;align-self:start;background:#fff;border-radius:6px;padding:10px 0;text-align:center;box-shadow:0 1px 3px rgba(20,33,61,.1);max-height:calc(100vh - 100px);overflow:auto}
.kapitel p{margin:0 0 6px;color:var(--blau)}
.kapitel ol{list-style:none;margin:0;padding:0}
.kapitel a{display:block;padding:6px 0;color:var(--grau);text-decoration:none;font-weight:700;font-size:17px}
.kapitel a:hover,.kapitel a.hier{background:var(--grund);color:var(--blau)}
.artikel{background:#fff;border-radius:8px;padding:40px 70px 50px;max-width:900px;box-shadow:0 1px 3px rgba(20,33,61,.1);min-width:0}
.artikel.breit{max-width:none;padding:44px 64px 54px}
.artikel.breit > p,.artikel.breit > h2,.artikel.breit > h3,.artikel.breit > ul,.artikel.breit > ol,.artikel.breit > blockquote,.artikel.breit > figure,.artikel.breit > .gutzuwissen,.artikel.breit > .faq{max-width:800px}
.artikel h2{font-size:29px;margin:48px 0 12px}
.artikel h3{margin-top:28px}
.artikel > h2:first-child{margin-top:0}
.artikel > p:first-child,.artikel > .aufmacher + p{font-size:21px}
.artikel ul,.artikel ol{padding-left:26px}
.artikel li{margin-bottom:6px}
.cta-zeile{margin:26px 0}
.cta-zeile a.cta{padding:14px 32px;font-size:19px}
.steckbrief{margin:20px 0 26px}
.steckbrief dl{margin:0;border:1px solid var(--linie);border-radius:6px;overflow:hidden}
.steckbrief dl div{display:grid;grid-template-columns:170px 1fr}
.steckbrief dl div:nth-child(odd){background:#F5F7FA}
.steckbrief dt{font-weight:800;padding:12px 16px}
.steckbrief dd{margin:0;padding:12px 16px}
.gutzuwissen{background:#FFF6DC;border-radius:8px;padding:20px 26px;margin:26px 0}
.gutzuwissen p{margin:0 0 8px}
.gutzuwissen p:last-child{margin:0}
.gutzuwissen::before{content:"Gut zu wissen";display:block;font-weight:800;color:#8A5A00;margin-bottom:4px;font-size:16px;text-transform:uppercase;letter-spacing:.05em}
.vorteile,.nachteile{border-radius:8px;padding:20px 24px 10px;margin:20px 0}
.vorteile{background:var(--moos-hell)}
.nachteile{background:#F5F7FA;border:1px solid var(--linie)}
.vorteile::before,.nachteile::before{display:block;font-weight:800;font-size:16px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.vorteile::before{content:"Das spricht dafür";color:#1D5C38}
.nachteile::before{content:"Gut zu wissen";color:var(--grau)}
.vorteile ul,.nachteile ul{list-style:none;padding:0;margin:0}
.vorteile li,.nachteile li{padding-left:34px;position:relative;margin-bottom:10px}
.vorteile li::before,.nachteile li::before{content:"";position:absolute;left:0;top:3px;width:22px;height:22px;background-repeat:no-repeat;background-size:22px}
.vorteile li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232E7D4F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E")}
.nachteile li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D586B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E")}
.schritte{margin:24px 0}
.schritte ol{list-style:none;counter-reset:schritt;padding:0;margin:0}
.schritte li{counter-increment:schritt;position:relative;padding:4px 0 14px 58px;margin:0}
.schritte li::before{content:counter(schritt);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--nacht);color:#fff;font-weight:800;display:grid;place-items:center;font-size:18px}
.schritte li:not(:last-child)::after{content:"";position:absolute;left:19px;top:44px;bottom:2px;width:2px;background:var(--linie)}
blockquote.margrit{margin:30px 0;padding:22px 30px;background:var(--moos-hell);border-radius:8px;font-family:Literata,serif;font-style:italic;font-size:20px;line-height:1.55;color:var(--nacht)}
blockquote.margrit::after{content:"Margrit";display:block;font-family:Figtree,sans-serif;font-style:normal;font-weight:800;font-size:15px;color:var(--moos);margin-top:8px;text-transform:uppercase;letter-spacing:.06em}
blockquote.margrit p{margin:0}
.tabellenrahmen{overflow-x:auto;background:#fff;border-radius:8px;border:1px solid var(--linie);margin:20px 0 26px}
table.vergleich{border-collapse:collapse;width:100%;font-size:17px}
.vergleich th{background:#F5F7FA;text-align:left;padding:12px 14px;font-size:16px;vertical-align:bottom}
.vergleich td{padding:11px 14px;border-top:1px solid #E7EBF1;vertical-align:top}
.vergleich a.logo{display:inline-block;vertical-align:middle;margin-right:6px}
.vergleich a.logo img{height:24px;width:auto;max-width:118px}
.vergleich td:first-child{font-weight:700}
.vergleich th a.logo img{height:28px;max-width:140px}
.cta-mitte{display:flex;align-items:center;gap:22px;border-top:2px solid var(--nacht);border-bottom:1px solid var(--linie);padding:20px 0;margin:40px 0}
.cta-mitte .markenlogo{height:34px;width:auto}
.cta-mitte p{margin:0;font-size:17px;line-height:1.35;flex:1}
.alternativen{margin-top:50px}
.alt-reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}
.alt-karte{min-width:0;display:flex;flex-direction:column;gap:8px;border:1px solid var(--linie);border-radius:8px;padding:16px;text-decoration:none;color:var(--text);transition:border-color .15s,transform .15s}
.alt-karte:hover{border-color:var(--blau);transform:translateY(-2px)}
.alt-karte img{height:28px;width:auto;max-width:100%}
.alt-karte span{display:flex;align-items:center;gap:6px;font-weight:700;font-size:16px}
.alt-karte small{font-size:15px;line-height:1.35;color:var(--grau)}
.aufmacher{margin:0 0 26px}
.aufmacher img{border-radius:6px;width:100%}
.artikel figure{margin:34px 0}
.artikel figure img{border-radius:6px;width:100%}
.artikel figcaption{font-size:15px;color:var(--grau);margin-top:6px}

/* Markenbanner (Tests und Markenseiten) */
.markenbanner{display:grid;grid-template-columns:1.2fr 1fr;max-width:1102px;margin:23px auto 0;background:#fff;border-radius:8px;overflow:hidden;text-decoration:none;color:var(--text);box-shadow:0 1px 3px rgba(20,33,61,.12);position:relative;transition:box-shadow .15s}
.markenbanner:hover{box-shadow:0 8px 24px rgba(20,33,61,.18)}
.mb-band{position:absolute;left:0;top:0;background:var(--moos);color:#fff;font-weight:800;font-size:15px;padding:5px 16px;z-index:2;border-radius:0 0 6px 0}
.mb-bild{overflow:hidden;max-height:300px}
.mb-bild img{width:100%;object-fit:cover;object-position:top;transition:transform .35s}
.markenbanner:hover .mb-bild img{transform:scale(1.03)}
.mb-text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:10px;padding:26px 38px}
.mb-text .markenlogo{height:46px;width:auto;max-width:260px}
.mb-note{display:flex;align-items:center;gap:8px;font-size:17px}
.mb-note b{font-size:22px}
.mb-satz{color:var(--grau);font-size:17px}

/* FAQ */
.faq{background:#fff;border-radius:8px;border:1px solid var(--linie);padding:4px 30px;margin:20px 0}
.faq details{border-bottom:1px solid #E7EBF1}
.faq details:last-child{border:0}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:14px;align-items:center;padding:19px 0;font-weight:700;font-size:20px}
.faq summary::-webkit-details-marker{display:none}
.faq-plus{color:var(--blau);transition:transform .2s}
.faq details[open] .faq-plus{transform:rotate(45deg)}
.faq details > :not(summary){margin:0 0 18px 36px}

/* Ratgeber-Karten (Blog) */
ul.karten{list-style:none;padding:0!important;margin:16px 0 30px;display:grid;grid-template-columns:1fr 1fr;gap:14px}
ul.karten li{background:#F5F7FA;border:1px solid var(--linie);border-radius:8px;padding:16px 18px;margin:0}
ul.karten .art{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--moos)}
ul.karten a{font-weight:700;font-size:19px}
ul.karten p{margin:6px 0 0;font-size:16px;color:var(--grau)}

/* Fuss */
.fuss{background:var(--nacht);color:#C9D1E0;padding:52px 14px 0;font-size:17px;margin-top:70px}
.fuss-innen{max-width:1130px;margin:0 auto;display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:30px}
.fuss-marke p{max-width:340px;margin-top:14px}
.fuss-titel{color:#fff;font-weight:800;margin:4px 0 10px}
.fuss a{display:block;color:#C9D1E0;text-decoration:none;padding:3px 0}
.fuss a:hover{color:#fff}
.fuss-sozial{display:flex;gap:10px;margin-top:18px}
.fuss .fuss-sozial a{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid #3A4A6E;padding:0}
.fuss .fuss-sozial a:hover{background:var(--nacht2);border-color:#fff}
.fuss-unten{max-width:1130px;margin:40px auto 0;border-top:1px solid #2C3B5E;padding:18px 0 26px;display:flex;flex-wrap:wrap;gap:12px 26px;font-size:15px}
.fuss-unten a{display:inline}

/* Ausstieg-Popup */
body.ausstieg-offen{overflow:hidden}
.ausstieg{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px}
.ausstieg[hidden]{display:none}
.ausstieg-hg{position:absolute;inset:0;background:rgba(20,33,61,.62)}
.ausstieg-box{position:relative;background:#fff;border-radius:10px;max-width:820px;width:100%;padding:30px 30px 26px;box-shadow:0 20px 60px rgba(0,0,0,.35);max-height:94vh;overflow:auto}
.ausstieg-zu{position:absolute;right:12px;top:12px;width:44px;height:44px;border-radius:50%;border:0;background:var(--grund);cursor:pointer;display:grid;place-items:center;color:var(--nacht)}
.ausstieg-kopf{display:flex;gap:18px;align-items:center;margin-bottom:20px;padding-right:40px}
.ausstieg-kopf img{border-radius:50%;width:72px;height:72px}
.ausstieg-titel{font-family:Literata,serif;font-size:27px;font-weight:700;color:var(--nacht);margin:0 0 2px;line-height:1.2}
.ausstieg-kopf p{margin:0}
.ausstieg-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ausstieg-karte{display:flex;flex-direction:column;gap:8px;border:1px solid var(--linie);border-radius:8px;padding:16px;text-decoration:none;color:var(--text)}
.ausstieg-karte:hover{border-color:var(--blau)}
.ausstieg-karte .markenlogo{height:30px;width:auto;max-width:100%}
.ausstieg-note{font-weight:800;font-size:22px}
.ausstieg-note small{font-size:15px;color:var(--grau)}
.ausstieg-karte ul{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.35}
.ausstieg-karte li{display:flex;gap:6px;margin-bottom:5px}
.ausstieg-karte li .i{width:17px;height:17px;color:var(--moos);margin-top:1px}
.ausstieg-knopf{margin-top:auto;background:var(--sonne);color:var(--nacht);font-weight:800;text-align:center;border-radius:999px;padding:11px}

/* Fehlerseiten */
.einfach{max-width:900px;margin:40px 0 0 76px}

/* Mobil */
@media (max-width:1100px){
  .eintrag-reihe{grid-template-columns:130px 1fr 1fr 100px}
  .eintrag-knoepfe{grid-column:1/-1;flex-direction:row}
  .eintrag-knoepfe a{flex:1}
}
@media (max-width:900px){
  .buehne,.aufeinenblick,.artikel-raster.ohne-kapitel,.einfach{margin-left:0}
  .artikel.breit{padding:34px 30px 40px}
}
@media (max-width:760px){
  body{font-size:18px}
  h1,.promo-text h1{font-size:32px}
  h2{font-size:26px;margin-top:44px}
  .artikel h2{font-size:25px;margin-top:40px}
  h3{font-size:21px}
  .ol-lang{display:none}.ol-kurz{display:inline;white-space:nowrap}
  .oberleiste-link{gap:10px;font-size:15.5px;padding:7px 10px;justify-content:space-between}
  .ol-knopf{padding:6px 12px;font-size:15px}
  .ol-knopf .i{display:none}
  .kopf-oben{padding:12px 14px 6px}
  .kopf-logo svg{height:34px;width:auto}
  .kopf-knoepfe{display:none}
  .kopf-navi{overflow-x:auto;gap:20px;padding:4px 14px 10px}
  .promo-innen{grid-template-columns:1fr;padding:22px 16px 28px;gap:10px}
  .promo-bild{padding:10px 0;max-width:330px}
  .promo-streifen{left:-16px;height:30px}
  .promo-logos{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-bottom:4px}
  .promo-logos a{flex:none}
  .haupt{padding:0 14px}
  .podest{grid-template-columns:1fr;gap:12px}
  .podest-karte{display:grid;grid-template-columns:1fr auto;grid-template-areas:"band band" "logo knopf" "note knopf";text-align:left;align-items:center;padding:0 14px 14px;gap:2px 10px}
  .podest-band{grid-area:band;margin:0 -14px 12px;text-align:center}
  .podest-karte .markenlogo{grid-area:logo;margin:0;height:30px}
  .podest-name,.podest-klein{display:none}
  .podest-note{grid-area:note;margin:4px 0 0}
  .podest-karte .knopf-gelb{grid-area:knopf;min-width:0;padding:11px 16px;font-size:16px}
  .matrix th,.matrix td{min-width:150px}
  .matrix th[scope=row]{min-width:108px;font-size:15px}
  .matrix-leiste{padding:12px 14px}
  .eintrag{padding:10px}
  .eintrag-reihe,.artikel:not(.breit) .eintrag-reihe{grid-template-columns:1fr 92px}
  .eintrag-logo{grid-column:1/-1;justify-items:start}
  .zelle-name{grid-column:1/2}
  .zelle-note{grid-column:2/3;grid-row:2/3}
  .zelle-punkte{grid-column:1/-1}
  .eintrag-knoepfe,.artikel:not(.breit) .eintrag-knoepfe{flex-direction:column}
  .eintrag-fuss{grid-template-columns:1fr}
  .eintrag-fuss a{border-right:0;border-bottom:1px solid var(--linie)}
  .markenkarte{grid-template-columns:1fr}
  .mk-bild{aspect-ratio:16/10;min-height:0}
  .mk-text{padding:20px}
  .faq{padding:0 18px}
  .faq summary{font-size:18px}
  .faq details > :not(summary){margin-left:0}
  .fuss-innen{grid-template-columns:1fr 1fr}
  .fuss-marke{grid-column:1/-1}
  .markenbanner{grid-template-columns:1fr;margin:0}
  .markenbanner,.mb-band{border-radius:0}
  .mb-bild{max-height:170px}
  .mb-text{padding:18px 18px 22px}
  .artikel-raster{grid-template-columns:minmax(0,1fr)}
  .kapitel{display:none}
  .artikel,.artikel.breit{padding:26px 18px 30px;border-radius:0;margin:0 -14px}
  .steckbrief dl div{grid-template-columns:1fr}
  .steckbrief dt{padding-bottom:0}
  .steckbrief dd{padding-top:2px}
  .aufeinenblick.liste{padding:20px 18px 6px}
  .cta-mitte{flex-wrap:wrap}
  .alt-reihe{grid-template-columns:1fr 1fr}
  ul.karten{grid-template-columns:1fr}
  blockquote.margrit{padding:18px 20px;font-size:19px}
  .logozeile{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-right:-14px}
  .logozeile a,.logozeile span{flex:none}
  .ausstieg-box{padding:22px 16px 18px}
  .ausstieg-titel{font-size:21px}
  .ausstieg-kopf img{width:56px;height:56px}
  .ausstieg-kopf{gap:12px}
  .ausstieg-kopf p:not(.ausstieg-titel){font-size:15px;line-height:1.35}
  .ausstieg-karten{grid-template-columns:1fr;gap:10px}
  .ausstieg-karte{display:grid;grid-template-columns:1fr auto;gap:4px 10px;padding:12px}
  .ausstieg-karte ul{grid-column:1/-1;font-size:14px;margin:0}
  .ausstieg-karte li{margin-bottom:2px}
  .ausstieg-knopf{grid-column:1/-1}
  .knopf-gelb.gross,.cta-zeile a.cta{font-size:19px;padding:14px 26px;width:100%}
}

/* Menü mit Untermenüs */
.kopf{position:relative}
.kopf-navi{align-items:center}
.kopf-navi .navlink,.navgruppe>summary{color:var(--nacht);text-decoration:none;font-weight:600;font-size:17px;white-space:nowrap;cursor:pointer}
.navgruppe{position:relative}
.navgruppe>summary{list-style:none;display:inline-flex;align-items:center;gap:4px}
.navgruppe>summary::-webkit-details-marker{display:none}
.navgruppe>summary svg{width:16px;height:16px;transition:transform .15s}
.navgruppe[open]>summary svg{transform:rotate(180deg)}
.navgruppe.aktiv>summary,.kopf-navi .navlink.aktiv{text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:9px;text-decoration-color:var(--sonne)}
.navbox{position:absolute;top:calc(100% + 11px);left:-14px;z-index:60;background:#fff;border:1px solid #dde3ec;border-radius:9px;box-shadow:0 14px 34px rgba(20,33,61,.16);padding:9px;min-width:250px;display:grid;gap:1px}
.navbox.breit{grid-template-columns:repeat(2,minmax(210px,1fr));min-width:470px}
.navbox a{display:block;padding:8px 11px;border-radius:6px;color:var(--nacht);text-decoration:none;font-weight:500;font-size:16px;line-height:1.3;white-space:normal}
.navbox a:hover{background:#eef1f5;color:var(--blau)}
.navbox a.aktiv{background:#fff6dc}
@media (max-width:760px){
  .navgruppe{position:static}
  .navbox,.navbox.breit{position:absolute;left:10px;right:10px;top:100%;min-width:0;grid-template-columns:1fr;max-height:70vh;overflow-y:auto}
}

/* Captures nicht mehr abschneiden: ganzes Bild im Seitenverhältnis */
.markenkarte{align-items:start}
.mk-bild{min-height:0;aspect-ratio:900/560;background:#fff}
.mk-bild img{position:static;height:auto;display:block;object-fit:contain}
.mb-bild{max-height:none;align-self:center}
.mb-bild img{display:block;height:auto;object-fit:contain}
/* Bildschirmfotos der Anbieter (v3) */
.artikel figure.screen{margin:34px 0;background:#fff;border:1px solid #d3dae5;border-radius:10px;box-shadow:0 6px 18px rgba(20,33,61,.10);overflow:hidden}
.artikel figure.screen img{display:block;width:100%;height:auto;border-radius:0;border-bottom:1px solid #e3e8ef}
.artikel figure.screen figcaption{font-size:15px;line-height:1.45;color:#4a5568;padding:10px 16px 12px}
.artikel figure.screen.mobil{max-width:340px;margin-left:auto;margin-right:auto}
@media (max-width:760px){.artikel figure.screen{margin:26px 0}.artikel figure.screen.mobil{max-width:300px}}
/* Inhaltsverzeichnis mit Titeln (statt nur Nummern) */
.artikel-raster{grid-template-columns:262px minmax(0,1fr);gap:34px;max-width:1150px}
.kapitel{text-align:left;padding:16px 0 12px;border:1px solid var(--linie);box-shadow:none}
.kapitel-titel{display:flex;align-items:center;gap:7px;font-weight:800;color:var(--nacht)!important;font-size:16px;text-transform:uppercase;letter-spacing:.04em;margin:0 18px 8px!important}
.kapitel-titel .i{width:18px;height:18px;color:var(--blau)}
.kapitel ol{counter-reset:k}
.kapitel li{counter-increment:k}
.kapitel a{display:flex;gap:9px;padding:7px 18px;font-weight:500;font-size:15px;line-height:1.35;color:var(--text);border-left:3px solid transparent}
.kapitel a::before{content:counter(k) ".";color:var(--grau);font-weight:700;min-width:20px}
.kapitel a:hover,.kapitel a.hier{background:#F3F6FA;color:var(--blau);border-left-color:var(--sonne)}
.inhalt-mobil{display:none}
@media (max-width:1060px){
  .artikel-raster{grid-template-columns:minmax(0,1fr)}
  .kapitel{display:none}
  .inhalt-mobil{display:block;background:#fff;border:1px solid var(--linie);border-radius:8px;margin:0 0 26px}
  .inhalt-mobil summary{cursor:pointer;padding:13px 18px;font-weight:800;display:flex;gap:8px;align-items:center;list-style:none}
  .inhalt-mobil summary::-webkit-details-marker{display:none}
  .inhalt-mobil summary .i{width:18px;height:18px;color:var(--blau)}
  .inhalt-mobil ol{margin:0;padding:4px 18px 14px 38px}
  .inhalt-mobil li{padding:5px 0}
  .inhalt-mobil a{color:var(--text)}
}
/* ===== Banner (v3): Fenster mit Bildschirmfoto auf Nachtblau mit Seelinien ===== */
.rb{display:block;position:relative;container-type:inline-size;aspect-ratio:2/1;width:100%;border-radius:14px;overflow:hidden;isolation:isolate;
  background-color:var(--nacht);background-image:repeating-linear-gradient(180deg,rgba(255,255,255,.11) 0 1px,transparent 1px 7px)}
.rb-sonne{position:absolute;z-index:-1;right:-11cqw;top:-20cqw;width:46cqw;height:46cqw;border-radius:50%;background:radial-gradient(circle,rgba(255,194,61,.30),rgba(255,194,61,.10) 62%,rgba(255,194,61,0) 71%)}
.rb-kopf{position:absolute;left:4.5cqw;top:4.2cqw;display:flex;align-items:center;gap:1cqw;color:#fff;line-height:1}
.rb-kopf svg{height:4cqw;width:auto}
.rb-kopf b{font-family:Literata,Georgia,serif;font-weight:600;font-size:3.1cqw;letter-spacing:.01em}
.rb-tag{position:absolute;left:4.5cqw;top:10.6cqw;background:var(--sonne);color:var(--nacht);font-family:Figtree,sans-serif;font-weight:800;font-size:1.85cqw;line-height:1;text-transform:uppercase;letter-spacing:.09em;padding:.85cqw 1.6cqw;border-radius:999px}
.rb-fenster{position:absolute;left:33cqw;top:7.5cqw;width:61cqw;height:38cqw;display:flex;flex-direction:column;background:#fff;border-radius:1.4cqw;overflow:hidden;
  transform:rotate(-3deg);box-shadow:0 2.4cqw 5.5cqw rgba(4,10,24,.55),0 .3cqw .8cqw rgba(4,10,24,.35);transition:transform .3s}
.rb-leiste{flex:none;height:3.3cqw;display:flex;align-items:center;gap:.65cqw;padding:0 1.4cqw;background:#EDF0F5;border-bottom:1px solid #DCE1EA}
.rb-leiste i{width:1.05cqw;height:1.05cqw;border-radius:50%;background:#F26B5B}
.rb-leiste i:nth-child(2){background:var(--sonne)}.rb-leiste i:nth-child(3){background:var(--moos)}
.rb-leiste em{margin-left:1.4cqw;background:#fff;border-radius:999px;font:normal 600 1.45cqw/1 Figtree,sans-serif;color:var(--grau);padding:.55cqw 2.4cqw}
.rb-bild{flex:1;min-height:0;overflow:hidden;background:#E9EDF3}
.rb .rb-bild img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border:0;border-radius:0;margin:0;transform:none;box-shadow:none;max-width:none}
.rb-foto{padding:1.1cqw;background:#fff}
.rb-foto .rb-bild{border-radius:.8cqw}
.rb-foto .rb-bild img{object-position:center}
.rb-stapel{position:absolute;z-index:3;left:21cqw;bottom:5.5cqw;display:flex;flex-direction:column;align-items:flex-start;gap:1.1cqw}
.rb-logo{display:block;background:#fff;border-radius:1.2cqw;padding:1.5cqw 2.1cqw;box-shadow:0 1.1cqw 2.6cqw rgba(4,10,24,.42)}
.rb .rb-logo img{display:block;height:4.3cqw;width:auto;max-width:18cqw;border:0;margin:0;transform:none;box-shadow:none}
.rb-viele{gap:.9cqw}
.rb-viele .rb-logo{padding:1.1cqw 1.7cqw}
.rb-viele .rb-logo img{height:3.7cqw;max-width:16cqw}
.rb-note{display:block;background:var(--sonne);color:var(--nacht);font:800 3cqw/1 Figtree,sans-serif;padding:1.2cqw 2cqw;border-radius:1.2cqw;box-shadow:0 1.1cqw 2.6cqw rgba(4,10,24,.42);margin-left:3cqw}
.rb-note small{font-size:1.8cqw;font-weight:700;margin-left:.2cqw}
.rb-url{position:absolute;left:4.5cqw;bottom:3.8cqw;font:600 1.55cqw/1 Figtree,sans-serif;letter-spacing:.08em;color:rgba(255,255,255,.55)}
/* Duell: zwei Fenster in entgegengesetzter Neigung */
.rb-duel .rb-tag{top:4.4cqw;left:auto;right:4.5cqw}
.rb-duel .rb-fenster{width:44cqw;height:29cqw}
.rb-duel .rb-links{left:5cqw;top:13cqw;transform:rotate(-4deg)}
.rb-duel .rb-rechts{left:51cqw;top:11cqw;transform:rotate(4deg)}
.rb-oder{position:absolute;z-index:4;left:50%;top:52%;transform:translate(-50%,-50%);width:9cqw;height:9cqw;border-radius:50%;background:var(--sonne);color:var(--nacht);display:grid;place-items:center;
  font:italic 600 2.7cqw/1 Literata,Georgia,serif;box-shadow:0 0 0 .9cqw var(--nacht)}
.rb-duel .rb-logo{position:absolute;z-index:3;bottom:4.5cqw}
.rb-duel .rb-logo-1{left:9cqw}.rb-duel .rb-logo-2{right:9cqw}
.rb-duel .rb-url{left:50%;transform:translateX(-50%);bottom:2.2cqw}
.rb-klein .rb-kopf b{font-size:3.4cqw}
a:hover .rb-fenster,a:focus-visible .rb-fenster{transform:rotate(-2deg) scale(1.025)}
a:hover .rb-duel .rb-rechts{transform:rotate(3deg) scale(1.025)}
/* Seitenkopf in zwei Spalten */
.kopfbereich{max-width:1150px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,560px);gap:46px;align-items:center;padding:30px 14px 14px}
.kopf-text{min-width:0}
.kopf-text h1{margin-top:10px}
.kopf-bild{min-width:0;position:relative}
.kopf-bild > a,.kopf-bild > div{display:block;position:relative;text-decoration:none;color:inherit}
.kopf-bild .markenbanner{display:block;max-width:none;margin:0;background:none;box-shadow:none;border-radius:14px;overflow:visible}
.kopf-bild .markenbanner:hover{box-shadow:none}
.kopf-bild .mb-band{border-radius:14px 0 8px 0}
.kopf-bild .mk-pille{right:16px;bottom:16px;font-size:15px;padding:6px 13px}
.kopf-bild a .rb{transition:box-shadow .2s}
.kopf-bild a:hover .rb{box-shadow:0 10px 28px rgba(20,33,61,.28)}
.kopf-cta{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:18px 0 10px}
.kopf-cta .mb-satz{width:100%;margin:0;color:var(--grau);font-size:17px;line-height:1.45}
.kopf-cta .knopf-gelb{padding:12px 22px}
.kopfbereich + .aufeinenblick,.kopfbereich + .artikel-raster{margin-top:18px}
/* Startseite: Banner statt geneigter Aufnahme */
.promo-bild .rb{width:94%;margin-left:3%;position:relative;z-index:1;box-shadow:0 16px 34px rgba(0,0,0,.4)}
.promo-bild .mk-pille{right:5%;bottom:34px;z-index:3}
a.promo-bild:hover .rb img{transform:none}
/* Listen: kleines Banner als Kartenbild */
ul.karten li{display:flex;flex-direction:column}
.karte-bild{display:block;margin:-16px -18px 12px;border-radius:8px 8px 0 0;overflow:hidden}
.karte-bild .rb{border-radius:8px 8px 0 0}
@media (max-width:900px){
  .kopfbereich{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:20px 16px 8px}
  .kopf-text{display:contents}
  .kopfbereich > .kopf-text > *{order:5}
  .kopfbereich > .kopf-text > .krume{order:1}.kopfbereich > .kopf-text > .buehne-logo{order:2}.kopfbereich > .kopf-text > h1{order:3}
  .kopf-bild{order:4;margin:6px 0 16px}
  .kopf-bild .mk-pille{right:10px;bottom:10px;font-size:14px}
  .promo-bild .rb{width:100%;margin-left:0}
  .promo-bild .mk-pille{bottom:22px;right:10px}
}
.kopf-bild .mb-band{left:auto;right:0;border-radius:0 14px 0 8px}
.kopfbereich h1{font-size:40px;line-height:1.12}
.promo-bild .rb{outline:1px solid rgba(255,255,255,.22);outline-offset:0}
@media (min-width:901px){.promo-innen{grid-template-columns:1.05fr 1fr}}
@media (max-width:900px){.kopfbereich h1{font-size:32px}.kopf-bild .mk-pille{font-size:13px;padding:5px 11px}.kopf-bild .mb-band{font-size:13px;padding:4px 12px}}
ul.karten li > br{display:none}
.rb-portrait{left:52cqw;top:6cqw;width:34cqw;height:38cqw;transform:rotate(3deg)} .rb .rb-portrait .rb-bild img{object-position:50% 20%}
/* ===== Banner-Varianten der Ratgeberseiten (gleiches System, andere Anordnung) ===== */
.rb-l-spiegel .rb-fenster{left:27cqw;top:9.5cqw;width:60cqw;transform:rotate(3deg)}
.rb-l-spiegel .rb-stapel{left:4.5cqw;bottom:auto;top:19cqw}
.rb-l-stapel .rb-hinten{left:45cqw;top:4.5cqw;width:49cqw;height:31cqw;transform:rotate(5deg);filter:brightness(.8)}
.rb-l-stapel .rb-vorne{z-index:2;left:26cqw;top:14cqw;width:53cqw;height:32cqw;transform:rotate(-2deg)}
.rb-l-stapel .rb-stapel,.rb-l-mobil .rb-stapel{left:4.5cqw;bottom:9.5cqw}
.rb-l-mobil .rb-fenster{left:23cqw;top:9cqw;width:58cqw;height:36cqw;transform:rotate(-2deg)}
.rb-handy{position:absolute;z-index:2;right:4cqw;top:12cqw;width:17cqw;height:35cqw;padding:.9cqw;border-radius:2.8cqw;background:#0B1222;transform:rotate(5deg);
  box-shadow:0 2.4cqw 5cqw rgba(4,10,24,.6),0 0 0 .25cqw rgba(255,255,255,.18);transition:transform .3s}
.rb .rb-handy img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;border:0;border-radius:2cqw;margin:0;transform:none;box-shadow:none;max-width:none}
a:hover .rb-l-spiegel .rb-fenster,a:focus-visible .rb-l-spiegel .rb-fenster{transform:rotate(2deg) scale(1.025)}
a:hover .rb-l-stapel .rb-vorne,a:focus-visible .rb-l-stapel .rb-vorne{transform:rotate(-1deg) scale(1.025)}
a:hover .rb-l-stapel .rb-hinten,a:focus-visible .rb-l-stapel .rb-hinten{transform:rotate(5deg)}
a:hover .rb-l-mobil .rb-fenster,a:focus-visible .rb-l-mobil .rb-fenster{transform:rotate(-1deg) scale(1.02)}
a:hover .rb-handy,a:focus-visible .rb-handy{transform:rotate(3deg) translateY(-.6cqw)}
/* Über uns: Seesonne statt Porträt */
.rb-seesonne{left:49cqw;top:7.5cqw;width:41cqw;height:37cqw;transform:rotate(3deg)}
.rb .rb-seesonne .rb-bild{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.4cqw;background:#FFF8E8}
.rb-seesonne svg{height:15cqw;width:auto}
.rb-seesonne b{font:600 4.6cqw/1 Literata,Georgia,serif;color:var(--nacht)}
.rb-seesonne small{font:600 1.75cqw/1.2 Figtree,sans-serif;color:var(--grau);letter-spacing:.02em}
.rb-seesonne ~ .rb-stapel{display:none}
/* ===== Fotobanner (Runde 3B): Foto im weissen Rahmen statt Bildschirmfoto, gleiches System ===== */
.rb-fo .rb-foto{--r:-3deg;transform:rotate(var(--r))}
.rb .rb-foto .rb-bild img{object-position:center 40%}
a:hover .rb-fo .rb-foto,a:focus-visible .rb-fo .rb-foto{transform:rotate(var(--r)) scale(1.025)}
a:hover .rb-fo .rb-hinten,a:focus-visible .rb-fo .rb-hinten,a:hover .rb-fo .rb-rechts{transform:rotate(var(--r))}
/* Foto rechts, Plaketten links unten (überlappend) */
.rb-l-foto-r .rb-foto{left:36cqw;top:6.5cqw;width:58cqw;height:38.7cqw}
.rb-l-foto-r .rb-stapel{left:19cqw;bottom:5.5cqw}
/* Foto links, Etikett und Plaketten rechts */
.rb-l-foto-l .rb-tag{left:auto;right:4.5cqw;top:4.4cqw}
.rb-l-foto-l .rb-foto{--r:2.5deg;left:5cqw;top:11.5cqw;width:52cqw;height:34.7cqw}
.rb-l-foto-l .rb-stapel{left:auto;right:5cqw;bottom:auto;top:14cqw;align-items:flex-end}
.rb-l-foto-l .rb-stapel .rb-note{margin-left:0;margin-right:3cqw}
.rb-l-foto-l .rb-url{left:auto;right:4.5cqw}
/* Foto + runde Zweitvignette */
.rb-l-foto-rund .rb-foto{--r:-2deg;left:31cqw;top:6.5cqw;width:52cqw;height:34.7cqw}
.rb-rund{position:absolute;z-index:2;right:3.5cqw;bottom:3.5cqw;width:21cqw;height:21cqw;border-radius:50%;overflow:hidden;border:.9cqw solid #fff;
  box-shadow:0 2cqw 4.5cqw rgba(4,10,24,.55);transition:transform .3s}
.rb .rb-rund img{display:block;width:100%;height:100%;object-fit:cover;border:0;border-radius:0;margin:0;transform:none;box-shadow:none;max-width:none}
.rb-l-foto-rund .rb-stapel{left:15cqw;bottom:5.5cqw}
a:hover .rb-rund,a:focus-visible .rb-rund{transform:translateY(-.6cqw) rotate(-3deg)}
/* Foto + Reihe aus Symbol und Preis */
.rb-l-foto-pillen .rb-foto{--r:2deg;left:39cqw;top:5.5cqw;width:55cqw;height:36.7cqw}
.rb-l-foto-pillen .rb-stapel{left:4.5cqw;bottom:auto;top:17.5cqw}
.rb-l-foto-pillen .rb-url{display:none}
.rb-pillen{position:absolute;z-index:3;left:4.5cqw;bottom:4.5cqw;display:flex;align-items:center;gap:1.4cqw}
.rb-ico{flex:none;display:grid;place-items:center;width:8.6cqw;height:8.6cqw;border-radius:50%;background:var(--sonne);color:var(--nacht);box-shadow:0 1.1cqw 2.6cqw rgba(4,10,24,.42)}
.rb .rb-ico svg{width:4.6cqw;height:4.6cqw;stroke-width:2.2;margin:0}
.rb-stapel .rb-ico{margin-left:2cqw}
.rb-l-foto-l .rb-stapel .rb-ico{margin-left:0;margin-right:2cqw}
.rb-preis{display:block;background:#fff;color:var(--nacht);border-radius:1.2cqw;padding:1.2cqw 2cqw;box-shadow:0 1.1cqw 2.6cqw rgba(4,10,24,.42);line-height:1}
.rb-preis b{display:block;font:800 3.4cqw/1 Figtree,sans-serif;white-space:nowrap}
.rb-preis small{display:block;margin-top:.6cqw;font:600 1.6cqw/1.1 Figtree,sans-serif;color:var(--grau);white-space:nowrap}
/* Zwei Fotos versetzt */
.rb-l-foto-zwei .rb-hinten{--r:5deg;left:48cqw;top:4cqw;width:45cqw;height:30cqw;filter:brightness(.85)}
.rb-l-foto-zwei .rb-vorne{--r:-3deg;z-index:2;left:25cqw;top:15cqw;width:47cqw;height:31.3cqw}
.rb-l-foto-zwei .rb-stapel{left:4.5cqw;bottom:8.5cqw}
/* Duell mit einem Foto: Logos gegenüber, «oder» dazwischen */
.rb-l-duel-eins .rb-foto{--r:-2deg;left:20cqw;top:7cqw;width:60cqw;height:40cqw}
.rb-gegen{position:absolute;z-index:4;left:50%;bottom:3.6cqw;transform:translateX(-50%);display:flex;align-items:center;gap:1.6cqw}
.rb-duel .rb-gegen .rb-logo{position:static}
.rb-gegen .rb-oder{position:static;transform:none;flex:none}
.rb-l-duel-eins .rb-url{left:4.5cqw;transform:none;bottom:3.8cqw}
/* Duell mit zwei Fotos (Positionen wie die Fenster) */
.rb-l-duel-zwei .rb-links{--r:-4deg}
.rb-l-duel-zwei .rb-rechts{--r:4deg}
/* Markenseiten: das Etikett rutscht unter das grüne Rang-Band */
.markenbanner .rb-l-foto-l .rb-tag{top:9.2cqw}
.markenbanner .rb-l-foto-l .rb-stapel{top:16.5cqw}
.rb-chf{font:800 2.5cqw/1 Figtree,sans-serif;letter-spacing:.02em}

/* Fotos in Ratgebern (Pexels), 16/10 */
.artikel figure.foto{margin:30px 0 32px}
.artikel figure.foto img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px}
@media (max-width:760px){.artikel figure.foto{margin:22px 0 24px}.artikel figure.foto img{border-radius:8px}}

/* Ganzer Seitenkopf klickbar (16/10) */
[data-ganz]{cursor:pointer}
[data-ganz] .krume a,[data-ganz] .autor a{cursor:pointer}

/* Ortskarten der Regionenseiten (16/10) */
.artikel .orte{display:grid;gap:18px;margin:22px 0 30px}
.artikel .ortkarte{display:grid;grid-template-columns:minmax(0,260px) minmax(0,1fr);gap:0;background:#fff;border:1px solid var(--linie);border-radius:12px;overflow:hidden}
.artikel .ortkarte.ohne-foto{grid-template-columns:minmax(0,1fr)}
.artikel .ort-foto{margin:0;height:100%}
.artikel .ort-foto img{display:block;width:100%;height:100%;min-height:200px;object-fit:cover;border-radius:0}
.artikel .ort-text{padding:18px 22px 16px}
.artikel .ort-text h3{margin:0 0 6px;font-size:21px}
.artikel .ort-text > p{margin:0 0 10px;font-size:17px;line-height:1.5}
.artikel .ort-fakten{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:15.5px}
.artikel .ort-fakten li{display:flex;gap:6px;align-items:flex-start;margin:0;padding:0}
.artikel .ort-fakten li::before{display:none}
.artikel .ort-fakten .i,.artikel .ort-adresse .i{width:17px;height:17px;flex:none;margin-top:3px;color:var(--moos)}
.artikel .ort-adresse{display:flex;gap:7px;font-size:15.5px;color:var(--grau);margin:0 0 8px !important}
.artikel .ort-oev{font-size:14.5px}
.artikel .ort-links{font-size:15.5px;margin:0 !important}
.artikel .ort-links a{font-weight:700}
@media (max-width:760px){.artikel .ortkarte{grid-template-columns:1fr}.artikel .ort-foto img{min-height:0;aspect-ratio:16/9;height:auto}.artikel .ort-text{padding:14px 16px}}

/* Titel statt Logos im Banner der Seiten ohne Anbietervergleich (16/10) */
.rb-titel{display:block;background:#fff;color:var(--nacht);font-family:Literata,Georgia,serif;font-weight:700;font-size:4.6cqw;line-height:1.1;padding:1.6cqw 2.4cqw;border-radius:1.2cqw;box-shadow:0 1.1cqw 2.6cqw rgba(4,10,24,.42);max-width:42cqw}

/* Banner als Bilddatei (16/10) */
img.rb-datei{display:block;width:100%;height:auto;aspect-ratio:2/1;object-fit:cover;border-radius:14px;margin:0;max-width:none;border:0}
.kopf-bild a img.rb-datei{transition:box-shadow .2s}
.kopf-bild a:hover img.rb-datei{box-shadow:0 10px 28px rgba(20,33,61,.28)}
.promo-bild img.rb-datei{width:94%;margin-left:3%;position:relative;z-index:1;box-shadow:0 16px 34px rgba(0,0,0,.4)}
img.rb-datei.rb-klein{border-radius:10px}
.kopf-logo img.logo-bild{display:block;height:44px;width:auto}
.fuss-marke img.logo-bild{display:block;height:38px;width:auto;margin-bottom:12px}
.autor-siegel img{display:block;width:auto;height:22px}
.karte-bild img.rb-datei{border-radius:8px 8px 0 0}
@media (max-width:760px){.promo-bild img.rb-datei{width:100%;margin-left:0}}