:root {
    --bg: #f4f8fd;
    --bg-blue: #eef6ff;
    --surface: #ffffff;
    --ink: #071b3a;
    --ink-soft: #172a4a;
    --muted: #4f5f78;
    --line: #d7e2ef;
    --line-strong: #bed0e4;
    --brand: #075bd8;
    --brand-2: #0145b9;
    --brand-dark: #07224a;
    --brand-soft: #eaf3ff;
    --green: #31a24c;
    --radius: 12px;
    --radius-lg: 18px;
    --shadow: 0 18px 45px rgba(7, 27, 58, .10);
    --shadow-soft: 0 10px 28px rgba(7, 27, 58, .07);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    color: var(--ink);
    background: var(--surface);
    line-height: 1.55;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration-thickness: .07em; text-underline-offset: .18em; }
img { max-width: 100%; height: auto; display: block; }
.container { width: min(1180px, calc(100% - 64px)); margin-inline: auto; }
.narrow { width: min(810px, calc(100% - 64px)); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--ink); color: #fff; padding: .7rem 1rem; z-index: 100; }
.skip-link:focus { left: 1rem; top: 1rem; }
.ui-icon { width: 24px; height: 24px; display: inline-block; flex: 0 0 auto; }
.button-icon { width: 18px; height: 18px; margin-left: 9px; }
.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(255,255,255,.98);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 3px 18px rgba(7,27,58,.04);
}
.header-inner {
    min-height: 72px;
    display: flex;
    align-items: center;
    gap: 22px;
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    color: var(--ink);
    min-width: 292px;
}
.brand-mark {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, #0b72f0, #0147ba);
    color: #fff;
    font-weight: 900;
    font-size: 1.34rem;
    box-shadow: 0 10px 21px rgba(7,91,216,.24);
}
.brand-text { display: grid; line-height: 1.08; }
.brand-text strong { font-weight: 900; letter-spacing: -.02em; font-size: 1.04rem; }
.brand-text small { margin-top: 4px; color: var(--muted); font-size: .82rem; }
.main-nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.main-nav a {
    color: var(--ink);
    text-decoration: none;
    font-weight: 800;
    font-size: .92rem;
    white-space: nowrap;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a.is-active { color: var(--brand); border-bottom-color: var(--brand); }
.header-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 43px;
    padding: .72rem 1.08rem;
    border-radius: 8px;
    background: linear-gradient(180deg, #0965e6, #014fc9);
    color: #fff;
    text-decoration: none;
    font-weight: 850;
    font-size: .92rem;
    box-shadow: 0 11px 22px rgba(7,91,216,.23);
}
.header-cta:hover { background: linear-gradient(180deg, #075bd8, #003fa9); }
.nav-toggle { display: none; border: 1px solid var(--line); background: #fff; padding: .58rem .82rem; border-radius: 9px; font: inherit; color: var(--ink); }
h1, h2, h3 { color: var(--ink); margin: 0 0 .85rem; letter-spacing: -.035em; line-height: 1.08; }
h1 { font-size: clamp(2.65rem, 5vw, 4.58rem); font-weight: 900; }
h2 { font-size: clamp(1.78rem, 3vw, 2.58rem); font-weight: 880; }
h3 { font-size: 1rem; font-weight: 880; letter-spacing: -.02em; }
p { margin: 0 0 1rem; color: var(--muted); }
.eyebrow {
    margin: 0 0 1.12rem;
    color: var(--brand);
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .83rem;
    font-weight: 900;
}
.home-hero {
    position: relative;
    overflow: hidden;
    padding: 74px 0 28px;
    background:
        radial-gradient(circle at 82% 20%, rgba(7,91,216,.10), transparent 28%),
        linear-gradient(180deg, #f9fcff 0%, #ffffff 45%, #f4f9ff 100%);
}
.home-hero::before {
    content: "";
    position: absolute;
    right: -150px;
    top: 0;
    width: 50vw;
    height: 100%;
    background:
        radial-gradient(circle at 70% 42%, rgba(7,91,216,.14), transparent 17%),
        linear-gradient(90deg, rgba(255,255,255,0), rgba(233,242,252,.9)),
        repeating-linear-gradient(90deg, rgba(7,27,58,.035) 0 1px, transparent 1px 18px);
    opacity: .65;
    pointer-events: none;
}
.hero-bg-shape {
    position: absolute;
    right: 7%;
    top: 104px;
    width: 360px;
    height: 360px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(7,91,216,.10), transparent 64%);
    filter: blur(5px);
}
.home-hero-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(340px, .74fr);
    gap: 70px;
    align-items: center;
}
.home-hero-copy { max-width: 630px; }
.home-hero-copy h1 { max-width: 620px; }
.home-hero-copy h1::after { content: ""; color: var(--brand); }
.hero-description {
    font-size: clamp(1.08rem, 1.45vw, 1.25rem);
    color: var(--ink-soft);
    max-width: 560px;
    margin-bottom: 1.35rem;
}
.hero-checks {
    list-style: none;
    padding: 0;
    margin: 0 0 1.8rem;
    display: grid;
    gap: 12px;
    color: var(--ink);
    font-weight: 650;
}
.hero-checks li { display: flex; align-items: center; gap: 12px; }
.hero-checks svg {
    width: 22px;
    height: 22px;
    padding: 3px;
    border-radius: 50%;
    color: #fff;
    background: var(--brand);
    stroke-width: 3;
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 1.4rem; }
.hero-actions-left { justify-content: flex-start; margin-top: 0; }
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .82rem 1.32rem;
    border-radius: 8px;
    font-weight: 860;
    text-decoration: none;
}
.button.primary {
    color: #fff;
    background: linear-gradient(180deg, #0b68ea, #014fc9);
    box-shadow: 0 13px 25px rgba(7,91,216,.24);
}
.button.primary:hover { background: linear-gradient(180deg, #075bd8, #003fa9); }
.button.secondary { color: var(--ink); background: #fff; border: 1px solid var(--line-strong); }
.button.secondary:hover { border-color: var(--brand); color: var(--brand); }
.home-hero-visual {
    position: relative;
    min-height: 390px;
    border-radius: 28px;
    background:
        linear-gradient(135deg, rgba(255,255,255,.80), rgba(255,255,255,.30)),
        radial-gradient(circle at 88% 78%, rgba(49,162,76,.18), transparent 22%),
        linear-gradient(120deg, #f6fbff, #eaf3ff);
    border: 1px solid rgba(215,226,239,.82);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.home-hero-visual::before {
    content: "";
    position: absolute;
    right: 18px;
    bottom: -25px;
    width: 140px;
    height: 220px;
    border-radius: 80px 80px 12px 12px;
    background:
        linear-gradient(90deg, transparent 43%, rgba(11,87,48,.16) 44% 54%, transparent 55%),
        radial-gradient(ellipse at 50% 13%, rgba(40,148,70,.42), transparent 53%);
    filter: blur(.1px);
    opacity: .86;
}
.visual-card {
    position: absolute;
    background: rgba(255,255,255,.92);
    border: 1px solid rgba(190,208,228,.86);
    box-shadow: 0 18px 38px rgba(7,27,58,.09);
    backdrop-filter: blur(10px);
}
.visual-card-main {
    left: 42px;
    top: 44px;
    width: min(330px, calc(100% - 84px));
    border-radius: 18px;
    padding: 25px 26px 27px;
}
.visual-card-main strong { display: block; font-size: 1.42rem; letter-spacing: -.035em; margin-bottom: 7px; }
.visual-card-main p { margin-bottom: 18px; }
.visual-kicker { display: inline-block; color: var(--brand); font-weight: 900; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; margin-bottom: 12px; }
.visual-meter { height: 9px; border-radius: 99px; background: #e7eef7; overflow: hidden; }
.visual-meter span { display: block; width: 72%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #0b68ea, #31a24c); }
.visual-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 62px;
    border-radius: 16px;
    padding: 14px 17px;
    font-weight: 850;
    color: var(--ink);
}
.visual-row svg { color: var(--brand); }
.row-one { right: 38px; top: 175px; }
.row-two { left: 74px; bottom: 82px; }
.row-three { right: 55px; bottom: 44px; }
.proofbar {
    display: grid;
    grid-template-columns: 1.05fr .92fr .92fr 1.35fr;
    margin: 42px 0 0;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 14px;
    box-shadow: 0 16px 38px rgba(7,27,58,.08);
    overflow: hidden;
}
.proofbar div {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 23px 29px;
    border-right: 1px solid var(--line);
}
.proofbar div:last-child { border-right: 0; }
.proofbar svg { width: 37px; height: 37px; color: var(--brand); stroke-width: 1.9; }
.proofbar strong { display: block; color: var(--ink); font-size: 1.14rem; line-height: 1.12; margin-bottom: 3px; }
.proofbar em { display: block; color: var(--muted); font-style: normal; font-size: .92rem; }
.hero-simple {
    padding: 72px 0 54px;
    background: linear-gradient(180deg, #f7fbff, #fff);
    border-bottom: 1px solid var(--line);
}
.hero-shell { text-align: center; max-width: 860px; }
.hero-simple h1 { font-size: clamp(2.18rem, 4.2vw, 3.6rem); }
.intro-text { font-size: 1.08rem; color: var(--ink-soft); }
.trust-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 22px;
    list-style: none;
    padding: 0;
    margin: 1.2rem auto 0;
    color: var(--ink);
    font-weight: 680;
}
.trust-list li { position: relative; padding-left: 20px; }
.trust-list li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); }
.section { padding: 68px 0; background: #fff; }
.section.light { background: var(--bg); }
.center-heading { text-align: center; max-width: 780px; margin: 0 auto 36px; }
.center-heading p { max-width: 640px; margin-inline: auto; }
.section-heading { max-width: 760px; margin-bottom: 30px; }
.section-heading p { max-width: 660px; }
.section-steps { padding-top: 58px; padding-bottom: 64px; }
.step-flow {
    display: grid;
    grid-template-columns: 1fr 82px 1fr 82px 1fr;
    align-items: start;
    gap: 12px;
}
.flow-step { text-align: center; position: relative; padding: 0 12px; }
.step-number {
    display: inline-grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    font-weight: 900;
    box-shadow: 0 9px 18px rgba(7,91,216,.22);
    margin-bottom: 16px;
}
.step-icon {
    display: grid;
    place-items: center;
    width: 66px;
    height: 66px;
    margin: 0 auto 18px;
    border-radius: 14px;
    background: var(--brand-soft);
    color: var(--brand);
    border: 1px solid #d9e9ff;
}
.step-icon svg { width: 36px; height: 36px; }
.flow-step p { max-width: 250px; margin-inline: auto; color: var(--ink-soft); }
.flow-arrow { align-self: center; justify-self: center; color: #77aaf0; font-size: 2.35rem; margin-top: 82px; }
.advantage-section {
    background: linear-gradient(180deg, #f0f8ff 0%, #f9fcff 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.advantage-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.advantage-card,
.card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-soft);
}
.advantage-card { padding: 28px 27px 26px; }
.advantage-icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    border-radius: 50%;
    color: var(--brand);
    margin-bottom: 17px;
}
.advantage-icon svg { width: 42px; height: 42px; stroke-width: 1.9; }
.advantage-card p:last-child { margin-bottom: 0; font-size: .94rem; }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.card { padding: 24px; }
.card h3 { padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.card p:last-child { margin-bottom: 0; }
.comparison-section {
    padding: 72px 0 78px;
    background: #fff;
}
.comparison-wrap { width: min(960px, calc(100% - 52px)); }
.comparison-intro { text-align: center; max-width: 760px; margin: 0 auto 28px; }
.comparison-intro p:last-child { max-width: 690px; margin-inline: auto; color: var(--ink-soft); }
.comparison-panel {
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 16px;
    padding: 10px;
    box-shadow: 0 18px 44px rgba(7,27,58,.08);
}
.comparison-frame {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 11px;
    padding: clamp(8px, 1.1vw, 13px);
    overflow: visible;
}
.comparison-frame #c24pp-dsl-iframe { width: 100%; min-height: 690px; margin-inline: auto; }
.comparison-frame #c24pp-dsl-iframe > *,
.comparison-frame iframe { margin-inline: auto !important; }
.comparison-frame iframe { width: 100% !important; max-width: 100% !important; min-height: 690px; border: 0; display: block; }
.comparison-note { margin: 12px auto 0; max-width: 740px; text-align: center; font-size: .9rem; color: var(--muted); }
.text-section { background: #fff; }
.text-section p { font-size: 1.02rem; }
.split-grid { display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(280px, 420px); gap: 44px; align-items: center; }
.split-grid figure { margin: 0; border-radius: 15px; overflow: hidden; box-shadow: var(--shadow-soft); border: 1px solid var(--line); background: #fff; }
.split-grid img { width: 100%; aspect-ratio: 1400 / 933; object-fit: cover; }
.topics-section { padding: 64px 0 66px; background: #fff; }
.topic-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 22px; }
.topic-grid a {
    min-height: 68px;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: #fff;
    border: 1px solid var(--line-strong);
    border-radius: 10px;
    color: var(--ink);
    text-decoration: none;
    font-weight: 850;
    box-shadow: 0 8px 19px rgba(7,27,58,.045);
}
.topic-grid a:hover { border-color: var(--brand); color: var(--brand); transform: translateY(-1px); }
.topic-grid span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--brand-soft); color: var(--brand); }
.topic-grid svg { width: 24px; height: 24px; }
.topic-grid em { margin-left: auto; font-style: normal; font-size: 1.7rem; color: var(--brand); line-height: 1; }
.link-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.link-grid a { display: block; padding: 14px 16px; background: #fff; border: 1px solid var(--line); border-radius: 12px; text-decoration: none; font-weight: 760; color: var(--ink); box-shadow: 0 7px 18px rgba(7,27,58,.035); }
.faq-section details { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 18px 20px; margin-bottom: 12px; }
.faq-section summary { cursor: pointer; font-weight: 850; color: var(--ink); }
.faq-section details p { margin: 12px 0 0; }
.legal { background: #fff; padding: 60px 0; }
.legal h1 { font-size: clamp(2rem, 4vw, 3rem); }
.legal h2 { margin-top: 2rem; font-size: 1.45rem; }
.legal address { font-style: normal; color: var(--muted); }
.mail-protected { font-weight: 760; }
.site-footer {
    background: radial-gradient(circle at 88% 28%, rgba(7,91,216,.22), transparent 27%), linear-gradient(135deg, #071a35, #041121 70%);
    color: #e2ecf8;
    padding: 50px 0 24px;
}
.site-footer p, .site-footer a { color: #d9e6f5; }
.footer-grid { display: grid; grid-template-columns: 1.55fr 1fr 1fr .9fr; gap: 38px; align-items: start; }
.footer-grid-trust { grid-template-columns: 1.55fr 1fr 1fr .9fr 1.3fr; }
.footer-brand, .footer-title { font-weight: 900; color: #fff !important; margin-bottom: .68rem; }
.footer-grid a { display: block; text-decoration: none; margin: .43rem 0; }
.footer-grid a:hover { text-decoration: underline; }
.footer-trust-badge {
    display: grid;
    grid-template-columns: 52px 1fr;
    align-items: center;
    gap: 15px;
    min-height: 94px;
    padding: 19px 20px;
    border-radius: 13px;
    background: rgba(255,255,255,.075);
    border: 1px solid rgba(255,255,255,.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
}
.footer-trust-badge span { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: rgba(49,162,76,.17); color: #92e277; }
.footer-trust-badge svg { width: 38px; height: 38px; stroke-width: 1.8; }
.footer-trust-badge strong { display: block; color: #fff; font-size: 1.12rem; margin-bottom: 3px; }
.footer-trust-badge small { display: block; color: #d9e6f5; line-height: 1.35; }
.footer-bottom { margin-top: 34px; border-top: 1px solid rgba(255,255,255,.18); padding-top: 20px; font-size: .88rem; }
@media (max-width: 1120px) {
    .main-nav { gap: 14px; }
    .brand { min-width: 260px; }
    .home-hero-grid { grid-template-columns: 1fr; gap: 34px; }
    .home-hero-copy { max-width: 760px; }
    .home-hero-visual { min-height: 310px; }
    .proofbar { grid-template-columns: 1fr 1fr; }
    .proofbar div:nth-child(2) { border-right: 0; }
    .proofbar div:nth-child(1), .proofbar div:nth-child(2) { border-bottom: 1px solid var(--line); }
    .advantage-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .footer-grid-trust { grid-template-columns: 1.4fr 1fr 1fr; }
    .footer-trust-badge { grid-column: span 1; }
}
@media (max-width: 980px) {
    .container { width: min(100% - 40px, 1180px); }
    .narrow { width: min(100% - 40px, 810px); }
    .brand { min-width: auto; }
    .nav-toggle { display: inline-flex; margin-left: auto; }
    .main-nav {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 78px;
        padding: 16px;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 16px;
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    .main-nav.is-open { display: flex; }
    .main-nav a { padding: 9px 10px; border-bottom: 0; border-radius: 8px; }
    .main-nav a:hover, .main-nav a.is-active { background: var(--brand-soft); }
    .header-cta { display: none; }
    .step-flow { grid-template-columns: 1fr; gap: 24px; }
    .flow-arrow { display: none; }
    .flow-step p { max-width: 440px; }
    .topic-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .cards { grid-template-columns: 1fr; }
    .split-grid { grid-template-columns: 1fr; }
    .footer-grid,
    .footer-grid-trust { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 680px) {
    .container { width: min(100% - 28px, 1180px); }
    .narrow { width: min(100% - 28px, 810px); }
    .header-inner { min-height: 66px; }
    .brand-mark { width: 38px; height: 38px; }
    .brand-text strong { font-size: .92rem; }
    .brand-text small { display: none; }
    .home-hero { padding: 46px 0 22px; }
    h1 { font-size: clamp(2.3rem, 11vw, 3.1rem); }
    h2 { font-size: clamp(1.62rem, 7vw, 2.18rem); }
    .hero-actions-left, .hero-actions { display: grid; justify-content: stretch; }
    .home-hero-visual { display: none; }
    .proofbar { grid-template-columns: 1fr; margin-top: 30px; }
    .proofbar div { border-right: 0; border-bottom: 1px solid var(--line); padding: 19px; }
    .proofbar div:last-child { border-bottom: 0; }
    .section { padding: 54px 0; }
    .advantage-grid { grid-template-columns: 1fr; }
    .topic-grid { grid-template-columns: 1fr; }
    .link-grid { grid-template-columns: 1fr; }
    .comparison-wrap { width: min(100% - 20px, 960px); }
    .comparison-panel { padding: 6px; border-radius: 14px; }
    .comparison-frame { padding: 5px; }
    .footer-grid,
    .footer-grid-trust { grid-template-columns: 1fr; }
}

/* Revision 5: Hero-Grafik ohne formularartige Darstellung */
.hero-dashboard {
    min-height: 390px;
    padding: 38px;
    display: grid;
    align-items: center;
}
.hero-dashboard::before {
    right: 24px;
    bottom: -32px;
    width: 150px;
    height: 245px;
    opacity: .72;
}
.dashboard-panel {
    position: relative;
    width: min(392px, calc(100% - 10px));
    min-height: 248px;
    border-radius: 20px;
    padding: 28px 30px;
    background: rgba(255,255,255,.94);
    border: 1px solid rgba(190,208,228,.9);
    box-shadow: 0 18px 42px rgba(7,27,58,.10);
    backdrop-filter: blur(10px);
    z-index: 2;
}
.dashboard-panel strong {
    display: block;
    max-width: 310px;
    font-size: 1.42rem;
    line-height: 1.15;
    letter-spacing: -.035em;
    margin-bottom: 10px;
}
.dashboard-panel p {
    max-width: 310px;
    margin-bottom: 18px;
    color: var(--muted);
}
.dashboard-bars {
    display: grid;
    gap: 9px;
    margin: 20px 0 22px;
}
.dashboard-bars span {
    display: block;
    height: 8px;
    border-radius: 99px;
    background: linear-gradient(90deg, #0b68ea, #31a24c);
}
.dashboard-bars .bar-one { width: 82%; }
.dashboard-bars .bar-two { width: 64%; opacity: .82; }
.dashboard-bars .bar-three { width: 74%; opacity: .68; }
.dashboard-tech-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.dashboard-tech-list span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    border-radius: 10px;
    background: #f4f9ff;
    border: 1px solid #d9e9ff;
    color: var(--ink);
    font-weight: 850;
    font-size: .88rem;
}
.dashboard-tech-list svg {
    width: 19px;
    height: 19px;
    color: var(--brand);
}
.dashboard-stat {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 68px;
    border-radius: 16px;
    padding: 14px 16px;
    color: var(--ink);
    z-index: 3;
}
.dashboard-stat svg {
    width: 31px;
    height: 31px;
    color: var(--brand);
}
.dashboard-stat strong,
.dashboard-stat em {
    display: block;
    line-height: 1.15;
}
.dashboard-stat strong { font-size: 1.08rem; }
.dashboard-stat em { font-size: .82rem; font-style: normal; color: var(--muted); margin-top: 3px; }
.stat-one { right: 26px; top: 70px; }
.stat-two { right: 44px; bottom: 90px; }
.stat-three { left: 62px; bottom: 36px; }
@media (max-width: 1120px) {
    .hero-dashboard { min-height: 330px; }
    .dashboard-panel { width: min(430px, calc(100% - 10px)); }
}
@media (max-width: 680px) {
    .hero-dashboard { display: none; }
}


/* Revision 6: kompaktere Portal-Startseite und stärkere Desktop-Balance */
.site-header {
    box-shadow: 0 4px 20px rgba(7,27,58,.055);
}
.header-inner {
    min-height: 68px;
}
.brand {
    min-width: 310px;
}
.brand-mark {
    width: 42px;
    height: 42px;
    border-radius: 10px;
}
.brand-text strong {
    font-size: 1.08rem;
}
.brand-text small {
    font-size: .84rem;
}
.main-nav {
    gap: 24px;
}
.main-nav a {
    font-size: .94rem;
}
.header-cta {
    min-height: 42px;
    padding-inline: 1.18rem;
}
.home-hero {
    padding: 56px 0 24px;
    background:
        radial-gradient(circle at 83% 17%, rgba(7,91,216,.09), transparent 25%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 43%, #f1f8ff 100%);
}
.home-hero::before {
    right: -80px;
    width: 48vw;
    opacity: .55;
}
.hero-bg-shape {
    top: 86px;
    width: 390px;
    height: 390px;
}
.home-hero-grid {
    grid-template-columns: minmax(0, .95fr) minmax(420px, .82fr);
    gap: clamp(56px, 7vw, 92px);
}
.home-hero-copy {
    max-width: 590px;
}
.home-hero-copy h1 {
    max-width: 560px;
    font-size: clamp(3.05rem, 4.8vw, 4.18rem);
    line-height: 1.02;
    letter-spacing: -.052em;
    margin-bottom: 1rem;
}
.home-hero-copy .eyebrow {
    margin-bottom: .92rem;
}
.hero-description {
    max-width: 540px;
    font-size: clamp(1.04rem, 1.22vw, 1.18rem);
    line-height: 1.62;
    margin-bottom: 1.2rem;
}
.hero-checks {
    gap: 10px;
    margin-bottom: 1.45rem;
    font-size: .98rem;
}
.hero-checks svg {
    width: 21px;
    height: 21px;
}
.hero-actions-left {
    gap: 13px;
}
.button {
    min-height: 46px;
    padding: .78rem 1.22rem;
}
.home-hero-visual.hero-dashboard {
    min-height: 410px;
    padding: 42px 34px;
    border-radius: 30px;
    box-shadow: 0 22px 52px rgba(7,27,58,.115);
}
.dashboard-panel {
    width: min(424px, calc(100% - 4px));
    min-height: 268px;
    padding: 30px 32px;
    transform: translateX(-6px);
}
.dashboard-panel strong {
    max-width: 340px;
    font-size: 1.54rem;
}
.dashboard-panel p {
    max-width: 330px;
}
.dashboard-bars {
    margin: 22px 0 24px;
}
.dashboard-bars span {
    height: 9px;
}
.dashboard-stat {
    min-height: 70px;
    border-radius: 17px;
}
.stat-one {
    right: 18px;
    top: 58px;
}
.stat-two {
    right: 26px;
    bottom: 88px;
}
.stat-three {
    left: 38px;
    bottom: 32px;
}
.proofbar {
    margin-top: 34px;
    border-radius: 15px;
}
.proofbar div {
    padding: 21px 28px;
}
.proofbar svg {
    width: 34px;
    height: 34px;
}
.section-steps {
    padding-top: 48px;
    padding-bottom: 50px;
}
.section-steps .center-heading {
    margin-bottom: 30px;
}
.step-flow {
    grid-template-columns: 1fr 64px 1fr 64px 1fr;
    align-items: stretch;
}
.flow-step {
    min-height: 188px;
    padding: 24px 22px 22px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 28px rgba(7,27,58,.055);
}
.step-number {
    width: 32px;
    height: 32px;
    margin-bottom: 14px;
}
.step-icon {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
}
.step-icon svg {
    width: 30px;
    height: 30px;
}
.flow-step p {
    max-width: 275px;
    font-size: .94rem;
}
.flow-arrow {
    margin-top: 84px;
    font-size: 2rem;
}
.advantage-section {
    padding-top: 56px;
    padding-bottom: 58px;
}
.advantage-section .center-heading {
    margin-bottom: 28px;
}
.advantage-grid {
    gap: 18px;
}
.advantage-card {
    padding: 25px 24px 23px;
    border-color: #cfddeb;
    box-shadow: 0 12px 30px rgba(7,27,58,.06);
}
.advantage-icon {
    width: 46px;
    height: 46px;
    margin-bottom: 16px;
}
.advantage-card p:last-child {
    line-height: 1.56;
}
.comparison-section {
    padding: 64px 0 70px;
}
.comparison-intro {
    margin-bottom: 24px;
}
.comparison-panel {
    border-radius: 18px;
    box-shadow: 0 20px 48px rgba(7,27,58,.09);
}
.topics-section {
    padding-top: 58px;
}
.topic-grid a {
    min-height: 64px;
    border-radius: 12px;
}
.site-footer {
    padding-top: 44px;
}
.footer-trust-badge {
    background: linear-gradient(135deg, rgba(255,255,255,.105), rgba(255,255,255,.045));
}
@media (min-width: 1180px) {
    .comparison-wrap {
        width: min(920px, calc(100% - 52px));
    }
}
@media (max-width: 1120px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .home-hero-copy {
        max-width: 760px;
    }
    .home-hero-copy h1 {
        max-width: 720px;
    }
    .home-hero-visual.hero-dashboard {
        min-height: 340px;
    }
    .dashboard-panel {
        transform: none;
    }
    .step-flow {
        grid-template-columns: 1fr;
    }
    .flow-step {
        min-height: auto;
        max-width: 620px;
        margin-inline: auto;
        width: 100%;
    }
}
@media (max-width: 680px) {
    .home-hero {
        padding-top: 38px;
    }
    .home-hero-copy h1 {
        font-size: clamp(2.45rem, 11vw, 3.1rem);
    }
    .hero-description {
        font-size: 1rem;
    }
    .hero-checks {
        font-size: .94rem;
    }
    .section-steps,
    .advantage-section,
    .comparison-section,
    .topics-section {
        padding-top: 48px;
        padding-bottom: 48px;
    }
    .flow-step {
        padding: 22px 18px;
    }
}

/* Revision 7: Feinschliff nach Live-Screenshot vom 17.05.2026 */
:root {
    --shadow-premium: 0 24px 60px rgba(7,27,58,.12);
}
.site-header {
    border-bottom-color: #cfddeb;
}
.header-inner {
    min-height: 72px;
}
.header-cta {
    border-radius: 9px;
    box-shadow: 0 12px 26px rgba(7,91,216,.25);
}
.home-hero {
    padding: 50px 0 22px;
    background:
        radial-gradient(circle at 81% 15%, rgba(7,91,216,.11), transparent 23%),
        linear-gradient(180deg, #f9fcff 0%, #ffffff 40%, #f0f7ff 100%);
}
.home-hero-grid {
    grid-template-columns: minmax(0, .9fr) minmax(438px, .82fr);
    gap: clamp(70px, 9vw, 118px);
}
.home-hero-copy h1 {
    font-size: clamp(2.92rem, 4.35vw, 3.88rem);
    max-width: 520px;
    margin-bottom: .85rem;
}
.hero-description {
    max-width: 555px;
    margin-bottom: 1.08rem;
}
.hero-checks {
    grid-template-columns: repeat(2, minmax(210px, 1fr));
    gap: 10px 20px;
    max-width: 600px;
    font-weight: 780;
}
.hero-actions-left {
    margin-top: .3rem;
}
.home-hero-visual.hero-dashboard {
    min-height: 378px;
    padding: 34px 30px;
    transform: translateY(2px);
}
.dashboard-panel {
    min-height: 238px;
    padding: 27px 29px;
    transform: translateX(-2px);
}
.dashboard-panel strong {
    font-size: 1.42rem;
}
.dashboard-panel p {
    margin-bottom: 15px;
}
.dashboard-bars {
    margin: 17px 0 18px;
}
.stat-one {
    right: 16px;
    top: 52px;
}
.stat-two {
    right: 22px;
    bottom: 72px;
}
.stat-three {
    left: 34px;
    bottom: 28px;
}
.proofbar {
    margin-top: 28px;
    box-shadow: 0 14px 34px rgba(7,27,58,.075);
}
.proofbar div {
    padding: 18px 25px;
}
.proofbar strong {
    font-size: 1.05rem;
}
.proofbar em {
    font-size: .88rem;
}
.section-steps {
    padding-top: 42px;
    padding-bottom: 44px;
}
.section-steps .center-heading {
    margin-bottom: 24px;
}
.step-flow {
    grid-template-columns: 1fr 54px 1fr 54px 1fr;
}
.flow-step {
    min-height: 170px;
    padding: 21px 22px 20px;
    border-color: #cfddeb;
}
.step-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 12px;
}
.step-icon svg {
    width: 28px;
    height: 28px;
}
.flow-step p {
    font-size: .91rem;
    line-height: 1.5;
}
.flow-arrow {
    margin-top: 76px;
    color: #0b68ea;
    opacity: .58;
}
.advantage-section {
    padding-top: 50px;
    padding-bottom: 52px;
    background:
        radial-gradient(circle at 50% 0%, rgba(7,91,216,.08), transparent 28%),
        linear-gradient(180deg, #eef7ff 0%, #f8fcff 100%);
}
.advantage-card {
    min-height: 186px;
    position: relative;
    overflow: hidden;
}
.advantage-card::before {
    content: "";
    position: absolute;
    left: 24px;
    right: 24px;
    top: 0;
    height: 3px;
    border-radius: 0 0 99px 99px;
    background: linear-gradient(90deg, #0b68ea, rgba(11,104,234,.08));
}
.advantage-card h3 {
    margin-bottom: .62rem;
}
.comparison-section {
    padding-top: 58px;
    padding-bottom: 64px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
}
.comparison-intro .eyebrow {
    margin-bottom: .7rem;
}
.comparison-intro h2 {
    font-size: clamp(1.86rem, 3vw, 2.34rem);
    max-width: 680px;
    margin-left: auto;
    margin-right: auto;
}
.comparison-panel {
    border-color: #bfd4eb;
    box-shadow: var(--shadow-premium);
}
.comparison-frame {
    border-color: #d7e5f4;
}
.topics-section {
    padding-top: 54px;
    padding-bottom: 58px;
}
.topic-grid {
    gap: 14px 18px;
}
.topic-grid a {
    min-height: 62px;
    box-shadow: 0 9px 22px rgba(7,27,58,.055);
}
.site-footer {
    padding-top: 42px;
}
.footer-grid-trust {
    gap: 34px;
}
.footer-trust-badge {
    min-height: 104px;
    border-color: rgba(146,226,119,.18);
}
@media (min-width: 1180px) {
    .container { width: min(1240px, calc(100% - 64px)); }
}
@media (max-width: 1120px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .hero-checks {
        grid-template-columns: 1fr;
    }
    .home-hero-visual.hero-dashboard {
        max-width: 680px;
    }
    .step-flow {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 680px) {
    .header-inner { min-height: 66px; }
    .home-hero-copy h1 {
        font-size: clamp(2.32rem, 10.4vw, 2.95rem);
        letter-spacing: -.046em;
    }
    .home-hero { padding-top: 34px; }
    .proofbar { margin-top: 24px; }
    .flow-step,
    .advantage-card { min-height: auto; }
}


/* Revision 9: compact portal polish after live screenshot */
.home-hero {
    padding: 42px 0 18px;
    background:
        radial-gradient(circle at 78% 17%, rgba(7,91,216,.10), transparent 22%),
        linear-gradient(180deg, #f8fcff 0%, #ffffff 42%, #eff7ff 100%);
}
.home-hero::before {
    opacity: .52;
    width: 44vw;
}
.home-hero-grid {
    grid-template-columns: minmax(0, 1.02fr) minmax(410px, .78fr);
    gap: clamp(48px, 6vw, 84px);
}
.home-hero-copy {
    max-width: 700px;
}
.home-hero-copy h1 {
    font-size: clamp(2.82rem, 3.85vw, 3.62rem);
    max-width: 720px;
    margin-bottom: .78rem;
    line-height: 1.04;
    text-wrap: balance;
}
.hero-description {
    max-width: 610px;
    font-size: clamp(1.02rem, 1.28vw, 1.15rem);
    margin-bottom: 1rem;
}
.hero-checks {
    grid-template-columns: repeat(2, minmax(215px, 1fr));
    max-width: 640px;
    gap: 9px 22px;
    font-size: .96rem;
    margin-bottom: 1.35rem;
}
.hero-checks svg {
    width: 20px;
    height: 20px;
    padding: 3px;
}
.button {
    min-height: 46px;
    padding: .78rem 1.24rem;
}
.home-hero-visual.hero-dashboard {
    min-height: 336px;
    max-width: 520px;
    justify-self: end;
    padding: 28px;
    border-radius: 24px;
    box-shadow: 0 20px 48px rgba(7,27,58,.105);
}
.dashboard-panel {
    min-height: 214px;
    max-width: 360px;
    padding: 24px 25px;
    border-radius: 17px;
}
.dashboard-panel strong {
    font-size: 1.34rem;
    line-height: 1.12;
}
.dashboard-panel p {
    font-size: .94rem;
}
.dashboard-bars {
    margin: 15px 0 16px;
}
.dashboard-tech-list span {
    min-height: 34px;
}
.stat-one {
    right: 14px;
    top: 48px;
}
.stat-two {
    right: 18px;
    bottom: 62px;
}
.stat-three {
    left: 28px;
    bottom: 24px;
}
.proofbar {
    margin-top: 24px;
    border-radius: 12px;
}
.proofbar div {
    padding: 16px 22px;
}
.section-steps {
    padding-top: 38px;
    padding-bottom: 38px;
}
.section-steps .center-heading h2,
.advantage-section .center-heading h2,
.topics-section .center-heading h2 {
    font-size: clamp(1.88rem, 2.6vw, 2.38rem);
}
.flow-step {
    min-height: 158px;
    padding: 20px 20px 18px;
    box-shadow: 0 12px 30px rgba(7,27,58,.055);
}
.step-icon {
    width: 46px;
    height: 46px;
}
.step-icon svg {
    width: 25px;
    height: 25px;
}
.advantage-section {
    padding-top: 44px;
    padding-bottom: 46px;
}
.advantage-grid {
    gap: 18px;
}
.advantage-card {
    min-height: 168px;
    padding: 26px 24px 22px;
    box-shadow: 0 14px 32px rgba(7,27,58,.06);
}
.advantage-card .ui-icon {
    width: 30px;
    height: 30px;
}
.advantage-card p {
    font-size: .92rem;
    line-height: 1.5;
}
.comparison-section {
    padding-top: 50px;
    padding-bottom: 54px;
}
.comparison-intro {
    margin-bottom: 24px;
}
.comparison-panel {
    width: min(760px, 100%);
    border-radius: 15px;
    padding: 10px;
}
.comparison-frame {
    padding: 16px 16px 6px;
}
.comparison-note {
    margin-top: 11px;
}
.topics-section {
    padding-top: 48px;
    padding-bottom: 52px;
}
.topic-grid a {
    min-height: 58px;
    border-color: #cbdcef;
}
.site-footer {
    padding-top: 38px;
}
.footer-trust-badge {
    min-height: 96px;
}
@media (max-width: 1120px) {
    .home-hero-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }
    .home-hero-visual.hero-dashboard {
        justify-self: start;
        max-width: 620px;
    }
    .hero-checks {
        grid-template-columns: 1fr;
        max-width: 540px;
    }
}
@media (max-width: 680px) {
    .home-hero {
        padding-top: 28px;
    }
    .home-hero-copy h1 {
        font-size: clamp(2.18rem, 9.6vw, 2.76rem);
    }
    .home-hero-visual.hero-dashboard {
        min-height: 306px;
        padding: 20px;
    }
    .dashboard-panel {
        min-height: 196px;
        padding: 20px;
    }
    .proofbar div {
        padding: 14px 18px;
    }
    .comparison-panel {
        padding: 7px;
    }
    .comparison-frame {
        padding: 10px 10px 4px;
    }
}

/* Revision 10: Vergleichsrechner mittig fassen und leere Flaeche reduzieren */
@media (min-width: 981px) {
    .comparison-wrap {
        width: min(760px, calc(100% - 64px));
    }
    .comparison-panel {
        max-width: 760px;
        margin-left: auto;
        margin-right: auto;
        padding: 8px;
    }
    .comparison-frame {
        padding: 8px;
    }
    .comparison-frame #c24pp-dsl-iframe {
        width: 100%;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
        display: grid;
        justify-items: center;
        align-items: start;
    }
    .comparison-frame #c24pp-dsl-iframe > * {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .comparison-frame iframe {
        max-width: 700px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (max-width: 980px) {
    .comparison-wrap {
        width: min(100% - 36px, 760px);
    }
    .comparison-frame #c24pp-dsl-iframe {
        max-width: 100%;
        display: grid;
        justify-items: center;
    }
    .comparison-frame #c24pp-dsl-iframe > *,
    .comparison-frame iframe {
        max-width: 100% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (max-width: 680px) {
    .comparison-wrap {
        width: min(100% - 24px, 760px);
    }
    .comparison-panel {
        padding: 5px;
    }
    .comparison-frame {
        padding: 4px;
    }
}

/* Revision 11: Vergleichsrechner auf Desktop mindestens 900px breit anzeigen */
@media (min-width: 1100px) {
    .comparison-wrap {
        width: min(1020px, calc(100% - 64px));
    }
    .comparison-panel {
        width: 100%;
        max-width: 1020px;
        margin-left: auto;
        margin-right: auto;
        padding: 10px;
    }
    .comparison-frame {
        padding: 10px;
    }
    .comparison-frame #c24pp-dsl-iframe {
        width: 900px;
        max-width: 100%;
        min-width: 900px;
        margin-left: auto;
        margin-right: auto;
    }
    .comparison-frame #c24pp-dsl-iframe > * {
        width: 900px !important;
        max-width: 100% !important;
        min-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    .comparison-frame iframe {
        width: 900px !important;
        max-width: 100% !important;
        min-width: 900px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}
@media (min-width: 981px) and (max-width: 1099px) {
    .comparison-wrap {
        width: min(940px, calc(100% - 36px));
    }
    .comparison-panel {
        width: 100%;
        max-width: 940px;
    }
    .comparison-frame #c24pp-dsl-iframe,
    .comparison-frame #c24pp-dsl-iframe > *,
    .comparison-frame iframe {
        width: 100% !important;
        max-width: 900px !important;
        min-width: 0 !important;
    }
}

/* Revision 12: finaler Abstand- und Rechnerbereich-Feinschliff */
.advantage-section {
    padding-bottom: 36px;
}
.comparison-section {
    padding-top: 38px;
    padding-bottom: 46px;
}
.comparison-intro {
    max-width: 700px;
    margin-bottom: 18px;
}
.comparison-intro .eyebrow {
    margin-bottom: .42rem;
}
.comparison-intro h2 {
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: .58rem;
    font-size: clamp(1.82rem, 2.45vw, 2.24rem);
    line-height: 1.08;
}
.comparison-intro p:last-child {
    max-width: 610px;
    font-size: .94rem;
    line-height: 1.46;
}
.comparison-panel {
    border-color: #cbddef;
    box-shadow: 0 16px 34px rgba(7, 27, 58, .075);
}
.comparison-frame {
    background: #fff;
}
.comparison-note {
    margin-top: 8px;
    font-size: .84rem;
}
@media (min-width: 1100px) {
    .comparison-wrap {
        width: min(960px, calc(100% - 64px));
    }
    .comparison-panel {
        max-width: 960px;
        padding: 8px;
    }
    .comparison-frame {
        padding: 8px;
    }
    .comparison-frame #c24pp-dsl-iframe,
    .comparison-frame #c24pp-dsl-iframe > *,
    .comparison-frame iframe {
        width: 900px !important;
        max-width: 100% !important;
        min-width: 900px !important;
    }
}
@media (min-width: 981px) and (max-width: 1099px) {
    .comparison-section {
        padding-top: 34px;
    }
}
@media (max-width: 680px) {
    .advantage-section {
        padding-bottom: 34px;
    }
    .comparison-section {
        padding-top: 34px;
        padding-bottom: 42px;
    }
    .comparison-intro {
        margin-bottom: 16px;
    }
    .comparison-intro h2 {
        font-size: clamp(1.72rem, 8vw, 2.08rem);
    }
}

/* Revision 13: Hero-Dashboard korrigiert - keine abgeschnittenen Texte und keine zu weit auslaufenden Badges */
@media (min-width: 1121px) {
    .home-hero-visual.hero-dashboard {
        max-width: 520px;
        min-height: 338px;
        padding: 28px 30px;
        overflow: hidden;
    }
    .dashboard-panel {
        width: 352px;
        max-width: 352px;
        min-height: 222px;
        padding: 24px 24px 22px;
        transform: none;
        overflow: visible;
    }
    .dashboard-panel strong {
        max-width: 255px;
        font-size: 1.24rem;
        line-height: 1.14;
        letter-spacing: -.03em;
        margin-bottom: 8px;
        white-space: normal;
    }
    .dashboard-panel p {
        max-width: 255px;
        font-size: .9rem;
        line-height: 1.45;
        margin-bottom: 12px;
    }
    .dashboard-bars {
        max-width: 284px;
        margin: 13px 0 13px;
        gap: 7px;
    }
    .dashboard-bars span {
        height: 7px;
    }
    .dashboard-tech-list {
        width: 292px;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .dashboard-tech-list span {
        min-height: 31px;
        gap: 5px;
        border-radius: 9px;
        font-size: .74rem;
        padding-inline: 6px;
    }
    .dashboard-tech-list svg {
        width: 16px;
        height: 16px;
    }
    .dashboard-stat {
        min-height: 56px;
        padding: 10px 12px;
        gap: 9px;
        border-radius: 15px;
    }
    .dashboard-stat svg {
        width: 25px;
        height: 25px;
        flex: 0 0 auto;
    }
    .dashboard-stat strong {
        font-size: 1rem;
        line-height: 1.08;
    }
    .dashboard-stat em {
        font-size: .74rem;
        margin-top: 2px;
    }
    .stat-one {
        right: 22px;
        top: 50px;
        width: 132px;
    }
    .stat-two {
        right: 24px;
        bottom: 72px;
        width: 142px;
    }
    .stat-three {
        left: 34px;
        bottom: 26px;
        width: 188px;
    }
}
@media (min-width: 681px) and (max-width: 1120px) {
    .home-hero-visual.hero-dashboard {
        max-width: 560px;
        min-height: 330px;
        padding: 26px;
        overflow: hidden;
    }
    .dashboard-panel {
        width: 350px;
        max-width: 350px;
        min-height: 218px;
        padding: 24px;
        transform: none;
    }
    .dashboard-panel strong,
    .dashboard-panel p {
        max-width: 250px;
    }
    .dashboard-panel strong {
        font-size: 1.2rem;
    }
    .dashboard-stat {
        min-height: 54px;
        padding: 10px 12px;
        gap: 8px;
        border-radius: 15px;
    }
    .dashboard-stat svg {
        width: 24px;
        height: 24px;
    }
    .dashboard-stat strong { font-size: .98rem; }
    .dashboard-stat em { font-size: .72rem; }
    .stat-one { right: 20px; top: 46px; width: 130px; }
    .stat-two { right: 22px; bottom: 70px; width: 138px; }
    .stat-three { left: 32px; bottom: 24px; width: 184px; }
}


/* Revision 14: Hero-Grafik ohne ueberlappende Badges; Cache-Buster in head.php */
.home-hero-visual.hero-dashboard-clean {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.home-hero-visual.hero-dashboard-clean::after {
    content: "";
    position: absolute;
    right: 82px;
    bottom: 0;
    width: 24px;
    height: 86px;
    border-radius: 18px 18px 0 0;
    background: linear-gradient(180deg, rgba(27, 150, 123, .16), rgba(27, 150, 123, .04));
    z-index: 0;
}
.dashboard-panel-clean {
    position: relative;
    z-index: 1;
    width: min(430px, calc(100% - 40px)) !important;
    max-width: 430px !important;
    min-height: 0 !important;
    padding: 28px 30px 24px !important;
    border-radius: 20px !important;
    overflow: hidden !important;
}
.dashboard-panel-clean strong,
.dashboard-panel-clean p {
    max-width: none !important;
}
.dashboard-panel-clean > strong {
    display: block;
    font-size: clamp(1.18rem, 1.45vw, 1.42rem) !important;
    line-height: 1.16 !important;
    margin-bottom: 9px !important;
    letter-spacing: -.035em;
    white-space: normal !important;
}
.dashboard-panel-clean > p {
    font-size: .95rem !important;
    line-height: 1.46 !important;
    margin-bottom: 14px !important;
}
.dashboard-panel-clean .dashboard-bars {
    width: 100%;
    max-width: none;
    margin: 14px 0 14px;
}
.dashboard-panel-clean .dashboard-bars span {
    height: 8px;
}
.dashboard-panel-clean .dashboard-tech-list {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}
.dashboard-panel-clean .dashboard-tech-list span {
    min-width: 0;
    min-height: 34px;
    padding: 7px 8px;
    font-size: .78rem;
}
.dashboard-metrics {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    margin-top: 2px;
}
.dashboard-metrics span {
    display: grid;
    align-content: center;
    gap: 4px;
    min-height: 82px;
    padding: 12px 10px;
    border: 1px solid #cfe0f4;
    border-radius: 14px;
    background: linear-gradient(180deg, #fff, #f7fbff);
    box-shadow: 0 8px 20px rgba(7, 27, 58, .055);
    color: var(--ink);
}
.dashboard-metrics svg {
    width: 24px;
    height: 24px;
    color: var(--brand);
    stroke-width: 2.15;
}
.dashboard-metrics strong {
    display: block;
    font-size: 1.02rem !important;
    line-height: 1.04 !important;
    margin: 0 !important;
    letter-spacing: -.025em;
}
.dashboard-metrics em {
    display: block;
    color: var(--muted);
    font-style: normal;
    font-size: .74rem;
    line-height: 1.2;
}
.hero-dashboard-clean .dashboard-stat,
.hero-dashboard-clean .stat-one,
.hero-dashboard-clean .stat-two,
.hero-dashboard-clean .stat-three {
    display: none !important;
}
@media (min-width: 1121px) {
    .home-hero-visual.hero-dashboard-clean {
        max-width: 520px;
        min-height: 338px;
        padding: 28px;
    }
    .dashboard-panel-clean {
        margin: 0 auto;
    }
}
@media (min-width: 681px) and (max-width: 1120px) {
    .home-hero-visual.hero-dashboard-clean {
        max-width: 560px;
        min-height: 330px;
        padding: 24px;
    }
    .dashboard-panel-clean {
        width: min(430px, 100%) !important;
        max-width: 430px !important;
    }
}
@media (max-width: 680px) {
    .home-hero-visual.hero-dashboard-clean {
        display: none;
    }
}

/* Revision 16: mobile/tablet header overflow fix after responsive audit */
@media (max-width: 1120px) {
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
    }
    .main-nav {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 78px;
        padding: 16px;
        border: 1px solid var(--line);
        background: #fff;
        border-radius: 16px;
        box-shadow: var(--shadow);
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
        margin-left: 0;
        width: auto;
    }
    .main-nav.is-open {
        display: flex;
    }
    .main-nav a {
        padding: 9px 10px;
        border-bottom: 0;
        border-radius: 8px;
    }
    .main-nav a:hover,
    .main-nav a.is-active {
        background: var(--brand-soft);
    }
    .header-cta {
        display: none;
    }
}
@media (max-width: 480px) {
    .header-inner {
        gap: 10px;
    }
    .brand {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
        gap: 9px;
    }
    .brand-text {
        min-width: 0;
        overflow: hidden;
    }
    .brand-text strong {
        display: block;
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: .86rem;
    }
    .nav-toggle {
        width: 44px;
        height: 42px;
        padding: 0;
        flex: 0 0 auto;
        font-size: 0;
        line-height: 1;
    }
    .nav-toggle::before {
        content: "Menü";
        font-size: .74rem;
        font-weight: 850;
        letter-spacing: -.02em;
    }
}


/* Revision 17: professionelleres Marken-Signet und korrekte mobile Menü-Beschriftung */
.brand-mark {
    position: relative;
    flex: 0 0 auto;
    background: none;
    box-shadow: 0 10px 23px rgba(7,91,216,.22);
    overflow: visible;
}
.brand-logo-svg {
    width: 100%;
    height: 100%;
    display: block;
}
.brand-logo-bg {
    fill: #075bd8;
}
.brand-logo-b {
    fill: #fff;
}
.brand-logo-line {
    stroke: rgba(255,255,255,.72);
    stroke-width: 2.4;
    stroke-linecap: round;
}
@supports (background: linear-gradient(135deg, #0b72f0, #0147ba)) {
    .brand-logo-bg { fill: #075bd8; }
}
@media (max-width: 480px) {
    .nav-toggle::before {
        content: "Menü";
    }
}
@media (max-width: 390px) {
    .brand-text strong {
        font-size: .82rem;
    }
}


/* Revision 18: echtes Logo-Paket eingebunden, professioneller Header-Look und PNG-Favicons */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.brand.brand-has-image {
    min-width: 0;
    flex: 0 1 510px;
    gap: 0;
}
.brand-logo-full {
    display: block;
    width: min(100%, 470px);
    height: auto;
}
.brand-mobile-lockup {
    display: none;
    align-items: center;
    gap: 12px;
    min-width: 0;
}
.brand-logo-icon {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(7, 27, 58, .12);
}
.brand-mobile-text {
    display: grid;
    min-width: 0;
    line-height: 1.06;
}
.brand-mobile-text strong {
    font-weight: 900;
    letter-spacing: -.03em;
    font-size: 1.1rem;
    color: var(--ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-mobile-text small {
    margin-top: 5px;
    color: var(--muted);
    font-size: .84rem;
}
.nav-toggle::before {
    content: none !important;
}
@media (max-width: 1120px) {
    .brand.brand-has-image {
        flex: 1 1 auto;
        max-width: 440px;
    }
    .brand-logo-full {
        width: min(100%, 420px);
    }
}
@media (max-width: 680px) {
    .brand.brand-has-image {
        max-width: calc(100% - 88px);
    }
    .brand-logo-full {
        display: none;
    }
    .brand-mobile-lockup {
        display: inline-flex;
    }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 74px;
        height: 44px;
        padding: 0 .88rem;
        font-size: .86rem;
        font-weight: 850;
        line-height: 1;
        flex: 0 0 auto;
    }
}
@media (max-width: 480px) {
    .header-inner {
        gap: 10px;
    }
    .brand.brand-has-image {
        max-width: calc(100% - 94px);
    }
    .brand-logo-icon {
        width: 46px;
        height: 46px;
        border-radius: 12px;
    }
    .brand-mobile-lockup {
        gap: 10px;
    }
    .brand-mobile-text strong {
        font-size: .96rem;
    }
    .brand-mobile-text small {
        font-size: .72rem;
    }
    .nav-toggle {
        width: auto;
        min-width: 70px;
        height: 42px;
        padding: 0 .78rem;
        font-size: .82rem;
    }
}
@media (max-width: 390px) {
    .brand.brand-has-image {
        max-width: calc(100% - 90px);
    }
    .brand-logo-icon {
        width: 42px;
        height: 42px;
    }
    .brand-mobile-text strong {
        font-size: .88rem;
    }
    .brand-mobile-text small {
        font-size: .68rem;
    }
    .nav-toggle {
        min-width: 64px;
        padding: 0 .68rem;
        font-size: .78rem;
    }
}

/* Revision 19: kompaktes Profi-Logo mit Preisschild/WLAN/Check-Signet, HTML-Wortmarke und sauberem Favicon */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}
.brand.brand-new-logo {
    min-width: 0;
    flex: 0 0 auto;
    width: auto;
    max-width: 420px;
    display: inline-flex;
    align-items: center;
    gap: 11px;
    color: var(--ink);
}
.brand-signet {
    width: 50px;
    height: 50px;
    object-fit: contain;
    flex: 0 0 auto;
    filter: drop-shadow(0 8px 16px rgba(7, 27, 58, .12));
}
.brand-wordmark {
    display: grid;
    min-width: 0;
    line-height: 1.04;
}
.brand-wordmark strong {
    display: block;
    max-width: 100%;
    color: var(--ink);
    font-weight: 930;
    font-size: clamp(1rem, 1.42vw, 1.18rem);
    letter-spacing: -.035em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.brand-domain {
    color: #ff7a00;
}
.brand-wordmark small {
    margin-top: 5px;
    color: var(--muted);
    font-size: .78rem;
    letter-spacing: .01em;
}
.main-nav {
    gap: 18px;
}
.header-cta {
    white-space: nowrap;
    min-width: 142px;
    padding-inline: 1rem;
}
.nav-toggle::before {
    content: none !important;
}
@media (min-width: 1121px) {
    .header-inner {
        gap: 20px;
    }
    .brand.brand-new-logo {
        max-width: 395px;
    }
    .main-nav a {
        font-size: .88rem;
    }
}
@media (max-width: 1120px) {
    .brand.brand-new-logo {
        flex: 1 1 auto;
        max-width: calc(100% - 94px);
    }
    .brand-wordmark strong {
        font-size: 1.08rem;
    }
    .nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 74px;
        height: 44px;
        padding: 0 .88rem;
        font-size: .86rem;
        font-weight: 850;
        line-height: 1;
        flex: 0 0 auto;
    }
}
@media (max-width: 680px) {
    .brand-signet {
        width: 46px;
        height: 46px;
    }
    .brand-wordmark strong {
        font-size: .98rem;
    }
    .brand-wordmark small {
        font-size: .72rem;
    }
}
@media (max-width: 480px) {
    .header-inner {
        gap: 9px;
    }
    .brand.brand-new-logo {
        max-width: calc(100% - 86px);
        gap: 8px;
    }
    .brand-signet {
        width: 42px;
        height: 42px;
    }
    .brand-wordmark strong {
        font-size: .88rem;
    }
    .brand-wordmark small {
        display: block;
        font-size: .66rem;
        margin-top: 3px;
    }
    .nav-toggle {
        min-width: 64px;
        width: auto;
        height: 40px;
        padding: 0 .62rem;
        font-size: .78rem;
    }
}
@media (max-width: 360px) {
    .brand-wordmark small {
        display: none;
    }
    .brand-wordmark strong {
        font-size: .82rem;
    }
}


/* Revision 20: Logo sichtbar groesser, Signet enger gecroppt, Header trotzdem einzeilig */
.brand.brand-new-logo {
    max-width: 455px;
    gap: 13px;
}
.brand-signet {
    width: 58px;
    height: 58px;
    filter: drop-shadow(0 9px 18px rgba(7, 27, 58, .14));
}
.brand-wordmark strong {
    font-size: clamp(1.14rem, 1.62vw, 1.34rem);
}
.brand-wordmark small {
    font-size: .82rem;
    margin-top: 4px;
}
@media (min-width: 1121px) {
    .header-inner {
        min-height: 76px;
        gap: 18px;
    }
    .brand.brand-new-logo {
        max-width: 440px;
    }
    .main-nav {
        gap: 16px;
    }
    .main-nav a {
        font-size: .87rem;
    }
    .header-cta {
        min-width: 148px;
        padding-inline: .98rem;
    }
}
@media (max-width: 1120px) {
    .brand-signet {
        width: 54px;
        height: 54px;
    }
    .brand-wordmark strong {
        font-size: 1.12rem;
    }
}
@media (max-width: 680px) {
    .brand-signet {
        width: 50px;
        height: 50px;
    }
    .brand-wordmark strong {
        font-size: 1rem;
    }
}
@media (max-width: 480px) {
    .brand.brand-new-logo {
        gap: 9px;
    }
    .brand-signet {
        width: 45px;
        height: 45px;
    }
    .brand-wordmark strong {
        font-size: .9rem;
    }
}
@media (max-width: 390px) {
    .brand-signet {
        width: 42px;
        height: 42px;
    }
    .brand-wordmark strong {
        font-size: .84rem;
    }
}

/* Revision 21: Unterseiten auf Portal-Niveau, Startseite unveraendert */
.subpage-hero {
    position: relative;
    overflow: hidden;
    padding: 58px 0 48px;
    background:
        radial-gradient(circle at 82% 18%, rgba(7,91,216,.10), transparent 26%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 50%, #f1f7ff 100%);
    border-bottom: 1px solid var(--line);
}
.subpage-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, .96fr) minmax(330px, .62fr);
    gap: clamp(34px, 6vw, 72px);
    align-items: center;
}
.subpage-hero-copy {
    max-width: 760px;
}
.subpage-hero h1 {
    max-width: 760px;
    font-size: clamp(2.42rem, 4.6vw, 4rem);
    margin-bottom: .95rem;
}
.subpage-hero .intro-text {
    max-width: 690px;
    font-size: 1.1rem;
    line-height: 1.68;
}
.subpage-checks {
    grid-template-columns: repeat(2, minmax(230px, 1fr));
    max-width: 720px;
    margin-top: 1.24rem;
}
.subpage-hero-panel {
    position: relative;
    isolation: isolate;
    padding: 28px;
    border: 1px solid #c6d9ef;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 22px 52px rgba(7,27,58,.105);
}
.subpage-hero-panel::before {
    content: "";
    position: absolute;
    inset: 14px;
    z-index: -1;
    border-radius: 19px;
    background: linear-gradient(135deg, rgba(234,243,255,.95), rgba(255,255,255,.35));
}
.subpage-hero-panel strong {
    display: block;
    max-width: 360px;
    margin: 6px 0 10px;
    font-size: 1.46rem;
    line-height: 1.13;
    letter-spacing: -.035em;
    color: var(--ink);
}
.subpage-hero-panel p {
    max-width: 390px;
    color: var(--ink-soft);
}
.subpage-hero-items {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    margin: 22px 0 20px;
}
.subpage-hero-items span {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 10px 12px;
    border: 1px solid #d6e5f4;
    border-radius: 13px;
    background: #fff;
    color: var(--brand);
    font-weight: 850;
    box-shadow: 0 9px 20px rgba(7,27,58,.045);
}
.subpage-hero-items svg {
    width: 22px;
    height: 22px;
}
.subpage-hero-items em {
    font-style: normal;
    color: var(--ink);
    font-size: .94rem;
}
.subpage-hero-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 15px 16px;
    border-radius: 15px;
    background: #f7fbff;
    border: 1px solid #dce9f6;
    color: var(--ink-soft);
    font-size: .94rem;
    line-height: 1.48;
}
.subpage-hero-note svg {
    width: 22px;
    height: 22px;
    color: var(--green);
    margin-top: 2px;
}
.icon-card-section {
    background: #fff;
}
.icon-card-section .section-heading p:last-child {
    color: var(--ink-soft);
}
.icon-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}
.icon-card {
    min-height: 232px;
    padding: 25px 24px 23px;
    border: 1px solid #cfddeb;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 30px rgba(7,27,58,.055);
}
.icon-card-symbol {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    margin-bottom: 17px;
    border-radius: 15px;
    color: var(--brand);
    background: var(--brand-soft);
    border: 1px solid #d8e8f8;
}
.icon-card-symbol svg {
    width: 29px;
    height: 29px;
}
.icon-card p:last-child {
    margin-bottom: 0;
}
.focus-band-section {
    padding-top: 54px;
    padding-bottom: 58px;
    background: linear-gradient(180deg, #f4f9ff 0%, #ffffff 100%);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.focus-band {
    display: grid;
    grid-template-columns: minmax(0, .82fr) minmax(320px, 1fr);
    gap: 34px;
    align-items: center;
    padding: 30px;
    border: 1px solid #c9dced;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(7,27,58,.07);
}
.focus-band h2 {
    max-width: 520px;
}
.focus-band p {
    max-width: 590px;
    color: var(--ink-soft);
}
.focus-band ul {
    display: grid;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}
.focus-band li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 15px;
    border: 1px solid #d9e6f2;
    border-radius: 14px;
    background: #fbfdff;
    color: var(--ink);
    font-weight: 760;
}
.focus-band li svg {
    width: 21px;
    height: 21px;
    margin-top: 2px;
    color: var(--green);
}
.notes-section {
    background: #fff;
}
.notes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.note-row {
    padding: 22px;
    border: 1px solid var(--line);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(7,27,58,.045);
}
.note-row span {
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    margin-bottom: 12px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--brand-soft);
    color: var(--brand);
    font-size: .82rem;
    font-weight: 900;
}
.note-row p:last-child {
    margin-bottom: 0;
}
@media (max-width: 1020px) {
    .subpage-hero-grid,
    .focus-band {
        grid-template-columns: 1fr;
    }
    .subpage-hero-panel {
        max-width: 620px;
    }
    .subpage-checks,
    .icon-card-grid,
    .notes-grid {
        grid-template-columns: 1fr;
    }
    .icon-card,
    .note-row {
        min-height: auto;
    }
}
@media (max-width: 680px) {
    .subpage-hero {
        padding: 40px 0 38px;
    }
    .subpage-hero h1 {
        font-size: clamp(2.12rem, 10vw, 3rem);
    }
    .subpage-hero .intro-text {
        font-size: 1rem;
    }
    .subpage-checks,
    .subpage-hero-items {
        grid-template-columns: 1fr;
    }
    .subpage-hero-panel,
    .focus-band {
        padding: 22px;
        border-radius: 18px;
    }
    .icon-card-section,
    .focus-band-section,
    .notes-section {
        padding-top: 46px;
        padding-bottom: 46px;
    }
}


/* Revision 22: deep content sections */
.decision-section {
    background: #fff;
}
.decision-table-wrap {
    overflow-x: auto;
    border: 1px solid #cddded;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 14px 34px rgba(7,27,58,.055);
}
.decision-table {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
}
.decision-table th,
.decision-table td {
    padding: 18px 20px;
    border-bottom: 1px solid #e0eaf4;
    text-align: left;
    vertical-align: top;
}
.decision-table thead th {
    color: var(--ink);
    background: #f4f9ff;
    font-size: .9rem;
    letter-spacing: .02em;
}
.decision-table tbody th {
    width: 22%;
    color: var(--brand);
    font-weight: 900;
}
.decision-table tr:last-child th,
.decision-table tr:last-child td {
    border-bottom: 0;
}
.guide-panel-section {
    background: linear-gradient(180deg, #ffffff 0%, #f4f9ff 100%);
}
.guide-panel {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(360px, 1fr);
    gap: 28px;
    align-items: stretch;
    padding: 30px;
    border: 1px solid #c9dced;
    border-radius: 22px;
    background: #fff;
    box-shadow: 0 18px 42px rgba(7,27,58,.06);
}
.guide-copy p:last-child {
    color: var(--ink-soft);
}
.guide-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}
.guide-list-card {
    padding: 20px;
    border: 1px solid #d9e6f2;
    border-radius: 18px;
    background: #fbfdff;
}
.guide-list-card h3 {
    margin-bottom: 14px;
    font-size: 1rem;
}
.guide-list-card ul {
    display: grid;
    gap: 10px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.guide-list-card li {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    color: var(--ink-soft);
}
.guide-list-card li svg {
    flex: 0 0 auto;
    width: 19px;
    height: 19px;
    margin-top: 2px;
    color: var(--green);
}
.answer-block-section {
    background: #fff;
}
.answer-block-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.answer-block {
    padding: 24px;
    border: 1px solid var(--line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(7,27,58,.045);
}
.answer-block h3 {
    margin-bottom: 10px;
    font-size: 1.08rem;
}
.answer-block p:last-child {
    margin-bottom: 0;
}
@media (max-width: 1020px) {
    .guide-panel,
    .guide-list-grid,
    .answer-block-grid {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 680px) {
    .guide-panel {
        padding: 22px;
        border-radius: 18px;
    }
    .decision-section,
    .guide-panel-section,
    .answer-block-section {
        padding-top: 46px;
        padding-bottom: 46px;
    }
}