/* app.css — reine @import-Liste, feste Reihenfolge, keine eigenen Regeln
   meta/ -> layout/ -> components/ (nur genutzte Komponenten) */

/* meta/reset.css — minimal, unopinionated reset */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd {
    margin: 0;
}

ul[class],
ol[class] {
    margin: 0;
    padding: 0;
    list-style: none;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    font-family: var(--font-base);
    color: var(--black);
    background-color: var(--white);
}

img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

button {
    font: inherit;
    color: inherit;
    background: none;
    border: 0;
    cursor: pointer;
}

input,
button,
textarea,
select {
    font: inherit;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        -webkit-animation-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        -webkit-animation-iteration-count: 1 !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* meta/settings.css — zentrale Variablen, keine Magic Numbers in Komponenten-CSS */

/* cyrillic-ext */
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCm3FwrK3iLTcvnUwkT9nA2.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCm3FwrK3iLTcvnUwAT9nA2.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCm3FwrK3iLTcvnUwgT9nA2.woff2) format("woff2");
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCm3FwrK3iLTcvnUwcT9nA2.woff2) format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCm3FwrK3iLTcvnUwsT9nA2.woff2) format("woff2");
    unicode-range:
        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCm3FwrK3iLTcvnUwoT9nA2.woff2) format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Inter";
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCm3FwrK3iLTcvnUwQT9g.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCo3FwrK3iLTcvvYwYL8g.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCo3FwrK3iLTcvmYwYL8g.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCo3FwrK3iLTcvuYwYL8g.woff2) format("woff2");
    unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCo3FwrK3iLTcvhYwYL8g.woff2) format("woff2");
    unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
/* vietnamese */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCo3FwrK3iLTcvtYwYL8g.woff2) format("woff2");
    unicode-range:
        U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCo3FwrK3iLTcvsYwYL8g.woff2) format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/inter/v20/UcCo3FwrK3iLTcviYwY.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRTQgYoZZY2vCFuvAFT_rC1chb-.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRTQgYoZZY2vCFuvAFT_rm1chb-.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRTQgYoZZY2vCFuvAFT_rO1chb-.woff2) format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRTQgYoZZY2vCFuvAFT_r21cg.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRQQgYoZZY2vCFuvAFT9gaQZyTfoPNB.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRQQgYoZZY2vCFuvAFT9gaQZy3foPNB.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRQQgYoZZY2vCFuvAFT9gaQZyffoPNB.woff2) format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "PT Serif";
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRQQgYoZZY2vCFuvAFT9gaQZynfoA.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRVQgYoZZY2vCFuvAFbzr-tdg.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRVQgYoZZY2vCFuvAFSzr-tdg.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRVQgYoZZY2vCFuvAFYzr-tdg.woff2) format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}
/* cyrillic-ext */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRSQgYoZZY2vCFuvAnt66qfVyvHpA.woff2) format("woff2");
    unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRSQgYoZZY2vCFuvAnt66qWVyvHpA.woff2) format("woff2");
    unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* latin-ext */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRSQgYoZZY2vCFuvAnt66qcVyvHpA.woff2) format("woff2");
    unicode-range:
        U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
        U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
    font-family: "PT Serif";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url(../fonts/ptserif/v19/EJRSQgYoZZY2vCFuvAnt66qSVys.woff2) format("woff2");
    unicode-range:
        U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
        U+2215, U+FEFF, U+FFFD;
}

:root {
    /* Grid */
    --grid-col: 84px;
    --grid-gap: 20px;
    --grid-columns: 12;
    --grid-width: calc((var(--grid-col) + var(--grid-gap)) * var(--grid-columns) - var(--grid-gap));

    /* Typografie */
    --rootfactor: 16;
    --font-base: system-ui, -apple-system, "Segoe UI", sans-serif;
    --serif: "PT Serif", Georgia, serif;
    --sans: "Inter", Helvetica, Arial, sans-serif;

    /* Farben (data-bg-System) */
    --white: #ffffff;
    --grey: #f2f2f2;
    --black: #111111;
    --primary-color: #1a1a1a;

    /* Abstand */
    --block-spacing: 50px;
    --side-padding: 20px;
    --header-height: 72px;
}
:root {
    /* Globaler Style */
    --radius: var(--grid-gap);

    /* Grid: Gesamtbreite und Spalten-Breiten */
    --grid-width: calc((var(--grid-col) + var(--grid-gap)) * var(--grid-columns) - var(--grid-gap)); /* Gesamtbreite (Spalte + Abstand) */

    --w1: calc((var(--grid-col) + var(--grid-gap)));
    --w2: calc((var(--grid-col) + var(--grid-gap)) * 2 - var(--grid-gap));
    --w3: calc((var(--grid-col) + var(--grid-gap)) * 3 - var(--grid-gap));
    --w4: calc((var(--grid-col) + var(--grid-gap)) * 4 - var(--grid-gap));
    --w5: calc((var(--grid-col) + var(--grid-gap)) * 5 - var(--grid-gap));
    --w6: calc((var(--grid-col) + var(--grid-gap)) * 6 - var(--grid-gap));
    --w7: calc((var(--grid-col) + var(--grid-gap)) * 7 - var(--grid-gap));
    --w8: calc((var(--grid-col) + var(--grid-gap)) * 8 - var(--grid-gap));
    --w9: calc((var(--grid-col) + var(--grid-gap)) * 9 - var(--grid-gap));
    --w10: calc((var(--grid-col) + var(--grid-gap)) * 10 - var(--grid-gap));
    --w11: calc((var(--grid-col) + var(--grid-gap)) * 11 - var(--grid-gap));
    --w12: calc((var(--grid-col) + var(--grid-gap)) * 12 - var(--grid-gap));
    --w13: calc((var(--grid-col) + var(--grid-gap)) * 13 - var(--grid-gap));
    --w14: calc((var(--grid-col) + var(--grid-gap)) * 14 - var(--grid-gap));
    --w15: calc((var(--grid-col) + var(--grid-gap)) * 15 - var(--grid-gap));
    --w16: calc((var(--grid-col) + var(--grid-gap)) * 16 - var(--grid-gap));
    --w17: calc((var(--grid-col) + var(--grid-gap)) * 17 - var(--grid-gap));
    --w18: calc((var(--grid-col) + var(--grid-gap)) * 18 - var(--grid-gap));
    --w19: calc((var(--grid-col) + var(--grid-gap)) * 19 - var(--grid-gap));
    --w20: calc((var(--grid-col) + var(--grid-gap)) * 20 - var(--grid-gap));
    --w21: calc((var(--grid-col) + var(--grid-gap)) * 21 - var(--grid-gap));
    --w22: calc((var(--grid-col) + var(--grid-gap)) * 22 - var(--grid-gap));
    --w23: calc((var(--grid-col) + var(--grid-gap)) * 23 - var(--grid-gap));
    --w24: calc((var(--grid-col) + var(--grid-gap)) * 24 - var(--grid-gap));

    --dynamic-edge: calc((100% - var(--grid-width)) / 2);
}

@media (min-width: 768px) {
    :root {
        --block-spacing: 100px;
        --side-padding: 40px;
    }
}

html {
    font-size: calc(var(--rootfactor) / 16 * 100%);
}

/* Styled text  */

body:not(.wp-core-ui),
.acf-block-editor,
.acf-block-preview,
.acf-block-frontend {
    font-family: var(--sans);
    font-size: calc(18 / var(--rootfactor) * 1rem);
    line-height: 1.8;
    font-weight: 400;
    font-size: 18px;
}

p {
    margin-bottom: 1.8em;
    -epub-word-break: hyphenate;
    -ms-word-break: hyphenate;
    word-break: normal;
    word-wrap: normal;
    -webkit-hyphens: auto;
    -epub-hyphens: auto;
    -ms-hyphens: auto;
    hyphens: auto;
}

a {
    text-decoration: underline;
}

/* Flächen-/Block-Links (a mit display: block/flex im Modul-CSS) sind
   sitewide OHNE Unterstreichung — Karten, Kacheln, Galerie-Trigger etc.
   CSS kann display nicht abfragen, daher zentrale Liste: neue Block-Links
   hier ergänzen (Konvention, s. CLAUDE.md). :where() hält die Spezifität
   auf a-Niveau, damit Modul-CSS weiterhin einfach überschreiben kann. */
a:where(.card, .masonry-item, .ppu-trigger, .scrollslider-media, .newspreview-grid-item, .newspreview-imagetext-item, .cta, .cta-secondary) {
    text-decoration: none;
}

@media (hover: hover) {
    a:hover {
        color: var(--primary-color);
    }
}

h1,
.editor-post-title h1 {
    font-family: var(--serif);
    font-size: calc(28 / var(--rootfactor) * 1rem);
    line-height: 1.28571429;
    margin-bottom: 48px;
    font-weight: 400;
}

@media screen and (min-width: 600px) {
    h1,
    .editor-post-title h1 {
        font-size: calc(48 / var(--rootfactor) * 1rem);
        line-height: 1.16666667;
    }
}

h2 {
    font-family: var(--serif);
    font-size: calc(24 / var(--rootfactor) * 1rem);
    line-height: 1.333;
    margin-bottom: 1.2em;
    font-weight: 400;
    font-size: 24px;
    letter-spacing: -0.05em;
}

@media screen and (min-width: 600px) {
    h2 {
        font-size: calc(40 / var(--rootfactor) * 1rem);
        line-height: 1.25;
    }
}

h3 {
    font-family: var(--serif);
    font-size: calc(21 / var(--rootfactor) * 1rem);
    line-height: 1.2;
    margin-bottom: 1.2em;
    font-weight: 400;
}

@media screen and (min-width: 600px) {
    h3 {
        font-size: calc(26 / var(--rootfactor) * 1rem);
        line-height: 1;
    }
}

h4 {
    font-size: calc(20 / var(--rootfactor) * 1rem);
    line-height: 1.2;
    margin-bottom: 1.2em;
    font-weight: 400;
}

@media screen and (min-width: 600px) {
    h4 {
        font-size: calc(22 / var(--rootfactor) * 1rem);
        line-height: 1;
    }
}

h5 {
    font-size: calc(18 / var(--rootfactor) * 1rem);
    line-height: 1.2;
    margin-bottom: 1.2em;
    font-weight: 400;
}

@media screen and (min-width: 600px) {
    h5 {
        font-size: calc(21 / var(--rootfactor) * 1rem);
        line-height: 1;
    }
}

h6 {
    font-size: calc(16 / var(--rootfactor) * 1rem);
    line-height: 1.2;
    margin-bottom: 1.2em;
    font-weight: 400;
}

@media screen and (min-width: 600px) {
    h6 {
        font-size: calc(18 / var(--rootfactor) * 1rem);
        line-height: 1;
    }
}

ol {
    list-style: decimal;
    list-style-type: none;
    counter-reset: item;
    margin: 0;
    padding: 0;
}

ol > li {
    display: table;
    counter-increment: item;
    margin-bottom: 0.6em;
}

ol > li:before {
    content: counters(item, ".") ". ";
    display: table-cell;
    padding-right: 0.6em;
}

li ol > li {
    margin: 0;
}

li ol > li:before {
    content: counters(item, ".") " ";
}

ul {
    list-style: disc;
    margin-left: 20px;
}

li {
    position: relative;
    margin-bottom: 8px;
}

blockquote {
    font-size: calc(20 / var(--rootfactor) * 1rem);
    line-height: 1.2;
    margin-bottom: 10px;
    position: relative;
}
cite {
    font-size: calc(16 / var(--rootfactor) * 1rem);
    line-height: 1.2;
    margin-bottom: 10px;
    position: relative;
}

button {
}
.cta {
    display: inline-block;
    outline: none;
    border: 1px solid var(--black);
    color: var(--black);
    background-color: transparent;
    text-align: center;
    text-decoration: none;
    padding: 23px 46px;
    width: 100%;
    /* Modifier .cta--primary (s. unten): gefüllte Variante in der
       Projekt-Primärfarbe — z. B. Video-Embed-Consent-Button. */
    line-height: 1;
    transition: all 0.15s ease-in-out;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.03em;

    margin-bottom: 10px;
    margin-top: 48px;
    &.cta-secondary {
        background-color: var(--black);
        border-color: var(--black);
        color: var(--white);
    }
}
@media screen and (min-width: 460px) {
    .cta {
        width: auto;
    }
}
button:hover,
.cta:hover {
    background-color: var(--black);
    color: var(--white);
}

/* Gefüllte Primär-Variante — übernimmt überall die projektweit
   eingestellte --primary-color (settings.css bzw. Demo-Skin). */
.cta.cta--primary {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--white);
}

.cta.cta--primary:hover {
    background-color: var(--white);
    border-color: var(--white);
    color: var(--black);
}

button:active,
.cta:active,
.cta.active {
    background-color: var(--black);
    color: var(--white);
    transition: none;
}

nav ul,
nav li {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
}

nav a {
    text-decoration: none;
}

sub,
sub {
    vertical-align: sub !important;
    font-size: smaller !important;
}

sup,
sup {
    vertical-align: super;
    font-size: smaller;
}

strong {
    font-weight: 700;
}

/* layout/page.css — Grid-Frames, data-bg-Farbsystem, Section-Abstand */

/* Visually hidden, aber für Screenreader vorhanden */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Skip-Link */
.skip-link {
    position: absolute;
    top: -100%;
    left: 0;
    z-index: 1000;
    padding: 12px 20px;
    background-color: var(--black);
    color: var(--white);

    &:focus-visible {
        top: 0;
    }
}

/* Fokus-Styles (Pflicht, kein outline: none) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}
section {
    position: relative;
}
/* Anker-Ziele: Versatz für sticky Header */
[id] {
    scroll-margin-top: var(--header-height);
}

/* Frames */
/*frame, contains Content-Modules, no padding! Values come from the settings.css file*/
.frame,
[class*=" frame-"],
[class^="frame-"] {
    position: relative;
    width: 100%;
    max-width: var(--grid-width);
    margin: 0 auto;
}
[class*=" width-"],
[class^="width-"] {
    position: relative;
}
.frame-2,
.width-2 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 2 - var(--grid-gap));
}

.frame-3,
.width-3 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 3 - var(--grid-gap));
}

.frame-4,
.width-4 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 4 - var(--grid-gap));
}
.frame-5,
.width-5 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 5 - var(--grid-gap));
}
.frame-6,
.width-6 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 6 - var(--grid-gap));
}
.frame-7,
.width-7 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 7 - var(--grid-gap));
}
.frame-8,
.width-8 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 8 - var(--grid-gap));
}
.frame-9,
.width-9 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 9 - var(--grid-gap));
}
.frame-10,
.width-10 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 10 - var(--grid-gap));
}
.frame-11,
.width-11 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 11 - var(--grid-gap));
}
.frame-12,
.width-12 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 12 - var(--grid-gap));
}
.frame-13,
.width-13 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 13 - var(--grid-gap));
}
.frame-14,
.width-14 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 14 - var(--grid-gap));
}
.frame-15,
.width-15 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 15 - var(--grid-gap));
}
.frame-16,
.width-16 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 16 - var(--grid-gap));
}
.frame-17,
.width-17 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 17 - var(--grid-gap));
}
.frame-18,
.width-18 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 18 - var(--grid-gap));
}
.frame-19,
.width-19 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 19 - var(--grid-gap));
}
.frame-20,
.width-20 {
    width: 100%;
    max-width: calc((var(--grid-col) + var(--grid-gap)) * 20 - var(--grid-gap));
}

.padded {
    padding-inline: var(--side-padding);
}

/* Block-Sections: Grundabstand + data-bg-Farbsystem */
.block {
    padding-block: var(--block-spacing);

    &[data-bg="none"] {
        padding-block: 0;
    }

    &.seamless {
        padding-top: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
}

.block:not([data-bg]) {
    background-color: transparent;
}

.block[data-bg="white"] {
    background-color: var(--white);
    color: var(--black);
}

.block[data-bg="grey"] {
    background-color: var(--grey);
    color: var(--black);
}

.block[data-bg="black"] {
    background-color: var(--black);
    color: var(--white);
}

.block[data-bg="primary"] {
    background-color: var(--primary-color);
    color: var(--white);
}

/* Gleicher Hintergrund wie vorige Section → kein Abstand dazwischen */
.block[data-bg="white"] + .block[data-bg="white"],
.block[data-bg="grey"] + .block[data-bg="grey"],
.block[data-bg="black"] + .block[data-bg="black"],
.block[data-bg="primary"] + .block[data-bg="primary"],
.block:not([data-bg]) + .block:not([data-bg]) {
    padding-top: 0;
}

/* data-bg auf Sub-Komponenten (z. B. .caption) — nur Farbe, kein Spacing */
[data-bg="white"] {
    background-color: var(--white);
    color: var(--black);
}

[data-bg="grey"] {
    background-color: var(--grey);
    color: var(--black);
}

[data-bg="black"] {
    background-color: var(--black);
    color: var(--white);
}

[data-bg="primary"] {
    background-color: var(--primary-color);
    color: var(--white);
}

[data-bg="light"] {
    background-color: #f2f2fa;
}

.roof {
    font-family: var(--sans);
    font-weight: 700;
    font-size: 14px;
    line-height: 22px;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.intro-img {
    width: 300px;
    height: 300px;
    overflow: hidden;
    border-radius: 50%;
    transform: translate(var(--parallax-x, 0px), var(--parallax-y, 0px));
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 56px;
}
.intro-img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}
@media screen and (min-width: 768px) {
    .intro-txt {
        position: relative;
        padding-right: var(--w2);
        z-index: 1;
    }
    .intro-img {
        position: absolute;
        right: 0;
        top: 50px;
        margin-left: 0;
        margin-right: 0;
        margin-bottom: auto;
        transform: translate(var(--parallax-x, 0px), calc(-50% + var(--parallax-y, 0px)));
    }
}

/*
==========
= HEADER =
==========
 */

/*Header stuff (Navigation, Logo etc.)*/

.site-header {
    position: fixed;
    transition: all 0.2s ease-out;
    top: 30px;
    left: 0;
    right: 0;
    z-index: 20;

    padding-inline: var(--side-padding);
    background-color: transparent;
    color: var(--black);
    padding-top: 10px;
    padding-bottom: 10px;
}
@media screen and (min-width: 768px) {
    .site-header {
        position: fixed;
        transition: all 0.2s ease-out;
        top: 30px;
        left: 0;
        right: 0;
        z-index: 20;

        padding-inline: var(--side-padding);
        background-color: transparent;
        color: var(--black);
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .site-header .frame {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
}
.scrolled_a_bit .site-header {
    top: 0;
    background-color: #f2f2fa;
}
.site-header-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    width: 270px;
}
@media screen and (min-width: 768px) {
    .site-header-logo {
        width: 330px;
    }
}
.site-header-icon {
    flex-shrink: 0;
}

.site-header-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    font-size: calc(14 / var(--rootfactor) * 1rem);
}

.site-header-logo-line--strong {
    font-weight: 700;
}

/* Animate Menu Button */

@-webkit-keyframes menutop {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@keyframes menutop {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(45deg);
    }
}

@-webkit-keyframes menubottom {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}

@keyframes menubottom {
    0% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-45deg);
    }
}

@-webkit-keyframes menutopstart {
    0% {
        transform: rotate(45deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes menutopstart {
    0% {
        transform: rotate(45deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes menubottomstart {
    0% {
        transform: rotate(-45deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

@keyframes menubottomstart {
    0% {
        transform: rotate(-45deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.menu-button {
    z-index: 26;
    display: block;
    position: absolute;
    top: 15px;
    right: 0;
    width: 44px;
    height: 44px;
    border: none;
    background-color: transparent !important;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 24px 16px;
}

@media screen and (min-width: 1200px) {
    .menu-button,
    .menu-button:hover {
        display: none;
    }
}
.flex-end {
    display: flex;
    justify-content: flex-end;
}
.menu-button:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.nav-line {
    width: 32px;
    height: 2px;
    background-color: #000;
    left: 0;
    right: 0;
    margin: 0 auto;
    transform-origin: center center;
    transition: all 0.5s ease-in-out;
}
.anchor {
    position: absolute;
    top: 0;
}
@media screen and (min-width: 768px) {
    .anchor {
        position: absolute;
        top: 0;
    }
}
.line-top {
    position: absolute;
    top: 10px;
    -webkit-animation: menutopstart 0.5s forwards;
    animation: menutopstart 0.5s forwards;
}

.nav_is_open .line-top {
    top: calc(50% - 1px);
    -webkit-animation: menutop 0.5s forwards;
    animation: menutop 0.5s forwards;
}

.line-center {
    position: absolute;
    top: calc(50% - 1px);
    transition: opacity 0.2s ease-in-out 0.2s;
}

.nav_is_open .line-center {
    opacity: 0;
}

.line-bottom {
    position: absolute;
    bottom: 10px;
    -webkit-animation: menubottomstart 0.5s forwards;
    animation: menubottomstart 0.5s forwards;
}

.nav_is_open .line-bottom {
    bottom: calc(50% - 1px);
    -webkit-animation: menubottom 0.5s forwards;
    animation: menubottom 0.5s forwards;
}

@media (prefers-reduced-motion: reduce) {
    .nav-line {
        transition: none;
    }

    .line-top,
    .nav_is_open .line-top,
    .line-bottom,
    .nav_is_open .line-bottom {
        -webkit-animation: none;
        animation: none;
    }

    .line-center {
        transition: none;
    }
}

/* layout/footer.css */

.site-footer {
    padding-block: var(--block-spacing);
    padding-inline: var(--side-padding);
    background-color: #f2f2fa;
    color: var(--black);
}
@media screen and (min-width: 768px) {
    .footer-content {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
    }
}
.site-footer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: calc(14 / var(--rootfactor) * 1rem);
}
.site-footer-meta p:last-child {
    margin-bottom: 0;
}
.footer-nav {
    margin-top: 16px;
}
.footer-nav-ul {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 24px;
}
.footer-nav li {
    margin-bottom: 0 !important;
}
.footer-nav a {
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 0.03em;
}
.main-nav-container {
    height: 0;
    z-index: 25;
    visibility: hidden;
    opacity: 0;
    overflow: hidden;
    background-color: var(--white);
    color: var(--black);
    transition: opacity 0.25s ease-in-out;
}

.nav_is_open .main-nav-container {
    position: fixed;
    visibility: visible;
    height: 100vh;
    height: 100dvh;
    opacity: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

@media screen and (min-width: 1200px) {
    .main-nav-container {
        height: auto;
        max-height: none;
        visibility: visible;
        opacity: 1;
        overflow: visible;
        background-color: transparent;
    }
}

.main-nav-container > .main-nav {
    padding: 0;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

@media screen and (min-width: 1200px) {
    .main-nav-container > .main-nav {
        display: flex;
        align-items: center;
        gap: 24px;
        padding: 0;
        position: relative;
        top: auto;
        transform: none;
    }
}

.main-nav-ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

@media screen and (min-width: 1200px) {
    .main-nav-ul {
        flex-direction: row;
        gap: 24px;
    }
}
.main-nav li {
    margin-bottom: 0;
}
.main-nav a {
    display: block;
    text-align: center;
    padding: 0;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 16px;
    line-height: 1;
    letter-spacing: 0.03em;
    padding-bottom: 4px;
    margin-bottom: 10px;
    font-weight: 600;
}
@media screen and (min-width: 768px) {
    .main-nav a {
        font-size: 14px;
    }
}
.main-nav a.is-current {
    font-weight: 700;
}
@media screen and (min-width: 768px) {
    .main-nav a.is-current {
        border-bottom: 2px solid;
    }
}
.main-nav-contact {
    display: block;
    text-align: center;
    padding: 10px;
}

@media screen and (min-width: 1200px) {
    .main-nav-contact {
        border-top: none;
        padding-left: 24px;
    }
    a.main-nav-contact:before {
        content: "|";
        padding-right: 24px;
        font-weight: 700;
    }
}
.layout-intro h1 {
    margin-bottom: 0;
}
/* components/hero.css */
.section-intro {
    padding-top: 165px;
    padding-bottom: 45px;
}
@media screen and (min-width: 768px) {
    .section-intro {
        padding-top: 348px;
        padding-bottom: 64px;
    }
}
.hero {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.hero-title {
    font-size: calc(32 / var(--rootfactor) * 1rem);
    line-height: 1.2;
}

.hero-text {
    font-size: calc(18 / var(--rootfactor) * 1rem);
    max-width: 60ch;
}

.hero-figure {
    margin: 0;
}

.hero-figure img {
    width: 100%;
    height: auto;
}

@media (min-width: 768px) {
    .hero-title {
        font-size: calc(48 / var(--rootfactor) * 1rem);
    }
}

section {
    padding-top: 80px;
    padding-bottom: 80px;
}
@media screen and (min-width: 768px) {
    section {
        padding-top: 104px;
        padding-bottom: 104px;
    }
}
/* components/accordeon.css */

.accordeon {
    display: flex;
    flex-direction: column;
}
.accordeon-heading {
    margin-bottom: 0 !important;
}
.accordeon-item {
    border-bottom: 1px solid currentColor;
}
.accordeon-trigger:hover {
    background-color: #f2f2fa;
    color: #000;
}
.accordeon-heading {
    font-family: var(--sans);
    font-size: inherit;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.8;
    text-transform: uppercase;
}

.accordeon-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: 100%;
    padding: 20px 0;
    background: none;
    border: 0;
    font: inherit;
    color: inherit;
    text-align: left;
    cursor: pointer;
}

.accordeon-icon {
    position: relative;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
    right: 3px;
}

.accordeon-icon::before,
.accordeon-icon::after {
    content: "";
    position: absolute;
    background-color: currentColor;
}

.accordeon-icon::before {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
}

.accordeon-icon::after {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
}

.accordeon-content {
    display: grid;
    grid-template-rows: 0fr;
    transition:
        grid-template-rows 0.3s ease,
        -ms-grid-rows 0.3s ease;
}

.accordeon-content-inner {
    min-height: 0;
    overflow: hidden;
}
.accordeon-content-inner p:last-child {
    margin-bottom: 0;
}
.accordeon-item.is-open .accordeon-icon {
    transform: rotate(45deg);
}

.accordeon-item.is-open .accordeon-content {
    grid-template-rows: 1fr;
}

.accordeon-item.is-open .accordeon-content-inner {
    padding-bottom: 20px;
}

@media (prefers-reduced-motion: reduce) {
    .accordeon-icon,
    .accordeon-content {
        transition: none;
    }
}
.section-beratung {
    padding-top: 0;
    margin-bottom: 80px;
}
@media screen and (min-width: 768px) {
    .section-beratung {
        padding-top: 0;
        margin-bottom: 104px;
    }
}
.beratung-intro {
    padding-top: 80px;
    padding-bottom: 56px;
}
@media screen and (min-width: 768px) {
    .beratung-intro {
        padding-top: 94px;
        padding-bottom: 70px;
    }
}
.beratung-intro p:last-child {
    margin-bottom: 0;
}
.beratung-img-group .img-item {
    display: none;
    margin-bottom: 64px;
}

.beratung-img-group .img-item:first-child {
    display: block;
}

@media screen and (min-width: 768px) {
    .beratung-img-group {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--grid-gap);
    }
    .beratung-img-group .img-item {
        display: block;
        flex: 0 0 (calc(50% - var(--grid-gap) / 2));
    }
}

@media screen and (min-width: 768px) {
    .leistungen-jump-group {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--grid-gap);
    }
}

.leistungen-jump-item {
    display: block;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.8;
    text-transform: uppercase;
    text-decoration: none;
    padding-top: 24px;
    border-top: 1px solid #000;
    margin-bottom: 24px;
}

@media screen and (min-width: 768px) {
    .leistungen-jump-item {
        flex: 0 0 calc(50% - var(--grid-gap) / 2);
    }
}
@media screen and (min-width: 1200px) {
    .leistungen-jump-item {
        flex: 0 0 calc(25% - var(--grid-gap) * 3 / 4);
    }
}

.icn-arrow {
    margin-top: 64px;
}

.leistungen-jump-item:hover .icn-arrow {
    -webkit-animation: jump-arrow-bounce 0.6s ease-in-out 2;
    animation: jump-arrow-bounce 0.6s ease-in-out 2;
}

@-webkit-keyframes jump-arrow-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@keyframes jump-arrow-bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .leistungen-jump-item:hover .icn-arrow {
        -webkit-animation: none;
        animation: none;
    }
}

/* Kanzlei */

.section-kanzlei {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media screen and (min-width: 768px) {
    .section-kanzlei {
        padding-top: 104px;
        padding-bottom: 104px;
    }
}
.textoffset-txt {
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
}

@media screen and (min-width: 768px) {
    .three-cols {
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--grid-gap);
    }
}

.three-cols .col-item {
    font-weight: 400;
    font-size: 18px;
    line-height: 1.8;
    text-decoration: none;
    padding-top: 24px;
    border-top: 1px solid #000;
}

@media screen and (min-width: 768px) {
    .three-cols .col-item {
        flex: 0 0 calc(50% - var(--grid-gap) / 2);
    }
}
@media screen and (min-width: 1200px) {
    .three-cols .col-item {
        flex: 0 0 calc(33.3% - var(--grid-gap) * 2 / 3);
    }
}
.col-item h4 {
    font-size: calc(24 / var(--rootfactor) * 1rem);
    line-height: 32px;
    font-weight: 300;
}

@media screen and (min-width: 768px) {
    .hide-dt {
        display: none;
    }
}