/* ============================================================
   Aminzada · Innenausbau & Design — geteiltes Stylesheet
   Wird von index.html, impressum.html und datenschutz.html
   eingebunden. Einmal ändern, überall wirksam.
   ============================================================ */

/* ============ TOKENS ============ */
:root{
  --bg:#EEECE6;
  --bg-raised:#E4E1D9;
  --bg-inset:#DAD5C8;
  --ink:#211D19;
  --ink-muted:#5B564C;
  --line:#C7C1B2;
  --accent:#35606F;
  --accent-soft:#4E7C8B;
  --btn-bg:#234653;
  --btn-text:#F3F1EA;
  --wood-1:#8A5A34; --wood-2:#5E3A1F; --wood-3:#B27F4C;
  --steel-1:#9AA3A6; --steel-2:#5C6467; --steel-3:#D8DCDD;
  --glass-1:#C4DCE3; --glass-2:#7FA6B2;
  --stone-1:#726E66; --stone-2:#3E3B36; --stone-3:#8B877D;
  --radius:3px;
  --shadow: 0 1px 0 rgba(33,29,25,.05);
  --font-display: 'Palatino Linotype', Palatino, 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#17140F;
    --bg-raised:#201C16;
    --bg-inset:#262115;
    --ink:#EDE9DF;
    --ink-muted:#B3AC9C;
    --line:#38332A;
    --accent:#6FA6B4;
    --accent-soft:#5A8C99;
    --btn-bg:#82B7C3;
    --btn-text:#111716;
    --wood-1:#9E6C43; --wood-2:#6E441F; --wood-3:#C4915E;
    --steel-1:#7C8487; --steel-2:#4A5052; --steel-3:#AEB4B5;
    --glass-1:#4E6B72; --glass-2:#294147;
    --stone-1:#65615A; --stone-2:#2A2824; --stone-3:#79756B;
    --shadow: 0 1px 0 rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --bg:#17140F;
  --bg-raised:#201C16;
  --bg-inset:#262115;
  --ink:#EDE9DF;
  --ink-muted:#B3AC9C;
  --line:#38332A;
  --accent:#6FA6B4;
  --accent-soft:#5A8C99;
  --btn-bg:#82B7C3;
  --btn-text:#111716;
  --wood-1:#9E6C43; --wood-2:#6E441F; --wood-3:#C4915E;
  --steel-1:#7C8487; --steel-2:#4A5052; --steel-3:#AEB4B5;
  --glass-1:#4E6B72; --glass-2:#294147;
  --stone-1:#65615A; --stone-2:#2A2824; --stone-3:#79756B;
  --shadow: 0 1px 0 rgba(0,0,0,.4);
}

/* ============ BASE ============ */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{
  font-family:var(--font-display);
  font-weight:700;
  line-height:1.1;
  margin:0 0 .5em;
  text-wrap:balance;
  color:var(--ink);
}
p{margin:0 0 1em; max-width:65ch;}
ul{margin:0 0 1.1em; padding-left:1.3em;}
li{margin:.3em 0;}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
.visually-hidden{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;}
.skip-link{
  position:absolute; left:1rem; top:-3rem; background:var(--btn-bg); color:var(--btn-text);
  padding:.6em 1em; border-radius:var(--radius); z-index:100; transition:top .2s ease;
}
.skip-link:focus{top:1rem;}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

.wrap{max-width:1220px; margin:0 auto; padding:0 clamp(1.25rem, 4vw, 2.5rem);}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex; align-items:center; gap:.5em;
  padding:.85em 1.5em;
  border-radius:var(--radius);
  font-family:var(--font-body);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.01em;
  text-decoration:none;
  border:1px solid transparent;
  cursor:pointer;
  white-space:nowrap;
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s ease, background .18s ease;
}
.btn:active{transform:translateY(1px) scale(.98);}
@media (hover:hover){ .btn:hover{transform:translateY(-1px);} }
.btn-primary{background:var(--btn-bg); color:var(--btn-text);}
.btn-primary:hover{box-shadow:0 6px 18px rgba(35,70,83,.28);}
.btn-line{background:transparent; color:var(--ink); border-color:var(--line);}
.btn-line:hover{border-color:var(--accent); color:var(--accent);}
.btn-ghost{background:transparent; border-color:transparent; color:var(--ink-muted); padding:.85em .9em;}
.btn-ghost:hover{color:var(--ink); text-decoration:underline; box-shadow:none;}

/* ============ HEADER ============ */
/* backdrop-filter sits on ::before, not on .site-header itself: a filter/backdrop-filter
   on an element creates a new containing block for its position:fixed descendants, which
   would otherwise trap the mobile nav drawer (a fixed child, via .header-inner) inside the
   68px-tall header instead of letting it fill the viewport. The pseudo-element gets the
   blur, .site-header and its real children stay unaffected. */
.site-header{
  position:sticky; top:0; z-index:50;
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease;
}
.site-header::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
}
.site-header.is-scrolled{box-shadow:0 12px 28px -18px rgba(0,0,0,.35);}
.header-inner{
  display:flex; align-items:center; justify-content:space-between;
  max-width:1220px; margin:0 auto; padding:0 clamp(1.25rem,4vw,2.5rem);
  height:68px;
}
.brand{display:flex; align-items:center; gap:.65em; text-decoration:none; color:var(--ink);}
.brand-logo{width:42px; height:42px; display:block; flex:none; border-radius:var(--radius); border:1px solid var(--line); object-fit:cover;}
nav.nav ul{list-style:none; display:flex; gap:clamp(1rem,2vw,1.9rem); margin:0; padding:0;}
nav.nav a{
  text-decoration:none; color:var(--ink-muted); font-size:.94rem; font-weight:500;
  padding:.4em .1em; border-bottom:1px solid transparent; transition:color .18s ease, border-color .18s ease;
}
nav.nav a:hover{color:var(--ink); border-color:var(--accent);}
.header-actions{display:flex; align-items:center; gap:.75rem;}
.theme-toggle{
  width:36px; height:36px; border-radius:var(--radius); border:1px solid var(--line);
  background:var(--bg-raised); color:var(--ink); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex:none;
}
.theme-toggle svg{width:17px; height:17px; transition:transform .45s cubic-bezier(.34,1.4,.64,1);}
.theme-toggle.is-dark svg{transform:rotate(140deg) scale(.9);}
.nav-toggle{display:none; width:36px; height:36px; border:1px solid var(--line); background:var(--bg-raised);
  border-radius:var(--radius); cursor:pointer; flex:none; position:relative;}
.nav-toggle span, .nav-toggle::before, .nav-toggle::after{
  content:''; position:absolute; left:8px; right:8px; height:1.5px; background:var(--ink); transition:transform .2s ease, opacity .2s ease;
}
.nav-toggle::before{top:13px;} .nav-toggle span{top:17.5px;} .nav-toggle::after{top:22px;}
.nav-toggle[aria-expanded="true"]::before{transform:translateY(4.5px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span{opacity:0;}
.nav-toggle[aria-expanded="true"]::after{transform:translateY(-4.5px) rotate(-45deg);}
.nav-cta{display:inline-flex;}

@media (max-width:840px){
  .nav-cta{display:none;}
  nav.nav{
    position:fixed; inset:68px 0 0 0; z-index:90; background:var(--bg); border-top:1px solid var(--line);
    transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .22s ease, transform .22s ease;
    padding:2rem clamp(1.25rem,4vw,2.5rem);
  }
  nav.nav.is-open{opacity:1; transform:translateY(0); pointer-events:auto;}
  nav.nav ul{flex-direction:column; gap:0;}
  nav.nav a{display:block; padding:.9em 0; font-size:1.1rem; border-bottom:1px solid var(--line);}
  .nav-toggle{display:block;}
}

/* ============ PAGE HEAD (Impressum / Datenschutz) ============ */
.page-head{padding:clamp(2.5rem,6vw,3.5rem) 0 clamp(1.5rem,4vw,2rem); border-bottom:1px solid var(--line);}
.page-head .eyebrow{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.09em; color:var(--ink-muted); text-decoration:none;}
.page-head .eyebrow:hover{color:var(--accent);}
.page-head h1{font-size:clamp(2rem,4vw,2.9rem); margin-top:.8rem;}
.page-head .stand{font-size:.86rem; color:var(--ink-muted); margin-top:.6rem;}

.legal{padding:clamp(2.5rem,6vw,3.5rem) 0 clamp(4rem,8vw,6rem);}
.legal-body{max-width:70ch; color:var(--ink-muted); font-size:1rem;}
.legal-body h2{font-family:var(--font-body); font-weight:700; font-size:1.05rem; color:var(--ink); margin:2.2em 0 .5em;}
.legal-body h2:first-child{margin-top:0;}
.legal-body p{margin:0 0 1.1em;}
.legal-body a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
.legal-body a:hover{color:var(--accent);}
.legal-note{
  margin:2.2em 0 1.1em; padding:1rem 1.2rem; background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius);
  font-size:.92rem;
}
.legal-note strong{color:var(--ink); display:block; margin-bottom:.3em;}

/* ============ REVEAL ============ */
[data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);}
[data-reveal].is-visible{opacity:1; transform:translateY(0);}
/* small, deliberate staggers for paired or grouped reveals - never more than a few items */
.werkstatt-grid > [data-reveal]:nth-child(2){transition-delay:.1s;}
.kontakt-grid > [data-reveal]:nth-child(2){transition-delay:.1s;}
.leistungen-group[data-reveal]:nth-child(1){transition-delay:0s;}
.leistungen-group[data-reveal]:nth-child(2){transition-delay:.08s;}
.leistungen-group[data-reveal]:nth-child(3){transition-delay:.16s;}
.materialien-grid .swatch[data-reveal]:nth-child(1){transition-delay:0s;}
.materialien-grid .swatch[data-reveal]:nth-child(2){transition-delay:.07s;}
.materialien-grid .swatch[data-reveal]:nth-child(3){transition-delay:.14s;}
.materialien-grid .swatch[data-reveal]:nth-child(4){transition-delay:.21s;}
.eindruck--feature[data-reveal]{transition-delay:0s;}
.eindruck-pair [data-reveal]:nth-child(1){transition-delay:.08s;}
.eindruck-pair [data-reveal]:nth-child(2){transition-delay:.18s;}

/* Hero load-in: same transition language as scroll reveal, just triggered on first paint
   instead of on intersection, and toggled from JS with a tiny per-element delay so the
   hero reads as one orchestrated moment rather than five separate pieces. */
[data-hero-in]{
  opacity:0; transform:translateY(14px);
  transition:opacity .65s cubic-bezier(.16,1,.3,1), transform .65s cubic-bezier(.16,1,.3,1), clip-path .75s cubic-bezier(.16,1,.3,1);
}
[data-hero-in].is-visible{opacity:1; transform:translateY(0);}
[data-hero-in="1"]{transition-delay:.05s;}
[data-hero-in="2"]{transition-delay:.14s;}
[data-hero-in="3"]{transition-delay:.24s;}
[data-hero-in="4"]{transition-delay:.34s;}
[data-hero-in="5"]{transform:scale(1.02); clip-path:inset(0 100% 0 0); transition-delay:.22s;}
[data-hero-in="5"].is-visible{transform:scale(1); clip-path:inset(0 0 0 0);}

/* ============ SWATCHES (material illustration system) ============ */
.swatch{
  position:relative; overflow:hidden; border-radius:var(--radius);
  border:1px solid var(--line);
  isolation:isolate;
  transition:transform .22s cubic-bezier(.16,1,.3,1), box-shadow .22s ease, border-color .22s ease;
}
@media (hover:hover){
  .swatch:hover{transform:translateY(-4px); box-shadow:0 16px 32px -12px rgba(0,0,0,.28); border-color:var(--accent);}
}
.swatch::after{
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(115deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px);
  mix-blend-mode:overlay; pointer-events:none;
}
.swatch--wood{background:
  repeating-linear-gradient(97deg, var(--wood-2) 0 3px, var(--wood-1) 3px 9px, var(--wood-3) 9px 11px),
  linear-gradient(160deg, var(--wood-1), var(--wood-2));
  background-blend-mode:multiply, normal;
}
.swatch--steel{background:
  repeating-linear-gradient(100deg, var(--steel-3) 0 2px, var(--steel-1) 2px 6px, var(--steel-2) 6px 7px);
}
.swatch--glass{background:linear-gradient(135deg, var(--glass-1), var(--glass-2));}
.swatch--glass::before{
  content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 30%, rgba(255,255,255,.55) 48%, transparent 62%);
}
.swatch--stone{background:
  radial-gradient(circle at 20% 30%, rgba(255,255,255,.10) 0 1px, transparent 1.4px) 0 0/9px 9px,
  radial-gradient(circle at 60% 70%, rgba(0,0,0,.14) 0 1px, transparent 1.4px) 0 0/13px 13px,
  linear-gradient(150deg, var(--stone-3), var(--stone-1) 55%, var(--stone-2));
}
.swatch-label{
  position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%;
  padding:1.1rem 1.2rem; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.swatch-label strong{font-family:var(--font-display); font-size:1.15rem;}
.swatch-label span{font-size:.85rem; opacity:.88; max-width:26ch;}

/* ============ HERO ============ */
.hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5rem);}
.hero-grid{
  display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:center;
}
.hero-brandline{font-family:var(--font-mono); font-size:.78rem; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-muted); margin-bottom:1rem;}
.hero h1{font-size:clamp(2.35rem,4.6vw,3.9rem); max-width:14ch;}
.hero p.lede{font-size:1.14rem; color:var(--ink-muted); max-width:42ch;}
.hero-cta-row{display:flex; align-items:center; gap:1.4rem; margin-top:1.6rem; flex-wrap:wrap;}
.hero-cta-row .hint{font-size:.88rem; color:var(--ink-muted);}
.hero-visual{
  position:relative; aspect-ratio:4/5; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--line); background:var(--bg-raised);
  transition:box-shadow .3s ease;
}
@media (hover:hover){
  .hero-visual:hover{box-shadow:0 20px 40px -16px rgba(0,0,0,.3);}
  .hero-visual:hover .hero-visual-img{transform:scale(1.045);}
}
.hero-visual-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.hero-visual-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,7,.55) 0%, transparent 45%);
  pointer-events:none;
}
.hero-visual .plate{
  position:absolute; z-index:1; left:1.2rem; bottom:1.2rem; right:1.2rem;
  color:#fff; font-size:.82rem; letter-spacing:.03em; text-shadow:0 1px 3px rgba(0,0,0,.4);
}

@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-visual{aspect-ratio:16/10;}
}

/* ============ MATERIALS STRIP ============ */
.materials-strip{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-raised);}
.materials-strip .wrap{
  display:flex; flex-wrap:wrap; gap:.8rem 2.2rem; padding:1.1rem clamp(1.25rem,4vw,2.5rem);
  align-items:center; justify-content:center;
}
.materials-strip span{font-family:var(--font-mono); font-size:.82rem; letter-spacing:.06em; color:var(--ink-muted);}
.materials-strip span b{color:var(--ink); font-weight:600;}

/* ============ SECTION SHELL ============ */
section{padding:clamp(3.5rem,8vw,6.5rem) 0;}
.section-head{max-width:46ch; margin-bottom:clamp(2rem,4vw,3rem);}
.section-head h2{font-size:clamp(1.7rem,3.2vw,2.5rem);}
.section-head p{color:var(--ink-muted); font-size:1.05rem;}

/* ============ WERKSTATT ============ */
.werkstatt-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center;}
.founder-plate{
  aspect-ratio:3/4; border-radius:var(--radius); border:1px solid var(--line); overflow:hidden; position:relative;
  background:var(--bg-raised);
  transition:box-shadow .3s ease;
}
@media (hover:hover){
  .founder-plate:hover{box-shadow:0 20px 40px -16px rgba(0,0,0,.3);}
  .founder-plate:hover .founder-plate-img{transform:scale(1.045);}
}
.founder-plate-img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  transition:transform .5s cubic-bezier(.16,1,.3,1);
}
.founder-plate-scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,9,7,.55) 0%, transparent 45%);
  pointer-events:none;
}
.founder-plate .cap{
  position:absolute; z-index:1; left:1rem; bottom:1rem; right:1rem; color:#fff; font-size:.78rem; letter-spacing:.04em; text-shadow:0 1px 3px rgba(0,0,0,.4);
}
.werkstatt-copy h2{font-size:clamp(1.7rem,3.2vw,2.5rem);}
.werkstatt-copy p{color:var(--ink-muted); font-size:1.05rem;}
.fact-row{display:flex; gap:2.2rem; margin-top:1.8rem; flex-wrap:wrap;}
.fact-row div{border-top:1px solid var(--line); padding-top:.6rem; min-width:9rem;}
.fact-row strong{display:block; font-family:var(--font-display); font-size:1.05rem; color:var(--ink);}
.fact-row span{font-size:.86rem; color:var(--ink-muted);}

@media (max-width:860px){ .werkstatt-grid{grid-template-columns:1fr;} }

/* ============ LEISTUNGEN ============ */
.leistungen-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line);}
.leistungen-group{padding:1.8rem 1.8rem 1.8rem 0; border-bottom:1px solid var(--line);}
.leistungen-grid .leistungen-group:not(:last-child){border-right:1px solid var(--line);}
.leistungen-group h3{font-size:1.15rem; margin-bottom:.9rem;}
.leistungen-group ul{list-style:none; margin:0; padding:0;}
.leistungen-group li{
  padding:.55rem 0; border-top:1px solid var(--line); color:var(--ink-muted); font-size:.98rem; margin:0;
}
.leistungen-group li:first-child{border-top:none;}
@media (max-width:860px){
  .leistungen-grid{grid-template-columns:1fr;}
  .leistungen-grid .leistungen-group{border-right:none !important; padding-right:0;}
}

/* ============ EINDRÜCKE (photo gallery) ============ */
.eindruecke-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:1.2rem;}
.eindruck-pair{display:grid; grid-template-rows:1fr 1fr; gap:1.2rem;}
.eindruck{display:flex; flex-direction:column; margin:0;}
.eindruck-frame{position:relative; overflow:hidden; border-radius:var(--radius); border:1px solid var(--line); flex:1; min-height:180px; background:var(--bg-raised);}
.eindruck--feature .eindruck-frame{min-height:320px;}
.eindruck-frame img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s cubic-bezier(.16,1,.3,1);}
@media (hover:hover){ .eindruck:hover .eindruck-frame img{transform:scale(1.05);} }
.eindruck figcaption{margin-top:.7rem; font-size:.88rem; color:var(--ink-muted); display:flex; align-items:center; gap:.6em;}
.eindruck .tag{
  font-family:var(--font-mono); font-size:.66rem; text-transform:uppercase; letter-spacing:.07em;
  color:var(--accent); border:1px solid var(--line); border-radius:var(--radius); padding:.2em .5em; flex:none;
}
@media (max-width:860px){
  .eindruecke-grid{grid-template-columns:1fr;}
  .eindruck--feature .eindruck-frame{min-height:260px;}
}

/* ============ MATERIALIEN ============ */
.materialien-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1rem;
}
.materialien-grid .swatch{aspect-ratio:3/4;}
.materialien-note{
  margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line);
  color:var(--ink-muted); font-size:.98rem; max-width:56ch;
}
@media (max-width:900px){
  .materialien-grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .materialien-grid{grid-template-columns:1fr 1fr;}
  .materialien-grid .swatch{aspect-ratio:1/1;}
}

/* ============ KONTAKT ============ */
.kontakt-grid{display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem);}
.kontakt-info dl{margin:1.6rem 0 0;}
.kontakt-info .row{display:flex; gap:1.2rem; padding:.8rem 0; border-top:1px solid var(--line);}
.kontakt-info .row:first-child{border-top:none;}
.kontakt-info dt{width:6.5rem; flex:none; color:var(--ink-muted); font-size:.88rem;}
.kontakt-info dd{margin:0; font-family:var(--font-mono); font-variant-numeric:tabular-nums; font-size:.98rem;}
.kontakt-info dd a{text-decoration:none; border-bottom:1px solid var(--line);}
.kontakt-info dd a:hover{border-color:var(--accent); color:var(--accent);}

form.kontakt-form{display:flex; flex-direction:column; gap:1.1rem;}
.field{display:flex; flex-direction:column; gap:.4rem;}
.field label{font-size:.86rem; font-weight:600; color:var(--ink);}
.field input, .field textarea{
  font-family:var(--font-body); font-size:1rem; padding:.75em .9em;
  background:var(--bg-raised); border:1px solid var(--line); border-radius:var(--radius); color:var(--ink);
  resize:vertical;
}
.field input::placeholder, .field textarea::placeholder{color:var(--ink-muted); opacity:.85;}
.field input:focus, .field textarea:focus{outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);}
.form-note{font-size:.84rem; color:var(--ink-muted); margin-top:-.3rem;}
@media (max-width:860px){ .kontakt-grid{grid-template-columns:1fr;} }

/* ============ FOOTER ============ */
.site-footer{border-top:1px solid var(--line); background:var(--bg-raised); padding:clamp(2.5rem,5vw,3.5rem) 0 2rem;}
.footer-grid{display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:2.5rem;}
.footer-grid h4{font-family:var(--font-display); font-size:1.05rem; margin:0 0 .8rem;}
.footer-logo{width:40px; height:40px; display:block; border-radius:var(--radius); border:1px solid var(--line); margin-bottom:.9rem; object-fit:cover;}
.footer-grid p, .footer-grid address{color:var(--ink-muted); font-size:.92rem; font-style:normal; line-height:1.7; margin:0;}
.footer-grid a{color:var(--ink-muted); text-decoration:none;}
.footer-grid a:hover{color:var(--accent);}
.footer-bottom{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem;
  font-size:.84rem; color:var(--ink-muted);
}
.site-footer .footer-bottom{margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid var(--line);}
.footer-legal-links{display:flex; gap:1.3rem; flex-wrap:wrap;}
.footer-legal-links a{color:var(--ink-muted); text-decoration:none;}
.footer-legal-links a:hover{color:var(--accent);}
@media (max-width:800px){ .footer-grid{grid-template-columns:1fr 1fr;} }
@media (max-width:520px){ .footer-grid{grid-template-columns:1fr;} }

/* ============ COOKIE CONSENT ============ */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:var(--bg-raised); border-top:1px solid var(--line);
  box-shadow:0 -14px 32px -20px rgba(0,0,0,.4);
}
.cookie-banner-inner{
  max-width:1220px; margin:0 auto; padding:1.25rem clamp(1.25rem,4vw,2.5rem);
  display:flex; align-items:center; gap:1.5rem; flex-wrap:wrap;
}
.cookie-banner-text{flex:1 1 420px; min-width:0;}
.cookie-banner-text p{margin:0; font-size:.9rem; color:var(--ink-muted); max-width:62ch;}
.cookie-banner-text a{color:var(--ink); text-decoration:underline; text-underline-offset:2px;}
.cookie-banner-actions{display:flex; gap:.65rem; flex-wrap:wrap; flex:0 0 auto;}
@media (max-width:720px){
  .cookie-banner-inner{flex-direction:column; align-items:stretch;}
  /* the exact gotcha from the buers.de build: a pixel flex-basis becomes a min-HEIGHT
     once the parent switches to flex-direction:column, so it must be reset here */
  .cookie-banner-text{flex-basis:auto !important;}
  .cookie-banner-actions{flex-basis:auto !important; width:100%;}
  .cookie-banner-actions .btn{flex:1 1 auto;}
}

.cookie-modal{
  position:fixed; inset:0; z-index:210;
  display:flex; align-items:center; justify-content:center;
  background:rgba(10,9,7,.52); padding:1.5rem;
}
/* `hidden` is a boolean attribute the browser hides via a user-agent stylesheet rule.
   Author CSS (our display:flex above) always wins over that UA rule, so without this
   explicit override the banner/modal would stay laid out - and clickable through -
   even while .hidden is true. */
.cookie-banner[hidden], .cookie-modal[hidden]{display:none !important;}
.cookie-modal-panel{
  background:var(--bg); border:1px solid var(--line); border-radius:var(--radius);
  max-width:34rem; width:100%; max-height:85vh; overflow-y:auto;
  padding:clamp(1.5rem,4vw,2.2rem);
}
.cookie-modal-panel h2{font-family:var(--font-display); font-size:1.4rem; margin-bottom:.4rem;}
.cookie-modal-panel > p{color:var(--ink-muted); font-size:.94rem;}
.cookie-category{
  display:flex; align-items:flex-start; justify-content:space-between; gap:1rem;
  padding:1rem 0; border-top:1px solid var(--line); margin-top:1.2rem;
}
.cookie-category-copy strong{display:block; font-size:.98rem; margin-bottom:.25rem; color:var(--ink);}
.cookie-category-copy span{font-size:.85rem; color:var(--ink-muted);}
.cookie-toggle{
  position:relative; width:42px; height:24px; flex:none; border-radius:999px;
  background:var(--line); border:none; cursor:pointer; padding:0;
}
.cookie-toggle::after{
  content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%;
  background:var(--bg); transition:transform .2s cubic-bezier(.16,1,.3,1);
}
.cookie-toggle[aria-checked="true"]{background:var(--accent);}
.cookie-toggle[aria-checked="true"]::after{transform:translateX(18px);}
.cookie-toggle:disabled{cursor:not-allowed; opacity:.65;}
.cookie-modal-actions{display:flex; gap:.75rem; justify-content:flex-end; margin-top:1.6rem; flex-wrap:wrap;}
.cookie-modal-actions .btn{white-space:nowrap;}

/* ============ REDUCED MOTION ============
   Placed last on purpose: with equal selector specificity, source order decides
   the winner, and this must beat the :hover rules above whenever both conditions
   (a mouse AND reduced motion) are true at once. */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  [data-reveal]{opacity:1; transform:none; transition:none;}
  [data-hero-in]{opacity:1; transform:none; clip-path:none; transition:none;}
  .btn:active, .btn:hover{transform:none;}
  .swatch:hover{transform:none; box-shadow:none;}
  .founder-plate:hover, .hero-visual:hover{box-shadow:none;}
  .founder-plate:hover .founder-plate-img, .hero-visual:hover .hero-visual-img{transform:none;}
  .eindruck:hover .eindruck-frame img{transform:none;}
  .theme-toggle svg{transition:none;}
  .site-header{transition:none;}
  .cookie-toggle::after{transition:none;}
}