/* ============================================================================
   KARIM EL HAMDAOUI · PROFESSIONAL PROFILE
   Statische Recruiter-Landingpage · kein Framework · kein Build-Schritt.

   Layout-Referenz: 00_SOURCE_MATERIAL/MOCKUPS/01..06
   Farb-/Typo-Tokens: 12_DESIGN_SYSTEM/*
   Inhalte: 11C Final Copy · 11_SECTION_SPECS

   KPI-Sektion und Video-Portfolio sind freigegeben: deren Karten-, Text- und
   Hierarchieregeln bleiben unveraendert, angepasst sind nur Containerbreite,
   Aussenabstaende und Responsive-Verhalten.
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1 · Schriften (lokal, keine externe Abhaengigkeit)
   ------------------------------------------------------------------------ */
/* Fraunces — Display-Serif fuer die Editorial-Ebene (OFL, lokal).
   Variable Achsen dieser Datei: opsz 9-144, wght 100-900.
   Die hohe optische Groesse (opsz 144) erzeugt den High-Contrast-Schnitt:
   feine Haarstriche, kraeftige Grundstriche — ruhig, modern, nicht ornamental.
   Bewusst NUR die Roman-Schnitte: kursiv wird nirgends gesetzt. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/profile/fonts/fraunces/Fraunces-Roman-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/profile/fonts/fraunces/Fraunces-Roman-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../assets/profile/fonts/geist/Geist-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/profile/fonts/jetbrains-mono/JetBrainsMono-Regular-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../assets/profile/fonts/jetbrains-mono/JetBrainsMono-Medium-latin.woff2") format("woff2");
}


/* ---------------------------------------------------------------------------
   2 · Design Tokens
   Grundton gegenueber V1 abgedunkelt — die Mockups zeigen nahezu schwarze
   Flaechen mit leicht abgesetzten Panels.
   ------------------------------------------------------------------------ */
:root {
  --bg:            #08090B;
  --bg-alt:        #0C0D10;
  --panel:         #101116;
  --card:          #14161C;
  --card-2:        #191B22;
  --border:        #24272F;
  --border-soft:   #1B1D24;
  --divider:       #191B21;

  --text:          #FFFFFF;
  --text-2:        #C7CDD8;
  --text-3:        #8C95A3;

  --accent:        #E9982F;
  --accent-hover:  #F5AC49;
  --accent-deep:   #C77A22;
  --success:       #36C275;

  --accent-10:     rgba(233, 152, 47, .10);
  --accent-18:     rgba(233, 152, 47, .18);
  --accent-35:     rgba(233, 152, 47, .35);

  /* Full-Width-Raster: breiter Container, schmale Aussenraender */
  --shell-max:     1760px;
  --gutter:        clamp(20px, 3.4vw, 56px);
  --section-y:     clamp(52px, 4.6vw, 84px);
  --gap-lg:        clamp(28px, 2.6vw, 44px);
  --gap-md:        clamp(18px, 1.6vw, 26px);
  --gap-sm:        14px;

  --radius-xl:     26px;
  --radius-lg:     18px;
  --radius-md:     14px;
  --radius-pill:   999px;

  --shadow-card:   0 22px 50px -32px rgba(0, 0, 0, .9);
  --shadow-lift:   0 30px 64px -30px rgba(0, 0, 0, .95);
  --shadow-media:  0 40px 90px -46px rgba(0, 0, 0, 1);

  /* EDITORIAL POLISH PASS · Schriftrollen
     --font-editorial  Display-Serif. NUR gross: Hero, Wortmarke, Filmtitel,
                       Sektionsueberschriften, Lightbox-Titel.
     --font-display    Ueberschriften der zweiten Ebene (h1/h3/h4, Zahlen).
                       Laeuft seit diesem Pass auf derselben Sans wie der
                       Fliesstext — Space Grotesk ist entfallen, damit die
                       Seite genau eine Serif und genau eine Sans fuehrt.
     --font-body       Fliesstext, Navigation, Buttons.
     --font-mono       nur sehr kleine Labels und technische Specs. */
  --font-editorial: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-display:  "Geist", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-body:     "Geist", "Inter", "Segoe UI", system-ui, sans-serif;
  --font-mono:     "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --fs-hero:       clamp(2.1rem, 3.9vw, 4.25rem);
  --fs-h2:         clamp(1.6rem, 2.1vw, 2.35rem);
  --fs-h3:         clamp(1.1rem, 1.25vw, 1.4rem);
  --fs-lede:       clamp(1rem, 1.05vw, 1.15rem);
  --fs-body:       1rem;
  --fs-small:      .9375rem;
  --fs-caption:    .8125rem;
  --fs-kpi:        clamp(2.5rem, 3.4vw, 3.5rem);

  --dur:           250ms;
  --ease:          cubic-bezier(.22, .61, .36, 1);

  --header-h:      92px;
}


/* ---------------------------------------------------------------------------
   3 · Reset & Basis
   ------------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.02em;
  margin: 0;
}
h2 { font-size: var(--fs-h2); }
/* Basisgroesse fuer h1 ausserhalb des Heros — bisher nicht gesetzt, weil es
   nur die eine Hero-Headline gab. Unterseiten (z. B. die Case Study) fuehren
   ihren eigenen h1 und wuerden sonst auf die Browser-Standardgroesse fallen.
   .hero h1 hat die hoehere Spezifitaet und bleibt unberuehrt. */
h1 { font-size: var(--fs-h2); }

p  { margin: 0; }
ul,
ol { margin: 0; padding: 0; list-style: none; }

/* Muss die display-Werte der Komponentenklassen schlagen, damit von der
   Konfiguration ausgeblendete CTAs wirklich verschwinden. */
[hidden] { display: none !important; }

a { color: inherit; text-decoration: none; }

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a, button { -webkit-tap-highlight-color: transparent; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

::selection { background: var(--accent-35); color: #fff; }

.visually-hidden,
.sr-heading {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 16px;
  z-index: 200;
  padding: 12px 20px;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: #14161b;
  font-weight: 600;
  transition: top var(--dur) var(--ease);
}
.skip-link:focus-visible { top: 16px; }

.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 22px; height: 22px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 30px; height: 30px; stroke-width: 1.5; }
.icon--sm { width: 16px; height: 16px; }


/* ---------------------------------------------------------------------------
   4 · Layout-Primitive
   „shell" ist der neue, deutlich breitere Content-Container (Full-Width-
   Anforderung). Fliesstext wird separat begrenzt, damit Zeilen lesbar bleiben.
   ------------------------------------------------------------------------ */
.shell {
  width: 100%;
  max-width: var(--shell-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section--alt { background: var(--bg-alt); }

.divider-top    { border-top: 1px solid var(--divider); }
.divider-bottom { border-bottom: 1px solid var(--divider); }

.panel {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--panel);
  box-shadow: var(--shadow-card);
}

/* Kleines amber Label — im Mockup wahlweise mit Strich oder Statuspunkt */
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker--dash::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
}
.kicker--dot {
  padding: 7px 15px 7px 13px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .02);
  letter-spacing: .1em;
  text-transform: none;
  color: var(--text-2);
}
.kicker-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 4px rgba(54, 194, 117, .14);
}

.section-head { max-width: 720px; margin-bottom: var(--gap-lg); }
.section-head h2 { margin-bottom: 14px; }
.section-head p  { color: var(--text-3); font-size: var(--fs-small); }

/* Label-Zeile mit Titel links und Link rechts (Mockup 04) */
.label-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: var(--gap-lg);
}
.label-title {
  font-family: var(--font-mono);
  font-size: clamp(1rem, 1.35vw, 1.375rem);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}


/* ---------------------------------------------------------------------------
   5 · Buttons & Links
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.btn .icon { width: 18px; height: 18px; }
.btn:hover { transform: scale(1.02); }
.btn:active { transform: scale(.99); }

.btn--primary {
  background: var(--accent);
  color: #14100A;
  box-shadow: 0 14px 32px -18px rgba(233, 152, 47, .65);
}
.btn--primary:hover { background: var(--accent-hover); }

/* Dunkler Pill-Button mit heller Kontur (Mockup: „View my work") */
.btn--pill {
  border-color: var(--border);
  background: var(--card);
  color: var(--text);
}
.btn--pill:hover { border-color: var(--accent-35); background: var(--card-2); }
.btn--bubble { padding-right: 10px; }

.btn-bubble {
  display: grid;
  place-items: center;
  width: 30px; height: 30px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
}
.btn-bubble .icon { width: 12px; height: 12px; fill: currentColor; stroke: none; }

.btn--sm { padding: 10px 18px; font-size: var(--fs-caption); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--gap-sm); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;                /* bequeme Touch-Flaeche */
  font-size: var(--fs-small);
  font-weight: 600;
  color: var(--accent);
  transition: color var(--dur) var(--ease);
}
.link-arrow .icon { transition: transform var(--dur) var(--ease); }
.link-arrow:hover { color: var(--accent-hover); }
.link-arrow:hover .icon { transform: translateX(4px); }


/* ---------------------------------------------------------------------------
   6 · Asset-Platzhalter
   Gleiche Abmessungen wie das spaetere Bild — ein Austausch veraendert das
   Layout nicht. Beschriftet mit Name, Pixelgroesse, Seitenverhaeltnis, Zweck.
   ------------------------------------------------------------------------ */
.asset-ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 100%;
  padding: 16px 14px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-lg);
  background:
    repeating-linear-gradient(135deg,
      rgba(255, 255, 255, .014) 0 10px,
      transparent 10px 20px),
    var(--card);
  text-align: center;
}
.asset-ph--square { aspect-ratio: 1 / 1; }
.asset-ph__name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .1em;
  line-height: 1.5;
  color: var(--accent);
}
.asset-ph__spec {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .06em;
  color: var(--text-3);
}
.asset-ph__hint {
  max-width: 26ch;
  margin-top: 4px;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-3);
}


/* ---------------------------------------------------------------------------
   7 · Header · Logo links · Navigation mittig · CTA rechts
   ------------------------------------------------------------------------ */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.site-header[data-scrolled="true"] {
  background: rgba(8, 9, 11, .86);
  border-bottom-color: var(--divider);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* EDITORIAL POLISH PASS · drei Zonen als Raster.
   minmax(0,1fr) auf beiden Seiten heisst: beide Aussenspalten sind IMMER
   gleich breit. Die Wortmarke in der auto-Spalte steht dadurch optisch exakt
   mittig — auch wenn die deutschen Labels laenger sind als die englischen. */
.header-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: clamp(16px, 2vw, 40px);
  height: var(--header-h);
  transition: height var(--dur) var(--ease);
}
.site-header[data-scrolled="true"] .header-inner { height: 70px; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 44px;               /* bequeme Touch-Flaeche */
}
.brand-mark {
  font-family: var(--font-display);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.04em;
  color: var(--text);
}
.brand-text { display: flex; flex-direction: column; }
.brand-line {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text);
}

.nav { display: flex; align-items: center; gap: 20px; }
.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.5vw, 26px);
}
.nav-links a {
  padding: 8px 2px;
  font-size: var(--fs-small);
  color: var(--text-2);
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--accent); }

/* Die alte Flex-Zentrierung samt absolut gesetztem CTA ist entfallen —
   die Zonen stehen jetzt im Raster von .header-inner (siehe oben).
   Der Menue-Knopf traegt bewusst keinen Rahmen, keine Flaeche und keinen
   Radius mehr: kein Tech-UI in einer Editorial-Kopfzeile. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  color: var(--text);
}
.nav-toggle .icon-close,
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }


/* ---------------------------------------------------------------------------
   8 · HERO — Text links, Portrait randlos rechts (Mockup 02)
   ------------------------------------------------------------------------ */
.hero {
  position: relative;
  min-height: clamp(500px, 40vw, 760px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + clamp(24px, 4vw, 64px));
  padding-bottom: clamp(48px, 6vw, 96px);
  overflow: hidden;
}

.hero-bg { position: absolute; inset: 0; pointer-events: none; }
.hero-bg::before {
  content: "";
  position: absolute;
  top: -10%; right: 4%;
  width: 46vw; height: 46vw;
  max-width: 820px; max-height: 820px;
  background: radial-gradient(circle, rgba(233, 152, 47, .20) 0%, rgba(233, 152, 47, 0) 62%);
}

/* Portrait rechts, weich in den Hintergrund integriert.
   V2: Der Bildkasten setzt tiefer an und ist etwas schmaler. Weil object-fit:
   cover hier ueber die Kastenhoehe skaliert, wird das Motiv dadurch zugleich
   kleiner UND seitlich weniger beschnitten — mehr Raum um Kopf und
   Oberkoerper, mehr Gewicht auf der Textseite. Struktur, Maskierung und
   Breakpoints bleiben unveraendert. */
.hero-media {
  position: absolute;
  inset: clamp(28px, 5vw, 88px) clamp(24px, 3.4vw, 56px) 0 auto;
  width: 50%;
  pointer-events: none;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 68% 24%;

  mask-image:
    linear-gradient(to right, transparent 0%, #000 30%),
    linear-gradient(to bottom, #000 82%, transparent 100%);

  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 30%),
    linear-gradient(to bottom, #000 82%, transparent 100%);

  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

.hero-inner { position: relative; }
.hero-copy { max-width: min(54%, 780px); }

.hero h1 {
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin: 20px 0 22px;
}
.hero h1 em { font-style: normal; color: var(--accent); }

.hero-sub {
  max-width: 46ch;
  font-size: var(--fs-lede);
  color: var(--text-2);
}

/* Fachliche Einordnung ueber dem Einleitungstext. Bewusst INNERHALB von
   .hero-sub: ab 767px loest .hero-copy zu display:contents auf, jedes
   zusaetzliche direkte Kind braeuchte dort eine eigene Rasterzeile.
   Nutzt ausschliesslich bestehende Tokens. */
.hero-fields {
  display: block;
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

.hero-actions { margin-top: 30px; }

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid var(--divider);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-3);
}
.hero-meta span { display: inline-flex; align-items: center; gap: 8px; }
.hero-meta .icon { width: 15px; height: 15px; }


/* ---------------------------------------------------------------------------
   9 · Logo-Leiste (Wortmarken-Reihe unter dem Hero, Referenz SOLL_LOGO_BAR)

   Eine einzige horizontale Reihe weisser Wortmarken. Die Quellbilder in
   assets/logos/bar/ sind auf den sichtbaren Inhalt beschnitten — dadurch
   entspricht die gerenderte Bildhoehe exakt der optischen Logohoehe.
   Da jede Wortmarke andere Proportionen hat (Versalhoehe, Ober-/Unterlaengen),
   gleicht ein Faktor --k pro Logo die optische Hoehe an, statt alle Bilder
   stumpf auf denselben Wert zu setzen.
   ------------------------------------------------------------------------ */
.logobar {
  padding-block: clamp(18px, 1.6vw, 26px);
  border-top: 1px solid var(--divider);
  border-bottom: 1px solid var(--divider);
  background: var(--bg-alt);
}
.logobar-title {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.6vw, 26px);
  margin-bottom: clamp(13px, 1.2vw, 19px);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
  text-align: center;
}
.logobar-title::before,
.logobar-title::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--divider);
}

.logo-row {
  --logo-h: clamp(21px, 2vw, 33px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 2.6vw, 64px);
}
.logo-row li {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  opacity: .94;
  transition: opacity var(--dur) var(--ease);
}
.logo-row li:hover { opacity: 1; }
.logo-row img {
  width: auto;
  height: calc(var(--logo-h) * var(--k, 1));
  max-width: 100%;
  object-fit: contain;
}

/* Optischer Hoehenausgleich pro Wortmarke */
.logo--claude     { --k: .98; }
.logo--gemini     { --k: 1.10; }
.logo--higgsfield { --k: 1.10; }
.logo--kling      { --k: 1.00; }
.logo--elevenlabs { --k: .70; }
.logo--canva      { --k: 1.35; }
.logo--shopify    { --k: 1.12; }
.logo--meta       { --k: .80; }


/* ---------------------------------------------------------------------------
   10 · Kompetenzen — drei Pillar-Cards (Mockup 03)
   ------------------------------------------------------------------------ */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-md);
}

.pillar {
  --pillar-pad: clamp(18px, 1.5vw, 26px);
  position: relative;
  display: grid;
  /* Die Textspalte bekommt eine feste, gerade noch komfortable Breite, alles
     Weitere geht an die Illustration — rund 30-35 % Text zu 65-70 % Bild.
     Feste Breite statt Bruchteil, damit die Ueberschriften in jeder
     Desktop-Breite zweizeilig bleiben. */
  grid-template-columns: minmax(0, clamp(152px, 33%, 250px)) minmax(0, 1fr);
  align-items: stretch;
  gap: clamp(10px, 1vw, 16px);
  padding: var(--pillar-pad);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* Amber-Kante an der Unterkante wie im Mockup */
.pillar::after {
  content: "";
  position: absolute;
  left: var(--pillar-pad); right: var(--pillar-pad); bottom: 0;
  height: 1px;
  background: linear-gradient(to right, var(--accent), transparent);
  opacity: .5;
  z-index: 1;
}
.pillar:hover {
  transform: translateY(-4px);
  border-color: var(--accent-18);
  box-shadow: var(--shadow-lift);
}
/* Titel oben, Flieasstext darunter, CTA immer an der Unterkante */
.pillar-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.pillar-copy .link-arrow { margin-top: auto; align-self: flex-start; padding-top: 6px; }
/* Groesse so gewaehlt, dass „Content & Video" in jeder Desktop-Breite in die
   schmale Textspalte passt und alle drei Ueberschriften zweizeilig bleiben. */
.pillar h3 { font-size: clamp(.9375rem, .95vw, 1.05rem); line-height: 1.16; }
.pillar p {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-3);
}

/* Illustration rechts. Der Rahmen laeuft ueber den Innenabstand hinaus bis an
   die Kartenkante, damit die 1:1-Grafik so gross wie im Mockup erscheint. Die
   Kartenhoehe bestimmt allein die Textspalte — das Bild ist absolut
   positioniert und kann sie deshalb nicht auseinanderziehen. */
.pillar-media {
  position: relative;
  align-self: stretch;
  min-height: clamp(150px, 11vw, 215px);
  margin-block: calc(var(--pillar-pad) * -1);
  margin-inline-end: calc(var(--pillar-pad) * -.9);
}
.pillar-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: contain;
  object-position: center;
  /* leicht nach links und unten, wie in der Mockup-Referenz */
  transform: translate(-2%, 2%) scale(var(--iso-k, 1));
  transform-origin: center;
}

/* Die drei PNGs sind 1000x1000 mit unterschiedlich breitem transparentem
   Rand. --iso-k gleicht diesen Rand aus, sodass die Illustration selbst die
   Bildflaeche fuellt. Der Wert ist jeweils 1 / groesster Motivanteil, damit
   das Motiv in keiner Kartenproportion ueber die Bildflaeche hinauslaeuft —
   also kein Beschnitt, keine Verzerrung.
   V2-Reihenfolge der Karten:
   1 Creative Automation · 2 Content & Video · 3 AI Workflow Building
   Die Werte sind mit den Illustrationen mitgewandert — AI Workflow Building
   behaelt 1.10, die beiden anderen 1.16. */
.pillars > .pillar:nth-child(1) .pillar-media img { --iso-k: 1.16; }
.pillars > .pillar:nth-child(2) .pillar-media img { --iso-k: 1.16; }
.pillars > .pillar:nth-child(3) .pillar-media img { --iso-k: 1.10; }

/* Kompakte Vollliste der Kompetenzen (Section Spec 03) */
.skill-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2px;
  margin-top: var(--gap-md);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--border-soft);
  overflow: hidden;
}
.skill-list li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 15px 20px;
  background: var(--bg-alt);
  font-size: var(--fs-caption);
}
.skill-list .icon { color: var(--accent); }
.skill-list b { font-family: var(--font-display); font-weight: 600; }
.skill-list span { grid-column: 2; color: var(--text-3); }


/* ---------------------------------------------------------------------------
   11 · KPI — FREIGEGEBEN. Struktur, Inhalte und Hierarchie unveraendert;
   nur Breite/Abstaende folgen dem neuen Raster.
   ------------------------------------------------------------------------ */
.kpi-grid {
  display: grid;
  /* fuenf Kennzahlen — auf Desktop gleichmaessig in einer Reihe */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--gap-md);
}
.kpi-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  height: 100%;
  padding: 30px 28px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(233, 152, 47, .07) 0%, transparent 62%),
    var(--card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.kpi-card:hover {
  transform: scale(1.02);
  border-color: var(--accent-18);
  box-shadow: var(--shadow-lift);
}
.kpi-card .icon { color: var(--accent); margin-bottom: 12px; }
.kpi-value {
  font-family: var(--font-display);
  font-size: var(--fs-kpi);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.kpi-label {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 4px;
}
.kpi-card p { font-size: var(--fs-small); color: var(--text-3); }


/* ---------------------------------------------------------------------------
   12 · Video-Portfolio — FREIGEGEBEN. Karten, Reihenfolge, Play-Logik und
   Lightbox unveraendert; nur Raster-Breite und Abstaende angepasst.
   ------------------------------------------------------------------------ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap-md);
}

.video-card {
  display: block;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background: var(--card);
  overflow: hidden;
  transition: transform var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.video-card:hover {
  transform: translateY(-4px);
  border-color: var(--accent-18);
  box-shadow: var(--shadow-media);
}

.video-thumb {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--card-2);
}
.video-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 400ms var(--ease);
}
.video-card:hover .video-thumb img { transform: scale(1.03); }
.video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(8, 9, 11, .9) 0%, rgba(8, 9, 11, 0) 45%);
}

.video-play {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.video-play span {
  display: grid;
  place-items: center;
  width: 64px; height: 64px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 50%;
  background: rgba(8, 9, 11, .5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.video-play .icon { width: 20px; height: 20px; margin-left: 3px; fill: currentColor; stroke: none; }
.video-card:hover .video-play span {
  transform: scale(1.06);
  border-color: var(--accent);
  background: rgba(233, 152, 47, .3);
  box-shadow: 0 0 32px -6px var(--accent-35);
}

.video-duration {
  position: absolute;
  right: 14px; bottom: 14px;
  z-index: 1;
  padding: 5px 10px;
  border-radius: 8px;
  background: rgba(8, 9, 11, .74);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-2);
}

.video-meta { padding: 18px 20px 20px; }
.video-cat {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.video-meta h3 { font-size: var(--fs-h3); margin: 9px 0 6px; }
.video-meta p { font-size: var(--fs-small); color: var(--text-3); }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 48px);
  background: rgba(4, 5, 6, .93);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.lightbox-inner { position: relative; width: min(100%, 460px); max-height: 100%; }
.lightbox video {
  width: 100%;
  max-height: min(82vh, 900px);
  border-radius: var(--radius-xl);
  background: #000;
  box-shadow: var(--shadow-media);
}
.lightbox-caption {
  margin-top: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--text-2);
  text-align: center;
}
.lightbox-close {
  position: absolute;
  top: -56px; right: 0;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.lightbox-close:hover { border-color: var(--accent-35); background: var(--card-2); }

.lightbox-inner--wide { width: min(100%, 900px); }


/* ---------------------------------------------------------------------------
   12b · Mixed-Format Portfolio — 16:9 Commercials + Vertical Works
   ------------------------------------------------------------------------ */

.video-thumb--wide { aspect-ratio: 16 / 9; }

.video-card--featured { margin-bottom: var(--gap-md); }

.video-card--featured .video-meta h3 { font-size: var(--fs-h2); }

.video-featured-label {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 5px 14px;
  background: var(--accent);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #08090B;
  pointer-events: none;
}

.video-role {
  font-size: var(--fs-caption);
  color: var(--text-3);
  margin-top: 6px;
}

.video-grid--paired {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--gap-md);
  margin-top: var(--gap-md);
}

.video-grid--solo {
  display: grid;
  grid-template-columns: minmax(0, 620px);
  justify-content: center;
  margin-top: var(--gap-md);
}

.works-divider {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-top: calc(var(--section-y) * .65);
  margin-bottom: var(--gap-md);
}
.works-divider::before,
.works-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border-soft);
}
.works-divider-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-3);
  white-space: nowrap;
}


/* ---------------------------------------------------------------------------
   13 · Workflow — Prozesskette in einem Full-Width-Panel (SOLL-Referenz)

   Acht Stationen in einem gleichmaessigen Raster. Trennlinie und Pfeil
   entstehen als Pseudo-Elemente der Station: ::before ist die vertikale
   Trennung links (mit einer Luecke auf Kachelhoehe), ::after der Pfeil, der
   genau in dieser Luecke sitzt.
   ------------------------------------------------------------------------ */
.flow-head { max-width: 60ch; margin-bottom: clamp(26px, 2.8vw, 42px); }
.flow-head h2 { margin-bottom: 16px; }
.flow-lede {
  font-size: var(--fs-lede);
  line-height: 1.6;
  color: var(--text-2);
  max-width: 52ch;
}

.flow-panel { padding: clamp(26px, 2.8vw, 46px) clamp(18px, 2vw, 34px) clamp(24px, 2.4vw, 38px); }

.flow {
  --flow-cols: 8;
  --flow-tile: clamp(58px, 6.4vw, 100px);
  --flow-num-fs: clamp(1.2rem, 1.55vw, 1.7rem);
  --flow-num-h: calc(var(--flow-num-fs) + 14px);
  display: grid;
  grid-template-columns: repeat(var(--flow-cols), minmax(0, 1fr));
  align-items: stretch;
}
.flow-step {
  position: relative;
  min-width: 0;
  padding: 4px clamp(8px, 1vw, 18px) 6px;
  text-align: center;
}
/* vertikale Trennung mit Luecke auf Hoehe der Icon-Kachel */
.flow-step + .flow-step::before {
  content: "";
  position: absolute;
  left: 0; top: 6px; bottom: 6px;
  width: 1px;
  background: linear-gradient(to bottom,
              var(--border) 0 18%,
              transparent 18% 46%,
              var(--border) 46% 100%);
}
/* Pfeil in der Luecke, auf Kachelmitte — als Inline-SVG, damit Linie und
   Spitze wie in der Referenz aussehen (keine externe Datei). */
.flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -15px;
  top: calc(4px + var(--flow-num-h) + var(--flow-tile) / 2);
  width: 30px; height: 12px;
  margin-top: -6px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12' fill='none' stroke='%23E9982F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6h26M22 1.5 26.5 6 22 10.5'/%3E%3C/svg%3E");
  opacity: .85;
}
.flow-num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--flow-num-fs);
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1;
  color: var(--accent);
  margin-bottom: 14px;
}
.flow-tile {
  display: grid;
  place-items: center;
  width: var(--flow-tile);
  height: var(--flow-tile);
  margin: 0 auto clamp(16px, 1.6vw, 24px);
  border: 1px solid var(--border);
  border-radius: clamp(14px, 1.3vw, 20px);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(233, 152, 47, .08) 0%, transparent 70%),
    var(--card);
  color: var(--accent);
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.flow-tile .icon { width: 46%; height: 46%; stroke-width: 1.5; }
.flow-step:hover .flow-tile {
  transform: scale(1.03);
  border-color: var(--accent-35);
  background: var(--accent-10);
}
/* Zwei Zeilen Mindesthoehe und die Akzentlinie an der Unterkante: dadurch
   sitzen Linie und Beschreibung ueber alle acht Stationen auf einer Hoehe,
   auch wenn ein Titel nur eine Zeile braucht. */
.flow-step h3 {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: calc(2.5em + 13px);
  margin-bottom: 12px;
  font-size: clamp(.95rem, 1.05vw, 1.15rem);
  font-weight: 700;
  line-height: 1.25;
  hyphens: auto;
}
/* feine Amber-Akzentlinie unter dem Titel */
.flow-step h3::after {
  content: "";
  display: block;
  width: 26px; height: 1px;
  margin: auto auto 0;
  background: var(--accent);
  opacity: .65;
}
.flow-step p {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-3);
}

/* lange feine Abschlusslinie mit Amber-Punkt in der Mitte */
.flow-note {
  position: relative;
  max-width: 92ch;
  margin: clamp(30px, 3.4vw, 48px) auto 0;
  padding-top: clamp(26px, 2.6vw, 40px);
  font-size: var(--fs-small);
  color: var(--text-3);
  text-align: center;
}
.flow-note::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right,
              transparent 0%, var(--border) 12%,
              var(--accent-35) 50%,
              var(--border) 88%, transparent 100%);
}
.flow-note::after {
  content: "";
  position: absolute;
  top: -2px; left: 50%;
  width: 5px; height: 5px;
  margin-left: -2.5px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px 2px var(--accent-35);
}


/* ---------------------------------------------------------------------------
   14 · Timeframe — interaktive Case Study (SOLL-Referenz)

   Kopf zweispaltig, darunter ein Panel mit sechs Projektbereichen als
   Tablist und einem Detailpanel. Die Bereichs-Buttons sind echte <button>
   mit role="tab"; ohne JavaScript bleiben alle Detailpanels sichtbar.
   ------------------------------------------------------------------------ */
.tf-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: var(--gap-lg);
  margin-bottom: clamp(30px, 3.4vw, 52px);
}
/* h1 mitgefuehrt: die Case-Study-Seite nutzt denselben Kopf mit eigenem h1. */
.tf-copy h1,
.tf-copy h2 { margin-bottom: 20px; }
.tf-subhead { color: var(--text-2); font-weight: 600; }
.tf-copy p {
  font-size: var(--fs-small);
  line-height: 1.65;
  color: var(--text-2);
  margin-bottom: 16px;
  max-width: 60ch;
}
.tf-copy p:last-child { margin-bottom: 0; }

/* Proof-of-Work-Link zum echten Shop — bewusst zurueckhaltend, nicht als
   Verkaufs-CTA. Hoehe, Rundung und Typografie kommen aus .btn. */
.tf-cta {
  margin-top: 26px;
  border-color: var(--accent-35);
  background: var(--card);
  color: var(--text);
}
.tf-cta .icon {
  color: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.tf-cta:hover {
  border-color: var(--accent);
  background: var(--card-2);
  box-shadow: 0 10px 28px -18px rgba(233, 152, 47, .5);
  /* bewusst ohne Skalierung — der Pfeil traegt die Bewegung */
  transform: none;
}
.tf-cta:hover .icon { transform: translateX(3px); }
.tf-cta:active { transform: none; }

/* --- Case-Panel ---------------------------------------------------------- */
.tf-case { padding: clamp(22px, 2.4vw, 38px); }
.tf-case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 20px;
  margin-bottom: clamp(20px, 2vw, 30px);
}
.tf-case-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* --- Sechs Projektbereiche ----------------------------------------------- */
.tf-journey {
  --tf-icon: clamp(38px, 3.4vw, 54px);
  /* Hoehe des Nummernblocks + Innenabstaende bis zur Icon-Oberkante.
     Der Nummernblock hat eine feste Hoehe, damit die groessere Nummer des
     aktiven Bereichs die Icon-Reihe nicht verschiebt. */
  --tf-num-h: 34px;
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(10px, 1.1vw, 18px);
}
/* durchgehende Linie hinter der Icon-Reihe */
.tf-journey::before {
  content: "";
  position: absolute;
  left: 8%; right: 8%;
  top: calc(14px + var(--tf-num-h) + var(--tf-icon) / 2);
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border) 12%, var(--border) 88%, transparent);
}
.tf-node {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 12px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-lg);
  background: transparent;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.tf-node-num {
  display: grid;
  place-items: center;
  min-height: 20px;
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.tf-node-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--tf-icon);
  height: var(--tf-icon);
  margin: 8px 0 10px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--text-2);
  transition: border-color var(--dur) var(--ease),
              background-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
.tf-node-icon .icon { width: 46%; height: 46%; stroke-width: 1.6; }
.tf-node-title {
  font-family: var(--font-display);
  font-size: clamp(.85rem, .92vw, 1rem);
  font-weight: 700;
  line-height: 1.2;
  hyphens: auto;
}
.tf-node-sub {
  margin-bottom: 12px;
  font-size: var(--fs-caption);
  line-height: 1.35;
  color: var(--text-3);
  hyphens: auto;
}
.tf-node-thumb {
  display: block;
  width: 100%;
  /* auto haelt die sechs Vorschaubilder auf einer Linie, auch wenn ein
     Untertitel zweizeilig umbricht (Karten sind als Grid-Items gleich hoch) */
  margin-top: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
}
/* Die Tab-Motive liegen im Hochformat 4:5 vor. Ein quadratischer Ausschnitt
   zeigt rund 80 % der Bildhoehe, haelt die sechs Karten aber gleich hoch. */
.tf-node-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  opacity: .45;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
/* Inaktive Bereiche bewusst ruhiger, damit der aktive klar fuehrt. */
.tf-node:not(.is-active) .tf-node-title { color: var(--text-2); }
.tf-node:hover { border-color: var(--border-soft); background: rgba(255, 255, 255, .015); }
.tf-node:hover .tf-node-thumb img { opacity: .75; }
.tf-node:hover .tf-node-title { color: var(--text); }
.tf-node:hover .tf-node-icon { border-color: var(--accent-35); color: var(--accent); }

/* aktiver Bereich */
.tf-node.is-active {
  border-color: var(--accent-35);
  background: var(--accent-10);
  /* sehr dezenter Halo — kein Leuchteffekt */
  box-shadow: 0 10px 32px -24px rgba(233, 152, 47, .55);
}
.tf-node.is-active .tf-node-num {
  color: var(--accent);
  font-size: 1.2rem;
  font-weight: 700;
}
.tf-node.is-active .tf-node-title { color: var(--text); }
.tf-node.is-active .tf-node-sub { color: var(--text-2); }
.tf-node.is-active .tf-node-icon {
  border-color: var(--accent);
  background: var(--accent-18);
  color: var(--accent);
}
.tf-node.is-active .tf-node-thumb { border-color: var(--accent-18); }
.tf-node.is-active .tf-node-thumb img { opacity: 1; }
/* Verbindung zum Detailpanel: kleiner Zeiger an der Unterkante */
.tf-node.is-active::after {
  content: "";
  position: absolute;
  left: 50%; bottom: -1px;
  width: 12px; height: 12px;
  margin-left: -6px;
  border-left: 1px solid var(--accent-35);
  border-top: 1px solid var(--accent-35);
  background: var(--card);
  transform: translateY(50%) rotate(45deg);
  z-index: 2;
}

/* --- Detailpanel --------------------------------------------------------- */
.tf-detail { margin-top: clamp(22px, 2.2vw, 34px); }
.tf-pane {
  display: grid;
  grid-template-columns: minmax(0, .72fr) minmax(0, 1.3fr);
  align-items: start;
  gap: clamp(24px, 2.8vw, 48px);
  padding: clamp(22px, 2.6vw, 40px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--card);
}
/* Ohne JavaScript stehen alle Panels untereinander. */
.tf-pane:not([hidden]) + .tf-pane:not([hidden]) { margin-top: 18px; }
.tf-pane--proof { grid-template-columns: minmax(0, .72fr) minmax(0, 1.22fr) minmax(0, .55fr); }
/* Der Bildrahmen uebernimmt das Seitenverhaeltnis der Quelldateien (4:5).
   Dadurch zeigt das Detailbild das vollstaendige Motiv — kein nennenswerter
   Beschnitt, keine Verzerrung, kein Hintergrund durch falsche Skalierung. */
.tf-pane-media {
  align-self: start;
  /* ohne Reset behaelt <figure> die 40px Standardraender des Browsers */
  margin: 0;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--panel);
}
.tf-pane-media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.tf-pane-copy h3 {
  font-size: clamp(1.45rem, 1.85vw, 2.05rem);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.tf-badge {
  display: inline-block;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
}
.tf-pane-copy > p:not(.tf-badge) {
  margin-top: 18px;
  max-width: 62ch;
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--text-2);
}
.tf-tasks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 28px;
  margin-top: clamp(26px, 2.4vw, 34px);
}
.tf-tasks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text-2);
}
.tf-tasks .icon { margin-top: 4px; color: var(--accent); flex: none; }

/* --- Eingesetzte Tools ---------------------------------------------------
   Die Logo-Dateien liegen als 1000er-Quadrate mit viel transparentem Rand
   vor. Damit alle Marken dieselbe optische Hoehe bekommen, wird pro Logo der
   gemessene Inhaltsrahmen (--tl-x/--tl-y/--tl-w/--tl-h als Anteil der
   Bilddatei) freigestellt: das Bild wird gleichmaessig skaliert (keine
   Verzerrung) und im Rahmen verschoben. --tl-s korrigiert nur das optische
   Gewicht einzelner Marken (Icon-Block vs. schlanke Wortmarke).
   ---------------------------------------------------------------------- */
.tf-tools {
  margin-top: clamp(28px, 2.6vw, 38px);
  padding-top: clamp(20px, 1.8vw, 26px);
  border-top: 1px solid var(--border-soft);
}
.tf-tools-label {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
}
.tf-tools-row {
  --tf-tool-h: clamp(20px, 1.5vw, 26px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px clamp(26px, 2.6vw, 40px);
  margin-top: 18px;
}
.tf-tools-row li { display: flex; align-items: center; }
.tf-tool {
  --tl-x: 0; --tl-y: 0; --tl-w: 1; --tl-h: 1; --tl-ar: 1; --tl-s: 1;
  --tl-canvas-h: calc(var(--tf-tool-h) * var(--tl-s) / var(--tl-h));
  position: relative;
  display: block;
  overflow: hidden;
  height: calc(var(--tf-tool-h) * var(--tl-s));
  width: calc(var(--tl-canvas-h) * var(--tl-ar) * var(--tl-w));
  opacity: .92;
  transition: opacity var(--dur) var(--ease);
}
.tf-tool img {
  position: absolute;
  max-width: none;
  height: var(--tl-canvas-h);
  width: calc(var(--tl-canvas-h) * var(--tl-ar));
  left: calc(-1 * var(--tl-x) * var(--tl-canvas-h) * var(--tl-ar));
  top: calc(-1 * var(--tl-y) * var(--tl-canvas-h));
}
.tf-tools-row:hover .tf-tool { opacity: 1; }

/* Gemessene Inhaltsrahmen der lokalen Logo-Dateien (assets/logos/). */
.tf-tool--shopify    { --tl-x: .092; --tl-y: .400; --tl-w: .791; --tl-h: .228; --tl-s: 1;    }
.tf-tool--meta       { --tl-x: .097; --tl-y: .419; --tl-w: .793; --tl-h: .162; --tl-s: .92;  }
.tf-tool--metaads    { --tl-x: .242; --tl-y: .353; --tl-w: .505; --tl-h: .340; --tl-ar: 3.3333; --tl-s: .92; }
.tf-tool--figma      { --tl-x: .134; --tl-y: .402; --tl-w: .732; --tl-h: .204; --tl-s: 1;    }
.tf-tool--ga         { --tl-x: .100; --tl-y: .363; --tl-w: .800; --tl-h: .275; --tl-s: 1.16; }
.tf-tool--ps         { --tl-x: .114; --tl-y: .386; --tl-w: .772; --tl-h: .230; --tl-s: 1.16; }
.tf-tool--canva      { --tl-x: .172; --tl-y: .394; --tl-w: .656; --tl-h: .213; --tl-s: 1;    }
.tf-tool--gemini     { --tl-x: .087; --tl-y: .408; --tl-w: .813; --tl-h: .184; --tl-s: .96;  }
/* reines Icon ohne Wortmarke — braucht mehr Hoehe fuer gleiches optisches Gewicht */
.tf-tool--dsvinci    { --tl-x: .320; --tl-y: .321; --tl-w: .360; --tl-h: .360; --tl-s: 1.45; }
.tf-tool--kling      { --tl-x: .139; --tl-y: .402; --tl-w: .723; --tl-h: .197; --tl-s: 1;    }
.tf-tool--higgsfield { --tl-x: .069; --tl-y: .382; --tl-w: .862; --tl-h: .237; --tl-s: .86;  }
.tf-tool--chatgpt    { --tl-x: .102; --tl-y: .381; --tl-w: .796; --tl-h: .238; --tl-s: .98;  }
.tf-tool--claude     { --tl-x: .081; --tl-y: .410; --tl-w: .839; --tl-h: .180; --tl-s: .94;  }

/* Nachweisspalte — ausschliesslich gemessene Awareness- und Traffic-Werte */
.tf-pane-proof {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-left: clamp(0px, 1.4vw, 22px);
  border-left: 1px solid var(--border-soft);
}
.tf-proof b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.9vw, 2.1rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.tf-proof span {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-caption);
  color: var(--text-3);
}
.tf-proof-note {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border-soft);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-3);
}

/* Nachweis-Screenshot ueber die volle Panelbreite */
.tf-evidence {
  grid-column: 1 / -1;
  margin: 4px 0 0;
  padding-top: clamp(18px, 1.8vw, 26px);
  border-top: 1px solid var(--border-soft);
}
.tf-evidence img {
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: #fff;
}
.tf-evidence figcaption {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-3);
}

.tf-closing {
  max-width: 88ch;
  margin: clamp(24px, 2.6vw, 40px) auto 0;
  font-size: var(--fs-small);
  color: var(--text-3);
  text-align: center;
}

.check-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 20px;
}
.check-list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-caption);
  color: var(--text-2);
}
.check-list .icon { margin-top: 3px; color: var(--accent); }
.check-list--two { margin-top: 24px; }

/* Laptop-Rahmen um den echten Screenshot */
/* ohne Reset behaelt <figure> die 40px Standardraender des Browsers und das
   Mockup sitzt schmaler und eingerueckt in seiner Spalte */
.tf-device { margin: 0; }
.tf-device figcaption {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-3);
  text-align: center;
}
/* Die Bilddatei ist bereits ein vollstaendiges Laptop-Rendering mit eigenem,
   nahezu schwarzem Hintergrund. Der frueher hier definierte CSS-Rahmen
   (Blende #23262E, Kontur #24272F, Sockelleiste #2A2D36) lag als zweites
   Gehaeuse darum herum — genau das war der graue Rand. Er entfaellt; das
   Mockup geht damit ohne Kante in die Sektionsflaeche ueber.
   1600x1000 entspricht exakt 16/10 — kein Beschnitt, keine Verzerrung. */
.device-screen img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  border-radius: var(--radius-md);
}
/* Sockelleiste war Teil des CSS-Gehaeuses — das Bild bringt seine eigene mit. */
.device-base { display: none; }

.phase-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-sm);
}
.phase {
  display: flex;
  flex-direction: column;
  gap: 8px;
  height: 100%;
  padding: 22px 20px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.phase:hover { transform: translateY(-4px); border-color: var(--accent-18); }
.phase-num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
}
.phase h3 { font-size: var(--fs-small); }
.phase p { font-size: var(--fs-caption); line-height: 1.45; color: var(--text-3); }

/* Zeitachse mit Punkten unterhalb der Phasenkarten */
.phase-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 26px;
}
.phase-track::before {
  content: "";
  position: absolute;
  top: 50%; left: 12%; right: 12%;
  height: 1px;
  background: repeating-linear-gradient(to right, var(--accent-35) 0 6px, transparent 6px 12px);
}
.phase-track span {
  position: relative;
  justify-self: center;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(233, 152, 47, .16);
}


/* ---------------------------------------------------------------------------
   15 · Creative Engine — Nutzen, Zielgruppen, Workflow, Entwicklungsstand
   Referenz: SOLL_CREATIVE_ENGINE_MONITOR.png
   ------------------------------------------------------------------------ */
.ce-hero {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: clamp(24px, 2.6vw, 46px);
  align-items: center;
  margin-bottom: clamp(34px, 3.6vw, 62px);
}

.ce-copy .kicker { display: flex; }

/* zweites, ruhigeres Badge unter dem Status-Badge */
.ce-badge {
  /* eigene Zeile — die beiden Badges stehen wie in der Referenz untereinander */
  display: block;
  width: fit-content;
  margin-bottom: 24px;
  padding: 7px 15px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Der Monitor ist ein Vollbild-Render auf dunklem Grund. Eine weiche Maske an
   den Kanten laesst ihn in den Seitenhintergrund uebergehen, statt als
   Rechteck zu stehen. Das Bild selbst bleibt unbeschnitten. */
.ce-monitor {
  position: relative;
  margin-right: calc(var(--gutter) * -1);
}
.ce-monitor img {
  width: 100%;
  height: auto;
  mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%),
              linear-gradient(to bottom, transparent 0%, #000 7%, #000 74%, transparent 99%);
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 100%),
                      linear-gradient(to bottom, transparent 0%, #000 7%, #000 74%, transparent 99%);
  mask-composite: intersect;
  -webkit-mask-composite: source-in;
}

/* Abschnittslabel in Mono/Amber wie in der Referenz */
.ce-label {
  margin-bottom: 16px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Nutzen links, Zielgruppen rechts */
.ce-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: clamp(24px, 2.4vw, 40px);
  margin-bottom: clamp(30px, 3.2vw, 52px);
}
.ce-benefits {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
}
.ce-audience {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1vw, 16px);
}
.ce-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: clamp(16px, 1.3vw, 22px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.ce-card:hover { transform: translateY(-3px); border-color: var(--accent-18); }
.ce-card-icon {
  display: block;
  margin-bottom: 14px;
  color: var(--accent);
}
.ce-card-icon .icon { width: 24px; height: 24px; stroke-width: 1.5; }
.ce-card h3 {
  /* zwei Zeilen Mindesthoehe: die Beschreibungen starten dadurch in jeder
     Kartenreihe auf derselben Linie */
  min-height: 2.4em;
  font-size: var(--fs-small);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 8px;
}
.ce-card p {
  font-size: var(--fs-caption);
  line-height: 1.5;
  color: var(--text-3);
}

/* Schematischer Produktionsablauf */
.ce-flow-block { margin-bottom: clamp(26px, 2.8vw, 44px); }
.ce-flow {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  align-items: start;
  gap: clamp(4px, .6vw, 10px);
}
.ce-flow-step {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
  text-align: center;
}
/* Pfeil zum naechsten Schritt */
.ce-flow-step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: calc(var(--ce-flow-size, 62px) / 2 - 6px);
  left: calc(50% + var(--ce-flow-size, 62px) / 2);
  right: calc(-50% + var(--ce-flow-size, 62px) / 2);
  height: 12px;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 12' fill='none' stroke='%23E9982F' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 6h25M22.5 1.5 27 6l-4.5 4.5'/%3E%3C/svg%3E");
  opacity: .8;
}
.ce-flow-icon {
  display: grid;
  place-items: center;
  width: var(--ce-flow-size, 62px);
  height: var(--ce-flow-size, 62px);
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--card);
  color: var(--accent);
}
.ce-flow-icon .icon { width: 42%; height: 42%; stroke-width: 1.5; }
.ce-flow-name {
  font-family: var(--font-display);
  font-size: clamp(.78rem, .85vw, .95rem);
  font-weight: 600;
  line-height: 1.25;
  hyphens: auto;
}

/* Entwicklungsstand */
.ce-status { padding: clamp(20px, 2vw, 32px); }
.ce-status-kicker { margin-bottom: 20px; }
.ce-status-grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 2.3fr) auto;
  align-items: center;
  gap: clamp(18px, 2vw, 34px);
}
.ce-status-id { display: flex; align-items: center; gap: 16px; }
.ce-status-mark {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border: 1px solid var(--accent-18);
  border-radius: 50%;
  background: var(--accent-10);
  color: var(--accent);
}
.ce-status-id h3 { font-size: var(--fs-h3); margin-bottom: 6px; }
.ce-status-id p { font-size: var(--fs-caption); line-height: 1.5; color: var(--text-3); }

.ce-roadmap {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px clamp(4px, .5vw, 10px);
  padding-left: clamp(10px, 1.6vw, 28px);
  border-left: 1px solid var(--border-soft);
}
.ce-milestone {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-align: center;
}
/* Verbindungslinie zwischen den Meilensteinen */
.ce-milestone:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 13px;
  left: calc(50% + 16px);
  right: calc(-50% + 16px);
  height: 1px;
  background: var(--border-soft);
}
.ce-milestone-dot {
  position: relative;
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1.5px solid var(--border);
  border-radius: 50%;
  color: transparent;
}
.ce-milestone-dot .icon { width: 13px; height: 13px; stroke-width: 2.4; }
.ce-milestone.is-done .ce-milestone-dot {
  border-color: var(--success);
  background: rgba(54, 194, 117, .14);
  color: var(--success);
}
.ce-milestone.is-doing .ce-milestone-dot { border-color: var(--accent); }
/* halb gefuellter Punkt = in Arbeit */
.ce-milestone.is-doing .ce-milestone-dot::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  background: linear-gradient(to right, var(--accent) 0 50%, transparent 50%);
}
.ce-milestone.is-planned .ce-milestone-dot { border-style: dashed; border-color: var(--border); }
.ce-milestone-name {
  /* zwei Zeilen Mindesthoehe, damit die Statuszeilen auf einer Linie sitzen */
  min-height: 2.5em;
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.25;
  hyphens: auto;
}
.ce-milestone-state {
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-3);
}
.ce-milestone.is-done .ce-milestone-state { color: var(--success); }
.ce-milestone.is-doing .ce-milestone-state { color: var(--accent); }

.ce-progress {
  min-width: 130px;
  padding: 16px 22px;
  border: 1px solid var(--accent-18);
  border-radius: var(--radius-lg);
  background: var(--accent-10);
  text-align: center;
}
.ce-progress b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.7rem, 2.2vw, 2.3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--accent);
}
.ce-progress span {
  display: block;
  margin-top: 6px;
  font-size: var(--fs-caption);
  color: var(--text-3);
}

.ce-status-note {
  max-width: 80ch;
  margin: clamp(16px, 1.6vw, 24px) auto 0;
  font-size: var(--fs-caption);
  color: var(--text-3);
  text-align: center;
}

.status-line {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  padding: 7px 15px;
  border: 1px solid var(--accent-18);
  border-radius: var(--radius-md);
  background: var(--accent-10);
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
}
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

.ce-copy h2 { font-size: clamp(2.1rem, 3.7vw, 3.6rem); letter-spacing: -.025em; }
.ce-lede {
  margin: 16px 0 22px;
  font-size: clamp(1.1rem, 1.45vw, 1.55rem);
  font-weight: 500;
  line-height: 1.35;
  color: var(--text-2);
}
.ce-text {
  max-width: 60ch;
  margin-top: 14px;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-3);
}
.ce-proof {
  max-width: 62ch;
  margin-top: 24px;
  font-size: var(--fs-caption);
  color: var(--text-3);
}
.ce-actions { margin-top: 26px; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tag {
  padding: 6px 13px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-pill);
  background: var(--card);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .05em;
  color: var(--text-3);
}

.ce-media { display: flex; flex-direction: column; gap: var(--gap-sm); }
.shot {
  position: relative;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--card);
  overflow: hidden;
}
.shot img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: top center;
}
.shot--wide img { aspect-ratio: 16 / 7; }
/* Bildunterschrift im Mockup direkt auf dem Screenshot */
.shot figcaption {
  position: absolute;
  left: 18px; bottom: 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--text-2);
  text-shadow: 0 2px 12px rgba(0, 0, 0, .9);
}
.shot::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(to top, rgba(8, 9, 11, .85), transparent);
  pointer-events: none;
}

.feature-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--gap-sm);
  margin-top: var(--gap-lg);
}
.feature {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 22px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  background: var(--card);
  transition: transform var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature:hover { transform: translateY(-4px); border-color: var(--accent-18); }
.feature-tile {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  flex: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--card-2);
  color: var(--accent);
}
.feature h3 { font-size: var(--fs-small); margin-bottom: 8px; }
.feature p { font-size: var(--fs-caption); line-height: 1.45; color: var(--text-3); }


/* ---------------------------------------------------------------------------
   16 · Kontakt — kompakte Leiste (Mockup 06)
   ------------------------------------------------------------------------ */
.cta-section { padding-bottom: clamp(56px, 6vw, 96px); }

.cta-bar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 2.4vw, 40px);
  padding: clamp(26px, 3vw, 44px) clamp(24px, 3vw, 48px);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(70% 140% at 12% 50%, rgba(233, 152, 47, .09) 0%, transparent 60%),
    var(--panel);
  box-shadow: var(--shadow-card);
}

.cta-portrait {
  width: clamp(88px, 8vw, 130px);
  aspect-ratio: 1 / 1;
  border: 1px solid var(--border);
  border-radius: 50%;
  object-fit: cover;
  object-position: center 22%;
}

.cta-copy h2 { font-size: clamp(1.35rem, 1.9vw, 2.05rem); }
.cta-copy p {
  max-width: 58ch;
  margin-top: 10px;
  font-size: var(--fs-small);
  color: var(--text-3);
}

.cta-actions { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }

.contact-list { display: flex; flex-wrap: wrap; gap: 10px 22px; }
.contact-list li {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: var(--fs-caption);
  color: var(--text-3);
}
.contact-dot {
  display: grid;
  place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--accent-18);
  border-radius: 50%;
  background: var(--accent-10);
  color: var(--accent);
}
.contact-list a { transition: color var(--dur) var(--ease); }
.contact-list a:hover { color: var(--accent); }


/* ---------------------------------------------------------------------------
   17 · Footer (Mockup 06)
   ------------------------------------------------------------------------ */
.site-footer {
  border-top: 1px solid var(--divider);
  padding-block: 26px;
  background: var(--bg-alt);
}
.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 28px;
}
.brand--footer { gap: 10px; }
.brand--footer .brand-mark { font-size: 22px; }
.footer-name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--text-2);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 2px 14px; }
.footer-nav a {
  display: inline-block;
  padding: 8px 6px;                /* bequeme Touch-Flaeche */
  font-size: var(--fs-caption);
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.footer-nav a:hover { color: var(--accent); }
.footer-legal {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .04em;
  color: var(--text-3);
}


/* ---------------------------------------------------------------------------
   18 · Scroll-Reveal (ohne JavaScript bleibt alles sichtbar)
   ------------------------------------------------------------------------ */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }


/* ---------------------------------------------------------------------------
   19 · Responsive — grosse Tablets / kleine Notebooks
   ------------------------------------------------------------------------ */
@media (max-width: 1280px) {
  .feature-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Detailpanel: Nachweisspalte wandert unter Bild und Text */
  .tf-pane--proof { grid-template-columns: minmax(0, .72fr) minmax(0, 1.3fr); }
  .tf-pane-proof {
    grid-column: 1 / -1;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px clamp(24px, 4vw, 56px);
    padding: 18px 0 0;
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }
  .tf-proof-note {
    margin: 0 0 0 auto;
    padding-top: 0;
    border-top: 0;
    text-align: right;
  }
}

/* Fuenf Kennzahlen nebeneinander brauchen Platz fuer den laengsten Wert
   (106.911). Darunter sauberer Umbruch auf 3 + 2 — Kartenstil, Abstaende und
   Typografie bleiben unveraendert. */
@media (max-width: 1400px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1080px) {
  .hero { min-height: 0; }
  .hero-media {
    position: relative;
    /* V2: schmaler und flacher als zuvor (560px / 5:4) — das Portrait bleibt
       praesent, dominiert die Textseite aber nicht mehr. */
    width: min(480px, 100%);
    margin: 28px auto 0;
    inset: auto;
  }
  .hero-media img {
    aspect-ratio: 16 / 10;
    object-position: 64% 16%;
    mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 72%, transparent 100%);
  }
  .hero-inner { order: -1; }
  .hero { flex-direction: column; }
  .hero-copy { max-width: 100%; }

  /* Tablet: sauberer Umbruch auf genau zwei Reihen (4 + 4) */
  .logo-row {
    --logo-h: clamp(20px, 2.6vw, 30px);
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 30px) clamp(16px, 2.6vw, 34px);
  }
  .skill-list   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid     { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .video-grid   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* Creative Engine: Kopf gestapelt, Nutzen und Zielgruppen untereinander */
  .ce-hero { grid-template-columns: minmax(0, 1fr); }
  .ce-monitor { order: -1; margin-inline: calc(var(--gutter) * -1); }
  .ce-monitor img {
    mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
    -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 99%);
  }
  .ce-cols { grid-template-columns: minmax(0, 1fr); }
  .ce-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Ablauf in zwei Reihen, Roadmap unter der Projektzeile */
  .ce-flow { grid-template-columns: repeat(5, minmax(0, 1fr)); row-gap: clamp(18px, 2.4vw, 28px); }
  .ce-flow-step:nth-child(5)::after { display: none; }
  .ce-status-grid { grid-template-columns: minmax(0, 1fr) auto; }
  .ce-roadmap {
    grid-column: 1 / -1;
    padding-left: 0;
    padding-top: 22px;
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }

  /* Timeframe: Kopf gestapelt, Projektbereiche als 3 x 2 Raster */
  .tf-head { grid-template-columns: minmax(0, 1fr); }
  .tf-journey {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: clamp(14px, 2vw, 22px);
  }
  .tf-journey::before { display: none; }
  .tf-node { border-color: var(--border-soft); }
  .tf-node.is-active { border-color: var(--accent-35); }

  /* Tablet: Detailpanel einspaltig, Logos duerfen umbrechen.
     Das Hochformat wird in der Breite begrenzt, sonst wird das Panel zu hoch. */
  .tf-pane { grid-template-columns: minmax(0, 1fr); }
  .tf-pane-media { max-width: 440px; }
  .tf-tools-row { gap: 16px clamp(24px, 4vw, 36px); }

  /* Tablet: vier Stationen oben, vier unten */
  .flow { --flow-cols: 4; row-gap: clamp(30px, 4vw, 46px); }
  .flow-step:nth-child(4n)::after { display: none; }
  .flow-step:nth-child(4n + 1)::before { display: none; }
  .flow-step:nth-child(n + 5)::before { top: 0; }

  .cta-bar { grid-template-columns: auto minmax(0, 1fr); }
  .cta-actions { grid-column: 1 / -1; }
}

/* Kompetenzkarten brauchen frueher Platz als das uebrige Raster: unterhalb
   von 1200px wird die Textspalte in der Dreier-Reihe zu schmal. Ab hier
   2 Karten oben, die dritte darunter ueber die volle Breite. */
/* Ab hier 2 Karten oben, die dritte darunter ueber die volle Breite. */
@media (max-width: 1200px) {
  .pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pillars > .pillar:last-child {
    grid-column: 1 / -1;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
  .pillar { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
  .pillar h3 { font-size: clamp(1rem, 1.6vw, 1.2rem); }
  .pillar-media { min-height: clamp(150px, 18vw, 210px); }
}

/* EDITORIAL POLISH PASS · mobile Navigation.
   Kein Card-Panel mehr: eine ruhige, randlose Flaeche unter der Kopfzeile,
   nur durch Haarlinien vom Hero getrennt. */
@media (max-width: 900px) {
  .nav--lead { display: none; }
  .nav-toggle { display: inline-flex; }

  /* Bezugsrahmen ist die fixierte .site-header, NICHT das Raster:
     ein absolut gesetztes Kind eines Rasters loest left/right gegen seine
     Rasterspalte auf und faellt auf shrink-to-fit zurueck. Deshalb traegt
     .header-inner hier bewusst kein position:relative. */
  .nav[data-open="true"] {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    /* Breite explizit statt ueber left+right: ein absolut gesetztes Kind
       eines Rasters faellt bei width:auto auf shrink-to-fit zurueck und
       waere dann nur so breit wie sein laengster Eintrag. */
    width: 100%;
    padding: 6px var(--gutter) 20px;
    border-top: 1px solid var(--divider);
    border-bottom: 1px solid var(--divider);
    background: rgba(8, 9, 11, .97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .nav[data-open="true"] .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav[data-open="true"] .nav-links a {
    display: block;            /* volle Zeilenbreite als Tippflaeche */
    padding: 15px 0;
    font-size: .875rem;
    letter-spacing: .18em;
  }
  .nav[data-open="true"] .nav-links li + li a { border-top: 1px solid var(--border-soft); }
}


/* ---------------------------------------------------------------------------
   20 · Responsive — Mobile
   ------------------------------------------------------------------------ */
@media (max-width: 720px) {
  :root { --header-h: 70px; }

  .hero h1 { letter-spacing: -.015em; }
  .hero-media { margin-top: 26px; }

  /* Mobile: ruhiges 2er-Raster, alle Logos zentriert und gleich dimensioniert */
  .logo-row {
    --logo-h: clamp(19px, 5.4vw, 26px);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(18px, 5vw, 26px) clamp(14px, 4vw, 24px);
  }

  /* Mobile: Karten untereinander, Text oben, Illustration darunter zentriert */
  .pillars { grid-template-columns: minmax(0, 1fr); }
  .pillars > .pillar:last-child { grid-column: auto; }
  .pillar,
  .pillars > .pillar:last-child {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
  .pillar-copy .link-arrow { margin-top: 0; }
  .pillar-media {
    min-height: 0;
    aspect-ratio: 1 / 1;
    width: min(320px, 82%);
    margin: 0 auto calc(var(--pillar-pad) * -.9);
  }
  /* ohne Versatz — im quadratischen Rahmen fuellt das Motiv die Flaeche
     bereits vollstaendig aus */
  .pillar-media img {
    object-position: center;
    transform: scale(var(--iso-k, 1));
  }
  .pillar h3 { font-size: clamp(1.05rem, 4.6vw, 1.25rem); }
  .pillar p { font-size: .875rem; line-height: 1.6; }

  .skill-list { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid,
  .video-grid,
  .feature-row,
  .phase-row   { grid-template-columns: minmax(0, 1fr); }
  .check-list  { grid-template-columns: minmax(0, 1fr); }

  /* Creative Engine mobil */
  .ce-benefits,
  .ce-audience { grid-template-columns: minmax(0, 1fr); }
  .ce-flow {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    row-gap: 22px;
  }
  .ce-flow-step::after { display: none !important; }
  .ce-status-grid { grid-template-columns: minmax(0, 1fr); }
  .ce-progress { justify-self: start; }
  .ce-roadmap {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 14px;
  }
  .ce-milestone {
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    align-items: center;
    column-gap: 12px;
    row-gap: 2px;
    text-align: left;
  }
  .ce-milestone::after { display: none; }
  .ce-milestone-dot   { grid-column: 1; grid-row: 1 / span 2; }
  .ce-milestone-name  { grid-column: 2; grid-row: 1; }
  .ce-milestone-state { grid-column: 2; grid-row: 2; }

  /* Timeframe mobil: Projektbereiche als kompakte vertikale Liste,
     Detailpanel einspaltig */
  .tf-journey {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }
  .tf-node {
    display: grid;
    grid-template-columns: 28px auto minmax(0, 1fr);
    align-items: center;
    column-gap: 14px;
    row-gap: 2px;
    padding: 12px 14px;
    text-align: left;
  }
  .tf-node-num  { grid-column: 1; grid-row: 1 / span 2; }
  .tf-node-icon { grid-column: 2; grid-row: 1 / span 2; margin: 0; }
  .tf-node-title { grid-column: 3; grid-row: 1; font-size: 1rem; }
  .tf-node-sub   { grid-column: 3; grid-row: 2; margin-bottom: 0; }
  .tf-node-thumb { display: none; }
  .tf-node.is-active::after { display: none; }

  .tf-pane,
  .tf-pane--proof { grid-template-columns: minmax(0, 1fr); }
  /* Mobil steht das Bild ueber dem Text und darf die volle Breite nutzen. */
  .tf-pane-media { max-width: none; }
  .tf-pane-copy h3 { font-size: clamp(1.3rem, 5.4vw, 1.6rem); }
  .tf-tasks { grid-template-columns: minmax(0, 1fr); }

  /* Mobil: flexible Logo-Reihe, bricht sauber um und laeuft nicht ueber */
  .tf-tools-row {
    --tf-tool-h: 20px;
    gap: 18px 26px;
  }
  .tf-tool { max-width: 100%; }
  .tf-pane-proof {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .tf-proof-note { margin: 0; text-align: left; }
  .tf-evidence img { min-width: 0; }

  /* Mobil: vertikale Timeline — Kachel links, Nummer/Titel/Text rechts */
  .flow {
    --flow-cols: 1;
    --flow-tile: 54px;
    row-gap: 0;
  }
  .flow-step {
    display: grid;
    grid-template-columns: var(--flow-tile) minmax(0, 1fr);
    column-gap: 16px;
    padding: 0 0 26px;
    text-align: left;
  }
  .flow-step:last-child { padding-bottom: 0; }
  .flow-step::after { display: none; }
  /* Verbindungslinie statt Trennlinie */
  .flow-step:not(:last-child)::before {
    content: "";
    display: block;
    left: calc(var(--flow-tile) / 2);
    top: calc(var(--flow-tile) + 10px);
    bottom: 10px;
    width: 1px;
    background: linear-gradient(to bottom, var(--border), var(--border-soft));
  }
  .flow-step:last-child::before { content: none; }
  .flow-num {
    grid-column: 2; grid-row: 1;
    font-size: 1rem;
    margin-bottom: 6px;
  }
  .flow-tile { grid-column: 1; grid-row: 1 / span 3; margin: 0; }
  .flow-step h3 {
    grid-column: 2; grid-row: 2;
    align-items: flex-start;
    min-height: 0;
    margin-bottom: 10px;
    font-size: 1.05rem;
  }
  .flow-step h3::after { margin: 10px 0 0; }
  .flow-step p { grid-column: 2; grid-row: 3; font-size: var(--fs-small); }

  .cta-bar {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }
  .cta-copy p { margin-inline: auto; }
  .cta-actions { align-items: center; }
  .cta-actions .btn-row,
  .contact-list { justify-content: center; }
  .hero-actions .btn,
  .cta-actions .btn { flex: 1 1 100%; }

  .footer-inner { flex-direction: column; align-items: flex-start; }

  .lightbox-close { top: auto; bottom: -58px; right: 50%; transform: translateX(50%); }
}

@media (max-width: 420px) {
  .logo-row { --logo-h: 20px; gap: 18px 14px; }
}


/* ---------------------------------------------------------------------------
   20b · Mobile Polish
   Ausschliesslich unterhalb von 768px. Verdichtet den vertikalen Rhythmus und
   ordnet das Hero neu — Layout, Inhalte und Desktop bleiben unveraendert.
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
  /* Sektionsabstaende mobil straffen (nur in dieser Query wirksam) */
  :root { --section-y: clamp(38px, 9vw, 54px); }

  /* --- Hero: Split-Komposition ------------------------------------------
     Reihenfolge mobil: Badge · [Headline links | Portrait rechts] ·
     Einleitungstext · CTAs · Meta.
     .hero ist ab 1080px bereits eine Flex-Spalte. display:contents hebt die
     beiden reinen Layout-Wrapper (.hero-inner/.hero-copy) auf, damit alle
     Hero-Bausteine zu direkten Rasterkindern von .hero werden. Headline und
     Portrait teilen sich dadurch dieselbe Rasterzeile — eine gemeinsame
     Komposition ohne zusaetzliches Markup und ohne Duplikate im DOM.
     Der Aussenabstand der .shell wandert dabei auf .hero. */
  .hero {
    display: grid;
    /* V2: Portraitspalte etwas schmaler — die Headline bekommt mehr Raum. */
    grid-template-columns: minmax(0, 1fr) minmax(100px, .66fr);
    column-gap: 0;
    align-content: start;
    align-items: end;
    padding-inline: var(--gutter);
    padding-top: calc(var(--header-h) + 14px);
    padding-bottom: 26px;
  }
  .hero-inner,
  .hero-copy { display: contents; }

  .hero .kicker--dot { grid-column: 1 / -1; grid-row: 1; margin-bottom: 6px; }
  .hero h1           { grid-column: 1;      grid-row: 2; }
  .hero-media        { grid-column: 2;      grid-row: 2; }
  .hero-sub          { grid-column: 1 / -1; grid-row: 3; }
  .hero-actions      { grid-column: 1 / -1; grid-row: 4; }
  .hero-meta         { grid-column: 1 / -1; grid-row: 5; }

  /* Die festen Umbrueche bleiben mobil aktiv. Die V2-Headline ergibt in der
     schmalen Textspalte vier Zeilen:
     AI WORKFLOW & / CREATIVE / AUTOMATION / SPECIALIST — „CREATIVE
     AUTOMATION" bricht dabei natuerlich um.
     Der negative rechte Rand laesst die Zeilen bis in den bereits weich
     ausgeblendeten linken Rand des Portraits laufen — der Text bleibt frei,
     das Portrait behaelt seine Breite. */
  .hero h1 {
    font-size: clamp(1.85rem, 8.4vw, 2.7rem);
    line-height: 1.0;
    letter-spacing: -.022em;
    margin: 8px 0 0;
    margin-right: -22px;
    align-self: start;
  }
  .hero-sub {
    max-width: 38ch;
    margin-top: 18px;
    font-size: 1rem;
    line-height: 1.6;
  }

  /* CTAs: volle Breite, kompakter Abstand, Touch-Hoehe bleibt bei 46px */
  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    margin-top: 18px;
  }
  .hero-actions .btn { width: 100%; }

  /* Portrait: rechte Haelfte der Split-Zeile, randlos bis zur Viewportkante,
     unten buendig mit der Headline. Weicher Verlauf nach links und nach
     unten — keine harte Bildkante, kein eigener Bildblock. */
  .hero-media {
    position: relative;
    inset: auto;
    width: auto;
    align-self: stretch;
    /* V2: flacher als zuvor (196–268px) — weniger Bildgewicht neben der
       Headline, die Split-Komposition selbst bleibt unveraendert. */
    min-height: clamp(168px, 46vw, 232px);
    margin: 0 calc(var(--gutter) * -1) 0 0;
  }
  .hero-media img {
    aspect-ratio: auto;
    height: 100%;
    object-position: 60% 4%;
    mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 26%, #000 62%),
      linear-gradient(to bottom, transparent 0%, #000 7%, #000 74%, transparent 100%);
    -webkit-mask-image:
      linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 26%, #000 62%),
      linear-gradient(to bottom, transparent 0%, #000 7%, #000 74%, transparent 100%);
    mask-composite: intersect;
    -webkit-mask-composite: source-in;
  }

  .hero-meta {
    margin-top: 18px;
    padding-top: 16px;
    gap: 6px 18px;
  }

  /* --- Kompetenzkarten verdichten --- */
  .pillars { gap: 14px; }
  .pillar { --pillar-pad: 16px; gap: 12px; }
  .pillar-media { width: min(230px, 60%); }
  .pillar h3 { font-size: clamp(1rem, 4.4vw, 1.2rem); }
  .pillar p { font-size: .86rem; line-height: 1.55; }
  .pillar .check-list { gap: 7px 16px; }

  /* --- KPI: 2er-Raster, fuenfte Karte ueber volle Breite --- */
  .kpi-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .kpi-grid > .kpi-card:nth-child(5) { grid-column: 1 / -1; }
  .kpi-card { padding: 18px 16px; gap: 4px; }
  .kpi-card .icon { margin-bottom: 8px; }
  .kpi-value { font-size: clamp(1.55rem, 7.6vw, 2.05rem); }

  /* --- Videokarten als Swipe-Reihe (nur innerhalb der Sektion scrollend) --- */
  .video-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    margin-inline: calc(var(--gutter) * -1);
    padding: 2px var(--gutter) 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter);
    -webkit-overflow-scrolling: touch;
  }
  .video-card {
    flex: 0 0 76%;          /* Anschnitt der naechsten Karte als Swipe-Hinweis */
    scroll-snap-align: start;
  }

  /* --- Workflow: vertikale Timeline -------------------------------------
     Ersetzt das 2x4-Raster. Pro Schritt eine Zeile:
     Nummer · Icon · Titel  —  Beschreibung darunter, buendig zum Titel.
     Kopfzeile und Icon-Kachel sind gleich hoch, dadurch sitzen Nummer,
     Kachel und Titel auf einer optischen Linie und die Verbindungslinie
     kann exakt unterhalb der Kachel ansetzen. Reihenfolge, Inhalte und
     Markup bleiben unveraendert. */
  .flow-panel { padding: 20px 16px 22px; }
  .flow {
    --flow-cols: 1;
    --flow-tile: 46px;
    --flow-num-w: 26px;
    --flow-gap: 10px;
    --flow-step-gap: 24px;
    column-gap: 0;
    row-gap: 0;
  }
  .flow-step {
    display: grid;
    grid-template-columns: var(--flow-num-w) var(--flow-tile) minmax(0, 1fr);
    column-gap: var(--flow-gap);
    align-items: start;
    padding: 0 0 var(--flow-step-gap);
    text-align: left;
  }
  .flow-step:last-child { padding-bottom: 0; }

  /* Desktop-Pfeil bleibt mobil aus (gleiche Spezifitaet, spaeter in der
     Quelle als die Basisregel — kein !important noetig). */
  .flow-step:not(:last-child)::after { display: none; }

  /* Verbindungslinie: setzt unter der Kachel an, laeuft in Kachelmitte bis
     kurz vor die naechste Kachel und kreuzt keinen Text. */
  .flow-step:not(:last-child)::before {
    content: "";
    display: block;
    position: absolute;
    left: calc(var(--flow-num-w) + var(--flow-gap) + var(--flow-tile) / 2);
    top: calc(var(--flow-tile) + 8px);
    bottom: 4px;
    width: 1px;
    background: linear-gradient(to bottom, var(--border), var(--border-soft));
  }
  .flow-step:last-child::before { content: none; }

  .flow-num {
    display: flex;
    align-items: center;
    grid-column: 1; grid-row: 1;
    height: var(--flow-tile);
    margin-bottom: 0;
    font-size: .95rem;
    letter-spacing: .02em;
  }
  .flow-tile { grid-column: 2; grid-row: 1; margin: 0; }
  .flow-step h3 {
    grid-column: 3; grid-row: 1;
    justify-content: center;
    align-items: flex-start;
    min-height: var(--flow-tile);
    margin-bottom: 0;
    font-size: .98rem;
    line-height: 1.28;
    hyphens: manual;          /* nur der gesetzte Trennvorschlag greift */
  }
  .flow-step h3::after { display: none; }   /* ruhigere Zeile */
  .flow-step p {
    grid-column: 3; grid-row: 2;
    margin-top: 1px;
    font-size: .82rem;
    line-height: 1.5;
  }

  /* Abschlusshinweis: ruhiger vom Ablauf getrennt, ohne Leuchtpunkt */
  .flow-note {
    margin-top: 24px;
    padding-top: 20px;
    line-height: 1.55;
  }
  .flow-note::after { display: none; }

  /* --- Timeframe / Creative Engine: nur Abstaende --- */
  .tf-case { padding: 18px; }
  .tf-head { margin-bottom: 26px; }
  .tf-detail { margin-top: 18px; }
  .tf-pane { padding: 18px; gap: 18px; }
  .tf-node { padding: 10px 12px; }
  .ce-panel { padding: 18px; }
  .ce-hero { gap: 22px; }

  /* --- Kontakt --- */
  .cta-bar { gap: 18px; }
  .cta-actions { gap: 12px; }
}

/* Sehr schmale Geraete. Der Workflow ist mobil ohnehin eine einspaltige
   Timeline — der Zeilenabstand bleibt deshalb bei 0, damit die
   Verbindungslinie luekenlos bis zur naechsten Kachel laeuft. */
@media (max-width: 339px) {
  .flow { --flow-cols: 1; row-gap: 0; }
  .video-card { flex-basis: 82%; }
}


/* ---------------------------------------------------------------------------
   21 · Reduced Motion
   ------------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .js [data-reveal] { opacity: 1; transform: none; }
  .btn:hover,
  .pillar:hover,
  .kpi-card:hover,
  .phase:hover,
  .feature:hover,
  .video-card:hover { transform: none; }
  .video-card:hover .video-thumb img { transform: none; }
}


/* ---------------------------------------------------------------------------
   22r · Mixed-Format Portfolio — Responsive
   ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  .video-grid--paired { grid-template-columns: minmax(0, 1fr); }
  .video-grid--solo   { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 420px) {
  .video-card--featured .video-meta h3 { font-size: var(--fs-h3); }
  .video-featured-label { font-size: .75rem; padding: 4px 10px; }
}

/* ============================================================================
   COMMERCIAL REBUILD FROM PROFILE BASE · FULL-WIDTH FILM HERO
   ----------------------------------------------------------------------------
   Ersetzt den Portrait-Hero der Profilseite. Bewusst eine EIGENE Klasse
   (.hero-film statt .hero), damit die Basisregeln des Portrait-Heros nicht
   dagegen kaskadieren — der alte Hero bleibt im Stylesheet unangetastet.

   Typografie, Farben, Buttons und Kicker kommen unveraendert aus dem
   bestehenden Designsystem (--fs-hero, --accent, .btn, .kicker). Die visuelle
   DNA bleibt damit identisch; es wechselt nur, WAS im ersten Bildschirm steht.
   ========================================================================== */
.hero-film {
  position: relative;
  width: 100%;
  height: clamp(560px, 92vh, 1040px);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: #000;
  padding-bottom: clamp(38px, 5.4vw, 92px);
}

/* Der Film fuellt die Flaeche immer aus — kein Letterboxing, bewusster Crop. */
.hero-film-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

/* Drei Verlaeufe statt eines Panels: unten fuer die Schrift, links fuer den
   Textblock, oben damit der transparente Header lesbar bleibt. */
.hero-film-veil {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to top,    rgba(8, 9, 11, .94) 0%, rgba(8, 9, 11, .52) 30%, rgba(8, 9, 11, 0) 64%),
    linear-gradient(to right,  rgba(8, 9, 11, .72) 0%, rgba(8, 9, 11, .14) 54%, rgba(8, 9, 11, 0) 76%),
    linear-gradient(to bottom, rgba(8, 9, 11, .60) 0%, rgba(8, 9, 11, 0) 20%);
}

.hero-film-inner { position: relative; z-index: 2; width: 100%; }
.hero-film-copy  { max-width: min(680px, 100%); }

/* Gleiche Setzung wie .hero h1 der Profilseite — identische DNA. */
.hero-film h1 {
  font-size: var(--fs-hero);
  line-height: 1.04;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin: 20px 0 0;
}
.hero-film h1 em { font-style: normal; color: var(--accent); }

.hero-film-sub {
  max-width: 46ch;
  margin: clamp(14px, 1.5vw, 20px) 0 0;
  color: var(--text-2);
  font-size: clamp(1rem, 1.1vw, 1.18rem);
  line-height: 1.55;
}

.hero-film .hero-actions { margin-top: clamp(22px, 2.4vw, 34px); }

/* Mobil: der Film behaelt die volle Ansicht, der Text rueckt an die Bildkante.
   Kein Zusammenschieben des Desktop-Layouts. */
@media (max-width: 767px) {
  .hero-film {
    height: clamp(520px, 88vh, 760px);
    padding-bottom: clamp(30px, 8vw, 48px);
  }
  .hero-film-copy { max-width: 100%; }
  .hero-film-sub  { font-size: 1rem; max-width: 34ch; }
  .hero-film .hero-actions { gap: 10px; }
  /* Beide CTAs muessen sichtbar bleiben, auch bei 390 px. */
  .hero-film .btn { flex: 1 1 auto; justify-content: center; }
}

@media (max-width: 380px) {
  .hero-film .hero-actions { flex-direction: column; align-items: stretch; }
}

/* About: seit dem Commercial Rebuild stehen dort zwei Absaetze statt Absatz +
   Kompetenzliste. Ohne diese Zeile kleben sie aneinander (global gilt p{margin:0}). */
#ueber-mich .section-head p + p { margin-top: .85em; }


/* ============================================================================
   23 · COMMERCIAL EDITORIAL POLISH PASS (2026-08-30)
   ----------------------------------------------------------------------------
   Drei freigegebene Bereiche, sonst nichts:
     A · Display-Typografie (Editorial Serif)
     B · Navigation + DE/EN-Sprachschalter
     C · Film-Lightbox mit Project Specs

   Der Abschnitt steht bewusst am Dateiende: gleiche Spezifitaet schlaegt
   damit die Basisregeln weiter oben, ohne dass irgendwo !important noetig
   waere und ohne dass eine bestehende Regel geloescht werden muss.
   ========================================================================== */


/* --- A · DISPLAY-TYPOGRAFIE ------------------------------------------------
   Fraunces steht ausschliesslich gross. Fliesstext, Navigation, kleine Labels
   und technische Specs bleiben Sans bzw. Mono — genau wie in der Font-Regel.
   "opsz" steuert den Kontrast: 144 = feinste Haarstriche (Hero, Sektionen),
   96 = etwas robuster (Filmtitel), 48 = klein und trotzdem elegant (Wortmarke).
   ------------------------------------------------------------------------ */
h2,
.lb-title,
.wordmark,
.video-meta h3,
.hero-film h1 {
  font-family: var(--font-editorial);
  font-weight: 400;
  font-style: normal;
}

h2 {
  font-variation-settings: "opsz" 72, "wght" 400;
  letter-spacing: -.008em;
  line-height: 1.14;
}

/* Grosse Sektionsueberschriften — die einzigen Stellen, an denen die Serif
   ihre volle Groesse bekommt. Legal-Unterseiten bleiben unberuehrt. */
.section-head h2,
.flow-head h2,
.ce-copy h2,
.cta-copy h2 {
  font-size: clamp(1.85rem, 2.6vw, 3.05rem);
  font-variation-settings: "opsz" 144, "wght" 400;
  letter-spacing: -.014em;
  line-height: 1.08;
}

/* Hero. Kein Versalsatz mehr: eine High-Contrast-Serif in Grossbuchstaben
   kippt schnell ins Modische. Gemischter Satz wirkt ruhiger und teurer. */
.hero-film h1 {
  font-size: clamp(2.05rem, 4.6vw, 4.9rem);
  font-variation-settings: "opsz" 144, "wght" 400;
  text-transform: none;
  letter-spacing: -.016em;
  line-height: 1.02;
  margin: clamp(14px, 1.6vw, 24px) 0 0;
}
.hero-film-copy { max-width: min(900px, 100%); }

/* Filmtitel im Work-Grid. Nur die Schrift wechselt — Karte, Raster und
   Reihenfolge bleiben unveraendert. */
.video-meta h3 {
  font-size: clamp(1.3rem, 1.65vw, 1.9rem);
  font-variation-settings: "opsz" 96, "wght" 400;
  letter-spacing: -.008em;
  line-height: 1.1;
}
.video-card--featured .video-meta h3 {
  font-size: clamp(1.75rem, 2.3vw, 2.65rem);
  font-variation-settings: "opsz" 144, "wght" 400;
}


/* --- B · NAVIGATION -------------------------------------------------------
   Kein Pill, kein CTA-Button, keine Box, kein Schatten, keine Icon-Wand.
   Ueber dem Hero ist die Kopfzeile vollstaendig transparent; der leise
   Hintergrund erscheint erst beim Scrollen (data-scrolled, Abschnitt 7).
   ------------------------------------------------------------------------ */
.site-header[data-scrolled="true"] {
  background: rgba(8, 9, 11, .72);
  border-bottom-color: rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
}

/* Wortmarke.
   letter-spacing haengt als Leerraum RECHTS am letzten Zeichen. Ein gleich
   grosses padding-left gleicht das exakt aus — erst dadurch stehen die
   sichtbaren Buchstaben mittig, nicht nur der Kasten. */
.wordmark {
  --wm-track: .34em;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-left: var(--wm-track);
  font-size: clamp(11px, .82vw, 13px);
  letter-spacing: var(--wm-track);
  font-variation-settings: "opsz" 48, "wght" 400;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
  color: var(--text);
  transition: opacity var(--dur) var(--ease);
}
.wordmark:hover { opacity: .68; }

.nav--lead { justify-self: start; }
.nav--lead,
.nav-tail { display: flex; align-items: center; }
.nav-tail {
  justify-self: end;
  gap: clamp(14px, 1.5vw, 26px);
}

.nav-links { gap: clamp(16px, 1.9vw, 34px); }

.nav-links a,
.nav-tail-link {
  padding: 11px 0;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.nav-links a:hover,
.nav-tail-link:hover { color: var(--text); }

/* Contact steht auf dem Desktop rechts; die Zeile in der linken Liste ist
   nur fuer das mobile Panel da. */
.nav-links-contact { display: none; }

/* Sprachschalter — echte Buttons, tastaturbedienbar, Zustand ueber
   aria-pressed UND sichtbar (Farbe + feine Unterlaengenlinie). */
.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.lang-btn {
  position: relative;
  padding: 11px 0;
  font-family: var(--font-body);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.lang-btn:hover { color: var(--text); }
.lang-btn.is-active { color: var(--text); }
.lang-btn.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: .16em;             /* das nachhaengende Tracking abziehen */
  bottom: calc(50% - .92em);
  height: 1px;
  background: currentColor;
}
.lang-sep {
  font-size: .75rem;
  color: var(--text-3);
  opacity: .45;
}


/* --- C · FILM-LIGHTBOX ----------------------------------------------------
   Desktop: ca. 65 % Film / 35 % Project Information.
   Mobil:   Film oben, Project Information darunter.
   Keine Feature-Cards, keine Kacheln, keine Rahmen um einzelne Felder —
   nur Haarlinien, Schwarzraum und Typo-Hierarchie.
   ------------------------------------------------------------------------ */
.lightbox {
  display: flex;
  place-items: initial;
  padding: clamp(16px, 3vw, 52px);
  background: rgba(4, 5, 6, .965);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* margin:auto statt align-items:center — zentriert, schneidet aber bei
   Ueberlaenge nichts oben ab. */
.lightbox-inner {
  margin: auto;
  width: 100%;
  max-height: none;
  display: grid;
  gap: clamp(22px, 2.8vw, 56px);
  align-items: start;
}

/* Die vh-Grenze haelt den Film auch auf flachen Bildschirmen im Bild:
   Filmhoehe = Breite x 0.65 x 9/16 bzw. Breite x 0.36 x 16/9. */
.lightbox-inner[data-aspect="wide"] {
  max-width: min(1560px, 168vh);
  grid-template-columns: minmax(0, 1.86fr) minmax(0, 1fr);
}
.lightbox-inner[data-aspect="tall"] {
  max-width: min(1040px, 112vh);
  grid-template-columns: minmax(0, .58fr) minmax(0, 1fr);
}

.lightbox-stage { position: relative; width: 100%; }
.lightbox-inner[data-aspect="wide"] .lightbox-stage { aspect-ratio: 16 / 9; }
.lightbox-inner[data-aspect="tall"]  .lightbox-stage { aspect-ratio: 9 / 16; }

.lightbox video,
.lightbox-yt {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 3px;                /* fast eckig — Kinoflaeche, keine App-Karte */
  background: #000;
  box-shadow: var(--shadow-media);
}

/* YOUTUBE LIGHTBOX MIGRATION · der Rahmen fuellt exakt dieselbe Buehne wie
   das lokale <video>. Die Buehne gibt das 16:9 vor (aspect-ratio, siehe
   oben), der Rahmen legt sich absolut hinein — dadurch bleibt das Verhaeltnis
   auf jeder Breite korrekt und es entsteht kein Ueberlauf.
   Es liegen bewusst KEINE eigenen Bedienelemente darueber: kein Play-Knopf,
   kein Fortschrittsbalken, kein Timecode. YouTube steuert die Wiedergabe. */
.lightbox-yt {
  position: absolute;
  inset: 0;
  display: block;
  border: 0;
}

.lightbox-close {
  position: fixed;
  top: clamp(14px, 2vw, 30px);
  right: clamp(14px, 2vw, 30px);
  bottom: auto;
  z-index: 3;
  transform: none;
  width: 44px; height: 44px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 50%;
  background: rgba(8, 9, 11, .55);
  color: var(--text);
}
.lightbox-close:hover {
  border-color: var(--accent-35);
  background: rgba(8, 9, 11, .85);
}

/* Informationsspalte */
.lightbox-info { padding-top: clamp(0px, .8vw, 12px); }

.lb-type {
  margin-bottom: clamp(12px, 1.2vw, 18px);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--accent);
}

.lb-title {
  margin-bottom: clamp(14px, 1.4vw, 22px);
  font-size: clamp(1.9rem, 2.4vw, 2.85rem);
  font-variation-settings: "opsz" 144, "wght" 400;
  letter-spacing: -.014em;
  line-height: 1.04;
  color: var(--text);
}

.lb-desc {
  margin-bottom: clamp(20px, 2.2vw, 34px);
  max-width: 46ch;
  font-size: var(--fs-small);
  line-height: 1.7;
  color: var(--text-2);
}

.lb-specs {
  display: grid;
  border-top: 1px solid var(--border-soft);
}
.lb-spec {
  display: grid;
  grid-template-columns: minmax(84px, .38fr) minmax(0, 1fr);
  gap: 8px 18px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border-soft);
}
.lb-spec dt {
  padding-top: .28em;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lb-spec dd {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.5;
  color: var(--text);
}

/* Spec-Transparenz: steht immer und behauptet nie einen Kundenauftrag. */
.lb-note {
  margin-top: clamp(16px, 1.6vw, 22px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: .8;
}

.lb-next {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  margin-top: clamp(20px, 2.2vw, 32px);
  padding: 10px 0;
  color: var(--text-3);
  transition: color var(--dur) var(--ease);
}
.lb-next:hover { color: var(--text); }
.lb-next-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.lb-next-title {
  font-family: var(--font-editorial);
  font-size: 1.05rem;
  font-variation-settings: "opsz" 48, "wght" 400;
  color: var(--text);
}
.lb-next .icon { width: 15px; height: 15px; align-self: center; }


/* --- RESPONSIVE ---------------------------------------------------------- */

/* Ab hier klappt die Kopfzeile auf den mobilen Zustand um: links leer,
   Wortmarke exakt mittig (absolut gesetzt, deshalb unabhaengig von den
   Breiten rechts), rechts Sprache und Menue. */
@media (max-width: 900px) {
  /* Muss hier stehen und nicht nur weiter oben: die Regel
     ".nav--lead, .nav-tail { display: flex }" dieses Abschnitts hat dieselbe
     Spezifitaet und steht spaeter in der Datei — eine Media Query erhoeht die
     Spezifitaet NICHT. Ohne diese Zeile blieben die Links mobil sichtbar und
     liefen quer durch die Wortmarke. */
  .nav--lead { display: none; }

  /* display:contents loest .nav-tail auf, damit Menue-Knopf und Sprach-
     schalter direkte Rasterkinder werden und in Spalte 1 bzw. 3 sitzen.
     grid-row: 1 ist dabei Pflicht: die Kinder stehen in der Quelle in der
     Reihenfolge Wortmarke (2) - Sprache (3) - Menue (1); ohne feste Zeile
     schiebt die Auto-Platzierung den Menue-Knopf in eine zweite Rasterzeile
     und er rutscht unter die Kopfzeile. */
  .nav-tail { display: contents; }
  .nav-tail-link { display: none; }
  .nav-toggle {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    margin-left: -10px;
    margin-right: 0;
  }
  .wordmark {
    --wm-track: .26em;
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(10px, 2.6vw, 12px);
  }
  .lang-switch { grid-column: 3; grid-row: 1; justify-self: end; }
  .nav-links-contact { display: block; }

  /* Lightbox: Film oben, Specs darunter. Kein Side-by-Side erzwingen. */
  .lightbox {
    padding: 74px clamp(14px, 4vw, 28px) clamp(32px, 8vw, 56px);
  }
  .lightbox-inner[data-aspect="wide"],
  .lightbox-inner[data-aspect="tall"] {
    max-width: 100%;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 5vw, 30px);
  }
  /* Hochformat: ueber die HOEHE begrenzt, sonst schiebt ein 9:16-Film die
     Specs komplett aus dem ersten Bildschirm. */
  .lightbox-inner[data-aspect="tall"] .lightbox-stage {
    width: auto;
    height: min(58vh, calc(100vw * 16 / 9));
    margin-inline: auto;
  }
  .lightbox-info { padding-top: 0; }
  .lb-desc { max-width: none; }
}

@media (max-width: 560px) {
  .wordmark { --wm-track: .22em; font-size: 10px; }
  .lang-switch { gap: 5px; }
  .lang-btn, .lang-sep { font-size: .6875rem; letter-spacing: .12em; }
  .lb-spec { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0; }
  .lb-spec dt { padding-top: 0; }
}

/* Sehr kleine Geraete: nur noch eine Groessenstufe. Die Zonenaufteilung
   traegt sich selbst — die Aussenspalten sind gleich breit, die Wortmarke
   bleibt mittig. */
@media (max-width: 380px) {
  .wordmark { --wm-track: .18em; font-size: 9.5px; }
}