/* ==========================================================================
   Schreinerei Lindenhof - Demo-Konzept 03 "Der Betrieb" (Berezka Web)
   Tokens 1:1 aus dem Berezka-Web-Design-System; Tier-3-Artdirection:
   Support-Blau als Zweitton, Randstempel-Sektionsnummern, Live-Formular.
   ========================================================================== */

/* ============ tokens ============ */
:root{
  --bg:#F3F1EB; --surface:#FBFAF6; --surface-2:#EAE7DF;
  --ink:#1D2025; --ink-soft:#43464D; --ink-muted:#5F636B;
  --line:#D8D4C8; --line-strong:#B9B4A5;
  --accent:#BC3F2C; --accent-ink:#A93823; --accent-contrast:#FFFFFF;
  --blue-ink:#24405F; --ok:#2F6B46;
  --lift:0 1px 2px rgb(15 18 22 / .06), 0 14px 34px -14px rgb(15 18 22 / .20);
  --press:inset 0 1px 3px rgb(15 18 22 / .22);
  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --ease:cubic-bezier(.22,.61,.2,1);
  --fs-hero:clamp(2.5rem, 1rem + 4.6vw, 4.3rem);
  --fs-h2:clamp(1.8rem, 1.2rem + 1.9vw, 2.8rem);
  --fs-h3:clamp(1.2rem, 1.08rem + .45vw, 1.4rem);
  --sect:clamp(4.5rem, 10vw, 7.5rem);
  --gut:clamp(1.25rem, 4vw, 3rem);
  --font-display:'Literata', Georgia, 'Times New Roman', serif;
  --font-sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, 'SF Mono', monospace;
}
[data-theme="dark"]{
  --bg:#12151A; --surface:#1A1E25; --surface-2:#232830;
  --ink:#EAE7DF; --ink-soft:#C4C1B8; --ink-muted:#9297A0;
  --line:#2E333C; --line-strong:#454B56;
  --accent:#E2664A; --accent-ink:#EC7B5F; --accent-contrast:#1A0C08;
  --blue-ink:#7FA3CC; --ok:#7DBE97;
  --lift:0 1px 2px rgb(0 0 0 / .3), 0 14px 34px -14px rgb(0 0 0 / .5);
  --press:inset 0 1px 3px rgb(0 0 0 / .45);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --bg:#12151A; --surface:#1A1E25; --surface-2:#232830;
    --ink:#EAE7DF; --ink-soft:#C4C1B8; --ink-muted:#9297A0;
    --line:#2E333C; --line-strong:#454B56;
    --accent:#E2664A; --accent-ink:#EC7B5F; --accent-contrast:#1A0C08;
    --blue-ink:#7FA3CC; --ok:#7DBE97;
    --lift:0 1px 2px rgb(0 0 0 / .3), 0 14px 34px -14px rgb(0 0 0 / .5);
    --press:inset 0 1px 3px rgb(0 0 0 / .45);
  }
}

/* ============ Farbwelten: 3 weitere kuratierte Paletten (design-system.md 2) ============ */
[data-palette="gezeiten"]{
  --bg:#EDF0F2; --surface:#F8FAFB; --surface-2:#E0E5E9;
  --ink:#171D24; --ink-soft:#3D4650; --ink-muted:#59636E;
  --line:#CED5DA; --line-strong:#A8B2BB;
  --accent:#2E6284; --accent-ink:#295874; --accent-contrast:#FFFFFF;
  --blue-ink:#3A6B5F; --ok:#2F6B46;
}
[data-palette="gezeiten"][data-theme="dark"]{
  --bg:#0F141B; --surface:#161C25; --surface-2:#1F2731;
  --ink:#E6EAEE; --ink-soft:#BEC6CE; --ink-muted:#8E99A5;
  --line:#2A333E; --line-strong:#43505D;
  --accent:#5B9BD0; --accent-ink:#7FB3DE; --accent-contrast:#06121C;
  --blue-ink:#6FC2B4; --ok:#7DBE97;
}
[data-palette="forst"]{
  --bg:#F0EFE4; --surface:#FAF9F1; --surface-2:#E5E3D3;
  --ink:#1C211C; --ink-soft:#414840; --ink-muted:#5D655C;
  --line:#D4D1BE; --line-strong:#B0AC94;
  --accent:#2E6B4F; --accent-ink:#2A5F47; --accent-contrast:#FFFFFF;
  --blue-ink:#8A6414; --ok:#2F6B46;
}
[data-palette="forst"][data-theme="dark"]{
  --bg:#101613; --surface:#17201B; --surface-2:#202B24;
  --ink:#E7E9DF; --ink-soft:#C1C6B8; --ink-muted:#91998C;
  --line:#29342C; --line-strong:#435046;
  --accent:#4E9E77; --accent-ink:#82C4A0; --accent-contrast:#06130C;
  --blue-ink:#D3B36A; --ok:#7DBE97;
}
[data-palette="graphit"]{
  --bg:#F0F0EE; --surface:#FAFAF8; --surface-2:#E4E4E1;
  --ink:#1B1D20; --ink-soft:#43454A; --ink-muted:#5F6166;
  --line:#D4D4CF; --line-strong:#ACACA5;
  --accent:#B87400; --accent-ink:#7E5300; --accent-contrast:#221703;
  --blue-ink:#3E566E; --ok:#2F6B46;
}
[data-palette="graphit"][data-theme="dark"]{
  --bg:#131417; --surface:#1B1C20; --surface-2:#25262B;
  --ink:#E8E7E3; --ink-soft:#C2C1BC; --ink-muted:#94959A;
  --line:#2C2D33; --line-strong:#46484F;
  --accent:#E8A83E; --accent-ink:#ECB255; --accent-contrast:#1F1403;
  --blue-ink:#8FA9C4; --ok:#7DBE97;
}

/* ============ Farbwelt switcher ============ */
.pal-btn{appearance:none; cursor:pointer; width:40px; height:40px; border-radius:999px;
  border:1px solid var(--line); background:var(--surface); color:var(--ink-soft);
  display:inline-flex; align-items:center; justify-content:center; padding:0}
.pal-btn .chip{width:18px; height:18px; border-radius:999px; flex:none; pointer-events:none;
  background:linear-gradient(135deg, var(--pc-p) 0 50%, var(--pc-a) 50% 100%);
  box-shadow:inset 0 0 0 1px rgb(0 0 0 / .22)}
.pal-btn[data-pal="siegel"]{--pc-p:#F3F1EB; --pc-a:#BC3F2C}
.pal-btn[data-pal="gezeiten"]{--pc-p:#EDF0F2; --pc-a:#2E6284}
.pal-btn[data-pal="forst"]{--pc-p:#F0EFE4; --pc-a:#2E6B4F}
.pal-btn[data-pal="graphit"]{--pc-p:#F0F0EE; --pc-a:#B87400}
.pal-btn:hover .chip{box-shadow:inset 0 0 0 1px rgb(0 0 0 / .22), 0 0 0 2px var(--bg), 0 0 0 3px var(--ink-muted)}
/* mit Farbwelt-Reihe wird der Kopf eng: doppelte CTA erst ab breiten Screens */
@media (max-width: 1280px) and (min-width: 941px){
  a.btn.header-cta{display:none}
}
@media (max-width: 940px){
  .site-inner{flex-wrap:wrap; padding-block:4px}
  .pal-row{order:6}
  .langs{order:5; margin-left:auto}
  main section[id]{scroll-margin-top:150px}
}
@media (prefers-reduced-motion: reduce){ body{transition:none !important} }

/* ============ base ============ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }
body{
  margin:0; background:var(--bg); background-image:var(--grain);
  color:var(--ink); font-family:var(--font-sans);
  font-size:1.0625rem; line-height:1.65;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3{font-family:var(--font-display); line-height:1.12; margin:0; font-weight:600; letter-spacing:-.01em}
p{margin:0 0 1rem}
a{color:var(--accent-ink); text-underline-offset:3px}
a:hover{text-decoration-thickness:2px}
img,svg{max-width:100%}
::selection{background:var(--accent); color:var(--accent-contrast)}
:focus-visible{outline:2px solid var(--accent-ink); outline-offset:2px; border-radius:2px}
.container{max-width:1200px; margin-inline:auto; padding-inline:var(--gut)}
.skip{position:absolute; left:-9999px; top:0; background:var(--surface); color:var(--ink); padding:.8rem 1.2rem; z-index:100; border:1px solid var(--line-strong); border-radius:8px}
.skip:focus{left:12px; top:12px}
main section{scroll-margin-top:96px}

.mono{font-family:var(--font-mono)}
.eyebrow{
  font-family:var(--font-mono); font-size:.8125rem; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted);
  display:flex; align-items:center; gap:1rem; margin:0 0 1.1rem;
}
.eyebrow .idx{color:var(--accent-ink)}
.eyebrow::after{content:""; flex:0 1 120px; height:1px; background:var(--line-strong)}

/* ============ reveals (IO-gated; sichtbar ohne JS) ============ */
.js [data-reveal]{opacity:0; transform:translateY(14px)}
.js [data-reveal].in{
  opacity:1; transform:none;
  transition:opacity .65s var(--ease) calc(var(--rd,0)*70ms), transform .65s var(--ease) calc(var(--rd,0)*70ms);
}
@media (prefers-reduced-motion: reduce){
  .js [data-reveal]{opacity:1; transform:none; transition:none}
}

/* ============ demo bar ============ */
.demobar{
  font-family:var(--font-mono); font-size:.6875rem; letter-spacing:.12em; text-transform:uppercase;
  text-align:center; padding:.55rem var(--gut); color:var(--ink-muted);
  background:var(--surface-2); border-bottom:1px solid var(--line);
}
.demobar a{color:var(--accent-ink); text-decoration:none}
.demobar a:hover{text-decoration:underline}

/* ============ header ============ */
.site{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:box-shadow .28s var(--ease);
}
.site.scrolled{box-shadow:0 6px 24px -12px rgb(15 18 22 / .22)}
.site-inner{display:flex; align-items:center; gap:1.4rem; min-height:74px}
.brand{display:flex; align-items:center; gap:.7rem; text-decoration:none; color:var(--ink); margin-right:auto; padding:.4rem 0}
.brand svg{width:38px; height:38px; flex:none}
.brand-name{font-family:var(--font-display); font-weight:600; font-size:1.16rem; line-height:1.15; letter-spacing:-.01em}
.brand-sub{display:block; font-family:var(--font-mono); font-size:.59rem; font-weight:500; letter-spacing:.17em; text-transform:uppercase; color:var(--ink-muted); margin-top:.14rem}
.nav-wrap ul{display:flex; gap:.15rem; list-style:none; margin:0; padding:0}
.nav-wrap a{
  display:inline-flex; align-items:center; min-height:44px; padding:.55rem .8rem;
  font-weight:500; font-size:.95rem; color:var(--ink-soft); text-decoration:none;
  border-radius:8px; position:relative; white-space:nowrap;
}
.nav-wrap a:hover{color:var(--ink); background:var(--surface-2)}
.nav-wrap a.active{color:var(--ink)}
.nav-wrap a.active::after{
  content:""; position:absolute; left:.8rem; right:.8rem; bottom:4px; height:2px;
  background:var(--accent); border-radius:2px;
}
.header-cta{margin-left:.4rem}
.langs{position:relative}
.lang-btn{appearance:none; background:transparent; border:0; cursor:pointer; color:var(--ink-soft);
  padding:8px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center;
  transition:color .2s, transform .2s}
.lang-btn:hover{color:var(--ink); transform:translateY(-1px)}
.lang-btn .flag-ic{width:22px; height:16px; border-radius:2px; box-shadow:0 0 0 1px rgb(0 0 0 / .08)}
.lang-dropdown{display:none; position:absolute; top:calc(100% + 8px); right:0;
  background:var(--surface); border:1px solid var(--line); border-radius:10px;
  padding:6px; margin:0; list-style:none; z-index:60; box-shadow:0 10px 28px rgb(0 0 0 / .16);
  grid-template-columns:repeat(4, 44px); gap:1px}
.langs.open .lang-dropdown{display:grid}
.lang-dropdown li{width:44px; height:44px; list-style:none}
.lang-dropdown a{display:flex; align-items:center; justify-content:center; width:100%; height:100%;
  border-radius:8px; text-decoration:none; border:0; cursor:pointer; transition:background .15s}
.lang-dropdown a:hover{background:var(--surface-2)}
.lang-dropdown .lang-active a{background:var(--surface-2); outline:1px solid var(--line)}
.lang-dropdown .flag-ic{width:28px; height:21px; border-radius:3px; box-shadow:0 0 0 1px rgb(0 0 0 / .08)}
.theme-btn,.menu-btn{
  width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center;
  background:none; border:1px solid var(--line-strong); border-radius:8px; cursor:pointer;
  color:var(--ink-soft); flex:none;
}
.theme-btn:hover,.menu-btn:hover{color:var(--ink); background:var(--surface-2)}
.theme-btn svg{width:19px; height:19px}
.theme-btn .ic-moon{display:none}
[data-theme="dark"] .theme-btn .ic-sun{display:none}
[data-theme="dark"] .theme-btn .ic-moon{display:block}
.menu-btn{display:none}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{
  content:""; display:block; width:18px; height:2px; background:currentColor; border-radius:2px; position:relative;
}
.menu-btn span::before{position:absolute; top:-6px}
.menu-btn span::after{position:absolute; top:6px}
@media (max-width: 940px){
  .site-inner{gap:.75rem}
  .menu-btn{display:inline-flex}
  a.btn.header-cta{display:none} /* Spezifität > .btn{display:inline-flex} weiter unten */
  .nav-wrap{
    display:none; position:absolute; top:100%; left:0; right:0;
    background:var(--surface); border-bottom:1px solid var(--line-strong);
    box-shadow:0 18px 32px -18px rgb(15 18 22 / .3); padding:.4rem var(--gut) 1rem;
  }
  .site.menu-open .nav-wrap{display:block}
  .nav-wrap ul{flex-direction:column; gap:0}
  .nav-wrap a{display:flex; width:100%; min-height:48px; border-top:1px solid var(--line); border-radius:0; font-size:1.02rem}
  .nav-wrap li:first-child a{border-top:0}
  .nav-wrap a.active::after{display:none}
  .nav-wrap a.active{color:var(--accent-ink)}
}
@media (max-width: 480px){
  .brand svg{width:32px; height:32px}
  .brand-name{font-size:1.02rem}
  .brand-sub{font-size:.55rem}
}

/* ============ buttons ============ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.75rem 1.5rem; border-radius:8px;
  font-family:var(--font-sans); font-weight:600; font-size:1rem; line-height:1.2;
  text-decoration:none; cursor:pointer; border:1px solid transparent;
  transition:transform .14s var(--ease), box-shadow .14s var(--ease), background .28s var(--ease);
}
.btn-primary{background:var(--accent); color:var(--accent-contrast)}
.btn-primary:hover{box-shadow:var(--lift); transform:translateY(-1px)}
.btn-ghost{background:transparent; color:var(--ink); border-color:var(--line-strong)}
.btn-ghost:hover{background:var(--surface-2)}
.btn:active{transform:scale(.97); box-shadow:var(--press)}
.btn-sm{min-height:44px; padding:.55rem 1.1rem; font-size:.92rem}

/* ============ sections + margin stamps ============ */
.sect{padding-block:var(--sect); position:relative}
.sect-alt{background:var(--surface); border-block:1px solid var(--line)}
.sect .container{position:relative}
.stamp-side{display:none}
@media (min-width: 1360px){
  .stamp-side{
    display:block; position:absolute; left:-3.4rem; top:.5rem;
    writing-mode:vertical-rl; transform:rotate(180deg);
    font-family:var(--font-mono); font-size:.6875rem; font-weight:500;
    letter-spacing:.2em; text-transform:uppercase; color:var(--ink-muted); opacity:.85;
  }
  .stamp-side::before{content:""; display:block; width:1px; height:44px; background:var(--line-strong); margin:0 auto .8rem}
}
.sec-h2{font-size:var(--fs-h2); max-width:24ch; margin-bottom:1.1rem}
.sec-sub{color:var(--ink-soft); max-width:58ch; font-size:1.05rem; margin-bottom:2.6rem}

/* ============ hero ============ */
.hero{padding-block:clamp(3.2rem, 7vw, 5.5rem) clamp(3.6rem, 8vw, 6rem)}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,5vw,4.5rem); align-items:center}
.hero .eyebrow{color:var(--accent-ink)}
.hero .eyebrow::after{content:none} /* Zeile bricht bei langem Text um - Regel-Linie nur in Sektions-Eyebrows */
.hero h1{font-size:var(--fs-hero); font-weight:600; letter-spacing:-.015em; margin-bottom:1.3rem; max-width:16ch}
.hero h1 em{font-style:italic; color:var(--accent-ink)}
.hero-sub{font-size:1.11rem; color:var(--ink-soft); max-width:56ch; margin-bottom:2rem}
.hero-cta{display:flex; flex-wrap:wrap; gap:.9rem; align-items:center}
.hero-note{width:100%; font-family:var(--font-mono); font-size:.75rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-muted); margin-top:1.1rem}

/* client badge (Siegel-Grammatik der Studiomarke, als Betriebs-Plakette) */
.hero-badge{display:flex; flex-direction:column; align-items:center; gap:1.3rem}
.badge{
  position:relative; width:min(290px, 34vw); aspect-ratio:1; border:0; background:none;
  padding:0; cursor:pointer; color:var(--ink-soft); border-radius:999px;
}
.badge svg{width:100%; height:100%; overflow:visible; display:block}
.badge .ring-rot{transform-origin:50% 50%; animation:spin 90s linear infinite}
.badge .ring-text{font-family:var(--font-mono); font-size:11.4px; letter-spacing:3.1px; fill:currentColor}
.badge circle{fill:none; stroke:currentColor}
.badge .plank{fill:var(--accent)}
.badge-imprint{position:absolute; inset:5%; border:3px solid var(--accent); border-radius:999px; opacity:0; pointer-events:none}
.badge.stamped svg{animation:stamp .5s var(--ease)}
.badge.stamped .badge-imprint{animation:imprint .9s var(--ease)}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes stamp{0%{transform:scale(1)}35%{transform:scale(.94)}70%{transform:scale(1.015)}100%{transform:scale(1)}}
@keyframes imprint{0%{opacity:.85; transform:scale(.96)}100%{opacity:0; transform:scale(1.06)}}
.measure{color:var(--ink-muted); width:min(250px, 30vw)}
.measure text{font-family:var(--font-mono); font-size:10px; letter-spacing:.12em; fill:currentColor}
.measure line,.measure path{stroke:currentColor; stroke-width:1}
@media (prefers-reduced-motion: reduce){
  .badge .ring-rot{animation:none}
  .badge.stamped svg,.badge.stamped .badge-imprint{animation:none}
}
@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr}
  .hero-badge{order:2; margin-top:.5rem}
  .badge{width:190px}
  .measure{display:none}
}

/* ============ trust strip ============ */
.strip{
  border-block:1px solid var(--line); background:var(--surface);
  padding:.85rem var(--gut); text-align:center;
  font-family:var(--font-mono); font-size:.75rem; font-weight:500;
  letter-spacing:.13em; text-transform:uppercase; color:var(--ink-muted);
  line-height:2;
}
.strip b{font-weight:500; color:var(--accent-ink)}

/* ============ Leistungen ============ */
.svc-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem}
@media (max-width: 1020px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 620px){.svc-grid{grid-template-columns:1fr}}
.svc{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:1.6rem 1.5rem 1.4rem; display:flex; flex-direction:column; gap:.85rem;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.svc:hover{transform:translateY(-3px); box-shadow:var(--lift); border-color:var(--line-strong)}
.svc-top{display:flex; align-items:flex-start; justify-content:space-between; gap:1rem}
.svc-top svg{width:46px; height:46px; color:var(--blue-ink); flex:none}
.svc-idx{font-family:var(--font-mono); font-size:.78rem; font-weight:500; letter-spacing:.14em; color:var(--accent-ink)}
.svc h3{font-size:var(--fs-h3)}
.svc p{color:var(--ink-soft); font-size:.97rem; margin:0}
.svc-expand{color:var(--ink-soft); font-size:.92rem; margin:0; padding-top:.2rem; border-top:1px dashed var(--line)}
.svc-feat{
  margin-top:auto; padding-top:1rem; border-top:1px dashed var(--line);
  font-size:.89rem; color:var(--ink-muted); display:flex; gap:.55rem; align-items:flex-start;
}
.svc-feat svg{width:17px; height:17px; color:var(--ok); flex:none; margin-top:2px}

/* ============ Projekte / Galerie ============ */
.works{display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem}
@media (max-width: 980px){.works{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 640px){
  .works{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:1rem;
    margin-inline:calc(var(--gut) * -1); padding-inline:var(--gut); padding-bottom:.6rem;
    -webkit-overflow-scrolling:touch}
  .works::-webkit-scrollbar{height:6px}
  .wk{flex:0 0 76vw; scroll-snap-align:center}
}
.wk{
  border:1px solid var(--line); border-radius:12px; overflow:hidden; background:var(--surface);
  transition:transform .28s var(--ease), box-shadow .28s var(--ease);
}
.wk:hover{transform:translateY(-3px); box-shadow:var(--lift)}
.wk-img{aspect-ratio:4/3; position:relative; display:grid; place-items:center; overflow:hidden}
.wk-img::before{
  content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(101deg,
      rgb(255 250 240 / .055) 0 2px, transparent 2px 9px,
      rgb(20 10 0 / .07) 9px 11px, transparent 11px 26px);
}
.wk-img::after{content:""; position:absolute; inset:0; background-image:var(--grain); box-shadow:inset 0 0 60px rgb(20 10 0 / .28)}
.wk-img svg{position:relative; z-index:1; width:44%; max-width:120px; color:#F4EDDD; opacity:.92}
.w-oak{background:linear-gradient(112deg,#A87F4C,#845C31 58%,#96703F)}
.w-ash{background:linear-gradient(112deg,#CBB18A,#A98C5E 60%,#BA9E6F)}
.w-walnut{background:linear-gradient(112deg,#6B4A2E,#4B3017 62%,#5D3F24)}
.w-pine{background:linear-gradient(112deg,#C79A5F,#A0763E 58%,#B4894F)}
.w-beech{background:linear-gradient(112deg,#B98A62,#94663D 60%,#A57850)}
.w-cherry{background:linear-gradient(112deg,#8A4F33,#66351D 62%,#794327)}
.wk-cap{padding:.95rem 1.15rem 1rem; border-top:1px solid var(--line)}
.wk-cap b{display:block; font-weight:600; font-size:.99rem; margin-bottom:.2rem}
.wk-tag{font-family:var(--font-mono); font-size:.7rem; font-weight:500; letter-spacing:.13em; text-transform:uppercase; color:var(--ink-muted)}
.wk-more{display:block; font-size:.88rem; color:var(--ink-soft); margin-top:.55rem; font-family:var(--font-sans); letter-spacing:normal; text-transform:none}

/* ============ Über uns ============ */
.about-grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4rem); align-items:start; margin-bottom:3rem}
@media (max-width: 880px){.about-grid{grid-template-columns:1fr}}
.about-copy p{color:var(--ink-soft); max-width:58ch}
.about-copy p b{color:var(--ink)}
.facts{
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:1.1rem 1.3rem; margin-top:1.6rem;
  font-family:var(--font-mono); font-size:.78rem; font-weight:500;
  letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); line-height:2.1;
}
.facts b{color:var(--accent-ink); font-weight:500}
.team{display:grid; grid-template-columns:repeat(2,1fr); gap:1.2rem}
@media (max-width: 480px){.team{grid-template-columns:1fr}}
.tm{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:1.3rem 1.25rem; display:flex; flex-direction:column; gap:.55rem;
}
.tm-ava{
  width:60px; height:60px; border-radius:999px; background:var(--surface-2);
  border:1px solid var(--line-strong); display:grid; place-items:center;
  font-family:var(--font-display); font-style:italic; font-weight:600;
  font-size:1.5rem; color:var(--blue-ink); position:relative;
}
.tm-ava::after{content:""; position:absolute; right:2px; bottom:2px; width:10px; height:10px; border-radius:99px; background:var(--accent); border:2px solid var(--surface)}
.tm b{font-weight:600; font-size:1.02rem}
.tm-role{font-family:var(--font-mono); font-size:.68rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted)}
.tm p{font-size:.92rem; color:var(--ink-soft); margin:0}
.frieda{
  grid-column:1 / -1; display:flex; align-items:center; gap:.7rem;
  font-style:italic; color:var(--ink-muted); font-size:.95rem; padding:.4rem .3rem 0;
}
.frieda svg{width:22px; height:22px; color:var(--line-strong); flex:none}

/* ============ FAQ ============ */
.faq-wrap{max-width:820px}
.faq{border:1px solid var(--line); border-radius:12px; background:var(--surface); overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq summary{
  list-style:none; cursor:pointer; display:flex; justify-content:space-between; gap:1.2rem;
  align-items:center; padding:1.15rem 1.4rem; font-weight:600; font-size:1.02rem; min-height:56px;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--surface-2)}
.fx{width:20px; height:20px; position:relative; flex:none}
.fx::before,.fx::after{content:""; position:absolute; background:var(--accent-ink); border-radius:2px; transition:transform .28s var(--ease)}
.fx::before{left:2px; right:2px; top:9px; height:2px}
.fx::after{top:2px; bottom:2px; left:9px; width:2px}
.faq details[open] .fx::after{transform:scaleY(0)}
.faq-a{padding:0 1.4rem 1.3rem; color:var(--ink-soft); max-width:70ch}
.faq-a p{margin:0 0 .7rem}
.faq-a p:last-child{margin:0}
.faq-hint{font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-muted); margin-top:1.1rem}

/* ============ Kontakt ============ */
.contact-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4.5vw,3.6rem); align-items:start}
@media (max-width: 880px){.contact-grid{grid-template-columns:1fr}}
.f-row{display:grid; grid-template-columns:1fr 1fr; gap:1.1rem}
@media (max-width: 560px){.f-row{grid-template-columns:1fr}}
.f-field{margin-bottom:1.15rem}
.f-field label{display:block; font-weight:500; font-size:.93rem; margin-bottom:.4rem}
.f-field label .opt{color:var(--ink-muted); font-weight:400; font-size:.85rem}
.f-field input,.f-field select,.f-field textarea{
  width:100%; background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:8px;
  padding:.72rem .9rem; font:inherit; font-size:1rem; min-height:48px;
  transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.f-field textarea{min-height:132px; resize:vertical}
.f-field select{appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F636B' stroke-width='2'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9rem center; padding-right:2.4rem}
.f-field input:focus,.f-field select:focus,.f-field textarea:focus{
  outline:none; border-color:var(--blue-ink);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--blue-ink) 20%, transparent);
}
.f-field .invalid{border-color:var(--accent-ink)}
.f-field .invalid:focus{border-color:var(--accent-ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent)}
.f-err{display:block; color:var(--accent-ink); font-size:.85rem; margin-top:.35rem}
.f-err[hidden]{display:none}
.f-consent{display:flex; gap:.75rem; align-items:flex-start; margin:.2rem 0 1.4rem; cursor:pointer}
.f-consent input{
  appearance:none; width:22px; height:22px; flex:none; margin-top:2px;
  border:1px solid var(--line-strong); border-radius:6px; background:var(--surface);
  display:grid; place-items:center; cursor:pointer;
}
.f-consent input:checked{background:var(--accent); border-color:var(--accent)}
.f-consent input:checked::before{content:""; width:11px; height:6px; border-left:2.5px solid var(--accent-contrast); border-bottom:2.5px solid var(--accent-contrast); transform:rotate(-45deg) translateY(-1px)}
.f-consent input.invalid{border-color:var(--accent-ink); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent)}
.f-consent span{font-size:.9rem; color:var(--ink-soft)}
.form-ok{
  border:1.5px solid var(--ok); border-radius:12px; background:var(--surface);
  padding:2rem 1.8rem; position:relative;
}
.form-ok:focus,.form-ok:focus-visible{outline:none} /* programmatischer Fokus (Statusmeldung) braucht keinen Ring */
.form-ok h3{font-size:1.35rem; margin-bottom:.7rem}
.form-ok p{color:var(--ink-soft); margin:0; max-width:52ch}
.form-ok .stamp-ok{
  position:absolute; top:1.2rem; right:1.4rem; transform:rotate(-8deg);
  border:2.5px solid var(--ok); color:var(--ok); border-radius:999px;
  font-family:var(--font-mono); font-size:.66rem; font-weight:500; letter-spacing:.16em;
  padding:.5rem .8rem; opacity:.9;
}
@media (max-width: 560px){.form-ok .stamp-ok{position:static; display:inline-block; margin-bottom:1rem}}

.k-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  overflow:hidden;
}
.k-map{display:block; width:100%; height:auto; background:var(--surface-2); border-bottom:1px solid var(--line)}
.k-map .road{stroke:var(--line-strong); fill:none}
.k-map .river{stroke:var(--blue-ink); fill:none; opacity:.4}
.k-map .lbl{font-family:var(--font-mono); font-size:8.5px; letter-spacing:.08em; fill:var(--ink-muted)}
.k-body{padding:1.5rem 1.5rem 1.6rem; display:grid; gap:1.05rem}
.k-item{display:grid; gap:.15rem}
.k-item .k-lbl{font-family:var(--font-mono); font-size:.66rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted)}
.k-item a{color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line-strong)}
.k-item a:hover{color:var(--accent-ink); border-color:var(--accent-ink)}
.ai-note{
  grid-column:1 / -1; margin-top:1.8rem;
  border:1px dashed var(--line-strong); border-radius:12px; padding:1.15rem 1.35rem;
  font-family:var(--font-mono); font-size:.79rem; line-height:1.75; color:var(--ink-muted);
}
.ai-note b{display:block; font-weight:500; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-ink); margin-bottom:.3rem}
.ai-note code{color:var(--ink-soft); background:var(--surface-2); padding:.1rem .4rem; border-radius:4px}
.ai-note a{color:var(--ink-soft)}

/* ============ Startseite: Teaser-Karten ============ */
.teasers{display:grid; grid-template-columns:repeat(2,1fr); gap:1.4rem}
@media (max-width: 780px){.teasers{grid-template-columns:1fr}}
.teaser{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:1.7rem 1.6rem 1.6rem; display:flex; flex-direction:column; gap:.9rem;
  transition:transform .28s var(--ease), box-shadow .28s var(--ease), border-color .28s var(--ease);
}
.teaser:hover{transform:translateY(-3px); box-shadow:var(--lift); border-color:var(--line-strong)}
.teaser-idx{font-family:var(--font-mono); font-size:.78rem; font-weight:500; letter-spacing:.14em; color:var(--accent-ink)}
.teaser h3{font-size:var(--fs-h3)}
.teaser p{color:var(--ink-soft); font-size:.97rem; margin:0}
.teaser-more{
  margin-top:auto; padding-top:.9rem; display:inline-flex; align-items:center; gap:.4rem;
  font-weight:600; font-size:.92rem; color:var(--accent-ink); text-decoration:none;
}
.teaser-more:hover{text-decoration:underline}
.teaser-more .arr{transition:transform .2s var(--ease)}
.teaser:hover .teaser-more .arr{transform:translateX(3px)}
.teaser-mini{list-style:none; margin:0; padding:0; display:grid; gap:.4rem}
.teaser-mini li{
  font-size:.9rem; color:var(--ink-soft); padding-left:1.1rem; position:relative;
}
.teaser-mini li::before{content:"–"; position:absolute; left:0; color:var(--ink-muted)}
.teaser-faq{
  font-size:.95rem; color:var(--ink); background:var(--surface-2); border-radius:8px;
  padding:.85rem 1rem; font-weight:500;
}

/* ============ CTA-Band (Home / Leistungen / Fragen Abschluss) ============ */
.cta-band{
  border:1px solid var(--line); border-radius:16px; background:var(--surface);
  padding:clamp(2rem,5vw,3rem); text-align:center; display:flex; flex-direction:column;
  align-items:center; gap:1rem;
}
.cta-band h2{font-size:var(--fs-h2); max-width:22ch}
.cta-band p{color:var(--ink-soft); max-width:52ch; margin:0}
.cta-band .btn{margin-top:.4rem}

/* ============ Leistungen: Ablauf-Schritte ============ */
.process{margin:2.6rem 0 3.2rem}
.process-intro{color:var(--ink-soft); max-width:66ch; margin-bottom:1.8rem}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; counter-reset:step}
@media (max-width: 1020px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width: 560px){.steps{grid-template-columns:1fr}}
.step{
  border:1px solid var(--line); border-radius:12px; background:var(--surface);
  padding:1.4rem 1.3rem 1.3rem; position:relative;
}
.step-num{
  font-family:var(--font-display); font-style:italic; font-weight:600; font-size:1.7rem;
  color:var(--blue-ink); display:block; margin-bottom:.6rem;
}
.step h3{font-size:1.05rem; margin-bottom:.4rem}
.step p{font-size:.9rem; color:var(--ink-soft); margin:0}

/* ============ Leistungen: Materialien ============ */
.materials{margin:3.2rem 0 0}
.mat-grid{display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,3.5rem); align-items:start}
@media (max-width: 880px){.mat-grid{grid-template-columns:1fr}}
.mat-copy p{color:var(--ink-soft); max-width:58ch}
.mat-woods{display:flex; flex-wrap:wrap; gap:.6rem; margin:0 0 1.4rem; padding:0; list-style:none}
.mat-woods li{
  font-family:var(--font-mono); font-size:.78rem; font-weight:500; letter-spacing:.08em;
  border:1px solid var(--line-strong); border-radius:999px; padding:.45rem .95rem; color:var(--ink-soft);
}
.mat-swatches{display:grid; grid-template-columns:repeat(4,1fr); gap:.7rem}
.mat-sw{aspect-ratio:1; border-radius:10px; border:1px solid var(--line)}
.mat-sw.m-oak{background:linear-gradient(112deg,#A87F4C,#845C31 58%,#96703F)}
.mat-sw.m-ash{background:linear-gradient(112deg,#CBB18A,#A98C5E 60%,#BA9E6F)}
.mat-sw.m-beech{background:linear-gradient(112deg,#B98A62,#94663D 60%,#A57850)}
.mat-sw.m-walnut{background:linear-gradient(112deg,#6B4A2E,#4B3017 62%,#5D3F24)}

/* ============ Projekte: "nicht dabei" Abschluss ============ */
.projekte-more{
  margin-top:3rem; border:1px dashed var(--line-strong); border-radius:12px;
  padding:1.8rem 1.9rem; display:flex; flex-wrap:wrap; gap:1.4rem 2rem; align-items:center; justify-content:space-between;
}
.projekte-more div{flex:1 1 40ch}
.projekte-more h3{font-size:1.2rem; margin-bottom:.5rem}
.projekte-more p{color:var(--ink-soft); margin:0; max-width:52ch}

/* ============ Kontakt: Verweis auf Fragen ============ */
.kontakt-faq-hint{
  display:inline-flex; align-items:center; gap:.5rem; font-size:.92rem; color:var(--ink-soft);
  background:var(--surface-2); border-radius:8px; padding:.7rem 1rem; margin-bottom:2rem;
}
.kontakt-faq-hint a{font-weight:600}

/* ============ Seiten-Intro (Unterseiten ohne Hero) ============ */
.page-intro{padding-block:clamp(2.4rem,6vw,3.6rem) 0}
.page-intro .sec-h2{max-width:26ch}

/* ============ footer ============ */
footer{border-top:1px solid var(--line); background:var(--surface); padding:3rem 0 2.2rem; margin-top:var(--sect)}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr; gap:2rem}
@media (max-width: 760px){.foot-grid{grid-template-columns:1fr}}
.foot-brand{display:flex; gap:.7rem; align-items:flex-start; color:var(--ink)}
.foot-brand svg{width:34px; height:34px; flex:none; margin-top:2px}
.foot-brand b{font-family:var(--font-display); font-weight:600; font-size:1.08rem}
.foot-brand p{font-size:.9rem; color:var(--ink-muted); margin:.3rem 0 0; max-width:34ch}
.foot-col .k-lbl{display:block; font-family:var(--font-mono); font-size:.66rem; font-weight:500; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:.7rem}
.foot-col ul{list-style:none; margin:0; padding:0; display:grid; gap:.15rem}
.foot-col a{display:inline-flex; min-height:36px; align-items:center; color:var(--ink-soft); text-decoration:none; font-size:.94rem}
.foot-col a:hover{color:var(--accent-ink)}
.foot-legal{
  margin-top:2.4rem; padding-top:1.4rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:1rem; align-items:center; justify-content:space-between;
  font-size:.85rem; color:var(--ink-muted);
}
.credit{display:inline-flex; align-items:center; gap:.55rem}
.credit svg{width:26px; height:26px; color:var(--ink-muted)}
.credit .dash{fill:var(--accent)}
.credit a{color:var(--ink-soft)}