/* ==========================================================================
   CODEWERK LABS — STRUKTUR v2 (2026-09-23)
   Setzt tokens.css, base.css und components.css voraus.
   --------------------------------------------------------------------------
   Anlass (Rückmeldung Betreiber): „Die Seiten wirken wie eine endlose
   Word-Datei." Gemessen an den Screenshots in tests/visual/before:
     1. Jede Sektion begann gleich (kleines Label, H2, graue Karten).
     2. Fog (#fafafb) auf Paper (#fff) ist ~2 % Helligkeitsunterschied —
        Sektionswechsel waren praktisch unsichtbar.
     3. Mist-Karten auf Fog-Sektionen verschwammen mit dem Grund.
     4. Listen waren nackte Textzeilen ohne Marker.
   Antwort: Kapitelanfänge, klare Flächenbänder, Karten mit Kontrast
   zum Grund, ein dunkles Band pro Seite als Anker. Alles aus der
   bestehenden Palette — keine neue Farbe.
   ========================================================================== */

@layer components {

  /* ── Kapitelanfang ─────────────────────────────────────────────────────
     Ein Eyebrow MIT Index ist ein Sektionsbeginn. Er bekommt eine
     durchgehende Linie in Ink und die Nummer rechtsbündig — wie der
     Kopf eines Magazinkapitels. Reines CSS: jedes Template, das das
     Muster schon nutzt, erbt es ohne Änderung. */

  .c-eyebrow:has(> .c-eyebrow__index) {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: 1px solid var(--color-text-primary);
    color: var(--color-text-primary);
    max-width: none;   /* p erbt --measure; die Linie soll die volle Breite tragen */
  }

  .c-eyebrow:has(> .c-eyebrow__index) > .c-eyebrow__index {
    margin-inline-end: 0;
    font-family: var(--font-display);
    font-size: var(--text-subheading);
    letter-spacing: 0;
    text-transform: none;
    font-weight: var(--weight-display);
    color: var(--color-text-secondary);
  }

  /* Innerhalb von Karten bleibt der Index klein und ohne Linie —
     dort ist er eine Nummerierung, kein Kapitelanfang. */
  .c-card .c-eyebrow:has(> .c-eyebrow__index) {
    display: block;
    padding-block-start: 0;
    border-block-start: none;
    color: var(--color-text-secondary);
  }

  .c-card .c-eyebrow:has(> .c-eyebrow__index) > .c-eyebrow__index {
    font-family: var(--font-ui);
    font-size: inherit;
    letter-spacing: inherit;
    margin-inline-end: var(--space-2);
    color: var(--color-text-primary);
  }

  /* Die Überschrift direkt nach dem Kapitelkopf bekommt mehr Luft
     und eine größere Stufe — sie trägt die Sektion. */
  .c-eyebrow:has(> .c-eyebrow__index) + h2 {
    font-size: clamp(var(--text-heading), 4vw, 54px);
    line-height: 1.12;
    max-width: 26ch;   /* Umbrüche setzen die Templates per <br> */
  }

  .l-split .c-eyebrow:has(> .c-eyebrow__index) + h2 {
    font-size: var(--text-heading);
  }


  /* ── Flächenbänder ─────────────────────────────────────────────────────
     „Subtle" wird Mist statt Fog: sichtbar als Band, aber weiterhin
     achromatisch. Karten darauf werden weiß — damit liegt immer ein
     Objekt mit Kontrast auf einem Grund.
     Kontrast: #6b6e78 auf Mist = 4,55:1 (tokens.css), auf Weiß 5,09:1. */

  .l-section--subtle { background-color: var(--brand-mist-gray); }

  .l-section--subtle .c-card:not(.c-card--accent):not(.c-card--featured) {
    background-color: var(--brand-paper-white);
    border-color: transparent;
  }


  /* ── Dunkles Band ──────────────────────────────────────────────────────
     Ein Anker pro Seite. Die Textrollen dreht tokens.css bereits
     (.l-section--inverse). Hier nur die Komponenten darin. */

  .l-section--inverse .c-eyebrow:has(> .c-eyebrow__index) {
    border-block-start-color: rgba(255, 255, 255, 0.5);
  }

  .l-section--inverse .c-card {
    background-color: #202328;
    border-color: rgba(255, 255, 255, 0.08);
  }


  /* ── Prozess als Zahlenband ───────────────────────────────────────── */

  .c-stepgrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    gap: var(--space-10) var(--space-8);
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .c-stepgrid > li + li { margin-block-start: 0; }

  .c-stepgrid__index {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-heading-lg);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--color-text-muted);
    padding-block-end: var(--space-4);
    border-block-end: 1px solid var(--color-divider);
  }

  .c-stepgrid__title {
    display: block;
    margin-block-start: var(--space-4);
    font-family: var(--font-display);
    font-size: var(--text-heading-sm);
    line-height: var(--leading-heading);
    color: var(--color-text-primary);
  }

  .c-stepgrid__text {
    margin-block-start: var(--space-2);
    color: var(--color-text-secondary);
  }


  /* Auf dem Telefon: Ziffer links neben dem Text statt darüber.
     Sieben gestapelte 30-px-Ziffern machten das Band über 1.500 px
     hoch (gemessen bei 390 px). */
  @media (max-width: 599px) {
    .c-stepgrid { gap: 0; }

    .c-stepgrid > li {
      display: grid;
      grid-template-columns: 2.4ch minmax(0, 1fr);
      column-gap: var(--space-4);
      padding-block: var(--space-4);
      border-block-end: 1px solid var(--color-divider);
    }

    .c-stepgrid__index {
      grid-row: span 2;
      font-size: var(--text-heading-sm);
      padding: 0;
      border: none;
    }

    .c-stepgrid__title { margin-block-start: 0; font-size: var(--text-subheading); }
  }


  /* ── Paarraster ─────────────────────────────────────────────────────
     Vier Karten als 2 × 2 statt 3 + 1 — eine verwaiste vierte Karte
     wirkt wie vergessen. */
  .l-grid--pairs {
    grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
  }


  /* ── Listen mit Markern ────────────────────────────────────────────────
     Vorher: nackte Zeilen, nicht von Fließtext zu unterscheiden.
     Jetzt: Marker in eigener Spalte, Trennlinie pro Punkt.
     --check / --cross für Gegenüberstellungen. Marker sind dekorativ,
     die Bedeutung trägt die Überschrift darüber (WCAG 1.4.1). */

  .c-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
  }

  /* Marker absolut statt Grid-Spalte. BUG-010: Mit display:grid wurde
     jeder Textknoten eines <li> zur eigenen Zelle — „<strong>Messen</strong>
     — was passiert …" landete mit dem Fließtext in der 1,25-em-Marker-
     spalte, ein Buchstabe pro Zeile (/prozess, /kontakt). */
  .c-list > li {
    position: relative;
    padding-block: var(--space-3);
    padding-inline-start: calc(1.25em + var(--space-3));
    border-block-end: 1px solid var(--color-divider);
    margin: 0;
  }

  .c-list > li:last-child { border-block-end: none; }

  .c-list > li::before {
    content: "—";
    position: absolute;
    inset-inline-start: 0;
    color: var(--color-text-muted);
  }

  .c-list--check > li::before { content: "✓"; color: var(--color-text-primary); }
  .c-list--cross > li::before { content: "✕"; color: var(--color-text-muted); }

  /* Auf weißen Karten ist Mist als Trennlinie zu schwach */
  .c-card .c-list > li { border-block-end-color: var(--color-border); }
  .c-card--featured .c-list > li { border-block-end-color: var(--color-divider); }


  /* ── Hervorgehobene Karte (empfohlenes Paket) ──────────────────────────
     Ersetzt Peach als Empfehlungsmarker. Peach ist der eine große
     Akzent pro Seite (§14) — die Empfehlung ist ein Zustand, kein
     Akzent. Ink trägt das mit mehr Kontrast. */

  .c-card--featured {
    --color-text-primary:   var(--brand-paper-white);
    --color-text-secondary: var(--brand-smoke-gray);   /* 7,24:1 */
    --color-text-muted:     var(--brand-ash-gray);     /* 6,04:1 */
    --color-divider:        rgba(255, 255, 255, 0.14);
    --color-border:         rgba(255, 255, 255, 0.18);
    --color-focus-ring:     var(--brand-paper-white);
    background-color: var(--color-surface-inverse);
    border-color: var(--color-surface-inverse);
    color: var(--color-text-primary);
  }

  .c-card--featured .c-btn--primary {
    background-color: var(--brand-paper-white);
    border-color: var(--brand-paper-white);
    color: var(--brand-ink-black);
  }

  .c-card--featured .c-btn--primary:hover { background-color: var(--brand-mist-gray); }

  .c-card--featured small { color: var(--color-text-secondary); }


  /* ── Projekte als eigene Objekte ───────────────────────────────────────
     Vorher: Textspalten, nur durch eine Haarlinie getrennt. Jetzt ist
     jeder Case eine Fläche mit Kopf und Beleg-Artefakt. */

  .c-case,
  .c-case:first-child {
    background-color: var(--brand-mist-gray);
    border-radius: var(--radius-card);
    border-block-start: none;
    padding: var(--space-10);
  }

  .l-section--subtle .c-case { background-color: var(--brand-paper-white); }

  .c-case .c-case__row {
    padding-block-end: var(--space-5);
    border-block-end: 1px solid var(--color-border);
  }

  .c-case .c-artifact { align-self: flex-start; }

  @media (max-width: 599px) {
    .c-case,
    .c-case:first-child { padding: var(--space-6) var(--space-5); }
  }


  /* ── Abschluss-CTA ─────────────────────────────────────────────────────
     Das Ende einer Seite ist kein weiterer Abschnitt, sondern eine
     Einladung: zentriert, groß, mit Luft. */

  .c-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    /* Kein eigenes padding-block: der Sektionsabstand (.l-section)
       gilt weiter — sonst schrumpfte der Abschluss auf 40 px. */
  }

  .c-cta h2 {
    font-size: clamp(var(--text-heading), 5vw, var(--text-heading-lg));
    line-height: 1.1;
    max-width: 22ch;
  }

  .c-cta .c-lede { margin-inline: auto; }
  .c-cta .l-cluster { justify-content: center; }


  /* ── Seitenkopf der Unterseiten ──────────────────────────────────────
     Der H1-Block bekommt eine Kante nach unten. Vorher lief er ohne
     Abschluss in die erste Sektion. */

  main > .l-section:first-child:not(:has(.c-hero)) {
    padding-block: var(--space-16) var(--space-20);
    border-block-end: 1px solid var(--color-border);
  }


  /* ── Brotkrumen ────────────────────────────────────────────────────── */

  .c-crumbs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 13px;
    color: var(--color-text-secondary);
  }

  .c-crumbs li + li { margin: 0; }
  .c-crumbs li + li::before { content: "/"; margin-inline-end: var(--space-2); }
  .c-crumbs a { text-decoration: none; }
  .c-crumbs a:hover { text-decoration: underline; }


  /* ── Kleinkram aus der Bestandsaufnahme ────────────────────────────── */

  .c-nav__link { white-space: nowrap; }

  /* Fehler aus dem Bestand: base.css setzt li + li { margin-top: 8px }
     für Fließtextlisten. In umbrechenden Label-Reihen (flex-wrap)
     rutschte dadurch jedes Label außer dem ersten um 8 px nach unten —
     sichtbar als „MOBILE-FIRST" tiefer als „PREMIUM-AUFTRITT". */
  .c-techlist > li + li,
  .c-crumbs > li + li,
  .c-nav__list > li + li { margin-block-start: 0; }   /* Desktop-Navigation: „Leistungen" saß 4 px höher */

  /* 16ch brach „Codewerk Labs ist / ein / Nebengewerbe." mit einem
     Einzelwort pro Zeile. */
  .c-accent-headline { max-width: 22ch; }
}

@layer utilities {
  .u-mt-2 { margin-block-start: var(--space-2); }
  .u-mt-3 { margin-block-start: var(--space-3); }
  .u-mt-8 { margin-block-start: var(--space-8); }
}


/* ==========================================================================
   PORTRÄT (2026-09-23)
   Masterprompt §33 schließt Stockfotos aus — ein echtes Porträt des
   Betreibers ist das Gegenteil davon und das stärkste Vertrauenssignal
   (SEO-Audit: E-E-A-T). Das Foto hat einen schwarzen Grund; es steht
   deshalb als ruhige dunkle Fläche im hellen Layout, ohne Rahmen und
   ohne Schatten. Ein schwebendes Artefakt verbindet es mit der
   Bildsprache der restlichen Seite.
   ========================================================================== */

@layer components {

  .c-pagehero {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--space-16);
    align-items: center;
  }

  .c-portrait {
    position: relative;
    margin: 0;
    inline-size: 100%;
    max-inline-size: 440px;
    justify-self: end;
  }

  .c-portrait--compact { max-inline-size: 400px; justify-self: start; }

  .c-portrait__img {
    display: block;
    inline-size: 100%;
    block-size: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: var(--radius-image);
    background-color: var(--brand-ink-black);   /* Platzhalter bis das Bild da ist */
  }

  /* Das Artefakt ragt über die Bildkante — Collage statt Bildunterschrift */
  /* Überstand nach links: bis 32 px, aber nie mehr als der tatsächlich
     vorhandene Rand minus 8 px Luft. Bei 1024 px ist der Rand nur
     24 px — ein fester Wert ragte dort 8 px aus dem Bild (Pixel-QA). */
  .c-portrait__tag {
    position: absolute;
    inset-block-end: calc(var(--space-6) * -1);
    inset-inline-start: calc(-1 * min(
      var(--space-8),
      max(0px, (100vw - var(--page-max-width)) / 2) + var(--page-gutter) - var(--space-2)
    ));
  }

  @media (max-width: 1023px) {
    .c-pagehero { grid-template-columns: minmax(0, 1fr); gap: var(--space-10); }
    .c-portrait,
    .c-portrait--compact { justify-self: start; max-inline-size: 420px; }
    .c-portrait__tag { inset-inline-start: var(--space-4); }
  }

  @media (max-width: 599px) {
    .c-portrait,
    .c-portrait--compact { max-inline-size: none; }
    .c-portrait__tag {
      inset-inline-start: var(--space-3);
      inset-block-end: var(--space-3);
      min-inline-size: 0;
      inline-size: auto;
    }
  }
}


/* ==========================================================================
   MOBILE NAVIGATION v2 (2026-09-23)
   Owner-Wunsch: „Wenn man runterscrollt, soll man trotzdem immer von A
   nach B kommen — visuell schick und unkompliziert."

   Vorher: Kopfzeile scrollte weg, das Menü klappte als Liste unter der
   Kopfzeile auf. Am Seitenende gab es nur den Footer.

   Jetzt (< 900 px):
     1. Kopfzeile bleibt oben (sticky), schlank, mit Haarlinie.
     2. Menü ist eine eigene Vollbild-Ebene: große Serif-Links mit
        Ziffern — dieselbe Sprache wie das Zahlenband im Prozess —,
        aktuelle Seite markiert, darunter CTA und direkte Kontakte.
     3. Hintergrund scrollt nicht mit, Escape schließt, Fokus bleibt
        im Menü (app.js).
   Desktop bleibt unverändert: Dort ist die Navigation ohnehin sichtbar.
   ========================================================================== */

@layer components {

  .c-mobile-menu[hidden] { display: none !important; }

  @media (max-width: 899px) {

    .c-header {
      position: sticky;
      inset-block-start: 0;
      z-index: 60;
      background-color: var(--color-surface);
      border-block-end: 1px solid var(--color-border);
    }

    .c-header .c-nav { padding-block: var(--space-3); }

    /* Die Menü-Ebene liegt IN der Kopfzeile (für die Fokusfalle).
       Die Kopfzeile bildet einen eigenen Stapelkontext — innerhalb
       dessen muss die Leiste mit Logo und Knopf über dem Menü liegen. */
    .c-header > .l-container {
      position: relative;
      z-index: 2;
      background-color: var(--color-surface);
    }

    /* Sprungziele landen unter der Kopfzeile, nicht dahinter */
    :target { scroll-margin-block-start: var(--space-24); }

    /* ── Menüknopf: Pill mit zwei Linien, wird zum Kreuz ──────────── */
    .c-nav__toggle {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      min-block-size: 44px;
      padding-inline: var(--space-5) var(--space-4);
      border: 1px solid var(--color-text-primary);
      border-radius: var(--radius-button);
      background-color: transparent;
      color: var(--color-text-primary);
      font-size: var(--text-caption);
      font-weight: var(--weight-medium);
      transition: background-color var(--duration-fast) var(--ease-out),
                  color var(--duration-fast) var(--ease-out);
    }

    .c-nav__toggle[aria-expanded="true"] {
      background-color: var(--color-surface-inverse);
      color: var(--color-text-inverse);
    }

    .c-nav__burger {
      position: relative;
      inline-size: 16px;
      block-size: 10px;
    }

    .c-nav__burger > span {
      position: absolute;
      inset-inline: 0;
      block-size: 1.5px;
      background-color: currentColor;
      border-radius: 2px;
      transition: transform var(--duration-base) var(--ease-out);
    }

    .c-nav__burger > span:first-child { inset-block-start: 0; }
    .c-nav__burger > span:last-child  { inset-block-end: 0; }

    .c-nav__toggle[aria-expanded="true"] .c-nav__burger > span:first-child {
      transform: translateY(4.25px) rotate(45deg);
    }
    .c-nav__toggle[aria-expanded="true"] .c-nav__burger > span:last-child {
      transform: translateY(-4.25px) rotate(-45deg);
    }

    /* ── Vollbild-Ebene ───────────────────────────────────────────── */
    .c-mobile-menu {
      position: fixed;
      inset: 0;
      z-index: 1;                        /* unter der Leiste (2) */
      padding: 0;
      border: none;
      background-color: var(--color-surface);
      overflow-y: auto;
      overscroll-behavior: contain;
      animation: cwl-menu-in var(--duration-base) var(--ease-out) both;
    }

    .c-mobile-menu__inner {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      gap: var(--space-10);
      min-block-size: 100%;
      /* Platz für die Kopfzeile darüber */
      padding-block: calc(68px + var(--space-6)) var(--space-8);
    }

    .c-mobile-menu__list {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .c-mobile-menu__list > li + li { margin: 0; }

    .c-mobile-menu__link {
      display: flex;
      align-items: baseline;
      gap: var(--space-4);
      padding-block: var(--space-3);
      border-block-end: 1px solid var(--color-border);
      font-family: var(--font-display);
      font-size: clamp(28px, 8.5vw, 40px);
      line-height: 1.15;
      letter-spacing: var(--tracking-heading);
      color: var(--color-text-primary);
      text-decoration: none;
    }

    .c-mobile-menu__link:hover { text-decoration: none; }

    .c-mobile-menu__index {
      min-inline-size: 2.2ch;
      font-family: var(--font-ui);
      font-size: var(--text-caption);
      letter-spacing: 0;
      font-variant-numeric: tabular-nums;
      color: var(--color-text-secondary);
    }

    /* Aktuelle Seite: kursiv + Peach-Band — der Markierungsstil der Marke */
    .c-mobile-menu__link[aria-current="page"] { font-style: italic; }
    .c-mobile-menu__link[aria-current="page"] .c-mobile-menu__index { color: var(--color-text-primary); }
    .c-mobile-menu__link[aria-current="page"]::after {
      content: "";
      flex: 1;
      align-self: center;
      block-size: 6px;
      max-inline-size: 48px;
      border-radius: 999px;
      background-color: var(--brand-blush-peach);
    }

    /* Links erscheinen nacheinander — einmal, kurz */
    .c-mobile-menu__list > li { animation: cwl-menu-link var(--duration-slow) var(--ease-out) both; }
    .c-mobile-menu__list > li:nth-child(2) { animation-delay: 30ms; }
    .c-mobile-menu__list > li:nth-child(3) { animation-delay: 60ms; }
    .c-mobile-menu__list > li:nth-child(4) { animation-delay: 90ms; }
    .c-mobile-menu__list > li:nth-child(5) { animation-delay: 120ms; }
    .c-mobile-menu__list > li:nth-child(6) { animation-delay: 150ms; }

    .c-mobile-menu__foot { display: flex; flex-direction: column; gap: var(--space-5); }
    .c-mobile-menu__cta { inline-size: 100%; min-block-size: 52px; font-size: var(--text-body); }

    .c-mobile-menu__contact {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: var(--space-2);
    }

    .c-mobile-menu__contact > li + li { margin: 0; }

    .c-mobile-menu__contact a,
    .c-mobile-menu__legal a {
      display: inline-block;
      padding-block: var(--space-2);
      text-decoration: none;
    }

    .c-mobile-menu__legal { font-size: var(--text-caption); color: var(--color-text-secondary); }

    /* Seite dahinter steht still, solange das Menü offen ist */
    html.is-menu-open { overflow: hidden; }
  }

  @keyframes cwl-menu-in {
    from { opacity: 0; }
    to   { opacity: 1; }
  }

  @keyframes cwl-menu-link {
    from { opacity: 0; transform: translate3d(0, 8px, 0); }
    to   { opacity: 1; transform: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .c-mobile-menu,
    .c-mobile-menu__list > li { animation: none !important; }
    .c-nav__burger > span { transition: none !important; }
  }
}