/* ==========================================================================
   Lokal eingebundene Schriftarten (DSGVO: kein externes Laden von Google Fonts)
   ========================================================================== */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/open-sans-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/open-sans-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/open-sans-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/prompt-500-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/prompt-600-latin.woff2') format('woff2');
}

@font-face {
    font-family: 'Prompt';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/prompt-700-latin.woff2') format('woff2');
}

/* ==========================================================================
   Globale Basis-Stile (ausgelagert aus dem <style>-Block der index.html)
   ========================================================================== */
html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background: #F7F3EC;
    font-family: 'Open Sans',system-ui,sans-serif;
    color: #100068;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

a {
    color: var(--accent,#00A9A6);
    text-underline-offset: 3px;
}

a:hover {
    color: color-mix(in oklab,var(--accent,#00A9A6) 70%,#100068);
}

::selection {
    background: rgba(0,169,166,.25);
}

@keyframes fadeUp{
    from {
        opacity: 0;
        transform: translateY(26px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes floaty{
    from {
        transform: translateY(-6px);
    }

    to {
        transform: translateY(8px);
    }
}

@media (prefers-reduced-motion: reduce){
    * {
        animation: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ==========================================================================
   Komponenten-Stile (ausgelagert aus den inline style-Attributen)
   ========================================================================== */
.c1 {
    min-height: 10vh;
}

.c2 {
    position: sticky;
    top: 0;
    z-index: 60;
    background: rgba(247,243,236,.86);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: 1px solid rgba(16,0,104,.08);
}

.c3 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    height: 78px;
    display: flex;
    align-items: center;
    gap: 34px;
}

.c4 {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.c5 {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #100068;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Prompt',sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #FFF8EE;
}

.c6 {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent,#00A9A6);
    border: 2px solid #F7F3EC;
}

.c7 {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.c8 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 15.5px;
    color: #100068;
    line-height: 1;
}

.c9 {
    font-size: 11px;
    color: #6B678F;
    line-height: 1;
    letter-spacing: .02em;
}

.c10 {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 26px;
}

.c11 {
    font-size: 14.5px;
    font-weight: 600;
    color: #3A3564;
    text-decoration: none;
    transition: color .15s ease;
}

.c11:hover {
    color: var(--accent,#00A9A6);
}

.c12 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--accent,#00A9A6);
    color: #FFFFFF;
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 14.5px;
    line-height: 1;
    padding: 12px 20px;
    border-radius: 999px;
    text-decoration: none;
    transition: background .18s ease,transform .18s ease;
}

.c12:hover {
    background: color-mix(in oklab,var(--accent,#00A9A6) 84%,black);
    color: #FFFFFF;
    transform: translateY(-1px);
}

.c13 {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c14 {
    background: var(--hero-bg,#F7F3EC);
    position: relative;
    overflow: hidden;
}

.c15 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 92px 32px 116px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(360px,1fr));
    gap: 64px;
    align-items: center;
}

.c16 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--hero-line,rgba(16,0,104,.14));
    border-radius: 999px;
    padding: 9px 16px;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .05em;
    color: var(--hero-muted,#4A4674);
    animation: fadeUp .7s cubic-bezier(.2,.7,.25,1) .05s both;
}

.c17 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent,#00A9A6);
}

.c18 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: clamp(44px,4.8vw,66px);
    line-height: 1.06;
    letter-spacing: -.015em;
    color: var(--hero-ink,#100068);
    margin: 26px 0 22px;
    text-wrap: balance;
    animation: fadeUp .7s cubic-bezier(.2,.7,.25,1) .12s both;
}

.c19 {
    background: linear-gradient(180deg,transparent 64%,color-mix(in oklab,var(--accent,#00A9A6) 32%,transparent) 64%);
}

.c20 {
    font-size: 17.5px;
    line-height: 1.75;
    color: var(--hero-muted,#4A4674);
    max-width: 580px;
    margin: 0 0 34px;
    text-wrap: pretty;
    animation: fadeUp .7s cubic-bezier(.2,.7,.25,1) .2s both;
}

.c21 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
    animation: fadeUp .7s cubic-bezier(.2,.7,.25,1) .28s both;
}

.c22 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent,#00A9A6);
    color: #FFFFFF;
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 17px 32px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 12px 26px color-mix(in oklab,var(--accent,#00A9A6) 32%,transparent);
    transition: transform .18s ease,box-shadow .18s ease,background .18s ease;
}

.c22:hover {
    background: color-mix(in oklab,var(--accent,#00A9A6) 84%,black);
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px color-mix(in oklab,var(--accent,#00A9A6) 42%,transparent);
}

.c23 {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c24 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid var(--hero-line,rgba(16,0,104,.16));
    color: var(--hero-ink,#100068);
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 15px 30px;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color .18s ease,color .18s ease;
}

.c24:hover {
    border-color: var(--accent,#00A9A6);
    color: var(--accent,#00A9A6);
}

.c25 {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 22px;
    margin-top: 32px;
    animation: fadeUp .7s cubic-bezier(.2,.7,.25,1) .36s both;
}

.c26 {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--hero-muted,#4A4674);
}

.c27 {
    flex: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: color-mix(in oklab,var(--accent,#00A9A6) 15%,white);
    position: relative;
}

.c27::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 5.5px;
    width: 6px;
    height: 3.5px;
    border-left: 2px solid var(--accent,#00A9A6);
    border-bottom: 2px solid var(--accent,#00A9A6);
    transform: rotate(-45deg);
}

.c28 {
    position: relative;
    min-height: 480px;
    animation: fadeUp .8s cubic-bezier(.2,.7,.25,1) .25s both;
}

.c29 {
    display: var(--deko,block);
    position: absolute;
    top: -10px;
    right: 4%;
    width: 104px;
    height: 104px;
    border: 3px solid var(--accent,#00A9A6);
    border-radius: 50%;
    opacity: .75;
    animation: floaty 7s ease-in-out infinite alternate;
}

.c30 {
    display: var(--deko,block);
    position: absolute;
    top: 44px;
    left: -4px;
    animation: floaty 9s ease-in-out infinite alternate-reverse;
}

.c31 {
    display: block;
    width: 18px;
    height: 18px;
    border: 3px solid var(--hero-ink,#100068);
    opacity: .45;
    transform: rotate(45deg);
}

.c32 {
    display: var(--deko,block);
    position: absolute;
    bottom: 116px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--accent,#00A9A6);
    opacity: .85;
    animation: floaty 6s ease-in-out infinite alternate;
}

.c33 {
    display: var(--deko,block);
    position: absolute;
    bottom: -2px;
    right: -8px;
    width: 150px;
    height: 104px;
    background-image: radial-gradient(var(--hero-line,rgba(16,0,104,.18)) 1.6px,transparent 1.7px);
    background-size: 15px 15px;
}

.c34 {
    position: absolute;
    top: 9%;
    left: 38px;
    right: -14px;
    height: 82%;
    background: color-mix(in oklab,var(--accent,#00A9A6) 16%,white);
    border-radius: 24px;
    transform: rotate(4deg);
    max-width: 470px;
}

.c35 {
    position: relative;
    width: min(470px,100%);
    margin: 26px auto 0;
    background: #FFFFFF;
    border-radius: 20px;
    box-shadow: 0 30px 70px rgba(16,0,104,.18);
    transform: rotate(-1.2deg);
    overflow: hidden;
}

.c36 {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 14px 18px;
    border-bottom: 1px solid #EFECE4;
}

.c37 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #E9E5F5;
}

.c38 {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--accent,#00A9A6);
}

.c39 {
    flex: 1;
    margin-left: 8px;
    background: #F4F1EA;
    border-radius: 999px;
    padding: 6px 14px;
    font-family: ui-monospace,Menlo,monospace;
    font-size: 11px;
    color: #6B678F;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.c40 {
    padding: 26px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.c41 {
    display: flex;
    align-items: center;
    gap: 14px;
}

.c42 {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: color-mix(in oklab,var(--accent,#00A9A6) 18%,white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Prompt',sans-serif;
    font-weight: 700;
    font-size: 17px;
    color: var(--accent,#00A9A6);
}

.c43 {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.c44 {
    width: 150px;
    height: 12px;
    border-radius: 6px;
    background: #D9D3EE;
}

.c45 {
    width: 98px;
    height: 8px;
    border-radius: 5px;
    background: #ECE8F7;
}

.c46 {
    border-radius: 14px;
    background: color-mix(in oklab,var(--accent,#00A9A6) 10%,white);
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.c47 {
    width: 55%;
    height: 10px;
    border-radius: 5px;
    background: #B9B2DF;
}

.c48 {
    width: 80%;
    height: 8px;
    border-radius: 5px;
    background: rgba(16,0,104,.10);
}

.c49 {
    width: 108px;
    height: 30px;
    border-radius: 999px;
    background: var(--accent,#00A9A6);
    margin-top: 4px;
}

.c50 {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.c51 {
    width: 100%;
    height: 8px;
    border-radius: 5px;
    background: #EEEBF6;
}

.c52 {
    width: 88%;
    height: 8px;
    border-radius: 5px;
    background: #EEEBF6;
}

.c53 {
    width: 62%;
    height: 8px;
    border-radius: 5px;
    background: #EEEBF6;
}

.c54 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 2px;
}

.c55 {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: #F4F1EA;
}

.c56 {
    margin-left: auto;
    width: 74px;
    height: 22px;
    border-radius: 999px;
    background: #EEEBF6;
}

.c57 {
    position: absolute;
    left: -6px;
    bottom: 34px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #100068;
    border: 1px solid rgba(255,255,255,.18);
    color: #FFF8EE;
    border-radius: 999px;
    padding: 12px 20px;
    box-shadow: 0 16px 34px rgba(16,0,104,.30);
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 13.5px;
}

.c58 {
    scroll-margin-top: 84px;
    padding: 108px 32px;
}

.c59 {
    max-width: 1200px;
    margin: 0 auto;
}

.c60 {
    animation: fadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 30%;
}

.c61 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent,#00A9A6);
    margin-bottom: 14px;
}

.c62 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: clamp(30px,3.4vw,42px);
    line-height: 1.14;
    letter-spacing: -.01em;
    color: #100068;
    margin: 0;
    text-wrap: pretty;
}

.c63 {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 24px;
    animation: fadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
}

.c64 {
    background: #FFFFFF;
    border: 1px solid rgba(16,0,104,.08);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(16,0,104,.06);
    padding: 32px;
    transition: transform .2s ease,box-shadow .2s ease;
}

.c64:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(16,0,104,.10);
}

.c65 {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: color-mix(in oklab,var(--accent,#00A9A6) 12%,white);
    color: var(--accent,#00A9A6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.c66 {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c67 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #100068;
    margin: 22px 0 14px;
}

.c68 {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.c69 {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.c70 {
    flex: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: color-mix(in oklab,var(--accent,#00A9A6) 14%,white);
    color: var(--accent,#00A9A6);
    font-family: 'Prompt',sans-serif;
    font-weight: 700;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.c71 {
    font-size: 15px;
    line-height: 1.6;
    color: #55517D;
}

.c72 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 20px;
    color: #100068;
    margin: 22px 0 10px;
}

.c73 {
    font-size: 15.5px;
    line-height: 1.7;
    color: #55517D;
    margin: 0;
}

.c74 {
    font-size: 15.5px;
    line-height: 1.7;
    color: rgb(85, 81, 125);
    margin: 0px;
}

.c75 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.c76 {
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.c77 {
    flex: none;
    margin-top: 2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: color-mix(in oklab,var(--accent,#00A9A6) 14%,white);
    position: relative;
}

.c77::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    width: 7px;
    height: 3.5px;
    border-left: 2px solid var(--accent,#00A9A6);
    border-bottom: 2px solid var(--accent,#00A9A6);
    transform: rotate(-45deg);
}

.dash-red {
    flex: none;
    margin-top: 2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: color-mix(in oklab, #E0563F 14%, white);
    position: relative;
}

.dash-red::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 8.5px;
    width: 9px;
    height: 2px;
    border-radius: 1px;
    background: #E0563F;
}

.c78 {
    scroll-margin-top: 84px;
    background: #FFFFFF;
    border-top: 1px solid rgba(16,0,104,.06);
    border-bottom: 1px solid rgba(16,0,104,.06);
    padding: 108px 32px;
}

.c79 {
    font-family: Prompt, sans-serif;
    font-weight: 600;
    font-size: clamp(30px, 3.4vw, 42px);
    line-height: 1.14;
    letter-spacing: -0.01em;
    color: rgb(16, 0, 104);
    margin: 0px 0px 16px;
    text-wrap: pretty;
    max-width: 820px;
}

.c80 {
    color: var(--color3);
}

.c81 {
    font-size: 17px;
    line-height: 1.7;
    color: #55517D;
    margin: 0;
    max-width: 640px;
}

.c82 {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(270px,1fr));
    gap: 22px;
    animation: fadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
}

.c83 {
    background: #F7F3EC;
    border-radius: 18px;
    padding: 28px;
    transition: transform .2s ease;
}

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

.c84 {
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--accent,#00A9A6);
    position: relative;
}

.c84::after {
    content: '';
    position: absolute;
    left: 10px;
    top: 10px;
    width: 11px;
    height: 5.5px;
    border-left: 2.5px solid #FFFFFF;
    border-bottom: 2.5px solid #FFFFFF;
    transform: rotate(-45deg);
}

.c85 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #100068;
    margin: 18px 0 8px;
}

.c86 {
    font-size: 15px;
    line-height: 1.65;
    color: #55517D;
    margin: 0;
}

/* ==========================================================================
   Beispiele-Galerie
   ========================================================================== */
.beispiele-grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: 24px;
    animation: fadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
}

.beispiel-card {
    position: relative;
    display: block;
    aspect-ratio: 4 / 3;
    border-radius: 20px;
    overflow: hidden;
    background: linear-gradient(135deg,color-mix(in oklab,var(--accent,#00A9A6) 16%,white),color-mix(in oklab,var(--primary) 8%,white));
    border: 1px solid rgba(16,0,104,.08);
    box-shadow: 0 10px 30px rgba(16,0,104,.06);
    text-decoration: none;
    transition: transform .25s ease,box-shadow .25s ease;
}

.beispiel-card:hover,
.beispiel-card:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 18px 40px rgba(16,0,104,.14);
}

.beispiel-media {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.beispiel-icon {
    width: 64px;
    height: 64px;
    fill: none;
    stroke: var(--primary);
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: .3;
    transition: transform .25s ease;
}

.beispiel-card:hover .beispiel-icon,
.beispiel-card:focus-visible .beispiel-icon {
    transform: scale(1.05);
}

.beispiel-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 22px;
    background: linear-gradient(to top,rgba(16,0,104,.90),rgba(16,0,104,.22) 65%,rgba(16,0,104,0));
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .25s ease,transform .25s ease;
}

.beispiel-card:hover .beispiel-overlay,
.beispiel-card:focus-visible .beispiel-overlay {
    opacity: 1;
    transform: translateY(0);
}

.beispiel-overlay-title {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 17px;
    color: #FFF8EE;
    margin-bottom: 6px;
}

.beispiel-overlay-cta {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--accent,#00A9A6);
}

.beispiel-overlay-arrow {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c87 {
    margin-top: 56px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(255px,1fr));
    gap: 22px;
    align-items: stretch;
    animation: fadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 24%;
}

.c88 {
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    border: 1px solid rgba(16,0,104,.08);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(16,0,104,.06);
    padding: 30px 28px;
    transition: transform .2s ease,box-shadow .2s ease;
}

.c88:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(16,0,104,.10);
}

.c89 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .02em;
    color: #100068;
}

.c90 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 12px 0 2px;
}

.c91 {
    font-family: 'Prompt',sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    color: #100068;
}

.c92 {
    font-size: 13px;
    color: #8A86AC;
}

.c93 {
    height: 1px;
    background: rgba(16,0,104,.08);
    margin: 22px 0 18px;
}

.c94 {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.c95 {
    font-size: 14.5px;
    line-height: 1.5;
    color: #45416F;
}

.c96 {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(16,0,104,.16);
    color: #100068;
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 14px 20px;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color .18s ease,color .18s ease;
    margin-top: 28px;
}

.c96:hover {
    border-color: var(--accent,#00A9A6);
    color: var(--accent,#00A9A6);
}

.c97 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #8A86AC;
    margin-bottom: 12px;
}

.c98 {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #100068;
    border-radius: 20px;
    box-shadow: 0 24px 50px rgba(16,0,104,.28);
    padding: 30px 28px;
    transition: transform .2s ease,box-shadow .2s ease;
}

.c98:hover {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px rgba(16,0,104,.36);
}

.c99 {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--accent,#00A9A6);
    color: #FFFFFF;
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .06em;
    padding: 8px 18px;
    border-radius: 999px;
    box-shadow: 0 8px 20px color-mix(in oklab,var(--accent,#00A9A6) 40%,transparent);
}

.c100 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 17px;
    letter-spacing: .02em;
    color: #FFF8EE;
}

.c101 {
    font-family: 'Prompt',sans-serif;
    font-weight: 700;
    font-size: 42px;
    line-height: 1;
    color: #FFFFFF;
}

.c102 {
    font-size: 13px;
    color: rgba(255,248,238,.6);
}

.c103 {
    height: 1px;
    background: rgba(255,248,238,.15);
    margin: 22px 0 18px;
}

.c104 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: rgba(255,248,238,.55);
    margin-bottom: 12px;
}

.c105 {
    flex: none;
    margin-top: 2px;
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: rgba(255,255,255,.13);
    position: relative;
}

.c105::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 6px;
    width: 7px;
    height: 3.5px;
    border-left: 2px solid var(--accent,#00A9A6);
    border-bottom: 2px solid var(--accent,#00A9A6);
    transform: rotate(-45deg);
}

.c106 {
    font-size: 14.5px;
    line-height: 1.5;
    color: #EDEAFF;
}

.c107 {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent,#00A9A6);
    color: #FFFFFF;
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    padding: 16px 20px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 12px 26px rgba(0,0,0,.25);
    transition: background .18s ease,transform .18s ease;
    margin-top: 28px;
}

.c107:hover {
    background: color-mix(in oklab,var(--accent,#00A9A6) 84%,black);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.c108 {
    margin: 30px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: #6B678F;
    max-width: 780px;
}

.c109 {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 22px;
    animation: fadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 28%;
}

.c110 {
    background: #FBF9F4;
    border: 1px solid rgba(16,0,104,.07);
    border-radius: 18px;
    padding: 28px;
    transition: transform .2s ease,border-color .2s ease;
}

.c110:hover {
    transform: translateY(-4px);
    border-color: var(--accent,#00A9A6);
}

.c111 {
    width: 50px;
    height: 50px;
    border-radius: 13px;
    background: color-mix(in oklab,var(--accent,#00A9A6) 12%,white);
    color: var(--accent,#00A9A6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.c112 {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c113 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 18px;
    color: #100068;
    margin: 20px 0 8px;
}

.c114 {
    background: #100068;
    position: relative;
    overflow: hidden;
    padding: 110px 32px;
}

.c115 {
    display: var(--deko,block);
    position: absolute;
    inset: 0;
    background: radial-gradient(640px 320px at 82% 18%,color-mix(in oklab,var(--accent,#00A9A6) 16%,transparent),transparent 70%);
}

.c116 {
    display: var(--deko,block);
    position: absolute;
    top: 46px;
    right: 8%;
    width: 92px;
    height: 92px;
    border: 3px solid var(--accent,#00A9A6);
    border-radius: 50%;
    opacity: .5;
    animation: floaty 8s ease-in-out infinite alternate;
}

.c117 {
    display: var(--deko,block);
    position: absolute;
    bottom: 40px;
    left: 6%;
    width: 140px;
    height: 96px;
    background-image: radial-gradient(rgba(255,248,238,.22) 1.6px,transparent 1.7px);
    background-size: 15px 15px;
}

.c118 {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    text-align: center;
    animation: fadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
}

.c119 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--accent,#00A9A6);
    margin-bottom: 16px;
}

.c120 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: clamp(30px,3.6vw,44px);
    line-height: 1.14;
    letter-spacing: -.01em;
    color: #FFF8EE;
    margin: 0;
    text-wrap: balance;
}

.c121 {
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255,248,238,.75);
    max-width: 720px;
    margin: 20px auto 38px;
    text-wrap: pretty;
}

.c122 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 20px;
}

.c123 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--accent,#00A9A6);
    color: #FFFFFF;
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 17px 32px;
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 12px 30px rgba(0,0,0,.30);
    transition: background .18s ease,transform .18s ease;
}

.c123:hover {
    background: color-mix(in oklab,var(--accent,#00A9A6) 84%,black);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.c124 {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15.5px;
    font-weight: 600;
    color: color-mix(in oklab,var(--accent,#00A9A6) 55%,white);
    text-decoration: none;
    transition: color .18s ease;
}

.c124:hover {
    color: #FFFFFF;
}

.c125 {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c126 {
    scroll-margin-top: 84px;
    padding: 108px 32px 120px;
}

.c127 {
    max-width: 980px;
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid rgba(16,0,104,.08);
    border-radius: 26px;
    box-shadow: 0 24px 60px rgba(16,0,104,.10);
    padding: 64px 56px;
    text-align: center;
    animation: fadeUp linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
}

.c128 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: clamp(30px,3.4vw,42px);
    line-height: 1.14;
    letter-spacing: -.01em;
    color: #100068;
    margin: 0;
    text-wrap: balance;
}

.c129 {
    margin: 42px 0 44px;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    gap: 20px;
}

.c130 {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 28px 18px;
    background: #FBF9F4;
    border-radius: 18px;
}

.c131 {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: color-mix(in oklab,var(--accent,#00A9A6) 12%,white);
    color: var(--accent,#00A9A6);
    display: flex;
    align-items: center;
    justify-content: center;
}

.c132 {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c133 {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8A86AC;
}

.c134 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    color: #100068;
}

.c135 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 17px;
    line-height: 1.4;
    color: #100068;
    text-decoration: none;
    transition: color .15s ease;
}

.c135:hover {
    color: var(--accent,#00A9A6);
}

.c136 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    color: #100068;
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .15s ease;
}

.c136:hover {
    color: var(--accent,#00A9A6);
}

.c137 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.c138 {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c139 {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    border: 2px solid rgba(16,0,104,.16);
    color: #100068;
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    padding: 15px 30px;
    border-radius: 999px;
    text-decoration: none;
    transition: border-color .18s ease,color .18s ease;
}

.c139:hover {
    border-color: var(--accent,#00A9A6);
    color: var(--accent,#00A9A6);
}

.c140 {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.c141 {
    background: #0B0050;
    color: #FFF8EE;
    padding: 76px 32px 36px;
}

.c142 {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(210px,1fr));
    gap: 44px;
}

.c143 {
    display: flex;
    align-items: center;
    gap: 12px;
}

.c144 {
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--accent,#00A9A6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Prompt',sans-serif;
    font-weight: 700;
    font-size: 19px;
    color: #FFFFFF;
}

.c145 {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.c146 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 15px;
    color: #FFF8EE;
    line-height: 1;
}

.c147 {
    font-size: 11px;
    color: rgba(255,248,238,.55);
    line-height: 1;
}

.c148 {
    margin: 18px 0 0;
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255,248,238,.6);
    max-width: 300px;
}

.c149 {
    font-family: 'Prompt',sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: rgba(255,248,238,.45);
    margin: 0 0 18px;
}

.c150 {
    display: flex;
    flex-direction: column;
    gap: 11px;
}

.c151 {
    font-size: 14.5px;
    color: rgba(255,248,238,.78);
    text-decoration: none;
    transition: color .15s ease;
}

.c151:hover {
    color: var(--accent,#00A9A6);
}

.c152 {
    font-size: 14.5px;
    line-height: 1.6;
    color: rgba(255,248,238,.78);
}

.c153 {
    font-size: 14.5px;
    color: rgba(255,248,238,.78);
    text-decoration: none;
    overflow-wrap: anywhere;
    transition: color .15s ease;
}

.c153:hover {
    color: var(--accent,#00A9A6);
}

.c154 {
    margin-top: 56px;
    border-top: 1px solid rgba(255,248,238,.14);
    padding-top: 26px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    color: rgba(255,248,238,.5);
}

/* ==========================================================================
   Mobile-Navigation / Hamburger-Menü
   (Umschaltung über die Klasse .nav-open auf <body>, gesetzt von menu.js)
   ========================================================================== */
/* Desktop: Wrapper ist layout-neutral – Links & Telefon-Button liegen
   wie zuvor direkt im Nav-Flex (.c3). */
.nav-menu {
    display: contents;
}

/* Hamburger-Button – nur auf schmalen Screens sichtbar */
.nav-toggle {
    display: none;
    margin-left: auto;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 0 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.nav-toggle span {
    display: block;
    width: 100%;
    height: 2.5px;
    border-radius: 2px;
    background: var(--hero-ink, #100068);
    transition: transform .25s ease, opacity .2s ease;
}

/* Hamburger -> X, wenn geöffnet */
body.nav-open .nav-toggle span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

body.nav-open .nav-toggle span:nth-child(2) {
    opacity: 0;
}

body.nav-open .nav-toggle span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

@media (max-width: 900px) {
    .c3 {
        padding: 0 20px;
        gap: 14px;
    }

    .nav-toggle {
        display: inline-flex;
    }

    /* Wrapper wird zum ausklappbaren Panel unter der Navileiste */
    .nav-menu {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        padding: 12px 24px 20px;
        background: rgba(247, 243, 236, .97);
        backdrop-filter: blur(14px) saturate(1.3);
        -webkit-backdrop-filter: blur(14px) saturate(1.3);
        border-bottom: 1px solid rgba(16, 0, 104, .08);
        box-shadow: 0 24px 40px rgba(16, 0, 104, .12);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-10px);
        transition: opacity .22s ease, transform .22s ease, visibility .22s;
    }

    body.nav-open .nav-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    /* Link-Liste vertikal */
    .c10 {
        margin-left: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        width: 100%;
    }

    .c11 {
        padding: 13px 4px;
        font-size: 16px;
        border-bottom: 1px solid rgba(16, 0, 104, .07);
    }

    .c10 a:last-child {
        border-bottom: none;
    }

    /* Telefon-Button volle Breite im Panel */
    .c12 {
        justify-content: center;
        width: 100%;
        margin-top: 12px;
    }
}

@media (max-width: 767px) {
    .c15 {
        max-width: 320px!important;
    }

    .c18 {
        font-family: 'Prompt',sans-serif;
        font-weight: 600;
        font-size: clamp(34px,4.8vw,66px);
        line-height: 1.06;
        letter-spacing: -.015em;
        color: var(--hero-ink,#100068);
        margin: 26px 0 22px;
        text-wrap: balance;
        animation: fadeUp .7s cubic-bezier(.2,.7,.25,1) .12s both;
    }

    .c16 {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        border: 1px solid var(--hero-line,rgba(16,0,104,.14));
        border-radius: 999px;
        padding: 9px 16px;
        font-size: 10.5px;
        font-weight: 600;
        letter-spacing: .05em;
        color: var(--hero-muted,#4A4674);
        animation: fadeUp .7s cubic-bezier(.2,.7,.25,1) .05s both;
    }

    .c20 {
        font-size: 12.5px;
        line-height: 1.75;
        color: var(--hero-muted,#4A4674);
        max-width: 300px;
        margin: 0 0 34px;
        text-wrap: pretty;
        animation: fadeUp .7s cubic-bezier(.2,.7,.25,1) .2s both;
    }

    .c25 {
        display: flex;
        flex-wrap: wrap;
        gap: 12px 22px;
        margin-top: 32px;
        animation: fadeUp .7s cubic-bezier(.2,.7,.25,1) .36s both;
    }

    .c26 {
        display: inline-flex;
        align-items: center;
        gap: 20px;
        font-size: 14px;
        font-weight: 600;
        color: var(--hero-muted,#4A4674);
    }
}