/* ===== tokens.css ===== */
/* ============================================================
   WILDENTE · tokens.css – Design-Tokens (Farben, Maße)
   Quelle: :root der monolithischen Quellseiten (identisch auf allen 5).
   ============================================================ */
:root{
  --white:#FFFFFF;
  --ink:#0D0D0B;
  --grey:#6E6B64;
  --line:#E9E6DF;
  --gelb:#F5B92B;
  --gelb-hi:#FFD34D;
  --tanne:#2C3A1E;
  --tanne-2:#3B4C28;
  --rot:#E2532F;
  /* ---- Pastell-Palette (Kunden-Feedback: Gelb nur als kleiner
     CTA-Akzent; Flächen-Akzente kommen aus diesen fünf Tönen) ---- */
  --peach:#F6D1B1;
  --blau:#C7D7E8;
  --lavendel:#D8C7E8;
  --mint:#BFE3CC;
  --sand:#EDE3D3;
  /* Sekundärtext auf Pastellflächen: --grey (#6E6B64) fällt auf allen
     Pastellen unter 4.5:1 – --ink-2 hält überall ≥ 5.0:1. */
  --ink-2:#4A4A42;
  /* Karo-Linien auf Sand-Grund (dekorativ, Pendant zu --line auf Weiß) */
  --sand-line:#D9CBB4;
  --pad:20px;
  --maxw:1240px;
  --nav-h:64px;
  /* ---- Seiten-Leitfarbe (Farb-Dramaturgie) ----
     Medienrahmen-Offsets u. a. laufen über var(--accent).
     Default Gelb (index/rechtliches); Unterseiten mappen unten.
     Der Index darf --accent pro Sektion überschreiben (Mix). */
  --accent:var(--gelb);
}
@media(min-width:820px){
  :root{--pad:48px;--nav-h:76px}
}

/* Farb-Dramaturgie: eine Pastell-Leitfarbe pro Unterseite */
body[data-page="leistungen"]{--accent:var(--blau)}
body[data-page="team"]{--accent:var(--mint)}
body[data-page="blog"]{--accent:var(--sand)}
body[data-page="kontakt"]{--accent:var(--lavendel)}

/* ---- Pastell-Utilities (für Karten, Chips, Sektionen) ----
   Setzen IMMER Ink-Text (Kontrast-Pflicht: keine weiße Schrift auf
   Pastell) und dunkeln --grey lokal auf --ink-2, damit Sekundärtext
   in der Fläche automatisch ≥ 4.5:1 hält.
   Hinweis Cascade: einfache Klassen-Spezifität – Komponenten, die
   selbst später ein background setzen, gewinnen. Dort entweder das
   background entfernen oder direkt var(--peach) & Co. nutzen. */
.bg-peach{background:var(--peach);color:var(--ink);--grey:var(--ink-2)}
.bg-blau{background:var(--blau);color:var(--ink);--grey:var(--ink-2)}
.bg-lavendel{background:var(--lavendel);color:var(--ink);--grey:var(--ink-2)}
.bg-mint{background:var(--mint);color:var(--ink);--grey:var(--ink-2)}
.bg-sand{background:var(--sand);color:var(--ink);--grey:var(--ink-2)}


/* ===== base.css ===== */
/* ============================================================
   WILDENTE · base.css – Reset, Grund-Typo, Typo-Rollen, Layout-Basis
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
/* Kein CSS-Smooth-Scroll: kollidiert mit Lenis (spätere Phase) und
   verfälscht programmatische Scrolls (QA, Anker). Lenis übernimmt das. */
html{overflow-x:clip}
body{
  background:var(--white);color:var(--ink);
  font-family:'Archivo',system-ui,sans-serif;
  font-size:16px;line-height:1.55;
  /* clip statt hidden: hidden macht body zum Scroll-Container
     (overflow-y wird auto) und bricht position:sticky (.svc-side). */
  overflow-x:clip;
}
::selection{background:var(--gelb);color:var(--ink)}

/* ---------- Tastatur-Fokus (additiv, alle Seiten) ----------
   Vorher gab es außer den Formularfeldern KEINEN gestalteten
   Fokuszustand (nur UA-Default). Sichtbarer Marken-Ring nur für
   :focus-visible (Tastatur), Maus-Klicks bleiben ringfrei.
   Auf dunklen Flächen (CTA, Footer, Menü, on-dark-Buttons) kippt
   der Ring auf Gelb – Ink wäre dort unsichtbar. */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.cta :focus-visible,footer :focus-visible,.menu :focus-visible,
.btn.on-dark:focus-visible{outline-color:var(--gelb)}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer}

/* ---------- Typo-Rollen ---------- */
.display{
  font-weight:900;font-stretch:72%;text-transform:uppercase;
  letter-spacing:-0.02em;line-height:.9;
}
.serif-note{font-family:Georgia,'Times New Roman',serif;font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}

/* ---------- Layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--pad)}
section{padding:88px 0}
.rule-t{border-top:2px solid var(--ink)}
.rule-b{border-bottom:2px solid var(--ink)}

@media(min-width:820px){
  section{padding:120px 0}
}


/* ===== components.css ===== */
/* ============================================================
   WILDENTE · components.css – geteilte Komponenten (2+ Seiten
   bzw. zentrale Basis-Komponenten). 1:1 aus den Quellseiten
   übernommen; der <style>-Block war auf allen 5 Seiten identisch.
   Seitenzuordnung als Kommentar je Block.
   ============================================================ */

/* ---------- Label (alle Seiten) ---------- */
.label{
  display:inline-flex;align-items:center;gap:8px;
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
}
.label::before{content:"";width:8px;height:8px;background:var(--gelb);display:inline-block}
.label.on-dark{color:var(--white)}

/* ---------- Buttons (alle Seiten) ---------- */
.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;
  padding:16px 26px;border-radius:999px;border:2px solid var(--ink);
  background:transparent;color:var(--ink);
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.btn .arr{transition:transform .25s ease}
.btn:hover .arr{transform:translate(3px,-3px)}
.btn:active{transform:scale(.97)}
.btn.solid{background:var(--ink);color:var(--white)}
.btn.solid:hover{background:var(--tanne)}
.btn.yellow{background:var(--gelb);border-color:var(--gelb)}
.btn.yellow:hover{background:var(--gelb-hi);border-color:var(--gelb-hi)}
.btn.on-dark{border-color:var(--white);color:var(--white)}
.btn.on-dark:hover{background:var(--gelb);border-color:var(--gelb);color:var(--ink)}
/* Tastatur-Fokus (additiv): die 1px-UA-Outline verschwand optisch an
   den Ink-Pills (Kontakt-Submit). currentColor trägt auf hell (Ink-
   Text) wie dunkel (Weiß-Text); nur .btn.solid (weißer Text auf Ink,
   heller Seitenfond) braucht den Gelb-Ring – Gelb vs. Ink ≥ 3:1. */
.btn:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:3px}
.btn.solid:focus-visible{outline-color:var(--gelb)}

/* ---------- Plattform- & Pastell-Pills (zentral) ----------
   Sticker-Sprache der alten Seite: Plattform-Pills in ECHTEN
   Plattform-Farben (Kunden-Liebling). Flat, 2px-Ink-Rand, harte
   Schatten – keine Glossy-Verläufe außer dem originalen IG-Gradient.
   Einsatz: Hero (index), svc-Chips (leistungen), Kontakt-Side,
   Footer „Folge uns“. Pastell-Varianten für neutrale Tags. */
.pill{
  display:inline-flex;align-items:center;gap:6px;
  border:2px solid var(--ink);border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:7px 14px;color:var(--ink);background:var(--white);
}
.pill.no-caps{text-transform:none;letter-spacing:.02em}
.pill-ig{background:linear-gradient(45deg,#F58529,#DD2A7B 55%,#8134AF);color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.38)}
.pill-tt{background:#010101;color:#fff;box-shadow:4px 4px 0 #69C9D0,-2px 6px 0 #EE1D52}
.pill-yt{background:#C00;color:#fff} /* YT-Dunkelrot: Weiß ≥ 4.5:1 (auf #F00 nur 4.0) */
.pill-li{background:#0A66C2;color:#fff}
.pill-peach{background:var(--peach)}
.pill-blau{background:var(--blau)}
.pill-lavendel{background:var(--lavendel)}
.pill-mint{background:var(--mint)}
.pill-sand{background:var(--sand)}

/* ---------- Medien-System (alle Seiten) ----------
   <figure class="media" data-media="KEY"><picture>…<img></picture></figure>
   .media-fill = füllt den positionierten Eltern-Container (Kacheln, IG-Posts) */
figure.media{position:relative;overflow:hidden;margin:0}
figure.media picture{display:block;width:100%;height:100%}
figure.media img{width:100%;height:100%;object-fit:cover;display:block}
figure.media.media-fill,.media-fill{position:absolute;inset:0}

/* ---------- Caption-Scrim (ZENTRAL, Rubrik 5) ----------
   EINE Scrim-Sprache für alle Overlay-Texte auf Fotos:
   Bottom-Gradient rgba(0,0,0,.55)→transparent über die unteren ~40 %.
   Gilt automatisch für jede .media-Caption (.cap) und die Team-
   Namenslabels (.member .meta). Der Zwischenstopp hält auch die
   höher sitzenden Namenszeilen ≥ 4.5:1 (weiß auf gelbem/hellem Foto).
   Keine per-Seite-Scrims mehr definieren! */
figure.media:has(> .cap)::after,
.member::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:linear-gradient(to top,rgba(0,0,0,.55),rgba(0,0,0,.42) 50%,transparent);
  pointer-events:none;z-index:1;
}
/* Team-Karten: zweizeilige Captions (Name + Rolle) sitzen höher als
   die einzeiligen .caps und liegen z. T. auf hellen Shirts/Pastell-
   Fonds (Timon, Nicole, Pet-Karten) – kräftigerer, weich auslaufender
   Scrim über ~65 % Höhe hält auch die Rollenzeile ≥ 4.5:1.
   Einheitlich für ALLE Team-Kacheln (Judge-Fix Kontrast). */
.member::after{
  height:65%;
  background:linear-gradient(to top,rgba(0,0,0,.72),rgba(0,0,0,.5) 38%,rgba(0,0,0,.22) 68%,transparent);
}
figure.media .cap{
  position:absolute;left:14px;bottom:10px;z-index:2;
  color:#fff;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
}

/* ---------- Karten-System (ZENTRAL): .card-hard ----------
   EINE Schattensprache für Karten auf hellem Grund:
   2px-Ink-Rahmen, 12px-Radius, harter schwarzer Offset 4px 4px 0.
   Interaktive Karten heben im Hover auf 6px 6px 0 GELB (etabliert).
   GELBER Offset ist ausschließlich Medienrahmen vorbehalten
   (Foto-Frames wie .page-hero.sub .media, .how-media, .member.pet).
   Bestehende Komponenten (.eng, .value, .post, .contact-side) laufen
   über dieselben Werte – neue Karten bekommen direkt .card-hard.
   (Index-Pain-Cards: Übernahme folgt koordiniert.) */
.card-hard,.eng,.value,.post,.contact-side{
  border:2px solid var(--ink);border-radius:12px;
  box-shadow:4px 4px 0 var(--ink);
}
a.card-hard:hover,.card-hard.is-link:hover{
  transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gelb);
}

/* ---------- Section-Header (index, ueber-uns; generisch) ---------- */
.shead{margin-bottom:44px}
.shead h2{font-size:clamp(40px,9vw,96px)}
.shead .lede{max-width:480px;color:var(--grey);margin-top:16px;font-size:16px}
.shead.center{text-align:center}
.shead.center .lede{margin-left:auto;margin-right:auto}

/* ---------- Sticker: nach pages-index.css migriert (nur index) ---------- */

/* ---------- Tape / Marquee (alle Seiten: CTA; index: eigenes Tape) ---------- */
.tape-wrap{position:relative;height:70px;overflow:visible;z-index:5;pointer-events:none}
.tape{
  position:absolute;left:-5%;right:-5%;
  background:var(--gelb);color:var(--ink);
  font-weight:800;font-size:14px;letter-spacing:.1em;text-transform:uppercase;
  padding:12px 0;overflow:hidden;white-space:nowrap;
  box-shadow:0 10px 24px rgba(13,13,11,.16);
  transform:rotate(-2deg);top:16px;
}
.tape .track{display:inline-flex;animation:slide 26s linear infinite}
.tape span{padding:0 16px}
.tape span::after{content:"✕";margin-left:32px;opacity:.55}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Stats mit dotted leaders (index; generisch nutzbar) ---------- */
.stats{display:grid;gap:0}
.stat{
  padding:26px 0;border-top:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:16px;align-items:baseline;
}
.stat:first-child{border-top:2px solid var(--ink)}
.stat b{font-weight:900;font-stretch:72%;font-size:clamp(56px,13vw,96px);line-height:.95;grid-row:span 2}
.stat b i{font-style:normal;color:var(--gelb)}
.stat .dotted{align-self:end;border-bottom:2px dotted #C9C5BC;height:1em}
/* Fix ggü. Quelle: nur die Beschriftung (direktes Kind) klein/grau –
   ".stat span" traf sonst auch den Zähler-<span> in <b> (13px-Bug). */
.stat>span{font-size:13px;color:var(--grey);grid-column:2}

/* ---------- Seiten-Hero (blog, kontakt, leistungen, ueber-uns) ---------- */
.page-hero{padding:calc(var(--nav-h) + 40px) 0 40px;position:relative}
.page-hero .kicker{display:flex;justify-content:center}
.page-hero h1{
  text-align:center;font-size:clamp(56px,15vw,190px);
  position:relative;z-index:3;margin-top:12px;
}
.page-hero .media{
  position:relative;z-index:1;margin:-0.55em auto 0;
  width:min(86%,760px);aspect-ratio:16/9.5;border-radius:18px;overflow:hidden;
  box-shadow:0 34px 70px -28px rgba(13,13,11,.45);
}
.page-hero .media .grain{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.15) .6px,transparent .7px);background-size:3px 3px}
/* .cap-Styling + Scrim: zentrale Regel oben (Caption-Scrim). */
.page-hero .lede{max-width:560px;margin:34px auto 0;text-align:center;color:var(--grey)}

/* ---------- iPhone-Mockup / IG-Posts: nach pages-index.css migriert (nur index) ---------- */

/* ---------- Leistungs-Index (index; verlinkt auf leistungen) ---------- */
.svc-index a{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
  border-top:2px solid var(--ink);padding:20px 4px;position:relative;overflow:hidden;
}
.svc-index a:last-child{border-bottom:2px solid var(--ink)}
.svc-index .num{font-size:12px;font-weight:700;color:var(--grey);width:28px}
.svc-index h3{font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:clamp(22px,5.6vw,48px);line-height:1;transition:transform .25s ease}
.svc-index .arr{font-size:22px;transition:transform .25s ease}
.svc-index a::before{content:"";position:absolute;inset:0;background:var(--gelb);transform:translateY(101%);transition:transform .28s cubic-bezier(.65,0,.35,1);z-index:-1}
.svc-index a:hover::before{transform:translateY(0)}
.svc-index a:hover h3{transform:translateX(10px)}
.svc-index a:hover .arr{transform:translate(4px,-4px)}

/* ---------- Mosaik-Cards (index; generisch) ---------- */
.mosaic{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.mo{border-radius:16px;padding:22px;min-height:170px;display:flex;flex-direction:column;justify-content:space-between;position:relative;overflow:hidden}
.mo .star{position:absolute;font-size:20px}
.mo.quote{background:var(--ink);color:#fff;grid-column:span 2}
.mo.quote p{font-size:17px;line-height:1.45;font-weight:600}
.mo.quote p .circle{position:relative;display:inline-block}
.mo.quote p .circle::after{content:"";position:absolute;inset:-4px -8px;border:2px solid var(--gelb);border-radius:50%;transform:rotate(-3deg)}
.mo.quote .serif-note{color:rgba(255,255,255,.65);font-size:13px}
.mo.stat-o{background:var(--rot);color:#fff}
.mo.stat-o b{font-weight:900;font-stretch:72%;font-size:64px;line-height:.9}
.mo.stat-w{background:var(--white);border:2px solid var(--ink)}
.mo.stat-w b{font-weight:900;font-stretch:72%;font-size:64px;line-height:.9}
.mo.stat-w b i{font-style:normal;color:var(--rot)}
.mo small{font-size:12px;line-height:1.4;opacity:.85}
.mo .lbl{font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;opacity:.7}

/* ---------- VS-Gegenüberstellung (index) ---------- */
.vs{display:grid;gap:0;border:2px solid var(--ink);border-radius:18px;overflow:hidden}
.vs-col{padding:28px 22px}
.vs-col.them{background:var(--white)}
.vs-col.us{background:var(--tanne);color:#fff}
.vs-col h3{font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:24px;display:flex;align-items:center;gap:10px;margin-bottom:16px}
.vs-col h3 .big{font-size:34px}
.vs-col li{list-style:none;display:flex;gap:12px;padding:11px 0;border-top:1px solid var(--line);font-size:14.5px}
.vs-col.us li{border-color:rgba(255,255,255,.16)}
.vs-col li b{display:block;font-size:15px}
.vs-col li small{color:var(--grey);font-size:13px}
.vs-col.us li small{color:rgba(255,255,255,.7)}
.mark{flex:0 0 22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:900;margin-top:2px}
.them .mark{background:var(--line)}
.us .mark{background:var(--gelb);color:var(--ink)}

/* ---------- Leistungs-Detail (leistungen) ---------- */
.svc-layout{display:grid;gap:0}
.svc-side{display:none}
.svc-block{border-top:2px solid var(--ink);padding:44px 0}
.svc-block .num-big{font-weight:900;font-stretch:72%;font-size:14px;color:var(--grey)}
.svc-block h2{font-size:clamp(32px,8vw,64px);margin:8px 0 16px}
.svc-block p{max-width:560px;color:var(--grey)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px} /* 16 statt 18: 8er-Raster */
.chip{border:2px solid var(--ink);border-radius:999px;font-size:12px;font-weight:700;padding:7px 14px;display:inline-flex;align-items:center;gap:6px}
.chip::before{content:"✲";color:var(--gelb)}
.svc-block:hover .num-big{color:var(--gelb)}

/* ---------- Team & Values (ueber-uns) ---------- */
.team-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
/* EIN Kachel-Stil für alle 14 Team-Karten (plm-System): 2px-Ink-Rand
   + harter Leitfarben-Offset (Mint auf ueber-uns) – vorher trugen nur
   Pet-/Marken-Karten Rand/Schatten (Judge-Fix Konsistenz). */
.member{
  position:relative;border-radius:16px;overflow:hidden;aspect-ratio:3/4;
  display:flex;align-items:flex-end;padding:14px;color:#fff;
  border:2px solid var(--ink);box-shadow:8px 8px 0 var(--accent);
}
.member .bg{position:absolute;inset:0}
.member .grain{position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.18) .6px,transparent .7px);background-size:3px 3px}
.member .init{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-stretch:72%;font-size:64px;color:rgba(255,255,255,.16);text-transform:uppercase}
.member .meta{position:relative;z-index:2}
/* Scrim hinter den .meta-Namen: läuft über die zentrale Caption-
   Scrim-Regel oben (EINE Scrim-Sprache für Caps + Team-Labels). */
.member b{display:block;font-size:15px;line-height:1.15}
.member small{font-size:11px;opacity:.92}
.member .paw{position:absolute;top:10px;right:10px;background:#fff;color:var(--ink);border-radius:999px;font-size:13px;padding:5px 8px;transform:rotate(8deg);box-shadow:0 3px 0 rgba(0,0,0,.5)}
.m-a .bg{background:linear-gradient(165deg,#3B4C28,#1E2913)}
.m-b .bg{background:linear-gradient(165deg,var(--gelb-hi),#D89A28)}
.m-c .bg{background:linear-gradient(165deg,#2B2B26,#000)}
.m-d .bg{background:linear-gradient(165deg,#F06A44,#B93B1C)}
.values{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Values: Farbfläche kommt aus den .bg-*-Utilities (plm-Stil:
   4 Karten = 4 Pastelltöne statt 4x Gelb – Kunden-Feedback). */
.value{border-radius:16px;padding:22px;min-height:160px;display:flex;flex-direction:column;justify-content:flex-end}
.value .ico{font-size:26px;margin-bottom:auto}
.value b{font-size:17px}
.value small{font-size:12.5px;color:rgba(13,13,11,.7);line-height:1.45}

/* ---------- Blog: Karo-Papier, Kategorien, Post-Cards (blog) ---------- */
/* Karo-Papier auf SAND getönt (Blog-Leitfarbe; Squarespace-Referenz:
   Sand/Creme als Sektionsfond) – Linien passend abgedunkelt. */
.paper{
  background:
    linear-gradient(var(--sand-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--sand-line) 1px,transparent 1px),
    var(--sand);
  background-size:28px 28px;
  border:2px solid var(--ink);border-radius:18px;padding:26px 18px;
}
.cats{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:32px} /* 32 statt 30: 8er-Raster */
/* Kategorie-Chips: Pastell-Fläche pro Kategorie via .bg-* (Build
   vergibt die Klassen); „Alle“ bleibt weiß, aktiv = Ink. */
.cat{border:2px solid var(--ink);background:var(--white);border-radius:999px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:8px 16px}
.cat.bg-peach{background:var(--peach)}
.cat.bg-blau{background:var(--blau)}
.cat.bg-mint{background:var(--mint)}
.cat.bg-lavendel{background:var(--lavendel)}
.cat.on{background:var(--ink);color:#fff}
.posts{display:grid;gap:16px}
.post{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px;box-shadow:4px 4px 0 var(--ink);transition:transform .2s ease,box-shadow .2s ease}
.post:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gelb)}
/* Kategorie-Tag der Karte: kleiner Pastell-Chip in der Kategorie-
   Farbe (Build vergibt .bg-*), Ink-Text statt Orange (Kunden-Regel:
   Pastell-System; Kategorie-Farben ziehen bis in die Detailseite). */
.post .pcat{
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
  border:2px solid var(--ink);border-radius:999px;padding:5px 11px;align-self:flex-start;
}
.post h3{font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:20px;line-height:1.05}
.post p{font-size:13.5px;color:var(--grey)}
.post .more{margin-top:auto;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.post .more .arr{display:inline-block;transition:transform .2s ease}
.post:hover .more .arr{transform:translateX(4px)}

/* ---------- Formular (kontakt) ---------- */
.form-grid{display:grid;gap:14px}
.field label{display:block;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;margin-bottom:6px;color:var(--grey)}
.field input,.field select,.field textarea{
  width:100%;border:2px solid var(--ink);border-radius:12px;background:#fff;
  padding:14px 16px;font:inherit;color:var(--ink);transition:box-shadow .2s ease;
  /* color:var(--ink) statt UA-Schwarz (#000): Feldtext läuft im selben
     Ink-Ton wie der Rest der Seite (Token-Konsistenz). */
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;box-shadow:4px 4px 0 var(--gelb)}
/* Side-Card: Lavendel statt Tanne-Fläche (Kunden-Regel: Tanne nicht
   als Fläche überstrapazieren; Kontakt-Leitfarbe = Lavendel).
   Ink-Text auf Pastell, Sekundärtöne über --ink-2. */
.contact-side{border:2px solid var(--ink);border-radius:18px;background:var(--lavendel);color:var(--ink);padding:26px;--grey:var(--ink-2)}
.contact-side h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-2);margin:18px 0 4px}
.contact-side h5:first-child{margin-top:0}
.contact-side a{font-weight:700}
.form-note{font-size:12px;color:var(--grey)}

/* ---------- CTA-Sektion (alle Seiten) ----------
   Satzbau: „Lass uns etwas [Rotationswort] BAUEN." – das Rotations-
   wort sitzt auf einem gelben Marker-Balken (Hero-Marker-Echo; die
   Wortbox animiert ihre Breite, daher Balken als Hintergrund mit
   padding-inline), „Bauen." als eigene Abschlusszeile (.cta-end).
   Auf Seiten ohne Abschlusszeile (ueber-uns, blog, post) schließt
   .cta-solo den Satz mit einem Punkt im Balken. */
/* padding-bottom 112px statt 88px: Tape-Clearance – das rotierte Band
   streifte @1440 die Button-Unterkante (Bounding-Gap 1px), +24px Luft. */
.cta{background:var(--ink);color:#fff;text-align:center;padding:96px 0 112px;position:relative;overflow:hidden}
.cta h2{font-size:clamp(37px,10.5vw,120px)}
.cta .rot{
  color:var(--ink);background:var(--gelb);
  display:block;width:fit-content;margin-inline:auto;
  padding:0 .14em;min-height:1em;
}
.cta .cta-end{display:block}
.cta h2.cta-solo .rot::after{content:"."}
.cta .btn{margin-top:34px}
/* Tape muss komplett innerhalb der Sektion liegen: .cta hat overflow:hidden,
   bei bottom:-16px schnitt die Rotation (1.6deg, Band 110% breit) den Text
   am rechten Bandende ab. Offset = Rotations-Dip (~1.54vw) + Puffer. */
.cta .tape{top:auto;bottom:calc(4px + 1.6vw);transform:rotate(1.6deg);background:var(--gelb)}
/* Mobile-Guard (additiv): das längste Rotationswort („Bemerkenswertem.")
   maß @390 399px > 390px Viewport – overflow:hidden der .cta kappte den
   Schlusspunkt. Nur die Balken-Zeile skaliert runter (.9em), die übrigen
   CTA-Zeilen behalten ihren Grad. */
@media(max-width:600px){.cta .rot{font-size:.9em}}

/* ---------- Desktop ---------- */
@media(min-width:820px){
  .stats{grid-template-columns:repeat(3,1fr);gap:0 44px}
  .stat{border-top:2px solid var(--ink)}
  .mosaic{grid-template-columns:repeat(4,1fr)}
  .mo.quote{grid-column:span 2;grid-row:span 2}
  .vs{grid-template-columns:1fr 1fr}
  .svc-layout{grid-template-columns:220px 1fr;gap:0 60px}
  .svc-side{display:block;position:sticky;top:calc(var(--nav-h) + 32px);align-self:start;padding-top:44px}
  .svc-side a{display:flex;gap:10px;font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:7px 0;color:var(--grey);transition:color .2s}
  .svc-side a b{color:var(--ink);font-weight:700;width:24px}
  .svc-side a:hover,.svc-side a.on{color:var(--ink)}
  .svc-side a.on b{color:var(--gelb)}
  .team-grid{grid-template-columns:repeat(4,1fr)}
  .values{grid-template-columns:repeat(4,1fr)}
  .posts{grid-template-columns:repeat(3,1fr)}
  .form-wrap{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:start}
  .form-grid{grid-template-columns:1fr 1fr}
  .field.full{grid-column:span 2}
}


/* ===== nav-footer.css ===== */
/* ============================================================
   WILDENTE · nav-footer.css – Navigation, Fullscreen-Menü, Footer
   (identisch auf allen Seiten, Markup in partials/nav.html + footer.html)
   ============================================================ */

/* ---------- Nav ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;
  background:rgba(255,255,255,.86);backdrop-filter:blur(14px);
  border-bottom:2px solid transparent;
  transition:border-color .3s ease;
}
.nav.scrolled{border-color:var(--ink)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;width:100%}
.logo{font-weight:900;font-stretch:72%;font-size:22px;letter-spacing:-.01em;text-transform:uppercase}
.logo em{font-style:normal;color:var(--gelb)}
.nav-links{display:none;gap:2px}
.nav-links a{
  position:relative;
  font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:8px 14px;border-radius:999px;
}
/* Underline-Slide statt Hover-Pill: 2px-Linie wächst von links ein
   und läuft nach rechts aus (transform-origin-Wechsel) – eine Kurve
   (var(--ez), motion.css). Aktive Seite bleibt Ink-Pill. */
.nav-links a::after{
  content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--ink);transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .35s cubic-bezier(0.22,1,0.36,1);
}
.nav-links a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.nav-links a.active{background:var(--ink);color:var(--white)}
.nav-links a.active::after{content:none}
.nav-cta{display:none}
.burger{
  background:var(--ink);color:var(--white);border:0;border-radius:999px;
  font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  padding:10px 18px;
}
/* Fullscreen-Menü: Y-Clip-Reveal auf der einen Kurve (statt des
   alten Snap-Ease), Items fliegen gestaffelt nach (Delays nur im
   open-Zustand – beim Schließen faden sie sofort, während der
   Vorhang zuklappt). Nur clip-path/opacity/transform.
   Reduced-Motion-Reset: motion.css. */
.menu{
  position:fixed;inset:0;z-index:90;background:var(--ink);color:var(--white);
  display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);
  clip-path:inset(0 0 100% 0);transition:clip-path .65s cubic-bezier(0.22,1,0.36,1);
  visibility:hidden;transition-property:clip-path,visibility;transition-duration:.65s,0s;transition-delay:0s,.65s;
}
.menu.open{clip-path:inset(0 0 0 0);visibility:visible;transition-delay:0s,0s}
/* Offenes Menü sperrt den Seiten-Scroll (Klasse setzt main.js;
   Lenis wird dort zusätzlich pausiert). */
html.menu-open,html.menu-open body{overflow:hidden}
.menu a{
  font-weight:900;font-stretch:72%;text-transform:uppercase;
  font-size:clamp(42px,12vw,72px);line-height:1.06;
  display:flex;align-items:baseline;justify-content:space-between;
  padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14);
  opacity:0;transform:translateY(26px);
  transition:opacity .35s cubic-bezier(0.22,1,0.36,1),transform .35s cubic-bezier(0.22,1,0.36,1);
}
.menu.open a{
  opacity:1;transform:none;
  transition-duration:.6s,.6s;
}
.menu.open a:nth-of-type(1){transition-delay:.12s}
.menu.open a:nth-of-type(2){transition-delay:.18s}
.menu.open a:nth-of-type(3){transition-delay:.24s}
.menu.open a:nth-of-type(4){transition-delay:.3s}
.menu.open a:nth-of-type(5){transition-delay:.36s}
.menu a small{font-size:13px;font-weight:600;font-stretch:100%;color:var(--gelb)}
.menu a.active{color:var(--gelb)}
.menu-close{position:absolute;top:14px;right:var(--pad);background:var(--white);color:var(--ink);border:0;border-radius:999px;padding:10px 18px;font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.menu-meta{
  margin-top:26px;display:flex;gap:18px;font-size:12px;color:rgba(255,255,255,.6);
  opacity:0;transform:translateY(18px);
  transition:opacity .35s cubic-bezier(0.22,1,0.36,1),transform .35s cubic-bezier(0.22,1,0.36,1);
}
.menu.open .menu-meta{opacity:1;transform:none;transition-duration:.6s,.6s;transition-delay:.42s}

/* ---------- Footer ---------- */
footer{background:var(--ink);color:#fff;padding:44px 0 32px}
.foot-grid{display:grid;gap:28px;font-size:14px}
.foot-grid h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gelb);margin-bottom:10px}
.foot-grid a{display:block;padding:3px 0;color:rgba(255,255,255,.85)}
.foot-grid a:hover{color:var(--gelb)}
.foot-desc{margin-top:12px;max-width:280px;color:rgba(255,255,255,.65);font-size:13.5px}
/* Social-Pills in echten Plattform-Farben (Sticker-Referenz der
   alten Seite). TikTok-Pill ist auf Ink-Grund randlos-schwarz –
   weißer Rand hält die Form; die Doppel-Schatten brauchen Luft. */
.foot-social{display:flex;flex-wrap:wrap;gap:10px;padding:4px 6px 6px 0}
/* .foot-grid a (display:block, 3px-Padding) würde die Pills brechen –
   hier explizit auf Pill-Geometrie zurücksetzen. */
.foot-social .pill,.foot-social .pill:hover{display:inline-flex;padding:7px 14px;color:#fff}
.foot-social .pill-ig,.foot-social .pill-tt,.foot-social .pill-li,.foot-social .pill-yt{border-color:rgba(255,255,255,.9)}
.foot-base{margin-top:36px;padding-top:20px;border-top:1px solid rgba(255,255,255,.15);display:flex;flex-wrap:wrap;gap:10px 24px;font-size:12px;color:rgba(255,255,255,.55);justify-content:space-between}

/* ---------- Desktop ---------- */
@media(min-width:820px){
  .nav-links{display:flex}
  .nav-cta{display:inline-flex;padding:11px 20px}
  .burger{display:none}
  .foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}
}


/* ===== motion.css ===== */
/* ============================================================
   WILDENTE · motion.css – Motion-System (nominal.so-Prinzip)
   Lenis (JS) + EIN IntersectionObserver, der nur .in-view setzt;
   alle Animationen laufen in CSS. Eine Kurve überall:
   cubic-bezier(0.22,1,0.36,1) – als --ez auch für alle neuen
   Momente (Intro, Sweeps, Hovers). Kein Effekt-Feuerwerk.
   ============================================================ */

:root{--ez:cubic-bezier(0.22,1,0.36,1)}

/* ---------- Lenis (empfohlene Basis-Styles; html.lenis setzt Lenis selbst) ---------- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Einfacher Reveal (.rv – Karten, Stats, Wrapper) ---------- */
.rv{
  opacity:0;transform:translateY(30px);
  transition:opacity .9s cubic-bezier(0.22,1,0.36,1),transform .9s cubic-bezier(0.22,1,0.36,1);
}
.rv.in-view{opacity:1;transform:none}

/* ---------- Text-Reveal: [data-reveal="lines"] ----------
   JS (initLineSplit) splittet Headlines in Zeilen:
   <span class="rl-line"><span class="rl-inner">…
   Die .display-Typo läuft mit line-height .9 – overflow:hidden würde
   Unterlängen (g, p, y, Komma) und Umlaut-Punkte kappen. Deshalb
   bekommt die Maske padding als Puffer, das per negativer margin
   wieder neutralisiert wird → Layout/Umbrüche bleiben identisch.
   translateY(140%) statt 110%, damit die Zeile trotz Puffer-Fenster
   vollständig unter der Maske verschwindet. */
.rl-line{
  display:block;overflow:hidden;
  padding:.12em .08em .16em;
  margin:-.12em -.08em -.16em;
}
.rl-inner{
  display:block;transform:translateY(140%);
  transition:transform .9s cubic-bezier(0.22,1,0.36,1);
  transition-delay:calc(var(--i,0) * 70ms);
}
.in-view .rl-inner{transform:none}

/* ---------- Medien-Reveal: [data-reveal="clip"] – KEINE Opacity ----------
   Scale-Settle im Bild (1.06 → 1) läuft parallel zum Clip: das Foto
   „setzt sich" beim Aufdecken. transform/clip-path-only, GPU-freundlich.
   (media-fill-Kacheln sind vom Clip-Reveal ausgenommen – JS-Selektor.) */
[data-reveal="clip"]{
  clip-path:inset(12% 8% 12% 8%);
  transition:clip-path .9s cubic-bezier(0.22,1,0.36,1);
}
[data-reveal="clip"].in-view{clip-path:inset(0 0 0 0)}
[data-reveal="clip"] img{transform:scale(1.06);transition:transform 1.05s var(--ez)}
[data-reveal="clip"].in-view img{transform:none}

/* ============================================================
   Page-Load-Intro – der EINE orchestrierte Auftritt.
   JS setzt html.intro synchron vor dem ersten Paint (kein FOUC:
   ohne JS existiert die Klasse nicht, alles sofort sichtbar) und
   nach fonts.ready + Doppel-rAF html.intro-go → alle Elemente
   fahren über ihre normalen Transitions in den Endzustand, die
   Reihenfolge kommt aus der transition-delay-Kaskade unten.
   !important schlägt die inline data-d-/Stagger-Delays aus JS.
   Nach ~2.2s räumt JS beide Klassen wieder ab (Delays zurück auf
   Scroll-Reveal-Standard). Kein Layout-Shift: nur opacity /
   transform / translate / scale / clip-path.
   Reduced-Motion: JS setzt html.intro nie → Block komplett inert.
   ============================================================ */

/* WICHTIG: Alle Startzustände tragen transition:none – sie sind
   SNAPSHOTS. Lädt das CSS nach dem JS (bzw. nach dem ersten Recalc),
   würde der Sprung in den Startzustand sonst selbst eine Transition
   (inkl. Delay) starten und die Kaskade schlucken. Die eigentliche
   Animation nutzt die transition der after-change-Styles (Spec). */

/* Nav: blendet als Erstes ein */
html.intro .nav{transition:opacity .6s var(--ez),transform .6s var(--ez),border-color .3s ease}
html.intro:not(.intro-go) .nav{opacity:0;transform:translateY(-10px);transition:none}

/* Kaskade Hero-Copy (index & Unterseiten):
   Eyebrow .10s → H1(-Zeilen) .20s+90ms/Zeile → Lede .44s → CTAs .54s
   Die .rv-Hero-Elemente werden bis intro-go explizit im Startzustand
   gehalten – sonst deckt der IO (.in-view) sie vor intro-go auf. */
html.intro .hero .label,
html.intro .page-hero .label,
html.intro .page-hero .kicker .cat{transition-delay:.1s!important}
html.intro .hero-h1{transition-delay:.2s!important}
html.intro .hero-h1 .rl-inner,
html.intro .page-hero h1 .rl-inner{transition-delay:calc(.2s + var(--i,0) * 90ms)!important}
html.intro:not(.intro-go) .hero-h1 .rl-inner,
html.intro:not(.intro-go) .page-hero h1 .rl-inner{transform:translateY(140%);transition:none}
html.intro .hero-lede,
html.intro .page-hero .lede{transition-delay:.44s!important}
html.intro .hero-cta{transition-delay:.54s!important}
html.intro .page-hero .post-meta{transition-delay:.34s!important}
html.intro:not(.intro-go) .hero .label,
html.intro:not(.intro-go) .page-hero .label,
html.intro:not(.intro-go) .page-hero .kicker .cat,
html.intro:not(.intro-go) .hero-h1,
html.intro:not(.intro-go) .hero-lede,
html.intro:not(.intro-go) .page-hero .lede,
html.intro:not(.intro-go) .hero-cta,
html.intro:not(.intro-go) .page-hero .post-meta{opacity:0;transform:translateY(30px);transition:none}

/* Hero-Kacheln (index): Micro-Stagger über die translate-Property –
   kollidiert nicht mit dem GSAP-Parallax (transform) der Kacheln. */
html.intro .hero-media .tile{transition:opacity .8s var(--ez),translate .8s var(--ez)}
html.intro .tile.t1{transition-delay:.34s}
html.intro .tile.t2{transition-delay:.42s}
html.intro .tile.t3{transition-delay:.5s}
html.intro:not(.intro-go) .hero-media .tile{opacity:0;translate:0 28px;transition:none}

/* Plattform-Pills: Scale-Pop nach den Kacheln (scale-Property –
   kollidiert weder mit heroFloat/translate noch GSAP/transform). */
html.intro .hero .sticker{transition:opacity .5s var(--ez) .66s,scale .6s var(--ez) .66s}
html.intro .hero .sticker:nth-of-type(2n){transition-delay:.73s}
html.intro .hero .sticker:nth-of-type(3n){transition-delay:.8s}
html.intro:not(.intro-go) .hero .sticker{opacity:0;scale:.6;transition:none}

/* Rollen-Marquee unter dem Hero: zuletzt einblenden */
html.intro .hero-roles{transition:opacity .9s var(--ez) .85s}
html.intro:not(.intro-go) .hero-roles{opacity:0;transition:none}

/* Unterseiten-Hero-Medien: Clip + Scale-Settle laufen nach der Lede
   (JS hat sie above-the-fold bereits auf .in-view gesetzt – das
   Intro hält den Startzustand bis intro-go und staffelt per Delay). */
html.intro .page-hero [data-reveal="clip"],
html.intro .page-hero [data-reveal="clip"] img{transition-delay:.5s!important}
/* Startzustand enger als der Scroll-Clip (12/8%): beim Intro soll
   das Medium erst NACH der Copy als eigener Moment aufwischen. */
html.intro:not(.intro-go) .page-hero [data-reveal="clip"]{clip-path:inset(44% 40% 44% 40%);transition:none}
html.intro:not(.intro-go) .page-hero [data-reveal="clip"] img{transform:scale(1.06);transition:none}
/* Team-Bühne (ueber-uns): drei Porträts nacheinander */
html.intro .hero-stage .stage-a,
html.intro .hero-stage .stage-a img{transition-delay:.5s!important}
html.intro .hero-stage .stage-b,
html.intro .hero-stage .stage-b img{transition-delay:.58s!important}
html.intro .hero-stage .stage-c,
html.intro .hero-stage .stage-c img{transition-delay:.66s!important}

/* ============================================================
   Micro-Interactions – eine Kurven-Familie (var(--ez)).
   motion.css lädt NACH components/nav-footer → Overrides wirken;
   pages-*.css lädt danach → dort definierte Hovers brauchen den
   body-Präfix (Spezifität), s. u.
   ============================================================ */

/* Buttons: sanfter Background-Sweep unter dem Text (::before mit
   z-index:-1 + isolation malt ÜBER dem Button-Hintergrund, aber
   UNTER Text/Pfeil; overflow clippt auf die Pill-Form). Der Sweep
   übernimmt den Hover-Fill – die alten Sofort-Farbwechsel werden
   hier neutralisiert (Reduced-Motion stellt sie unten wieder her). */
.btn{position:relative;isolation:isolate;overflow:hidden;--sweep:var(--line)}
.btn::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:var(--sweep);transform:translateX(-102%);
  transition:transform .5s var(--ez);
}
.btn:hover::before{transform:none}
.btn.solid{--sweep:var(--tanne)}
.btn.solid:hover{background:var(--ink)}
.btn.yellow{--sweep:var(--gelb-hi)}
.btn.yellow:hover{background:var(--gelb);border-color:var(--gelb)}
.btn.on-dark{--sweep:var(--gelb);transition:background .2s ease,color .3s ease .12s,transform .2s ease,border-color .35s var(--ez)}
.btn.on-dark:hover{background:transparent;border-color:var(--gelb);color:var(--ink)}

/* Leistungs-Index: Gelb-Sweep + Text-Shift auf die eine Kurve */
.svc-index a::before{transition:transform .5s var(--ez)}
.svc-index h3{transition:transform .45s var(--ez)}
.svc-index .arr{transition:transform .45s var(--ez)}

/* Karten-Hover vereinheitlicht (translate+Schatten existieren –
   hier nur EINE Kurve/Dauer; body-Präfix schlägt pages-*.css). */
body .card-hard,body .eng,body .post,body .pain,body .contact-side{
  transition:transform .35s var(--ez),box-shadow .35s var(--ez);
}
body .btn .arr,body .pain-cta .arr,body .post .more .arr{transition:transform .35s var(--ez)}

/* Marquees: offscreen pausieren (JS/IO toggelt .mq-paused auf dem
   Overflow-Container; Dauer setzt JS für konstante Pixelspeed). */
.mq-paused .track{animation-play-state:paused}

/* ---------- Fallback ohne Motion (JS setzt html.no-motion) ---------- */
html.no-motion .rv{opacity:1;transform:none;transition:none}
html.no-motion .rl-line{overflow:visible;padding:0;margin:0}
html.no-motion .rl-inner{transform:none;transition:none}
html.no-motion [data-reveal="clip"]{clip-path:none;transition:none}
html.no-motion [data-reveal="clip"] img{transform:none;transition:none}
html.no-motion .tape .track,html.no-motion .hero-roles .track,html.no-motion .clients-line .track{animation:none}
html.no-motion .btn::before{content:none}
html.no-motion .btn.solid:hover{background:var(--tanne)}
html.no-motion .btn.yellow:hover{background:var(--gelb-hi);border-color:var(--gelb-hi)}
html.no-motion .btn.on-dark:hover{background:var(--gelb)}
html.no-motion .menu a,html.no-motion .menu .menu-meta{opacity:1;transform:none}

/* ---------- Reduced Motion: komplett aus, Inhalte sofort sichtbar ----------
   JS initialisiert dann weder Lenis noch Split/Clip/Parallax noch
   Intro; dieser Block fängt zusätzlich alles ab, was schon im DOM
   ist – inklusive der @keyframes-slide-Marquees, des Button-Sweeps
   und der Menü-Stagger-Startzustände. Hover-Farbwechsel bleiben
   (instantan) erhalten. */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv{opacity:1;transform:none}
  .rl-line{overflow:visible;padding:0;margin:0}
  .rl-inner{transform:none}
  [data-reveal="clip"]{clip-path:none}
  [data-reveal="clip"] img{transform:none}
  .tape .track,.hero-roles .track,.clients-line .track{animation:none}
  .btn::before{content:none}
  .btn.solid:hover{background:var(--tanne)}
  .btn.yellow:hover{background:var(--gelb-hi);border-color:var(--gelb-hi)}
  .btn.on-dark:hover{background:var(--gelb)}
  .menu a,.menu .menu-meta{opacity:1;transform:none}
}


/* ===== pages-blog.css ===== */
/* ============================================================
   WILDENTE · pages-blog.css – nur Blog (data-page="blog")
   Nur Post-Thumbnails; alles Geteilte (.paper/.cats/.cat/.posts/
   .post, .page-hero, .cta) liegt in components.css.
   ============================================================ */

/* ---------- Hero-Variante Blog (.ph-b): Karo-Papier ----------
   Das Karo der Post-Fläche beginnt schon im Hero – der Titel (mit
   Marker) sitzt direkt auf dem Papier, das Medium rechts verankert,
   die Lede als linke Meta-Spalte mit 2px-Regel. */
/* Sand-Grund (Blog-Leitfarbe) + getöntes Karo; --grey lokal auf
   --ink-2 (Grau fiele auf Sand unter 4.5:1). Medien-Offset in Ink –
   Sand-auf-Sand wäre unsichtbar, Ink echot die Papier-Rahmen. */
.ph-b{
  --h1:clamp(54px,13.5vw,176px);
  --grey:var(--ink-2);
  background:
    linear-gradient(var(--white) 0,rgba(255,255,255,0) 160px),
    linear-gradient(var(--sand-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--sand-line) 1px,transparent 1px),
    var(--sand);
  background-size:auto,28px 28px,28px 28px,auto;
  border-bottom:2px solid var(--ink);
  padding-bottom:64px;
}
.page-hero.sub.ph-b .media{box-shadow:14px 14px 0 var(--ink)} /* schlägt die --accent-Regel (pages-sub) */
.ph-b .hero-row{display:grid;gap:0}
.ph-b .media{aspect-ratio:16/9;width:100%;margin-top:calc(var(--h1) * -0.30)}
/* 50px: Luft für den 14px-Ink-Offset unter dem Medium (mobil). */
.ph-b .lede{margin-top:50px}
@media(min-width:980px){
  .ph-b .hero-row{grid-template-columns:280px minmax(0,1fr);column-gap:48px}
  .ph-b .lede{grid-row:1;grid-column:1;align-self:end;border-top:2px solid var(--ink);padding-top:16px;margin:0 0 4px}
  .ph-b .media{grid-column:2;grid-row:1;width:100%}
}

/* Kategorien: linksbündig auf der Wrap-Kante (eine Fluchtlinie
   mit Titel und Karten). */
.cats{justify-content:flex-start}
/* Filter-Buttons: Hover in der Karten-Sprache (Lift + harter Offset;
   vorher gab es KEIN Hover-Feedback auf den klickbaren Pills).
   Aktiver Ink-Chip hebt auf Gelb – Ink-auf-Ink wäre unsichtbar. */
.cats .cat{transition:transform .35s var(--ez),box-shadow .35s var(--ez)}
.cats .cat:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--ink)}
.cats .cat.on:hover{box-shadow:3px 3px 0 var(--gelb)}

/* Thumbnail bündig in der Karte (.post: padding 18px, radius 12px,
   2px Rand → Innenradius 10px). Struktur pro Karte identisch –
   vorbereitet für spätere CMS-Templates (Decap). */
.post .post-thumb{
  margin:-18px -18px 0;
  border-radius:12px 12px 0 0;
  border-bottom:2px solid var(--ink);
  aspect-ratio:16/10;
  flex:none;
}
.post .post-thumb img{transition:transform .45s cubic-bezier(.22,1,.36,1)}
.post:hover .post-thumb img{transform:scale(1.045)}

/* Papier-Innenabstand ≥820: einheitlich 26px (+2px Rahmen = 28px =
   exakt EINE Karo-Zelle rundum). Vorher 18px seitlich vs. 26px oben –
   die Karten saßen asymmetrisch im Karo-Raster. (.post-paper der
   Detailseiten definiert sein Padding weiter unten selbst.) */
@media(min-width:820px){
  .paper{padding:26px}
}

/* ---------- Blog-Detailseite (dist/blog/<slug>.html, Partial post.html) ----------
   Gleiches System wie die Blogseite: page-hero-Kopf + Karo-Papier (.paper). */
.post-hero h1{font-size:clamp(30px,8.5vw,92px);max-width:1000px;margin-left:auto;margin-right:auto}
.post-hero .post-meta{
  text-align:center;margin-top:18px;position:relative;z-index:3;
  font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);
  /* .16em statt .14em: EIN Tracking für alle Caps-Metazeilen (.label,
     .cap, .pcat laufen alle auf .16em – Polish-Konsistenz). */
}
/* Medienrahmen-Sprache der Blogseite auch auf der Detailseite:
   2px Ink + 14px-Ink-Offset + 12px-Radius (vorher rahmenlos mit
   weichem Schatten, den der Clip-Reveal zudem wegclippte – das
   einzige ungerahmte Medium im Blog-System). */
.post-hero .media{
  margin-top:26px;aspect-ratio:16/9.5;
  border:2px solid var(--ink);border-radius:12px;
  box-shadow:14px 14px 0 var(--ink);
}
/* Endzustand des Clip-Reveals aufweiten, damit der harte Offset
   nicht weggeclippt wird (gleiche Regel wie pages-sub für .sub). */
.post-hero .media.in-view{clip-path:inset(-18px -18px -18px -18px)}
.post-paper{max-width:820px;margin:0 auto;padding:34px 22px}
.post-body{max-width:720px;margin:0 auto}
.post-body h2{font-weight:900;font-stretch:72%;text-transform:uppercase;letter-spacing:-0.01em;line-height:1;font-size:clamp(24px,5.5vw,36px);margin:36px 0 14px}
.post-body h3{font-weight:900;font-stretch:72%;text-transform:uppercase;line-height:1.05;font-size:clamp(19px,4.5vw,25px);margin:28px 0 10px}
.post-body h2:first-child,.post-body h3:first-child{margin-top:0}
.post-body p{margin:0 0 18px;font-size:16.5px;line-height:1.7}
.post-body ul,.post-body ol{margin:0 0 18px;padding-left:22px}
.post-body li{margin:6px 0;line-height:1.6}
.post-body a{font-weight:700;text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:3px}
.post-body a:hover{text-decoration-color:var(--ink)}
.post-body strong{font-weight:800}
.post-back{margin:34px auto 0;max-width:720px}
.post-back .arr-back{transition:transform .25s ease}
.post-back .btn:hover .arr-back{transform:translateX(-4px)}
@media(min-width:820px){
  .post-paper{padding:48px 44px}
}


/* ===== pages-index.css ===== */
/* ============================================================
   WILDENTE · pages-index.css – nur Startseite (data-page="home")
   Wortbild-Hero (August-Choreografie), flache Kanal-Chips,
   Content-Bühne (Tanne-Panel, Hero-Phone + Post-Karten).
   Reel-/Phone-/IG-Styles aus components.css hierher migriert
   (werden nur auf index genutzt).
   ============================================================ */

/* ---------- Statement-Hero V3 (BRVND „WE CREATE WHAT MOVES") ----------
   Volles Statement in massiven Condensed-Caps über die ganze Breite:
   „WIR GESTALTEN / [Marker-Swap]." – die Typografie IST das Bild.
   Darunter eine Sub-Zeile: links Subline → CTAs → flache Plattform-
   Chip-Reihe, rechts die Stats-Minizeile (90 % · 11 · 5+, 2px-Trenner)
   als kompakter Proof. Abschluss: vollbreites Foto-Band (Filmstreifen,
   harte Kanten, gestufte Höhen) mit dem gelben Tape diagonal darüber
   (das Tape ist vom Stats/Phones-Übergang hierher gewandert). */
.hero{padding:calc(var(--nav-h) + 36px) 0 0;position:relative}
.hero-top{display:flex}
.hero .label{border:2px solid var(--ink);border-radius:999px;padding:9px 16px;background:var(--white)}
/* Mobil-Größe so, dass das LÄNGSTE Swap-Wort (KAMPAGNEN + Punkt) nie
   umbricht – sonst springt der Hero um eine Zeilenhöhe (Interact-Test
   „Kein Layout-Shift"). 16.3vw ≈ Kampagnen-Balken ≤ Wrap-Breite. */
.hero-h1{margin:18px 0 0;font-size:clamp(48px,15.2vw,79px);line-height:.86;letter-spacing:-0.015em}
.hero-lede{max-width:430px;color:var(--grey);font-size:16px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap}

/* Sub-Zeile: EIN Ausrichtungssystem – alles Linke flucht auf der
   Wrap-Kante, der Proof-Block hält rechts dagegen. */
.hero-sub{display:flex;flex-direction:column;gap:28px;margin-top:32px}
.hero-sub-l{display:flex;flex-direction:column;align-items:flex-start;gap:22px}

/* Plattform-Chips: flache Reihe (Vollfarb-Punkt + 2px-Rahmen),
   ersetzt die verstreuten Float-Sticker der Altfassung. */
.hero-chips{display:flex;flex-wrap:wrap;gap:7px}
.hero-chips .chip{
  display:inline-flex;align-items:center;gap:8px;
  border:2px solid var(--ink);border-radius:999px;background:var(--white);
  padding:7px 11px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.hero-chips .chip::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--dot,var(--gelb));flex:0 0 auto}
.chip.ch-web{--dot:var(--gelb)}
.chip.ch-ig{--dot:#DD2A7B}
.chip.ch-tt{--dot:var(--ink)}
.chip.ch-yt{--dot:#C00}
.chip.ch-li{--dot:#0A66C2}
.chip.ch-rc{--dot:var(--tanne)}

/* Stats-Minizeile: kleiner Zahlen-Proof mit 2px-Ink-Trennern –
   die große Stats-Sektion darunter bleibt der eigentliche Auftritt. */
.hero-proof{display:flex;align-items:stretch}
.hero-proof .hp{padding:2px clamp(18px,2.4vw,30px);border-left:2px solid var(--ink)}
.hero-proof .hp:first-child{border-left:0;padding-left:0}
.hero-proof b{display:block;font-weight:900;font-stretch:72%;font-size:clamp(30px,3vw,42px);line-height:.95;letter-spacing:-0.02em}
.hero-proof b i{font-style:normal;color:var(--gelb)}
.hero-proof small{display:block;margin-top:7px;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--grey)}

/* Foto-Band: Filmstreifen – 3 Frames, harte Kanten (kein Radius,
   kein Offset-Schatten), 2px-Ink-Linien, Unterkante bündig, Ober-
   kanten gestuft. Die .tile-Figuren laufen mit 70px Über-Bleed im
   geclippten Frame → der bestehende GSAP-Parallax (t1/t2/t3) pannt
   die Fotos im Rahmen, ohne die harten Kanten zu brechen. */
.hero-band{position:relative;display:flex;align-items:flex-end;margin-top:clamp(44px,6vw,64px)}
.band-frame{
  position:relative;overflow:hidden;flex:0 0 auto;
  border:2px solid var(--ink);border-left-width:0;
}
.band-frame:first-child{border-left:0}
.band-frame:last-child{border-right:0}
.band-frame figure.media.media-fill{top:-70px;bottom:-70px;will-change:transform}
/* bf1: Gesicht sitzt im oberen Bilddrittel – Crop-Fenster anheben,
   damit der Kopf bei höhenbeschnittenen Breiten (≥600) nie anschneidet */
.bf1 img{object-position:50% 28%}
.band-frame .grain{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.16) .6px,transparent .7px);background-size:3px 3px;pointer-events:none}

/* Tape diagonal über dem Band (Creative-Haus-Moment). bottom:40 %:
   läuft rechts ÜBER dem Kopf der sitzenden Person (bf3) vorbei,
   links über Laptop/Requisite – nie über Gesichter (Rubrik 5). */
.hero-tape{position:absolute;inset:0;height:auto;z-index:3}
.hero-tape .tape{top:auto;bottom:40%;transform:rotate(-3.4deg)}

@media(max-width:819px){
  .hero .label{white-space:nowrap;font-size:clamp(8px,2.6vw,11px);letter-spacing:.13em}
  .br-m{display:inline}
  /* Chips kompakter → 2 ausgeglichene 3er-Reihen statt 3+2+1 */
  .hero-chips .chip{padding:6px 10px;font-size:10px}
  .hero-proof{align-self:stretch}
  .hero-proof .hp{flex:1 1 0}
  .hero-band{height:225px}
  .bf1{width:55%;height:100%}
  .bf2{width:45%;height:87%}
  .bf3{display:none}
  .hero-tape .tape{bottom:30%;transform:rotate(-4deg)}
}
/* Tablet (600–819): 3-Zeilen-Stack größer ziehen, sonst bleibt rechts
   vom Wortbild ein totes Feld (>300px, Rubrik 3) */
@media(min-width:600px) and (max-width:819px){
  /* 16.5vw statt 19.2vw: „Kampagnen" passt auch bei 600px einzeilig */
  .hero-h1{font-size:min(15.6vw,108px)}
  .hero-band{height:300px}
}

@media(min-width:820px){
  .br-m{display:none}
  /* „WIR GESTALTEN" läuft exakt auf die rechte Wrap-Kante:
     Faktor 0.156 × Contentbreite (100vw − 2·48px, Cap 1144px). */
  .hero-h1{font-size:min(calc(15.6vw - 15px),178px);margin-top:22px}
  .hero-sub{flex-direction:row;justify-content:space-between;align-items:flex-start;gap:48px;margin-top:40px}
  .hero-sub-l{flex:0 1 746px}
  .hero-proof{align-self:center}
  .hero-band{height:min(24vw,340px)}
  .bf1{width:38%;height:100%}
  .bf2{width:34%;height:86%}
  .bf3{width:28%;height:93%}
}

/* Marker-Swap: Zeilen-Maske im gelben Marker-Balken (Signature-Move).
   Das alte Wort rollt per translateY raus, das neue rein; die
   Balkenbreite fährt per width-Transition (px via JS) weich mit.
   Eine Kurve überall: cubic-bezier(0.22,1,0.36,1).
   Reduced-Motion/No-JS: statisches „Marken" (Markup-Inhalt). */
.hero-h1 .swap{display:inline-block;background:var(--gelb);padding:.05em .12em .09em}
/* Punkt sitzt auf der Wort-Baseline (Inline-Block-Baseline = untere
   Kante der Maske → um das Bar-Padding wieder anheben) */
.h1-dot{display:inline-block;position:relative;bottom:.09em;margin-left:-.03em}
.sw-mask{display:block;position:relative;overflow:hidden;white-space:nowrap;transition:width .7s cubic-bezier(0.22,1,0.36,1)}
.sw-word{display:block;transition:transform .7s cubic-bezier(0.22,1,0.36,1)}
.sw-next{position:absolute;left:0;top:0;transform:translateY(115%)}
.swapping .sw-word{transform:translateY(-115%)}
.swapping .sw-next{transform:translateY(0)}
.sw-reset,.sw-reset .sw-word{transition:none!important}
.sw-meas{position:absolute;left:0;top:0;visibility:hidden;pointer-events:none}

/* ---------- Content-Bühne („Inhalte, die ankommen") ----------
   Sand-Panel als Backdrop (Tanne nicht als Fläche überstrapazieren);
   mobil: Snap-Reel mit Anschnitt rechts, Desktop (≥1100): 1 Hero-Phone
   + 3 rahmenlose Post-Karten im Fächer. Ein Lichtsystem: Schatten
   fallen senkrecht (feiner Kontakt + großer weicher), auf Pastell
   entsprechend heller abgestimmt. */
.phones-sec{padding-bottom:0}
.stage{position:relative;background:var(--sand)}
.reel{
  position:relative;display:flex;gap:16px;overflow-x:auto;
  padding:44px calc(50vw - 140px) 10px;
  scroll-snap-type:x mandatory;
  -ms-overflow-style:none;scrollbar-width:none;
}
.reel::-webkit-scrollbar{display:none}
.reel-hint{text-align:center;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--grey);padding:16px 0 30px;margin:0}

/* Kategorie-Pills: leben auf der Bühne (Panel-Ebene), NICHT in der App-UI */
.stage-tags{position:relative;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;gap:10px;padding:26px 20px 0}
.stage-tags span{
  background:var(--white);color:var(--ink);border:2px solid var(--ink);border-radius:999px;
  font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;padding:8px 15px;
}

/* Post-Karte: rahmenloser 4:5-Post (echte IG-Anatomie, weiße Karte) */
.post-card{
  flex:0 0 250px;scroll-snap-align:center;align-self:center;
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 1px 2px rgba(35,28,16,.18),0 20px 40px -16px rgba(35,28,16,.35);
}

/* iPhone-Chrome (aus components.css migriert) */
.phone{
  flex:0 0 280px;scroll-snap-align:center;position:relative;border-radius:54px;
  background:linear-gradient(150deg,#4d4d50,#232326 38%,#0c0c0e 82%,#3a3a3d);
  padding:4px;
  box-shadow:0 2px 3px rgba(35,28,16,.22),0 32px 56px -18px rgba(35,28,16,.42);
}
.phone::before{
  content:"";position:absolute;inset:0;border-radius:54px;padding:1.5px;
  background:linear-gradient(155deg,rgba(255,255,255,.75),rgba(255,255,255,.06) 32%,rgba(255,255,255,.02) 60%,rgba(255,255,255,.45) 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.sidebtn{position:absolute;background:linear-gradient(90deg,#3c3c3f,#141416);border-radius:3px;pointer-events:none}
.sb-power{right:-2.5px;top:132px;width:3px;height:64px}
.sb-vol1{left:-2.5px;top:104px;width:3px;height:26px}
.sb-vol2{left:-2.5px;top:140px;width:3px;height:46px}
.sb-mute{left:-2.5px;top:74px;width:3px;height:18px}
.phone-inner{background:#000;border-radius:50px;padding:8px;position:relative;overflow:hidden}
/* Screen-Radius = Innenradius (50) minus Bezel (8) = 42 */
.phone-screen{background:#fff;border-radius:42px;overflow:hidden;position:relative}
.phone-inner::after{
  content:"";position:absolute;inset:0;border-radius:50px;pointer-events:none;z-index:6;
  background:linear-gradient(115deg,rgba(255,255,255,.16),rgba(255,255,255,.045) 24%,transparent 42%);
}
/* Home-Indicator unten im Screen */
.phone-screen::after{
  content:"";position:absolute;left:50%;bottom:7px;transform:translateX(-50%);
  width:37%;height:4.5px;border-radius:999px;background:#0b0b0b;z-index:4;
}
/* Statusbar-Zeile: Uhrzeit links, Glyphen rechts, Dynamic Island schwebt
   MITTIG in derselben Zeile – mit Luft zur oberen Screen-Kante. */
.statusbar{
  position:relative;height:44px;display:flex;justify-content:space-between;align-items:center;
  padding:0 20px;font-size:12px;font-weight:600;letter-spacing:.01em;
}
.statusbar .glyphs{display:flex;align-items:center;gap:4px}
.island{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:33%;height:24px;background:#000;border-radius:999px;
}
.island::after{content:"";position:absolute;right:8px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#232b42,#04050a 65%)}

/* IG-App-Chrome: Detail-Header (Zurück-Chevron, „Beiträge") + Tab-Bar */
.ig-appbar{display:flex;align-items:center;padding:2px 14px 8px;gap:8px}
.ig-appbar .ab-mid{flex:1;text-align:center;line-height:1.25}
.ig-appbar .ab-mid small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#737373}
.ig-appbar .ab-mid b{display:block;font-size:13.5px;font-weight:700;color:#262626}
.ig-appbar .ab-spacer{width:20px;flex:0 0 20px}
.ig-tabbar{display:flex;align-items:center;justify-content:space-between;padding:10px 26px 22px;border-top:1px solid #efefef;margin-top:8px}
.ig-tabbar svg{display:block}
.ig-tabbar .tb-avatar{width:24px;height:24px;border-radius:50%;overflow:hidden;background:#fff;box-shadow:0 0 0 1.5px #262626}
.ig-tabbar .tb-avatar img{width:100%;height:100%;object-fit:cover;transform:scale(.84)}

/* IG-Post-UI (Phone-Screen UND Post-Karten) – System-Font wie in der
   echten App, KEIN Archivo, kein Fake-Verified, keine Overlays im Bild */
.phone-screen,.post-card{
  font-family:-apple-system,'SF Pro Text','Segoe UI',system-ui,'Helvetica Neue',sans-serif;
  color:#262626;
}
.ig-top{display:flex;align-items:center;gap:10px;padding:9px 12px 9px 14px}
.ig-top .avatar{
  width:32px;height:32px;border-radius:50%;flex:0 0 32px;overflow:hidden;
  background:#fff;box-shadow:inset 0 0 0 1px rgba(0,0,0,.09);
}
.ig-top .avatar img{width:100%;height:100%;object-fit:cover;transform:scale(.82)}
.ig-top .names{line-height:1.3}
.ig-top b{display:block;font-size:13px;font-weight:700}
.ig-top small{display:block;font-size:11px;color:#737373;font-weight:400}
.ig-top .more{margin-left:auto;display:flex}
.ig-media{aspect-ratio:4/5;position:relative;overflow:hidden;background:var(--ink)}
.ig-actions{position:relative;display:flex;align-items:center;gap:15px;padding:10px 14px 6px}
.ig-actions svg{display:block}
.ig-actions .save{margin-left:auto}
/* Karussell-Punkte: unter dem Bild, mittig in der Action-Zeile (wie IG) */
.ig-actions .dots{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;gap:4px}
.ig-actions .dots i{width:6px;height:6px;border-radius:50%;background:#c7c7c7}
.ig-actions .dots i:first-child{background:#3897f0}
.ig-likes{padding:2px 14px 0;font-size:13px;font-weight:700}
.ig-cap{padding:4px 14px 2px;font-size:13px;line-height:1.4}
.ig-cap b{font-weight:700}
.ig-time{padding:2px 14px 14px;font-size:11px;color:#8e8e8e}

/* Bühne Desktop: Panel als Backdrop, klare Größen-Hierarchie:
   1 großes Hero-Phone (Mitte, z3), pc-b tuckt dahinter (z2), die
   Außenkarten pc-a/pc-c liegen absolut an den Panel-Rändern und
   werden dort angeschnitten (z1 = hinterste Ebene). Nichts lugt
   halb hinter dem Phone hervor. */
@media(min-width:1100px){
  .stage{background:transparent;padding:0 0 96px;overflow-x:clip}
  .stage::before{content:"";position:absolute;left:0;right:0;top:150px;bottom:0;background:var(--sand)}
  .reel{overflow:visible;scroll-snap-type:none;padding:0;justify-content:center;align-items:flex-start;gap:0}
  .reel-hint{display:none}
  .stage-tags{padding:60px 20px 0;gap:12px}
  .phone{order:2;flex-basis:360px;z-index:3}
  /* Skalierung @360px-Phone: Island/Statusbar/Homebar proportional größer */
  .phone .statusbar{height:50px;padding:0 26px;font-size:13.5px}
  .phone .island{height:28px}
  .phone .island::after{width:9px;height:9px;right:9px}
  .phone .phone-screen::after{height:5px;bottom:8px}
  .post-card{width:250px}
  .stage .pc-a{position:absolute;left:-40px;top:180px;width:272px;--r:-5deg;z-index:1}
  .stage .pc-b{order:3;margin:150px 0 0 22px;--r:3deg;z-index:2}
  .stage .pc-c{position:absolute;right:-38px;top:200px;width:258px;--r:3deg;z-index:1}
  /* Rotation muss den .rv-Reveal (transform:none) überleben */
  .stage .post-card.rv{transform:translateY(30px) rotate(var(--r,0deg))}
  .stage .post-card,.stage .post-card.rv.in-view{transform:rotate(var(--r,0deg))}
  .stage .post-card:hover,.stage .post-card.rv.in-view:hover{transform:rotate(var(--r,0deg)) translateY(-8px)}
  .stage .phone:hover,.stage .phone.rv.in-view:hover{transform:translateY(-8px)}
}

/* ---------- Pain-Points „Wo stehst du gerade?" ----------
   Situations-Karten im Zitat-Stil (Kundenstimmen-Look): 2px-Rahmen,
   gelbes Anführungszeichen, dezenter Kontakt-CTA je Karte. */
.pains{display:grid;gap:14px}
.pain{
  border:2px solid var(--ink);border-radius:12px;background:var(--white);
  box-shadow:4px 4px 0 var(--ink);
  padding:22px;display:flex;flex-direction:column;gap:12px;
  transition:transform .2s ease,box-shadow .2s ease;
}
.pain:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gelb)}
.pain .q{
  font-weight:900;font-stretch:72%;font-size:52px;line-height:.55;
  color:var(--gelb);user-select:none;
}
.pain p{font-size:17px;font-weight:600;line-height:1.4}
.pain-cta{
  margin-top:auto;padding-top:10px;
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grey);transition:color .2s ease;
}
.pain-cta .arr{transition:transform .25s ease}
.pain-cta:hover{color:var(--ink)}
.pain-cta:hover .arr{transform:translate(3px,-3px)}
/* Eine Karte in Hellblau (Leitfarbe leistungen): verzahnt den Index
   mit den Unterseiten-Farben; Spezifität schlägt das .pain-weiß. */
.pain.bg-blau{background:var(--blau)}
/* Mobil verdichtet (Judge-Fix): kompaktere Zeilenhöhe, kleineres
   Quote-Glyph – 5 Karten kosten deutlich unter 1.5 Viewports. */
@media(max-width:819px){
  .pain{padding:16px 18px;gap:7px}
  .pain .q{font-size:34px;line-height:.55}
  .pain p{font-size:15.5px;line-height:1.3}
  .pain-cta{padding-top:6px}
}
@media(min-width:820px){
  .pains{grid-template-columns:repeat(6,1fr)}
  .pain{grid-column:span 2;padding:26px}
  .pain:nth-child(4),.pain:nth-child(5){grid-column:span 3}
}
/* Ghost-„?" (Stats-Ghost-Sprache): besetzt die rechte Fläche neben
   „WO STEHST DU GERADE?" @≥1100 – Outline-Ink, gelber Punkt-Akzent
   fällt weg (ein Glyph), reine Deko (aria-hidden). */
.pains-ghost{display:none}
@media(min-width:1100px){
  .pains-sec .wrap{position:relative}
  .pains-sec .shead,.pains-sec .pains{position:relative;z-index:1}
  .pains-ghost{
    display:block;position:absolute;right:60px;top:-10px;z-index:0;
    pointer-events:none;user-select:none;
    font-weight:900;font-stretch:72%;line-height:.8;letter-spacing:-.02em;
    font-size:min(28vw,430px);
    color:transparent;-webkit-text-stroke:2.5px var(--ink);
  }
}

/* Mosaik: Zitat-Karte füllt ihre 2×2-Fläche typografisch (kein Loch) */
@media(min-width:820px){
  .mo.quote{padding:28px}
  .mo.quote p{font-size:23px;line-height:1.35;max-width:21ch}
}
/* Ellipsen-Annotation: Luft zum Folgewort („verliert.") – die Ellipse
   ragt ±6px über die Wortbox, die Margins halten sie frei. */
.mo.quote p .circle{margin-inline:.14em .3em}
.mo.quote p .circle::after{inset:-4px -6px}
/* Mosaik in Gelb/Ink-Systemsprache statt Rot/Orange (Judge-Fix) */
.mo.stat-o{background:var(--gelb);color:var(--ink)}
.mo.stat-o small{opacity:.75}
.mo.stat-w b i{color:var(--gelb)}

/* ---------- Stats: Ghost-„90%" füllt die rechte Fläche (≥1100) ----------
   EIN Knall-Element: Outline-Ziffern (Ink-Stroke, transparente Füllung,
   gelbes %) hinter/neben den Zahlen verankert – reine Deko (aria-hidden). */
.stats-ghost{display:none}
@media(min-width:1100px){
  .stats-sec .wrap{position:relative}
  .stats-sec .shead,.stats-sec .stats{position:relative;z-index:1}
  .stats-ghost{
    display:block;position:absolute;right:0;top:-30px;z-index:0;
    pointer-events:none;user-select:none;
    font-weight:900;font-stretch:72%;line-height:.8;letter-spacing:-.02em;
    font-size:min(24vw,350px);
    color:transparent;-webkit-text-stroke:2.5px var(--ink);
  }
  .stats-ghost i{font-style:normal;-webkit-text-stroke-color:var(--gelb)}
}

/* ---------- VS-Karte: Icon-Chips statt Emoji (flat, Systemsprache) ---------- */
.vs-ico{
  flex:0 0 34px;width:34px;height:34px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--line);
}
.vs-ico svg{display:block}
.vs-ico.duck{background:var(--gelb)}

/* ---------- CTA (nur home): Abschlusszeile „Bauen." + Marker-Balken ----------
   Der gelbe Marker liegt als Hintergrund der Wortbox (wächst also mit
   jeder Rotationsbreite mit), das Wort kippt dafür auf Ink. */
[data-page="home"] .cta .rot{
  color:var(--ink);background:var(--gelb);
  width:fit-content;min-width:1.2em;margin-inline:auto;
  padding-inline:.14em;
}
[data-page="home"] .cta .cta-end{display:block}

/* ---------- Kunden-Referenzzeile (typografische Wortmarken) ----------
   Gleiche Track-Mechanik wie .hero-roles ([data-marquee] + slide). */
.clients-line{
  border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);
  overflow:hidden;white-space:nowrap;padding:18px 0;
}
.clients-line .track{display:inline-flex;animation:slide 36s linear infinite}
.clients-line span{
  font-weight:900;font-stretch:72%;text-transform:uppercase;
  font-size:clamp(26px,5.6vw,48px);line-height:1;
  padding:0 26px;display:inline-flex;align-items:center;gap:26px;
}
.clients-line span::after{content:"✳";color:var(--gelb);font-size:.5em}
/* Kundenzitat unter dem Namens-Marquee: das Eyebrow „sprechen für
   sich" bekommt eine echte Stimme. Peach-Karte im harten Karten-
   System (2px Ink, 4px-Offset), Quote-Glyph wie die Pain-Karten.
   INHALT = Platzhalter zur Kundenfreigabe (siehe Kommentar im HTML). */
.client-quote{
  margin:clamp(40px,7vw,56px) auto 0;max-width:620px;
  background:var(--peach);
  border:2px solid var(--ink);border-radius:12px;box-shadow:4px 4px 0 var(--ink);
  padding:24px 26px 22px;
}
.client-quote .q{
  display:block;font-weight:900;font-stretch:72%;font-size:52px;line-height:.55;
  color:var(--ink);user-select:none;margin-bottom:12px;
}
.client-quote blockquote{margin:0}
.client-quote blockquote p{font-size:clamp(18px,4.4vw,23px);font-weight:600;line-height:1.35;letter-spacing:-0.01em;text-wrap:balance}
.client-quote figcaption{
  margin-top:14px;display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);
}
.client-quote figcaption::before{content:"";width:8px;height:8px;background:var(--ink);flex:0 0 auto}


/* ===== pages-kontakt.css ===== */
/* ============================================================
   WILDENTE · pages-kontakt.css – nur Kontaktseite (data-page="kontakt")
   Formular/Seiten-Hero/CTA liegen komplett in components.css.
   ============================================================ */

/* ---------- Hero-Variante Kontakt (.ph-k) ----------
   Titel links, Porträt-Medium links darunter verankert (überlappt
   die Schlusszeile), Lede als rechte Meta-Spalte mit 2px-Regel –
   der Blick landet auf der Formular-Kante darunter. */
.ph-k{--h1:clamp(56px,14.5vw,150px)}
.ph-k .hero-row{display:grid;gap:0}
.ph-k .media{aspect-ratio:4/5;width:min(100%,440px);margin-top:calc(var(--h1) * -0.28)}
/* 50px: Luft für den 14px-Lavendel-Offset unter dem Medium (mobil). */
.ph-k .lede{margin-top:50px}
@media(min-width:980px){
  .ph-k .hero-row{grid-template-columns:minmax(0,1fr) 440px;column-gap:64px}
  /* Porträt rechts komplett neben die Headline hochgezogen (Oberkante
     auf Höhe der LASS-UNS-Zeile) – füllt die tote rechte Fläche; die
     kürzere Medienzeile zieht zugleich die Lede nach oben ans
     Medium-Ende → kein totes Mittelfeld zwischen Marker und Intro. */
  .ph-k .media{grid-column:2;grid-row:1;width:100%;aspect-ratio:1/1;margin-top:calc(var(--h1) * -1.55)}
  .ph-k .lede{grid-column:1;grid-row:1;align-self:end;max-width:440px;margin:0 0 4px;border-top:2px solid var(--ink);padding-top:16px}
}

/* ---------- Karopapier hinter dem Formular (Systemelement) ----------
   Echo des Blog-Karos, bewusst dezenter: das Raster liegt hinter der
   Formularfläche, oben weich aus dem Hero kommend ausgeblendet. */
.form-sec{
  background:
    linear-gradient(var(--white) 0,rgba(255,255,255,0) 200px),
    linear-gradient(rgba(255,255,255,.5),rgba(255,255,255,.5)),
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:auto,auto,28px 28px,28px 28px;
}

/* ---------- Formular im 2px-Linien-System ----------
   Select ohne Browser-Chrom (eigener Chevron), Labels kippen im
   Fokus auf Ink, Side-Card als flat Tanne-Karte mit hartem
   Gelb-Schatten und Marker-Eyebrows. */
.field select{
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230D0D0B' stroke-width='2.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 16px center;
  padding-right:42px;
}
/* Placeholder: #A9A59C lag bei ~2.4:1 auf Weiß – #8F8B82 hält ≥ 3:1
   und bleibt klar als Platzhalter (deutlich unter Label-/Ink-Ton). */
.field input::placeholder,.field textarea::placeholder{color:#8F8B82}
/* Leeres Select liest sich wie ein Placeholder („Bitte wählen"),
   kippt mit echter Auswahl automatisch auf Ink. */
.field select:has(option[value=""]:checked){color:#8F8B82}
.field:focus-within label{color:var(--ink)}
/* Chrome-Autofill: das blassblaue UA-Fill bricht die Papier-Fläche –
   Feld bleibt weiß, Text bleibt Ink. */
.field input:-webkit-autofill,
.field select:-webkit-autofill,
.field textarea:-webkit-autofill{
  -webkit-box-shadow:inset 0 0 0 1000px #fff;
  -webkit-text-fill-color:var(--ink);
  caret-color:var(--ink);
}
/* Info-Karte: Lavendel-Fläche (components.css, Kontakt-Leitfarbe)
   mit Ink-Text; Marker-Quadrate in Ink (Pastell-Flächen-Sprache). */
.contact-side h5{display:flex;align-items:center;gap:8px;color:var(--ink-2)}
.contact-side h5::before{content:"";width:7px;height:7px;background:var(--ink);flex:0 0 auto}
.contact-side a{text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;text-decoration-thickness:2px;transition:text-decoration-color .2s ease}
.contact-side a:hover{text-decoration-color:var(--ink)}
.contact-side .pill{margin-top:2px}
/* IG-Pill: keine Link-Underline im Chip – der text-shadow der Pill
   malte die (transparente) Underline als dauerhaften Schatten-Strich,
   im Hover kam die Ink-Linie dazu (Doppel-Baseline im Chip). */
.contact-side a.pill,.contact-side a.pill:hover{text-decoration:none}
/* <820px stapelt .form-wrap ohne Grid-gap: die Lavendel-Karte klebte
   ~10px unter der form-note – Luft auf Karten-Rhythmus (28px). */
@media(max-width:819px){.contact-side{margin-top:28px}}

/* Honeypot-Feld (name="website"): visuell versteckt, bleibt für Bots
   im DOM/Formular-Payload. Kandidat für eine globale .visually-hidden-
   Utility in base.css, sobald weitere Seiten sie brauchen. */
.field.hp{
  position:absolute;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);
  white-space:nowrap;
}

/* Inline-Statusmeldung des Kontaktformulars (aria-live).
   Klein und unaufdringlich; leer = unsichtbar (kein Layout-Sprung
   dank :empty). Erfolg in Tanne, Fehler in Marken-Rot. */
.form-status{
  margin-top:12px;
  font-size:13px;line-height:1.5;
  letter-spacing:.01em;
}
.form-status:empty{display:none}
.form-status.ok{color:var(--tanne)}
/* Fehlerton: Marken-Rot #E2532F hält auf Weiß nur ~3.3:1 – für die
   13px-Statuszeile abgedunkelt (gleiche Hue-Familie, ≥ 4.5:1). */
.form-status.err{color:#BE3A17}

/* Datenschutz-Link in der form-note dezent, aber erkennbar */
.form-note a{
  color:inherit;
  text-decoration:underline;
  text-underline-offset:2px;
}
/* Typo-Feinschliff: keine einsamen Wörter in Lede/Hinweiszeile */
.ph-k .lede,.form-note{text-wrap:pretty}


/* ===== pages-leistungen.css ===== */
/* ============================================================
   WILDENTE · pages-leistungen.css – nur Leistungen
   (data-page="leistungen"). Shared: .page-hero, .svc-layout/
   .svc-side/.svc-block, .chips/.chip, .cta → components.css.
   ============================================================ */

/* Hero-Slot trägt jetzt das echte office-01-Bild – Fallback-Gradient
   entfernt. */

/* ---------- Hero-Variante Leistungen (.ph-l) ----------
   Titel links, rechtsbündige Meta-Spalte (Lede mit 2px-Regel),
   Medium breit, rechts verankert, überlappt die Schlusszeile. */
.ph-l{--h1:clamp(52px,12.5vw,164px)}
.ph-l .hero-grid{display:grid;gap:0}
.ph-l .media{aspect-ratio:16/8;width:100%;margin-top:calc(var(--h1) * -0.36)}
/* 50px statt 28px: das Medium überragt seine Grid-Zeile nach unten
   (negative margin) – der 14px-Leitfarben-Offset braucht Luft zur
   ersten Lede-Zeile (mobil; ab 980px eigene Spalte). */
.ph-l .lede{margin-top:50px}
@media(min-width:980px){
  .ph-l .hero-grid{grid-template-columns:minmax(0,1fr) 320px;column-gap:48px}
  .ph-l .hero-grid h1{grid-column:1 / -1;grid-row:1}
  .ph-l .media{grid-column:1;grid-row:2;aspect-ratio:16/8}
  .ph-l .lede{grid-column:2;grid-row:2;align-self:start;margin:26px 0 0;border-top:2px solid var(--ink);padding-top:16px}
}

/* ---------- Leistungs-Blöcke: Studio-A-Index rechts ----------
   Die riesige Outline-Ziffer füllt die tote rechte Spalte und gibt
   jedem Block einen Fokus-Anker; Füllung wird im Hover gelb. */

/* Mobil (<980): die Outline-Ziffer läuft klein über der Block-
   Headline mit (Judge-Fix 5) – gleiche Ghost-Sprache wie Desktop,
   die H2 schneidet die Ziffer leicht an (choreografierter Overlap). */
@media(max-width:979px){
  .svc-block .num-big{
    display:block;font-size:clamp(56px,16vw,76px);line-height:.8;
    -webkit-text-fill-color:transparent;-webkit-text-stroke:2px var(--ink);
    margin-bottom:-.22em;
  }
}
@media(min-width:980px){
  /* Zeilen: h2 / p / Chips. Row 3 als 1fr: die überschüssige Höhe der
     spannenden svc-pic-Bilder (rows 2–3) landet KOMPLETT unter den
     Chips – vorher verteilte das Grid sie auf beide auto-Rows und der
     p→Chips-Abstand sprang je Block zwischen 18 und 87px (Polish-Fix:
     Abstand jetzt in allen 9 Blöcken identisch 16px). */
  .svc-block{display:grid;grid-template-columns:minmax(0,620px) 1fr;grid-template-rows:auto auto 1fr;column-gap:44px;align-items:start}
  .svc-block h2,.svc-block p,.svc-block .chips{grid-column:1}
  /* Outline-only, flat und hart: Füllung via text-fill-color statt
     color – die color-Transition wurde von Fullpage-Captures mitten
     im Übergang erwischt (Grauschleier in den QA-Shots) und ist raus.
     Hover füllt hart gelb (kein Fade). */
  /* padding-top 0 statt 8px: Cap-Höhen-Rechnung (136px/lh .8 vs.
     64px/lh .9) – mit 8px saß die Ghost-Ziffer ~8px UNTER der
     h2-Versalhöhe (fast-Flucht). Jetzt fluchten beide Oberkanten. */
  .svc-block .num-big{
    grid-column:2;grid-row:1 / span 3;justify-self:end;align-self:start;
    font-size:clamp(84px,9vw,136px);line-height:.8;
    -webkit-text-fill-color:transparent;-webkit-text-stroke:2px var(--ink);
  }
  .svc-block:hover .num-big{-webkit-text-fill-color:var(--gelb)}
}

/* ---------- Medienmomente in den svc-Blöcken (@1440) ----------
   Klein gerahmtes echtes Bild in der rechten Spalte unter der
   Ghost-Nummer – Medienrahmen-Sprache (2px Ink, GELBER Offset).
   Mobil bewusst weggelassen (keine Textwand-Verlängerung @390). */
.svc-pic{display:none}
/* Mobil-Bildmomente (Judge-Fix 5): 3 der svc-Fotos kommen @<980 als
   schmale 16:9-Crops zurück (Rhythmus statt Textwand – bewusst nicht
   alle). Medienrahmen-Sprache: 2px Ink + Leitfarben-Offset (Blau). */
@media(max-width:979px){
  /* width 100% statt calc(100% - 10px): Bildkante fluchtet mit der
     Wrap-Kante (wie Hero-Medium), der Leitfarben-Offset läuft wie
     dort ins Padding aus (kein H-Overflow: 8px < 20px --pad). */
  .svc-pic.svc-pic-m{
    display:block;width:100%;aspect-ratio:16/9;
    margin:26px 0 6px;
    border:2px solid var(--ink);border-radius:12px;overflow:hidden;
    box-shadow:8px 8px 0 var(--accent);
  }
}
@media(min-width:980px){
  /* margin-right 0 statt 6px: rechte Bildkante fluchtet exakt mit
     der Ghost-Ziffer (justify-self:end) und der Hero-Medienkante –
     der 8px-Offset läuft wie beim Hero über die Wrap-Kante hinaus. */
  .svc-pic{
    display:block;grid-column:2;grid-row:2 / span 2;
    justify-self:end;align-self:end;
    width:min(230px,100%);aspect-ratio:3/4;margin:20px 0 4px;
    border:2px solid var(--ink);border-radius:12px;overflow:hidden;
    box-shadow:8px 8px 0 var(--accent);
  }
}

/* ---------- Chips: Leitfarbe Hellblau statt Weiß ----------
   plm-Referenz: Pastell-Chips mit 2px-Ink-Rand (Marker-Quadrat
   zentral in pages-sub.css auf Ink umgestellt). */
.chip{background:var(--blau)}

/* ---------- Engagement-Modelle „Wie wir zusammenarbeiten" ----------
   3 Karten im Karten-Stil des Systems (2px-Rahmen, 16px-Radius). */
.engage{display:grid;gap:14px}
/* Farbfläche pro Karte über .bg-*-Utilities (3 Karten = 3 Pastell-
   töne, plm-Stil) – kein background hier, sonst schlägt es die
   Utility-Klassen aus tokens.css. */
.eng{
  border:2px solid var(--ink);border-radius:16px;
  padding:22px;display:flex;flex-direction:column;gap:10px;
}
.eng .num{font-weight:900;font-stretch:72%;font-size:14px;color:var(--grey)}
/* Hover-Num in Ink: Gelb ginge auf Peach/Sand-Karten unter. */
.eng:hover .num{color:var(--ink)}
.eng h3{
  font-weight:900;font-stretch:72%;text-transform:uppercase;
  font-size:22px;line-height:1.05;
}
.eng p{font-size:14px;color:var(--grey);line-height:1.5}
@media(min-width:820px){
  .engage{grid-template-columns:repeat(3,1fr)}
  .eng{padding:26px}
}

/* ---------- Fix: „zusammenarbeiten." bei 390px ----------
   Die Zeile lief mit dem shared .shead-Clamp (min 40px) 12px über die
   Wrap-Breite – der Schlusspunkt wurde vom rl-line-Clip geschnitten.
   Etwas fluider skalieren, damit die Zeile bei schmalen Viewports passt. */
.engage-sec .shead h2{font-size:clamp(32px,9.5vw,96px)}

/* ---------- Fix: Split-Header lief aus dem Grid (≥980) ----------
   „ZUSAMMENARBEITEN." ist als Ein-Wort-Zeile breiter (873px @96px)
   als die 1fr-Spalte des .shead.split (736px @1440) – min-content
   drückte die Meta-Spalte 137px ÜBER die Wrap-Kante (bei 1024px
   sogar aus dem Viewport). minmax(0,1fr) + Schriftgröße an die
   Spaltenbreite gekoppelt (Wortbreite ≈ 9,3 × font-size):
   Spalte = min(100vw,1240px) − 2×48 Pad − 360 Lede − 48 Gap = −504.
   Ergebnis: Lede-Kante fluchtet wieder exakt auf der Wrap-Kante. */
@media(min-width:980px){
  .engage-sec .shead.split{grid-template-columns:minmax(0,1fr) 360px}
  .engage-sec .shead h2{font-size:clamp(44px,(min(100vw,1240px) - 504px) / 9.3,96px)}
}


/* ===== pages-rechtliches.css ===== */
/* ============================================================
   WILDENTE · pages-rechtliches.css – Impressum / Datenschutz / AGB
   Schlichtes Layout: kleiner page-hero-Kopf + Text-Spalte (max 720px).
   ============================================================ */
.legal-hero{padding:calc(var(--nav-h) + 48px) 0 12px}
.legal-hero h1{font-size:clamp(44px,11vw,120px)}
.legal-hero .lede{margin-top:22px;max-width:560px}

.legal{padding-top:36px}
.legal-col{max-width:720px;margin:0 auto}
.legal-col h2{
  font-weight:900;font-stretch:72%;text-transform:uppercase;
  letter-spacing:-0.01em;line-height:1;
  font-size:clamp(22px,5vw,32px);
  margin:44px 0 14px;padding-top:26px;border-top:2px solid var(--ink);
}
.legal-col h2:first-child{margin-top:0}
.legal-col h3{
  font-weight:800;font-size:16px;line-height:1.3;
  margin:24px 0 8px;
}
.legal-col p{margin:0 0 14px;font-size:15.5px;line-height:1.7}
.legal-col ul,.legal-col ol{margin:0 0 14px;padding-left:22px}
.legal-col li{margin:5px 0;line-height:1.65}
.legal-col a{font-weight:700;text-decoration:underline;text-decoration-color:var(--gelb);text-decoration-thickness:2px;text-underline-offset:3px;word-break:break-word}
.legal-col a:hover{text-decoration-color:var(--ink)}
.legal-col .legal-note{font-size:13px;color:var(--grey)}
.legal-col .legal-stand{margin-top:32px;font-size:13px;color:var(--grey)}


/* ===== pages-sub.css ===== */
/* ============================================================
   WILDENTE · pages-sub.css – gemeinsames System der Unterseiten
   (leistungen, ueber-uns, blog, kontakt). Bewusst NICHT in
   components.css (wird parallel für index migriert): alle Regeln
   hier sind Overrides/Neues, gescoped über die Hero-Varianten-
   klassen .page-hero.sub + .ph-l/.ph-t/.ph-b/.ph-k sowie die
   Karten-Komponenten der Unterseiten.
   ============================================================ */

/* ---------- Subpage-Hero: links-editoriale Basis ----------
   Ein System, vier Varianten: massiver Titel links, Marker-Moment
   auf der Schlusszeile, Medium mit ECHTEM, verankertem Overlap
   (--h1-basiert – der alte -0.55em-Overlap rechnete in 16px-em
   und war faktisch unsichtbar). */
.page-hero.sub{--h1:clamp(54px,13vw,168px);--ov:0.14;padding:calc(var(--nav-h) + 44px) 0 56px}
.page-hero.sub .kicker{justify-content:flex-start}
.page-hero.sub h1{text-align:left;font-size:var(--h1);margin-top:14px}
/* Zeilenlücken-Fix: die rl-line-Masken tragen padding (.16em unten /
   .12em oben) mit negativen Ausgleichs-margins – zwischen Geschwistern
   KOLLABIEREN die Margins aber auf min(-.16,-.12) statt sich zu
   addieren → ~.12em Extra-Lücke zwischen den Headline-Zeilen.
   -.28em (= .16 + .12) stellt den echten line-height-.9-Satz her. */
.page-hero.sub h1 .rl-line + .rl-line{margin-top:-.28em}
.page-hero.sub .lede{text-align:left;margin:0;max-width:520px}
/* Mobile Clearance (zentral): margin:0 oben schlug bisher ALLE
   Varianten-Margins (.ph-* .lede, Spezifität) – die Lede klebte an
   der Medium-Unterkante und kollidierte mit dem 14px-Leitfarben-
   Offset. 50px Luft; ph-t braucht mehr (stage-c translateY+Offset). */
@media(max-width:979px){
  .page-hero.sub .lede{margin-top:50px}
  .page-hero.sub.ph-t .lede{margin-top:clamp(72px,12vw,110px)}
}
/* Kein margin-/width-Shorthand: Overlap (margin-top) und Breite
   gehören den Varianten – hier nur Rahmen-System. */
/* Medienrahmen-Offset in der SEITEN-LEITFARBE (var(--accent),
   tokens.css): leistungen=Hellblau, ueber-uns=Mint, kontakt=Lavendel;
   blog überschreibt auf Ink (Sand-auf-Sand wäre unsichtbar). Gelb
   bleibt Marker-Balken + Hover vorbehalten (Kunden-Regel). */
.page-hero.sub .media{
  margin-inline:0;margin-bottom:0;
  border:2px solid var(--ink);border-radius:12px;
  box-shadow:14px 14px 0 var(--accent); /* 14px statt 10px: Pastell ist heller als Gelb und braucht mehr Fläche, um als Farbmoment zu lesen */
}

/* Medien-Reveal vs. Offset-Schatten: der zentrale Clip-Reveal
   (motion.css) endet auf inset(0 0 0 0) und CLIPPT damit die harten
   Offset-Schatten der gerahmten Medien dauerhaft weg. Endzustand
   für Rahmen-Medien auf negatives Inset erweitert (px ist mit % im
   inset() interpolierbar → Reveal läuft weiter sauber, der
   Leitfarben-Offset wischt am Ende mit ein). */
.page-hero.sub .media.in-view,
.ph-t .hero-stage .media.in-view,
.svc-pic.in-view,
.how-media.in-view{clip-path:inset(-18px -18px -18px -18px)}

/* Marker-Moment (BRVND): gelber Streifen hinter der Schlusszeile
   des Titels. Läuft über die zentralen rl-line-Spans – der Marker
   reveal't also mit der Zeile, ohne neues Motion-JS. */
.page-hero.sub h1 .rl-line:last-child .rl-inner,
.shead.mk h2 .rl-line:last-child .rl-inner{
  position:relative;display:inline-block;vertical-align:top;
  z-index:0;padding:0 .05em;margin:0 -.05em;
}
.page-hero.sub h1 .rl-line:last-child .rl-inner::before,
.shead.mk h2 .rl-line:last-child .rl-inner::before{
  content:"";position:absolute;left:-.03em;right:-.05em;
  top:50%;height:.62em;transform:translateY(-50%);
  background:var(--gelb);z-index:-1;
}

/* Reduced Motion: ohne rl-Split ist die H1-Box höher (kein
   vertical-align-Trick) und der Marker entfällt – Overlap flacher,
   damit keine Glyphen tief angeschnitten werden. Höhere Spezifität
   (.sub.ph-*) gewinnt gegen die Varianten-Regeln. */
@media (prefers-reduced-motion: reduce){
  .page-hero.sub.ph-l .media,
  .page-hero.sub.ph-b .media{margin-top:calc(var(--h1) * -0.20)}
  .page-hero.sub.ph-k .media{margin-top:calc(var(--h1) * -0.12)}
  .page-hero.sub.ph-t .hero-stage{margin-top:calc(var(--h1) * -0.22)}
}

/* ---------- Sektions-Header mit Meta-Spalte (Studio-A) ----------
   H2 links, Lede rechts unten mit 2px-Regel – füllt die bisher
   tote rechte Fläche neben den Display-Headlines. */
@media(min-width:980px){
  .shead.split{display:grid;grid-template-columns:1fr 360px;column-gap:48px;align-items:end}
  .shead.split .label{grid-column:1/-1}
  .shead.split h2{grid-column:1}
  .shead.split .lede{grid-column:2;margin:0 0 6px;border-top:2px solid var(--ink);padding-top:16px}
}

/* ---------- Karten-System vereinheitlicht ----------
   Schatten/Rahmen kommen ZENTRAL aus components.css (.card-hard-
   Werte für .eng/.value/.post/.contact-side). Hier nur der EINE
   Radius (12px) für alle Karten-artigen Flächen + Hover. */
.eng,.value,.post,.paper,.contact-side,.member,
.field input,.field select,.field textarea{border-radius:12px}
.post .post-thumb{border-radius:10px 10px 0 0}
.post:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--gelb)}

/* Chips: Präzisions-Quadrat statt ✲-Dingbat (Echo des .label-Markers).
   Ink statt Gelb – Chips liegen jetzt auf Pastell (leistungen: Blau). */
.chip::before{content:"";width:7px;height:7px;background:var(--ink);flex:0 0 auto}

/* Eyebrow der Blog-Karten ist jetzt ein Pastell-Chip (components.css)
   – Marker-Quadrat in Ink, damit es auf jeder Pastell-Fläche sitzt. */
.post .pcat{display:inline-flex;align-items:center;gap:7px}
.post .pcat::before{content:"";width:6px;height:6px;background:var(--ink);flex:0 0 auto}


/* ===== pages-ueber-uns.css ===== */
/* ============================================================
   WILDENTE · pages-ueber-uns.css – nur Über-uns (data-page="team")
   Team-/Values-/Page-Hero-/CTA-Komponenten liegen in components.css.
   ============================================================ */

/* Alle Slots (Team-Porträts) tragen echte Bilder; Fallback-Gradients
   entfernt. Der media-fill-Workaround ist obsolet – der Shared-Fix
   figure.media.media-fill{position:absolute;inset:0} liegt in
   components.css. */

/* ---------- Hero-Variante Über-uns (.ph-t): Team-Bühne ----------
   Der Titel überlappt eine Bühne aus drei Porträts (Größen-
   Hierarchie: Mitte größer, Seiten versetzt). Ein Schattensystem:
   harte Offsets, Mitte trägt den gelben Akzent. */
.ph-t{--h1:clamp(46px,11.5vw,150px)}
.ph-t .hero-duo{display:grid;gap:0}
.ph-t .hero-stage{
  display:grid;grid-template-columns:1fr 1.24fr 1fr;
  gap:clamp(12px,2.4vw,28px);align-items:start;
  margin-top:calc(var(--h1) * -0.38);
}
/* Caption-Scrim + .cap-Styling: zentrale Regel in components.css.
   Medienrahmen-Sprache: GELBER Offset (systemweit nur für Fotos). */
.ph-t .hero-stage .media{
  position:relative;z-index:1;margin:0;width:100%;aspect-ratio:3/4;overflow:hidden;
  border:2px solid var(--ink);border-radius:12px;
  box-shadow:8px 8px 0 var(--accent);
}
.ph-t .stage-b{box-shadow:14px 14px 0 var(--accent)}
.ph-t .stage-a{transform:translateY(clamp(16px,4vw,44px))}
.ph-t .stage-c{transform:translateY(clamp(28px,6.5vw,68px))}
.ph-t .hero-stage .grain{position:absolute;inset:0;opacity:.35;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.15) .6px,transparent .7px);background-size:3px 3px}
.ph-t .lede{margin-top:clamp(56px,10vw,96px)}
/* Rhythmus-Fix <980: die zentrale ph-t-Clearance (pages-sub, gewinnt
   per Spezifität) ließ @768 84px Luft zwischen Bühne und Lede – mehr
   als der Sektionsrhythmus. 8.5vw hält 48–60px sichtbaren Abstand
   über der translateY-Overhang-Kante von stage-c (+8px Offset). */
@media(max-width:979px){
  .page-hero.sub.ph-t .lede{margin-top:clamp(56px,8.5vw,72px)}
}
/* Typo-Feinschliff: keine einsamen Wörter in Lede-/Karten-/Step-Texten
   (progressive enhancement, Chromium/Safari-TP; Fallback = Status quo) */
.ph-t .lede,.value small,.step small{text-wrap:pretty}
/* Marker-Balken-Abschluss: kleiner „EST. 2021"-Chip am rechten Ende
   des gelben Balkens hinter „Wildente." (Gründungsjahr-Echo des
   Index-Eyebrows). Nur ≥820px – mobil käme der Chip der Wrap-Kante
   zu nah. Hängt an den JS-rl-Spans; bei reduced-motion entfällt er
   (reine Deko, Info steht im Index-Hero-Label). */
@media(min-width:820px){
  .ph-t h1 .rl-line:last-child .rl-inner::after{
    content:"EST. 2021";position:absolute;left:calc(100% + 18px);top:50%;
    transform:translateY(-50%) rotate(-5deg);
    font-size:11px;font-weight:800;font-stretch:100%;letter-spacing:.16em;line-height:1;
    padding:8px 13px;border-radius:999px;background:var(--ink);color:var(--white);
    white-space:nowrap;
  }
}
@media(min-width:980px){
  .ph-t .hero-duo{grid-template-columns:minmax(0,1fr) 320px;column-gap:48px}
  .ph-t .hero-stage{grid-column:1;grid-row:1}
  .ph-t .lede{grid-column:2;grid-row:1;align-self:end;margin:0 0 clamp(28px,4vw,68px);border-top:2px solid var(--ink);padding-top:16px}
}

/* ---------- Values: flat statt Emoji ----------
   4 Karten = 4 Pastelltöne (.bg-* im Markup, plm-Stil) im Karten-
   System (2px-Linie, 12px-Radius, harter Mini-Schatten). */
.values{grid-template-columns:repeat(2,minmax(0,1fr))}
.value{min-width:0} /* Rahmen/Schatten zentral (components.css, Karten-System) */
.value .num{font-weight:900;font-stretch:72%;font-size:14px;margin-bottom:auto}
.value b{font-weight:900;font-stretch:72%;text-transform:uppercase;font-size:clamp(16px,4.4vw,19px);letter-spacing:-0.01em;margin-top:14px}
@media(min-width:820px){.values{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- Team-Grid: Works-Grid-Verhalten ----------
   Einheitlicher Hover (Bild zoomt leicht, Name unterstreicht gelb),
   Hunde-Kacheln charmant abgesetzt, 12. Zelle = Marken-Moment. */
.member .media img{transition:transform .6s cubic-bezier(.22,1,.36,1)}
.member:hover .media img{transform:scale(1.05)}
.member b{
  display:inline-block;padding-bottom:2px;
  background:linear-gradient(var(--gelb),var(--gelb)) no-repeat 0 100% / 0% 3px;
  transition:background-size .35s cubic-bezier(.22,1,.36,1);
}
.member:hover b{background-size:100% 3px}
.member small{display:block}
/* Rand + Mint-Offset kommen jetzt ZENTRAL für alle .member-Kacheln
   (components.css) – Pet-/Marken-Karten brauchen keine Extra-Regel. */
/* Paw-Badge im Chip-System: 2px-Ink-Rand wie alle Pills/Chips (Rubrik 7
   – identische Komponenten-Sprache), Padding kompensiert den Rand. */
.member .paw{
  position:absolute;top:10px;right:10px;z-index:2;display:inline-flex;
  background:var(--gelb);color:var(--ink);border-radius:999px;padding:5px;
  border:2px solid var(--ink);
  transform:rotate(8deg);box-shadow:2px 2px 0 var(--ink);
}
.member .paw svg{display:block}
.member.m-brand{align-items:center;justify-content:center;padding:0}
/* Marken-Kachel: Mint statt Tanne-Fläche (Kunden-Regel), dazu die
   SchwarzGelb-Wortmarke (Weiß fiele auf Pastell durch). */
.member.m-brand .bg{background:var(--mint)}
.member.m-brand::after{content:none}
.member.m-brand .brandmark{position:relative;z-index:2;width:78%;height:auto;transform:rotate(-6deg)}

/* ---------- Arbeitsweise „So arbeiten wir" ----------
   Studio-A-Moment: die ganze Sektion ist eine MINT-Akzentfläche
   (Leitfarbe, .bg-mint im Markup) mit Ink-Regeln oben/unten;
   BTS-Bild mit Ink-Offset (Mint-Offset ginge auf Mint unter). */
.how-sec{border-top:2px solid var(--ink);border-bottom:2px solid var(--ink);padding:72px 0}
@media(min-width:820px){.how-sec{padding:96px 0}}
.how{display:grid;gap:28px}
.how-media{
  position:relative;border-radius:12px;overflow:hidden;aspect-ratio:3/4;
  width:min(100%,560px);
  border:2px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);
}
/* Caption-Scrim + .cap-Styling: zentrale Regel in components.css. */
.how-media .grain{position:absolute;inset:0;opacity:.4;mix-blend-mode:overlay;background-image:radial-gradient(rgba(255,255,255,.15) .6px,transparent .7px);background-size:3px 3px}
.how-steps{display:grid;align-content:center}
.step{display:flex;gap:16px;padding:22px 0;border-top:2px solid var(--ink)}
.step:last-child{border-bottom:2px solid var(--ink)}
.step .num{font-size:12px;font-weight:700;color:var(--grey);width:28px;flex:0 0 28px;padding-top:4px}
.step b{
  display:block;font-weight:900;font-stretch:72%;text-transform:uppercase;
  font-size:clamp(20px,4.6vw,26px);line-height:1.05;
}
.step small{display:block;color:var(--grey);font-size:13px;line-height:1.5;margin-top:6px}
@media(min-width:820px){
  .how{grid-template-columns:1fr 1.25fr;gap:60px;align-items:center}
}