/* Schriften werden mitgeliefert, nicht von Google geladen.
   Archivo, Inter und IBM Plex Mono stehen unter der SIL Open Font License.
   Dadurch geht keine Besucher-IP an fremde Server – kein Cookie-Banner nötig. */

@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/archivo-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/archivo-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, 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:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/archivo-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/archivo-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, 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:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/archivo-latin-700-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap;
  src:url('assets/fonts/archivo-latin-ext-700-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, 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:'Archivo'; font-style:normal; font-weight:800; font-display:swap;
  src:url('assets/fonts/archivo-latin-800-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap;
  src:url('assets/fonts/archivo-latin-ext-800-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, 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:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/inter-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/inter-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, 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:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/inter-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/inter-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, 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:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/inter-latin-600-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap;
  src:url('assets/fonts/inter-latin-ext-600-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, 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:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, 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:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap;
  src:url('assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Zimmerei Hendrik Walther – Corporate Design 1.0
   Tokens und Regeln: siehe CI-Handbuch. */

:root{
  --span-50:#fbf8f2; --span-100:#f3ecdf; --span-200:#e5daca; --span-300:#cfc0a9;
  --kluft-900:#16130f; --kluft-600:#4a4038; --kluft-400:#6b5f52;
  --kernholz-600:#8e3b1e; --kernholz-800:#5e2411; --ocker-500:#d9932b; --fichte-600:#3d5a46;
  --fokus:var(--kernholz-600);
  --display:"Archivo","Helvetica Neue",Arial,sans-serif;
  --text:"Inter",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --technik:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --m04:4px; --m08:8px; --m12:12px; --m16:16px; --m24:24px; --m32:32px; --m48:48px; --m64:64px; --m96:96px;
  --breite:1240px;
}
@media (prefers-color-scheme: dark){
  :root{
    --span-50:#14120f; --span-100:#1c1916; --span-200:#2a251f; --span-300:#3b342b;
    --kluft-900:#f5efe4; --kluft-600:#c9bca9; --kluft-400:#a2957f;
    --kernholz-600:#e57b4f; --kernholz-800:#b8542c; --ocker-500:#f0b45c; --fichte-600:#7fa98a;
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--span-50); color:var(--kluft-900);
  font-family:var(--text); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
a{color:var(--kernholz-600); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--fokus); outline-offset:2px}
h1,h2,h3,h4{font-family:var(--display); letter-spacing:-.015em; margin:0}
h1{font-size:clamp(34px,6vw,64px); line-height:1.02; font-weight:800}
h2{font-size:clamp(26px,3.4vw,38px); line-height:1.1; font-weight:800}
h3{font-size:clamp(19px,2vw,23px); line-height:1.25; font-weight:700; letter-spacing:-.01em}
h4{font-size:17px; line-height:1.3; font-weight:700; letter-spacing:0}
p{margin:0 0 var(--m16); max-width:66ch}
ul,ol{margin:0 0 var(--m16); padding-left:1.3em; max-width:66ch}
li{margin-bottom:var(--m08)}
.wrap{max-width:var(--breite); margin:0 auto; padding:0 var(--m24)}
.eyebrow{font-family:var(--display); font-size:13px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--kernholz-600); margin:0 0 var(--m16)}
.label{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase}
.technik{font-family:var(--technik); font-size:14px; letter-spacing:.02em}
.muted{color:var(--kluft-400)}
.kante{height:3px; width:56px; background:var(--kernholz-600); margin:0 0 var(--m24)}

/* --- Kopf ------------------------------------------------------------ */
.skip{position:absolute; left:-9999px; top:0; background:var(--kluft-900); color:var(--span-50);
  padding:var(--m12) var(--m16); z-index:99; text-decoration:none}
.skip:focus{left:0}
.kopf{border-bottom:1px solid var(--span-200); background:var(--span-50); position:sticky; top:0; z-index:50}
.kopf .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--m24);
  padding-top:var(--m16); padding-bottom:var(--m16); flex-wrap:wrap}
.marke{display:inline-flex; align-items:center; gap:14px; text-decoration:none; color:inherit}
.marke .zeile1{display:block; font-family:var(--display); font-weight:700; font-size:10px;
  letter-spacing:.3em; color:var(--kernholz-600); line-height:1}
.marke .zeile2{display:block; font-family:var(--display); font-weight:800; font-size:20px;
  letter-spacing:-.01em; line-height:1.1; margin-top:3px; white-space:nowrap}
.nav{display:flex; gap:var(--m16); flex-wrap:wrap; align-items:center}
.nav a{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--kluft-600); text-decoration:none; padding:var(--m04) 0}
.nav a:hover{color:var(--kluft-900)}
.nav a[aria-current="page"]{color:var(--kluft-900); box-shadow:inset 0 -2px 0 0 var(--kernholz-600)}
.kopf-tel{font-family:var(--technik); font-size:14px; color:var(--kluft-900); text-decoration:none;
  border:2px solid var(--kluft-900); padding:8px 14px; border-radius:2px; white-space:nowrap}
.kopf-tel:hover{background:var(--kluft-900); color:var(--span-50)}
.kopf-rechts{display:flex; align-items:center; gap:var(--m12); order:3}
.nav{order:2}
.menu-btn{display:none; align-items:center; gap:10px; font-family:var(--display); font-size:12px;
  font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--kluft-900);
  background:transparent; border:2px solid var(--kluft-900); border-radius:2px;
  padding:9px 14px; cursor:pointer}
.menu-btn .balken{width:16px; height:2px; background:currentColor; box-shadow:0 5px 0 currentColor, 0 -5px 0 currentColor}
.menu-btn[aria-expanded="true"]{background:var(--kluft-900); color:var(--span-50)}
@media (max-width:1120px){
  .kopf .wrap{justify-content:space-between; padding-top:var(--m12); padding-bottom:var(--m12)}
  .menu-btn{display:inline-flex}
  .nav{display:none; order:3; width:100%; flex-direction:column; align-items:stretch; gap:0;
    margin-top:var(--m08); border-top:1px solid var(--span-200)}
  .nav.offen{display:flex}
  .nav a{padding:var(--m16) 0; border-bottom:1px solid var(--span-200); font-size:14px}
  .nav a[aria-current="page"]{box-shadow:inset 3px 0 0 0 var(--kernholz-600); padding-left:var(--m12)}
}
.nav-tel{display:none}
@media (max-width:1120px){
  .nav-tel{display:block; font-family:var(--technik); font-size:16px; color:var(--kluft-900);
    text-decoration:none; padding:var(--m16) 0; border-bottom:1px solid var(--span-200);
    font-weight:500}
}
@media (max-width:460px){ .kopf-tel{display:none} .marke .zeile2{font-size:17px} .marke svg{width:38px;height:36px} }

/* --- Bausteine ------------------------------------------------------- */
.btn{display:inline-block; font-family:var(--display); font-size:13px; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; padding:16px 26px; border-radius:2px;
  text-decoration:none; background:var(--kernholz-600); color:#fbf8f2; border:2px solid var(--kernholz-600)}
.btn:hover{background:var(--kernholz-800); border-color:var(--kernholz-800)}
.btn.zweit{background:transparent; color:var(--kluft-900); border-color:var(--kluft-900)}
.btn.zweit:hover{background:var(--kluft-900); color:var(--span-50)}
.abschnitt{padding:var(--m96) 0}
.abschnitt.eng{padding:var(--m64) 0}
.abschnitt+.abschnitt{border-top:1px solid var(--span-200)}
.dunkel{background:var(--kluft-900); color:#f5efe4}
.dunkel h1,.dunkel h2,.dunkel h3{color:#f5efe4}
.dunkel .eyebrow{color:#e57b4f}
.dunkel a{color:#e57b4f}
.fuge{height:16px; background-color:var(--span-50);
  background-image:repeating-linear-gradient(90deg,var(--kluft-900) 0 12px,transparent 12px 24px)}
.fuge.hell{background-color:var(--kluft-900);
  background-image:repeating-linear-gradient(90deg,var(--span-50) 0 12px,transparent 12px 24px)}
.raster{display:grid; gap:var(--m32)}
.r2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.r3{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.r4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.karte{background:var(--span-100); border:1px solid var(--span-200); padding:var(--m32)}
.karte h3{margin-bottom:var(--m12)}
.karte p:last-child{margin-bottom:0}

/* Bildplatzhalter – vor dem Livegang durch echte Fotos ersetzen */
.bild{background:var(--span-200); aspect-ratio:3/2; display:flex; align-items:center;
  justify-content:center; text-align:center; padding:var(--m24);
  font-family:var(--technik); font-size:12px; letter-spacing:.08em; color:var(--kluft-400)}
.bild.hoch{aspect-ratio:1/1}
.bild.dunkel{background:var(--kluft-900); color:var(--kluft-400)}

/* --- Aufmacher ------------------------------------------------------- */
.hero{display:grid; grid-template-columns:1.1fr .9fr; align-items:stretch}
@media (max-width:900px){ .hero{grid-template-columns:1fr} }
.hero-text{padding:var(--m96) var(--m48) var(--m96) 0}
@media (max-width:900px){ .hero-text{padding:var(--m64) 0 var(--m48)} }
.hero-text p.lead{font-size:19px; line-height:1.6; color:var(--kluft-600); margin-top:var(--m32)}
.antwort{display:block; color:var(--kernholz-600); margin-top:.08em}
.quelle{font-family:var(--technik); font-size:13px; line-height:1.5; color:var(--kluft-400);
  margin-top:var(--m16); max-width:44ch}
.hero-bild{background:var(--kluft-900); position:relative; display:flex; align-items:flex-end; min-height:360px}
.hero-bild .platzhalter{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--technik); font-size:12px; letter-spacing:.1em; color:#6b5f52; text-align:center; padding:var(--m24)}
.hero-bild figcaption{position:relative; padding:var(--m24); width:100%}
.hero-bild b{display:block; font-family:var(--display); font-size:17px; font-weight:700; color:#fbf8f2}
.hero-bild span{display:block; font-family:var(--technik); font-size:12px; color:#a2957f; margin-top:var(--m04)}

/* --- Leistungsleiste ------------------------------------------------- */
.leisten{display:grid; grid-template-columns:repeat(7,1fr); gap:var(--m16)}
@media (max-width:1000px){ .leisten{grid-template-columns:repeat(4,1fr)} }
@media (max-width:620px){ .leisten{grid-template-columns:repeat(2,1fr)} }
.leisten a{display:block; text-align:center; text-decoration:none; color:inherit;
  border:1px solid var(--span-200); padding:var(--m24) var(--m08); background:var(--span-100)}
.leisten a:hover{border-color:var(--kluft-900)}
.leisten svg{display:block; margin:0 auto var(--m12)}
.leisten span{font-family:var(--display); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; line-height:1.3; display:block}

/* --- Zahlen ---------------------------------------------------------- */
.zahlen{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:var(--m32)}
.zahlen b{display:block; font-family:var(--display); font-size:40px; font-weight:800;
  letter-spacing:-.02em; line-height:1; color:var(--kernholz-600)}
.zahlen span{display:block; margin-top:var(--m08); font-size:15px; color:var(--kluft-600)}

/* --- Leistungsseite -------------------------------------------------- */
.leistung{display:grid; grid-template-columns:72px 1fr; gap:var(--m32); padding:var(--m48) 0;
  border-bottom:1px solid var(--span-200); scroll-margin-top:120px}
.leistung:last-of-type{border-bottom:0}
@media (max-width:620px){ .leistung{grid-template-columns:1fr; gap:var(--m16)} }
.leistung h2{margin-bottom:var(--m16)}

/* --- Zeitleiste ------------------------------------------------------ */
.zeit{border-left:2px solid var(--span-300); padding-left:var(--m32); margin:0}
.zeit div{position:relative; padding-bottom:var(--m32)}
.zeit div::before{content:""; position:absolute; left:calc(-1 * var(--m32) - 6px); top:10px;
  width:10px; height:10px; background:var(--kernholz-600)}
.zeit dt{font-family:var(--technik); font-size:14px; color:var(--kernholz-600); font-weight:500}
.zeit dd{margin:var(--m04) 0 0; max-width:60ch}

/* --- Partner --------------------------------------------------------- */
.partner{list-style:none; padding:0; max-width:none; display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--m24)}
.partner li{border-top:1px solid var(--span-200); padding-top:var(--m12); margin:0}
.partner strong{display:block; font-family:var(--display); font-size:15px; font-weight:700}
.partner a{font-family:var(--technik); font-size:13px; word-break:break-all}

/* --- Kontaktblock ---------------------------------------------------- */
.kontaktdaten{list-style:none; padding:0; margin:0; max-width:none}
.kontaktdaten li{display:flex; gap:var(--m16); padding:var(--m16) 0; border-bottom:1px solid var(--span-200)}
.kontaktdaten .k{font-family:var(--display); font-size:12px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--kluft-400); width:110px; flex:none; padding-top:3px}
.kontaktdaten .v{font-family:var(--technik); font-size:16px}

/* --- Hinweiskasten (Redaktion) --------------------------------------- */
.hinweis{border:2px dashed var(--ocker-500); background:var(--span-100); padding:var(--m24); margin:var(--m32) 0}
.hinweis h4{color:var(--kluft-900); margin-bottom:var(--m08)}
.hinweis p:last-child{margin-bottom:0}
.hinweis p{font-size:15px}

/* --- Fuß ------------------------------------------------------------- */
.fuss{background:var(--kluft-900); color:#c9bca9; padding:var(--m64) 0 var(--m32)}
.fuss a{color:#c9bca9; text-decoration:none}
.fuss a:hover{color:#fbf8f2; text-decoration:underline}
.fuss-raster{display:grid; grid-template-columns:2fr 1fr 1fr; gap:var(--m48)}
@media (max-width:820px){ .fuss-raster{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .fuss-raster{grid-template-columns:1fr} }
.fuss h4{color:#fbf8f2; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  margin-bottom:var(--m16); color:#a2957f}
.fuss ul{list-style:none; padding:0; margin:0}
.fuss li{margin-bottom:var(--m08); font-size:15px}
.fuss .tun{font-family:var(--display); font-size:44px; font-weight:800; letter-spacing:-.03em;
  color:#fbf8f2; line-height:1; margin-bottom:var(--m16)}
.fuss .claim{font-size:15px; color:#a2957f; max-width:40ch}
.fuss-unten{border-top:1px solid #2a251f; margin-top:var(--m48); padding-top:var(--m24);
  display:flex; justify-content:space-between; gap:var(--m24); flex-wrap:wrap;
  font-family:var(--technik); font-size:12px; color:#6b5f52}
@media print{ .kopf,.fuss,.fuge{display:none} body{background:#fff} }