:root {
    --ink:#153e3b;
    --accent:#176b58;
    --bg:#f7f8f3;
    --line:#dce4dc;
    --muted:#50645f
}
* {
    box-sizing:border-box
}
body {
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font:17px/1.65 system-ui,-apple-system,"Segoe UI",sans-serif
}
a {
    color:var(--accent);
    text-underline-offset:4px
}
a:focus-visible {
    outline:3px solid #a86312;
    outline-offset:5px
}
.header,main,footer {
    max-width:1160px;
    margin:auto;
    padding:28px
}
.header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:24px
}
.brand {
    font-size:24px;
    font-weight:800;
    line-height:1.15;
    text-decoration:none
}
.brand span {
    display:block;
    font-size:16px;
    font-weight:500
}
nav {
    display:flex;
    gap:24px;
    flex-wrap:wrap
}
nav a {
    text-decoration:none
}
nav a:hover,nav a[aria-current] {
    text-decoration:underline
}
.notice {
    text-align:center;
    padding:10px 20px;
    background:#e8efdf;
    font-size:14px
}
.hero {
    padding:64px 0 52px;
    max-width:940px
}
.eyebrow {
    text-transform:uppercase;
    letter-spacing:.12em;
    font-size:12px;
    font-weight:750
}
h1 {
    font-size:clamp(32px,5.3vw,62px);
    line-height:1.12;
    letter-spacing:-.035em;
    margin:18px 0 24px
}
h1 span {
    color:var(--accent)
}
h2 {
    font-size:28px;
    line-height:1.25
}
h3 {
    font-size:21px;
    line-height:1.3
}
.intro {
    font-size:21px;
    max-width:760px;
    color:var(--muted)
}
.button {
    display:inline-block;
    background:var(--accent);
    color:white;
    text-decoration:none;
    padding:13px 23px;
    border-radius:8px;
    font-weight:650;
    margin-top:16px
}
.grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:20px
}
.card,.panel {
    background:white;
    border:1px solid var(--line);
    border-radius:16px;
    padding:28px
}
.number {
    color:var(--accent);
    font-weight:750
}
.card p {
    color:var(--muted)
}
.panel {
    margin:36px 0
}
.content {
    max-width:830px;
    padding:40px 0 65px;
    min-height:50vh
}
footer {
    border-top:1px solid var(--line);
    font-size:14px;
    color:var(--muted);
    margin-top:40px;
    padding-bottom:45px
}
.skip {
    position:absolute;
    left:20px;
    top:-100px;
    background:white;
    padding:12px
}
.skip:focus {
    top:12px
}
li {
    margin:10px 0
}
@media(max-width:650px) {
    .header {
        align-items:flex-start;
        flex-direction:column;
        gap:20px
    }
    .header,main,footer {
        padding:22px
    }
    nav {
        gap:16px;
        font-size:15px
    }
    .hero {
        padding:32px 0
    }
    .grid {
        grid-template-columns:1fr
    }
    .intro {
        font-size:19px
    }
    .card,.panel {
        padding:22px
    }
}
.site-footer {
    max-width:none;
    margin:64px 0 0;
    padding:0;
    border:0;
    background:var(--ink);
    color:#d9e7df;
    font-size:15px
}
.footer-inner {
    max-width:1160px;
    margin:auto;
    padding:48px 28px 26px
}
.site-footer a {
    color:#edf7ed
}
.site-footer a:focus-visible {
    outline-color:#c3e6a6
}
.footer-top {
    display:grid;
    grid-template-columns:1.3fr 1fr 1fr;
    gap:40px;
    padding-bottom:36px
}
.footer-top nav {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:9px
}
.footer-label {
    color:#b9dba8;
    font-size:12px;
    letter-spacing:.12em;
    text-transform:uppercase;
    font-weight:750;
    margin:0 0 7px
}
.footer-top .brand {
    display:inline-block
}
.footer-top .brand span {
    color:#b9dba8
}
.footer-note {
    border-top:1px solid #45625a;
    padding:25px 0;
    scroll-margin-top:24px
}
.footer-note h2 {
    font-size:20px;
    color:#f4f8ed;
    margin:0 0 12px
}
.footer-note p {
    margin:10px 0;
    max-width:1000px
}
.footer-bottom {
    border-top:1px solid #45625a;
    padding-top:22px;
    display:flex;
    justify-content:space-between;
    gap:18px;
    flex-wrap:wrap;
    font-size:13px
}
.footer-bottom a {
    text-decoration:underline
}
@media(max-width:650px) {
    .footer-inner {
        padding:36px 22px 24px
    }
    .footer-top {
        grid-template-columns:1fr;
        gap:28px
    }
    .footer-bottom {
        flex-direction:column
    }
    .site-footer {
        margin-top:40px
    }
}
.topics-grid {
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px
}
.topic {
    display:flex;
    flex-direction:column;
    padding:24px
}
.topic h3 {
    font-size:22px
}
.topic p {
    margin-top:0
}
.topic a {
    margin-top:auto;
    font-weight:650
}
.section-intro {
    color:var(--muted);
    max-width:760px;
    margin-bottom:26px
}
.hero-link {
    display:inline-block;
    margin:18px 0 0 20px
}
.offers-section {
    padding-top:65px;
    scroll-margin-top:24px
}
.offers-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
}
.offer {
    background:#fff;
    border:1px solid var(--line);
    border-radius:18px;
    padding:30px;
    display:flex;
    flex-direction:column
}
.offer-head {
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center
}
.offer-bank {
    font-size:12px;
    font-weight:700;
    background:#fff3d9;
    color:#654b20;
    border-radius:5px;
    padding:4px 8px
}
.offer-type {
    font-size:12px;
    color:var(--muted)
}
.offer h3 {
    font-size:28px;
    margin:22px 0 10px
}
.offer-price {
    font-size:52px;
    line-height:1.1;
    letter-spacing:-.04em;
    font-weight:800;
    color:var(--accent)
}
.price-caption {
    margin:6px 0 20px;
    color:var(--muted)
}
.offer dl {
    margin:0 0 22px
}
.offer dl>div {
    display:grid;
    grid-template-columns:125px 1fr;
    gap:14px;
    padding:13px 0;
    border-top:1px solid var(--line);
    font-size:15px
}
.offer dt {
    font-weight:700
}
.offer dd {
    margin:0;
    color:var(--muted)
}
.calculation {
    margin-top:auto;
    padding:18px;
    background:#eef4e9;
    border-radius:10px
}
.calculation strong {
    font-size:20px
}
.calculation p {
    font-size:14px;
    margin:8px 0 0
}
.offer-fine {
    font-size:12px;
    color:var(--muted)
}
.offer>a {
    font-weight:650;
    margin-top:10px
}
.guide section {
    margin:36px 0
}
.guide h2 {
    font-size:26px
}
.sources {
    background:#eef4e9;
    border-radius:12px;
    padding:24px;
    margin:32px 0;
    font-size:14px
}
.sources h2 {
    font-size:19px
}
.guide {
    min-height:0
}
.guide p {
    overflow-wrap:break-word
}
@media(max-width:1000px) {
    .topics-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
}
@media(max-width:650px) {
    .topics-grid,.offers-grid {
        grid-template-columns:1fr
    }
    .offer {
        padding:22px
    }
    .offer dl>div {
        grid-template-columns:1fr;
        gap:4px
    }
    .hero-link {
        margin-left:0
    }
    .offers-section {
        padding-top:38px
    }
}
.topic h3 {
    hyphens:auto;
    overflow-wrap:break-word
}
.guide-layout {
    display:grid;
    grid-template-columns:290px minmax(0,1fr);
    gap:40px;
    align-items:start;
    padding-top:36px
}
.guide-layout>.content,.guide-layout>section>.content {
    padding-top:0;
    min-height:0
}
.guide-menu {
    position:sticky;
    top:24px;
    background:#eef4e9;
    border:1px solid #d5e2cd;
    border-radius:14px;
    padding:18px 14px
}
.guide-menu .eyebrow {
    margin:0 0 8px;
    color:var(--accent)
}
.guide-menu h2 {
    font-size:23px;
    margin:0 0 12px
}
.guide-menu nav {
    display:flex;
    flex-direction:column;
    gap:3px
}
.guide-menu nav a {
    display:flex;
    justify-content:space-between;
    gap:12px;
    padding:11px 8px;
    border-radius:7px;
    font-size:15px;
    line-height:1.4;
    overflow-wrap:anywhere
}
.guide-menu nav a:hover {
    background:#e0ead9
}
.guide-menu nav a[aria-current="page"] {
    background:var(--ink);
    color:#fff;
    text-decoration:none;
    font-weight:650
}
.guide-menu-note {
    font-size:13px;
    color:var(--muted);
    border-top:1px solid #cddcc5;
    padding-top:16px;
    margin:18px 0 0
}
.guide-layout h1 {
    font-size:clamp(32px,4vw,48px)
}
@media(max-width:850px) {
    .guide-layout {
        grid-template-columns:1fr;
        gap:30px;
        padding-top:20px
    }
    .guide-menu {
        position:static
    }
    .guide-menu nav {
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .guide-menu-note {
        display:none
    }
}
@media(max-width:480px) {
    .guide-menu nav {
        grid-template-columns:1fr
    }
}
.guide-menu nav a:hover {
    text-decoration:none
}
.header .brand-logo,.footer-top .brand-logo {
    display:inline-flex;
    align-items:center;
    gap:12px;
    flex-shrink:0
}
.brand-logo img {
    display:block;
    width:56px;
    height:56px
}
.brand-logo .brand-wordmark {
    display:block;
    font-size:25px;
    line-height:1.15;
    letter-spacing:-.025em
}
.brand-wordmark strong {
    font-weight:800
}
.brand-logo .brand-wordmark>span {
    font-size:15px;
    letter-spacing:.025em;
    font-weight:500;
    margin-top:4px
}
.about>h2 {
    margin-top:38px
}
.about .panel {
    margin:30px 0
}
@media(max-width:480px) {
    .brand-logo img {
        width:48px;
        height:48px
    }
    .brand-logo .brand-wordmark {
        font-size:23px
    }
}
.ratgeber-strip {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    background:#eef4e9;
    border-left:3px solid #93b681;
    border-radius:0 10px 10px 0;
    padding:20px 24px;
    margin-top:24px
}
.ratgeber-strip strong {
    font-size:17px
}
.ratgeber-strip p {
    font-size:14px;
    color:var(--muted);
    margin:5px 0 0
}
.ratgeber-strip>a {
    font-size:15px;
    font-weight:650;
    flex-shrink:0;
    text-underline-offset:4px
}
@media(max-width:650px) {
    .ratgeber-strip {
        align-items:flex-start;
        flex-direction:column;
        gap:14px;
        padding:18px 20px
    }
}
.hero-with-guide {
    max-width:none;
    display:grid;
    grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);
    gap:46px;
    align-items:center
}
.hero-copy {
    min-width:0
}
.hero-with-guide h1 {
    font-size:clamp(36px,4.4vw,54px)
}
.hero-with-guide .intro {
    font-size:20px
}
.hero-with-guide .hero-link {
    margin-left:0;
    display:block;
    font-size:15px
}
.hero-guide {
    background:#eaf1e3;
    border:1px solid #d6e3ce;
    border-radius:24px;
    padding:28px;
    position:relative;
    overflow:hidden
}
.hero-guide h2 {
    font-size:31px;
    letter-spacing:-.025em;
    margin:10px 0 14px
}
.hero-guide>p:not(.eyebrow) {
    font-size:15px;
    color:var(--muted);
    margin-bottom:20px
}
.hero-guide>a {
    display:flex;
    justify-content:space-between;
    font-size:16px;
    font-weight:700;
    border-top:1px solid #cbdcc0;
    padding-top:17px;
    text-decoration:none
}
.hero-guide>a:hover {
    text-decoration:underline
}
.hero-guide .eyebrow {
    margin:16px 0 0
}
.guide-art {
    height:148px;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center
}
.art-orbit {
    position:absolute;
    width:148px;
    height:148px;
    border:1px solid #b3cd9f;
    border-radius:50%;
    background:#dceacb;
    right:30px
}
.art-card {
    display:block;
    position:relative;
    width:175px;
    height:106px;
    border-radius:14px;
    background:var(--ink);
    transform:rotate(-9deg);
    box-shadow:0 12px 22px #153e3b20;
    color:white;
    padding:16px 20px
}
.art-card strong {
    display:block;
    font-size:35px;
    line-height:1;
    margin-top:8px
}
.art-chip {
    display:block;
    width:21px;
    height:15px;
    border-radius:4px;
    background:#b9dba8
}
.art-lines {
    position:absolute;
    width:37px;
    height:5px;
    border-top:2px solid #94b9a1;
    border-bottom:2px solid #94b9a1;
    right:18px;
    bottom:20px
}
.art-note {
    position:absolute;
    right:0;
    bottom:2px;
    background:#fff;
    border:1px solid #d6e3ce;
    border-radius:20px;
    padding:6px 12px;
    font-size:12px;
    box-shadow:0 5px 12px #153e3b0b
}
@media(max-width:850px) {
    .hero-with-guide {
        grid-template-columns:1fr;
        gap:28px
    }
    .hero-guide {
        max-width:540px
    }
    .guide-art {
        height:120px
    }
    .art-orbit {
        width:120px;
        height:120px
    }
    .hero-with-guide h1 {
        font-size:clamp(34px,6vw,50px)
    }
}
.comparison-note {
    margin:0 0 26px;
    padding:20px 24px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#eef4e9;
    font-size:14px;
    color:var(--muted);
    scroll-margin-top:24px
}
.comparison-note h3 {
    font-size:17px;
    color:var(--ink);
    margin:0 0 10px
}
.comparison-note p {
    margin:8px 0
}
.comparison-links {
    display:flex;
    flex-wrap:wrap;
    gap:8px 22px
}
.comparison-links a {
    font-weight:600
}
.about h2[id] {
    scroll-margin-top:24px
}
/* Kompakter Seitenrhythmus und klar abgegrenzter Kopfbereich. */
.header {
    max-width:none;
    padding:18px max(28px,calc((100% - 1104px)/2));
    background:#eef3e9;
    border-bottom:1px solid #d5dfcf;
    box-shadow:0 2px 8px #153e3b04
}
main {
    padding-top:20px;
    padding-bottom:20px
}
.hero {
    padding:28px 0 32px
}
.hero-with-guide {
    gap:36px
}
.hero-guide {
    padding:24px
}
.guide-art {
    height:120px
}
.art-orbit {
    width:120px;
    height:120px
}
.hero-guide h2 {
    font-size:29px
}
.hero-guide>p:not(.eyebrow) {
    margin-bottom:16px
}
h1 {
    margin:14px 0 20px
}
.section-intro {
    margin-bottom:20px
}
.offers-section {
    padding-top:36px
}
.panel,.about .panel {
    margin:24px 0
}
.content {
    padding:24px 0 32px
}
.guide-layout {
    padding-top:20px;
    gap:32px
}
.guide section {
    margin:26px 0
}
.sources {
    margin:24px 0
}
.about>h2 {
    margin-top:28px
}
.site-footer {
    margin-top:30px
}
.footer-inner {
    padding-top:34px
}
.footer-top {
    padding-bottom:24px
}
.footer-note {
    padding:20px 0
}
@media(max-width:850px) {
    .hero-with-guide {
        gap:24px
    }
    .guide-layout {
        gap:24px
    }
}
@media(max-width:650px) {
    .header {
        padding:16px 22px;
        gap:14px
    }
    .hero {
        padding:18px 0 26px
    }
    .hero-guide {
        padding:22px
    }
    .offers-section {
        padding-top:28px
    }
    .content {
        padding:18px 0 24px
    }
    .site-footer {
        margin-top:24px
    }
    .footer-inner {
        padding-top:28px
    }
}
.brand-logo .brand-wordmark {
    font-size:27px;
    letter-spacing:-.045em
}
.brand-wordmark strong {
    font-weight:750
}
.brand-logo .brand-wordmark>span {
    font-size:13px;
    letter-spacing:.12em;
    margin-top:5px
}
.brand-wordmark strong .brand-dash,.brand-wordmark strong .brand-dot {
    display:inline;
    font-size:inherit;
    font-weight:inherit
}
.brand-wordmark strong .brand-dash {
    color:#538266
}
.brand-wordmark strong .brand-dot {
    color:#538266
}
.site-footer .brand-wordmark strong .brand-dash,.site-footer .brand-wordmark strong .brand-dot {
    color:#b9dba8
}
.header .domain-logo,.footer-top .domain-logo {
    display:block;
    max-width:100%;
    line-height:0
}
.domain-logo img {
    display:block;
    width:440px;
    max-width:100%;
    height:auto
}
.footer-top .domain-logo img {
    width:360px
}
.footer-top {
    grid-template-columns:1.5fr 1fr 1fr
}
@media(max-width:850px) {
    .header {
        flex-wrap:wrap;
        gap:16px
    }
    .domain-logo img {
        width:390px
    }
}
@media(max-width:650px) {
    .footer-top {
        grid-template-columns:1fr
    }
    .domain-logo img {
        width:360px
    }
}
.offer-actions {
    display:flex;
    gap:12px;
    align-items:center;
    margin-top:18px;
    flex-wrap:wrap
}
.offer-actions [data-offer-back] {
    margin-left:auto;
}
.offer-actions .button {
    margin:0;
    font:inherit;
    font-weight:650;
    border:0
}
.button:disabled {
    background:#dce4dc;
    color:#53625c;
    cursor:not-allowed;
    border:0;
    font:inherit;
    font-weight:650
}
.more-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:6px;
    line-height:1.65;
    font-size:17px;
    border:1px solid #a9c2af;
    border-radius:8px;
    padding:11px 18px;
    text-decoration:none;
    font-weight:650
}
.more-button:hover {
    background:#eef4e9
}
.offer-checked {
    font-size:12px;
    color:var(--muted);
    margin:8px 0 0
}
.savings-section {
    border-top:1px solid var(--line);
    margin-top:36px;
    padding-top:28px
}
.section-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    margin-bottom:20px
}
.section-heading h2 {
    margin:8px 0
}
.section-heading p {
    max-width:680px
}
.section-heading>a {
    flex-shrink:0;
    font-weight:650
}
.savings-offer {
    border-top:4px solid #93b681
}
.savings-offer .offer-actions {
    margin-top:auto
}
.section-footnote {
    font-size:13px;
    color:var(--muted)
}
.detail-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:"offer information" "offer notice";
    gap:14px 28px;
    align-items:start
}
.detail-offer {
    grid-area:offer
}
.detail-information {
    grid-area:information
}
.detail-information .panel {
    font-size:15px;
    padding:18px 24px;
    margin:0 0 14px
}
.detail-information .panel:last-child {
    margin-bottom:0
}
.detail-information h2 {
    font-size:24px;
    margin:16px 0 8px
}
.detail-information h2:first-child {
    margin-top:0
}
.detail-information ul {
    margin:8px 0
}
.detail-information li {
    margin:5px 0
}
.detail-information p {
    margin:8px 0
}
.detail-information .panel > :last-child {
    margin-bottom:0
}
.detail-layout .detail-notice {
    grid-area:notice;
    margin-top:0
}
.detail-layout .panel:first-child {
    margin-top:0
}
.account-detail {
    padding-top:14px
}
.account-detail h1 {
    font-size:clamp(34px,4vw,50px)
}
.account-detail > .intro {
    max-width:none
}
.breadcrumb {
    font-size:14px
}
.detail-notice {
    background:#eef4e9;
    border-radius:12px;
    padding:24px;
    margin-top:26px;
    font-size:15px
}
.detail-notice h2 {
    display:flex;
    align-items:center;
    gap:10px;
    font-size:22px;
    margin-top:0
}
.detail-notice .notice-icon {
    flex-shrink:0;
    color:#f2cd72
}
.detail-bottom {
    display:flex;
    gap:20px;
    align-items:center;
    flex-wrap:wrap;
    margin:20px 0
}
.detail-bottom .button {
    margin:0
}
.detail-bottom span {
    font-size:13px;
    color:var(--muted)
}
@media(max-width:950px) {
    .header {
        flex-wrap:wrap
    }
    .header nav {
        gap:18px
    }
}
@media(max-width:900px) {
    .detail-layout {
        grid-template-columns:1fr;
        grid-template-areas:"offer" "notice" "information"
    }
}
@media(max-width:700px) {
    .section-heading {
        align-items:flex-start;
        flex-direction:column;
        gap:4px
    }
    .detail-bottom {
        align-items:flex-start;
        flex-direction:column
    }
}
/* Kurze Einstiege auf den Angebotsübersichten. */
.content.overview-intro {
    padding:10px 0 18px;
    max-width:none;
    min-height:0;
    margin:0
}
.overview-intro .eyebrow {
    margin:0 0 8px
}
.overview-intro h1 {
    font-size:clamp(30px,3.6vw,44px);
    line-height:1.15;
    margin:8px 0 12px
}
.overview-intro .intro {
    font-size:18px;
    max-width:850px;
    margin:0 0 10px
}
.overview-intro .section-footnote {
    margin:8px 0 0
}
.overview-intro + .offers-section {
    padding-top:8px
}
.overview-intro + .offers-section > .eyebrow {
    display:none
}
.overview-intro + .offers-section > h2 {
    font-size:24px;
    margin:0 0 10px
}
.overview-intro + .offers-section > p {
    margin:0 0 16px
}
/* Ratgeber: Girokonto und Tagesgeld sichtbar getrennt. */
.guide-category {
    scroll-margin-top:24px;
    margin:28px 0
}
.guide-category>h2 {
    margin:6px 0 16px
}
.savings-guides {
    border-top:3px solid #93b681;
    padding-top:24px
}
.savings-guides .card {
    background:#f0f5ea;
    border-color:#d6e3ce
}
.guide-menu .guide-group-label {
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.09em;
    margin:12px 0 3px;
    padding:6px 10px;
    border-top:1px solid var(--line);
    color:var(--ink)
}
.guide-menu .guide-group-label {
    background:#e3ecd9;
    border-radius:5px
}
.guide-menu nav a {
    font-size:14px;
    padding-top:6px;
    padding-bottom:6px
}
.final-checklist {
    padding-left:22px
}
.final-checklist li {
    padding:8px 0 10px;
    border-bottom:1px solid var(--line)
}
.final-checklist li::marker {
    color:var(--accent)
}
.guide-cost-paths {
    margin:2px 0 4px
}
.guide-submenu {
    margin:4px 0 4px 10px;
    padding-left:8px;
    border-left:2px solid #a9c2af
}
.guide-menu .guide-submenu a {
    font-size:13px;
    padding:6px 8px;
    line-height:1.4
}
.guide-menu .guide-submenu a[aria-current="page"] {
    background:var(--ink);
    color:white;
    font-weight:700
}
.guide-submenu[hidden] {
    display:none
}
.guide-cost-paths:has(.guide-submenu:not([hidden]))>a:not([aria-current]) {
    background:#e3ecd9;
    font-weight:650
}
/* Lange Menüs bleiben vollständig erreichbar, ohne eigene Scrollleiste. */
.guide-menu {
    position:static;
    max-height:none;
    overflow:visible;
    scrollbar-gutter:auto;
    overscroll-behavior-y:auto
}
@media(min-width:851px) {
    .guide-menu {
        position:sticky;
        top:var(--guide-sticky-top, 24px)
    }
}
.guide-back-top {
    text-align:right;
    margin:20px 0;
    font-size:14px
}
.guide-back-top a {
    display:inline-block;
    padding:6px 0
}
/* Projektinformationen nutzen die gesamte Inhaltsbreite. */
.content.about {
    max-width:none;
    width:100%
}
/* Hauptnavigation als kompakte, zusammengehörige Menüleiste. */
.header nav {
    gap:5px;
    padding:5px;
    border:1px solid #d4e0cc;
    border-radius:14px;
    background:#ffffffa6;
    box-shadow:0 3px 12px #153e3b06;
    flex-wrap:nowrap
}
.header nav a {
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    padding:9px 15px;
    border-radius:10px;
    font-size:14px;
    font-weight:650;
    line-height:1.4;
    color:#35564b;
    white-space:nowrap;
    text-decoration:none;
    transition:background-color .15s ease,color .15s ease,box-shadow .15s ease
}
.header nav a:hover {
    background:#e2ecd9;
    color:var(--ink);
    text-decoration:none
}
.header nav a[aria-current="page"] {
    background:var(--ink);
    color:#fff;
    box-shadow:0 2px 5px #153e3b18;
    text-decoration:none
}
.header nav a:focus-visible {
    outline:2px solid var(--accent);
    outline-offset:2px
}
@media(max-width:950px) {
    .header nav {
        gap:4px
    }
}
@media(max-width:650px) {
    .header nav {
        width:100%;
        display:grid;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:4px
    }
    .header nav a {
        padding:9px 10px;
        white-space:normal
    }
}
@media(prefers-reduced-motion:reduce) {
    .header nav a {
        transition:none
    }
}
/* Vier Wege auf der Startseite: kompakte Karten. */
.topics-grid .topic {
    padding:18px;
    gap:0
}
.topics-grid .topic .number {
    font-size:13px;
    line-height:1.3
}
.topics-grid .topic h3 {
    font-size:20px;
    line-height:1.22;
    margin:10px 0 10px
}
.topics-grid .topic p {
    font-size:15px;
    line-height:1.5;
    margin:0 0 14px
}
.topics-grid .topic a {
    font-size:14px;
    line-height:1.5
}
.header nav a[aria-current="true"] {
    background:var(--ink);
    color:#fff;
    box-shadow:0 2px 5px #153e3b18;
    text-decoration:none
}
/* Einleitung über den vier Wegen nutzt die gesamte Breite. */
#ratgeber > .section-intro {
    max-width:none
}
/* Kompakte Kostenmodell-Karten im Ratgeber; zwei Spalten bleiben erhalten. */
.cost-path-cards {
    gap:16px
}
.cost-path-cards .topic {
    padding:18px
}
.cost-path-cards .number {
    font-size:13px;
    line-height:1.3
}
.cost-path-cards .topic h3 {
    font-size:20px;
    line-height:1.22;
    margin:10px 0
}
.cost-path-cards .topic p {
    font-size:15px;
    line-height:1.5;
    margin:0 0 14px
}
.cost-path-cards .topic a {
    font-size:14px;
    line-height:1.5
}
/* Einstiegstext der Projektseite ohne zusätzliche Breitenbegrenzung. */
.content.about > .intro {
    max-width:none
}
/* Kompakter Einstieg: schneller zu den Angeboten auf der Startseite. */
.home-page .hero {
    padding:10px 0 22px;
    gap:28px
}
.home-page .hero-copy>.eyebrow {
    margin:0 0 8px
}
.home-page .hero h1 {
    margin:8px 0 14px;
    font-size:clamp(32px,4vw,48px)
}
.home-page .hero .intro {
    font-size:18px;
    line-height:1.55;
    margin:0 0 16px
}
.hero-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:10px
}
.home-page .hero-actions .button {
    margin:0;
    padding:10px 14px;
    font-size:14px
}
.home-page .button-secondary {
    background:transparent;
    border:1px solid #bbcebd;
    color:var(--muted);
    font-weight:550
}
.home-page .button-secondary:hover {
    background:#eaf1e3;
    color:var(--ink);
    text-decoration:none
}
.home-page .hero-guide {
    padding:18px;
    border-radius:18px
}
.home-page .guide-art {
    height:82px
}
.home-page .art-orbit {
    height:80px;
    width:80px
}
.home-page .art-card {
    width:140px;
    height:78px;
    padding:10px 14px
}
.home-page .art-card strong {
    font-size:27px;
    margin-top:4px
}
.home-page .art-chip {
    width:18px;
    height:11px
}
.home-page .art-note {
    font-size:11px;
    padding:3px 8px
}
.home-page .hero-guide .eyebrow {
    margin:10px 0 0
}
.home-page .hero-guide h2 {
    font-size:25px;
    margin:6px 0 8px
}
.home-page .hero-guide>p:not(.eyebrow) {
    font-size:14px;
    line-height:1.5;
    margin:0 0 10px
}
.home-page .hero-guide>a {
    padding-top:10px;
    font-size:14px
}
.home-page #ratgeber>h2 {
    margin:0 0 8px;
    font-size:26px
}
.home-page #ratgeber>.section-intro {
    margin:0 0 14px;
    font-size:16px
}
.home-page .topics-grid .topic {
    padding:15px
}
.home-page .topics-grid .topic h3 {
    margin:7px 0;
    font-size:19px
}
.home-page .topics-grid .topic p {
    margin-bottom:10px
}
.home-page .offers-section {
    padding-top:24px
}
.home-page .offers-section>.eyebrow {
    margin:0 0 6px
}
.home-page .offers-section>h2 {
    margin:0 0 8px
}
.home-page .offers-section>p {
    margin:0 0 14px
}
.home-page .comparison-note {
    padding:14px 18px;
    margin-bottom:18px
}
.home-page .comparison-note h3 {
    margin-bottom:6px
}
.home-page .comparison-note p {
    margin:6px 0
}
@media(max-width:850px) {
    .home-page .hero {
        gap:18px
    }
    .home-page .hero-guide {
        max-width:none;
        display:grid;
        grid-template-columns:100px minmax(0,1fr);
        column-gap:18px
    }
    .home-page .guide-art {
        grid-column:1;
        grid-row:1/5;
        align-self:center
    }
    .home-page .hero-guide>.eyebrow,.home-page .hero-guide>h2,.home-page .hero-guide>p,.home-page .hero-guide>a {
        grid-column:2
    }
    .home-page .art-card {
        width:100px
    }
    .home-page .art-note {
        display:none
    }
}
@media(max-width:400px) {
    .home-page .hero-guide {
        grid-template-columns:1fr
    }
    .home-page .guide-art {
        display:none
    }
    .home-page .hero-guide>.eyebrow,.home-page .hero-guide>h2,.home-page .hero-guide>p,.home-page .hero-guide>a {
        grid-column:1
    }
}
/* Einheitliche Links von der Startauswahl zur vollständigen Übersicht. */
.overview-action {
    display:flex;
    justify-content:center;
    margin:20px 0 8px
}
.overview-action .overview-button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin:0;
    padding:12px 24px;
    border:1px solid #a9c3b4;
    border-radius:12px;
    background:#e8f0e6;
    color:var(--brand,#185f50);
    font-weight:700;
    box-shadow:0 2px 5px #123e2910;
    transition:background .15s,border-color .15s,box-shadow .15s
}
.overview-action .overview-button:hover {
    background:#dce9d9;
    border-color:#6b9680;
    box-shadow:0 4px 10px #123e2918;
    text-decoration:none
}
.overview-action .overview-button:focus-visible {
    outline:3px solid #337a65;
    outline-offset:3px
}
@media(max-width:550px) {
    .overview-action .overview-button {
        width:100%
    }
}
.account-comparison {
    margin:20px 0 28px
}
.comparison-heading h2 {
    font-size:25px;
    margin:0 0 6px
}
.comparison-heading p {
    color:var(--muted);
    margin:0 0 14px;
    font-size:15px
}
.comparison-scroll {
    overflow-x:auto;
    border:1px solid #d7e2d7;
    border-radius:14px;
    background:#fff
}
.comparison-scroll:focus-visible {
    outline:3px solid #337a65;
    outline-offset:3px
}
.comparison-table {
    width:100%;
    border-collapse:collapse;
    min-width:780px;
    table-layout:fixed;
    text-align:left;
    font-size:14px;
    line-height:1.5
}
.comparison-table caption {
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip-path:inset(50%)
}
.comparison-table th,.comparison-table td {
    padding:14px 16px;
    vertical-align:top;
    border-bottom:1px solid #e4ebe3;
    overflow-wrap:anywhere
}
.comparison-table thead th {
    background:#e8f0e6;
    color:#174f43;
    font-size:13px;
    font-weight:700
}
.comparison-table th:first-child {
    width:23%
}
.comparison-table th:nth-child(2) {
    width:25%
}
.comparison-table tbody th {
    font-weight:650
}
.comparison-table tbody tr:nth-child(even) {
    background:#f7f9f5
}
.comparison-table tbody tr:hover {
    background:#edf4e9
}
.comparison-table tbody tr:last-child>* {
    border-bottom:0
}
.comparison-table tbody th a {
    color:#175e50;
    text-decoration:underline;
    text-decoration-color:#aec7bc;
    text-underline-offset:3px
}
.comparison-table small {
    display:block;
    color:var(--muted);
    font-size:11px;
    font-weight:400;
    margin-top:5px
}
.comparison-price {
    display:block;
    font-size:19px;
    color:#175e50;
    margin-bottom:3px
}
.comparison-table td span {
    display:block
}
.home-page .overview-action {
    justify-content:flex-end;
    margin:14px 0 16px
}
.home-page .home-offer-heading {
    gap:20px;
    margin-bottom:18px
}
.home-page .home-offer-heading>div:first-child {
    min-width:0
}
.home-page .home-offer-heading .overview-action {
    flex-shrink:0;
    margin:0
}
.home-page .home-offer-heading .eyebrow {
    margin:0 0 6px
}
.home-page .home-offer-heading h2 {
    margin:0 0 8px
}
.home-page .home-offer-heading p:last-child {
    margin-bottom:0
}
@media(max-width:700px) {
    .home-page .home-offer-heading {
        gap:14px
    }
    .home-page .home-offer-heading .overview-action {
        align-self:stretch;
        justify-content:flex-start
    }
}
.mobile-comparison-label {
    display:none!important
}
@media(max-width:700px) {
    .comparison-scroll {
        overflow:visible;
        border:0;
        border-radius:0;
        background:transparent
    }
    .comparison-table {
        display:block;
        min-width:0;
        width:100%;
        table-layout:auto
    }
    .comparison-table thead {
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip-path:inset(50%)
    }
    .comparison-table tbody {
        display:grid;
        gap:12px
    }
    .comparison-table tbody tr {
        display:block;
        background:#fff;
        border:1px solid #d7e2d7;
        border-radius:12px;
        padding:14px 16px
    }
    .comparison-table tbody tr:nth-child(even) {
        background:#fff
    }
    .comparison-table tbody th,.comparison-table tbody td {
        display:block;
        width:auto!important;
        padding:0;
        border:0
    }
    .comparison-table tbody th {
        font-size:16px
    }
    .comparison-table tbody th small {
        margin-top:3px
    }
    .comparison-table tbody td {
        margin-top:10px;
        font-size:13px
    }
    .comparison-table .comparison-price {
        font-size:20px;
        margin-bottom:0
    }
    .comparison-table .mobile-comparison-label {
        display:block!important;
        font-size:11px;
        font-weight:700;
        color:#536b5e;
        margin-bottom:2px
    }
}
.comparison-mobile-footer {
    display:none
}
@media(max-width:700px) {
    .comparison-table .comparison-date-desktop {
        display:none
    }
    .comparison-mobile-footer {
        display:flex;
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
        margin-top:14px;
        padding-top:12px;
        border-top:1px solid #e4ebe3
    }
    .comparison-mobile-footer .more-button {
        font-size:17px
    }
    .comparison-mobile-footer small {
        margin:0
    }
}
.comparison-table tbody th .comparison-desktop-button {
    display:flex;
    width:fit-content;
    margin:10px 0 8px;
    color:var(--accent);
    background:transparent;
    text-decoration:none;
    white-space:nowrap
}
.comparison-table tbody th .comparison-desktop-button:hover {
    background:#eef4e9
}
@media(max-width:700px) {
    .comparison-table tbody th .comparison-desktop-button {
        display:none
    }
}
.comparison-table .more-button {
    font-size:13px;
    padding:7px 12px;
    line-height:1.5
}
.comparison-table .comparison-mobile-footer .more-button {
    font-size:13px
}
.offer-tools {
    margin:12px 0 14px;
    padding:12px 14px;
    border:1px solid var(--line);
    border-radius:10px;
    background:#eef4e9;
    font-size:13px
}
.offer-tools[hidden],[data-compare][hidden],.filter-empty[hidden] {
    display:none!important
}
.offer-tools fieldset {
    border:0;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 16px
}
.offer-tools legend {
    font-weight:700;
    margin-bottom:6px
}
.offer-tools label {
    display:flex;
    align-items:center;
    gap:6px;
    cursor:pointer
}
.offer-tools input {
    accent-color:var(--accent);
    width:16px;
    height:16px
}
.offer-tools-status {
    display:flex;
    align-items:center;
    gap:14px;
    margin-top:8px;
    color:var(--muted)
}
.offer-tools .bonus-filters {
    margin-top:12px
}
.offer-bonus {
    border-top:1px solid var(--line);
    padding-top:12px;
    margin-top:6px;
    font-size:14px
}
.offer-bonus h3 {
    font-size:17px;
    margin:0 0 8px
}
.offer-bonus p {
    margin:8px 0
}
.bonus-conditions summary {
    cursor:pointer;
    color:var(--accent);
    font-weight:650
}
.comparison-bonus {
    display:block;
    margin-top:8px;
    font-size:12px;
    color:var(--accent)
}
.offer-tools button {
    font:inherit;
    color:var(--accent);
    border:0;
    background:none;
    text-decoration:underline;
    cursor:pointer;
    padding:3px
}
.offer-tools select {
    max-width:100%;
    font:inherit;
    padding:6px 10px;
    border:1px solid #a9c2af;
    border-radius:7px;
    background:white;
    color:var(--ink)
}
.sort-help {
    margin:7px 0 0;
    color:var(--muted);
    font-size:12px
}
.filter-empty {
    margin:10px 0 0
}
@media(max-width:550px) {
    .offer-tools fieldset {
        display:grid;
        gap:9px
    }
    .sort-label {
        flex-wrap:wrap
    }
}
.comparison-table td .money-nowrap {
    display:inline;
    white-space:nowrap;
    overflow-wrap:normal;
    word-break:normal
}
/* Kompakter, einheitlicher Hinweis vor den Vergleichen. */
.comparison-note,.home-page .comparison-note {
    padding:12px 16px;
    margin-bottom:16px;
    line-height:1.5
}
.comparison-note h3,.home-page .comparison-note h3 {
    font-size:15px;
    margin:0 0 4px
}
.comparison-note p,.home-page .comparison-note p {
    margin:0
}

/* Startseite: vollständig anklickbare Ratgeberkarten. */
.home-page .topics-grid .topic,
:is(.guide-category, .cost-path-cards) .topic {
    position: relative;
    transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.home-page .topics-grid .topic > a,
:is(.guide-category, .cost-path-cards) .topic > a {
    display: block;
    width: 100%;
    border-top: 1px solid var(--line);
    padding-top: 10px;
    text-decoration: none;
}
.home-page .topics-grid .topic > a::after,
:is(.guide-category, .cost-path-cards) .topic > a::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
}
.home-page .topics-grid .topic:hover,
.home-page .topics-grid .topic:focus-within,
:is(.guide-category, .cost-path-cards) .topic:hover,
:is(.guide-category, .cost-path-cards) .topic:focus-within {
    border-color: var(--accent);
    box-shadow: 0 3px 12px #153e3b10;
}
.home-page .topics-grid .topic > a:focus-visible,
:is(.guide-category, .cost-path-cards) .topic > a:focus-visible {
    outline: none;
}
.home-page .topics-grid .topic > a:focus-visible::after,
:is(.guide-category, .cost-path-cards) .topic > a:focus-visible::after {
    outline: 3px solid #a86312;
    outline-offset: 4px;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .home-page .topics-grid .topic:hover,
    :is(.guide-category, .cost-path-cards) .topic:hover {
        transform: translateY(-5px);
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-page .topics-grid .topic,
    :is(.guide-category, .cost-path-cards) .topic {
        transition: none;
    }
}
:is(.guide-category, .cost-path-cards) .topic {
    padding:18px 20px;
    gap:0
}
:is(.guide-category, .cost-path-cards) .topic .eyebrow {
    margin:0 0 5px
}
:is(.guide-category, .cost-path-cards) .topic h3 {
    margin:0 0 8px
}
:is(.guide-category, .cost-path-cards) .topic p:not(.eyebrow) {
    margin:0 0 12px
}
:is(.guide-category, .cost-path-cards) .topic > a {
    margin-top:auto;
    padding-top:8px
}