/* ============================================================
   Paradeform — Studio für digitale Markenräume (Demo)
   Konzept: Konstruktion sichtbar gemacht (Blaupause/Spec).
   Eine Kühnheit = Kobalt-Konstruktions-Hero; Rest ruhig.
   ============================================================ */

/* ---------- Fonts (selbst gehostet, OFL) ---------- */
@font-face{font-family:"Bricolage Grotesque";src:url("assets/fonts/bricolage-var.woff2") format("woff2");font-weight:200 800;font-display:swap}
@font-face{font-family:"Hanken Grotesk";src:url("assets/fonts/hanken-var.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Space Mono";src:url("assets/fonts/space-mono-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Space Mono";src:url("assets/fonts/space-mono-700.woff2") format("woff2");font-weight:700;font-display:swap}

/* ---------- Tokens ---------- */
:root{
  --porcelain:#F2EEE7; --paper:#F7F4EE; --ink:#15191F; --ink-soft:#545A64; --ink-mute:#8A8578;
  --cobalt:#2742D8; --cobalt-deep:#1B2E9E; --brass:#B08A4A; --line:#DAD3C7; --line-strong:#C4BBA9;
  --display:"Bricolage Grotesque","Arial Black",sans-serif;
  --body:"Hanken Grotesk","Helvetica Neue",Arial,sans-serif;
  --mono:"Space Mono",ui-monospace,"Courier New",monospace;
  --maxw:1280px; --gutter:clamp(1.2rem,4vw,2.4rem); --section:clamp(5rem,11vw,9rem);
  --radius-sm:3px; --md:10px;
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{box-sizing:border-box}

/* ---------- Kopfhoehe: EINE Quelle ----------
   --header-h ist die volle Hoehe des klebenden Kopfes (inkl. 1px Unterkante).
   Sie SETZT die Kopfhoehe (min-height unten) UND das scroll-padding-top. Damit koennen
   die beiden Zahlen nicht mehr auseinanderlaufen: wer den Kopf aendert, aendert hier —
   und der Anker-Abstand zieht automatisch mit. Nie eine der beiden Zahlen einzeln setzen.
   Topbar, Betriebs-Banner und Promo zaehlen bewusst NICHT mit: sie kleben nicht, sie
   scrollen weg. Nur der klebende Kopf verdeckt ein Anker-Ziel. */
:root{--header-h:89px}
@media (max-width:880px){:root{--header-h:72px}}  /* Nav klappt zum Menue-Knopf → Kopf niedriger */

html{scroll-behavior:smooth;scroll-padding-top:var(--header-h)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--porcelain);color:var(--ink);
  font-family:var(--body);font-size:1.06rem;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img{max-width:100%;display:block;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;line-height:1.02;letter-spacing:-.02em;margin:0}
p{margin:0}
:focus-visible{outline:2px solid var(--cobalt);outline-offset:3px}
.skip-link{position:absolute;left:-9999px;top:0;background:var(--ink);color:#fff;padding:.7rem 1rem;z-index:200;font-family:var(--mono);font-size:.8rem}
.skip-link:focus{left:0}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{padding-block:var(--section);position:relative}

/* Mono-Spec-Utilities (die Signatur-Sprache) */
.spec{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}
.marker{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cobalt);display:inline-flex;align-items:center;gap:.7rem;margin-bottom:1.6rem;max-width:100%}
.marker::before{content:"";width:2.4rem;height:1px;background:var(--brass);flex-shrink:0}
.section-head{max-width:46rem;margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.section-head h2{font-size:clamp(2.2rem,5vw,3.6rem)}
.section-head .lede{margin-top:1.2rem;color:var(--ink-soft);font-size:1.22rem;max-width:40rem}

/* Blaupausen-Raster (sehr fein, nur wo gesetzt) */
.blueprint{position:relative}
.blueprint::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;opacity:.28;mask-image:linear-gradient(180deg,transparent,#000 18%,#000 82%,transparent)}
.blueprint > *{position:relative;z-index:1}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--mono);font-weight:700;
  font-size:.86rem;letter-spacing:.04em;text-transform:uppercase;padding:1rem 1.5rem;border-radius:3px;
  border:1px solid transparent;cursor:pointer;transition:transform .16s ease,background .16s ease,color .16s ease,box-shadow .16s ease}
.btn--primary{background:var(--cobalt);color:#fff}
.btn--primary:hover{background:var(--cobalt-deep);transform:translateY(-2px);box-shadow:0 10px 26px rgba(31,61,240,.28)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{border-color:var(--ink);transform:translateY(-2px)}
.btn--light{background:var(--porcelain);color:var(--ink)}
.btn--light:hover{background:#fff;transform:translateY(-2px)}

/* ---------- Topbar ---------- */
.topbar{border-bottom:1px solid var(--line);background:var(--porcelain)}
.topbar .container{display:flex;justify-content:space-between;gap:1rem;padding-block:.55rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);flex-wrap:wrap}
.topbar .status{color:var(--cobalt)}
.topbar .status::before{content:"●";margin-right:.45rem;color:var(--cobalt);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.4}50%{opacity:1}}

/* ---------- Betriebs-Banner (editierbar über betrieb-admin.html) ---------- */
.notice[hidden],.promo[hidden]{display:none}
.notice{background:var(--ink);color:var(--paper)}
.notice__wrap{display:flex;align-items:center;gap:.7rem;padding-block:.6rem;
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase}
.notice__dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--brass);flex-shrink:0}
.notice__title{color:var(--brass)}
#notice-text{white-space:pre-line;text-transform:none;font-family:var(--body);letter-spacing:0;font-size:.95rem;color:var(--paper)}
.promo__inner{padding-block:.85rem;text-align:center;line-height:1.4}
.promo--event{background:var(--ink);color:var(--paper)}
.promo--event .promo__inner{white-space:pre-line}
.promo--event .promo__pill{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--brass);padding:.3em .7em;border-radius:var(--radius-sm,3px);margin-right:.6rem;white-space:nowrap}
.promo--event .promo__date{font-family:var(--mono);color:var(--brass);font-size:.82rem}
.promo--aktion{color:#fff;clip-path:polygon(0 0,100% 0,calc(100% - 24px) 100%,24px 100%)}
.promo--aktion .promo__inner{padding-block:1.05rem}
.promo--aktion .promo__kx{font-family:var(--display);font-weight:700;font-size:1.5rem;line-height:1.04;letter-spacing:-.02em}
.promo--aktion .promo__sub{font-family:var(--mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.4rem}
.promo--kobalt{background:var(--cobalt)}
.promo--kobalt .promo__sub{color:#dfe6ff}
.promo--ink{background:var(--ink)}
.promo--ink .promo__sub{color:var(--brass)}
@media(max-width:560px){.promo--aktion .promo__kx{font-size:1.2rem}}

/* ---------- Mobiler Sticky-CTA ---------- */
.mcta{display:none}
@media(max-width:760px){
  .mcta{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:90;justify-content:center;align-items:center;gap:.5rem;
    background:var(--cobalt);color:#fff;font-family:var(--mono);font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;
    padding:.95rem 1rem;text-decoration:none;box-shadow:0 -6px 22px rgba(20,22,29,.22)}
  body{padding-bottom:3.4rem}
}

/* ---------- Dankeseite ---------- */
.thanks-affirm{margin:2.2rem 0;padding:1.2rem 1.4rem;border-left:3px solid var(--brass);background:var(--paper);border-radius:0 var(--radius-sm,3px) var(--radius-sm,3px) 0;max-width:46rem}
.thanks-affirm p{margin:.3rem 0 0}.thanks-affirm .spec{color:var(--brass)}
.thanks-links{margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.erreichbar{font-family:var(--mono);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-mute)}
.direct .erreichbar{display:block;margin-top:.3rem}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--porcelain) 93%,transparent);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
/* Hoehe kommt aus --header-h (minus 1px Unterkante des Kopfes), nicht aus Innenabstand:
   so ist die Variable die Ursache der Kopfhoehe und nicht bloss eine zweite Kopie davon.
   Inhalt wird ueber align-items:center mittig gehalten — Optik wie zuvor. */
.site-header .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-block:0;min-height:calc(var(--header-h) - 1px)}
.wordmark{font-family:var(--display);font-weight:700;font-size:1.35rem;letter-spacing:-.03em;color:var(--ink)}
.wordmark b{color:var(--cobalt)}
.nav{display:flex;gap:2rem;align-items:center}
.nav a{font-family:var(--mono);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);position:relative;padding:.2rem 0}
.nav a::after{content:"";position:absolute;left:0;bottom:-3px;height:1px;width:0;background:var(--cobalt);transition:width .2s ease}
.nav a:hover::after,.nav a:focus-visible::after{width:100%}
.header-cta{display:flex;align-items:center;gap:1rem}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;color:var(--ink);padding:.4rem}

/* ---------- Hero (kinetisch) ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero .container{position:relative;padding-top:clamp(1.75rem,4.5vw,3.5rem);padding-bottom:clamp(3.5rem,9vw,7rem)}
@keyframes drawX{to{transform:scaleX(1)}}
.hero__inner{position:relative}
.hero .marker{animation:fadeUp .7s .15s both}
.hero__title{font-size:var(--hero,clamp(3.2rem,11vw,9.5rem));font-weight:700;letter-spacing:-.045em;line-height:.92;
  --hero:clamp(3.2rem,11vw,9.5rem)}
.hero__title span{display:block;animation:fadeUp .8s both}
.hero__title span:nth-child(2){animation-delay:.12s;color:var(--cobalt)}
.hero__baseline{height:2px;background:var(--ink);margin:1.6rem 0 1.8rem;transform:scaleX(0);transform-origin:left;
  animation:drawX 1.1s .3s cubic-bezier(.2,.7,.2,1) forwards}
.hero__thesis{font-family:var(--body);font-size:clamp(1.3rem,2.4vw,1.7rem);color:var(--ink-soft);max-width:36rem;
  animation:fadeUp .8s .4s both}
.hero__thesis em{font-style:normal;font-weight:600;color:var(--ink)}
.hero__actions{margin-top:2.2rem;display:flex;gap:.9rem;flex-wrap:wrap;animation:fadeUp .8s .55s both}
.hero__spec{position:absolute;right:0;bottom:0;text-align:right;display:none}
@media(min-width:1000px){.hero__spec{display:block;animation:fadeUp .8s .7s both}}
.hero__spec div{margin-bottom:.3rem}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* Angebots-Satz: klare Subline ÜBER dem Titel, einzeilig (Mobile bricht um) */
.hero__offer{font-family:var(--body);font-size:1.1rem;font-weight:500;line-height:1.3;letter-spacing:0;
  color:var(--ink-soft);max-width:none;margin:0 0 1.2rem;white-space:nowrap;animation:fadeUp .8s .2s both}
.hero__offer em{font-style:normal;font-weight:700;color:var(--cobalt)}
@media(max-width:720px){.hero__offer{white-space:normal}}
.hero__reassure{font-family:var(--body);font-size:.97rem;color:var(--ink-soft);margin-top:1rem;animation:fadeUp .8s .65s both}
.hero__reassure b{color:var(--ink);font-weight:600}

/* Kundenstimme */
.testimonial{background:var(--paper);border-top:1px solid var(--line)}
.testimonial blockquote{max-width:50rem;margin:0;font-family:var(--display);font-weight:300;
  font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.22;letter-spacing:-.01em;color:var(--ink)}
.testimonial blockquote b{font-weight:600}
.testimonial .cite{margin-top:1.6rem;display:flex;align-items:center;gap:.8rem;
  font-family:var(--mono);font-size:.76rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-mute)}
.testimonial .cite::before{content:"";width:2.4rem;height:1px;background:var(--brass)}
.testimonial .cite em{font-style:normal;color:var(--cobalt)}

/* ---------- Manifest ---------- */
.manifest{background:var(--ink);color:var(--porcelain)}
.manifest .marker{color:var(--brass)}
.manifest .marker::before{background:var(--cobalt)}
.manifest__text{font-family:var(--display);font-weight:300;font-size:clamp(1.8rem,4.2vw,3.1rem);
  line-height:1.16;letter-spacing:-.02em;max-width:24ch}
.manifest__text b{font-weight:600;color:#fff}
.manifest__text .hl{color:var(--cobalt);font-weight:600}
.manifest__meta{margin-top:2.5rem;display:flex;gap:2.5rem;flex-wrap:wrap;color:var(--ink-mute)}
.manifest__meta .spec{color:#9aa0ad}
.manifest__meta b{display:block;font-family:var(--display);font-size:2.4rem;color:#fff;font-weight:600;letter-spacing:-.02em;margin-top:.3rem}

/* ---------- Leistungen ---------- */
.services__grid{border-top:1px solid var(--line-strong)}
.service{display:grid;grid-template-columns:5rem 1fr auto;gap:1.5rem;align-items:baseline;
  padding:2rem 0;border-bottom:1px solid var(--line);transition:background .2s ease,padding .2s ease}
.service:hover{background:var(--paper)}
.service__no{font-family:var(--mono);font-size:.8rem;color:var(--cobalt);letter-spacing:.1em}
.service__name{font-family:var(--display);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:600}
.service__desc{font-size:1.05rem;color:var(--ink-soft);max-width:34rem;margin-top:.5rem}
.service__tags{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);text-align:right;white-space:nowrap}
/* Klartext-Glossar (Nutzen für Laien + Begriffe für SEO/Profis) */
.glossary{margin-top:clamp(2.4rem,5vw,3.6rem);border-top:1px solid var(--line-strong);padding-top:1.8rem}
.glossary__head{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-mute);margin:0 0 1.4rem}
.glossary__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:.2rem 2.4rem}
.gloss{display:flex;gap:.9rem;align-items:baseline;padding:.7rem 0;border-bottom:1px solid var(--line)}
.gloss__t{font-family:var(--mono);font-size:.82rem;font-weight:700;color:var(--cobalt);white-space:nowrap;min-width:8.5rem}
.gloss__d{font-size:.95rem;color:var(--ink-soft)}

/* ---------- Arbeiten / Cases ---------- */
.work{background:var(--paper)}
.case{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:center;
  padding-block:clamp(2.4rem,5vw,4rem);border-top:1px solid var(--line)}
.case--rev .case__media{order:-1}
.case__media{position:relative;border:1px solid var(--line-strong);border-radius:var(--md);overflow:hidden;background:var(--porcelain);box-shadow:0 24px 60px rgba(20,22,29,.12)}
.case__media img{width:100%;display:block}
.case__media .tag{position:absolute;left:0;top:0;background:var(--cobalt);color:#fff;font-family:var(--mono);
  font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;padding:.4rem .7rem}
.case__no{font-family:var(--mono);font-size:.76rem;letter-spacing:.12em;color:var(--cobalt);text-transform:uppercase}
.case h3{font-size:clamp(1.8rem,3.6vw,2.8rem);margin:.7rem 0 .9rem}
.case p{color:var(--ink-soft);max-width:34rem}
.case__metrics{display:flex;gap:2rem;margin-top:1.6rem;flex-wrap:wrap}
.case__metrics div b{display:block;font-family:var(--display);font-size:1.7rem;font-weight:600;color:var(--ink)}
.case__metrics div span{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.case__link{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.6rem;font-family:var(--mono);
  font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cobalt);border-bottom:1px solid currentColor;padding-bottom:.2rem}

/* ---------- Prozess (echte Sequenz → Nummerierung gerechtfertigt) ---------- */
.process__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.step{background:var(--porcelain);padding:2rem 1.7rem;display:flex;flex-direction:column}
.step__no{font-family:var(--mono);font-size:.8rem;color:var(--cobalt);letter-spacing:.1em}
.step h3{font-size:1.4rem;margin:1rem 0 .6rem}
.step p{font-size:1rem;color:var(--ink-soft)}
.step p b{color:var(--cobalt);font-weight:600}   /* Feedback-Runden als Touchpoint hervorheben */
/* Tech-Fußzeile je Schritt: Klartext oben, Fachbegriffe hier für Technik-Prüfer (wie .service__tags) */
.step .step__tag{margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line);
  font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass)}
/* Tempo & Termine: Tempo-Versprechen positiv (Wochen statt Monate) + faire Feedback-Bitte */
.pace{margin-top:clamp(2.4rem,5vw,3.4rem);border:1px solid var(--line-strong);border-radius:var(--md);
  padding:clamp(1.5rem,3vw,2.2rem);background:var(--paper)}
.pace__head{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,3vw,2rem);letter-spacing:-.01em;margin:0 0 .7rem}
.pace__text{color:var(--ink-soft);max-width:64ch}
.pace__text b{color:var(--ink);font-weight:600}
.pace__grid{margin:1.7rem 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.pace__grid > div{background:var(--paper);padding:1rem 1.15rem}
.pace__grid dt{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:.4rem}
.pace__grid dd{margin:0;font-family:var(--display);font-weight:600;font-size:1.15rem;letter-spacing:-.01em;color:var(--cobalt)}
.pace__note{margin:.9rem 0 0;font-family:var(--mono);font-size:.72rem;letter-spacing:.04em;color:var(--ink-mute)}

/* ---------- Studio ---------- */
.studio__grid{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(1.6rem,4vw,3.5rem);align-items:start}
.studio p+p{margin-top:1.2rem}
.studio .big{font-family:var(--display);font-weight:300;font-size:clamp(1.6rem,3vw,2.2rem);line-height:1.25;letter-spacing:-.01em;color:var(--ink)}
.studio__card{border:1px solid var(--line-strong);border-radius:var(--md);padding:1.8rem;background:var(--paper)}
.studio__card .spec{display:block;margin-bottom:.5rem;color:var(--cobalt)}
.studio__card dl{margin:0;display:grid;gap:1rem}
.studio__card dt{font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute)}
.studio__card dd{margin:0;font-family:var(--display);font-size:1.2rem;font-weight:600}

/* ---------- Anfrage / Intake-Formular ---------- */
.intake{background:var(--ink);color:var(--porcelain)}
.intake .marker{color:var(--brass)}
.intake .marker::before{background:var(--cobalt)}
.intake__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:start}
.intake h2{color:#fff;font-size:clamp(2.2rem,5vw,3.4rem)}
.intake__intro p{color:#a7adba;margin-top:1.2rem;max-width:32rem}
.intake__intro .direct{margin-top:2rem;display:grid;gap:.6rem;font-family:var(--mono);font-size:.85rem}
.intake__intro .direct a{color:#fff;border-bottom:1px solid var(--cobalt);padding-bottom:.15rem;width:fit-content}
.form{background:var(--paper);color:var(--ink);border-radius:var(--md);padding:clamp(1.5rem,3vw,2.4rem)}
.form__legend{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--cobalt);margin:0 0 1.4rem;display:flex;justify-content:space-between}
.form__row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.4rem;margin-bottom:1.1rem}
.field label{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft)}
.field label .req{color:var(--cobalt)}
.field input,.field select,.field textarea{font-family:var(--body);font-size:1.05rem;color:var(--ink);
  background:var(--porcelain);border:1px solid var(--line-strong);border-radius:3px;padding:.75rem .85rem;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--cobalt);box-shadow:0 0 0 3px rgba(31,61,240,.16)}
.field textarea{resize:vertical;min-height:120px}
.fieldset{border:0;padding:0;margin:0 0 1.1rem}
.fieldset legend{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.6rem;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:block;font-family:var(--mono);font-size:.74rem;letter-spacing:.04em;padding:.45rem .8rem;border:1px solid var(--line-strong);border-radius:999px;color:var(--ink-soft);transition:.15s}
.chip input:checked+span{background:var(--cobalt);border-color:var(--cobalt);color:#fff}
.chip input:focus-visible+span{outline:2px solid var(--cobalt);outline-offset:2px}
.consent{display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:var(--ink-soft);margin-bottom:1.2rem}
.consent input{margin-top:.25rem;width:18px;height:18px;accent-color:var(--cobalt);flex-shrink:0}
.consent a{color:var(--cobalt);text-decoration:underline}
.form button{width:100%;justify-content:center}
.form__note{margin-top:.9rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--ink-mute);text-align:center}
.hp-field{position:absolute!important;left:-5000px;width:1px;height:1px;overflow:hidden}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#9aa0ad;border-top:1px solid #2a2d36}
.site-footer .container{padding-block:clamp(2.4rem,5vw,3.4rem)}
.footer__top{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2rem}
.footer__brand .wordmark{color:#fff;font-size:1.6rem}
.footer__brand .wordmark b{color:var(--cobalt)}
.footer__brand p{margin-top:1rem;max-width:26rem;font-size:.98rem}
.footer__col h4{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);margin:0 0 1rem}
.footer__col ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer__col a{font-size:.96rem}
.footer__col a:hover{color:#fff}
.footer__bottom{margin-top:2.4rem;padding-top:1.4rem;border-top:1px solid #2a2d36;display:flex;justify-content:space-between;
  gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}

/* ---------- Reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .hero__title span,.hero__baseline,.hero .marker,.hero__thesis,.hero__actions,.hero__spec,.hero__offer,.hero__reassure{animation:none!important;opacity:1!important;transform:none!important}
  .topbar .status::before{animation:none}
}

/* ---------- Responsive ---------- */
@media (max-width:880px){
  .nav,.header-cta .btn{display:none}
  .nav-toggle{display:inline-flex}
  .site-header.open .nav{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:flex-start;
    gap:.2rem;background:var(--porcelain);border-bottom:1px solid var(--line);padding:1rem var(--gutter)}
  .site-header.open .nav a{padding:.7rem 0;width:100%;border-bottom:1px solid var(--line)}
  .case,.case--rev .case__media,.studio__grid,.intake__grid,.footer__top{grid-template-columns:1fr}
  .case--rev .case__media{order:0}
  .service{grid-template-columns:3rem 1fr;gap:1rem}
  .service__tags{display:none}
}
@media (max-width:560px){
  .form__row{grid-template-columns:1fr}
  .topbar{display:none}
  .manifest__meta{gap:1.4rem}
  /* Hero-CTAs gestapelt: keine Quetschung/Überlauf, große Tap-Targets */
  .hero__actions{flex-direction:column;align-items:stretch}
  .hero__actions .btn{width:100%;justify-content:center}
}

/* Legal pages */
.legal{max-width:52rem;margin-inline:auto;padding-block:clamp(2.5rem,6vw,4.5rem)}
.legal h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1.4rem}
.legal h2{font-size:1.3rem;margin:2rem 0 .6rem}
.legal p,.legal li{color:var(--ink-soft);margin-bottom:.7rem}
.legal a{color:var(--cobalt);text-decoration:underline}
/* Buttons im .legal-Kontext nicht als Roh-Link einfärben (sonst Text unsichtbar auf farbigem Grund) */
.legal a.btn{text-decoration:none}
.legal a.btn--primary{color:#fff}
.legal a.btn--ghost,.legal a.btn--light{color:var(--ink)}
.legal .back{display:inline-block;margin-bottom:2rem;font-family:var(--mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.08em;color:var(--cobalt)}

/* ===== Fragebogen / Wizard (additiv) ===== */
.fb{max-width:760px;padding-block:clamp(2rem,5vw,4rem)}
.fb__intro h1{font-size:clamp(2.2rem,5vw,3.4rem);margin-bottom:1rem}
.fb__lead{font-size:1.15rem;max-width:60ch;color:var(--ink-soft)}
.fb__step{margin-block:2.4rem}
.fb__step h2{font-size:clamp(1.6rem,3.4vw,2.3rem);margin-bottom:.4rem;display:flex;flex-wrap:wrap;align-items:baseline;gap:.7rem}
.fb__step h2 .marker{flex-basis:100%;margin-bottom:.5rem}
.fb__why{color:var(--ink-soft);font-size:.95rem;margin:.2rem 0 1.6rem}
.fb__row{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
@media (max-width:560px){.fb__row{grid-template-columns:1fr}}
.fb__close{margin-top:1.4rem;font-size:1.1rem;color:var(--ink-soft)}

/* Auswahl-Gruppen (Radio/Checkbox als Chips).
   fieldset hat einen min-inline-size:min-content-Default (Chrome ignoriert min-width) →
   per max-inline-size + min-inline-size:0 erzwingen wir Umbruch statt Overflow. */
.choice{border:0;padding:0;margin:0 0 1.6rem;min-inline-size:0;max-inline-size:100%}
.choice legend{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;margin-bottom:.7rem;padding:0;max-width:100%;overflow-wrap:anywhere}
.choice legend .req{color:var(--cobalt)}
.choice .chip{display:inline-flex;margin:0 .5rem .5rem 0;max-width:100%}
.choice .chip span{white-space:normal;overflow-wrap:anywhere}
.choice[data-error]{outline:2px solid var(--cobalt);outline-offset:8px;border-radius:3px}
.fb__error{color:var(--cobalt);font-weight:600;font-size:.95rem;margin:.6rem 0 0}
.hint{color:var(--ink-mute);font-size:.9rem;margin-top:.5rem}

/* Felder im Fragebogen sollen sich nicht verstecken (Kontrast auf Porzellan) */
.fb .field input,.fb .field select,.fb .field textarea{background:#fff}

/* Fortschritt: nur mit JS */
.fb__progress{display:none}
.fb__bar{height:4px;background:rgba(20,22,29,.1);border-radius:2px;overflow:hidden}
.fb__bar-fill{display:block;height:100%;width:0;background:var(--cobalt);transition:width .25s ease}
.fb__count{font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;color:var(--ink-mute);margin-top:.5rem}
@media (prefers-reduced-motion:reduce){.fb__bar-fill{transition:none}}

/* Navigations-Buttons */
.fb__nav{display:flex;gap:.8rem;justify-content:space-between;margin-top:2.4rem;flex-wrap:wrap}
.fb__nav .btn[hidden]{display:none}
@media (max-width:560px){.fb__nav .btn{width:100%;justify-content:center}}

/* --- Progressive Enhancement: Schritt-Gating NUR wenn html.js --- */
html.js .fb__progress{display:block;margin-top:1.8rem;margin-bottom:2rem}
html.js .fb__step{display:none}
html.js .fb__step.is-active{display:block}
html.js .fb__step[hidden]{display:none}   /* bedingte Steps bleiben aus, bis JS sie einreiht */

/* Ohne JS: hidden-Conditional-Blöcke trotzdem zeigen (vollständige lange Seite) */
html:not(.js) .fb__step[hidden]{display:block}

/* ===== §03 „Was uns anders macht" — Piktogramm-Tafel + offene Liste (.why-scoped) ===== */
.why{background:var(--porcelain);--cobalt-tint:rgba(39,66,216,.10);--brass-tint:rgba(176,138,74,.16)}
.why__head{max-width:62rem}
.why__title{font-size:clamp(2rem,4.8vw,3.4rem);max-width:20ch}
.why__lede{margin-top:1.2rem;color:var(--ink-soft);font-size:clamp(1.05rem,1.5vw,1.25rem);max-width:64rem}
.why__lede b{color:var(--ink)}

/* Piktogramm-Tafel (auf einen Blick) */
.why .board{margin-top:clamp(2.4rem,5vw,3.4rem);background:var(--paper);border:1px solid var(--line);border-radius:12px;
  padding:clamp(1.4rem,3vw,2.4rem);display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.2vw,1.8rem)}
.why .cell{text-align:center;display:flex;flex-direction:column;align-items:center;gap:.5rem;padding:.3rem}
.why .pic{width:104px;height:104px;border-radius:50%;background:var(--porcelain);display:grid;place-items:center;border:1px solid var(--line)}
.why .pic svg{width:68px;height:68px;overflow:visible}
.why .name{font-family:var(--display);font-weight:600;font-size:1.18rem;letter-spacing:-.01em}
.why .csub{font-size:.9rem;color:var(--ink-soft);max-width:20ch;line-height:1.35}
.why .bridge{margin:2.2rem 0 1.1rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-mute);display:flex;align-items:center;gap:.7rem}
.why .bridge::after{content:"";flex:1;height:1px;background:var(--line)}

/* Offene Liste (kein Dropdown — Überzeugungstexte sichtbar) */
.why .rows{display:flex;flex-direction:column;gap:.8rem}
.why .row{background:var(--paper);border:1px solid var(--line);border-radius:10px;display:grid;grid-template-columns:auto 1fr;gap:1.15rem;padding:1.35rem 1.4rem}
.why .row__ic{width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--cobalt-tint)}
.why .row__ic svg{width:32px;height:32px;overflow:visible}
.why .row__ic.brass{background:var(--brass-tint)}
.why .worry{display:block;font-size:.9rem;color:var(--ink-mute);margin-bottom:.25rem}
.why .master{display:block;font-family:var(--display);font-weight:600;font-size:1.26rem;letter-spacing:-.015em;margin-bottom:.55rem}
.why .master .k{color:var(--cobalt)}
.why .row__text{color:var(--ink-soft)}
.why .row__text b{color:var(--ink)}
.why .row__tag{margin-top:.7rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.why .proof{margin-top:.9rem;display:inline-flex;align-items:center;gap:.55rem;padding:.5rem .8rem;border:1.5px solid var(--brass);border-radius:6px;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.why .proof svg{width:16px;height:16px;color:var(--brass)}

/* Goldstandard-Schluss */
.why .close{margin-top:2.2rem;padding-top:1.6rem;border-top:1px solid var(--line)}
.why .gold{display:flex;gap:1.4rem;align-items:center;background:var(--brass-tint);border:1px solid rgba(176,138,74,.35);border-radius:12px;padding:clamp(1.3rem,2.6vw,1.8rem)}
.why .gold__seal{flex:none}
.why .gold__seal svg{width:60px;height:60px}
.why .gold__h{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.6vw,1.9rem);margin:0 0 .45rem}
.why .gold__p{color:var(--ink-soft);max-width:60ch}
.why .gold__p b{color:var(--brass);font-weight:700}

@media (max-width:760px){
  .why .board{grid-template-columns:repeat(2,1fr)}
  .why .pic{width:96px;height:96px}
  .why .pic svg{width:60px;height:60px}
  .why .row{padding:1.1rem}
  .why .row__ic{width:48px;height:48px}
  .why .master{font-size:1.14rem}
}
@media (max-width:620px){.why .gold{flex-direction:column;align-items:flex-start}}

/* No-JS-Sicherung: .reveal-Inhalte auch ohne JS sichtbar (Brillen-QS) */
html:not(.js) .reveal{opacity:1;transform:none}