/* =============================================================
   design.css – Gestaltungsebene „Klar geführt“ (Prototyp, Nov 2026)
   Wird auf ALLEN Seiten als letztes Stylesheet geladen (build.mjs → GLOBAL_LAYERS).
   Farben, Schriften, Logo und Marker bleiben wie im Brand Guide (brand.css).

   Gerüst jeder Section (gilt für alle Seiten):
     <section class="section_name [surface-…]">
       <div class="padding-global">            Seitenrand (--gutter)
         <div class="container-large">        Max-Breite (--container-large)
           <div class="padding-section-large"> Abstand oben/unten (--section-space)

   Flächen (volle Breite, keine eingerückten Panels mehr):
     ohne Klasse      Hafer  (Grund)
     surface-leinen   Himmel hell (ruhige Tönung)
     surface-dark     Marine (Ergebnisse, Footer)
     surface-brand    Limette als Karte im Container (Abschluss-CTA)

   Breakpoints: 991px (Tablet) · 640px (Handy)
   ============================================================= */

/* ---------- 1. Tokens: alle Abstände, Maße und Radien zentral ---------- */
:root{
  /* Abstands-Scale */
  --space-1:.25rem;  /*  4 */
  --space-2:.5rem;   /*  8 */
  --space-3:.75rem;  /* 12 */
  --space-4:1rem;    /* 16 */
  --space-6:1.5rem;  /* 24 */
  --space-8:2rem;    /* 32 */
  --space-10:2.5rem; /* 40 */
  --space-12:3rem;   /* 48 */
  --space-16:4rem;   /* 64 */
  --space-20:5rem;   /* 80 */
  --space-24:6rem;   /* 96 */

  /* Gerüst */
  --gutter:var(--space-8);            /* Seitenrand */
  --container-large:75rem;            /* 1200 */
  --container-medium:60rem;           /*  960 */
  --container-small:47.5rem;          /*  760 */
  --section-space:var(--space-24);    /* padding-section-large */
  --section-space-medium:var(--space-20);
  --section-space-small:var(--space-10);
  --navbar-offset:7rem;               /* Platz unter der schwebenden Navigation */

  /* Formen */
  --radius-card:1.5rem;
  --radius-inner:1rem;
  --radius-small:.75rem;
  --radius-large:1.5rem;
  --radius-panel:1.5rem;
  --radius-medium:.75rem;

  /* Flächen */
  --surface-tint:var(--himmel-hell);
  --hafer-dunkel:#F8E8D0;
  --line:rgba(24,40,72,.14);
  --line-strong:rgba(24,40,72,.3);
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (max-width:991px){:root{--gutter:var(--space-6);--section-space:var(--space-20);--section-space-medium:var(--space-16);--navbar-offset:6.5rem}}
@media (max-width:640px){:root{--gutter:var(--space-4);--section-space:var(--space-16);--section-space-medium:var(--space-12);--section-space-small:var(--space-8);--radius-card:1.25rem;--navbar-offset:6rem}}

/* ---------- 2. Gerüst ---------- */
.padding-global{padding-left:var(--gutter);padding-right:var(--gutter)}
.container-large{max-width:var(--container-large)}
.container-medium{max-width:var(--container-medium)}
.container-small{max-width:var(--container-small)}
.padding-section-large{padding-top:var(--section-space);padding-bottom:var(--section-space)}
.padding-section-medium{padding-top:var(--section-space-medium);padding-bottom:var(--section-space-medium)}
.padding-section-small{padding-top:var(--section-space-small);padding-bottom:var(--section-space-small)}
.padding-section-large.navbar-space{padding-top:calc(var(--section-space) + var(--navbar-offset) - var(--space-8))}
.padding-section-large.no-bottom-padding{padding-bottom:var(--space-8)}
.padding-section-large.is-article-body{padding-top:var(--space-10)}

/* ---------- 3. Flächen: volle Breite statt eingerückter Panels ---------- */
main > section,main > article > section,.section_article-hero,.footer_component{margin:0!important;border-radius:0!important}
main > section.section_hero,main > section.section_wissen-hero,.section_article-hero{background:var(--hafer)}
main > section.surface-leinen{background:var(--surface-tint);--surface-card:var(--weiss)}
main > section.surface-dark{background:var(--marine)}
/* Limette nur als Karte im Container, die Section selbst bleibt Hafer */
main > section.surface-brand{background:var(--hafer);padding-top:var(--space-6);padding-bottom:var(--space-6)}
main > section.surface-brand > .padding-global > [class*="container-"]{background:var(--limette);border-radius:var(--radius-card);padding-left:var(--space-16);padding-right:var(--space-16)}
main > section.surface-brand > .padding-global > [class*="container-"] > .padding-section-large{padding-top:var(--space-16);padding-bottom:var(--space-16)}
@media (max-width:991px){main > section.surface-brand > .padding-global > [class*="container-"]{padding-left:var(--space-8);padding-right:var(--space-8)}}
@media (max-width:640px){main > section.surface-brand > .padding-global > [class*="container-"]{padding-left:var(--space-6);padding-right:var(--space-6)}main > section.surface-brand > .padding-global > [class*="container-"] > .padding-section-large{padding-top:var(--space-10);padding-bottom:var(--space-10)}}
.section_hero::after,.section_hero:not(:has(.hero_component))::after{opacity:.9}

/* ---------- 4. Typografie ---------- */
.heading-style-display{font-size:3.75rem;line-height:1}
.heading-style-h1,h1{font-size:3.5rem;line-height:1.02}
.heading-style-h2,h2{font-size:2.75rem;line-height:1.05;letter-spacing:-.035em}
@media (max-width:991px){.heading-style-display{font-size:3rem}.heading-style-h1,h1{font-size:2.75rem}.heading-style-h2,h2{font-size:2.25rem}}
@media (max-width:640px){.heading-style-display{font-size:2.25rem;line-height:1.05}.heading-style-h1,h1{font-size:2.125rem;line-height:1.08}.heading-style-h2,h2{font-size:1.875rem;line-height:1.1}}
.text-size-medium,.text-size-lead{text-wrap:pretty}

/* Section-Kopf: einspaltig und linksbündig, Überschrift → Einleitung → Aktion */
.section_header{display:block;max-width:45rem}
.section_header > .margin-small{margin-bottom:var(--space-4)}
.section_header > p{max-width:40rem}
.section_header > .margin-top{margin-top:var(--space-6)}
.section_header.is-center{margin-left:auto;margin-right:auto}

/* ---------- 5. Navigation ---------- */
.navbar_component .padding-global{padding-left:var(--gutter);padding-right:var(--gutter)}
.navbar_container{max-width:var(--container-large)}
.navbar_cta-mobile{display:none}
@media (max-width:991px){
  .navbar_container{gap:var(--space-2);padding:0 var(--space-2) 0 var(--space-4)}
  .navbar_logo-link{margin-right:auto}
  .navbar_cta-mobile{display:inline-flex;min-height:2.5rem;padding:.5rem 1rem;font-size:.875rem}
  .navbar_component.is-open .navbar_cta-mobile{visibility:hidden}
  /* Vollbild-Menü */
  .navbar_component.is-open{top:0;bottom:0;background:rgba(251,243,230,.97)}
  .navbar_menu{top:6rem;padding:var(--space-4) var(--gutter) var(--space-8)}
  .navbar_links{gap:0}
  .navbar_link,.navbar_dropdown-toggle{width:100%;justify-content:space-between;padding:var(--space-4) 0;border-bottom:1px solid var(--line);font-size:1.75rem}
  .navbar_dropdown-list{padding:0 0 var(--space-4)}
  .navbar_dropdown-link{padding:var(--space-2) 0;font-size:1.0625rem}
  .navbar_menu > .button{width:100%;min-height:3.25rem;font-size:1rem;animation:nav-in .5s var(--ease) both;animation-delay:300ms}
}
@media (max-width:380px){.navbar_cta-mobile{display:none}}

/* ---------- 6. Buttons ---------- */
.button{min-height:3rem;padding:.75rem 1.5rem}
.button .arrow,.button [aria-hidden="true"]{transition:transform .3s var(--ease)}
.button:hover [aria-hidden="true"]{transform:translateX(3px)}
.button.is-nav{min-height:2.5rem;padding:.5rem 1.125rem}
.text-link{display:inline-flex;align-items:center;gap:.375rem;font-weight:600;color:var(--accent-text);text-decoration:none;border-bottom:1.5px solid var(--line-strong);padding-bottom:2px;transition:border-color .3s var(--ease)}
.text-link:hover{border-color:currentColor}
.surface-dark .text-link{color:var(--weiss);border-color:rgba(255,255,255,.4)}

/* ---------- 7. Karten ---------- */
.card,.steps_card,.signal_component,.review_card,.cta_box,.contact_card,.results_card,.jetzt_card,.block_card,.principle_card,.cost_card,.offer_card,.compare_card,.lp_quote,.lp_chain-step{border-radius:var(--radius-card)}
main > section:not(.surface-leinen):not(.surface-dark):not(.surface-brand) .card:not(.fit_card-no){background:var(--weiss)}

/* ---------- 8. Hero ---------- */
.hero_component{gap:var(--space-16)}
.hero_actions{display:flex;flex-direction:column;gap:var(--space-4)}
.hero_meta{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);font-size:.875rem;line-height:1.25rem;color:var(--text-muted)}
.hero_meta li{margin:0;padding:0;list-style:none;display:inline-flex;align-items:center;gap:var(--space-2)}
.hero_meta li + li::before{content:"·";color:var(--text-soft)}
.hero_logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-6) var(--space-12);margin-top:var(--space-16);padding-top:var(--space-8);border-top:1px solid var(--line)}
.hero_logos .logos_label{margin:0;text-align:left;color:var(--text-muted)}
.hero_logos-list{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-6) var(--space-12);list-style:none;margin:0;padding:0}
.hero_logos-list li{margin:0;padding:0}
.hero_logos-list img{display:block;height:2.25rem;width:auto;filter:grayscale(1);opacity:.75}
@media (max-width:640px){.hero_logos{margin-top:var(--space-10)}.hero_logos-list{gap:var(--space-4) var(--space-6)}.hero_logos-list img{height:1.75rem}}

/* ---------- 9. Statement (Der Unterschied) · Wörter färben sich beim Scrollen ein ---------- */
.section_header.is-statement{max-width:none}
.section_header.is-statement > p{max-width:44rem}
.statement{max-width:60rem;font-family:var(--font-display);font-weight:800;font-size:3.75rem;line-height:1.02;letter-spacing:-.04em;text-wrap:balance}
.statement_word{color:var(--marine)}
@supports (animation-timeline: view()){
  .statement_word{color:rgba(24,40,72,.22);animation:statement-word linear both;animation-timeline:view();animation-range:cover calc(12% + var(--i) * 3%) cover calc(16% + var(--i) * 3%)}
}
@keyframes statement-word{to{color:var(--marine)}}
@media (max-width:991px){.statement{font-size:2.75rem}}
@media (max-width:640px){.statement{font-size:2rem;line-height:1.08}}
@media (prefers-reduced-motion:reduce){.statement_word{animation:none;color:var(--marine)}}

/* ---------- 10. Für wen: nummerierte Karten 2 × 2, Passt / Passt nicht ---------- */
.pain_grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4)}
.pain_card{padding:var(--space-8);border-radius:var(--radius-card);background:var(--weiss)}
.pain_card::before{width:auto;height:auto;margin-bottom:var(--space-3);border-radius:0;background:none;justify-content:flex-start;font-size:.875rem;color:var(--text-soft);content:"0" counter(pain)}
.pain_text{color:var(--text-muted)}
.fit_grid{gap:var(--space-4);background:transparent;border-radius:0;overflow:visible}
.fit_grid > .card{border-radius:var(--radius-card);background:var(--himmel)}
.fit_grid > .fit_card-no{background:var(--hafer-dunkel)}
main > section.surface-leinen .fit_grid > .card{background:var(--himmel)}
@media (max-width:640px){.pain_grid{grid-template-columns:minmax(0,1fr)}.pain_card{padding:var(--space-6)}}

/* ---------- 11. Ablauf: drei Phasen-Karten ---------- */
.phase_grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.phase_card{display:flex;flex-direction:column;gap:var(--space-6);padding:var(--space-8);border-radius:var(--radius-card);background:var(--weiss)}
.phase_top{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4)}
.phase_days{display:inline-flex;padding:var(--space-1) var(--space-3);border-radius:var(--radius-pill);background:var(--himmel);font-size:.875rem;font-weight:600;line-height:1.25rem}
.phase_card.is-final .phase_days{background:var(--limette)}
.phase_number{font-family:var(--font-display);font-weight:800;font-size:2.5rem;line-height:1;letter-spacing:-.04em;color:var(--himmel)}
.phase_list{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);color:var(--text-muted);font-size:.9375rem;line-height:1.5}
.phase_list li{position:relative;margin:0;padding:0 0 0 var(--space-8)}
.phase_list li::before{content:"";position:absolute;left:0;top:.0625rem;width:1.375rem;height:1.375rem;border-radius:50%;background:var(--limette) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.5l4.5-5' fill='none' stroke='%23182848' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center/.75rem}
.phase_note{font-size:.9375rem;color:var(--text-muted)}
.surface-dark .phase_card{background:rgba(255,255,255,.06)}
@media (max-width:991px){.phase_grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.phase_card{padding:var(--space-6)}}

/* ---------- 12. Ergebnisse (Marine) ---------- */
.results_card{border:0;background:rgba(255,255,255,.06)}
.surface-dark .button.is-secondary{border-color:rgba(255,255,255,.4);color:var(--weiss)}

/* ---------- 13. Bewertungen: drei Karten ---------- */
.stimmen{padding:0;border-radius:0;background:transparent}
.stimmen_summary{display:inline-flex;align-self:flex-start;gap:var(--space-3);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-6);border:0;border-radius:var(--radius-pill);background:var(--weiss);font-size:.9375rem}
.stimmen_summary .reviews_summary-link{margin-left:var(--space-2)}
.stimmen_grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4);padding-top:0;align-items:start}
.stimmen .review_card{display:flex;flex-direction:column;gap:var(--space-4);padding:var(--space-8);border-radius:var(--radius-card);background:var(--weiss)}
.section_reviews.is-expanded .stimmen .review_card.is-more{display:flex}
.stimmen .review_top{order:3;justify-content:space-between;padding-top:var(--space-4);border-top:1px solid var(--line)}
.stimmen .review_top .reviews_stars{display:inline-flex}
.stimmen .review_body{order:1;color:var(--text-muted)}
.stimmen .review_title{font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:1.1875rem;line-height:1.3;color:var(--marine);margin-bottom:var(--space-3)}
.stimmen .review_body p + p{margin-top:var(--space-3)}
.stimmen .review_author{order:2;font-weight:600;color:var(--marine)}
.surface-leinen .stimmen .review_card,.surface-leinen .stimmen_summary{background:var(--weiss)}
@media (max-width:991px){.stimmen_grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.stimmen .review_card{padding:var(--space-6)}.stimmen_summary{flex-wrap:wrap}}

/* ---------- 14. Preis: Marine-Karte + Leistungsumfang ---------- */
.pricing_component{gap:var(--space-4);border-radius:0;overflow:visible;background:transparent}
.pricing_main{border-radius:var(--radius-card);background:var(--marine);color:var(--weiss);
  --text-muted:var(--muted-dark);--text-soft:var(--muted-dark);--line:rgba(255,255,255,.14);--line-strong:rgba(255,255,255,.3);
  --btn-bg:var(--limette);--btn-fg:var(--marine);--btn-hover:var(--limette-hover);--btn-outline:rgba(255,255,255,.4);--btn-outline-fg:var(--weiss)}
.pricing_main .pricing_amount,.pricing_main .pricing_row-label{color:var(--weiss)}
.pricing_main .pricing_amount .marker{color:var(--weiss)}
.pricing_main .pricing_row-month{background:var(--limette);color:var(--marine)}
.pricing_main .pricing_setup{background:rgba(255,255,255,.08);color:var(--muted-dark)}
.pricing_main .pricing_setup .tag{background:rgba(255,255,255,.14);color:var(--weiss)}
.pricing_main .text-style-link{color:var(--weiss)}
.pricing_side{border-radius:var(--radius-card);background:var(--weiss)}
main > section.surface-leinen .pricing_side{background:var(--weiss)}

/* ---------- 15. FAQ: Kopf links, Fragen als Liste mit Haarlinien ---------- */
.faq_component{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:var(--space-16)}
.faq_component > :first-child{position:sticky;top:var(--navbar-offset)}
.faq_list{padding:0;border-radius:0;background:transparent;border-top:1px solid var(--line)}
.faq_item,.faq_item[open],.faq_item:first-child{border:0;border-bottom:1px solid var(--line);border-radius:0;background:transparent}
.faq_question{padding:var(--space-6) 0;font-family:var(--font-display);font-weight:800;letter-spacing:-.02em;font-size:1.1875rem;line-height:1.35}
.faq_icon,.faq_item[open] .faq_icon{position:relative;width:2rem;height:2rem;margin:0;border:0;border-radius:50%;background:var(--weiss);transform:none;transition:transform .3s var(--ease),background-color .3s var(--ease)}
.faq_icon::before,.faq_icon::after{display:block;content:"";position:absolute;left:50%;top:50%;width:.75rem;height:2px;margin:-1px 0 0 -.375rem;border-radius:1px;background:var(--marine)}
.faq_icon::after{transform:rotate(90deg)}
.faq_item[open] .faq_icon{transform:rotate(45deg);background:var(--limette)}
.surface-leinen .faq_icon{background:var(--weiss)}
.faq_answer{padding:0 var(--space-12) var(--space-6) 0;color:var(--text-muted)}
@media (max-width:991px){.faq_component{grid-template-columns:minmax(0,1fr);gap:var(--space-8)}.faq_component > :first-child{position:static}}
@media (max-width:640px){.faq_question{font-size:1.0625rem;padding:var(--space-4) 0}.faq_answer{padding-right:0}}

/* ---------- 16. Abschluss: Check + Erstgespräch ---------- */
.finale_grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:var(--space-4)}
.finale_main{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);padding:var(--space-12);border-radius:var(--radius-card);background:var(--limette);color:var(--marine)}
.finale_main .text-style-tagline::before{background:var(--weiss)}
.finale_main p{color:var(--marine)}
.finale_side{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-6);padding:var(--space-12);border-radius:var(--radius-card);background:var(--weiss)}
.finale_person{display:flex;align-items:center;gap:var(--space-3)}
.finale_person img{width:3rem;height:3rem;border-radius:50%;object-fit:cover}
.finale_person-name{display:block;font-weight:600;line-height:1.3}
.finale_person-role{display:block;font-size:.875rem;color:var(--text-muted)}
.finale_steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-3);counter-reset:finale}
.finale_steps li{display:flex;gap:var(--space-3);margin:0;padding:0;font-size:.9375rem;line-height:1.5;color:var(--text-muted);counter-increment:finale}
.finale_steps li::before{content:counter(finale);flex:none;display:grid;place-items:center;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--himmel);color:var(--marine);font-size:.8125rem;font-weight:700}
.finale_cal{margin-top:var(--space-4);padding:var(--space-6);border-radius:var(--radius-card);background:var(--weiss)}
.finale_cal .kontakt_cal{min-height:40rem}
@media (max-width:991px){.finale_grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.finale_main,.finale_side{padding:var(--space-6)}.finale_cal{padding:var(--space-2)}}

/* CTA-Block der Unterseiten (Limette-Karte) */
.cta_component{gap:var(--space-12)}
.cta_box{background:var(--weiss)}

/* ---------- 17. Footer: volle Breite ---------- */
.footer_component{background:var(--marine)}

/* ---------- 18. Beiträge ---------- */
.section_article-hero .padding-section-large{padding-bottom:var(--space-6)}

/* ---------- 19. Einblenden ---------- */
.js [data-reveal]{transform:translateY(2rem);transition:opacity .7s var(--ease),transform .7s var(--ease)}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{transform:none;transition:none}}

/* ---------- 20. Nachträge zu älteren Ebenen ---------- */
main > section.section_fuer-wen.surface-leinen{background:var(--surface-tint)}
.pricing_capacity{margin-top:var(--space-6);padding-top:var(--space-6);border-top:1px solid var(--line);font-size:.875rem;line-height:1.5;color:var(--text-muted)}
main > section .fit_grid > .card.fit_card-no{background:var(--hafer-dunkel)}
.hero_meta{margin:0;padding:0;list-style:none}
/* Wissen: Filterleiste auf dem Handy seitlich scrollbar statt Überlauf */
@media (max-width:640px){.wissen_filter{max-width:100%;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;-webkit-overflow-scrolling:touch}.wissen_filter::-webkit-scrollbar{display:none}.wissen_filter-button{flex:none}}
@media (max-width:640px){.hero_meta{gap:var(--space-1) var(--space-4)}.hero_meta li + li::before{display:none}}
/* Beiträge: Definition als ruhige Fläche ohne einseitige Akzentlinie */
.article_definition{border-left:0;border-radius:var(--radius-card)}
/* Nummerierte Zeilen (jetzt_card) auf Marine lesbar */
.surface-dark .jetzt_text{color:var(--muted-dark)}
.surface-dark .jetzt_card::before{background:var(--limette);color:var(--marine)}
.section_header.is-statement h2.statement{max-width:62rem}