/* ============================================================
   TREXON EL — style.css
   ============================================================
   Aufbau:
   1. @layer          → CSS in klare Schichten einteilen
   2. Custom Props    → Alle Farben & Größen an einem Ort
   3. Reset           → Browser-Defaults bereinigen
   4. Typografie      → Schriften, Größen mit clamp()
   5. Layout          → Container, Grid
   6. Komponenten     → Nav, Hero, Cards, Footer
   7. Responsive      → Mobile
   ============================================================ */


/* ============================================================
   @LAYER — SCHICHTEN-ARCHITEKTUR
   ============================================================
   CSS-Regeln werden nach Schichten priorisiert.
   Weiter rechts in der Liste = höhere Priorität.
   So hat eine Utility-Klasse immer Vorrang vor einer
   Komponenten-Regel — ohne !important.
   ============================================================ */
@layer base, layout, components, utilities;


/* ============================================================
   FONTS — lokal gehostet (DSGVO)
   ============================================================
   Statt Google Fonts CDN (überträgt Besucher-IPs an Google ohne
   Einwilligung) liegen die Schriftdateien lokal unter /fonts.
   font-display: swap → Text bleibt sichtbar während Fonts laden.
   ============================================================ */
/* DM Sans als Variable Font: eine Datei deckt alle Gewichte 100-900 ab
   (statt 5 separater woff2-Dateien) — weniger Requests, kleinere Gesamtgröße */
@font-face {
  font-family: 'DM Sans';
  src: url('../fonts/dm-sans-variable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/dm-mono-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Mono';
  src: url('../fonts/dm-mono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}


/* Scroll-Animationen — Ausgangszustand (js/scroll-animations.js setzt .is-visible)
   prefers-reduced-motion wird sitewide per transition-duration: 0.01ms !important abgedeckt.
   @media (scripting: enabled): der versteckte Ausgangszustand gilt nur wenn JS läuft —
   ohne JS (und in Browsern ohne scripting-Query-Support) bleibt alles direkt sichtbar */
@media (scripting: enabled) {
  .section-block,
  .card,
  .bento__cell {
    opacity: 0;
    translate: 0 28px;
    transition: opacity 0.5s ease, translate 0.5s ease;

    &.is-visible {
      opacity: 1;
      translate: 0 0;
    }
  }
}

/* Sicherheitsnetz: ohne JS bleiben Elemente sichtbar */
@media (prefers-reduced-motion: reduce) {
  .section-block,
  .card,
  .bento__cell {
    opacity: 1 !important;
    translate: none !important;
    transition: none !important;
  }
}


/* ============================================================
   BASE
   ============================================================ */
@layer base {

  /* ----------------------------------------------------------
     CSS CUSTOM PROPERTIES (Variablen)
     ----------------------------------------------------------
     Alle Farben, Schriften, Abstände stehen hier.
     Änderst du eine Variable, ändert sich die gesamte Website.
     Zugriff überall: var(--name)
     ---------------------------------------------------------- */
  :root {
    /* Farben — Palette 2: Anthrazit + Teal-Grün */
    --color-base:    #1C1E21;   /* Hintergrund */
    --color-surface: #252729;   /* Sekundärer Hintergrund */
    --color-card:    #2D3035;   /* Karten & Boxen */
    --color-accent:  #00C9A7;   /* Teal-Grün: CTAs, Links, Akzente */
    --color-text:    #FFFFFF;   /* Haupttext */
    --color-muted:   #8892A0;   /* Sekundärtext */
    --color-subtle:  #C8D0DA;   /* Labels, sehr heller Text */

    /* color-mix(): Browser berechnet die Farbe automatisch.
       Hier: 20% Grau + 80% Transparenz = feiner Rahmen */
    --color-border:  color-mix(in srgb, #8892A0 20%, transparent);

    /* Weiche Trennlinie zwischen Sektionen — blendet an den Rändern aus,
       statt als harte Volllinie über die ganze Breite zu laufen */
    --divider-gradient: linear-gradient(
      to right,
      transparent,
      var(--color-border) 20%,
      var(--color-border) 80%,
      transparent
    );

    /* Schriften */
    --font-sans: 'DM Sans', system-ui, sans-serif;
    --font-mono: 'DM Mono', ui-monospace, monospace;

    /* Abstände */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: clamp(3rem, 6vw, 5rem);
    --space-xl: clamp(5rem, 10vw, 9rem);

    /* Container */
    --container-max: 1100px;
    --container-pad: clamp(1.25rem, 5vw, 3rem);

    /* Radien */
    --radius-sm:   6px;
    --radius-md:   12px;
    --radius-full: 999px;

    /* Übergänge */
    --transition-fast: 150ms ease;
    --transition:      220ms ease;

    /* Leucht-Schatten — Teal-Glow für Würfel & technische Akzente */
    --shadow-glow-accent: 0 0 60px color-mix(in srgb, var(--color-accent) 35%, transparent);
  }


  /* ----------------------------------------------------------
     RESET
     ----------------------------------------------------------
     Browser (Chrome, Firefox, Safari) haben eigene
     Standard-Abstände. Das hier setzt alles auf Null,
     damit wir kontrolliert von vorne anfangen.
     ---------------------------------------------------------- */
  *, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    /* Sanftes Scrollen bei Anker-Links (#abschnitt) */
    scroll-behavior: smooth;
  }

  /* Barrierefreiheit: Nutzer die Animationen deaktiviert
     haben (z.B. bei Epilepsie) werden respektiert */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }

  body {
    font-family: var(--font-sans);
    background-color: var(--color-base);
    color: var(--color-text);
    line-height: 1.6;
    /* clamp(minimum, bevorzugt, maximum)
       → Schriftgröße wächst flüssig mit dem Bildschirm,
         ohne Media Queries */
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    /* Besseres Schriftrendering auf Mac/Windows */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }


  /* ----------------------------------------------------------
     TYPOGRAFIE
     ---------------------------------------------------------- */
  h1 {
    font-size: clamp(2.25rem, 6vw, 4rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    /* text-wrap: balance → verteilt Wörter gleichmäßig
       auf alle Zeilen, verhindert einzelne Wörter in letzter Zeile */
    text-wrap: balance;
    /* Sicherheitsnetz: einzelne lange Wörter (z.B. "Machbarkeitsanalyse")
       laufen auf schmalen Screens sonst über den Container hinaus */
    overflow-wrap: break-word;
  }

  h2 {
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.2;
    text-wrap: balance;
  }

  h3 {
    font-size: clamp(1rem, 1.75vw, 1.25rem);
    font-weight: 500;
    letter-spacing: -0.005em;
    line-height: 1.3;
  }

  p {
    max-width: 65ch; /* 65 Zeichen = optimale Lesebreite */
    line-height: 1.75;
  }

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

  ul { list-style: none; }

  img {
    max-width: 100%;
    display: block;
  }
}


/* ============================================================
   LAYOUT
   ============================================================ */
@layer layout {

  /* .container: zentriert Inhalt, Maximalbreite, seitliche
     Abstände wachsen mit dem Bildschirm (clamp) */
  .container {
    max-width: var(--container-max);
    margin-inline: auto;      /* margin-inline = links + rechts */
    padding-inline: var(--container-pad);
  }
}


/* ============================================================
   COMPONENTS
   ============================================================ */
@layer components {

  /* ----------------------------------------------------------
     NAVIGATION
     ---------------------------------------------------------- */
  .site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    /* color-mix(): 85% Hintergrundfarbe + 15% transparent
       → Navigation bleibt sichtbar aber leicht durchsichtig */
    background-color: color-mix(in srgb, var(--color-base) 85%, transparent);
    /* backdrop-filter: Glaseffekt — weicht den Inhalt
       dahinter auf. Wie Milchglas. */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--color-border);
  }

  .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: var(--space-sm); /* padding-block = oben + unten */

    /* CSS NESTING: & steht für das Elternelement (.nav)
       Alles was mit & beginnt, gehört zu .nav.
       Kein separates .nav__logo {} nötig. */

    & .nav__logo {
      font-family: var(--font-mono);
      font-size: 1.05rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--color-accent);
      font-weight: 500;
      transition: opacity var(--transition-fast);

      /* Druckkopf-Glyph statt Text-Akzent. mask-image statt <img>, damit die
         Fuellung an der Textfarbe haengt (currentColor = --color-accent) */
      &::before {
        content: '';
        display: inline-block;
        width: 0.95em;
        height: 0.95em;
        margin-right: 0.4em;
        vertical-align: -0.12em;
        background-color: currentColor;
        -webkit-mask: url('../nozzle.svg') no-repeat center / contain;
        mask: url('../nozzle.svg') no-repeat center / contain;
      }

      &:hover { opacity: 0.75; }
    }

    & .nav__links {
      display: flex;
      align-items: center;
      gap: clamp(var(--space-sm), 3vw, var(--space-md));

      /* :not(.btn) → der CTA-Link (.btn.btn--primary) soll seine Farbe
         ausschließlich von .btn/.btn--primary bekommen, nicht von hier
         überschrieben werden (sonst andere Textfarbe als alle anderen Buttons) */
      & a:not(.btn) {
        font-size: 0.9rem;
        color: var(--color-muted);
        transition: color var(--transition-fast);

        &:hover { color: var(--color-text); }

        /* :focus-visible → Outline nur bei Tastatur-Navigation,
           nicht beim Mausklick. Bessere UX. */
        &:focus-visible {
          outline: 2px solid var(--color-accent);
          outline-offset: 4px;
          border-radius: var(--radius-sm);
        }
      }
    }
  }


  /* ----------------------------------------------------------
     BUTTONS
     ---------------------------------------------------------- */
  .btn {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    transition: background-color var(--transition), transform var(--transition);
    white-space: nowrap;

    /* Native CSS-Nesting kann & nicht an einen Bezeichner anhängen (das ist
       Sass-Syntax) — darum hier &.btn--primary statt &--primary, sonst
       verwirft der Browser die Regel lautlos. */
    &.btn--primary {
      background-color: var(--color-accent);
      color: var(--color-base);

      &:hover {
        /* Hover-Farbe automatisch berechnet:
           85% Teal + 15% Weiß = etwas heller */
        background-color: color-mix(in srgb, var(--color-accent) 85%, white);
        transform: translateY(-1px);
      }
    }

    &.btn--lg {
      padding: 0.875rem 2.25rem;
      font-size: 1rem;
    }

    &:focus-visible {
      outline: 2px solid var(--color-accent);
      outline-offset: 4px;
    }
  }


  /* ----------------------------------------------------------
     LABEL (kleine Überschrift über Sektionen)
     ---------------------------------------------------------- */
  .label {
    font-family: var(--font-mono);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-accent);
  }


  /* ----------------------------------------------------------
     DIVIDER (horizontale Trennlinie)
     ---------------------------------------------------------- */
  .divider {
    width: 40px;
    height: 2px;
    background-color: var(--color-accent);
  }


  /* ----------------------------------------------------------
     HERO SECTION
     ---------------------------------------------------------- */
  .hero {
    padding-block: var(--space-xl);
    position: relative;
    overflow-x: clip;

    /* Dot-Grid Hintergrund — technische Ästhetik */
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-accent) 18%, transparent) 1px,
        transparent 1px
      );
      background-size: 28px 28px;
      /* Fade-out nach unten — verschwindet sanft */
      mask-image: linear-gradient(
        to bottom,
        transparent 0%,
        black 20%,
        black 60%,
        transparent 100%
      );
      pointer-events: none;
    }

    & .container {
      position: relative;
      /* z-index nötig: das neue ::after-Spotlight steht im Baum NACH
         .container und würde sonst darüber gemalt werden */
      z-index: 1;
      display: grid;
      /* Text links (mehr Gewicht), Visual rechts */
      grid-template-columns: 1.1fr 0.9fr;
      align-items: center;
      gap: var(--space-lg);
    }

    /* Linke Seite: Text-Block */
    & .hero__content {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: var(--space-md);

      /* Headline dominiert deutlich stärker als sitewide-h1.
         Obergrenze 4rem: hält die Headline in der Textspalte bei
         2 Zeilen (bei 4.5rem brach sie in 3 kurze Zeilen um) */
      & h1 {
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 700;
      }
    }

    & .hero__subtext {
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: var(--color-muted);
      line-height: 1.75;
    }

    /* Rechte Seite: Würfel */
    & .hero__visual {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;

      /* Leuchtender Glow-Blob hinter dem Würfel */
      &::before {
        content: '';
        position: absolute;
        inset: 0;
        margin: auto;
        width: min(80%, 420px);
        aspect-ratio: 1;
        background: radial-gradient(
          circle,
          color-mix(in srgb, var(--color-accent) 30%, transparent) 0%,
          transparent 70%
        );
        filter: blur(40px);
        pointer-events: none;
      }
    }

    & .hero__cube {
      position: relative;
      width: 100%;
      max-width: clamp(340px, 38vw, 560px);
      filter: drop-shadow(var(--shadow-glow-accent));
      /* Pose & Tiefen-Glow laufen über js/hero-icosahedron.js: die Form
         folgt gedämpft dem Mauszeiger (keine Dauerrotation mehr),
         Kanten-/Punkt-Opacity wird pro Frame aus der Tiefe berechnet —
         eine CSS-Animation würde damit konkurrieren. */
    }

    /* Asymmetrisches Spotlight — wirkt wie Raumbeleuchtung aus einer Ecke,
       zusätzlich zum zentrierten Glow-Blob auf .hero__visual::before.
       Läuft wie beim .page-header über die Unterkante hinaus und wird per
       Maske weich auf null ausgeblendet — gerade auf breiten Fenstern hat
       der Radial-Verlauf an der Hero-Unterkante sonst noch sichtbares
       Restlicht und schneidet hart ab. */
    &::after {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: calc(100% + clamp(160px, 28vh, 320px));
      background: radial-gradient(
        circle at 30% 20%,
        color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
        transparent 55%
      );
      mask-image: linear-gradient(to bottom, black 40%, transparent 97%);
      pointer-events: none;
    }
  }


  /* ----------------------------------------------------------
     LEISTUNGEN ÜBERSICHT (Startseite)
     ---------------------------------------------------------- */
  .leistungen {
    padding-block: var(--space-lg);
    border-top: 1px solid transparent;
    border-image: var(--divider-gradient) 1;
  }

  .cards {
    display: grid;
    /* repeat(auto-fit, ...): so viele Spalten wie passen.
       minmax(min(100%, 360px), 1fr): jede Spalte ist mindestens
       360px breit oder 100% auf kleinen Screens, füllt aber immer
       die volle verfügbare Breite (1fr) — kein "480px" als Max, das
       auf mittleren Breiten (~768-990px) sonst zu einer einzelnen,
       nicht ausgefüllten Spalte mit Leerraum führt. --container-max
       (1100px) begrenzt die Gesamtbreite bereits ausreichend. */
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
    gap: var(--space-md);
    margin-block-start: var(--space-md);
  }

  .card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-card);
    /* Zwei Ebenen: Spotlight-Glow (asymmetrisch, oben) + feine Dot-Textur (darunter) */
    background-image:
      radial-gradient(
        circle at 85% 15%,
        color-mix(in srgb, var(--color-accent) 12%, transparent) 0%,
        transparent 55%
      ),
      radial-gradient(
        circle,
        color-mix(in srgb, var(--color-accent) 10%, transparent) 1px,
        transparent 1px
      );
    background-size: cover, 22px 22px;
    background-position: top right, top right;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition);

    /* Glas-Sheen — diagonaler Lichtstreifen, liegt hinter dem Text (z-index: -1) */
    &::after {
      content: '';
      position: absolute;
      z-index: -1;
      inset: 0;
      background: linear-gradient(
        115deg,
        transparent 35%,
        color-mix(in srgb, var(--color-text) 8%, transparent) 48%,
        transparent 60%
      );
      pointer-events: none;
    }

    /* Wachsender Akzent-Strich oben beim Hover */
    &::before {
      content: '';
      position: absolute;
      inset-block-start: 0;
      inset-inline-start: 0;
      width: 0%;
      height: 2px;
      background-color: var(--color-accent);
      transition: width var(--transition);
    }

    &:hover {
      border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
      transform: translateY(-2px);

      &::before { width: 100%; }
    }

    & p {
      color: var(--color-muted);
      font-size: 0.95rem;
    }

    & .card__link {
      margin-block-start: auto;
      padding-block-start: var(--space-sm);
      border-block-start: 1px solid var(--color-border);
      font-size: 0.875rem;
      font-weight: 500;
      color: var(--color-accent);
    }
  }


  /* ----------------------------------------------------------
     BENTO-GRID (Startseite)
     ---------------------------------------------------------- */
  .bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto;
    gap: var(--space-md);
    margin-block-start: var(--space-md);
  }

  /* Breite Hauptzelle — belegt 2 von 3 Spalten */
  .bento__cell--wide {
    grid-column: span 2;
  }

  /* Basis-Zelle: gleiche Optik wie .card */
  .bento__cell {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    padding: var(--space-md);
    background-color: var(--color-card);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: border-color var(--transition), transform var(--transition);

    /* Die sitewide h2-Größe (bis 2,25rem) sprengt die schmalen Zellen —
       so skalieren dass die Headline auf max. 2 Zeilen bleibt, keine Worttrennung */
    & h2 {
      font-size: clamp(1.1rem, 1.9vw, 1.35rem);
      overflow-wrap: break-word;
    }

    &:is(a):hover {
      border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
      transform: translateY(-2px);
    }
  }

  /* Hauptzelle hat doppelte Breite — Headline darf größer bleiben */
  .bento__cell--wide h2 {
    font-size: clamp(1.4rem, 2.8vw, 1.9rem);
  }

  /* Showcase-Platzhalter — wird spaeter durch echtes Foto ersetzt */
  .bento__cell--media {
    min-height: 200px;
    padding: 0;
    background-color: var(--color-surface);
    /* Kein Hover-Effekt — keine interaktive Zelle */
  }

  .bento__placeholder {
    position: absolute;
    inset: 0;
    background:
      radial-gradient(
        ellipse at 30% 60%,
        color-mix(in srgb, var(--color-accent) 15%, transparent) 0%,
        transparent 60%
      ),
      repeating-linear-gradient(
        45deg,
        color-mix(in srgb, var(--color-accent) 4%, transparent) 0px,
        color-mix(in srgb, var(--color-accent) 4%, transparent) 1px,
        transparent 1px,
        transparent 12px
      );
  }

  /* Materialien-Zelle */
  .bento__cell--materials {
    background-image: radial-gradient(
      circle at 85% 15%,
      color-mix(in srgb, var(--color-accent) 10%, transparent) 0%,
      transparent 55%
    );
  }

  .bento__material-list {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    margin-block-start: var(--space-xs);

    & li {
      font-family: var(--font-mono);
      font-size: 0.8rem;
      letter-spacing: 0.06em;
      color: var(--color-subtle);
      display: flex;
      align-items: center;
      gap: 0.5rem;

      &::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background-color: var(--color-accent);
        flex-shrink: 0;
      }
    }
  }

  /* Kontakt-CTA-Zelle — Teal-Akzent-Hintergrund */
  .bento__cell--cta {
    background-color: color-mix(in srgb, var(--color-accent) 12%, var(--color-card));
    border-color: color-mix(in srgb, var(--color-accent) 30%, transparent);

    & h3 {
      font-size: clamp(1rem, 2vw, 1.2rem);
      font-weight: 600;
    }

    & p {
      color: var(--color-subtle);
      font-size: 0.9rem;
    }

    &:hover {
      background-color: color-mix(in srgb, var(--color-accent) 18%, var(--color-card));
      border-color: color-mix(in srgb, var(--color-accent) 50%, transparent);
      transform: translateY(-2px);
    }
  }


  /* ----------------------------------------------------------
     TRUST BAR (Vertrauenssignale, Startseite)
     ---------------------------------------------------------- */
  .trust {
    padding-block: var(--space-lg);
    border-top: 1px solid transparent;
    border-image: var(--divider-gradient) 1;

    & .trust__list {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-sm) var(--space-lg);

      & li {
        display: flex;
        align-items: center;
        gap: 0.625rem;
        font-family: var(--font-mono);
        font-size: 0.8rem;
        letter-spacing: 0.05em;
        color: var(--color-muted);

        &::before {
          content: '✓';
          color: var(--color-accent);
        }
      }
    }
  }


  /* ----------------------------------------------------------
     LEISTUNGSSEITEN — Seitenstruktur
     ---------------------------------------------------------- */
  .page-header {
    position: relative;
    padding-block: var(--space-xl) var(--space-lg);
    border-bottom: 1px solid transparent;
    border-image: var(--divider-gradient) 1;
    /* Nur horizontal clippen — vertikal darf das Spotlight (::after)
       über die Trennlinie hinaus in die nächste Sektion auslaufen */
    overflow-x: clip;

    /* Dot-Grid — rhymt mit dem Hero der Startseite, dezenter */
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(
        circle,
        color-mix(in srgb, var(--color-accent) 14%, transparent) 1px,
        transparent 1px
      );
      background-size: 28px 28px;
      mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
      pointer-events: none;
    }

    /* Asymmetrisches Spotlight — gleiche Rezeptur wie .hero::after,
       sorgt für konsistente Atmosphäre über alle Seiten hinweg.
       Reicht über die Unterkante des Headers hinaus und wird per Maske
       weich auf null ausgeblendet — das Licht verläuft so ohne harte
       Kante in die darunterliegende Sektion. Die Trennlinie selbst
       (border-image) bleibt davon unberührt. */
    &::after {
      content: '';
      position: absolute;
      inset: 0 0 auto;
      height: calc(100% + clamp(160px, 28vh, 320px));
      background: radial-gradient(
        circle at 30% 20%,
        color-mix(in srgb, var(--color-accent) 14%, transparent) 0%,
        transparent 55%
      );
      mask-image: linear-gradient(to bottom, black 40%, transparent 97%);
      pointer-events: none;
    }

    & .container {
      position: relative;
      /* z-index nötig: ::after liegt im Baum nach .container und würde
         sonst über Label/H1/Text gemalt werden (siehe .hero .container) */
      z-index: 1;
      display: flex;
      flex-direction: column;
      gap: var(--space-sm);
      max-width: 780px;
    }

    & p {
      font-size: clamp(1rem, 2vw, 1.2rem);
      color: var(--color-muted);
    }
  }

  .page-content {
    padding-block: var(--space-lg);

    & .container {
      display: flex;
      flex-direction: column;
      gap: var(--space-lg);
      max-width: 780px;
    }
  }

  .section-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);

    & p { color: var(--color-muted); }

    /* Trennlinie zwischen aufeinanderfolgenden Sections */
    & + .section-block {
      padding-block-start: var(--space-lg);
      border-block-start: 1px solid var(--color-border);
    }
  }

  /* Aufzählung mit Teal-Akzent */
  .feature-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-block-start: var(--space-sm);

    & li {
      /* position:relative + absolutes ::before statt Grid — vermeidet dass
         der Fließtext als 3. Grid-Item in eine schmale Spalte umbricht */
      position: relative;
      padding: 0.5rem 0.75rem 0.5rem 2rem;
      border-inline-start: 2px solid var(--color-border);
      color: var(--color-muted);
      font-size: 0.95rem;
      line-height: 1.65;
      transition: border-color var(--transition), background-color var(--transition);

      &:hover {
        border-inline-start-color: var(--color-accent);
        background-color: color-mix(in srgb, var(--color-accent) 5%, transparent);
      }

      &::before {
        content: '›';
        position: absolute;
        inset-inline-start: 0.75rem;
        color: var(--color-accent);
        font-family: var(--font-mono);
        font-weight: 500;
      }

      & strong {
        color: var(--color-text);
        font-family: var(--font-mono);
        letter-spacing: 0.01em;
      }
    }
  }

  /* CTA-Block am Ende einer Leistungsseite */
  .cta-block {
    position: relative;
    padding: var(--space-md);
    background-color: var(--color-card);
    /* Gleiche zwei Ebenen wie .card: Spotlight-Glow + feine Dot-Textur */
    background-image:
      radial-gradient(
        circle at 85% 15%,
        color-mix(in srgb, var(--color-accent) 12%, transparent) 0%,
        transparent 55%
      ),
      radial-gradient(
        circle,
        color-mix(in srgb, var(--color-accent) 10%, transparent) 1px,
        transparent 1px
      );
    background-size: cover, 22px 22px;
    background-position: top right, top right;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-md);

    /* Glas-Sheen — liegt hinter dem Text (z-index: -1), gleiche Rezeptur wie .card::after */
    &::after {
      content: '';
      position: absolute;
      z-index: -1;
      inset: 0;
      background: linear-gradient(
        115deg,
        transparent 35%,
        color-mix(in srgb, var(--color-text) 8%, transparent) 48%,
        transparent 60%
      );
      pointer-events: none;
    }

    & p {
      color: var(--color-muted);
      max-width: 50ch;
    }
  }


  /* ----------------------------------------------------------
     KONTAKTFORMULAR
     ---------------------------------------------------------- */
  .contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-width: 640px;

    & .form-group {
      display: flex;
      flex-direction: column;
      gap: var(--space-xs);

      & label {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-subtle);
      }

      & input,
      & textarea {
        width: 100%;
        padding: 0.75rem 1rem;
        background-color: var(--color-card);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-sm);
        color: var(--color-text);
        font-family: var(--font-sans);
        font-size: 1rem;
        transition: border-color var(--transition);
        resize: vertical;

        &:focus {
          outline: none;
          border-color: var(--color-accent);
        }

        /* Tastatur-Fokus braucht einen sichtbaren Ring (WCAG) —
           der reine border-color-Wechsel oben reicht dafür nicht */
        &:focus-visible {
          outline: 2px solid var(--color-accent);
          outline-offset: 2px;
          border-color: var(--color-accent);
        }

        &::placeholder { color: var(--color-muted); }
      }

      & textarea { min-height: 140px; }
    }

    & .form-hint {
      font-size: 0.8rem;
      color: var(--color-muted);

      /* Link zur Datenschutzerklärung muss als Link erkennbar sein */
      & a {
        color: var(--color-subtle);
        text-decoration: underline;
        text-underline-offset: 3px;
        transition: color var(--transition-fast);

        &:hover { color: var(--color-accent); }
      }
    }
  }


  /* ----------------------------------------------------------
     ÜBER MICH
     ---------------------------------------------------------- */
  .about-content {
    padding-block: var(--space-lg);

    & .container {
      display: flex;
      flex-direction: column;
      gap: var(--space-md);
      max-width: 720px;
    }

    & p {
      color: var(--color-muted);
      font-size: 1.05rem;
    }

    & .btn {
      align-self: flex-start;
      margin-block-start: var(--space-sm);
    }
  }


  /* ----------------------------------------------------------
     FOOTER
     ---------------------------------------------------------- */
  .site-footer {
    padding-block: var(--space-md);
    border-top: 1px solid transparent;
    border-image: var(--divider-gradient) 1;
    margin-block-start: var(--space-xl);

    & .container {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: var(--space-sm);
    }

    & .footer__brand {
      font-family: var(--font-mono);
      font-size: 0.78rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-accent);
    }

    & .footer__meta {
      font-size: 0.82rem;
      color: var(--color-muted);

      & a {
        color: var(--color-text);
        transition: color var(--transition-fast);
        &:hover { color: var(--color-accent); }
      }
    }

    /* Pflichtseiten-Links (Impressum, Datenschutz) */
    & .footer__legal {
      display: flex;
      gap: var(--space-sm);

      & a {
        font-size: 0.82rem;
        color: var(--color-muted);
        transition: color var(--transition-fast);

        &:hover { color: var(--color-text); }

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


/* ============================================================
   UTILITIES
   ============================================================ */
@layer utilities {
  /* Für Screenreader sichtbar, für Augen unsichtbar */
  .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  /* Skip-Link (BFSG/WCAG): außerhalb des Viewports geparkt,
     rutscht beim ersten Tab-Fokus sichtbar ins Bild */
  .skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-sm);
    z-index: 200;
    background: var(--color-accent);
    color: var(--color-base);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-sans);
    font-size: 0.875rem;
    font-weight: 600;
    white-space: nowrap;
    transition: top var(--transition-fast);

    &:focus {
      top: var(--space-sm);
    }
  }
}


/* ============================================================
   RESPONSIVE — Mobile (unter 768px)
   ============================================================ */
@media (max-width: 768px) {

  /* Hero: übereinander statt nebeneinander */
  .hero .container {
    grid-template-columns: 1fr;
  }

  /* Würfel unter dem Text, kleiner */
  .hero__visual {
    order: -1; /* Würfel erscheint über dem Text auf Mobile */
  }

  .hero__cube {
    max-width: 280px;
  }
}

/* Bento-Grid: 3 Spalten → 2 Spalten (Tablet) → 1 Spalte (Mobile) */
@media (max-width: 900px) {
  .bento {
    grid-template-columns: repeat(2, 1fr);
  }
  .bento__cell--wide {
    grid-column: span 2;
  }
}

@media (max-width: 600px) {
  .bento {
    grid-template-columns: 1fr;
  }
  .bento__cell--wide,
  .bento__cell--media {
    grid-column: span 1;
  }
  .bento__cell--media {
    min-height: 160px;
  }
  /* Feste Headline-Größen: hält die Zellen-Headlines auch auf
     schmalen Screens bei maximal 2 Zeilen */
  .bento__cell h2 {
    font-size: 1.2rem;
  }
  .bento__cell--wide h2 {
    font-size: 1.35rem;
  }
}

@media (max-width: 640px) {

  /* Navigation: nur Logo + CTA-Button sichtbar */
  .nav__links a:not(.btn) { display: none; }

  /* Trust: untereinander statt nebeneinander */
  .trust__list { flex-direction: column; }

  /* CTA-Block: gestapelt */
  .cta-block {
    flex-direction: column;
    align-items: flex-start;
  }
}