/* ============================================================================
   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)
   ------------------------------------------------------------------------ */
@font-face {
  font-family: "Space Grotesk";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../assets/profile/fonts/space-grotesk/SpaceGrotesk-Variable.woff2") format("woff2");
}
@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);

  --font-display:  "Space Grotesk", "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:      84px;
}


/* ---------------------------------------------------------------------------
   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); }

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);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: var(--header-h);
  transition: height var(--dur) var(--ease);
}
.site-header[data-scrolled="true"] .header-inner { height: 68px; }

.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); }

/* Navigation optisch mittig: Links wachsen, Logo und CTA behalten ihre Breite */
.header-inner > .brand { flex: 0 0 auto; }
.nav { flex: 1 1 auto; justify-content: flex-end; }
@media (min-width: 1200px) {
  .nav { justify-content: center; position: relative; }
  .nav-cta { position: absolute; right: 0; }
  .nav-links { margin-inline: auto; }
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  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 fuellt die rechte Haelfte bis an Ober-, Unter- und Aussenkante */
.hero-media {
  position: absolute;
  inset: 0 clamp(24px, 3.4vw, 56px) 0 auto;
  width: 56%;
  pointer-events: none;
}
.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 70% 30%;

  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(50%, 760px); }

.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);
}

.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.
   1 AI Workflow Building · 2 Creative Automation · 3 Content & Video */
.pillars > .pillar:nth-child(1) .pillar-media img { --iso-k: 1.10; }
.pillars > .pillar:nth-child(2) .pillar-media img { --iso-k: 1.16; }
.pillars > .pillar:nth-child(3) .pillar-media img { --iso-k: 1.16; }

/* 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); }


/* ---------------------------------------------------------------------------
   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);
}
.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;
    width: min(560px, 100%);
    margin: 32px auto 0;
    inset: auto;
  }
  .hero-media img {
    aspect-ratio: 5 / 4;
    object-position: 66% 20%;
    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); }
}

@media (max-width: 900px) {
  .nav-links,
  .nav > .btn { display: none; }
  .nav-toggle { display: inline-flex; }

  .nav[data-open="true"] {
    position: absolute;
    top: calc(100% + 8px);
    left: var(--gutter);
    right: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: rgba(12, 13, 16, .98);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lift);
  }
  .nav[data-open="true"] .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
  }
  .nav[data-open="true"] .nav-links a { padding: 13px 6px; font-size: var(--fs-body); }
  .nav[data-open="true"] > .btn { display: inline-flex; margin-top: 8px; }
  .header-inner { position: relative; }
}


/* ---------------------------------------------------------------------------
   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;
    grid-template-columns: minmax(0, 1fr) minmax(112px, .8fr);
    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; }
  .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: sie ergeben in der schmalen
     Textspalte genau die gewuenschten fuenf Zeilen
     AI WORKFLOW / BUILDER & / CREATIVE / AUTOMATION / SPECIALIST.
     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: 14px 0 0;
    margin-right: -22px;
    align-self: end;
  }
  .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;
    min-height: clamp(196px, 53vw, 268px);
    margin: 0 calc(var(--gutter) * -1) 0 0;
  }
  .hero-media img {
    aspect-ratio: auto;
    height: 100%;
    object-position: 61% 6%;
    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 als kompaktes 2er-Raster --- */
  .flow {
    --flow-cols: 2;
    --flow-tile: 46px;
    column-gap: 12px;
    row-gap: 20px;
  }
  .flow-step {
    display: block;
    padding: 0;
    text-align: center;
  }
  .flow-step::before,
  .flow-step::after { display: none !important; }
  .flow-tile { margin: 0 auto 8px; }
  .flow-num { font-size: .95rem; margin-bottom: 4px; }
  .flow-step h3 {
    display: block;
    min-height: 0;
    margin-bottom: 6px;
    font-size: .95rem;
  }
  .flow-step h3::after { margin: 8px auto 0; }
  .flow-step p { font-size: .8rem; line-height: 1.5; }

  /* --- 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: Workflow einspaltig, sonst werden die Titel zu eng */
@media (max-width: 339px) {
  .flow { --flow-cols: 1; row-gap: 16px; }
  .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; }
}