/* =========================================================
   base.css – Grundlage nach STANDARD 1.2, Werte aus DESIGN-GUIDELINE
   Container, Typografie, Buttons, Sektionen, Hilfsklassen.
   Projektweise nicht verändern; Farben/Schriften in tokens.css.
   Breakpoints: 1024 · 768 · 560 (desktop-first, max-width)
   ========================================================= */

:root{
  /* Layout */
  --container:1180px;            /* Inhaltsbreite ohne Seitenabstand (Guideline --wrap) */
  --container-text:960px;        /* schmale Spalte für textlastige Seiten (K1) */
  --gutter:clamp(20px,4vw,40px);
  --section-y:clamp(3.5rem,2.668rem + 3.696vw,5.625rem);   /* 56 → 90 px */
  --header-h:132px;              /* wird per JS gemessen (main.js, Modul Header) */
  --gap:28px;

  /* Schriftgrößen (360 → 1280 px Viewport) */
  --fs-h1:clamp(1.875rem,1.337rem + 2.391vw,3.25rem);      /* 30 → 52 */
  --fs-h1-page:clamp(1.875rem,1.435rem + 1.957vw,3rem);    /* 30 → 48 */
  --fs-h2:clamp(1.875rem,1.582rem + 1.304vw,2.625rem);     /* 30 → 42 */
  --fs-h2-sub:clamp(1.625rem,1.38rem + 1.087vw,2.25rem);   /* 26 → 36 */
  --fs-h3:clamp(1.125rem,1.076rem + .2174vw,1.25rem);      /* 18 → 20 */
  --fs-h3-lg:clamp(1.25rem,1.103rem + .6522vw,1.625rem);   /* 20 → 26 */
  --fs-body:1rem;                /* 16 */
  --fs-lead:1.125rem;            /* 18 */
  --fs-item-text:.9375rem;       /* 15 */
  --fs-small:.875rem;            /* 14 */
  --fs-eyebrow:.8125rem;         /* 13 */
  --fs-label:.75rem;             /* 12 */
  --fs-stat:clamp(2rem,1.609rem + 1.739vw,3rem);           /* 32 → 48 */
  --fs-quote:clamp(1.0625rem,.9647rem + .4348vw,1.3125rem);/* 17 → 21 */

  /* Effekte */
  --shadow:0 10px 40px rgba(60,45,35,.12);
  --ease:.2s ease;
  --icon:60px;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}
body{margin:0;background:var(--color-white);color:var(--color-text);font:400 var(--fs-body)/1.7 var(--font-body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.menu-open{overflow:hidden}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit}
p,figure,blockquote,dl,dd{margin:0}
ul,ol{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:400;color:var(--color-ink);text-transform:var(--head-case);letter-spacing:var(--head-tracking);line-height:1.2;margin:0;text-wrap:balance}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
h4{font-size:1rem}
@media (max-width:560px){h1,h2,h3{overflow-wrap:anywhere}}

/* ---------- Container (STANDARD §2) ---------- */
.container{width:min(var(--container),100% - 2 * var(--gutter));margin-inline:auto}
.container--text{width:min(var(--container-text),100% - 2 * var(--gutter));margin-inline:auto}
.container .container--text{width:min(var(--container-text),100%)}
.container--full{width:100%}

/* ---------- Sektionen ---------- */
.section{padding-block:var(--section-y)}
.section--tint{background:var(--color-accent-light)}
.section--dark{background:var(--color-accent-dark);color:var(--color-white)}
.section--accent{background:var(--color-accent);color:var(--color-white)}
.section--dark :is(h2,h3),.section--accent :is(h2,h3){color:var(--color-white)}
.section--flush-top{padding-top:0}
.section--tight{padding-block:calc(var(--section-y) * .6)}

/* ---------- Typo-Bausteine ---------- */
.eyebrow{font:500 var(--fs-eyebrow)/1.3 var(--font-head);letter-spacing:.14em;text-transform:uppercase;color:var(--color-accent)}
.lead{font-size:var(--fs-lead);color:var(--color-ink)}
.small{font-size:var(--fs-small)}
.muted{color:var(--color-muted)}
.label{font:500 var(--fs-label)/1.3 var(--font-head);letter-spacing:.12em;text-transform:uppercase;color:var(--color-accent)}
.prose p{font-size:1.0625rem;line-height:1.75}
.prose p+p,.prose p+ul,.prose ul+p{margin-top:16px}
.prose h2{font-size:var(--fs-h2-sub);margin:40px 0 16px}
.prose h3{margin:28px 0 10px}
.prose a{color:var(--color-ink)}
.prose ul{padding-left:20px}
.text-center{text-align:center}
.mt-l{margin-top:44px}

/* ---------- Buttons (Guideline §5: immer vollfarbig) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:500 var(--fs-eyebrow)/1.15 var(--font-head);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;text-align:center;padding:15px 26px;background:var(--btn-bg,var(--color-ink));color:var(--color-white);border:1px solid var(--btn-bg,var(--color-ink));cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.btn:hover{background:var(--btn-bg-hover,#000);border-color:var(--btn-bg-hover,#000);color:var(--color-white)}
.btn--light{background:var(--btn2-bg,var(--color-accent));border-color:var(--btn2-bg,var(--color-accent))}
.btn--light:hover{background:var(--btn2-bg-hover,var(--color-accent-dark));border-color:var(--btn2-bg-hover,var(--color-accent-dark))}
.btn--on-accent{background:var(--color-ink);border-color:var(--color-ink)}
.btn--ghost{background:var(--color-accent-dark);border-color:var(--color-accent-dark)}
.btn--ghost:hover{background:var(--color-ink);border-color:var(--color-ink)}
.btn--white{background:var(--color-white);border-color:var(--color-white);color:var(--color-ink)}
.btn--white:hover{background:var(--color-ink);border-color:var(--color-ink);color:var(--color-white)}
.btn--small{padding:10px 16px;font-size:.75rem}
.btn svg{width:16px;height:16px;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.btn-row--center{justify-content:center}
.link-arrow{font:500 var(--fs-eyebrow)/1.3 var(--font-head);letter-spacing:.1em;text-transform:uppercase;color:var(--color-accent);text-decoration:none}
.link-arrow:hover{color:var(--color-ink)}
@media (max-width:560px){
  .btn-row .btn{width:100%}
}

/* ---------- Barrierefreiheit ---------- */
:is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--color-accent);outline-offset:3px}
.skip-link{position:absolute;left:-999px;top:0;z-index:100;background:var(--color-white);color:var(--color-ink);padding:10px 14px;font-weight:600}
.skip-link:focus{left:12px;top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Icons ---------- */
.icon{width:var(--icon);height:var(--icon);color:var(--color-accent);flex:none}
.icon--sm{width:24px;height:24px}
.icon--xs{width:16px;height:16px}

/* ---------- Bild-Platzhalter (Guideline §10) ---------- */
.ph{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:20px;text-align:center;background:var(--color-accent-light);color:var(--color-accent);font:300 1.125rem/1.25 var(--font-head);text-transform:uppercase;letter-spacing:.08em}
.ph--accent{background:var(--color-accent);color:var(--color-white)}
.ratio-8-5{aspect-ratio:8/5}
.ratio-3-2{aspect-ratio:3/2}
.ratio-4-5{aspect-ratio:4/5}
.ratio-16-10{aspect-ratio:16/10}
.ratio-16-9{aspect-ratio:16/9}
.ratio-1-1{aspect-ratio:1/1}
.cover{width:100%;height:100%;object-fit:cover}
address{font-style:normal}