/* =============================================================
   Julia Schütz Make up — Stylesheet
   Ausgelagert aus index.html (v0.8.0). Design-Tokens stehen
   ganz oben unter :root — dort anpassen, wirkt überall.
   ============================================================= */

  /* Lokale Schriften — Variable Fonts (Gewicht 300–700) */
  @font-face {
    font-family: "Fraunces";
    src: url("assets/fonts/fraunces.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Fraunces";
    src: url("assets/fonts/fraunces-italic.woff2") format("woff2");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
  }
  @font-face {
    font-family: "Hanken Grotesk";
    src: url("assets/fonts/hanken-grotesk.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: "Hanken Grotesk";
    src: url("assets/fonts/hanken-grotesk-italic.woff2") format("woff2");
    font-weight: 300 700;
    font-style: italic;
    font-display: swap;
  }

  /* ==============================================================
     DESIGN-TOKENS
     Alle Farben, Abstände und Schriften zentral — hier anpassen,
     wirkt überall.
     ============================================================== */
  :root {
    /* Farben — warme Neutraltöne, Terrakotta als einziger Akzent
       (abgeleitet aus dem Orange des JS-Logos) */
    --color-paper:      #F7F2E9;   /* Grundton: warmes Porzellan */
    --color-champagne:  #EFE6D8;   /* Flächen, Karten */
    --color-sand:       #E4D6C3;   /* Platzhalter, Linien auf hell */
    --color-espresso:   #35271B;   /* Text & dunkle Sektionen */
    --color-espresso-2: #413226;   /* Karten auf dunklem Grund */
    --color-taupe:      #6E6156;   /* gedämpfter Text */
    --color-terra:      #B74203;   /* Akzent: Orange aus dem JS-Logo, für Fließtext/Links (AA auf hell) */
    --color-terra-vivid: #D54E06;  /* Ungedämpftes Logo-Orange für große Überschriften-Akzente */
    --color-terra-soft: #E8824A;   /* Logo-Orange, aufgehellt für dunklen Grund */
    --color-rose:       #B8424C;   /* Akzent: Rosé aus dem JS-Logo (Nav-Text) */
    --color-rose-soft:  #E38A94;   /* Rosé, aufgehellt für dunklen Grund */
    --color-line:       color-mix(in srgb, var(--ink) 16%, transparent);  /* Haarlinien hell */
    --color-line-dark:  rgba(247, 242, 233, 0.18); /* Haarlinien auf fest-dunklen Flächen */
    --color-sand-2:     #EBDCC8; /* dritter Gradient-Stopp der Bild-Platzhalter */

    /* Toggle-fähige Oberfläche (Light/Dark Mode) — alles andere
       (dunkle Sektionen, Footer, Buttons) bleibt bewusst fest. */
    --paper: var(--color-paper);
    --ink:   var(--color-espresso);

    /* Typografie */
    --font-display: "Fraunces", Georgia, serif;
    --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;

    /* Typo-Skala (Mobile-first, wächst mit Viewport) */
    --text-hero:    clamp(2.75rem, 10vw, 7rem);
    --text-h2:      clamp(2rem, 5.5vw, 3.75rem);
    --text-h3:      clamp(1.25rem, 2.5vw, 1.6rem);
    --text-body:    clamp(1rem, 1.1vw, 1.125rem);
    --text-small:   0.875rem;
    --text-label:   0.75rem;

    /* Layout */
    --space-section: clamp(5rem, 12vw, 10rem);
    --space-inner:   clamp(1.25rem, 5vw, 4rem);
    --width-max:     1200px;
    --frame:         clamp(0.75rem, 2vw, 1.5rem); /* Hero-Rahmenabstand */
    --frame-top:     4.75rem; /* Rahmenabstand oben: unter dem fixierten Header hindurch */

    /* Bewegung */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur: 0.9s;
  }

  /* ==============================================================
     DARK MODE
     Nur die toggle-fähige Oberfläche (--paper/--ink) und die
     Akzentfarben wechseln. Die bewusst dunklen Flächen (Leistungen,
     Kundenstimmen, Footer, Buttons) bleiben unverändert dunkel —
     das erhält den redaktionellen Kontrast-Rhythmus des Designs.
     ============================================================== */
  :root[data-theme="dark"] {
    --paper: #17120F;
    --ink:   #F3ECE1;
    --color-champagne: #241C17;
    --color-sand:       #2E241D;
    --color-sand-2:     #332920;
    --color-taupe:      #B8A896;
    --color-terra:      #E8824A;
    --color-terra-soft: #F0A472;
    --color-rose:       #E68A93;
    --color-rose-soft:  #F2B4BB;
  }

  /* ==============================================================
     BASIS / RESET
     ============================================================== */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

  html { scroll-behavior: smooth; }

  /* Ankersprünge (nativ und per scrollIntoView) sollen unter dem fixierten
     Header landen, nicht dahinter — sonst verdeckt die Header-Leiste Eyebrow
     und Überschrift der Zielsektion (v. a. #ablauf/#kontakt mit padding-top:0). */
  :where(main section[id]) { scroll-margin-top: 5.5rem; }

  body {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 350;
    line-height: 1.7;
    color: var(--ink);
    background: var(--paper);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: background 0.4s ease, color 0.4s ease;
  }

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

  a { color: inherit; }

  h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.01em;
  }

  /* Sichtbarer Fokus-Stil für Tastaturnutzung */
  :focus-visible {
    outline: 2px solid var(--color-terra);
    outline-offset: 3px;
  }

  /* Skip-Link für Screenreader/Tastatur */
  .skip-link {
    position: absolute;
    top: -100%;
    left: 1rem;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background: var(--color-espresso);
    color: var(--color-paper);
    text-decoration: none;
  }
  .skip-link:focus { top: 1rem; }

  /* ==============================================================
     UTILITIES
     ============================================================== */
  .container {
    max-width: var(--width-max);
    margin-inline: auto;
    padding-inline: var(--space-inner);
  }

  /* Eyebrow — kleines Editorial-Label über Überschriften */
  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--color-terra);
    margin-bottom: 1.5rem;
  }
  .eyebrow::before {
    content: "";
    width: 2.5rem;
    height: 1px;
    background: currentColor;
  }

  .section-title { font-size: var(--text-h2); max-width: 18ch; }
  .section-title em {
    font-style: italic;
    color: var(--color-terra-vivid);
  }

  /* Scroll-Reveal: Elemente blenden sanft ein (JS + IntersectionObserver).
     --d steuert die Verzögerung pro Element für gestaffelte Effekte. */
  .reveal {
    opacity: 0;
    transform: translateY(2rem);
    transition:
      opacity var(--dur) var(--ease-out) var(--d, 0s),
      transform var(--dur) var(--ease-out) var(--d, 0s);
  }
  .reveal.is-visible { opacity: 1; transform: none; }
  /* Ohne JavaScript bleibt alles sichtbar */
  .no-js .reveal { opacity: 1; transform: none; }
  /* Ohne JS kann das Formular nicht senden (Versand läuft per fetch an
     /api/kontakt) — dann Hinweis mit Mail-Alternative zeigen und den
     Senden-Button verstecken, statt eines wirkungslosen Submits. */
  .form__nojs { display: none; }
  .no-js .form__nojs { display: block; }
  .no-js .form button[type="submit"] { display: none; }

  /* ==============================================================
     BILD-PLATZHALTER
     Zum Ersetzen: das innere <span> durch ein <img> austauschen, z. B.
     <img src="assets/images/braut-01.jpg" alt="Braut-Make-up: …"
          width="800" height="1067" loading="lazy">
     Das Seitenverhältnis (--ar) am <figure> beibehalten.
     ============================================================== */
  .ph {
    position: relative;
    aspect-ratio: var(--ar, 3 / 4);
    background:
      linear-gradient(160deg, var(--color-sand) 0%, var(--color-champagne) 55%, var(--color-sand-2) 100%);
    overflow: hidden;
  }
  .ph > span {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1rem;
    font-size: var(--text-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-taupe);
  }
  .ph img,
  .ph video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* In der Lightbox Medien vollständig zeigen (nicht beschneiden) — sonst
     schneidet object-fit: cover das Bild ab, wenn height:80vh + max-width:92vw
     das Seitenverhältnis auf schmalen Viewports verzerren. */
  .lightbox .ph img,
  .lightbox .ph video { object-fit: contain; background: #000; }

  /* ==============================================================
     HEADER
     ============================================================== */
  .site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 100;
  }
  /* Scroll-Hintergrund (Blur) liegt auf einem Pseudo-Element statt auf dem
     Header selbst: backdrop-filter auf dem Header würde ihn zum Containing
     Block für das fixed positionierte Mobile-Menü machen — das Overlay
     kollabiert dann auf die Header-Leiste und der Seiteninhalt scheint
     durch (Bug auf iOS Safari). */
  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--paper); /* Fallback für Browser ohne color-mix (deckend statt transparent) */
    background: color-mix(in srgb, var(--paper) 92%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 var(--color-line);
    opacity: 0;
    transition: opacity 0.4s ease;
  }
  .site-header.is-scrolled::before { opacity: 1; }
  .site-header__inner {
    max-width: var(--width-max);
    margin-inline: auto;
    padding: 0.9rem var(--space-inner);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
  }

  /* Logo: Bildmarke + Wortmarke */
  .brand {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;   /* erlaubt dem Flex-Item, unter die Inhaltsbreite zu schrumpfen */
    text-decoration: none;
  }
  .brand img {
    width: 44px;
    height: 44px;
    object-fit: contain;
    flex-shrink: 0;
  }
  .brand__name {
    font-family: var(--font-display);
    font-size: clamp(0.68rem, 3.15vw, 1.15rem);
    letter-spacing: 0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
  }
  .brand__name em { font-style: italic; color: var(--color-terra); }

  /* Navigation */
  .site-nav ul {
    display: flex;
    gap: clamp(1.25rem, 2.5vw, 2.25rem);
    list-style: none;
  }
  .site-nav a {
    position: relative;
    text-decoration: none;
    color: var(--color-rose);
    font-size: var(--text-small);
    font-weight: 450;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding-block: 0.4rem;
    transition: color 0.3s;
  }
  .site-nav a:hover,
  .site-nav a:focus-visible { color: var(--color-terra); }
  /* Mikro-Interaktion: Unterstrich wächst von links */
  .site-nav a::after {
    content: "";
    position: absolute;
    left: 0; right: 100%;
    bottom: 0;
    height: 1px;
    background: var(--color-terra);
    transition: right 0.35s var(--ease-out);
  }
  .site-nav a:hover::after,
  .site-nav a:focus-visible::after { right: 0; }

  /* ==============================================================
     HEADER-CONTROLS — Sprach- & Theme-Umschalter
     ============================================================== */
  .header-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: 600;
    letter-spacing: 0.06em;
    background: none;
    border: 1px solid var(--color-line);
    border-radius: 100px;
    padding: 0.4rem 0.7rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s;
  }
  .lang-toggle:hover, .lang-toggle:focus-visible { border-color: var(--color-terra); color: var(--color-terra); }
  .lang-toggle .sep { opacity: 0.4; }
  .lang-toggle [data-lang-current] { color: var(--color-terra); }

  .theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background: none;
    border: 1px solid var(--color-line);
    border-radius: 50%;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.3s, color 0.3s, transform 0.3s var(--ease-out);
  }
  .theme-toggle:hover, .theme-toggle:focus-visible {
    border-color: var(--color-terra);
    color: var(--color-terra);
    transform: rotate(14deg);
  }
  .theme-toggle svg { width: 18px; height: 18px; }
  .theme-toggle .icon-moon { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-sun { display: none; }
  :root[data-theme="dark"] .theme-toggle .icon-moon { display: block; }

  /* Burger-Button (nur mobil sichtbar) */
  .nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
  }
  .nav-toggle span {
    display: block;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.35s var(--ease-out), opacity 0.25s, background 0.4s ease;
  }

  @media (max-width: 480px) {
    .brand { gap: 0.5rem; }
    .brand img { width: 34px; height: 34px; }
    .header-controls { gap: 0.35rem; }
    .lang-toggle { padding: 0.35rem 0.5rem; }
  }

  @media (max-width: 820px) {
    .nav-toggle { display: flex; }
    .site-nav {
      position: fixed;
      inset: 0;
      z-index: 105;
      background: var(--paper);
      display: grid;
      place-items: center;
      overflow-y: auto;
      padding-block: 6rem 3rem;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.4s ease, visibility 0.4s;
      overscroll-behavior: contain; /* iOS: kein Scroll-Durchreichen an die Seite */
    }
    .site-nav ul {
      flex-direction: column;
      align-items: center;
      gap: 1.75rem;
    }
    .site-nav a {
      font-family: var(--font-display);
      font-size: 1.75rem;
      text-transform: none;
      letter-spacing: 0;
    }
    body.nav-open { overflow: hidden; }
    /* Bei offenem Menü den Scroll-Hintergrund des Headers ausblenden —
       das Overlay überdeckt ihn ohnehin vollflächig. */
    body.nav-open .site-header::before { opacity: 0; }
    body.nav-open .site-nav { opacity: 1; visibility: visible; }
    body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
    body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
    body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
    body.nav-open .header-controls { position: relative; z-index: 110; }
  }

  /* ==============================================================
     HERO — Magazin-Cover mit Haarlinien-Rahmen (Signature-Element)
     ============================================================== */
  .hero {
    position: relative;
    min-height: 100vh;  /* Fallback für Browser ohne svh-Support */
    min-height: 100svh;
    display: flex;
    align-items: center;
    padding: calc(var(--frame) + 5rem) calc(var(--frame) * 2) calc(var(--frame) + 3rem);
  }
  /* Der feine Doppelrahmen — wie eine Magazin-Titelseite */
  .hero::before {
    content: "";
    position: absolute;
    inset: var(--frame-top) var(--frame) var(--frame) var(--frame);
    border: 1px solid var(--color-line);
    pointer-events: none;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: calc(var(--frame-top) + 6px) calc(var(--frame) + 6px) calc(var(--frame) + 6px) calc(var(--frame) + 6px);
    border: 1px solid color-mix(in srgb, var(--ink) 7%, transparent);
    pointer-events: none;
  }

  .hero__inner {
    max-width: var(--width-max);
    margin-inline: auto;
    width: 100%;
    padding-inline: clamp(0.5rem, 3vw, 2rem);
  }

  /* Hero-Bild: mobil unter dem Text, ab 821px rechts daneben */
  .hero__media {
    position: relative;
    margin-top: clamp(2.5rem, 6vh, 3.5rem);
    aspect-ratio: 4 / 5;
    opacity: 0;
    /* Kein animation-delay: das Hero-Bild ist das LCP-Element, jede
       Verzögerung der Sichtbarkeit verschlechtert den LCP-Messwert direkt. */
    animation: fade-in 0.8s ease forwards;
  }
  .hero__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  /* Bilder-Rotation: übereinandergestapelte Slides, weiche Überblendung */
  .hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.4s var(--ease-out);
  }
  .hero__slide.is-active { opacity: 1; z-index: 1; }
  @media (prefers-reduced-motion: reduce) {
    .hero__slide { transition: none; }
  }
  /* Terrakotta-Passepartout wie in „Über mich" */
  .hero__media::before {
    content: "";
    position: absolute;
    inset: 0.9rem -0.9rem -0.9rem 0.9rem;
    border: 1px solid var(--color-terra);
    opacity: 0.4;
    z-index: -1;
  }

  @media (min-width: 821px) {
    .hero__inner {
      display: grid;
      grid-template-columns: 1fr minmax(300px, 0.82fr);
      align-items: center;
      gap: clamp(2rem, 5vw, 4.5rem);
    }
    .hero__media {
      margin-top: 0;
      aspect-ratio: 3 / 4;
      max-height: 74vh;  /* Fallback für Browser ohne svh-Support */
      max-height: 74svh;
      width: 100%;
      margin-inline: auto;
    }
  }

  .hero__kicker {
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-taupe);
    margin-bottom: clamp(1.5rem, 4vh, 3rem);
  }

  .hero h1 {
    font-size: var(--text-hero);
    font-weight: 380;
    line-height: 1.02;
    letter-spacing: -0.02em;
  }
  .hero h1 em {
    font-style: italic;
    font-weight: 340;
    color: var(--color-terra-vivid);
  }

  /* Gestaffelter Zeilen-Reveal beim Laden:
     jede Zeile schiebt sich aus einer unsichtbaren Maske nach oben */
  .hero .line {
    display: block;
    overflow: hidden;
  }
  .hero .line > span {
    display: block;
    transform: translateY(110%);
    animation: line-up 1.1s var(--ease-out) forwards;
  }
  .hero .line:nth-child(2) > span { animation-delay: 0.15s; }
  @keyframes line-up { to { transform: translateY(0); } }

  .hero__sub {
    max-width: 46ch;
    margin-top: clamp(1.5rem, 4vh, 2.5rem);
    color: var(--color-taupe);
    opacity: 0;
    animation: fade-in 1s ease 0.7s forwards;
  }

  .hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
    margin-top: clamp(2rem, 5vh, 3rem);
    opacity: 0;
    animation: fade-in 1s ease 0.95s forwards;
  }

  @keyframes fade-in { to { opacity: 1; } }

  /* Vertikale Bildunterschrift am Rahmenrand (Desktop) */
  .hero__side {
    position: absolute;
    right: calc(var(--frame) + 1.5rem);
    bottom: calc(var(--frame) + 2rem);
    writing-mode: vertical-rl;
    font-size: var(--text-label);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--color-taupe);
  }
  /* Vertikale Rand-Beschriftung entfällt, seit das Hero-Bild rechts steht */
  .hero__side { display: none; }

  /* Dezenter Scroll-Hinweis */
  .hero__scroll {
    position: absolute;
    left: 50%;
    bottom: calc(var(--frame) + 1.25rem);
    transform: translateX(-50%);
    width: 1px;
    height: 3rem;
    background: var(--color-line);
    overflow: hidden;
  }
  .hero__scroll::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-terra);
    transform: translateY(-100%);
    animation: scroll-hint 2.4s ease-in-out infinite;
  }
  @keyframes scroll-hint {
    0%   { transform: translateY(-100%); }
    55%  { transform: translateY(100%); }
    100% { transform: translateY(100%); }
  }
  /* Endlos-Animation pausieren, sobald das Hero aus dem Viewport gescrollt
     ist (Klasse setzt der Hero-IntersectionObserver) — spart Compositing. */
  .hero.hero--offscreen .hero__scroll::after { animation-play-state: paused; }

  /* ==============================================================
     BUTTONS
     ============================================================== */
  .btn {
    display: inline-block;
    padding: 1rem 2.5rem;
    font-family: var(--font-body);
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-paper);
    background: var(--color-espresso);
    border: 1px solid var(--color-espresso);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: color 0.35s var(--ease-out);
  }
  /* Mikro-Interaktion: Terrakotta-Fläche gleitet von unten ein */
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--color-terra);
    transform: translateY(101%);
    transition: transform 0.35s var(--ease-out);
    z-index: -1;
  }
  .btn:hover::before,
  .btn:focus-visible::before { transform: translateY(0); }

  .btn--light {
    color: var(--color-espresso);
    background: transparent;
    border-color: var(--color-espresso);
  }
  .btn--light:hover, .btn--light:focus-visible { color: var(--color-paper); }

  .btn--on-dark {
    color: var(--color-espresso);
    background: var(--color-paper);
    border-color: var(--color-paper);
  }
  .btn--on-dark:hover, .btn--on-dark:focus-visible { color: var(--color-paper); }

  /* Textlink mit Pfeil */
  .link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    border-bottom: 1px solid var(--color-line);
    padding-bottom: 0.3rem;
    transition: border-color 0.3s, gap 0.3s var(--ease-out);
  }
  .link-arrow:hover, .link-arrow:focus-visible {
    border-color: var(--color-terra);
    gap: 0.85rem;
  }

  /* ==============================================================
     SEKTIONEN — Grundlayout
     ============================================================== */
  .section { padding-block: var(--space-section); }
  .section--dark {
    background: var(--color-espresso);
    color: var(--color-paper);
  }
  .section--dark .eyebrow { color: var(--color-terra-soft); }
  .section--dark .section-title em { color: var(--color-terra-soft); }

  /* ==============================================================
     ÜBER MICH — asymmetrisches Editorial-Layout
     ============================================================== */
  .about {
    display: grid;
    gap: 3rem;
  }
  @media (min-width: 821px) {
    .about {
      grid-template-columns: 5fr 6fr;
      gap: clamp(3rem, 8vw, 7rem);
      align-items: center;
    }
    /* Bild leicht nach oben versetzt — bricht das starre Raster */
    .about__media { margin-top: -4rem; }
  }
  .about__media { position: relative; }
  /* Terrakotta-Linie als Passepartout-Detail hinter dem Bild */
  .about__media::before {
    content: "";
    position: absolute;
    inset: 1.25rem -1.25rem -1.25rem 1.25rem;
    border: 1px solid var(--color-terra);
    opacity: 0.45;
    z-index: -1;
  }
  .about__text p + p { margin-top: 1.25rem; }
  .about__text .lead {
    font-family: var(--font-display);
    font-size: var(--text-h3);
    font-style: italic;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 1.5rem;
  }
  .about__text p:not(.lead) { color: var(--color-taupe); }
  .about__sign {
    margin-top: 2rem;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.4rem;
    color: var(--color-terra);
  }

  /* ==============================================================
     LEISTUNGEN — Liste im Editorial-Stil (dunkle Sektion)
     ============================================================== */
  .services { margin-top: 3.5rem; }
  .service {
    display: grid;
    gap: 0.75rem;
    padding-block: clamp(1.75rem, 4vw, 2.75rem);
    border-top: 1px solid var(--color-line-dark);
  }
  .service:last-child { border-bottom: 1px solid var(--color-line-dark); }
  @media (min-width: 821px) {
    .service {
      grid-template-columns: 1fr 2fr auto;
      gap: 2.5rem;
      align-items: baseline;
    }
  }
  .service h3 {
    font-size: var(--text-h3);
    transition: color 0.3s;
  }
  .service:hover h3 { color: var(--color-terra-soft); }
  .service p {
    font-size: var(--text-small);
    color: rgba(247, 242, 233, 0.65);
    max-width: 52ch;
  }
  .service__price {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.05rem;
    color: var(--color-terra-soft);
    white-space: nowrap;
  }
  .services__note {
    margin-top: 2rem;
    font-size: var(--text-small);
    color: rgba(247, 242, 233, 0.55);
    max-width: 60ch;
  }

  /* ==============================================================
     PORTFOLIO — horizontal scrollende Editorial-Galerie
     (Signature-Element Nr. 2)
     ============================================================== */
  .gallery-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
  }
  .gallery-hint {
    font-size: var(--text-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-taupe);
  }

  .gallery {
    display: flex;
    gap: clamp(1rem, 2.5vw, 2rem);
    margin-top: 3rem;
    padding-inline: var(--space-inner);
    padding-bottom: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color: var(--color-terra) transparent;
    /* Wechselnde vertikale Versätze erzeugen den Editorial-Rhythmus */
  }
  .gallery::-webkit-scrollbar { height: 4px; }
  .gallery::-webkit-scrollbar-thumb { background: var(--color-terra); }
  .gallery::-webkit-scrollbar-track { background: var(--color-sand); }

  .gallery figure {
    flex: 0 0 auto;
    width: clamp(240px, 32vw, 400px);
    scroll-snap-align: start;
    cursor: zoom-in;
    border: none;
    background: none;
    padding: 0;
  }
  /* Jedes zweite Bild sitzt tiefer, jedes dritte ist schmaler —
     asymmetrischer Magazin-Look statt starrem Raster */
  .gallery figure:nth-child(even) { margin-top: 3.5rem; }
  .gallery figure:nth-child(3n)  { width: clamp(200px, 24vw, 310px); }

  .gallery .ph { transition: transform 0.5s var(--ease-out); }
  .gallery figure:hover .ph,
  .gallery figure:focus-visible .ph { transform: scale(0.975); }

  .gallery figcaption {
    margin-top: 0.9rem;
    font-size: var(--text-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-taupe);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
  }
  .gallery figcaption .n { color: var(--color-terra); }

  /* Play-Badge auf dem Video-Tile */
  .gallery__play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64px;
    height: 64px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: rgba(38, 29, 23, 0.45);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    border: 1px solid rgba(247, 242, 233, 0.7);
    pointer-events: none;
    transition: background 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  }
  .gallery__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 54%;
    transform: translate(-50%, -50%);
    border-style: solid;
    border-width: 10px 0 10px 16px;
    border-color: transparent transparent transparent var(--color-paper);
  }
  .gallery figure:hover .gallery__play,
  .gallery figure:focus-visible .gallery__play {
    background: var(--color-terra);
    transform: translate(-50%, -50%) scale(1.08);
  }

  /* ==============================================================
     ABLAUF — nummerierte Schritte (echte Sequenz)
     ============================================================== */
  .steps {
    margin-top: 3.5rem;
    display: grid;
    gap: 2.5rem;
  }
  @media (min-width: 821px) {
    .steps { grid-template-columns: repeat(4, 1fr); gap: 2rem; }
  }
  .step { position: relative; padding-top: 1.75rem; }
  .step::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 1px;
    background: var(--color-line);
  }
  /* Terrakotta-Segment markiert den Fortschritt der Linie */
  .step::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 2.5rem;
    height: 1px;
    background: var(--color-terra);
  }
  .step__num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.1rem;
    color: var(--color-terra);
  }
  .step h3 {
    font-size: 1.35rem;
    margin: 0.5rem 0 0.75rem;
  }
  .step p {
    font-size: var(--text-small);
    color: var(--color-taupe);
  }

  /* ==============================================================
     KUNDENSTIMMEN (dunkle Sektion)
     ============================================================== */
  .quotes {
    margin-top: 3.5rem;
    display: grid;
    gap: 2rem;
  }
  @media (min-width: 821px) {
    .quotes { grid-template-columns: repeat(3, 1fr); }
  }
  .quote {
    background: var(--color-espresso-2);
    padding: clamp(1.75rem, 3vw, 2.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    transition: transform 0.4s var(--ease-out);
  }
  .quote:hover { transform: translateY(-6px); }
  /* Großes Serif-Anführungszeichen als grafisches Element */
  .quote::before {
    content: "\201E";
    font-family: var(--font-display);
    font-size: 4.5rem;
    line-height: 0.4;
    color: var(--color-terra-soft);
    margin-top: 1.5rem;
  }
  .quote blockquote p {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.55;
  }
  .quote figcaption {
    margin-top: auto;
    font-size: var(--text-label);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: rgba(247, 242, 233, 0.55);
  }

  /* ==============================================================
     FAQ — native <details>, elegant gestylt
     ============================================================== */
  .faq { max-width: 780px; margin-top: 3.5rem; }
  .faq details { border-top: 1px solid var(--color-line); }
  .faq details:last-child { border-bottom: 1px solid var(--color-line); }
  .faq summary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1.5rem;
    padding-block: 1.5rem;
    font-family: var(--font-display);
    font-size: 1.25rem;
    cursor: pointer;
    list-style: none;
    transition: color 0.3s;
  }
  .faq summary::-webkit-details-marker { display: none; }
  .faq summary:hover { color: var(--color-terra); }
  /* Plus/Minus-Zeichen als Zustandsanzeige */
  .faq summary::after {
    content: "+";
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 1.5rem;
    color: var(--color-terra);
    flex-shrink: 0;
    transition: transform 0.3s var(--ease-out);
  }
  .faq details[open] summary::after { transform: rotate(45deg); }
  .faq details > p {
    padding: 0 2.5rem 1.75rem 0;
    color: var(--color-taupe);
    max-width: 62ch;
  }

  /* ==============================================================
     KONTAKT
     ============================================================== */
  .contact {
    display: grid;
    gap: 3.5rem;
    margin-top: 3.5rem;
  }
  @media (min-width: 821px) {
    .contact { grid-template-columns: 5fr 7fr; gap: clamp(3rem, 7vw, 6rem); }
  }
  .contact__info p { color: var(--color-taupe); max-width: 40ch; }

  /* Kontaktkanäle — Icon-Links mit sanfter Hover-Animation */
  .contact-channels {
    list-style: none;
    margin-top: 2.25rem;
    display: grid;
    gap: 1.1rem;
  }
  .social-link {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    text-decoration: none;
    padding-block: 0.15rem;
  }
  .social-link__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid var(--color-line);
    color: var(--ink);
    transition: background 0.4s var(--ease-out), color 0.4s var(--ease-out),
                border-color 0.4s var(--ease-out), transform 0.4s var(--ease-out);
  }
  .social-link__icon svg { width: 20px; height: 20px; }
  .social-link:hover .social-link__icon,
  .social-link:focus-visible .social-link__icon {
    background: var(--color-terra);
    border-color: var(--color-terra);
    color: var(--paper);
    transform: scale(1.12) rotate(-8deg);
  }
  .social-link__text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    color: var(--ink);
    transition: color 0.3s, transform 0.3s var(--ease-out);
  }
  .social-link:hover .social-link__text,
  .social-link:focus-visible .social-link__text {
    color: var(--color-terra);
    transform: translateX(0.3rem);
  }
  .social-link__text .label {
    display: block;
    font-size: var(--text-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-taupe);
  }
  @media (prefers-reduced-motion: reduce) {
    .social-link__icon, .social-link__text { transition: none; }
    .social-link:hover .social-link__icon, .social-link:focus-visible .social-link__icon { transform: none; }
    .social-link:hover .social-link__text, .social-link:focus-visible .social-link__text { transform: none; }
  }

  /* Formular */
  .form { display: grid; gap: 1.75rem; }
  @media (min-width: 600px) {
    .form { grid-template-columns: 1fr 1fr; }
    .form .full { grid-column: 1 / -1; }
  }
  .field { display: grid; gap: 0.5rem; }
  .field label {
    font-size: var(--text-label);
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-taupe);
  }
  .field input,
  .field select,
  .field textarea {
    font: inherit;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--color-line);
    padding: 0.6rem 0;
    border-radius: 0;
    transition: border-color 0.3s;
  }
  .hp-field {
    /* display:none statt off-screen: sonst füllen Browser-Autofill und
       Passwortmanager das Feld aus -> Server verwirft die echte Anfrage
       still als vermeintlichen Bot-Treffer (verlorener Lead). */
    display: none;
  }
  .field select { cursor: pointer; }
  .field textarea { resize: vertical; min-height: 7rem; }
  .field input:focus,
  .field select:focus,
  .field textarea:focus {
    outline: none;
    border-bottom-color: var(--color-terra);
  }
  .form__note {
    font-size: var(--text-small);
    color: var(--color-taupe);
  }
  /* Status-Meldung nach dem Absenden */
  .form__status {
    font-size: var(--text-small);
    color: var(--color-terra);
    min-height: 1.5em;
  }

  /* ==============================================================
     FOOTER
     ============================================================== */
  .site-footer {
    background: var(--color-espresso);
    color: var(--color-paper);
    padding-block: 4rem 2.5rem;
  }
  .site-footer__inner {
    display: grid;
    gap: 2.5rem;
  }
  @media (min-width: 821px) {
    .site-footer__inner {
      grid-template-columns: auto 1fr auto;
      align-items: center;
    }
  }
  .site-footer .brand img { width: 52px; height: 52px; }
  .site-footer nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem 2rem;
    list-style: none;
  }
  @media (min-width: 821px) { .site-footer nav ul { justify-content: center; } }
  .site-footer nav a,
  .site-footer__legal a {
    font-size: var(--text-small);
    text-decoration: none;
    color: rgba(247, 242, 233, 0.7);
    transition: color 0.3s;
  }
  .site-footer nav a:hover, .site-footer nav a:focus-visible,
  .site-footer__legal a:hover, .site-footer__legal a:focus-visible {
    color: var(--color-terra-soft);
  }
  .site-footer__legal {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
  }
  @media (min-width: 821px) { .site-footer__legal { text-align: right; } }
  .site-footer__copy {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--color-line-dark);
    font-size: var(--text-label);
    letter-spacing: 0.1em;
    color: rgba(247, 242, 233, 0.62); /* Kontrast auf Espresso: AA (4.5:1) für die kleine Schrift */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
  }

  /* ==============================================================
     RECHTSSEITEN (Impressum / Datenschutz)
     Als :target-Overlay in derselben Datei — funktioniert ohne JS.
     ============================================================== */
  .legal-page {
    position: fixed;
    inset: 0;
    z-index: 150;
    background: var(--paper);
    overflow-y: auto;
    display: none;
  }
  .legal-page:target { display: block; }
  /* Zuverlässiges Schließen per JS: history.replaceState aktualisiert :target
     nicht (das Element gilt weiter als :target, obwohl der Hash weg ist), daher
     überschreibt diese Klasse das :target-display. Höhere Spezifität (html + 2
     Klassen) sticht .legal-page:target sicher aus. */
  html.legal-dismissed .legal-page { display: none; }
  .legal-page__inner {
    max-width: 720px;
    margin-inline: auto;
    padding: clamp(4rem, 10vh, 7rem) var(--space-inner) 5rem;
  }
  .legal-page h2 {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 2rem;
  }
  .legal-page h3 {
    font-size: 1.15rem;
    margin: 2.25rem 0 0.75rem;
  }
  .legal-page p, .legal-page ul {
    color: var(--color-taupe);
    font-size: var(--text-small);
    line-height: 1.8;
  }
  .legal-page ul { padding-left: 1.25rem; }
  .legal-page p + p { margin-top: 0.75rem; }
  .legal-page .placeholder { color: var(--color-terra); font-weight: 500; }
  .legal-close {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 2.5rem;
    font-size: var(--text-small);
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--color-terra);
  }

  /* ==============================================================
     LIGHTBOX (Portfolio)
     ============================================================== */
  .lightbox {
    border: none;
    padding: 0;
    background: transparent;
    max-width: 92vw;
    width: auto;
  }
  .lightbox::backdrop { background: rgba(38, 29, 23, 0.88); }
  /* Medien über die Höhe skalieren, damit Hochformat mittig passt */
  .lightbox .ph {
    height: 80vh;   /* Fallback für Browser ohne svh-Support */
    height: 80svh;  /* svh: berücksichtigt eingeblendete iOS-Browserleisten */
    width: auto;
    max-width: 92vw;
    aspect-ratio: var(--ar, 3 / 4);
    margin-inline: auto;
  }
  .lightbox figcaption {
    margin-top: 1rem;
    text-align: center;
    font-size: var(--text-label);
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--color-paper);
  }
  .lightbox__close {
    position: absolute;
    top: -2.75rem;
    right: 0;
    background: none;
    border: none;
    color: var(--color-paper);
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
  }
  .lightbox form { position: relative; }

  /* ==============================================================
     REDUZIERTE BEWEGUNG — Animationen respektvoll deaktivieren
     ============================================================== */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
    }
    .reveal { opacity: 1; transform: none; }
    .hero .line > span { transform: none; animation: none; }
    .hero__sub, .hero__actions, .hero__media { opacity: 1; animation: none; }
  }