/* ============================================================
   MALTE MACHT'S MÖGLICH — Design System CSS
   Version 2.0 — vollständig
   
   Inhalt:
   01. Base
   02. Color Tokens
   03. Typography Tokens
   04. Spacing Tokens
   05. Breakpoints & Layout
   06. Base Element Styles
   07. Typography Utility Classes
   08. Color Utility Classes
   09. Layout Utilities
   10. Divider Atoms
   11. Kicker Atom
   12. Tag Atoms
   13. Link Atoms
   14. Button Atoms
   15. Scroll Indicator
   16. Form Atoms (Input, Textarea, Label, Error)
   17. Hamburger Menu
   18. Opacity & Transition Utilities
   ============================================================ */


/* ------------------------------------------------------------
   01. BASE
   ------------------------------------------------------------ */

html {
    font-size: 62.5%; /* 1rem = 10px */
    box-sizing: border-box;
    scroll-behavior: smooth;
}

*, *::before, *::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}


/* ------------------------------------------------------------
   02. COLOR TOKENS
   ------------------------------------------------------------ */

:root {
    --ink:          #141410;
    --paper:        #F2EDE4;
    --paper-dark:   #E8E2D8;
    --accent:       #8B6854;
    --accent-light: #C8997A;
    --muted:        #7A7264;
    --white:        #FFFFFF;
    --rule:         #D8D2C8;
    --forest:       #1E3A2F;
    --error:        #C0392B;
    --error-light:  #E85D4A;
}


/* ------------------------------------------------------------
   03. TYPOGRAPHY TOKENS

   Serif Desktop:  Display 61/110 · H1 45/115 · H2 32/120 · H3 24/100 · Pullquote 24/140 · Logo 17/100
   Serif Mobile:   Display 38/120 · H1 30/125 · H2 24/130 · H3 20/130 · Pullquote 20/145 · Logo 17/100
   Sans:           identisch auf beiden Viewports
   ------------------------------------------------------------ */

:root {
    --font-serif: 'Cormorant Garamond', Georgia, serif;
    --font-sans:  'Jost', system-ui, sans-serif;

    /* Serif Desktop */
    --fs-display:   6.1rem;
    --fs-h1:        4.5rem;
    --fs-h2:        3.2rem;
    --fs-h3:        2.4rem;
    --fs-pullquote: 2.4rem;
    --fs-logo:      1.7rem;

    --lh-display:   1.10;
    --lh-h1:        1.15;
    --lh-h2:        1.20;
    --lh-h3:        1.00;
    --lh-pullquote: 1.40;
    --lh-logo:      1.00;

    /* Serif Mobile */
    --fs-display-m:   3.8rem;
    --fs-h1-m:        3.0rem;
    --fs-h2-m:        2.4rem;
    --fs-h3-m:        2.0rem;
    --fs-pullquote-m: 2.0rem;

    --lh-display-m:   1.20;
    --lh-h1-m:        1.25;
    --lh-h2-m:        1.30;
    --lh-h3-m:        1.30;
    --lh-pullquote-m: 1.45;

    /* Sans (identisch) */
    --fs-body:   1.5rem;
    --fs-body-s: 1.3rem;
    --fs-nav:    1.5rem;
    --fs-label:  1.0rem;
    --fs-button: 1.0rem;
    --fs-price:  1.0rem;

    --lh-body:   1.60;
    --lh-body-s: 1.50;
    --lh-nav:    1.00;
    --lh-label:  1.40;
    --lh-button: 1.00;
    --lh-price:  1.30;
}


/* ------------------------------------------------------------
   04. SPACING TOKENS
   4px-Raster · sp-N = Figma-Token-Name
   ------------------------------------------------------------ */

:root {
    --sp-1:  0.4rem;  /*  4px */
    --sp-2:  0.8rem;  /*  8px */
    --sp-3:  1.2rem;  /* 12px */
    --sp-4:  1.6rem;  /* 16px */
    --sp-5:  2.4rem;  /* 24px */
    --sp-6:  3.2rem;  /* 32px */
    --sp-8:  4.8rem;  /* 48px */
    --sp-10: 6.4rem;  /* 64px */
    --sp-12: 8.0rem;  /* 80px */
}


/* ------------------------------------------------------------
   05. BREAKPOINTS & LAYOUT TOKENS

   Mobile:  < 768px    · 24px Seitenpadding
   Tablet:  768–1099px · 48px Seitenpadding
   Desktop: ≥ 1100px   · Container max 1100px, kein Padding
   Wide:    ≥ 1440px   · Figma-Canvas-Breite

   @media (min-width: 768px)  { }   ab Tablet
   @media (min-width: 1100px) { }   ab Desktop
   @media (min-width: 1440px) { }   ab Wide
   ------------------------------------------------------------ */

:root {
    --max-width:    110rem;  /* 1100px */
    --pad-mobile:   2.4rem;  /*  24px  */
    --pad-tablet:   4.8rem;  /*  48px  */
}


/* ------------------------------------------------------------
   06. BASE ELEMENT STYLES
   ------------------------------------------------------------ */

body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--ink);
    background-color: var(--paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 400;
}

/* Mobile-first Basisgrössen */
h1 { font-size: var(--fs-h1-m); line-height: var(--lh-h1-m); }
h2 { font-size: var(--fs-h2-m); line-height: var(--lh-h2-m); }
h3 { font-size: var(--fs-h3-m); line-height: var(--lh-h3-m); }

@media (min-width: 1100px) {
    h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
    h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
    h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}

p {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
}

a    { color: inherit; text-decoration: none; }
img  { max-width: 100%; display: block; }
ul, ol { list-style: none; }
blockquote { margin: 0; padding: 0; }


/* ------------------------------------------------------------
   07. TYPOGRAPHY UTILITY CLASSES
   ------------------------------------------------------------ */

.t-display {
    font-family: var(--font-serif);
    font-size: var(--fs-display-m);
    font-weight: 400;
    line-height: var(--lh-display-m);
    letter-spacing: 0;
}
@media (min-width: 1100px) {
    .t-display { font-size: var(--fs-display); line-height: var(--lh-display); }
}

.t-h1 {
    font-family: var(--font-serif);
    font-size: var(--fs-h1-m);
    font-weight: 400;
    line-height: var(--lh-h1-m);
    letter-spacing: 0;
}
@media (min-width: 1100px) {
    .t-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); }
}

.t-h2 {
    font-family: var(--font-serif);
    font-size: var(--fs-h2-m);
    font-weight: 400;
    line-height: var(--lh-h2-m);
    letter-spacing: 0;
}
@media (min-width: 1100px) {
    .t-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
}

.t-h3 {
    font-family: var(--font-serif);
    font-size: var(--fs-h3-m);
    font-weight: 400;
    line-height: var(--lh-h3-m);
    letter-spacing: 0;
}
@media (min-width: 1100px) {
    .t-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
}

.t-pullquote {
    font-family: var(--font-serif);
    font-size: var(--fs-pullquote-m);
    font-weight: 400;
    font-style: italic;
    line-height: var(--lh-pullquote-m);
    letter-spacing: 0;
}
@media (min-width: 1100px) {
    .t-pullquote { font-size: var(--fs-pullquote); line-height: var(--lh-pullquote); }
}

.t-logo {
    font-family: var(--font-serif);
    font-size: var(--fs-logo);
    font-weight: 500;
    line-height: var(--lh-logo);
    letter-spacing: 0;
}

.t-body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
}

.t-body-s {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
}

.t-nav {
    font-family: var(--font-sans);
    font-size: var(--fs-nav);
    font-weight: 500;
    line-height: var(--lh-nav);
}

.t-label {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.t-button {
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: 500;
    line-height: var(--lh-button);
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.t-price {
    font-family: var(--font-sans);
    font-size: var(--fs-price);
    font-weight: 500;
    line-height: var(--lh-price);
}


/* ------------------------------------------------------------
   08. COLOR UTILITY CLASSES
   ------------------------------------------------------------ */

.bg-ink        { background-color: var(--ink); }
.bg-paper      { background-color: var(--paper); }
.bg-paper-dark { background-color: var(--paper-dark); }
.bg-forest     { background-color: var(--forest); }
.bg-white      { background-color: var(--white); }
.bg-accent     { background-color: var(--accent); }

.text-ink          { color: var(--ink); }
.text-paper        { color: var(--paper); }
.text-muted        { color: var(--muted); }
.text-accent       { color: var(--accent); }
.text-accent-light { color: var(--accent-light); }
.text-forest       { color: var(--forest); }
.text-white        { color: var(--white); }


/* ------------------------------------------------------------
   09. LAYOUT UTILITIES
   ------------------------------------------------------------ */

.container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pad-mobile);
    padding-right: var(--pad-mobile);
}
@media (min-width: 768px) {
    .container {
        padding-left: var(--pad-tablet);
        padding-right: var(--pad-tablet);
    }
}
@media (min-width: 1100px) {
    .container {
        max-width: var(--max-width);
        padding-left: 0;
        padding-right: 0;
    }
}

/* Section vertical padding */
.section     { padding-top: var(--sp-8);  padding-bottom: var(--sp-8);  }
.section--sm { padding-top: var(--sp-5);  padding-bottom: var(--sp-5);  }
.section--lg { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }

@media (min-width: 1100px) {
    .section     { padding-top: var(--sp-10); padding-bottom: var(--sp-10); }
    .section--sm { padding-top: var(--sp-8);  padding-bottom: var(--sp-8);  }
    .section--lg { padding-top: var(--sp-12); padding-bottom: var(--sp-12); }
}


/* ------------------------------------------------------------
   10. DIVIDER ATOMS
   ------------------------------------------------------------ */

/* Light — 1px rule (Standard) */
.divider {
    border: none;
    height: 1px;
    background-color: var(--rule);
    width: 100%;
}

/* Heavy — 2px, hell */
.divider--heavy {
    border: none;
    height: 2px;
    background-color: var(--ink);
    width: 100%;
}

/* Heavy — 2px, dunkel */
.divider--heavy-dark {
    border: none;
    height: 2px;
    background-color: var(--paper);
    width: 100%;
}

/* Light — 1px, dunkel */
.divider--light-dark {
    border: none;
    height: 1px;
    background-color: rgba(122, 114, 100, 0.4);
    width: 100%;
}

/* Accent — 40px breit, 2px, hell */
.divider--accent {
    border: none;
    height: 2px;
    width: 4.0rem;
    background-color: var(--accent);
}

/* Accent — 40px breit, 2px, dunkel */
.divider--accent-dark {
    border: none;
    height: 2px;
    width: 4.0rem;
    background-color: var(--accent-light);
}

/* Decorative — gradient, hell */
.divider--decorative {
    border: none;
    height: 1px;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(139, 104, 84, 0) 0%,
        rgba(139, 104, 84, 0.4) 50%,
        rgba(139, 104, 84, 0) 100%
    );
}

/* Decorative — gradient, dunkel */
.divider--decorative-dark {
    border: none;
    height: 1px;
    width: 100%;
    background: linear-gradient(
        90deg,
        rgba(200, 153, 122, 0) 0%,
        rgba(200, 153, 122, 0.4) 50%,
        rgba(200, 153, 122, 0) 100%
    );
}


/* ------------------------------------------------------------
   11. KICKER ATOM
   ------------------------------------------------------------ */

.kicker {
    display: inline-flex;
    align-items: flex-start;
    padding: 0.4rem 0;
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}

.kicker--dark {
    color: var(--accent-light);
}

.kicker--hero {
    color: var(--accent-light); /* auf dark hero background */
}


/* ------------------------------------------------------------
   12. TAG ATOMS
   ------------------------------------------------------------ */

/* Filled — hell */
.tag {
    display: inline-flex;
    align-items: flex-start;
    padding: 0.4rem 1.2rem;
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background-color: var(--accent);
    color: var(--paper);
}

/* Filled — dunkel */
.tag--dark {
    background-color: var(--accent-light);
    color: var(--forest);
}

/* Outline — hell */
.tag--outline {
    background-color: transparent;
    border: 1px solid var(--rule);
    color: var(--muted);
}

/* Outline — dunkel */
.tag--outline-dark {
    background-color: transparent;
    border: 1px solid var(--accent-light);
    color: var(--paper);
}


/* ------------------------------------------------------------
   13. LINK ATOMS
   ------------------------------------------------------------ */

/* Intern — hell */
.link {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--accent);
    border-bottom: 0.6px solid var(--accent);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.link:hover {
    color: #7A5E4A;
    border-bottom-color: #7A5E4A;
}

/* Intern — dunkel (paper auf dunkelm Hintergrund) */
.link--dark {
    color: rgba(242, 237, 228, 0.6);
    border-bottom-color: rgba(242, 237, 228, 0.6);
}
.link--dark:hover {
    color: var(--paper);
    border-bottom-color: var(--paper);
}

/* Extern — hell (mit Pfeil-Icon via ::after) */
.link-extern {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--accent);
    border-bottom: 0.6px solid var(--accent);
    transition: color 0.2s ease, border-color 0.2s ease;
}
.link-extern:hover {
    color: #7A5E4A;
    border-bottom-color: #7A5E4A;
}

/* Extern — dunkel */
.link-extern--dark {
    color: rgba(242, 237, 228, 0.6);
    border-bottom-color: rgba(242, 237, 228, 0.6);
}
.link-extern--dark:hover {
    color: var(--paper);
    border-bottom-color: var(--paper);
}

/* Extern Icon (SVG inline oder ::after) */
.link-extern__icon {
    display: inline-block;
    width: 1.0rem;
    height: 1.0rem;
    flex-shrink: 0;
}


/* ------------------------------------------------------------
   14. BUTTON ATOMS
   Alle Buttons: padding 16px 32px · radius 2px · Button Textstil
   ------------------------------------------------------------ */

/* Basis-Reset */
.btn {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: 1.6rem 3.2rem;
    gap: 1.0rem;
    border-radius: 2px;
    border: none;
    font-family: var(--font-sans);
    font-size: var(--fs-button);
    font-weight: 500;
    line-height: var(--lh-button);
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
    white-space: nowrap;
}

/* ——— Filled / Hell ——— */
/* Heller Hintergrund: ink-farbener Button */
.btn--filled-hell {
    background-color: var(--ink);
    color: var(--paper);
}
.btn--filled-hell:hover  { background-color: var(--accent); }
.btn--filled-hell:active { background-color: #7A5E4A; }
.btn--filled-hell:disabled,
.btn--filled-hell.is-disabled {
    background-color: var(--ink);
    opacity: 0.4;
    cursor: not-allowed;
}

/* ——— Filled / Dunkel ——— */
/* Dunkler Hintergrund: accent-farbener Button */
.btn--filled {
    background-color: var(--accent);
    color: var(--white);
}
a.btn--filled,
a.btn--filled:link,
a.btn--filled:visited { color: var(--white); }
.btn--filled:hover,
a.btn--filled:hover         { background-color: var(--muted); color: var(--white); }
.btn--filled:active         { background-color: #6E675A; color: var(--white); }
.btn--filled:disabled,
.btn--filled.is-disabled {
    background-color: var(--accent);
    opacity: 0.4;
    cursor: not-allowed;
}

/* ——— Outline / Hell ——— */
.btn--outline-hell {
    background-color: transparent;
    border: 1px solid var(--ink);
    color: var(--ink);
}
a.btn--outline-hell,
a.btn--outline-hell:link,
a.btn--outline-hell:visited { color: var(--ink); }
.btn--outline-hell:hover,
a.btn--outline-hell:hover   { background-color: var(--ink); color: var(--paper); }
.btn--outline-hell:active   { background-color: #2A2A26; border-color: var(--ink); color: var(--paper); }
.btn--outline-hell:disabled,
.btn--outline-hell.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ——— Outline / Dunkel ——— */
.btn--outline {
    background-color: transparent;
    border: 1px solid var(--paper);
    color: var(--paper);
}
a.btn--outline,
a.btn--outline:link,
a.btn--outline:visited { color: var(--paper); }
.btn--outline:hover,
a.btn--outline:hover    { background-color: rgba(242, 237, 228, 0.1); color: var(--paper); }
.btn--outline:active    { background-color: rgba(242, 237, 228, 0.2); color: var(--paper); }
.btn--outline:disabled,
.btn--outline.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* ——— Text Link / Hell ——— */
.btn--text-hell {
    background-color: transparent;
    border: none;
    padding: 0.8rem;
    color: var(--accent);
}
.btn--text-hell:hover { color: #7A5E4A; }

/* ——— Text Link / Dunkel ——— */
.btn--text {
    background-color: transparent;
    border: none;
    padding: 0.8rem;
    color: var(--paper);
}
.btn--text:hover { color: var(--paper-dark); }


/* ------------------------------------------------------------
   15. SCROLL INDICATOR
   Runder 32×32px Button mit Pfeil
   ------------------------------------------------------------ */

.scroll-indicator {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 3.2rem;
    height: 3.2rem;
    padding: 1.0rem;
    border-radius: 40px;
    border: 1px solid var(--ink);
    font-family: var(--font-sans);
    font-size: var(--fs-nav);
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.scroll-indicator:hover  { border-color: var(--accent); color: var(--accent); }
.scroll-indicator:active { border-color: #7A5E4A; color: #7A5E4A; }
.scroll-indicator.is-disabled { opacity: 0.4; cursor: not-allowed; }

/* Dunkel-Variante */
.scroll-indicator--dark {
    border-color: var(--paper);
    color: var(--paper);
}
.scroll-indicator--dark:hover  { border-color: var(--paper-dark); color: var(--paper-dark); }
.scroll-indicator--dark:active { background-color: rgba(242, 237, 228, 0.2); border-color: var(--paper); }
.scroll-indicator--dark.is-disabled { opacity: 0.4; cursor: not-allowed; }


/* ------------------------------------------------------------
   16. FORM ATOMS
   ------------------------------------------------------------ */

/* —— Form Label —— */
.form-label {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: var(--sp-2);
}
.form-label--dark { color: var(--paper); }

/* —— Error Text —— */
.form-error {
    display: block;
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--error);
    margin-top: var(--sp-1);
}
.form-error--dark { color: var(--error-light); }

/* —— Input (Text) — Basis —— */
.input {
    display: flex;
    align-items: flex-start;
    width: 100%;
    padding: 1.6rem 1.2rem;
    border-radius: 2px;
    border: 1px solid var(--rule);
    background-color: var(--white);
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--muted);       /* placeholder */
    outline: none;
    transition: border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    -webkit-appearance: none;
}

/* Filled — hat Wert */
.input:not(:placeholder-shown) {
    color: var(--ink);
    border-color: var(--rule);
}

/* Focus / Activated */
.input:focus {
    border: 1.5px solid var(--accent);
    box-shadow: 0 0 4px 3px rgba(139, 104, 84, 0.25);
    color: var(--ink);
}

/* Error */
.input.is-error {
    border: 1.5px solid var(--error);
    box-shadow: 0 0 4px 3px rgba(192, 57, 43, 0.25);
    color: var(--error);
}

/* Disabled */
.input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* —— Input — Dunkel-Variante —— */
.input--dark {
    background-color: var(--forest);
    border-color: var(--muted);
    color: var(--muted);
}
.input--dark:not(:placeholder-shown) {
    color: var(--white);
    border-color: var(--muted);
}
.input--dark:focus {
    border: 1.5px solid var(--accent-light);
    box-shadow: 0 0 4px 3px rgba(200, 153, 122, 0.25);
    color: var(--paper);
}
.input--dark.is-error {
    border: 1.5px solid var(--error-light);
    box-shadow: 0 0 4px 3px rgba(192, 57, 43, 0.25);
    color: var(--error-light);
}
.input--dark:disabled {
    background-color: var(--ink);
    opacity: 0.6;
    cursor: not-allowed;
}

/* —— Textarea —— */
.textarea {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    min-height: 12.0rem;  /* 120px */
    padding: 1.6rem 1.2rem;
    border-radius: 2px;
    border: 1px solid var(--rule);
    background-color: var(--white);
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--muted);
    outline: none;
    resize: vertical;
    transition: border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
    -webkit-appearance: none;
}
.textarea:not(:placeholder-shown) { color: var(--ink); }
.textarea:focus {
    border: 1.5px solid var(--accent);
    box-shadow: 0 0 4px 3px rgba(139, 104, 84, 0.25);
    color: var(--ink);
}
.textarea.is-error {
    border: 1.5px solid var(--error);
    box-shadow: 0 0 4px 3px rgba(192, 57, 43, 0.25);
    color: var(--error);
}
.textarea:disabled { opacity: 0.6; cursor: not-allowed; }

/* Textarea — Dunkel */
.textarea--dark {
    background-color: var(--forest);
    border-color: var(--muted);
    color: var(--muted);
}
.textarea--dark:not(:placeholder-shown) { color: var(--white); }
.textarea--dark:focus {
    border: 1.5px solid var(--accent-light);
    box-shadow: 0 0 4px 3px rgba(200, 153, 122, 0.25);
    color: var(--paper);
}
.textarea--dark.is-error {
    border: 1.5px solid var(--error-light);
    box-shadow: 0 0 4px 3px rgba(192, 57, 43, 0.25);
    color: var(--error-light);
}
.textarea--dark:disabled {
    background-color: var(--ink);
    opacity: 0.6;
    cursor: not-allowed;
}

/* —— Form Group (Label + Input + Error) —— */
.form-group {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    width: 100%;
}


/* ------------------------------------------------------------
   17. HAMBURGER MENU (Mobile Navbar)
   ------------------------------------------------------------ */

.hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 2.4rem;
    height: 2.4rem;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
}

.hamburger__line {
    display: block;
    width: 2.4rem;
    height: 0.2rem;
    background-color: var(--paper);
    border-radius: 5px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Open State */
.hamburger.is-open .hamburger__line:nth-child(1) {
    transform: translateY(0.7rem) rotate(-45deg);
}
.hamburger.is-open .hamburger__line:nth-child(2) {
    opacity: 0;
}
.hamburger.is-open .hamburger__line:nth-child(3) {
    transform: translateY(-0.7rem) rotate(45deg);
}


/* ------------------------------------------------------------
   18. OPACITY & TRANSITION UTILITIES
   ------------------------------------------------------------ */

.opacity-35  { opacity: 0.35; }
.opacity-55  { opacity: 0.55; }
.opacity-60  { opacity: 0.60; }

.transition  { transition: all 0.2s ease; }
.transition-slow { transition: all 0.35s ease; }

/* Nav item default opacity (inactive state) */
.nav-item         { opacity: 0.55; transition: opacity 0.2s ease; }
.nav-item:hover,
.nav-item.is-active { opacity: 1; }

/* Active nav item: accent underline */
.nav-item.is-active {
    border-bottom: 1px solid var(--accent);
}

/* ============================================================
   O1 NAVBAR
   Zum Einfügen am Ende der design-system.css
   ============================================================ */

/* ------------------------------------------------------------
   Navbar — Basis
   ------------------------------------------------------------ */

.navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    width: 100%;
    background-color: var(--forest);
}

/* ------------------------------------------------------------
   Navbar Container
   Desktop: height 90px · padding 48px · flex row
   Mobile:  height 56px · padding 0 24px
   ------------------------------------------------------------ */

.navbar__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.2rem;
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    height: 5.6rem;           /* Mobile: 56px */
    padding: 0 var(--pad-mobile);
}

@media (min-width: 1100px) {
    .navbar__container {
        height: 9.0rem;       /* Desktop: 90px */
        padding: 0 var(--sp-8);  /* 48px */
    }
}

/* ------------------------------------------------------------
   Logo
   ------------------------------------------------------------ */

.navbar__logo {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    text-decoration: none;
    padding-right: var(--sp-8);   /* 48px — Abstand zur Nav */
}

.navbar__logo-name {
    font-family: var(--font-serif);
    font-size: var(--fs-logo);    /* 17px */
    font-weight: 500;
    line-height: var(--lh-logo);
    color: var(--paper);
    white-space: nowrap;
}

.navbar__logo-claim {
    font-family: var(--font-serif);
    font-size: var(--fs-logo);
    font-weight: 500;
    font-style: italic;
    line-height: var(--lh-logo);
    color: var(--accent-light);
    white-space: nowrap;
}

/* ------------------------------------------------------------
   Desktop Navigation — versteckt auf Mobile
   ------------------------------------------------------------ */

.navbar__nav {
    display: none;
}

@media (min-width: 1100px) {
    .navbar__nav {
        display: flex;
        flex: 1;
        justify-content: flex-end;
        align-items: center;
        padding: 0 var(--sp-6);  /* 32px */
    }
}

.navbar__list {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-8);   /* 48px */
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Nav Item */
.navbar__item {
    display: flex;
    align-items: flex-start;
    padding: 0.8rem 0;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.navbar__item:hover,
.navbar__item.is-active {
    opacity: 1;
}

.navbar__item.is-active {
    border-bottom: 1px solid var(--accent);
}

/* Nav Link */
.navbar__link {
    font-family: var(--font-sans);
    font-size: var(--fs-label);    /* 10px */
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    text-decoration: none;
    white-space: nowrap;
}

/* ------------------------------------------------------------
   CTA Button — Desktop
   ------------------------------------------------------------ */

.navbar__cta {
    display: none;
    flex-shrink: 0;
}

@media (min-width: 1100px) {
    .navbar__cta {
        display: inline-flex;
    }
}

/* ------------------------------------------------------------
   Hamburger — Mobile only
   ------------------------------------------------------------ */

.navbar__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    width: 2.4rem;
    height: 2.4rem;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
}

@media (min-width: 1100px) {
    .navbar__hamburger {
        display: none;
    }
}

.navbar__hamburger .hamburger__line {
    display: block;
    width: 2.4rem;
    height: 0.2rem;
    background-color: var(--paper);
    border-radius: 5px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Hamburger Open State */
.navbar__hamburger.is-open .hamburger__line:nth-child(1) {
    transform: translateY(0.7rem) rotate(-45deg);
}
.navbar__hamburger.is-open .hamburger__line:nth-child(2) {
    opacity: 0;
}
.navbar__hamburger.is-open .hamburger__line:nth-child(3) {
    transform: translateY(-0.7rem) rotate(45deg);
}

/* ------------------------------------------------------------
   Mobile Menu
   ------------------------------------------------------------ */

.navbar__mobile-menu {
    display: none;
    background-color: var(--forest);
    padding: var(--sp-8) var(--pad-mobile);
    border-top: 1px solid rgba(242, 237, 228, 0.08);
}

.navbar__mobile-menu.is-open {
    display: block;
}

@media (min-width: 1100px) {
    .navbar__mobile-menu {
        display: none !important;
    }
}

.navbar__mobile-list {
    list-style: none;
    margin: 0 0 var(--sp-8) 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);  /* 24px */
}

.navbar__mobile-link {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.navbar__mobile-link:hover {
    opacity: 1;
}

.navbar__mobile-cta {
    width: 100%;
    justify-content: center;
}

/* Body: scroll sperren wenn Menü offen */
body.menu-open {
    overflow: hidden;
}

/* Accessibility Skip Link */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
}
.skip-link:focus {
    position: fixed;
    top: var(--sp-2);
    left: var(--sp-2);
    width: auto;
    height: auto;
    padding: var(--sp-2) var(--sp-4);
    background: var(--accent);
    color: var(--white);
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    z-index: 999;
    border-radius: 2px;
}
/* ============================================================
   O11 FOOTER
   Zum Einfügen am Ende der design-system.css
   ============================================================ */

/* ------------------------------------------------------------
   Footer Basis
   ------------------------------------------------------------ */

.footer {
    background-color: var(--ink);
    width: 100%;
}

.footer__container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    width: 100%;
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--sp-8) var(--pad-mobile) var(--sp-6);
}

@media (min-width: 768px) {
    .footer__container {
        padding-left: var(--pad-tablet);
        padding-right: var(--pad-tablet);
    }
}

@media (min-width: 1100px) {
    .footer__container {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--sp-8);
        padding: var(--sp-10) 0 var(--sp-6);
    }
}

/* ------------------------------------------------------------
   Spalte 1: Marken-Info
   ------------------------------------------------------------ */

.footer__brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-4);
    flex: 1;
}

.footer__logo {
    font-family: var(--font-serif);
    font-size: var(--fs-logo);
    font-weight: 500;
    line-height: var(--lh-logo);
    color: var(--paper);
    text-decoration: none;
}
a.footer__logo,
a.footer__logo:link,
a.footer__logo:visited { color: var(--paper); }

.footer__tagline {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: rgba(242, 237, 228, 0.6);
}

.footer__divider {
    border: none;
    height: 1px;
    background-color: rgba(122, 114, 100, 0.4);
    width: 100%;
    margin: 0;
}

.footer__linkedin {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

/* ------------------------------------------------------------
   Spalten 2–4: Link-Spalten
   ------------------------------------------------------------ */

/* Mobile: Leistungen + Unternehmen nebeneinander */
.footer__cols-group {
    display: flex;
    flex-direction: row;
    gap: var(--sp-5);
}

.footer__col {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
}

.footer__col-heading {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-light);
    margin-bottom: var(--sp-1);
}

/* Rechtliches: horizontal auf Mobile */
.footer__col--legal {
    flex-direction: column;
}

/* Rechtliches immer vertikal (Figma: gestapelt) */
.footer__col--legal .footer__col-list {
    flex-direction: column;
}

/* ------------------------------------------------------------
   WordPress Menu-Klassen — Footer
   wp_nav_menu() generiert <ul class="footer__col-list">
   mit <li class="menu-item"> und <a> darin
   ------------------------------------------------------------ */

.footer__col-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.footer__col-list .menu-item {
    display: flex;
}

.footer__col-list .menu-item a {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: rgba(242, 237, 228, 0.6);
    text-decoration: none;
    border-bottom: 0.6px solid rgba(242, 237, 228, 0.6);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.footer__col-list .menu-item a:hover {
    color: var(--paper);
    border-bottom-color: var(--paper);
}

/* ------------------------------------------------------------
   WordPress Menu-Klassen — Navbar
   wp_nav_menu() generiert <ul class="navbar__list">
   mit <li class="menu-item"> und aktiver Seite als
   .current-menu-item oder .current-page-item
   ------------------------------------------------------------ */

/* Desktop */
.navbar__list .menu-item {
    display: flex;
    align-items: flex-start;
    padding: 0.8rem 0;
    opacity: 0.55;
    transition: opacity 0.2s ease;
}

.navbar__list .menu-item:hover,
.navbar__list .current-menu-item,
.navbar__list .current-page-item,
.navbar__list .current-page-ancestor {
    opacity: 1;
}

.navbar__list .current-menu-item,
.navbar__list .current-page-item {
    border-bottom: 1px solid var(--accent);
}

.navbar__list .menu-item a {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    text-decoration: none;
    white-space: nowrap;
}

/* Mobile */
.navbar__mobile-list .menu-item {
    display: flex;
}

.navbar__mobile-list .menu-item a {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--paper);
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.navbar__mobile-list .menu-item a:hover,
.navbar__mobile-list .current-menu-item a,
.navbar__mobile-list .current-page-item a {
    opacity: 1;
}

/* ============================================================
   404 — Error Page
   Zum Einfügen am Ende der design-system.css
   ============================================================ */

.error-404 {
    background-color: var(--paper);
    min-height: calc(100vh - 9.0rem - 25.0rem); /* viewport - navbar - footer */
    display: flex;
    align-items: center;
    justify-content: center;
}

.error-404__container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-5);        /* 24px */
    width: 100%;
    max-width: 70.0rem;      /* 700px */
    padding: var(--sp-12) var(--pad-mobile);  /* Mobile: 80px 24px */
    text-align: center;
}


@media (min-width: 1100px) {
    .error-404__container {
        padding: 12.0rem 0;   /* 120px statt 80px */
    }
}

/* 404 Zahl */
.error-404__code {
    font-family: var(--font-serif);
    font-size: var(--fs-display-m);   /* Mobile: 38px */
    font-weight: 400;
    line-height: var(--lh-display-m);
    color: var(--accent);
}

@media (min-width: 1100px) {
    .error-404__code {
        font-size: var(--fs-display);  /* Desktop: 61px */
        line-height: var(--lh-display);
    }
}

/* Dekorativer Divider */
.error-404__divider {
    width: 100%;
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        rgba(139, 104, 84, 0) 0%,
        rgba(139, 104, 84, 0.4) 50%,
        rgba(139, 104, 84, 0) 100%
    );
    margin: 0;
}

/* Headline */
.error-404__heading {
    font-family: var(--font-serif);
    font-size: var(--fs-h3-m);    /* Mobile: 20px */
    font-weight: 400;
    line-height: var(--lh-h3-m);
    color: var(--ink);
}

@media (min-width: 1100px) {
    .error-404__heading {
        font-size: var(--fs-h3);   /* Desktop: 24px */
        line-height: var(--lh-h3);
    }
}

/* Subtext */
.error-404__body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--muted);
}

/* Button-Gruppe */
.error-404__actions {
    display: flex;
    flex-direction: column;   /* Mobile: gestapelt */
    align-items: stretch;
    gap: var(--sp-4);         /* 16px */
    width: 100%;
}

@media (min-width: 768px) {
    .error-404__actions {
        flex-direction: row;  /* Tablet+: nebeneinander */
        align-items: center;
        justify-content: center;
        width: auto;
    }
}

/* Buttons auf Mobile: volle Breite */
.error-404__actions .btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .error-404__actions .btn {
        width: auto;
    }
}
/* ============================================
   O2 — Hero
   ============================================ */
.o2-hero {
    background:
        radial-gradient(38.26% 96.26% at 80.8% 24.03%,
            rgba(139, 104, 84, 0.03) 0%,
            rgba(20, 20, 16, 0.15) 100%),
        var(--ink);
}
.o2-hero .container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}
.o2-hero__headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 120%;
    color: var(--paper);
    margin: 0;
}
.o2-hero__headline em {
    font-style: italic;
    color: var(--accent-light);
}
.o2-hero__body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 160%;
    color: rgba(242, 237, 228, 0.6);
    margin: 0;
}
.o2-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-top: var(--sp-4);
}
.o2-hero__actions .btn {
    width: 100%;
    justify-content: center;
}
.o2-hero__note {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 140%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 237, 228, 0.6);
}
@media (min-width: 1100px) {
    .o2-hero__headline {
        font-size: 61px;
        line-height: 110%;
    }
    .o2-hero__body {
        max-width: 520px;
    }
    .o2-hero__actions {
        flex-direction: row;
        align-items: center;
    }
    .o2-hero__actions .btn {
        width: auto;
    }
    .o2-hero__note {
        max-width: 520px;
    }
}
/* ============================================================
   STARTSEITE — Organism CSS
   Ans Ende der design-system.css anfügen
   ============================================================ */


/* ============================================================
   O2 — Hero
   ============================================================ */
.o2-hero {
    background:
        radial-gradient(38.26% 96.26% at 80.8% 24.03%,
            rgba(139, 104, 84, 0.03) 0%,
            rgba(20, 20, 16, 0.15) 100%),
        var(--ink);
    padding: var(--sp-8) 0;
}
.o2-hero .container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}
.o2-hero__headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 38px;
    line-height: 120%;
    color: var(--paper);
    margin: 0;
}
.o2-hero__headline em {
    font-style: italic;
    color: var(--accent-light);
}
.o2-hero__body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 160%;
    color: rgba(242, 237, 228, 0.6);
    margin: 0;
}
.o2-hero__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
    padding-top: var(--sp-4);
}
.o2-hero__actions .btn { width: 100%; justify-content: center; }
.o2-hero__note {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 140%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 237, 228, 0.6);
}
@media (min-width: 1100px) {
    .o2-hero { padding: var(--sp-12) 0; }
    .o2-hero__headline { font-size: 61px; line-height: 110%; }
    .o2-hero__body { max-width: 520px; }
    .o2-hero__actions { flex-direction: row; align-items: center; }
    .o2-hero__actions .btn { width: auto; }
    .o2-hero__note { max-width: 520px; }
}


/* ============================================================
   O19 — TextSection
   ============================================================ */
.o19-text {
    background: var(--paper);
    padding: var(--sp-8) 0;
}
.o19-text .container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}
.o19-text__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}
.o19-text__headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 125%;
    color: var(--ink);
    margin: 0;
}
.o19-text__intro {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 160%;
    color: var(--ink);
    margin: 0;
}
.o19-text__bild-text {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}
.o19-text__image-wrap {
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--paper-dark);
}
.o19-text__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.o19-text__body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 160%;
    color: var(--ink);
    margin: 0;
}
.o19-text__body p { margin: 0 0 var(--sp-3); }
.o19-text__body p:last-child { margin-bottom: 0; }
@media (min-width: 1100px) {
    .o19-text { padding: var(--sp-10) 0; }
    .o19-text__headline { font-size: 61px; line-height: 110%; }
    .o19-text__bild-text {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-8);
    }
    .o19-text__image-wrap {
        flex: 0 0 400px;
        width: 400px;
        height: 400px;
        aspect-ratio: unset;
    }
    .o19-text__text-col { flex: 1; }
}


/* ============================================================
   O3 — StatsBar
   ============================================================ */
.o3-stats {
    background: var(--forest);
    padding: var(--sp-6) 0;
}
.o3-stats .container { padding-top: 0; padding-bottom: 0; }
.o3-stats__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}
.o3-stats__sep {
    grid-column: 1 / -1;
    height: 1px;
    background: rgba(122, 114, 100, 0.4);
}
.o3-stats__item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding: var(--sp-5) var(--sp-5);
    gap: var(--sp-2);
}
.o3-stats__item:nth-child(odd) {
    border-right: 1px solid rgba(255, 255, 255, 0.08);
}
.o3-stats__number {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 125%;
    color: var(--paper);
    display: flex;
    align-items: flex-start;
    gap: var(--sp-1);
}
.o3-stats__plus {
    color: var(--accent-light);
}
.o3-stats__label {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 140%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 237, 228, 0.6);
}
@media (min-width: 1100px) {
    .o3-stats { padding: var(--sp-6) 0; }
    .o3-stats__grid { grid-template-columns: repeat(4, 1fr); }
    .o3-stats__sep { display: none; }
    .o3-stats__item {
        align-items: flex-start;
        padding: 0 var(--sp-6);           /* Figma: padding 0 32px – kein vertikales Padding */
        border-right: 1px solid rgba(255, 255, 255, 0.08);
    }
    .o3-stats__item:last-child { border-right: none !important; }
    /* nth-child(odd) entfernt – kollidierte mit last-child */
    .o3-stats__number { font-size: 45px; line-height: 115%; }
}


/* ============================================================
   O4 — Angebote
   ============================================================ */
.o4-angebote {
    background: var(--paper);
    padding: var(--sp-8) 0;
}
.o4-angebote__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    padding-bottom: var(--sp-8);
}
.o4-angebote__headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 125%;
    color: var(--ink);
    margin: 0;
}
.o4-angebote__sub {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
    color: var(--muted);
    margin: 0;
}
.o4-angebote__list { width: 100%; }
.o4-angebote__row {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--rule);
}
.o4-angebote__index {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 140%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
}
.o4-angebote__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    color: var(--ink);
    margin: 0 0 var(--sp-2);
}
.o4-angebote__desc {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
    color: var(--muted);
    margin: 0 0 var(--sp-3);
}
.o4-angebote__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
}
.o4-angebote__price-block {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding-top: var(--sp-3);
}
.o4-angebote__price {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 130%;
    color: var(--ink);
}
.o4-angebote__price-label {
    font-family: 'Jost', sans-serif;
    font-style: italic;
    font-weight: 500;
    font-size: 10px;
    line-height: 130%;
    color: var(--muted);
}
.o4-angebote__price-note {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
    color: var(--muted);
}
@media (min-width: 1100px) {
    .o4-angebote { padding: var(--sp-10) 0; }
    .o4-angebote__header {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: var(--sp-10);
    }
    .o4-angebote__headline { font-size: 45px; line-height: 115%; max-width: 520px; }
    .o4-angebote__sub { max-width: 320px; text-align: right; }
    .o4-angebote__row {
        flex-direction: row;
        align-items: center;
        gap: var(--sp-6);
        padding: var(--sp-6) var(--sp-6);
    }
    .o4-angebote__index { flex: 0 0 16px; align-self: flex-start; padding-top: var(--sp-2); }
    .o4-angebote__main { flex: 1; }
    .o4-angebote__title { font-size: 24px; }
    .o4-angebote__price-block {
        flex: 0 0 200px;
        align-items: flex-end;
        padding-top: 0;
    }
    .o4-angebote__price { font-size: 32px; line-height: 120%; }
    .o4-angebote__price-label { text-align: right; }
    .o4-angebote__price-note { text-align: right; }
}


/* ============================================================
   O5 — FeatureSection
   ============================================================ */
.o5-feature {
    background: var(--paper-dark);
    padding: var(--sp-8) 0;
}
.o5-feature__headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 125%;
    color: var(--ink);
    margin: 0 0 var(--sp-3);
}
.o5-feature__headline em {
    font-style: italic;
    color: var(--accent);
}
.o5-feature__body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 160%;
    color: var(--ink);
    margin: 0 0 var(--sp-5);
}
.o5-feature__features {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}
.o5-feature__item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-4);
}
.o5-feature__icon {
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    background: var(--rule);
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
	color: var(--accent);
}
.o5-feature__icon svg {
    width: 20px;
    height: 20px;
}
.o5-feature__item-title {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 160%;
    color: var(--ink);
    margin: 0 0 var(--sp-1);
}
.o5-feature__item-desc {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
    color: var(--muted);
    margin: 0;
}
.o5-feature__btn-wrap {
    padding-top: var(--sp-5);
}
@media (min-width: 1100px) {
    .o5-feature { padding: var(--sp-10) 0; }
    .o5-feature .container {
        display: grid;
        grid-template-columns: 1fr 371px;  /* Figma: 649px + 371px */
        gap: var(--sp-12);
        align-items: center;
    }
    .o5-feature__headline { font-size: 45px; line-height: 115%; }
    .o5-feature__right { width: 371px; }
}


/* ============================================================
   O6 — PullquoteBand
   ============================================================ */
.o6-pullquote {
    background: var(--forest);
    border-top: 2px solid var(--ink);
    border-bottom: 2px solid var(--accent);
    padding: var(--sp-8) 0;
}
.o6-pullquote .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
}
.o6-pullquote__quote {
    font-family: 'Cormorant Garamond', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 20px;
    line-height: 145%;
    color: var(--paper);
    text-align: center;         /* muss direkt am Element stehen, nicht nur am Container */
    margin: 0 auto;
    max-width: 700px;
    width: 100%;
}
.o6-pullquote__author {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
    color: rgba(242, 237, 228, 0.55);
    align-self: flex-end;
    max-width: 700px;
    width: 100%;
    text-align: right;
}
@media (min-width: 1100px) {
    .o6-pullquote {
        background: var(--paper);
        border-top: 2px solid var(--rule);
    }
    /* Höhere Spezifität: .o6-pullquote .o6-pullquote__quote verhindert WP-Override */
    .o6-pullquote .o6-pullquote__quote {
        font-size: 24px;
        line-height: 140%;
        color: var(--ink);
        text-align: center;
    }
    .o6-pullquote__author { display: none; }
}

/* ------------------------------------------------------------
   O6 Modifier — Helle Variante (background paper-dark)
   Figma: Background=Hell
   border-top: 2px ink · border-bottom: 2px accent
   Kein Author-Element, kein Dark/Light-Wechsel per Media-Query
   ------------------------------------------------------------ */
.o6-pullquote--hell {
    background: var(--paper-dark);           /* #E8E2D8 */
    border-top: 2px solid var(--ink);        /* #141410 */
    border-bottom: 2px solid var(--accent);  /* #8B6854 */
}

.o6-pullquote--hell .o6-pullquote__quote p {
    color: var(--ink);
    font-size: 24px;
    line-height: 140%;
    text-align: center;
}

/* Override des Desktop-Resets — hell bleibt auf allen Viewports gleich */
@media (min-width: 1100px) {
    .o6-pullquote--hell {
        background: var(--paper-dark);
        border-top: 2px solid var(--ink);
    }
    .o6-pullquote--hell .o6-pullquote__quote {
        color: var(--ink);
        font-size: 24px;
        line-height: 140%;
        text-align: center;
    }
}


/* ============================================================
   O7 — CorporateTeaser
   ============================================================ */
.o7-corporate {
    background: var(--ink);
    padding: var(--sp-8) 0;
}
.o7-corporate__headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 125%;
    color: var(--paper);
    margin: 0 0 var(--sp-5);
}
.o7-corporate__headline em {
    font-style: italic;
    color: var(--accent-light);
}
.o7-corporate__body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 160%;
    color: rgba(255,255,255,0.9);
    margin: 0 0 var(--sp-5);
}
.o7-corporate__tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}
.o7-corporate__features {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    margin-bottom: var(--sp-6);
}
.o7-corporate__feature {
    padding-left: var(--sp-5);
    border-left: 2px solid rgba(200, 153, 122, 0.3);
}
.o7-corporate__feature-title {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 160%;
    color: var(--paper);
    margin: 0 0 var(--sp-1);
}
.o7-corporate__feature-desc {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
    color: rgba(242, 237, 228, 0.6);
    margin: 0;
}
@media (min-width: 1100px) {
    .o7-corporate { padding: var(--sp-10) 0; }
    .o7-corporate .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-12);
        align-items: start;
    }
    .o7-corporate__headline { font-size: 45px; line-height: 115%; }
}


/* ============================================================
   O8 — AboutTeaser
   ============================================================ */
.o8-about {
    background: var(--paper-dark);
    padding: var(--sp-8) 0;
}
.o8-about .container {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}
.o8-about__image-wrap {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--rule);
}
.o8-about__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.o8-about__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}
.o8-about__headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 125%;
    color: var(--ink);
    margin: 0;
}
.o8-about__headline em {
    font-style: italic;
    color: var(--accent);
}
.o8-about__body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 160%;
    color: var(--ink);
    margin: 0;
}
.o8-about__qualifications {
    display: flex;
    flex-direction: column;
    margin: var(--sp-3) 0;
}
.o8-about__qual {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-5);
    padding: var(--sp-2) 0;
    border-bottom: 1px solid var(--rule);
}
.o8-about__qual:last-child {
    border-bottom: none;
}
.o8-about__qual-year {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
    color: var(--accent);
    flex: 0 0 40px;
	width: 40px;
    text-align: center;
}
.o8-about__qual-text {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
    color: var(--ink);
    margin: 0;
}
/* Sicherheitsnetz: jedes p-Kind in qual bekommt margin:0 */
.o8-about__qual p { margin: 0; }
@media (min-width: 1100px) {
    .o8-about { padding: var(--sp-10) 0; }
    .o8-about .container {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--sp-12);
    }
    .o8-about__image-wrap {
        flex: 0 0 510px;
        width: 510px;
        height: 680px;
        aspect-ratio: unset;
        border: 1px solid var(--rule);    /* Figma: border 1px solid #D8D2C8 */
    }
    .o8-about__content { flex: 1; }
    .o8-about__headline { font-size: 45px; line-height: 115%; }
}


/* ============================================================
   O18 — BlogCardTeaser (Insights)
   ============================================================ */
.o18-insights {
    background: var(--paper);
    padding: var(--sp-8) 0;
    overflow: hidden;
}
.o18-insights__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}
.o18-insights__headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 125%;
    color: var(--ink);
    margin: 0;
}
.o18-insights__scroll {
    display: flex;
    flex-direction: row;
    gap: var(--sp-6);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--sp-3);
    /* hide scrollbar */
    scrollbar-width: none;
}
.o18-insights__scroll::-webkit-scrollbar { display: none; }
.o18-card {
    flex: 0 0 240px;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}
.o18-card__image {
    width: 100%;
    aspect-ratio: 4 / 3;
    background: var(--paper-dark);
    overflow: hidden;
}
.o18-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.o18-card__body {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-top: var(--sp-2);
}
.o18-card__title {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 20px;
    line-height: 130%;
    color: var(--ink);
    margin: 0;
}
.o18-card__excerpt {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 13px;
    line-height: 150%;
    color: var(--muted);
    margin: 0;
}
@media (min-width: 1100px) {
    .o18-insights { padding: var(--sp-10) 0; }
    .o18-insights__header {
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-end;
    }
    .o18-insights__headline { font-size: 45px; line-height: 115%; }
    .o18-insights__scroll {
        overflow-x: visible;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-6);
    }
    .o18-card { flex: unset; }
    .o18-card__image { aspect-ratio: 4 / 3; }
    .o18-card__title { font-size: 24px; line-height: 100%; }
}


/* ============================================================
   O9 — CTASection
   ============================================================ */
.o9-cta {
    background: var(--forest);
    padding: var(--sp-8) 0;
}
.o9-cta .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
}
.o9-cta__headline {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 400;
    font-size: 24px;
    line-height: 130%;
    color: var(--paper);
    margin: 0;
}
.o9-cta__body {
    font-family: 'Jost', sans-serif;
    font-weight: 300;
    font-size: 15px;
    line-height: 160%;
    color: rgba(242, 237, 228, 0.6);
    margin: 0;
    max-width: 600px;
}
.o9-cta__actions {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
    padding: var(--sp-3) 0;
    width: 100%;
    align-items: center;
}
.o9-cta__actions .btn { width: 100%; max-width: 340px; justify-content: center; }
.o9-cta__note {
    font-family: 'Jost', sans-serif;
    font-weight: 500;
    font-size: 10px;
    line-height: 140%;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 237, 228, 0.35);
    max-width: 400px;
}
@media (min-width: 1100px) {
    .o9-cta { padding: var(--sp-10) 0; }
    .o9-cta__headline { font-size: 32px; line-height: 120%; }
    .o9-cta__actions { flex-direction: row; justify-content: center; }
    .o9-cta__actions .btn { width: auto; max-width: none; }
}
/* ============================================================
   ORGANISMS — Neue Stile für Health Diagnostic (und Folgeseiten)
   Ans Ende der design-system.css anfügen
   ============================================================ */


/* ------------------------------------------------------------
   site-main — Reset WordPress-Standardstile
   ------------------------------------------------------------ */

.site-main {
    width: 100%;
    overflow-x: hidden;
}

.site-main > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ------------------------------------------------------------
   Global: .headline-accent
   Kursive Zeile in Accent-Light — nutzbar in allen Headlines
   Verwendung: <em class="headline-accent">text</em>
   ------------------------------------------------------------ */

.headline-accent {
    font-style: italic;
    color: var(--accent-light);
}


/* ------------------------------------------------------------
   O2 / Hero
   Dunkler Sektionshintergrund mit radialem Gradient
   ------------------------------------------------------------ */

.hero {
    background:
        radial-gradient(
            38.26% 96.26% at 80.8% 24.03%,
            rgba(139, 104, 84, 0.03) 0%,
            rgba(20, 20, 16, 0.15) 100%
        ),
        var(--ink);
    width: 100%;
}

.hero__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--sp-8) var(--pad-mobile);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
}

@media (min-width: 1100px) {
    .hero__container {
        padding: var(--sp-12) 0;
    }
}

.hero__headline {
    font-family: var(--font-serif);
    font-size: var(--fs-display-m);
    font-weight: 400;
    line-height: var(--lh-display-m);
    color: var(--paper);
}

@media (min-width: 1100px) {
    .hero__headline {
        font-size: var(--fs-display);
        line-height: var(--lh-display);
    }
}

.hero__subtext {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: rgba(242, 237, 228, 0.6);
    max-width: 52rem;
}

/* Button-Gruppe: Mobile gestapelt, Tablet+ nebeneinander */
.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    padding-top: var(--sp-4);
    width: 100%;
}

@media (min-width: 768px) {
    .hero__actions {
        flex-direction: row;
        align-items: center;
        width: auto;
    }
}

.hero__actions .btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .hero__actions .btn {
        width: auto;
    }
}


/* ------------------------------------------------------------
   O23 / Process
   Nummerierte Schrittliste mit Kicker + H1 Headline + Body
   ------------------------------------------------------------ */

.process {
    background-color: var(--paper);
}

.process__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-bottom: var(--sp-8);
}

.process__headline {
    color: var(--ink);
}

.process__body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--ink);
    max-width: 110rem;
}

/* Einzelner Schritt */
.process__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 1100px) {
    .process__item {
        gap: var(--sp-6);
        padding: var(--sp-6) var(--sp-6);
    }
}

.process__item--last {
    border-bottom: none;
}

/* Schritt-Nummer */
.process__number {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    min-width: 1.6rem;
    padding-top: 0.8rem;
    flex-shrink: 0;
}

/* Schritt-Inhalt */
.process__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
}

.process__item-title {
    font-family: var(--font-serif);
    font-size: var(--fs-h3-m);
    font-weight: 400;
    line-height: var(--lh-h3-m);
    color: var(--ink);
}

@media (min-width: 1100px) {
    .process__item-title {
        font-size: var(--fs-h3);
        line-height: var(--lh-h3);
    }
}

.process__item-desc {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--muted);
}


/* ------------------------------------------------------------
   O5 / FeatureSection
   Zweispaltig: Text links, Icon-Liste rechts
   ------------------------------------------------------------ */

.feature-section {
    background-color: var(--paper-dark);
}

/* Zweispalten-Layout */
.feature-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}

@media (min-width: 1100px) {
    .feature-section__inner {
        flex-direction: row;
        align-items: center;
        gap: 8.0rem;   /* 80px */
    }
}

/* Linke Spalte */
.feature-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    flex: 1;
}

.feature-section__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.feature-section__body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--ink);
}

.feature-section__btn {
    align-self: flex-start;
}

/* Modifier: Button ausblenden */
.feature-section--no-btn .feature-section__btn {
    display: none;
}

/* Rechte Spalte — Icon-Liste */
.feature-section__icons {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

@media (min-width: 1100px) {
    .feature-section__icons {
        flex: 0 0 37.2rem;
    }
}

/* Icon-Item */
.icon-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
}

.icon-item__icon {
    width: 4.0rem;
    height: 4.0rem;
    background-color: var(--paper-dark);
    border-radius: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.icon-item__icon svg {
    width: 2.0rem;
    height: 2.0rem;
}

.icon-item__text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.icon-item__title {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--ink);
}

.icon-item__desc {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--muted);
}


/* ------------------------------------------------------------
   O24 / PriceBlock
   Zentrierter Preisblock auf Forest-Hintergrund
   ------------------------------------------------------------ */

.price-block {
    background-color: var(--forest);
    width: 100%;
    display: flex;
    justify-content: center;
}

.price-block__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-10) var(--pad-mobile);
    width: 100%;
    max-width: 70rem;
    text-align: center;
}

@media (min-width: 1100px) {
    .price-block__inner {
        padding: var(--sp-10) 0;
    }
}

.price-block__price {
    font-family: var(--font-serif);
    font-size: var(--fs-display-m);            /* Mobile: 38px */
    font-weight: 400;
    line-height: var(--lh-display-m);
    color: var(--paper);
}

@media (min-width: 1100px) {
    .price-block__price {
        font-size: var(--fs-display);          /* Desktop: 61px */
        line-height: var(--lh-display);
    }
}

.price-block__subtext {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: rgba(242, 237, 228, 0.6);
}

/* Button: Mobile volle Breite, Tablet+ auto */
.price-block__btn {
    width: 100%;
    max-width: 32.7rem;
    justify-content: center;
}

@media (min-width: 768px) {
    .price-block__btn {
        width: auto;
        max-width: none;
    }
}

.price-block__divider {
    width: 100%;
    margin: var(--sp-2) 0;
}

.price-block__note {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-style: italic;
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: rgba(242, 237, 228, 0.6);
}


/* ------------------------------------------------------------
   O6 / PullquoteBand
   Zentriertes Zitat auf paper-dark
   Desktop: oberer Border = rule (#D8D2C8)
   Mobile:  oberer Border = ink (#141410)
   ------------------------------------------------------------ */

.pullquote-band {
    background-color: var(--paper-dark);
    border-top: 2px solid var(--ink);          /* Mobile: ink */
    border-bottom: 2px solid var(--accent);
    display: flex;
    justify-content: center;
}

@media (min-width: 1100px) {
    .pullquote-band {
        border-top-color: var(--rule);         /* Desktop: rule */
    }
}

.pullquote-band__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--pad-mobile);
    max-width: 70rem;
    text-align: center;
}

@media (min-width: 1100px) {
    .pullquote-band__inner {
        padding: var(--sp-8) 0;
    }
}

.pullquote-band__text {
    font-family: var(--font-serif);
    font-size: var(--fs-pullquote-m);          /* Mobile: 20px / 145% */
    font-style: italic;
    font-weight: 400;
    line-height: var(--lh-pullquote-m);
    color: var(--ink);
}

@media (min-width: 1100px) {
    .pullquote-band__text {
        font-size: var(--fs-pullquote);        /* Desktop: 24px / 140% */
        line-height: var(--lh-pullquote);
    }
}


/* ------------------------------------------------------------
   O13 / FAQAccordion
   Natives <details>/<summary> — kein JavaScript nötig
   ------------------------------------------------------------ */

.faq {
    background-color: var(--paper);
}

.faq__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.faq__headline {
    color: var(--ink);
}

.faq__divider {
    margin-top: var(--sp-1);
    margin-bottom: var(--sp-5);
}

/* Details-Element */
.faq__item {
    border-bottom: 1px solid var(--rule);
}

/* Summary: Standard-Pfeil ausblenden */
.faq__item > summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-4) 0;
    cursor: pointer;
    gap: var(--sp-4);
    user-select: none;
}

.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker               { display: none; }

/* Frage-Text */
.faq__question {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--ink);
    flex: 1;
    text-align: left;
}

/* +/— Toggle via ::after */
.faq__item > summary::after {
    content: '+';
    font-family: var(--font-sans);
    font-size: var(--fs-nav);
    font-weight: 500;
    line-height: 1;
    color: var(--accent);
    flex-shrink: 0;
    transition: content 0.2s ease;
}

.faq__item[open] > summary::after {
    content: '—';
}

/* Antwort */
.faq__answer {
    padding-bottom: var(--sp-4);
}

.faq__answer p {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--muted);
}


/* ------------------------------------------------------------
   O9 / CTASection
   Zentriert auf Forest-Hintergrund
   ------------------------------------------------------------ */

.cta-section {
    background-color: var(--forest);
    width: 100%;
    display: flex;
    justify-content: center;
}

.cta-section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-10) var(--pad-mobile);
    width: 100%;
    max-width: 70rem;
}

@media (min-width: 1100px) {
    .cta-section__inner {
        padding: var(--sp-10) 0;
    }
}

.cta-section__kicker {
    color: var(--muted);
}

.cta-section__headline {
    font-family: var(--font-serif);
    font-size: var(--fs-h2-m);
    font-weight: 400;
    line-height: var(--lh-h2-m);
    color: var(--paper);
}

@media (min-width: 1100px) {
    .cta-section__headline {
        font-size: var(--fs-h2);
        line-height: var(--lh-h2);
    }
}

.cta-section__body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: rgba(242, 237, 228, 0.6);
}

/* Button-Gruppe: Mobile gestapelt, Tablet+ nebeneinander */
.cta-section__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    width: 100%;
}

@media (min-width: 768px) {
    .cta-section__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: auto;
    }
}

.cta-section__btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .cta-section__btn {
        width: auto;
    }
}

.cta-section__note {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 237, 228, 0.35);
}

/* ============================================================
   ORGANISMS — Neue Stile für Health Diagnostic (und Folgeseiten)
   Ans Ende der design-system.css anfügen
   ============================================================ */


/* ------------------------------------------------------------
   site-main — Reset WordPress-Standardstile
   ------------------------------------------------------------ */

.site-main {
    width: 100%;
    overflow-x: hidden;
}

.site-main > * {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* ------------------------------------------------------------
   Global: .headline-accent
   Kursive Zeile in Accent-Light — nutzbar in allen Headlines
   Verwendung: <em class="headline-accent">text</em>
   ------------------------------------------------------------ */

.headline-accent {
    font-style: italic;
    color: var(--accent-light);
}


/* ------------------------------------------------------------
   O2 / Hero
   Dunkler Sektionshintergrund mit radialem Gradient
   ------------------------------------------------------------ */

.hero {
    background:
        radial-gradient(
            38.26% 96.26% at 80.8% 24.03%,
            rgba(139, 104, 84, 0.03) 0%,
            rgba(20, 20, 16, 0.15) 100%
        ),
        var(--ink);
    width: 100%;
}

.hero__container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--sp-8) var(--pad-mobile);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--sp-5);
}

@media (min-width: 1100px) {
    .hero__container {
        padding: var(--sp-12) 0;
    }
}

.hero__headline {
    font-family: var(--font-serif);
    font-size: var(--fs-display-m);
    font-weight: 400;
    line-height: var(--lh-display-m);
    color: var(--paper);
}

@media (min-width: 1100px) {
    .hero__headline {
        font-size: var(--fs-display);
        line-height: var(--lh-display);
    }
}

.hero__subtext {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: rgba(242, 237, 228, 0.6);
    max-width: 52rem;
}

/* Button-Gruppe: Mobile gestapelt, Tablet+ nebeneinander */
.hero__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-4);
    padding-top: var(--sp-4);
    width: 100%;
}

@media (min-width: 768px) {
    .hero__actions {
        flex-direction: row;
        align-items: center;
        width: auto;
    }
}

.hero__actions .btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .hero__actions .btn {
        width: auto;
    }
}


/* ------------------------------------------------------------
   O23 / Process
   Nummerierte Schrittliste mit Kicker + H1 Headline + Body
   ------------------------------------------------------------ */

.process {
    background-color: var(--paper);
}

.process__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    padding-bottom: var(--sp-8);
}

.process__headline {
    color: var(--ink);
}

.process__body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--ink);
    max-width: 110rem;
}

/* Einzelner Schritt */
.process__item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--sp-5);
    padding: var(--sp-5) 0;
    border-bottom: 1px solid var(--rule);
}

@media (min-width: 1100px) {
    .process__item {
        gap: var(--sp-6);
        padding: var(--sp-6) var(--sp-6);
    }
}

.process__item--last {
    border-bottom: none;
}

/* Schritt-Nummer */
.process__number {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--muted);
    min-width: 1.6rem;
    padding-top: 0.8rem;
    flex-shrink: 0;
}

/* Schritt-Inhalt */
.process__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    flex: 1;
}

.process__item-title {
    font-family: var(--font-serif);
    font-size: var(--fs-h3-m);
    font-weight: 400;
    line-height: var(--lh-h3-m);
    color: var(--ink);
}

@media (min-width: 1100px) {
    .process__item-title {
        font-size: var(--fs-h3);
        line-height: var(--lh-h3);
    }
}

.process__item-desc {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--muted);
}


/* ------------------------------------------------------------
   O5 / FeatureSection
   Zweispaltig: Text links, Icon-Liste rechts
   ------------------------------------------------------------ */

.feature-section {
    background-color: var(--paper-dark);
}

/* Zweispalten-Layout */
.feature-section__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-8);
}

@media (min-width: 1100px) {
    .feature-section__inner {
        flex-direction: row;
        align-items: center;
        gap: 8.0rem;   /* 80px */
    }
}

/* Linke Spalte */
.feature-section__content {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    flex: 1;
}

.feature-section__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.feature-section__body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--ink);
}

.feature-section__btn {
    align-self: flex-start;
}

/* Modifier: Button ausblenden */
.feature-section--no-btn .feature-section__btn {
    display: none;
}

/* Rechte Spalte — Icon-Liste */
.feature-section__icons {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

@media (min-width: 1100px) {
    .feature-section__icons {
        flex: 0 0 37.2rem;
    }
}

/* Icon-Item */
.icon-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--sp-3);
}

.icon-item__icon {
    width: 4.0rem;
    height: 4.0rem;
    background-color: var(--paper-dark);
    border-radius: 2px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
}

.icon-item__icon svg {
    width: 2.0rem;
    height: 2.0rem;
}

.icon-item__text {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.icon-item__title {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--ink);
}

.icon-item__desc {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--muted);
}


/* ------------------------------------------------------------
   O24 / PriceBlock
   Zentrierter Preisblock auf Forest-Hintergrund
   ------------------------------------------------------------ */

.price-block {
    background-color: var(--forest);
    width: 100%;
    display: flex;
    justify-content: center;
}

.price-block__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-10) var(--pad-mobile);
    width: 100%;
    max-width: 70rem;
    text-align: center;
}

@media (min-width: 1100px) {
    .price-block__inner {
        padding: var(--sp-10) 0;
    }
}

.price-block__price {
    font-family: var(--font-serif);
    font-size: var(--fs-display-m);            /* Mobile: 38px */
    font-weight: 400;
    line-height: var(--lh-display-m);
    color: var(--paper);
}

@media (min-width: 1100px) {
    .price-block__price {
        font-size: var(--fs-display);          /* Desktop: 61px */
        line-height: var(--lh-display);
    }
}

.price-block__subtext {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: rgba(242, 237, 228, 0.6);
}

/* Button: Mobile volle Breite, Tablet+ auto */
.price-block__btn {
    width: 100%;
    max-width: 32.7rem;
    justify-content: center;
}

@media (min-width: 768px) {
    .price-block__btn {
        width: auto;
        max-width: none;
    }
}

.price-block__divider {
    width: 100%;
    margin: var(--sp-2) 0;
}

.price-block__note {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-style: italic;
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: rgba(242, 237, 228, 0.6);
}


/* ------------------------------------------------------------
   O6 / PullquoteBand
   Zentriertes Zitat auf paper-dark
   Desktop: oberer Border = rule (#D8D2C8)
   Mobile:  oberer Border = ink (#141410)
   ------------------------------------------------------------ */

.pullquote-band {
    background-color: var(--paper-dark);
    border-top: 2px solid var(--ink);          /* Mobile: ink */
    border-bottom: 2px solid var(--accent);
    display: flex;
    justify-content: center;
}

@media (min-width: 1100px) {
    .pullquote-band {
        border-top-color: var(--rule);         /* Desktop: rule */
    }
}

.pullquote-band__inner {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-8) var(--pad-mobile);
    max-width: 70rem;
    text-align: center;
}

@media (min-width: 1100px) {
    .pullquote-band__inner {
        padding: var(--sp-8) 0;
    }
}

.pullquote-band__text {
    font-family: var(--font-serif);
    font-size: var(--fs-pullquote-m);          /* Mobile: 20px / 145% */
    font-style: italic;
    font-weight: 400;
    line-height: var(--lh-pullquote-m);
    color: var(--ink);
}

@media (min-width: 1100px) {
    .pullquote-band__text {
        font-size: var(--fs-pullquote);        /* Desktop: 24px / 140% */
        line-height: var(--lh-pullquote);
    }
}


/* ------------------------------------------------------------
   O13 / FAQAccordion
   Natives <details>/<summary> — kein JavaScript nötig
   ------------------------------------------------------------ */

.faq {
    background-color: var(--paper);
}

.faq__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
    margin-bottom: var(--sp-5);
}

.faq__headline {
    color: var(--ink);
}

.faq__divider {
    margin-top: var(--sp-1);
    margin-bottom: var(--sp-5);
}

/* Details-Element */
.faq__item {
    border-bottom: 1px solid var(--rule);
}

/* Summary: Standard-Pfeil ausblenden */
.faq__item > summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--sp-4) 0;
    cursor: pointer;
    gap: var(--sp-4);
    user-select: none;
}

.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::marker               { display: none; }

/* Frage-Text */
.faq__question {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: var(--ink);
    flex: 1;
    text-align: left;
}

/* +/— Toggle via ::after */
.faq__item > summary::after {
    content: '+';
    font-family: var(--font-sans);
    font-size: var(--fs-nav);
    font-weight: 500;
    line-height: 1;
    color: var(--accent);
    flex-shrink: 0;
    transition: content 0.2s ease;
}

.faq__item[open] > summary::after {
    content: '—';
}

/* Antwort */
.faq__answer {
    padding-bottom: var(--sp-4);
}

.faq__answer p {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--muted);
}


/* ------------------------------------------------------------
   O9 / CTASection
   Zentriert auf Forest-Hintergrund
   ------------------------------------------------------------ */

.cta-section {
    background-color: var(--forest);
    width: 100%;
    display: flex;
    justify-content: center;
}

.cta-section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--sp-3);
    padding: var(--sp-10) var(--pad-mobile);
    width: 100%;
    max-width: 70rem;
}

@media (min-width: 1100px) {
    .cta-section__inner {
        padding: var(--sp-10) 0;
    }
}

.cta-section__kicker {
    color: var(--muted);
}

.cta-section__headline {
    font-family: var(--font-serif);
    font-size: var(--fs-h2-m);
    font-weight: 400;
    line-height: var(--lh-h2-m);
    color: var(--paper);
}

@media (min-width: 1100px) {
    .cta-section__headline {
        font-size: var(--fs-h2);
        line-height: var(--lh-h2);
    }
}

.cta-section__body {
    font-family: var(--font-sans);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-body);
    color: rgba(242, 237, 228, 0.6);
}

/* Button-Gruppe: Mobile gestapelt, Tablet+ nebeneinander */
.cta-section__actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--sp-2);
    padding: var(--sp-3) 0;
    width: 100%;
}

@media (min-width: 768px) {
    .cta-section__actions {
        flex-direction: row;
        align-items: center;
        justify-content: center;
        width: auto;
    }
}

.cta-section__btn {
    width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .cta-section__btn {
        width: auto;
    }
}

.cta-section__note {
    font-family: var(--font-sans);
    font-size: var(--fs-label);
    font-weight: 500;
    line-height: var(--lh-label);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(242, 237, 228, 0.35);
}


/* ============================================================
   O10 / Kontakt
   Zweispaltig: Info links, Formular rechts
   ============================================================ */

.kontakt {
    background-color: var(--paper);
}

.kontakt__inner {
    display: flex;
    flex-direction: column;
    gap: var(--sp-6);
}

@media (min-width: 1100px) {
    .kontakt__inner {
        flex-direction: row;
        align-items: flex-start;
        gap: 8.0rem;
    }
}

/* Linke Spalte */
.kontakt__info {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
    flex: 1;
}

.kontakt__header {
    display: flex;
    flex-direction: column;
    gap: var(--sp-2);
}

.kontakt__headline {
    color: var(--ink);
}

.kontakt__items {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

/* Rechte Spalte */
.kontakt__form-wrap {
    flex: 0 0 auto;
    width: 100%;
}

@media (min-width: 1100px) {
    .kontakt__form-wrap {
        width: 45.7rem;
    }
}

.kontakt__form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-5);
}

.kontakt__submit {
    align-self: flex-start;
    width: 100%;
    justify-content: center;
}

@media (min-width: 768px) {
    .kontakt__submit {
        width: auto;
    }
}

.kontakt__success {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--muted);
}

/* Divider zwischen Info und Form auf Mobile */
@media (max-width: 1099px) {
    .kontakt__info {
        padding-bottom: var(--sp-5);
        border-bottom: 1px solid var(--rule);
    }
}

/* ============================================================
   O13 Modifier — FAQAccordion auf paper-dark Hintergrund
   ============================================================ */

.faq--paper-dark {
    background-color: var(--paper-dark);
}


/* ============================================================
   Formular — DSGVO Checkbox
   ============================================================ */

.form-check {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    cursor: pointer;
}

.form-check__input {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    margin-top: 0.2rem;
    accent-color: var(--accent);
    cursor: pointer;
}

.form-check__label {
    font-family: var(--font-sans);
    font-size: var(--fs-body-s);
    font-weight: 300;
    line-height: var(--lh-body-s);
    color: var(--muted);
}

.form-check__label .link {
    font-size: var(--fs-body-s);
}

/* ============================================================
   PATCH v2.1 — Desktop Design Fixes
   ============================================================ */

/* ----------------------------------------
   O4 Angebote — "Alle Angebote" CTA-Link am Ende
   ---------------------------------------- */
.o4-angebote__cta {
    display: flex;
    justify-content: flex-end;
    padding-top: var(--sp-5);
    padding-bottom: var(--sp-3);
}

/* ----------------------------------------
   O2 Hero — Mindesthöhe auf Desktop (Figma: 532px)
   ---------------------------------------- */
@media (min-width: 1100px) {
    .o2-hero {
        min-height: 53.2rem;
    }
    .o2-hero .container {
        justify-content: center;
        min-height: 53.2rem;
    }
}

/* ----------------------------------------
   O19 TextSection — Display-Größe auf Desktop
   sicherstellen (Figma: Serif/Display = 61px)
   ---------------------------------------- */
@media (min-width: 1100px) {
    .o19-text__headline {
        font-size: var(--fs-display);
        line-height: var(--lh-display);
    }
}

/* ----------------------------------------
   O6 Pullquote — Desktop: paper Hintergrund,
   border-bottom accent bleibt erhalten
   ---------------------------------------- */
@media (min-width: 1100px) {
    .o6-pullquote {
        padding: var(--sp-8) 0;         /* 48px top/bottom → ~168px total */
    }
}

/* ----------------------------------------
   O18 Insights — Desktop: 4. Karte ausblenden
   (Figma zeigt 3 Karten sichtbar + 1 abgeschnitten)
   ---------------------------------------- */
@media (min-width: 1100px) {
    .o18-insights__scroll {
        grid-template-columns: repeat(3, 1fr);
    }
    .o18-card:nth-child(n+4) {
        display: none;
    }
}

/* ----------------------------------------
   O7 Corporate — Tags: Outline-Stil auf
   dunklem Hintergrund (accent-light border)
   ---------------------------------------- */
.o7-corporate__tags .tag--outline {
    border-color: rgba(200, 153, 122, 0.4);
    color: rgba(242, 237, 228, 0.6);
}

/* ----------------------------------------
   O4 Angebote — letzte Row ohne border-bottom
   (Figma: kein unterer Rahmen nach Item 04)
   ---------------------------------------- */
.o4-angebote__row:last-child {
    border-bottom: none;
}

/* ----------------------------------------
   O8 About — Qualifications Spacer
   ---------------------------------------- */
.o8-about__qualifications {
    margin: var(--sp-3) 0;
}

/* ----------------------------------------
   Navbar — Logo-Claim nur Desktop (kürzt auf Mobile)
   ---------------------------------------- */
@media (max-width: 1099px) {
    .navbar__logo-claim {
        display: none;
    }
}