/*
######################################################
#
#       Impressum Section
#
######################################################
 */
.impressum {
    --brand: #2b66b7;
    --navy: #0b1226;
    --navy-2: #101a3a;
    --text: #0f172a;
    --muted: rgba(15, 23, 42, .72);

    --card-bd: rgba(15, 23, 42, .08);
    --card-shadow: 0 18px 50px rgba(15, 23, 42, .10);
    --radius: 12px;
}

/* HERO (wie Screenshot: dunkler Streifen, links ausgerichtet) */
.impressum .imp6-hero {
    padding: 52px 0 44px;
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy-2) 55%, var(--navy) 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.impressum .imp6-kicker {
    font-size: .72rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .60);
    margin-bottom: .55rem;
}

.impressum .imp6-title {
    font-weight: 900;
    font-size: clamp(2.0rem, 3.1vw, 2.75rem);
    line-height: 1.08;
    margin: 0 0 .4rem;
}

.impressum .imp6-lead {
    margin: 0;
    color: rgba(255, 255, 255, .78);
    font-weight: 600;
    max-width: 70ch;
}

/* CONTENT: viel Weißraum, Card mittig */
.impressum .imp6-section {
    padding: 64px 0 76px;
    background: #fff;
}

.impressum .imp6-card {
    background: #fff;
    border: 1px solid var(--card-bd);
    border-radius: var(--radius);
    padding: 28px 34px;
    box-shadow: var(--card-shadow);
}

/* Typografie in der Card (wie Screenshot: fette Überschriften, ruhiger Text) */
.impressum .imp6-h2 {
    color: var(--text);
    font-weight: 900;
    font-size: 1.35rem;
    margin: 0 0 14px 0;
}

.impressum .imp6-h3 {
    color: var(--text);
    font-weight: 900;
    font-size: 1.12rem;
    margin: 22px 0 8px 0;
}

.impressum .imp6-text {
    color: var(--muted);
    font-weight: 600;
    line-height: 1.72;
    margin: 0;
}

.impressum .imp6-text + .imp6-text {
    margin-top: 10px;
}

/* Links (im Screenshot blau/underlined) */
.impressum .imp6-link {
    color: var(--brand);
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.impressum .imp6-link:hover {
    opacity: .88;
}

/* Divider (wie im Screenshot: sehr subtil) */
.impressum .imp6-divider {
    margin: 26px 0;
    border: 0;
    height: 1px;
    background: rgba(15, 23, 42, .08);
}

/* Kleine Details für sauberes Spacing */
.impressum .imp6-card strong {
    color: rgba(15, 23, 42, .88);
    font-weight: 800;
}

/* RESPONSIVE */
.impressum

@media (max-width: 991.98px) {
    .impressum .imp6-hero {
        padding: 44px 0 38px;
    }

    .impressum .imp6-section {
        padding: 52px 0 60px;
    }

    .impressum .imp6-card {
        padding: 22px 20px;
        border-radius: 10px;
        box-shadow: 0 14px 38px rgba(15, 23, 42, .10);
    }
}

.impressum

@media (max-width: 575.98px) {
    .impressum .imp6-title {
        font-size: 1.9rem;
    }

    .impressum .imp6-h2 {
        font-size: 1.22rem;
    }

    .impressum .imp6-h3 {
        font-size: 1.06rem;
    }
}

/*
######################################################
#
#       AGB Section
#
######################################################
*/

.agb {
    --brand: #2b66b7;
    --navy: #0b1226;
    --navy2: #101a3a;
    --text: #0f172a;
    --muted: rgba(15, 23, 42, .72);
    --border: rgba(15, 23, 42, .08);
}

/* HERO */
.agb .agb-hero {
    padding: 60px 0 48px;
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy2) 60%, var(--navy) 100%);
    color: #fff;
}

.agb .agb-kicker {
    font-size: .75rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: .6rem;
}

.agb .agb-title {
    font-weight: 900;
    font-size: clamp(2rem, 3vw, 2.8rem);
    margin: 0 0 .3rem;
}

.agb .agb-lead {
    opacity: .85;
    font-weight: 600;
}

/* SECTION */
.agb .agb-section {
    padding: 70px 0;
    background: #fff;
}

.agb .agb-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 36px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}

/* TYPO */
.agb .agb-h2 {
    font-weight: 900;
    margin-bottom: 18px;
}

.agb .agb-h3 {
    font-weight: 800;
    margin-top: 30px;
    margin-bottom: 10px;
}

.agb .agb-text {
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 14px;
}

.agb .agb-link {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.agb .agb-divider {
    margin: 30px 0;
    height: 1px;
    border: 0;
    background: var(--border);
}

.agb .agb-toc {
    padding-left: 1.2rem;
    margin-bottom: 0;
}

.agb .agb-stand {
    margin-top: 40px;
    font-size: .9rem;
    color: rgba(15, 23, 42, .55);
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .agb .agb-card {
        padding: 24px;
    }

    .agb .agb-section {
        padding: 50px 0;
    }
}

@media (max-width: 575.98px) {
    .agb .agb-title {
        font-size: 1.9rem;
    }
}

/*
######################################################
#
#       Datenschutz Section
#
######################################################
*/

.datenschutz {
    --brand: #2b66b7;
    --navy: #0b1226;
    --navy2: #101a3a;
    --text: #0f172a;
    --muted: rgba(15, 23, 42, .72);
    --border: rgba(15, 23, 42, .08);
}

/* HERO */
.datenschutz .datenschutz-hero {
    padding: 60px 0 48px;
    background: linear-gradient(90deg, var(--navy) 0%, var(--navy2) 60%, var(--navy) 100%);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}

.datenschutz .datenschutz-kicker {
    font-size: .75rem;
    letter-spacing: .15em;
    text-transform: uppercase;
    opacity: .7;
    margin-bottom: .6rem;
}

.datenschutz .datenschutz-title {
    font-weight: 900;
    font-size: clamp(2rem, 3vw, 2.8rem);
    line-height: 1.08;
    margin: 0 0 .35rem;
}

.datenschutz .datenschutz-lead {
    opacity: .85;
    font-weight: 600;
    margin: 0;
}

/* SECTION */
.datenschutz .datenschutz-section {
    padding: 70px 0;
    background: #fff;
}

/* CARD */
.datenschutz .datenschutz-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 32px 36px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, .08);
}

/* TYPO */
.datenschutz .datenschutz-h2 {
    font-weight: 900;
    margin: 0 0 18px 0;
    color: var(--text);
}

.datenschutz .datenschutz-h3 {
    font-weight: 800;
    margin-top: 30px;
    margin-bottom: 10px;
    color: var(--text);
}

.datenschutz .datenschutz-text {
    color: var(--muted);
    line-height: 1.75;
    margin-bottom: 14px;
}

.datenschutz .datenschutz-link {
    color: var(--brand);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.datenschutz .datenschutz-link:hover {
    opacity: .88;
}

.datenschutz .datenschutz-box {
    margin-top: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 18px 18px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
}

.datenschutz .datenschutz-stand {
    margin-top: 36px;
    font-size: .9rem;
    color: rgba(15, 23, 42, .55);
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .datenschutz .datenschutz-section {
        padding: 50px 0;
    }

    .datenschutz .datenschutz-card {
        padding: 24px;
    }
}

@media (max-width: 575.98px) {
    .datenschutz .datenschutz-title {
        font-size: 1.9rem;
    }
}


/*
######################################################
#
#       Höranalyse Section
#
######################################################
*/

.hoeranalyse {
    --navy: #0b1226;
    --navy2: #101a3a;
    --text: #0f172a;
    --muted: rgba(15, 23, 42, .78);
    --border: rgba(15, 23, 42, .08);
    --brand: #2b66b7;

    --shadow: 0 20px 55px rgba(15, 23, 42, .08);
    --radius: 16px;
}

/* HERO */
.hoeranalyse .hoeranalyse-hero{
    position:relative;
    padding:70px 0 92px;
    background:linear-gradient(90deg,var(--navy) 0%,var(--navy2) 60%,var(--navy) 100%);
    color:#fff;
    overflow:hidden;
}
.hoeranalyse .hoeranalyse-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.55rem;
}
.hoeranalyse .hoeranalyse-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.9rem);
    line-height:1.08;
    margin:0 0 .35rem;
}
.hoeranalyse .hoeranalyse-lead{
    margin:0;
    color:rgba(255,255,255,.80);
    font-weight:600;
    max-width:70ch;
}
.hoeranalyse .hoeranalyse-wave{
    position:absolute;
    left:0; right:0;
    bottom:-1px;
    height:90px;
    line-height:0;
}
.hoeranalyse .hoeranalyse-wave svg{ width:100%; height:100%; display:block; }

/* SECTION */
.hoeranalyse .ha-section {
    padding: 66px 0 78px;
    background: #fff;
}

/* MAIN SURFACE */
.hoeranalyse .ha-surface {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
}

/* TEXT */
.hoeranalyse .ha-h2 {
    font-weight: 900;
    color: var(--text);
    font-size: 1.35rem;
    margin: 0 0 12px 0;
}

.hoeranalyse .ha-text {
    color: var(--muted);
    font-weight: 600;
    line-height: 1.8;
    margin: 0;
}

.hoeranalyse .ha-divider {
    height: 1px;
    background: rgba(15, 23, 42, .06);
    margin: 22px 0;
}

.hoeranalyse .ha-block strong {
    color: rgba(15, 23, 42, .92);
    font-weight: 800;
}

/* ASIDE */
.hoeranalyse .ha-aside {
    position: sticky;
    top: 92px; /* ggf. an deine Navbar-Höhe anpassen */
}

@media (max-width: 991.98px) {
    .hoeranalyse .ha-aside {
        position: static;
        top: auto;
    }
}

/* MEDIA CARD */
.hoeranalyse .ha-media {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
    padding: 14px;
}

.hoeranalyse .ha-media-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}

.hoeranalyse .ha-media-title {
    font-weight: 900;
    color: var(--text);
    line-height: 1.2;
}

.hoeranalyse .ha-media-sub {
    font-weight: 650;
    color: rgba(15, 23, 42, .60);
    font-size: .92rem;
}

.hoeranalyse .ha-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border-radius: 999px;
    border: 1px solid rgba(43, 102, 183, .18);
    background: rgba(43, 102, 183, .08);
    color: rgba(15, 23, 42, .86);
    font-weight: 800;
    font-size: .82rem;
    white-space: nowrap;
}

.hoeranalyse .ha-figure {
    margin: 0;
}

.hoeranalyse .ha-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: #fff;
}

.hoeranalyse .ha-caption {
    margin-top: 10px;
    color: rgba(15, 23, 42, .58);
    font-weight: 650;
    font-size: .92rem;
    line-height: 1.5;
}

/* INFO BOX */
.hoeranalyse .ha-info {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 12px 12px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .08);
    background: #fff;
}

.hoeranalyse .ha-info-ic {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(43, 102, 183, .10);
    color: var(--brand);
    flex: 0 0 auto;
}

.hoeranalyse .ha-info-text {
    color: rgba(15, 23, 42, .74);
    font-weight: 650;
    line-height: 1.55;
}

/* CTA */
.hoeranalyse .ha-cta {
    margin-top: 12px;
    width: 100%;
    height: 44px;
    border-radius: 14px;
    background: rgba(43, 102, 183, .08);
    border: 1px solid rgba(43, 102, 183, .18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    text-decoration: none;
    color: rgba(15, 23, 42, .92);
    font-weight: 900;
}

.hoeranalyse .ha-cta-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.hoeranalyse .ha-cta-left .bi {
    color: var(--brand);
}

.hoeranalyse .ha-cta-right {
    color: var(--brand);
}

.hoeranalyse .ha-cta:hover {
    text-decoration: none;
    filter: brightness(.99);
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
    .hoeranalyse .ha-hero {
        padding: 54px 0 48px;
    }

    .hoeranalyse .ha-section {
        padding: 54px 0 64px;
    }

    .hoeranalyse .ha-surface {
        padding: 20px;
    }
}

@media (max-width: 575.98px) {
    .hoeranalyse .ha-title {
        font-size: 1.95rem;
    }

    .hoeranalyse .ha-h2 {
        font-size: 1.22rem;
    }
}

/*
######################################################
#
#       Probetragen Section
#
######################################################
*/

.probetragen {
    --navy: #0b1226;
    --navy2: #101a3a;
    --text: #0f172a;
    --muted: rgba(15, 23, 42, .78);
    --border: rgba(15, 23, 42, .08);
    --brand: #2b66b7;
    --shadow: 0 20px 55px rgba(15, 23, 42, .08);
    --radius: 16px;
}

/* HERO */
.probetragen .probetragen-hero{
    position:relative;
    padding:70px 0 92px;
    background:linear-gradient(90deg,var(--navy) 0%,var(--navy2) 60%,var(--navy) 100%);
    color:#fff;
    overflow:hidden;
}
.probetragen .probetragen-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.55rem;
}
.probetragen .probetragen-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.9rem);
    line-height:1.08;
    margin:0 0 .35rem;
}
.probetragen .probetragen-lead{
    margin:0;
    color:rgba(255,255,255,.80);
    font-weight:600;
    max-width:70ch;
}
.probetragen .probetragen-wave{
    position:absolute;
    left:0; right:0;
    bottom:-1px;
    height:90px;
    line-height:0;
}
.probetragen .probetragen-wave svg{ width:100%; height:100%; display:block; }

/* SECTION */
.probetragen .pt-section {
    padding: 66px 0 78px;
    background: #fff;
}

/* SURFACE */
.probetragen .pt-surface {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
}

/* TEXT */
.probetragen .pt-text {
    color: var(--muted);
    font-weight: 600;
    line-height: 1.85;
    margin: 0;
}

.probetragen .pt-text strong {
    color: rgba(15, 23, 42, .92);
    font-weight: 900;
}

/* MEDIA */
.probetragen .pt-media {
    border: 1px solid rgba(15, 23, 42, .10);
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, .10);
}

.probetragen .pt-img {
    width: 100%;
    height: auto;
    display: block;
}

/* CTA */
.probetragen .pt-cta {
    margin-top: 18px;
    width: 100%;
    height: 46px;
    border-radius: 14px;
    background: rgba(43, 102, 183, .08);
    border: 1px solid rgba(43, 102, 183, .18);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    text-decoration: none;
    color: rgba(15, 23, 42, .92);
    font-weight: 900;
}

.probetragen .pt-cta-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.probetragen .pt-cta-left .bi {
    color: var(--brand);
}

.probetragen .pt-cta-right {
    color: var(--brand);
}

.probetragen .pt-cta:hover {
    text-decoration: none;
    filter: brightness(.99);
}

/* Responsive */
@media (max-width: 991.98px) {
    .probetragen .pt-hero {
        padding: 54px 0 48px;
    }

    .probetragen .pt-section {
        padding: 54px 0 64px;
    }

    .probetragen .pt-surface {
        padding: 20px;
    }
}

@media (max-width: 575.98px) {
    .probetragen .pt-title {
        font-size: 1.95rem;
    }
}


/*
######################################################
#
#       Die Anpassung Section
#
######################################################
*/

.anpassung {
    --navy: #0b1226;
    --navy2: #101a3a;
    --text: #0f172a;
    --muted: rgba(15, 23, 42, .78);
    --border: rgba(15, 23, 42, .08);
    --brand: #2b66b7;

    --radius: 16px;
    --shadow: 0 20px 55px rgba(15, 23, 42, .08);
}

/* HERO */
.anpassung .anpassung-hero{
    position:relative;
    padding:70px 0 92px;
    background:linear-gradient(90deg,var(--navy) 0%,var(--navy2) 60%,var(--navy) 100%);
    color:#fff;
    overflow:hidden;
}
.anpassung .anpassung-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.55rem;
}
.anpassung .anpassung-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.9rem);
    line-height:1.08;
    margin:0 0 .35rem;
}
.anpassung .anpassung-lead{
    margin:0;
    color:rgba(255,255,255,.80);
    font-weight:600;
    max-width:70ch;
}
.anpassung .anpassung-wave{
    position:absolute;
    left:0; right:0;
    bottom:-1px;
    height:90px;
    line-height:0;
}
.anpassung .anpassung-wave svg{ width:100%; height:100%; display:block; }

/* SECTION */
.anpassung .ap-section {
    padding: 66px 0 78px;
    background: #fff;
}

.anpassung .ap-surface {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 28px;
}

.anpassung .ap-note {
    text-align: center;
    margin: 0 0 18px 0;
    color: rgba(15, 23, 42, .65);
    font-weight: 900;
}

/* LAYOUT */
.anpassung .ap-steps {
    display: grid;
    grid-template-columns: 240px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.anpassung .ap-rail {
    position: sticky;
    top: 92px; /* ggf. Navbar-Höhe */
    padding: 10px 10px;
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 14px;
    background: linear-gradient(180deg, #ffffff 0%, #f6f8fc 100%);
}

.anpassung .ap-rail-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: rgba(15, 23, 42, .82);
    font-weight: 850;
}

.anpassung .ap-rail-item:hover {
    background: rgba(43, 102, 183, .08);
    color: rgba(15, 23, 42, .90);
    text-decoration: none;
}

.anpassung .ap-dot {
    width: 30px;
    height: 30px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(43, 102, 183, .10);
    border: 1px solid rgba(43, 102, 183, .18);
    color: rgba(15, 23, 42, .90);
    font-weight: 900;
    flex: 0 0 auto;
}

.anpassung .ap-rail-text {
    font-size: .95rem;
    line-height: 1.25;
}

/* CARDS */
.anpassung .ap-card {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 16px;
    padding: 16px 16px;
    background: #fff;
    box-shadow: 0 14px 36px rgba(15, 23, 42, .06);
    margin-bottom: 14px;
}

.anpassung .ap-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.anpassung .ap-badge {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(43, 102, 183, .10);
    border: 1px solid rgba(43, 102, 183, .18);
    color: rgba(15, 23, 42, .88);
    font-weight: 900;
    font-size: .82rem;
    white-space: nowrap;
}

.anpassung .ap-h3 {
    margin: 0;
    font-weight: 900;
    color: var(--text);
    font-size: 1.12rem;
}

.anpassung .ap-text {
    margin: 0 0 10px 0;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.85;
}

/* IMAGE */
.anpassung .ap-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, .10);
    background: #fff;
}

/* Responsive */
@media (max-width: 991.98px) {
    .anpassung .ap-hero {
        padding: 54px 0 48px;
    }

    .anpassung .ap-section {
        padding: 54px 0 64px;
    }

    .anpassung .ap-surface {
        padding: 20px;
    }

    .anpassung .ap-steps {
        grid-template-columns: 1fr;
    }

    .anpassung .ap-rail {
        position: static;
        top: auto;
        display: flex;
        gap: 10px;
        overflow: auto;
        white-space: nowrap;
        padding: 10px;
    }

    .anpassung .ap-rail-item {
        flex: 0 0 auto;
        padding: 10px 12px;
    }
}

@media (max-width: 575.98px) {
    .anpassung .ap-title {
        font-size: 1.95rem;
    }

    .anpassung .ap-rail-text {
        font-size: .92rem;
    }
}

/*
######################################################
#
#       Finanzierungshilfe Section
#
######################################################
*/

.finanzierungshilfe {
    --navy: #0b1226;
    --navy2: #101a3a;
    --text: #0f172a;
    --muted: rgba(15, 23, 42, .75);
    --border: rgba(15, 23, 42, .08);
}


/* HERO */

.finanzierungshilfe-hero {
    position: relative;
    padding: 70px 0 80px;

    background: linear-gradient(90deg, #0b1226 0%, #111c3d 60%, #0b1226 100%);
    color: #fff;

    overflow: hidden;
}

.finanzierungshilfe-kicker {
    font-size: .75rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .65);
    margin-bottom: .5rem;
}

.finanzierungshilfe-title {
    font-weight: 900;
    font-size: clamp(2.2rem, 3vw, 2.8rem);
    margin: 0 0 .4rem;
}

.finanzierungshilfe-lead {
    color: rgba(255, 255, 255, .8);
    max-width: 60ch;
}

.finanzierungshilfe-wave {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    line-height: 0;
}

.finanzierungshilfe-wave svg {
    width: 100%;
    height: 90px;
    display: block;
}


/* SECTION */

.finanzierungshilfe-section {
    padding: 60px 0;
    background: #fff;
}

.finanzierungshilfe-sub {
    font-size: 1.15rem;
    color: var(--muted);
    margin-bottom: 30px;
    font-weight: 600;
}


/* IMAGE */

.finanzierungshilfe-image-wrap {
    width: 300px;
    height: 300px;

    margin: 0 auto;

    border-radius: 50%;
    overflow: hidden;

    border: 6px solid #fff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, .15);
}

.finanzierungshilfe-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* VORTEILE */

.finanzierungshilfe-h2 {
    font-weight: 900;
    color: var(--text);
    margin-bottom: 25px;
}

.finanzierungshilfe-item {
    font-size: 1.05rem;
    color: var(--muted);
    line-height: 1.6;

    padding: 12px 0;
}


/* RESPONSIVE */

@media (max-width: 991px) {

    .finanzierungshilfe-image-wrap {
        width: 240px;
        height: 240px;
    }

    .finanzierungshilfe-title {
        font-size: 2rem;
    }

}

/*
######################################################
#
#       Zubehör Section
#
######################################################
*/

.zubehoer{
    --navy:#0b1226;
    --navy2:#111c3d;
    --text:#0f172a;
    --muted:rgba(15,23,42,.75);
    --border:rgba(15,23,42,.08);
}



/* HERO */

.zubehoer-hero{
    position:relative;
    padding:70px 0 90px;
    background:linear-gradient(90deg,#0b1226 0%,#111c3d 60%,#0b1226 100%);
    color:#fff;
    overflow:hidden;
}

.zubehoer-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.5rem;
}

.zubehoer-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.8rem);
    margin:0 0 .4rem;
}

.zubehoer-lead{
    color:rgba(255,255,255,.8);
    max-width:60ch;
}

.zubehoer-wave{
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    line-height:0;
}

.zubehoer-wave svg{
    width:100%;
    height:90px;
    display:block;
}



/* CONTENT */

.zubehoer-section{
    padding:60px 0;
    background:#fff;
}

.zubehoer-h2{
    font-weight:800;
    margin-bottom:20px;
    color:var(--text);
}

.zubehoer-text{
    color:var(--muted);
    line-height:1.8;
    margin-bottom:16px;
}

.zubehoer-tip{
    font-style:italic;
    color:#5a6b85;
}



/* LISTEN */

.zubehoer-list{
    list-style:none;
    padding:0;
    margin:20px 0 0;
}

.zubehoer-list li{
    padding:6px 0;
    color:var(--muted);
}



/* BILDER */

.zubehoer-image{
    width:100%;
    border-radius:12px;
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.zubehoer-image-small{
    width:120px;
    border-radius:10px;
    box-shadow:0 10px 25px rgba(0,0,0,.1);
}



/* RESPONSIVE */

@media (max-width:991px){

    .zubehoer-title{
        font-size:2rem;
    }

    .zubehoer-image-small{
        width:90px;
    }

}


/*
######################################################
#
#       Hausbesuche Section
#
######################################################
*/

.hausbesuche{
    --navy:#0b1226;
    --navy2:#111c3d;
    --text:#0f172a;
    --muted:rgba(15,23,42,.75);
    --border:rgba(15,23,42,.08);
    --brand:#2b66b7;
}

/* HERO */
.hausbesuche .hausbesuche-hero{
    position:relative;
    padding:70px 0 90px;
    background:linear-gradient(90deg,#0b1226 0%,#111c3d 60%,#0b1226 100%);
    color:#fff;
    overflow:hidden;
}
.hausbesuche .hausbesuche-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.5rem;
}
.hausbesuche .hausbesuche-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.8rem);
    margin:0 0 .4rem;
}
.hausbesuche .hausbesuche-lead{
    color:rgba(255,255,255,.82);
    font-weight:650;
    margin:0;
}
.hausbesuche .hausbesuche-wave{
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    line-height:0;
}
.hausbesuche .hausbesuche-wave svg{
    width:100%;
    height:90px;
    display:block;
}

/* CONTENT */
.hausbesuche .hausbesuche-section{
    padding:60px 0 70px;
    background:#fff;
}
.hausbesuche .hausbesuche-text{
    color:var(--muted);
    line-height:1.85;
    font-weight:650;
    font-size:1.05rem;
    margin-bottom:14px;
}
.hausbesuche .hausbesuche-image{
    width:100%;
    height:auto;
    border-radius:12px;
    box-shadow:0 20px 45px rgba(0,0,0,.10);
    display:block;
}

/* Small callout */
.hausbesuche .hausbesuche-callout{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding:14px 14px;
    border-radius:14px;
    border:1px solid rgba(15,23,42,.08);
    background:linear-gradient(180deg,#ffffff 0%, #f7f9fd 100%);
}
.hausbesuche .hausbesuche-callout-ic{
    width:42px;
    height:42px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(43,102,183,.10);
    border:1px solid rgba(43,102,183,.18);
    color:var(--brand);
    flex:0 0 auto;
    font-size:1.2rem;
}
.hausbesuche .hausbesuche-callout-txt{
    color:rgba(15,23,42,.78);
    font-weight:650;
    line-height:1.6;
}

/* Cards */
.hausbesuche .hausbesuche-card{
    height:100%;
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    padding:16px 16px;
    background:#fff;
    box-shadow:0 16px 44px rgba(15,23,42,.07);
}
.hausbesuche .hausbesuche-card-ic{
    width:44px;
    height:44px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(43,102,183,.10);
    border:1px solid rgba(43,102,183,.18);
    color:var(--brand);
    font-size:1.25rem;
    margin-bottom:10px;
}
.hausbesuche .hausbesuche-h3{
    font-weight:900;
    color:var(--text);
    font-size:1.1rem;
    margin:0 0 10px;
}
.hausbesuche .hausbesuche-list{
    margin:0;
    padding-left:18px;
    color:var(--muted);
    font-weight:650;
    line-height:1.7;
}
.hausbesuche .hausbesuche-list li{ margin:6px 0; }

/* CTA */
.hausbesuche .hausbesuche-cta{
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    padding:16px 16px;
    background:linear-gradient(90deg, rgba(43,102,183,.08), rgba(43,102,183,.03));
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
}
.hausbesuche .hausbesuche-cta-title{
    font-weight:900;
    color:var(--text);
    margin-bottom:2px;
}
.hausbesuche .hausbesuche-cta-sub{
    color:rgba(15,23,42,.68);
    font-weight:650;
}
.hausbesuche .hausbesuche-cta-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    border-radius:999px;
    text-decoration:none;
    color:#fff;
    background:linear-gradient(180deg,#2fb0e6,#1f86c3);
    border:1px solid rgba(255,255,255,.38);
    box-shadow:0 18px 46px rgba(31,134,195,.22);
    font-weight:900;
    white-space:nowrap;
}
.hausbesuche .hausbesuche-cta-btn:hover{ color:#fff; filter:brightness(.99); }

/* Responsive */
@media (max-width: 991.98px){
    .hausbesuche .hausbesuche-section{ padding:52px 0 60px; }
    .hausbesuche .hausbesuche-hero{ padding:60px 0 86px; }
    .hausbesuche .hausbesuche-cta{
        flex-direction:column;
        align-items:flex-start;
    }
    .hausbesuche .hausbesuche-cta-btn{ width:100%; justify-content:center; }
}


/*
######################################################
#
#       Gehörschutz Section
#
######################################################
*/

.gehoerschutz{
    --navy:#0b1226;
    --navy2:#111c3d;
    --text:#0f172a;
    --muted:rgba(15,23,42,.75);
    --border:rgba(15,23,42,.08);
    --shadow:0 18px 50px rgba(15,23,42,.08);
    --radius:16px;
}


/* HERO */

.gehoerschutz .gehoerschutz-hero{
    position:relative;
    padding:70px 0 90px;
    background:linear-gradient(90deg,#0b1226 0%,#111c3d 60%,#0b1226 100%);
    color:#fff;
    overflow:hidden;
}

.gehoerschutz .gehoerschutz-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.5rem;
}

.gehoerschutz .gehoerschutz-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.8rem);
    margin:0 0 .4rem;
}

.gehoerschutz .gehoerschutz-lead{
    color:rgba(255,255,255,.82);
    font-weight:650;
    margin:0;
}

.gehoerschutz .gehoerschutz-wave{
    position:absolute;
    left:0;
    bottom:-1px;
    width:100%;
    line-height:0;
}

.gehoerschutz .gehoerschutz-wave svg{
    width:100%;
    height:90px;
    display:block;
}



/* CONTENT */

.gehoerschutz .gehoerschutz-section{
    padding:60px 0 70px;
    background:#fff;
}



/* TEXT CARDS */

.gehoerschutz .gehoerschutz-card{
    background:#fff;
    border:1px solid var(--border);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px;
}

.gehoerschutz .gehoerschutz-card--soft{
    background:linear-gradient(180deg,#ffffff 0%, #f7f9fd 100%);
}

.gehoerschutz .gehoerschutz-text{
    color:var(--muted);
    font-weight:600;
    line-height:1.8;
    margin:0 0 12px;
}

.gehoerschutz .gehoerschutz-h2{
    font-weight:800;
    color:var(--text);
    font-size:1.25rem;
    margin-bottom:12px;
}



/* BILDER GRID (WICHTIG) */

.gehoerschutz .gehoerschutz-stack{
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:18px;
}


/* BILD CARD */

.gehoerschutz .gehoerschutz-img{
    width:100%;
    height:160px;
    object-fit:contain;

    background:#fff;
    padding:15px;

    border-radius:14px;
    border:1px solid rgba(15,23,42,.08);

    box-shadow:0 15px 40px rgba(0,0,0,.08);

    transition:transform .2s ease;
}

.gehoerschutz .gehoerschutz-img:hover{
    transform:translateY(-4px);
}



/* RESPONSIVE */

@media (max-width:991px){

    .gehoerschutz .gehoerschutz-stack{
        grid-template-columns:1fr 1fr;
    }

}

@media (max-width:575px){

    .gehoerschutz .gehoerschutz-stack{
        grid-template-columns:1fr;
    }

    .gehoerschutz .gehoerschutz-img{
        height:180px;
    }

}


/*
######################################################
#
#       Bauarten Section
#
######################################################
*/

.bauarten{
    --navy:#0b1226;
    --navy2:#111c3d;
    --text:#0f172a;
    --muted:rgba(15,23,42,.70);
    --border:rgba(15,23,42,.10);
    --shadow:0 18px 60px rgba(15,23,42,.10);
    --radius:16px;
}

/* HERO */
.bauarten .bauarten-hero{
    position:relative;
    padding:70px 0 92px;
    background:linear-gradient(90deg,#0b1226 0%,#111c3d 60%,#0b1226 100%);
    color:#fff;
    overflow:hidden;
}
.bauarten .bauarten-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.55rem;
}
.bauarten .bauarten-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.9rem);
    margin:0 0 .35rem;
}
.bauarten .bauarten-lead{
    color:rgba(255,255,255,.82);
    font-weight:650;
    margin:0;
}
.bauarten .bauarten-wave{
    position:absolute;
    left:0; right:0;
    bottom:-1px;
    height:90px;
    line-height:0;
}
.bauarten .bauarten-wave svg{
    width:100%;
    height:100%;
    display:block;
}

/* SECTION */
.bauarten .bauarten-section{
    padding:44px 0 80px;
    background:#fff;
}

/* centered content width like professional pages */
.bauarten .bauarten-wrap{
    width:min(980px, 100%);
    margin:0 auto;
}

/* SUBNAV (sticky, clean) */
.bauarten .bauarten-subnav{
    position:sticky;
    top: calc(var(--nav-h, 78px) + 10px);
    z-index: 20;
    display:flex;
    gap:10px;
    padding: 10px 0 14px;
    background: rgba(255,255,255,.92);
    backdrop-filter: blur(10px);
}
.bauarten .bauarten-subnav-link{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:8px 14px;
    border-radius:999px;
    text-decoration:none;
    font-weight:900;
    font-size:.86rem;
    color: rgba(15,23,42,.86);
    background: rgba(43,102,183,.06);
    border: 1px solid rgba(43,102,183,.14);
}
.bauarten .bauarten-subnav-link:hover{ filter: brightness(.99); }

/* main card */
.bauarten .bauarten-card{
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 22px;
}

/* headings */
.bauarten .bauarten-h2{
    font-weight: 900;
    font-size: 1.35rem;
    color: rgba(15,23,42,.92);
    margin: 2px 0 14px;
}
.bauarten .bauarten-h3{
    font-weight: 900;
    font-size: 1.02rem;
    color: rgba(15,23,42,.90);
    margin: 0 0 8px;
}

/* item rows */
.bauarten .bauarten-item{
    display:grid;
    grid-template-columns: 1fr 240px; /* kleinere Bildspalte */
    gap: 18px;
    padding: 16px 0;
    border-top: 1px solid rgba(15,23,42,.06);
}
.bauarten .bauarten-item:first-of-type{ border-top: 0; }
.bauarten .bauarten-item--compact{ padding-top: 12px; }

.bauarten .bauarten-text{
    margin: 0 0 10px;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.85;
    font-size: .95rem;
}
.bauarten .bauarten-textcol{ min-width:0; }
.bauarten .bauarten-imgcol{ min-width:0; display:flex; justify-content:flex-end; }

/* media blocks: NOT like separate cards, calmer */
.bauarten .bauarten-media{
    width: 240px;
    height: 150px;
    background: #f7f9fc;
    border: 1px solid rgba(15,23,42,.06);
    border-radius: 12px;
    padding: 10px;
    display:flex;
    align-items:center;
    justify-content:center;
}
.bauarten .bauarten-media img{
    width:100%;
    height:100%;
    object-fit: contain;
    display:block;
}

.bauarten .bauarten-media--portrait{ height: 210px; }
.bauarten .bauarten-media--small{ height: 120px; }

/* note */
.bauarten .bauarten-note{
    margin-top: 10px;
    padding: 12px 14px;
    background: rgba(43,102,183,.06);
    border: 1px solid rgba(43,102,183,.14);
    border-radius: 12px;
    color: rgba(15,23,42,.74);
    font-weight: 650;
    line-height: 1.75;
    font-size: .92rem;
}

/* wide image */
.bauarten .bauarten-wide{
    margin-top: 14px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.08);
    border-radius: 12px;
    padding: 12px;
}
.bauarten .bauarten-wide img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}

/* divider between sections */
.bauarten .bauarten-divider{
    margin: 22px 0 18px;
    border: none;
    height: 1px;
    background: rgba(15,23,42,.08);
}

/* textblock in implantate */
.bauarten .bauarten-textblock{
    border-top: 1px solid rgba(15,23,42,.06);
    padding: 16px 0 6px;
}

/* Responsive */
@media (max-width: 991.98px){
    .bauarten .bauarten-section{ padding: 34px 0 70px; }
    .bauarten .bauarten-card{ padding: 18px; }

    .bauarten .bauarten-item{
        grid-template-columns: 1fr;
    }
    .bauarten .bauarten-imgcol{
        justify-content:flex-start;
    }
    .bauarten .bauarten-media{
        width: min(420px, 100%);
        height: auto;
    }
    .bauarten .bauarten-media img{
        height: auto;
    }
    .bauarten .bauarten-subnav{
        top: calc(var(--nav-h, 66px) + 8px);
    }
}


/*
######################################################
#
#       Das Menschliche Gehör Section
#
######################################################
*/

.dasmenschlichegehoer{
    --navy:#0b1226;
    --navy2:#111c3d;
    --text:#0f172a;
    --muted:rgba(15,23,42,.72);
    --border:rgba(15,23,42,.10);
    --shadow:0 18px 60px rgba(15,23,42,.10);
    --radius:16px;
}

/* HERO */
.dasmenschlichegehoer .dasmenschlichegehoer-hero{
    position:relative;
    padding:70px 0 92px;
    background:linear-gradient(90deg,#0b1226 0%,#111c3d 60%,#0b1226 100%);
    color:#fff;
    overflow:hidden;
}
.dasmenschlichegehoer .dasmenschlichegehoer-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.55rem;
}
.dasmenschlichegehoer .dasmenschlichegehoer-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.9rem);
    margin:0;
    line-height:1.08;
}
.dasmenschlichegehoer .dasmenschlichegehoer-wave{
    position:absolute;
    left:0; right:0;
    bottom:-1px;
    height:90px;
    line-height:0;
}
.dasmenschlichegehoer .dasmenschlichegehoer-wave svg{
    width:100%;
    height:100%;
    display:block;
}

/* SECTION */
.dasmenschlichegehoer .dasmenschlichegehoer-section{
    padding:44px 0 80px;
    background:#fff;
}
.dasmenschlichegehoer .dasmenschlichegehoer-wrap{
    width:min(980px, 100%);
    margin:0 auto;
}
.dasmenschlichegehoer .dasmenschlichegehoer-card{
    background:#fff;
    border:1px solid rgba(15,23,42,.08);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 22px 22px 24px;
}

/* media */
.dasmenschlichegehoer .dasmenschlichegehoer-media{
    background:#f7f9fc;
    border:1px solid rgba(15,23,42,.06);
    border-radius:12px;
    padding:12px;
}
.dasmenschlichegehoer .dasmenschlichegehoer-media img{
    width:100%;
    height:auto;
    display:block;
    object-fit:contain;
}

/* text */
.dasmenschlichegehoer .dasmenschlichegehoer-text{
    margin:0 0 14px;
    color: var(--muted);
    font-weight: 600;
    line-height: 1.9;
    font-size: .98rem;
}
.dasmenschlichegehoer .dasmenschlichegehoer-text--big{
    font-size: 1.05rem;
    color: rgba(15,23,42,.78);
}
.dasmenschlichegehoer .dasmenschlichegehoer-text strong{
    color: rgba(15,23,42,.90);
    font-weight: 900;
}

/* bullets */
.dasmenschlichegehoer .dasmenschlichegehoer-list{
    list-style:none;
    padding:0;
    margin: 12px 0 0;
    display:flex;
    flex-direction:column;
    gap:14px;
}
.dasmenschlichegehoer .dasmenschlichegehoer-list li{
    display:flex;
    gap:12px;
    align-items:flex-start;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(43,102,183,.14);
    background: rgba(43,102,183,.06);
    color: rgba(15,23,42,.76);
    font-weight: 650;
    line-height: 1.75;
    font-size: .95rem;
}
.dasmenschlichegehoer .dasmenschlichegehoer-arrow{
    flex:0 0 auto;
    font-weight:900;
    color: rgba(15,23,42,.75);
    transform: translateY(1px);
}

.dasmenschlichegehoer .dasmenschlichegehoer-divider{
    margin: 18px 0 16px;
    border:none;
    height:1px;
    background: rgba(15,23,42,.08);
}

/* centered round image */
.dasmenschlichegehoer .dasmenschlichegehoer-center{
    display:flex;
    justify-content:center;
    padding: 14px 0 10px;
}
.dasmenschlichegehoer .dasmenschlichegehoer-round{
    width: 170px;
    height: 170px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid rgba(15,23,42,.10);
    box-shadow: 0 14px 40px rgba(15,23,42,.10);
    padding: 12px;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.dasmenschlichegehoer .dasmenschlichegehoer-round img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

@media (max-width: 991.98px){
    .dasmenschlichegehoer .dasmenschlichegehoer-section{ padding:34px 0 70px; }
    .dasmenschlichegehoer .dasmenschlichegehoer-card{ padding: 18px; }
    .dasmenschlichegehoer .dasmenschlichegehoer-round{ width: 150px; height: 150px; }
}


/*
######################################################
#
#       Wegweiser zum guten Hören Section
#
######################################################
*/

   .wegweiser{
       --navy:#0b1226;
       --navy2:#111c3d;
       --text:#0f172a;
       --muted:rgba(15,23,42,.74);
       --bd:rgba(15,23,42,.10);
       --soft:rgba(43,102,183,.08);
       --shadow:0 18px 60px rgba(15,23,42,.10);
       --radius:18px;
   }

/* HERO */
.wegweiser .wegweiser-hero{
    position:relative;
    padding:70px 0 92px;
    background:linear-gradient(90deg,#0b1226 0%,#111c3d 60%,#0b1226 100%);
    color:#fff;
    overflow:hidden;
}
.wegweiser .wegweiser-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.55rem;
}
.wegweiser .wegweiser-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.9rem);
    margin:0;
    letter-spacing:.2px;
}
.wegweiser .wegweiser-wave{
    position:absolute;
    left:0; right:0;
    bottom:-1px;
    height:90px;
    line-height:0;
}
.wegweiser .wegweiser-wave svg{ width:100%; height:100%; display:block; }

/* SECTION */
.wegweiser .wegweiser-section{
    padding:44px 0 86px;
    background:#fff;
}
.wegweiser .wegweiser-wrap{
    width:min(980px,100%);
    margin:0 auto;
}
.wegweiser .wegweiser-card{
    background:#fff;
    border:1px solid var(--bd);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:26px;
}
.wegweiser .wegweiser-head{
    padding:4px 4px 18px;
    border-bottom:1px solid rgba(15,23,42,.06);
    margin-bottom:18px;
}
.wegweiser .wegweiser-intro{
    color:var(--muted);
    font-weight:650;
    line-height:1.65;
}

/* TIMELINE */
.wegweiser .wegweiser-timeline{
    display:grid;
    gap:18px;
}
.wegweiser .wegweiser-item{
    display:grid;
    grid-template-columns: 56px 1fr;
    gap:14px;
    align-items:stretch;
}
.wegweiser .wegweiser-rail{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    padding-top:6px;
}
.wegweiser .wegweiser-dot{
    width:34px; height:34px;
    border-radius:999px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    color:#fff;
    background:linear-gradient(180deg,#2fb0e6,#1f86c3);
    box-shadow:0 10px 26px rgba(31,134,195,.25);
    border:1px solid rgba(255,255,255,.35);
}
.wegweiser .wegweiser-line{
    width:2px;
    flex:1 1 auto;
    margin-top:10px;
    background:linear-gradient(180deg, rgba(15,23,42,.18), rgba(15,23,42,0));
}
.wegweiser .wegweiser-item--last .wegweiser-line{ display:none; }

/* BOX */
.wegweiser .wegweiser-box{
    border:1px solid rgba(15,23,42,.08);
    border-radius:16px;
    background:#fff;
    padding:16px;
}
.wegweiser .wegweiser-box--soft{
    background:linear-gradient(180deg, rgba(43,102,183,.06), rgba(255,255,255,1) 65%);
}
.wegweiser .wegweiser-box-top{
    margin-bottom:10px;
}
.wegweiser .wegweiser-h2{
    color:var(--text);
    font-weight:900;
    font-size:1.25rem;
    line-height:1.2;
}

/* GRID inside box */
.wegweiser .wegweiser-grid{
    display:grid;
    grid-template-columns: 240px 1fr;
    gap:16px;
    align-items:center;
}

.wegweiser .wegweiser-media{
    border-radius:14px;
    overflow:hidden;
    border:1px solid rgba(15,23,42,.08);
    background:#fff;
}
.wegweiser .wegweiser-media img{
    width:100%;
    height:170px;
    object-fit:cover;
    display:block;
}

/* No-image step */
.wegweiser .wegweiser-grid--noimg{
    grid-template-columns: 56px 1fr;
    align-items:start;
}
.wegweiser .wegweiser-icon{
    display:flex;
    align-items:flex-start;
    justify-content:center;
    padding-top:2px;
}
.wegweiser .wegweiser-icon-badge{
    width:44px; height:44px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:900;
    color:#1f86c3;
    background:rgba(43,102,183,.10);
    border:1px solid rgba(43,102,183,.18);
}

.wegweiser .wegweiser-text{
    color:var(--muted);
    font-weight:650;
    line-height:1.75;
    margin:0 0 10px 0;
}

/* RESPONSIVE */
@media (max-width: 991.98px){
    .wegweiser .wegweiser-card{ padding:18px; }
    .wegweiser .wegweiser-item{ grid-template-columns: 44px 1fr; }
    .wegweiser .wegweiser-dot{ width:30px; height:30px; font-size:.95rem; }
    .wegweiser .wegweiser-grid{ grid-template-columns: 1fr; }
    .wegweiser .wegweiser-media img{ height:200px; }
    .wegweiser .wegweiser-grid--noimg{ grid-template-columns: 48px 1fr; }
}

/*
######################################################
#
#       IDO Anfertigung Section
#
######################################################
*/

.idoanfertigung{
    --navy:#0b1226;
    --navy2:#111c3d;
    --text:#0f172a;
    --muted:rgba(15,23,42,.74);
    --bd:rgba(15,23,42,.10);
    --shadow:0 18px 60px rgba(15,23,42,.10);
    --radius:18px;
}

/* HERO */
.idoanfertigung .idoanfertigung-hero{
    position:relative;
    padding:70px 0 92px;
    background:linear-gradient(90deg,#0b1226 0%,#111c3d 60%,#0b1226 100%);
    color:#fff;
    overflow:hidden;
}
.idoanfertigung .idoanfertigung-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.55rem;
}
.idoanfertigung .idoanfertigung-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.9rem);
    margin:0 0 .25rem;
    letter-spacing:.2px;
}
.idoanfertigung .idoanfertigung-lead{
    margin:0;
    color:rgba(255,255,255,.78);
    font-weight:600;
    line-height:1.5;
}
.idoanfertigung .idoanfertigung-wave{
    position:absolute;
    left:0; right:0;
    bottom:-1px;
    height:90px;
    line-height:0;
}
.idoanfertigung .idoanfertigung-wave svg{ width:100%; height:100%; display:block; }

/* SECTION */
.idoanfertigung .idoanfertigung-section{
    padding:44px 0 86px;
    background:#fff;
}
.idoanfertigung .idoanfertigung-card{
    background:#fff;
    border:1px solid var(--bd);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:26px;
}

/* TEXT */
.idoanfertigung .idoanfertigung-text{
    color:var(--muted);
    font-weight:650;
    line-height:1.85;
    margin:0 0 14px 0;
}
.idoanfertigung .idoanfertigung-text--center{
    text-align:center;
    max-width:70ch;
    margin-left:auto;
    margin-right:auto;
}

/* CENTER IMAGE */
.idoanfertigung .idoanfertigung-center{
    display:flex;
    justify-content:center;
    padding:10px 0 6px;
}

.idoanfertigung .idoanfertigung-round{
    width:220px;
    aspect-ratio:1/1;
    border-radius:999px;
    overflow:hidden;
    border:1px solid rgba(15,23,42,.10);
    box-shadow:0 16px 40px rgba(15,23,42,.10);
    background:#fff;
}
.idoanfertigung .idoanfertigung-round--sm{
    width:160px;
    box-shadow:0 12px 32px rgba(15,23,42,.10);
}
.idoanfertigung .idoanfertigung-round img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* SPLIT (image left + text right) */
.idoanfertigung .idoanfertigung-split{
    display:grid;
    grid-template-columns: 180px 1fr;
    gap:16px;
    align-items:center;
    padding:6px 0 6px;
}

.idoanfertigung .idoanfertigung-divider{
    margin:18px 0;
    border:none;
    height:1px;
    background:rgba(15,23,42,.10);
}

/* RESPONSIVE */
@media (max-width: 991.98px){
    .idoanfertigung .idoanfertigung-card{ padding:18px; }
    .idoanfertigung .idoanfertigung-round{ width:200px; }
    .idoanfertigung .idoanfertigung-split{
        grid-template-columns:1fr;
        justify-items:center;
        text-align:center;
    }
    .idoanfertigung .idoanfertigung-round--sm{ width:150px; }
}

@media (max-width: 575.98px){
    .idoanfertigung .idoanfertigung-round{ width:180px; }
}


/*
######################################################
#
#       Hörtraining Section
#
######################################################
*/

.hoertraining{
    --navy:#0b1226;
    --navy2:#111c3d;
    --text:#0f172a;
    --muted:rgba(15,23,42,.74);
    --bd:rgba(15,23,42,.10);
    --shadow:0 18px 60px rgba(15,23,42,.10);
    --radius:18px;
}

/* HERO */
.hoertraining .hoertraining-hero{
    position:relative;
    padding:70px 0 92px;
    background:linear-gradient(90deg,#0b1226 0%,#111c3d 60%,#0b1226 100%);
    color:#fff;
    overflow:hidden;
}
.hoertraining .hoertraining-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.55rem;
}
.hoertraining .hoertraining-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.9rem);
    margin:0 0 .35rem;
    letter-spacing:.2px;
}
.hoertraining .hoertraining-lead{
    margin:0;
    color:rgba(255,255,255,.78);
    font-weight:600;
    line-height:1.55;
    max-width:70ch;
}
.hoertraining .hoertraining-wave{
    position:absolute;
    left:0; right:0;
    bottom:-1px;
    height:90px;
    line-height:0;
}
.hoertraining .hoertraining-wave svg{ width:100%; height:100%; display:block; }

/* SECTION */
.hoertraining .hoertraining-section{
    padding:44px 0 86px;
    background:#fff;
}
.hoertraining .hoertraining-card{
    background:#fff;
    border:1px solid var(--bd);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:26px;
}

/* TEXT */
.hoertraining .hoertraining-text{
    color:var(--muted);
    font-weight:650;
    line-height:1.9;
    margin:0 0 14px 0;
}
.hoertraining .hoertraining-text--center{
    text-align:center;
    max-width:72ch;
    margin-left:auto;
    margin-right:auto;
}

/* POINTS */
.hoertraining .hoertraining-points{
    display:grid;
    gap:12px;
    margin:0;
}
.hoertraining .hoertraining-point{
    display:grid;
    grid-template-columns:44px 1fr;
    gap:12px;
    align-items:start;
    padding:14px 14px;
    border:1px solid rgba(15,23,42,.08);
    border-radius:14px;
    background:linear-gradient(180deg, rgba(11,18,38,.04) 0%, rgba(11,18,38,0) 100%);
}
.hoertraining .hoertraining-icon{
    width:44px;
    height:44px;
    border-radius:12px;
    display:grid;
    place-items:center;
    background:rgba(17,28,61,.10);
    color:var(--navy2);
    font-weight:900;
    font-size:1.25rem;
}

/* PHASES */
.hoertraining .hoertraining-phase{ margin:0; }
.hoertraining .hoertraining-phase-head{
    display:flex;
    align-items:center;
    gap:12px;
    margin:0 0 10px 0;
    flex-wrap:wrap;
}
.hoertraining .hoertraining-badge{
    display:inline-flex;
    align-items:center;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid rgba(15,23,42,.10);
    background:rgba(11,18,38,.04);
    color:var(--navy2);
    font-weight:800;
    font-size:.85rem;
    letter-spacing:.02em;
}
.hoertraining .hoertraining-h2{
    margin:0;
    font-weight:900;
    color:var(--text);
    font-size:1.25rem;
}

.hoertraining .hoertraining-divider{
    margin:18px 0;
    border:none;
    height:1px;
    background:rgba(15,23,42,.10);
}

/* RESPONSIVE */
@media (max-width: 991.98px){
    .hoertraining .hoertraining-card{ padding:18px; }
}
@media (max-width: 575.98px){
    .hoertraining .hoertraining-point{
        grid-template-columns:1fr;
    }
    .hoertraining .hoertraining-icon{
        width:42px;
        height:42px;
    }
}


/*
######################################################
#
#       Tinnitus Section
#
######################################################
*/

.tinnitus{
    --navy:#0b1226;
    --navy2:#111c3d;
    --text:#0f172a;
    --muted:rgba(15,23,42,.74);
    --line:rgba(15,23,42,.10);
    --shadow:0 18px 60px rgba(15,23,42,.10);
    --radius:16px;
}

/* HERO */
.tinnitus .tinnitus-hero{
    position:relative;
    padding:70px 0 92px;
    background:linear-gradient(90deg,var(--navy) 0%,var(--navy2) 60%,var(--navy) 100%);
    color:#fff;
    overflow:hidden;
}
.tinnitus .tinnitus-kicker{
    font-size:.75rem;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:rgba(255,255,255,.65);
    margin-bottom:.55rem;
}
.tinnitus .tinnitus-title{
    font-weight:900;
    font-size:clamp(2.2rem,3vw,2.9rem);
    line-height:1.08;
    margin:0 0 .35rem;
}
.tinnitus .tinnitus-lead{
    margin:0;
    color:rgba(255,255,255,.80);
    font-weight:600;
    max-width:70ch;
}
.tinnitus .tinnitus-wave{
    position:absolute;
    left:0; right:0;
    bottom:-1px;
    height:90px;
    line-height:0;
}
.tinnitus .tinnitus-wave svg{ width:100%; height:100%; display:block; }

/* LAYOUT */
.tinnitus .tinnitus-section{
    padding:44px 0 80px;
    background:#fff;
}
.tinnitus .tinnitus-wrap{
    max-width:980px; /* wichtig: Content schmaler => Bilder wirken nicht so dominant */
}

.tinnitus .tinnitus-card{
    background:#fff;
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:26px;
    margin-bottom:16px;
}
.tinnitus .tinnitus-card--plain{ box-shadow:none; }

/* TYPO */
.tinnitus .tinnitus-h2{
    font-weight:900;
    color:var(--text);
    margin:0 0 12px;
    font-size:1.18rem;
}
.tinnitus .tinnitus-h3{
    font-weight:900;
    color:var(--text);
    margin:0 0 10px;
    font-size:1.05rem;
}
.tinnitus .tinnitus-text{
    color:var(--muted);
    font-weight:600;
    line-height:1.85;
    margin:0 0 12px;
    font-size:.98rem; /* Text optisch etwas “präsenter” */
}

/* IMAGES: bewusst kleiner + begrenzt */
.tinnitus .tinnitus-imgbox{
    border-radius:14px;
    overflow:hidden;
    border:1px solid var(--line);
    background:#fff;
}
.tinnitus .tinnitus-imgbox img{
    width:100%;
    height:auto;
    display:block;
}

/* Intro-Bild: nicht zu hoch */
.tinnitus .tinnitus-imgbox--intro{
    max-width:240px;
}
.tinnitus .tinnitus-imgbox--intro img{
    aspect-ratio:3/4;
    object-fit:cover;
}

/* Diagramm: kleiner + zentriert */
.tinnitus .tinnitus-imgbox--diagram{
    max-width:360px;
    margin-left:auto;
}
.tinnitus .tinnitus-imgbox--diagram img{
    aspect-ratio:4/3;
    object-fit:contain;
    background:#fff;
}

/* HNO-Bild: wie Side-Image statt riesig */
.tinnitus .tinnitus-imgbox--hno{
    max-width:420px;
    margin-left:auto;
}
.tinnitus .tinnitus-imgbox--hno img{
    aspect-ratio:4/3;
    object-fit:cover;
}

@media (max-width: 991.98px){
    .tinnitus .tinnitus-hero{ padding:56px 0 86px; }
    .tinnitus .tinnitus-card{ padding:18px; }
    .tinnitus .tinnitus-wrap{ max-width:100%; }

    .tinnitus .tinnitus-imgbox--intro,
    .tinnitus .tinnitus-imgbox--diagram,
    .tinnitus .tinnitus-imgbox--hno{
        max-width:100%;
        margin-left:0;
    }
}