/* ==========================================================================
   BrandWear Studio — styles.css (ein Stylesheet für alle Seiten)
   Quelle: war-rooms/brandwear-website/agents/ux/design-spec.md (verbindlich)
   Gesetze (Wave 0): Hairline · Ein Held pro Sektion · 16:1-Kontrast ·
   Gelbraum · Flächen 40–50 % Gelb · Condensed Caps linksbündig, lh .9
   Fonts: self-hosted (OFL — SIL Open Font License; Anton © The Anton Project
   Authors, Archivo © Omnibus-Type — Quelle: Google Fonts, latin-Subset)
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face{
  font-family:'Anton';
  src:url('../fonts/anton-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-regular-latin.woff2') format('woff2');
  font-weight:400;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-semibold-latin.woff2') format('woff2');
  font-weight:600;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-bold-latin.woff2') format('woff2');
  font-weight:700;font-style:normal;font-display:swap;
}
/* Metrisch angepasster Fallback gegen Layout-Sprung auf Messe-LTE (Wave-0 Pre-Mortem 1) */
@font-face{
  font-family:'Anton Fallback';
  src:local('Arial Narrow'), local('ArialNarrow');
  size-adjust:97%;ascent-override:100%;descent-override:25%;line-gap-override:0%;
}

/* ---------- Tokens (design-spec §3.1) ---------- */
:root{
  --gelb:#F7D617;
  --schwarz:#12100B;            /* warmes Tiefschwarz — Druckfarbe, nie #000 */
  --weiss:#FFFDF4;              /* Off-White: nur Text + Zeichnungsfüllung, NIE Fläche */
  --fehler:#FF5A3C;             /* Formularfehler auf Schwarz (6.1:1) */
  --fehler-tief:#9E1B0E;        /* Reserve: Fehler auf Gelb (5.6:1) */
  --text-dim:rgba(255,253,244,.68);   /* Sekundärtext auf Schwarz (8.4:1) */
  --text-dim-gelb:rgba(18,16,11,.65); /* Mikro-Präfixe auf Gelb (5.2:1) */
  --line:rgba(247,214,23,.28);  /* Deko-Hairline auf Schwarz — NIE für Inputs */
  --line-input:rgba(247,214,23,.50); /* Input-Rahmen (≥3:1 Non-Text) */
  --gutter:clamp(20px, 4.5vw, 64px);
  --font-display:'Anton','Anton Fallback','Arial Narrow',Impact,sans-serif;
  --font-text:'Archivo','Helvetica Neue',Arial,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);
  --fs-hero:clamp(3.5rem, 12.5vw, 11.25rem);  /* 56 → 180px, NUR H1 */
  --fs-h2:clamp(2.5rem, 7.5vw, 6.75rem);      /* 40 → 108px, NUR Sektions-H2 */
  --fs-lead:clamp(1rem, 1.35vw, 1.1875rem);
  --fs-body:clamp(.96875rem, 1.25vw, 1.125rem);
  --fs-small:.8125rem;   /* 13px — Mikro-Labels, Fehlertexte, Abbinder */
  --fs-micro:.6875rem;   /* 11px — Eyebrows, Spec-Row, Deko */
  --fs-btn:.78125rem;    /* 12.5px */
  --s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
}

/* ---------- Reset & Grund ---------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  background:var(--gelb);
  color:var(--schwarz);
  font-family:var(--font-text);
  font-size:16px;line-height:1.5;
  overflow-x:clip;
}
::selection{background:var(--schwarz);color:var(--gelb)}
.sec--schwarz ::selection{background:var(--gelb);color:var(--schwarz)}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
section{scroll-margin-top:24px}

/* Fokus (design-spec §7.2): nie outline:none ohne Ersatz */
:focus-visible{outline:3px solid var(--schwarz);outline-offset:3px}
.sec--schwarz :focus-visible,.strip :focus-visible,.marquee :focus-visible,
.site-footer :focus-visible{outline-color:var(--gelb)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--schwarz);color:var(--gelb);
  padding:14px 22px;font-size:var(--fs-btn);font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;
}
.skip-link:focus{left:0}

.visually-hidden{
  position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* Mikro-Label — das Arbeitstier des Label-Looks */
.lbl{
  font-size:var(--fs-micro);
  font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  white-space:nowrap;
}
.lbl--s{font-size:var(--fs-small);letter-spacing:.16em}
.nr{font-variant-numeric:tabular-nums}

/* ---------- Header (nicht sticky, D403) ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  height:72px;padding:0 var(--gutter);
  border-bottom:1px solid var(--schwarz);
  background:var(--gelb);
}
.logo{display:flex;flex-direction:column;line-height:1}
/* Textmarke bis Logo-SVG geliefert wird (C-018.2 — keine Script-Font-Imitation) */
.logo .wordmark{font-family:var(--font-display);font-size:20px;letter-spacing:.02em;text-transform:uppercase}
.logo .studio{font-size:8.5px;font-weight:700;letter-spacing:.52em;text-transform:uppercase;margin-top:3px}
.topnav{display:flex;gap:clamp(20px,3vw,44px)}
.topnav a{position:relative;padding:4px 0}
.topnav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--schwarz);transition:width .25s var(--ease);
}
.topnav a:hover::after,.topnav a:focus-visible::after{width:100%}
.top-anfrage{display:none}

/* ---------- Hero (001, Gelb) ---------- */
.hero{
  position:relative;
  min-height:min(calc(100svh - 72px), 940px);
  display:flex;flex-direction:column;
  padding:clamp(24px,3.5vh,44px) var(--gutter) 0;
}
.edge-url{
  position:absolute;left:calc(var(--gutter) * .32);bottom:110px;
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:10px;font-weight:600;letter-spacing:.42em;text-transform:lowercase;
  opacity:.85;
}
.eyebrow{display:flex;align-items:center;gap:18px;margin-bottom:clamp(24px,4.5vh,52px)}
.eyebrow .rule{flex:0 1 220px;height:1px;background:var(--schwarz)}
.sec--schwarz .eyebrow .rule{background:var(--line)}
.sec--schwarz .eyebrow{color:var(--gelb)}

h1{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-hero);line-height:.9;letter-spacing:.005em;
  text-transform:uppercase;
}
.line-wrap{display:block;overflow:hidden;padding-right:.05em}
.line{display:flex;align-items:center}
html.js .line{transform:translateY(112%);animation:rise 1s var(--ease) forwards}
html.js .line-wrap:nth-child(1) .line{animation-delay:.08s}
html.js .line-wrap:nth-child(2) .line{animation-delay:.17s}
html.js .line-wrap:nth-child(3) .line{animation-delay:.26s}
@keyframes rise{to{transform:translateY(0)}}

.hand{height:.82em;width:auto;margin-left:auto;margin-right:.35em;transform:scaleX(-1) rotate(3deg);flex:0 0 auto}

.hero-sub{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:28px;margin-top:clamp(26px,4.5vh,52px);
}
html.js .hero-sub{opacity:0;animation:fadeup .9s var(--ease) .55s forwards}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.subline{font-size:var(--fs-lead);font-weight:600;letter-spacing:.01em;max-width:44ch}
.subline small{display:block;margin-top:10px;font-size:12.5px;font-weight:400;letter-spacing:.02em;opacity:.72}
.cta-row{display:flex;align-items:center;gap:26px;flex-wrap:wrap}

/* Buttons (design-spec §3.6) */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  font-size:var(--fs-btn);font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  padding:19px 30px 18px;border-radius:2px;border:0;cursor:pointer;
  white-space:nowrap;min-height:48px;
  font-family:var(--font-text);
  transition:transform .22s var(--ease),box-shadow .22s var(--ease);
}
.btn--dark{background:var(--schwarz);color:var(--gelb)}
.btn--dark:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 rgba(18,16,11,.22)}
.btn--gelb{background:var(--gelb);color:var(--schwarz)}
.btn--gelb:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 0 rgba(247,214,23,.28)}
.btn:active{transform:translate(0,0);box-shadow:none}
.btn .arr{transition:transform .22s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.ghost{
  display:inline-block;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:2px solid var(--schwarz);padding-bottom:3px;white-space:nowrap;min-height:auto;
}
.sec--schwarz .ghost,.strip .ghost{border-bottom-color:var(--gelb)}

.spec-row{
  margin-top:auto;
  display:flex;align-items:center;gap:clamp(24px,4vw,72px);
  border-top:1px solid var(--schwarz);
  padding:18px 0 22px;
  padding-right:clamp(150px,18vw,290px);
}
html.js .spec-row{opacity:0;animation:fadeup .9s var(--ease) .75s forwards}
.spec{font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;white-space:nowrap}
.spec b{font-weight:400;color:var(--text-dim-gelb);margin-right:.7em}
.spec-scroll{margin-left:auto}
.spec--url{display:none}

.badge{
  position:absolute;right:clamp(18px,6vw,86px);bottom:0;
  transform:translateY(52%);
  width:clamp(118px,13.5vw,182px);z-index:6;
  filter:drop-shadow(5px 6px 0 rgba(18,16,11,.18));
}
html.js .badge{opacity:0;animation:pop .8s var(--ease) .95s forwards}
@keyframes pop{from{opacity:0;transform:translateY(52%) scale(.7) rotate(-14deg)}to{opacity:1;transform:translateY(52%) scale(1) rotate(0)}}
.badge svg{animation:spin 26s linear infinite;width:100%;height:auto}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Marquee (exakt 1×, Gelb auf Schwarz — design-spec §2.4) ---------- */
.marquee{
  background:var(--schwarz);color:var(--gelb);
  overflow:hidden;border-bottom:1px solid var(--line);
  padding:14px 0;
}
.marquee-track{display:flex;width:max-content;animation:scroll 46s linear infinite}
.marquee-seq{
  display:flex;font-size:12px;font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;white-space:nowrap;
}
.marquee-seq span{padding:0 1.6em}
.marquee-seq .star{padding:0;transform:translateY(-1px)}
@keyframes scroll{to{transform:translateX(-50%)}}

/* ---------- Messe-Strip (temporär, D307/C-007) ---------- */
.strip-zone{background:var(--schwarz);color:var(--weiss);padding:clamp(40px,6vh,64px) var(--gutter)}
.strip{
  max-width:720px;border:1px solid var(--line);
  padding:clamp(20px,3.5vw,32px);
}
.strip .lbl{color:var(--gelb)}
.strip p{margin:14px 0 20px;font-size:var(--fs-body);line-height:1.6;color:var(--weiss);max-width:52ch}
.strip-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.strip[hidden]{display:none}
.strip-zone[hidden]{display:none}

/* ---------- Sektions-Gerüst ---------- */
.sec{position:relative;padding:clamp(72px,11vh,130px) var(--gutter) clamp(90px,14vh,150px);overflow:hidden}
.sec--gelb{background:var(--gelb);color:var(--schwarz)}
.sec--schwarz{background:var(--schwarz);color:var(--weiss)}
.sec .eyebrow{margin-bottom:clamp(34px,6vh,64px)}
h2{
  font-family:var(--font-display);font-weight:400;
  font-size:var(--fs-h2);line-height:.93;letter-spacing:.005em;
  text-transform:uppercase;max-width:14em;
}
.sec--schwarz h2{color:var(--gelb)}
.copy{
  margin-top:clamp(30px,5vh,52px);max-width:58ch;
  font-size:var(--fs-body);line-height:1.72;
}
.sec--schwarz .copy{color:var(--text-dim)}
.sec--gelb .copy{color:rgba(18,16,11,.82)}
.copy .lead{display:block;font-weight:600;margin-bottom:.7em}
.sec--schwarz .copy .lead{color:var(--weiss)}
.sec--gelb .copy .lead{color:var(--schwarz)}
.copy p+p{margin-top:1.1em}
.copy .solo{display:block;margin-top:1.6em;font-weight:600}
.sec--schwarz .copy .solo{color:var(--weiss)}

/* Scroll-Reveal: nur unter html.js verstecken (C-105.1 — kein Inline-Script nötig) */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
html.js .reveal.is-in{opacity:1;transform:none}

/* Halbton-Ecke — NUR 002 (oben rechts) + 008 (unten links), nur auf Schwarz */
.halftone::after{
  content:"";position:absolute;pointer-events:none;
  width:min(46vw,560px);height:min(46vw,560px);
  background-image:radial-gradient(rgba(247,214,23,.30) 1.6px, transparent 1.6px);
  background-size:15px 15px;
}
.halftone--tr::after{
  top:0;right:0;
  -webkit-mask-image:radial-gradient(circle at top right,#000 0%,transparent 68%);
  mask-image:radial-gradient(circle at top right,#000 0%,transparent 68%);
}
.halftone--bl::after{
  bottom:0;left:0;
  -webkit-mask-image:radial-gradient(circle at bottom left,#000 0%,transparent 68%);
  mask-image:radial-gradient(circle at bottom left,#000 0%,transparent 68%);
}

/* ---------- 002 Haltung: Frau-Slot ---------- */
.haltung-grid{display:grid;grid-template-columns:minmax(0,58ch) 1fr;gap:clamp(32px,5vw,80px);align-items:start}
.char-slot{display:flex;justify-content:center;align-items:flex-start}
.char-slot img{height:clamp(200px,24vw,340px);width:auto}
.char-slot:empty{display:none}

/* ---------- 003 Leistung: 3 Print-Spalten ---------- */
.leistung-grid{
  margin-top:clamp(40px,6vh,72px);
  display:grid;grid-template-columns:1fr 1fr 1fr;
  border-top:1px solid var(--schwarz);
}
.leistung-grid .block{padding:clamp(24px,3vw,44px) clamp(20px,2.5vw,40px) 0 0}
.leistung-grid .block+.block{border-left:1px solid var(--schwarz);padding-left:clamp(20px,2.5vw,40px)}
.block h3{font-size:var(--fs-small);font-weight:700;letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px}
.block .disziplin{font-weight:400;color:var(--text-dim-gelb);letter-spacing:.16em}
.block p{font-size:var(--fs-body);line-height:1.68;color:rgba(18,16,11,.82)}

/* ---------- 004 Prozess: Care-Label-Tabelle ---------- */
.prozess-grid{
  margin-top:clamp(40px,6vh,72px);
  display:grid;grid-template-columns:repeat(4,1fr);
  border-top:1px solid var(--line);
}
.schritt{padding:clamp(24px,3vw,40px) clamp(18px,2vw,36px) 0 0}
.schritt+.schritt{border-left:1px solid var(--line);padding-left:clamp(18px,2vw,36px)}
.schritt .ziffer{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border:1px solid var(--line);
  font-size:var(--fs-small);font-weight:700;font-variant-numeric:tabular-nums;
  color:var(--gelb);margin-bottom:16px;
}
.schritt h3{font-size:var(--fs-small);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--weiss);margin-bottom:12px}
.schritt p{font-size:15px;line-height:1.65;color:var(--text-dim)}

/* ---------- 005 Showcase: schwarze Karten auf Gelb ---------- */
.showcase-grid{margin-top:clamp(40px,6vh,72px);display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s6)}
.karte{
  background:var(--schwarz);color:var(--weiss);
  border:1px solid var(--schwarz);
  padding:var(--s6);
  display:flex;flex-direction:column;
}
.karte-kopf{
  display:flex;align-items:center;justify-content:space-between;
  color:var(--gelb);padding-bottom:14px;margin-bottom:18px;
  border-bottom:1px solid var(--line);
}
.karte-medien{aspect-ratio:4/5;display:flex;flex-direction:column;justify-content:flex-end}
.karte-medien img{width:100%;height:100%;object-fit:cover}
/* Variante A: Care-Label-Panel (vollwertig gestaltet, KEIN leerer Rahmen) */
.spec-panel{display:flex;flex-direction:column;justify-content:flex-end;height:100%}
.spec-panel .objekt{font-size:var(--fs-small);font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--weiss);margin-bottom:18px}
.spec-panel dl{border-top:1px solid var(--line)}
.spec-panel .zeile{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.spec-panel dt{font-size:var(--fs-micro);font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gelb);white-space:nowrap}
.spec-panel dd{font-size:var(--fs-micro);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);text-align:right}
.karte-fuss{margin-top:18px;font-size:var(--fs-small);line-height:1.5;color:var(--text-dim)}
.showcase-cta{margin-top:clamp(36px,5vh,56px)}

/* ---------- 006 Anlässe: Tabellen-Zeilen ---------- */
.anlaesse{margin-top:clamp(40px,6vh,72px);border-top:1px solid var(--line)}
.anlass{display:grid;grid-template-columns:minmax(220px,.38fr) 1fr;gap:16px 32px;padding:18px 0;border-bottom:1px solid var(--line)}
.anlass dt{font-size:var(--fs-small);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gelb)}
.anlass dd{font-size:var(--fs-body);color:var(--text-dim)}
.anlaesse-abbinder{margin-top:clamp(24px,4vh,40px);font-size:var(--fs-body);font-weight:600;color:var(--weiss)}

/* ---------- 007 Studio ---------- */
.studio-grid{display:grid;grid-template-columns:minmax(0,58ch) 1fr;gap:clamp(32px,5vw,80px);align-items:start}

/* ---------- 008 Anfrage: Formular (design-spec §6) ---------- */
.anfrage-kopf{display:flex;align-items:flex-start;gap:20px}
.anfrage-kopf .hand-mini{width:48px;flex:0 0 auto;margin-top:10px;transform:rotate(-6deg)}
.reassurance{margin-top:clamp(20px,3vh,32px);max-width:58ch;font-size:var(--fs-body);line-height:1.65;color:var(--text-dim)}

.formular{margin-top:clamp(36px,5vh,56px);max-width:560px}
.feld{margin-bottom:22px}
.feld label{
  display:block;font-size:var(--fs-small);font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gelb);margin-bottom:8px;
}
.feld label .optional{font-weight:400;letter-spacing:.1em;color:var(--text-dim);text-transform:none}
.feld input,.feld textarea{
  width:100%;background:transparent;color:var(--weiss);
  border:1px solid var(--line-input);border-radius:0;
  padding:14px 16px;font-family:var(--font-text);
  font-size:16px; /* fix — verhindert iOS-Auto-Zoom */
  line-height:1.4;min-height:48px;
}
.feld textarea{resize:vertical;min-height:120px}
.feld input::placeholder,.feld textarea::placeholder{color:rgba(255,253,244,.45)}
.feld input:focus,.feld textarea:focus{border:2px solid var(--gelb);outline:none;padding:13px 15px}
.feld input:focus-visible,.feld textarea:focus-visible{outline:none}
.feld.hat-fehler input,.feld.hat-fehler textarea{border:2px solid var(--fehler);padding:13px 15px}
.feld-fehler{display:none;margin-top:8px;font-size:var(--fs-small);line-height:1.5;color:var(--fehler)}
.feld.hat-fehler .feld-fehler{display:block}

/* Honeypot: Offscreen-Pattern — NIE display:none (tech-spec §2.3) */
.hp-feld{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.form-legende{font-size:var(--fs-micro);letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);margin-bottom:18px}
.form-hinweis{font-size:var(--fs-small);line-height:1.6;color:var(--text-dim);margin:20px 0 22px}
.form-hinweis a{color:var(--gelb);border-bottom:1px solid var(--line-input)}
.formular .btn{width:auto}

.server-fehler{
  display:none;margin-top:20px;border:1px solid var(--fehler);
  padding:16px 18px;font-size:var(--fs-small);line-height:1.6;color:var(--fehler);
}
.server-fehler a{color:var(--gelb);border-bottom:1px solid var(--line-input)}
.server-fehler.sichtbar{display:block}

/* Erfolgs-Panel on-page (D306) */
.erfolg{
  display:none;border:1px solid var(--gelb);
  padding:clamp(24px,3.5vw,36px);max-width:560px;margin-top:clamp(36px,5vh,56px);
}
.erfolg.sichtbar{display:block}
.erfolg .titel{font-size:18px;font-weight:700;color:var(--weiss);margin-bottom:10px}
.erfolg p{font-size:var(--fs-body);line-height:1.65;color:var(--text-dim)}
.erfolg p+p{margin-top:.8em}
.erfolg a{color:var(--gelb);border-bottom:1px solid var(--line-input)}

/* Direktkanal-Fallback (immer sichtbar, §6.5) */
.direkt{margin-top:clamp(32px,4.5vh,48px);border-top:1px solid var(--line);padding-top:24px;max-width:560px}
.direkt .lbl--s{color:var(--gelb);display:block;margin-bottom:12px;white-space:normal}
.direkt ul{list-style:none}
.direkt li{margin-bottom:6px}
.direkt a,.direkt .klartext{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-body);color:var(--weiss);
}
.direkt a{border-bottom:1px solid var(--line-input)}
.direkt .klartext{user-select:all;color:var(--text-dim)}

/* EN-Abbinder-Band (D205 — einziger EN-Moment im Hauptfluss) */
.abbinder{
  margin-top:clamp(48px,7vh,80px);border-top:1px solid var(--line);padding-top:22px;
  font-size:var(--fs-small);font-weight:600;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gelb);
}

/* ---------- Footer ---------- */
.site-footer{
  background:var(--schwarz);color:var(--weiss);
  border-top:1px solid var(--line);
  padding:clamp(40px,6vh,64px) var(--gutter) clamp(32px,5vh,48px);
}
.footer-oneliner{font-size:clamp(16px,1.3vw,18px);font-weight:600;color:var(--weiss)}
.footer-meta{
  margin-top:18px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 28px;
  font-size:12.5px;color:var(--text-dim);
}
.footer-meta a{
  display:inline-flex;align-items:center;min-height:44px;
  border-bottom:1px solid var(--line-input);color:var(--weiss);
}
.footer-url{margin-top:14px;font-size:10px;font-weight:600;letter-spacing:.42em;text-transform:lowercase;color:var(--text-dim)}

/* ---------- Rechtsseiten + danke/404 (Blueprint §3.3/§3.11) ---------- */
.legal{background:var(--schwarz);color:var(--weiss);min-height:100svh}
.legal-inner{max-width:760px;padding:clamp(32px,6vh,64px) var(--gutter) clamp(64px,9vh,96px)}
.legal .zurueck{
  display:inline-flex;align-items:center;min-height:44px;
  font-size:var(--fs-small);font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gelb);margin-bottom:clamp(32px,5vh,48px);
}
.legal h1{font-size:clamp(2.2rem,6vw,4.5rem);color:var(--gelb);margin-bottom:clamp(28px,4vh,44px)}
.legal h2{
  font-family:var(--font-text);font-size:15px;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--weiss);max-width:none;
  margin:clamp(32px,5vh,44px) 0 14px;line-height:1.4;
}
.legal p,.legal li{font-size:15.5px;line-height:1.7;color:var(--text-dim)}
.legal p+p{margin-top:.8em}
.legal ul{padding-left:20px;margin:10px 0}
.legal a{color:var(--weiss);border-bottom:1px solid var(--line-input)}
.legal strong{color:var(--weiss)}
.legal .hervorgehoben{border:1px solid var(--gelb);padding:18px 20px;margin:18px 0}
.legal .stand{font-size:var(--fs-small);color:var(--text-dim);margin-bottom:24px}
.legal-footer{
  max-width:760px;margin-top:clamp(40px,6vh,64px);
  border-top:1px solid var(--line);padding-top:20px;
  display:flex;flex-wrap:wrap;gap:10px 28px;font-size:12.5px;color:var(--text-dim);
}
.legal-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--weiss);border-bottom:1px solid var(--line-input)}

/* Solo-Seiten (danke.html, 404.html): Gelbfläche, EINE Anton-Zeile */
.solo-page{
  background:var(--gelb);color:var(--schwarz);
  min-height:100svh;display:flex;flex-direction:column;
  padding:clamp(24px,4vh,44px) var(--gutter);
}
.solo-inner{margin:auto 0;max-width:820px;border-top:1px solid var(--schwarz);border-bottom:1px solid var(--schwarz);padding:clamp(40px,7vh,72px) 0}
.solo-inner h1{font-size:clamp(2.8rem,9vw,7.5rem);margin-bottom:clamp(20px,3.5vh,32px)}
.solo-inner p{font-size:var(--fs-body);line-height:1.65;color:rgba(18,16,11,.82);max-width:54ch}
.solo-inner p+p{margin-top:.8em}
.solo-inner a{border-bottom:1px solid var(--schwarz);font-weight:600}
.solo-inner .btn{border-bottom:none;margin-top:clamp(24px,4vh,36px)}
.solo-meta{font-size:10px;font-weight:600;letter-spacing:.42em;text-transform:lowercase;color:var(--text-dim-gelb)}

/* ---------- Responsive (design-spec §8.2 — ein Breakpoint: 820px) ---------- */
@media (max-width:820px){
  .topbar{height:62px}
  .topnav{display:none}
  .top-anfrage{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;border-bottom:2px solid var(--schwarz);padding-bottom:2px}
  .hero{min-height:min(calc(100svh - 62px), 940px)}
  .edge-url{display:none}
  .spec--url{display:inline-block}
  .eyebrow .rule{flex-basis:48px}
  .eyebrow .lbl--wrap{white-space:normal;line-height:1.6}
  .hand{height:.78em;margin-right:.1em}
  .hero-sub{flex-direction:column;align-items:flex-start;gap:26px}
  .spec-row{flex-wrap:wrap;gap:12px 28px;padding-right:0;padding-bottom:86px}
  .spec-scroll{display:none}
  .badge{width:112px;right:18px}
  .marquee-seq{font-size:11px}
  h2 br,.h-treppe br{display:none}
  .halftone::after{width:70vw;height:70vw;opacity:.8}
  .strip-actions{flex-direction:column;align-items:stretch}
  .strip-actions .btn{width:100%}
  .haltung-grid,.studio-grid{grid-template-columns:1fr}
  .char-slot{justify-content:flex-start}
  .leistung-grid{grid-template-columns:1fr}
  .leistung-grid .block{padding:24px 0}
  .leistung-grid .block+.block{border-left:0;border-top:1px solid var(--schwarz);padding-left:0}
  .prozess-grid{grid-template-columns:1fr;border-top:0}
  .schritt{display:grid;grid-template-columns:44px 1fr;gap:4px 18px;padding:20px 0;border-top:1px solid var(--line)}
  .schritt+.schritt{border-left:0;padding-left:0}
  .schritt .ziffer{grid-row:1 / span 2;margin-bottom:0}
  .showcase-grid{grid-template-columns:1fr}
  .anlass{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .formular .btn{width:100%}
}

/* ---------- Motion-Robustheit (design-spec §5.2) ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  html.js .line,html.js .hero-sub,html.js .spec-row,html.js .badge{animation:none;transform:none;opacity:1}
  html.js .badge{transform:translateY(52%)}
  .badge svg{animation:none}
  .marquee-track{animation:none}
  .marquee{
    -webkit-mask-image:linear-gradient(to right,#000 78%,transparent 98%);
    mask-image:linear-gradient(to right,#000 78%,transparent 98%);
  }
  html.js .reveal{opacity:1;transform:none;transition:none}
  .btn,.btn .arr,.topnav a::after{transition:none}
}