/* ============================================================
   VOGT & SOHN BAU — Design System
   1. Fonts  2. Tokens  3. Reset  4. Typography  5. Layout
   Selbst gehostete Schriften (DSGVO-konform, keine Google-Fonts-CDN)
   ============================================================ */

/* ---------- 1. FONTS ---------- */
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url('../fonts/bricolage-grotesque-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Bricolage Grotesque';
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url('../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:'Jakarta';
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url('../fonts/plus-jakarta-sans-latin-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Jakarta';
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url('../fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2') format('woff2-variations');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 2. TOKENS ---------- */
:root{
  /* Farbwelt: warmes, helles Papier + Ocker + Petrol */
  --paper:#FFFFFF;
  --cream:#FCFAF7;
  --sand:#F5EFE7;
  --sand-2:#EDE4D8;
  --line:#E4DACB;
  --line-soft:#EFE7DC;

  --ink:#14171B;
  --ink-2:#333B46;
  --muted:#5E6773;
  --muted-2:#8A93A0;

  --accent:#E07B39;
  --accent-2:#C05C1E;
  --accent-3:#9C4712;
  --accent-soft:#FCEEE2;
  --accent-glow:rgba(224,123,57,.28);

  --deep:#17384A;
  --deep-2:#0E2634;
  --deep-soft:#E7EEF2;

  --mint:#2C7A63;
  --mint-soft:#E4F1EC;
  --danger:#B4342A;

  /* Typo-Skala (fluid) */
  --fs-2xs:clamp(.6875rem,.66rem + .12vw,.75rem);
  --fs-xs:clamp(.75rem,.72rem + .16vw,.8125rem);
  --fs-sm:clamp(.875rem,.84rem + .18vw,.9375rem);
  --fs-base:clamp(1rem,.96rem + .22vw,1.0625rem);
  --fs-md:clamp(1.0625rem,1rem + .36vw,1.1875rem);
  --fs-lg:clamp(1.25rem,1.15rem + .5vw,1.5rem);
  --fs-xl:clamp(1.5rem,1.3rem + .95vw,2.125rem);
  --fs-2xl:clamp(1.9rem,1.55rem + 1.7vw,3rem);
  --fs-3xl:clamp(2.4rem,1.8rem + 2.9vw,4.25rem);
  --fs-4xl:clamp(2.9rem,1.9rem + 4.6vw,6rem);

  /* Abstände */
  --sp-1:.25rem;  --sp-2:.5rem;   --sp-3:.75rem;  --sp-4:1rem;
  --sp-5:1.5rem;  --sp-6:2rem;    --sp-7:2.5rem;  --sp-8:3rem;
  --sp-9:4rem;    --sp-10:5rem;   --sp-11:6.5rem; --sp-12:8rem;
  --section-y:clamp(4.5rem,3rem + 7vw,9rem);
  --container:78rem;
  --container-wide:88rem;
  --gutter:clamp(1.15rem,.6rem + 2.4vw,2.75rem);

  /* Radien */
  --r-xs:.5rem; --r-sm:.75rem; --r-md:1.15rem; --r-lg:1.75rem;
  --r-xl:2.25rem; --r-2xl:3rem; --r-pill:999px;

  /* Schatten – weich, warm, niemals hart-schwarz */
  --sh-xs:0 1px 2px rgba(38,26,14,.05);
  --sh-sm:0 2px 6px rgba(38,26,14,.05),0 1px 2px rgba(38,26,14,.04);
  --sh-md:0 10px 30px -12px rgba(38,26,14,.16),0 3px 10px -4px rgba(38,26,14,.07);
  --sh-lg:0 28px 60px -26px rgba(30,22,12,.24),0 10px 24px -14px rgba(30,22,12,.12);
  --sh-xl:0 48px 100px -40px rgba(26,20,12,.32),0 18px 44px -22px rgba(26,20,12,.14);
  --sh-glow:0 20px 60px -22px var(--accent-glow);
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.7);

  /* Motion */
  --e-out:cubic-bezier(.22,1,.36,1);
  --e-soft:cubic-bezier(.32,.72,0,1);
  --e-spring:cubic-bezier(.34,1.56,.64,1);
  --t-fast:.22s var(--e-out);
  --t-base:.42s var(--e-soft);
  --t-slow:.75s var(--e-soft);

  --nav-h:4.75rem;
}

/* ---------- 3. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  overflow-x:clip;
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 1.5rem);
  -moz-tab-size:4;tab-size:4;
}
body{
  font-family:'Jakarta',ui-sans-serif,system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:var(--fs-base);
  line-height:1.68;
  font-weight:400;
  color:var(--ink-2);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
  font-feature-settings:"kern" 1,"liga" 1,"calt" 1;
}
img,svg,video,canvas{display:block;max-width:100%;height:auto}
/* Basisgroesse fuer Inline-Icons; Komponentenregeln ueberschreiben sie spaeter */
svg[viewBox="0 0 24 24"]{width:1.3em;height:1.3em;flex:none}
img{background:var(--sand);color:transparent}
button,input,select,textarea{font:inherit;color:inherit;background:none;border:none}
button{cursor:pointer}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
:focus-visible{
  outline:2.5px solid var(--accent-2);
  outline-offset:3px;
  border-radius:.35rem;
}
::selection{background:var(--accent);color:#fff}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--sand)}
::-webkit-scrollbar-thumb{background:var(--sand-2);border-radius:99px;border:3px solid var(--sand)}
::-webkit-scrollbar-thumb:hover{background:#d9cbb8}

/* ---------- 4. TYPOGRAFIE ---------- */
h1,h2,h3,h4,h5,.display{
  hyphens:manual;
  font-family:'Bricolage Grotesque','Jakarta',sans-serif;
  color:var(--ink);
  font-weight:600;
  line-height:1.06;
  letter-spacing:-.028em;
  text-wrap:balance;
}
h1,.h1{font-size:var(--fs-3xl);font-weight:600}
h2,.h2{font-size:var(--fs-2xl)}
h3,.h3{font-size:var(--fs-xl);letter-spacing:-.022em;line-height:1.15}
h4,.h4{font-size:var(--fs-lg);letter-spacing:-.018em;line-height:1.25}
h5,.h5{font-size:var(--fs-md);letter-spacing:-.012em;line-height:1.35;font-weight:600}
p{text-wrap:pretty}
.lead{
  font-size:var(--fs-md);
  line-height:1.62;
  color:var(--muted);
  font-weight:400;
  max-width:44ch;
}
.lead-wide{max-width:60ch}
strong,b{font-weight:600;color:var(--ink)}
small{font-size:var(--fs-xs)}
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* Eyebrow / Kicker */
.eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:var(--fs-2xs);
  font-weight:600;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--accent-3);
  background:var(--accent-soft);
  border:1px solid rgba(224,123,57,.2);
  padding:.42rem .85rem .42rem .7rem;
  border-radius:var(--r-pill);
  line-height:1;
}
.eyebrow::before{
  content:"";width:.4rem;height:.4rem;border-radius:99px;
  background:var(--accent);
  box-shadow:0 0 0 3px rgba(224,123,57,.18);
  flex:none;
}
.eyebrow--plain{background:transparent;border-color:transparent;padding-left:0}
.eyebrow--deep{color:#cfe0e9;background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.14)}
.eyebrow--deep::before{background:var(--accent);box-shadow:0 0 0 3px rgba(224,123,57,.25)}

/* Akzent-Auszeichnung in Headlines */
.hl{position:relative;display:inline-block;color:var(--accent-2)}
.hl-underline{position:relative;display:inline-block}
.hl-underline::after{
  content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.32em;
  background:linear-gradient(90deg,var(--accent-glow),rgba(224,123,57,.42));
  border-radius:.2em;z-index:-1;
  transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--e-soft) .15s;
}
.is-visible .hl-underline::after,.hl-underline.is-visible::after{transform:scaleX(1)}

/* ---------- 5. LAYOUT ---------- */
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container-wide{width:100%;max-width:var(--container-wide);margin-inline:auto;padding-inline:var(--gutter)}
.container-narrow{width:100%;max-width:54rem;margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section-y);position:relative}
.section--tight{padding-block:clamp(3rem,2rem + 4vw,5.5rem)}
.section--sand{background:var(--sand)}
.section--paper{background:var(--paper)}
.section--deep{background:var(--deep);color:#D8E3EA}
.section--deep h1,.section--deep h2,.section--deep h3,.section--deep h4,.section--deep h5{color:#fff}
.section--deep .lead{color:#A9C0CE}
.section--deep strong{color:#fff}

.stack>*+*{margin-top:var(--sp-4)}
.stack-sm>*+*{margin-top:var(--sp-2)}
.stack-lg>*+*{margin-top:var(--sp-6)}

.grid{display:grid;gap:var(--sp-5)}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.g-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.gap-lg{gap:clamp(1.5rem,1rem + 2.4vw,3rem)}
.gap-xl{gap:clamp(2rem,1.2rem + 3.6vw,4.5rem)}

/* Section-Kopf */
.sec-head{max-width:56rem;margin-bottom:clamp(2.5rem,1.8rem + 2.4vw,4rem)}
.sec-head--center{margin-inline:auto;text-align:center}
.sec-head--center .lead{margin-inline:auto}
.sec-head .eyebrow{margin-bottom:1.25rem}
.sec-head h2{margin-bottom:1.1rem}
.sec-head--split{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(1.5rem,1rem + 3vw,4rem);align-items:end;max-width:none;
}
.sec-head--split .lead{max-width:38ch}

/* Utilities */
.txt-center{text-align:center}
.mx-auto{margin-inline:auto}
.mt-0{margin-top:0}.mt-3{margin-top:var(--sp-3)}.mt-4{margin-top:var(--sp-4)}
.mt-5{margin-top:var(--sp-5)}.mt-6{margin-top:var(--sp-6)}.mt-8{margin-top:var(--sp-8)}
.mb-0{margin-bottom:0}.mb-4{margin-bottom:var(--sp-4)}.mb-6{margin-bottom:var(--sp-6)}
.w-full{width:100%}
.relative{position:relative}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip-link{
  position:absolute;left:1rem;top:-4rem;z-index:200;
  background:var(--ink);color:#fff;padding:.75rem 1.25rem;border-radius:var(--r-sm);
  transition:top var(--t-fast);font-weight:600;font-size:var(--fs-sm);
}
.skip-link:focus{top:1rem}

/* Trenner */
.rule{height:1px;background:var(--line);border:0}
.rule--soft{background:var(--line-soft)}

@media (max-width:960px){
  .g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sec-head--split{grid-template-columns:1fr;align-items:start}
}
@media (max-width:640px){
  .g-2,.g-3,.g-4{grid-template-columns:1fr}
  :root{--nav-h:4.25rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
}