/* ===== Stofftiere-Lindner — originalgetreu, SEO/GEO-optimiert ===== */
@font-face{font-family:'DM Sans';src:url('/fonts/dmsans-latin.woff2')format('woff2');font-weight:100 1000;font-style:normal;font-display:swap}
@font-face{font-family:'Marcellus';src:url('/fonts/marcellus-latin.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Space Mono';src:url('/fonts/spacemono-400-latin.woff2')format('woff2');font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg0:#ffffff; --bg1:#f7f4ef; --ink:#1d2b3a; --mut:#5d6b7a;
  --navy:#2f5f7d;            /* Original: Stahlblau der Info-Boxen */
  --navy-d:#24506b; --gold:#c9a227; --rose:#f7e3e3; --rose-ink:#8a3d3d;
  --line:rgba(29,43,58,.13); --card:#ffffff;
  --elev:0 10px 34px rgba(25,45,70,.10);
  --font-display:'Marcellus',Georgia,serif;
  --font-body:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-mono:'Space Mono',monospace;
  --max:1200px; --r-lg:14px; --r-md:10px; --r-pill:999px;
  --sp:8px;
}
html[data-theme="dark"]{
  --bg0:#0f1922; --bg1:#0b141c; --ink:#e9f0f6; --mut:#a3b3c2;
  --navy:#4f90b5; --navy-d:#3c7a9c; --gold:#e2bb52;
  --rose:#3a2626; --rose-ink:#f0c9c9;
  --line:rgba(255,255,255,.14); --card:#152230;
  --elev:0 14px 40px rgba(0,0,0,.45);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);line-height:1.6;background:var(--bg0);-webkit-font-smoothing:antialiased}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:64px 0}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:var(--navy);color:#fff;padding:10px 16px;border-radius:var(--r-md);z-index:400}

/* ---------- Header (Original: Logo links, Nav mittig, Kontakt-Button rechts) ---------- */
.hdr{position:sticky;top:0;z-index:300;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
html[data-theme="dark"] .hdr{background:rgba(15,25,34,.94)}
.hdr-in{max-width:var(--max);margin:0 auto;padding:10px 24px;display:flex;align-items:center;gap:24px}
.brand img{height:44px;width:auto}
.nav{display:flex;gap:20px;flex-wrap:wrap;list-style:none;flex:1;justify-content:center}
.nav a{font-size:14.5px;color:var(--ink);text-decoration:none;padding:8px 2px}
.nav a:hover{color:var(--navy)}
.hdr-tools{display:flex;gap:8px;align-items:center}
.tgl{cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:var(--r-pill);min-height:40px;min-width:44px;padding:4px 12px;font:inherit;font-size:13px;font-weight:600}
.tgl:hover{border-color:var(--navy)}
@media(max-width:900px){.nav{display:none}}

/* ---------- HERO: Vollbild-Hintergrund + Text-Overlay (wie Original) ---------- */
.hero{position:relative;min-height:min(88vh,780px);display:flex;align-items:center;padding:56px 0 40px;overflow:hidden}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img,.hero-bg video{width:100%;height:100%;object-fit:cover;object-position:60% center}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,.90) 0%,rgba(255,255,255,.74) 34%,rgba(255,255,255,.14) 56%,rgba(255,255,255,0) 72%)}
html[data-theme="dark"] .hero-bg::after{background:linear-gradient(100deg,rgba(10,18,26,.93) 0%,rgba(10,18,26,.80) 34%,rgba(10,18,26,.22) 58%,rgba(10,18,26,0) 74%)}
.hero-in{position:relative;z-index:2;max-width:var(--max);margin:0 auto;padding:0 24px;width:100%;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:32px;align-items:center}
.hero-txt{max-width:640px}
.hero h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,4.4vw,3.1rem);line-height:1.08;letter-spacing:-.01em;text-wrap:balance;margin-bottom:16px;color:var(--ink)}
.hero .lead{font-size:1.1rem;color:var(--ink);opacity:.9;max-width:56ch;margin-bottom:8px}
.hero .sub{font-size:1.02rem;color:var(--ink);opacity:.86;margin-bottom:20px}
.hero .sub b{color:var(--navy)}
/* blaue Info-Boxen rechts (Original) */
.hero-boxes{display:flex;flex-direction:column;gap:16px;justify-self:end;max-width:380px;width:100%}
.ibox{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:18px 22px;box-shadow:var(--elev)}
.ibox b{display:block;font-family:var(--font-display);font-size:clamp(1.25rem,2.2vw,1.7rem);line-height:1.15;font-weight:400}
.ibox span{display:block;font-size:14px;opacity:.92;margin-top:4px;border-top:1px solid rgba(255,255,255,.3);padding-top:6px}
@media(max-width:900px){.hero-in{grid-template-columns:1fr}.hero-boxes{max-width:none;flex-direction:row;flex-wrap:wrap;justify-self:start}
  .ibox{flex:1 1 220px}.hero-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.93),rgba(255,255,255,.86))}
  html[data-theme="dark"] .hero-bg::after{background:linear-gradient(180deg,rgba(10,18,26,.94),rgba(10,18,26,.88))}}

/* Buttons (Original: blau gefüllt / weiß umrandet) */
.btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 26px;border-radius:var(--r-md);
  font-weight:600;text-decoration:none;font-size:15.5px;border:1px solid transparent;transition:transform .15s,filter .15s}
.btn.primary{background:var(--navy);color:#fff}
.btn.gold{background:var(--gold);color:#22190a}
.btn.ghost{background:var(--card);border-color:var(--line);color:var(--ink)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.06)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:20px}
.risk{margin-top:12px;font-size:14px;color:var(--mut)}
/* rosa Hinweis-Box (Original) */
.rosebox{background:var(--rose);color:var(--rose-ink);border-radius:var(--r-lg);padding:16px 20px;margin-top:22px;max-width:520px;font-size:15px}
.rosebox b{color:inherit}
.apple-badge{margin-top:18px;max-width:235px;border-radius:8px;box-shadow:var(--elev)}

/* ---------- Abschnitte ---------- */
.band{background:var(--bg1);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.eyebrow{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.14em;color:var(--gold);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.eyebrow::before{content:'';width:22px;height:2px;background:var(--gold)}
h2{font-family:var(--font-display);font-weight:400;font-size:clamp(1.6rem,3.1vw,2.35rem);line-height:1.14;text-wrap:balance;margin-bottom:12px}
h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
.lead{font-size:1.08rem;color:var(--mut);max-width:64ch;text-wrap:pretty}
p{text-wrap:pretty}

/* 2-Spalten Text|Bild (Original-Muster) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.split.wide-l{grid-template-columns:1.15fr .85fr}
.split.wide-r{grid-template-columns:.85fr 1.15fr}
.split.rev>*:first-child{order:2}
@media(max-width:860px){.split,.split.wide-l,.split.wide-r{grid-template-columns:1fr;gap:28px}.split.rev>*:first-child{order:0}}
figure{margin:0}
.pic{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--elev);background:var(--card)}
.pic img{width:100%}
.pic.plain{border:0;box-shadow:none;background:transparent}

/* Zahlen-Kacheln */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:8px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 16px;text-align:center;box-shadow:var(--elev)}
.stat b{display:block;font-family:var(--font-display);font-size:1.75rem;color:var(--navy)}
.stat span{font-size:13px;color:var(--mut)}
@media(max-width:700px){.stats{grid-template-columns:repeat(2,1fr)}}

/* Vergleich Reel vs. Kugelschreiber */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px;max-width:520px}
.compare .col{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;text-align:center;box-shadow:var(--elev)}
.compare .big{font-family:var(--font-display);font-size:1.8rem;color:var(--navy)}
.compare p{font-size:14px;color:var(--mut);margin-top:4px}

/* Listen */
.chk{list-style:none;margin-top:14px}
.chk li{padding-left:26px;position:relative;margin-bottom:9px;color:var(--mut)}
.chk li::before{content:'✓';position:absolute;left:0;color:var(--gold);font-weight:700}
/* Prozess 4 Schritte */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:26px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px;box-shadow:var(--elev)}
.step .num{font-family:var(--font-mono);font-size:12px;color:var(--gold);margin-bottom:6px}
.step p{font-size:14px;color:var(--mut)}
@media(max-width:860px){.steps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.steps,.compare{grid-template-columns:1fr}}

/* Referenzen: Text links | Logo-Raster rechts (Original) */
.refs{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.refs span{font-family:var(--font-mono);font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px}
.logos-box{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--elev)}
.logos-box img{width:100%}

/* Kundenstimmen */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:24px}
.quote{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r-lg);padding:22px;box-shadow:var(--elev)}
.quote p{font-style:italic;margin-bottom:10px}
.quote cite{font-family:var(--font-mono);font-size:12px;color:var(--mut);font-style:normal}
@media(max-width:860px){.quotes{grid-template-columns:1fr}}

/* Werk-Galerie 3-spaltig (Original) */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--r-lg);border:1px solid var(--line)}
@media(max-width:700px){.gallery{grid-template-columns:1fr 1fr}}

/* Video: Poster + Lazy-Play */
.vfig{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--elev);aspect-ratio:16/9;background:#0d1720}
.vfig video,.vfig img.poster{width:100%;height:100%;object-fit:cover;display:block}
.vfig .play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:rgba(0,0,0,.12);cursor:pointer}
.vfig .play::after{content:'';width:0;height:0;border-left:22px solid #fff;border-top:14px solid transparent;border-bottom:14px solid transparent;filter:drop-shadow(0 2px 8px rgba(0,0,0,.5));margin-left:6px}
.vfig.playing .play{display:none}

/* FAQ (sichtbarer Q&A-Text für GEO) */
.faq{margin-top:18px;max-width:860px}
.faq details{border-bottom:1px solid var(--line);padding:16px 0}
.faq summary{cursor:pointer;font-weight:700;font-size:1.05rem;list-style:none;display:flex;justify-content:space-between;gap:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';color:var(--gold);font-family:var(--font-mono)}
.faq details[open] summary::after{content:'–'}
.faq p{margin-top:10px;color:var(--mut);max-width:72ch}

/* Brücke */
.bridge-in{background:var(--navy);color:#fff;border-radius:var(--r-lg);padding:34px;display:flex;gap:28px;align-items:center;flex-wrap:wrap;justify-content:space-between;box-shadow:var(--elev)}
.bridge-in h2,.bridge-in p{color:#fff}
.bridge-in .lead{color:rgba(255,255,255,.9);max-width:58ch}
.bridge-in .eyebrow{color:#ffd97a}.bridge-in .eyebrow::before{background:#ffd97a}

/* Footer */
footer{background:var(--bg1);border-top:1px solid var(--line);margin-top:8px;padding:40px 0 34px;color:var(--mut);font-size:14px}
.foot-grid{max-width:var(--max);margin:0 auto;padding:0 24px;display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:28px}
footer h4{font-family:var(--font-mono);font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:var(--gold);margin-bottom:10px}
footer a{color:var(--mut);text-decoration:none;display:block;margin-bottom:7px}
footer a:hover{color:var(--navy)}
.foot-logo{height:40px;width:auto;margin-bottom:12px}
.foot-legal{max-width:var(--max);margin:24px auto 0;padding:16px 24px 0;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:8px 16px;justify-content:space-between;font-size:12.5px}
.foot-legal nav{display:flex;flex-wrap:wrap;gap:0 14px}
.foot-legal a{display:inline-flex;align-items:center;min-height:44px;margin:0}
@media(max-width:700px){.foot-grid{grid-template-columns:1fr}}
/* Code-Ticker (Ökosystem-Muster) */
.ticker{max-width:var(--max);margin:14px auto 0;padding:0 24px;display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center;
  font-family:var(--font-mono);font-size:11px;color:var(--mut);opacity:.8}
.ticker .lbl{letter-spacing:.1em}
.ticker .val{color:var(--gold);font-weight:700;min-width:6ch;display:inline-block}
.ticker .sep{opacity:.4}

/* ═══ EFFEKTE (Muster: TeddyLander „Gastro") — transform-only, LCP/CLS-neutral ═══ */
.aurora{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;contain:strict}
.blob{position:absolute;border-radius:50%;filter:blur(110px);will-change:transform}
.blob.b1{width:46vw;height:46vw;left:-14vw;top:10vh;opacity:.20;background:radial-gradient(circle,var(--navy),transparent 65%)}
.blob.b2{width:52vw;height:52vw;right:-16vw;top:-6vh;opacity:.16;background:radial-gradient(circle,var(--gold),transparent 65%)}
.blob.b3{width:38vw;height:38vw;left:32vw;bottom:-10vh;opacity:.14;background:radial-gradient(circle,var(--navy),transparent 68%)}
html[data-theme="dark"] .blob{opacity:.22}
.hero,main,footer{position:relative;z-index:2}
.hdr{z-index:300}
@media (prefers-reduced-motion: no-preference){
  .blob.b1{animation:drift1 26s ease-in-out infinite}
  .blob.b2{animation:drift2 32s ease-in-out infinite}
  .blob.b3{animation:drift3 29s ease-in-out infinite reverse}
  @keyframes drift1{50%{transform:translate(6vw,5vh) scale(1.12)}}
  @keyframes drift2{50%{transform:translate(-5vw,6vh) scale(1.1)}}
  @keyframes drift3{50%{transform:translate(4vw,-6vh) scale(1.16)}}
}
/* Scroll-Reveal: nativ + JS-Fallback */
.reveal{opacity:1}
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .reveal{opacity:0;transform:translateY(30px);animation:reveal-in linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
    @keyframes reveal-in{to{opacity:1;transform:none}}
  }
}
@media (prefers-reduced-motion: no-preference){
  html.js-io .reveal{opacity:0;transform:translateY(30px);transition:opacity .75s cubic-bezier(.2,.6,.2,1),transform .75s cubic-bezier(.2,.6,.2,1)}
  html.js-io .reveal.in{opacity:1;transform:none}
  /* Sektionen selbst sichtbar lassen — Element-Effekte tragen die Bühne */
  html.js-io section.reveal{opacity:1;transform:none;transition:none}
  /* glideIn: Text von links, Bild von rechts (Original-Muster Text|Bild) */
  html.js-io .split .g-l{opacity:1;transform:translateX(-56px);transition:transform 1s cubic-bezier(.2,.6,.2,1)}
  html.js-io .split .g-r{opacity:1;transform:translateX(56px);transition:transform 1s cubic-bezier(.2,.6,.2,1)}
  html.js-io .split .g-l.in,html.js-io .split .g-r.in{transform:none}
  /* Clip-Vorhang für Sektions-Überschriften */
  html.js-io section.reveal h2{clip-path:inset(0 0 100% 0);transform:rotate(-1.2deg) translateY(18px);
    transition:clip-path .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
  html.js-io section.reveal.in h2{clip-path:inset(-6% -6% -12% -6%);transform:none}
  /* Foto-Zoom beim Erscheinen + Hover */
  html.js-io .pic img,html.js-io .gallery img{scale:1.08;transition:scale 1.2s cubic-bezier(.2,.6,.2,1)}
  html.js-io .pic.in img,html.js-io .gallery .in img,html.js-io .in .pic img{scale:1}
  .pic:hover img,.gallery a:hover img{scale:1.05}
  /* Galerie: gerade Zellen drehen sich ein */
  html.js-io .gallery .gcell{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.2,.6,.2,1),transform .9s cubic-bezier(.2,.6,.2,1)}
  html.js-io .gallery .gcell:nth-child(even){transform:rotate(-4deg) translateY(38px);transform-origin:bottom left}
  html.js-io .gallery .gcell.in{opacity:1;transform:none}
  /* Herzschlag-Puls auf primären CTAs (startet nach der Entrance) */
  html.js-io .hero .btn.primary,html.js-io .cta-pulse{animation:st-pulse 2.6s ease-in-out 2s infinite}
  .btn:hover{animation-play-state:paused}
  /* Hero-Entrance gestaffelt — H1 bleibt statisch (LCP-sicher) */
  html.js-io .hero .eyebrow,html.js-io .hero .lead,html.js-io .hero .cta-row,
  html.js-io .hero .risk,html.js-io .hero-boxes,html.js-io .hero .pill-link{
    opacity:0;transform:translateY(24px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
  html.js-io .hero .lead{transition-delay:.10s}
  html.js-io .hero .cta-row{transition-delay:.20s}
  html.js-io .hero .risk{transition-delay:.28s}
  html.js-io .hero-boxes{transition-delay:.16s}
  html.js-io .hero .pill-link{transition-delay:.34s}
  html.js-io .hero .in{opacity:1;transform:none}
  /* Hero-Parallax */
  @supports (animation-timeline: scroll()){
    .hero-bg img{animation:hero-drift linear both;animation-timeline:scroll();animation-range:0vh 110vh}
  }
}
@keyframes hero-drift{from{transform:translateY(0) scale(1.04)}to{transform:translateY(5%) scale(1.04)}}
@keyframes st-pulse{0%{transform:scale(1)}15%{transform:scale(.97)}26%{transform:scale(1)}41%{transform:scale(.955)}57%{transform:scale(1)}100%{transform:scale(1)}}
/* Karten-Hover */
.stat,.step,.quote,.compare .col{transition:transform .25s ease,box-shadow .25s ease}
.stat:hover,.step:hover,.quote:hover,.compare .col:hover{transform:translateY(-3px);box-shadow:0 16px 42px rgba(25,45,70,.16)}

/* ═══ Überarbeitung nach Feedback ═══ */
/* Info-Boxen: Überschrift in Gold (wie Original) */
.ibox b{color:#eac765}
html[data-theme="dark"] .ibox b{color:#f2d47e}
/* Pille als Link (z. B. „Keine Angst vor KI") */
.pill-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-pill);
  background:var(--rose);color:var(--rose-ink);text-decoration:none;font-size:14.5px;font-weight:600;
  border:1px solid rgba(138,61,61,.18);transition:transform .15s,filter .15s;margin-top:20px}
.pill-link:hover{transform:translateY(-2px);filter:brightness(1.03)}
html[data-theme="dark"] .pill-link{border-color:rgba(240,201,201,.2)}
/* Referenzen: Pillen oberhalb, Bild breiter */
.ref-pills{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 26px}
.ref-pills span{font-family:var(--font-mono);font-size:12px;color:var(--mut);border:1px solid var(--line);border-radius:var(--r-pill);padding:5px 11px;background:var(--card)}
.ref-split{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);gap:36px;align-items:center}
@media(max-width:900px){.ref-split{grid-template-columns:1fr;gap:24px}}
/* Team-/Werk-Galerie */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
.team-grid figure{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--elev);background:var(--card)}
.team-grid img{width:100%;aspect-ratio:4/3;object-fit:cover}
.team-grid figcaption{font-size:13px;color:var(--mut);padding:10px 14px}
@media(max-width:820px){.team-grid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}
/* Brücke: Bild über dem Button, gleiche Breite */
.bridge-cta{display:flex;flex-direction:column;gap:14px;align-items:stretch;max-width:290px;width:100%}
.bridge-cta img{width:100%;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,.25);display:block}
.bridge-cta .btn{justify-content:center;width:100%}
.bridge-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.bridge-pills span{display:inline-flex;align-items:center;min-height:38px;padding:8px 16px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);color:#fff;font-size:14px;border:1px solid rgba(255,255,255,.22)}
/* Kontakt mit Video daneben */
.kontakt-split{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;text-align:left}
@media(max-width:860px){.kontakt-split{grid-template-columns:1fr;gap:26px}}

/* ═══ Apple HIG: Touch-Targets mindestens 44px (claude.md-Vorgabe) ═══ */
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 2px}
.tgl{min-height:44px}
footer a{min-height:44px;display:inline-flex;align-items:center;margin-bottom:2px}
.foot-grid a{display:flex}
.faq summary{min-height:44px;align-items:center}
.pill-link,.btn{min-height:44px}
.skip:focus{min-height:44px;display:inline-flex;align-items:center}

/* ═══ YouTube-Fassade: Vorschaubild lokal, Video erst nach Klick (DSGVO + Tempo) ═══ */
.ytfig{position:relative;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--elev);aspect-ratio:16/9;background:#0d1720;cursor:pointer}
.ytfig img,.ytfig iframe{width:100%;height:100%;object-fit:cover;display:block;border:0}
.ytfig .yt-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border:0;background:rgba(0,0,0,.18);cursor:pointer;width:100%;min-height:44px}
.ytfig .yt-play::after{content:'';width:74px;height:52px;border-radius:12px;background:rgba(20,20,20,.82);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.5 7.7a8.6 8.6 0 0 0-6-6C55.3 0 34 0 34 0S12.7 0 7.5 1.6a8.6 8.6 0 0 0-6 6A90 90 0 0 0 0 24a90 90 0 0 0 1.5 16.3 8.6 8.6 0 0 0 6 6C12.7 48 34 48 34 48s21.3 0 26.5-1.7a8.6 8.6 0 0 0 6-6A90 90 0 0 0 68 24a90 90 0 0 0-1.5-16.3z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 68 48'%3E%3Cpath d='M66.5 7.7a8.6 8.6 0 0 0-6-6C55.3 0 34 0 34 0S12.7 0 7.5 1.6a8.6 8.6 0 0 0-6 6A90 90 0 0 0 0 24a90 90 0 0 0 1.5 16.3 8.6 8.6 0 0 0 6 6C12.7 48 34 48 34 48s21.3 0 26.5-1.7a8.6 8.6 0 0 0 6-6A90 90 0 0 0 68 24a90 90 0 0 0-1.5-16.3z'/%3E%3C/svg%3E") center/contain no-repeat;
  transition:transform .2s ease,background .2s ease}
.ytfig:hover .yt-play::after{transform:scale(1.06);background:#e0202a}
.ytfig .yt-note{position:absolute;left:12px;bottom:12px;font-family:var(--font-mono);font-size:10.5px;color:#fff;
  background:rgba(0,0,0,.55);padding:5px 10px;border-radius:var(--r-pill)}

/* ═══ Manufaktur: eine scrollbare Bilderzeile ═══ */
.team-rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 4px 14px;margin-top:24px;
  -webkit-overflow-scrolling:touch;scrollbar-width:thin}
.team-rail figure{flex:0 0 clamp(240px,30vw,320px);scroll-snap-align:start;margin:0;
  border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);box-shadow:var(--elev);background:var(--card)}
.team-rail img{width:100%;aspect-ratio:4/3;object-fit:cover}
.team-rail figcaption{font-size:13px;color:var(--mut);padding:10px 14px}
.team-rail::-webkit-scrollbar{height:8px}
.team-rail::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}
.rail-hint{font-family:var(--font-mono);font-size:11px;color:var(--mut);margin-top:6px}
/* FAQ mit Bild rechts */
.faq-split{display:grid;grid-template-columns:1.25fr .75fr;gap:40px;align-items:start;margin-top:8px}
@media(max-width:900px){.faq-split{grid-template-columns:1fr;gap:24px}}
.faq-split .faq{margin-top:0}

/* Footer: vier Spalten (Marke · Mehr · Familie · Kontakt) */
.foot-grid{grid-template-columns:1.5fr 1fr 1fr 1fr}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.foot-grid{grid-template-columns:1fr}}

/* ═══ Rolldown-Menü für weitere Seiten ═══ */
.nav li.has-sub{position:relative}
.nav .subbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 2px;font:inherit;font-size:14.5px;
  color:var(--ink);background:none;border:0;cursor:pointer}
.nav .subbtn::after{content:'';width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:5px solid var(--mut);transition:transform .2s}
.nav .subbtn[aria-expanded="true"]::after{transform:rotate(180deg)}
.nav .subbtn:hover{color:var(--navy)}
.submenu{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(-6px);
  min-width:270px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--elev);padding:8px;list-style:none;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s;z-index:320}
.nav li.has-sub:hover .submenu,.nav li.has-sub:focus-within .submenu,.submenu.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.submenu li{margin:0}
.submenu a{display:flex;align-items:center;min-height:44px;padding:8px 14px;border-radius:var(--r-md);
  font-size:14px;color:var(--ink);text-decoration:none;white-space:nowrap}
.submenu a:hover,.submenu a:focus{background:var(--gold-soft,rgba(201,162,39,.12));color:var(--navy)}
.submenu .grp{font-family:var(--font-mono);font-size:10px;text-transform:uppercase;letter-spacing:.1em;
  color:var(--mut);padding:10px 14px 4px;margin:0}
@media(max-width:900px){.submenu{display:none}}

/* ═══ Anfrage-Formular ═══ */
.form{display:grid;gap:14px;margin-top:22px}
.form .row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:560px){.form .row2{grid-template-columns:1fr}}
.form label{display:block;font-size:13px;color:var(--mut);margin-bottom:5px}
.form input,.form textarea,.form select{width:100%;min-height:48px;padding:12px 14px;font:inherit;font-size:15px;
  color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:var(--r-md)}
.form textarea{min-height:130px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--navy);outline-offset:1px;border-color:var(--navy)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{font-size:14.5px;padding:12px 16px;border-radius:var(--r-md);display:none}
.form-status.ok{display:block;background:rgba(19,150,90,.12);color:#0d7a4a;border:1px solid rgba(19,150,90,.3)}
.form-status.err{display:block;background:rgba(200,50,50,.10);color:#a52a2a;border:1px solid rgba(200,50,50,.28)}
html[data-theme="dark"] .form-status.ok{color:#5fd6a0}
html[data-theme="dark"] .form-status.err{color:#ff9b9b}