/* ==========================================================================
   dream-art-bau — Design-Tokens

   Leitmotiv: „Präzisionsraster trifft diagonalen Schnitt."
   Das orthogonale Fugenraster der Pflaster-/Plattenflächen aus den echten
   Fotos gegen die Diagonalbalken des Logos. Alles Ruhige liegt im Raster,
   jede Betonung kommt aus der Diagonale.

   Farbwelt: dark-first. Das Logo trägt weißes Script — es funktioniert nur
   auf dunklem Grund. Die Steintöne sind aus den Projektfotos abgeleitet
   (helle Großformatplatte, Betongrau, Splittbeige, Anthrazit).
   ========================================================================== */

:root {
  /* --- Marke ------------------------------------------------------------ */
  /* Aus dem Logo gemessen (dominanter Buntton der Diagonalbalken). */
  --orange: #f09c00;
  --orange-hot: #ffb01f;
  --orange-deep: #c47c00;
  --orange-ink: #1a1200;

  /* --- Grundflächen: Tiefe entsteht durch gestapelte Ebenen ------------- */
  --void: #08080a; /* tiefster Grund, hinter allem */
  --base: #0d0d10; /* Seitengrund */
  --panel: #141419; /* gehobene Fläche */
  --panel-2: #1b1b22; /* zweite Stufe */
  --panel-3: #23232b; /* Karten-Hover, Eingabefelder */
  --edge: #2e2e38; /* Trennkante */
  --edge-soft: #21212a;

  /* --- Stein: aus den Fotos abgeleitete Neutraltöne --------------------- */
  --stone-050: #f2efea; /* Großformatplatte hell */
  --stone-200: #d8d3ca;
  --stone-300: #b6b0a6; /* Splittbeige */
  --stone-500: #85807a;
  --stone-600: #6b6660;
  --stone-700: #4a4642; /* Betongrau dunkel */
  --anthrazit: #26262a; /* Randeinfassung, Zaun */

  /* --- Text ------------------------------------------------------------- */
  --ink: #f4f2ef;
  --ink-2: #c9c5be;
  --ink-3: #8f8a83;
  --ink-4: #6a655f;
  --ink-invert: #101013;

  /* --- Typografie ------------------------------------------------------- */
  --display: 'Cabinet Grotesk', 'Satoshi', system-ui, sans-serif;
  --text: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Fließende Skala. Referenz 390px → 1600px Viewport. */
  --step--2: clamp(0.72rem, 0.7rem + 0.1vw, 0.78rem);
  --step--1: clamp(0.84rem, 0.81rem + 0.15vw, 0.94rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.13rem);
  --step-1: clamp(1.2rem, 1.12rem + 0.35vw, 1.5rem);
  --step-2: clamp(1.45rem, 1.3rem + 0.7vw, 2.05rem);
  --step-3: clamp(1.8rem, 1.5rem + 1.3vw, 2.9rem);
  --step-4: clamp(2.2rem, 1.65rem + 2.4vw, 4.1rem);
  --step-5: clamp(2.7rem, 1.7rem + 4.3vw, 5.9rem);
  --step-6: clamp(3.2rem, 1.5rem + 7.4vw, 8.6rem);

  /* --- Raster und Rhythmus ---------------------------------------------- */
  --gutter: clamp(1.15rem, 0.7rem + 1.9vw, 2.6rem);
  --measure: 64ch;
  --shell: 1560px; /* äußere Begrenzung */
  --content: 1180px; /* Textspalten-Begrenzung */

  --sp-1: 0.35rem;
  --sp-2: 0.6rem;
  --sp-3: 0.95rem;
  --sp-4: 1.45rem;
  --sp-5: 2.2rem;
  --sp-6: 3.4rem;
  --sp-7: clamp(3.4rem, 2.3rem + 4.6vw, 6rem);
  /* Sektionsabstand: großzügig, aber nicht so groß, dass zwischen zwei
     Abschnitten eine leere Bildschirmhöhe steht. */
  --sp-8: clamp(4.4rem, 2.8rem + 6.4vw, 8rem);

  /* --- Diagonale: das Logo-Motiv als Systemgröße ------------------------ */
  --brand-angle: 45deg; /* Winkel der Logo-Balken */
  --cut: 4.2vw; /* Höhe eines diagonalen Schnitts */
  --cut-soft: 2.2vw;

  /* --- Kanten und Erhebung ---------------------------------------------- */
  --r-sm: 2px;
  --r-md: 3px;
  --r-lg: 4px;
  /* Bewusst fast rechtwinklig: gebaute Flächen haben Kanten, keine Pillen. */

  --shadow-1: 0 1px 0 rgb(255 255 255 / 4%) inset, 0 2px 12px rgb(0 0 0 / 45%);
  --shadow-2: 0 1px 0 rgb(255 255 255 / 5%) inset, 0 12px 40px rgb(0 0 0 / 55%);
  --shadow-3: 0 1px 0 rgb(255 255 255 / 6%) inset, 0 28px 80px rgb(0 0 0 / 65%);
  --glow: 0 0 0 1px rgb(240 156 0 / 35%), 0 10px 46px rgb(240 156 0 / 14%);

  /* --- Erhebung auf der Startseite: harter, gerichteter Schlagschatten ----
     Lichtwinkel oben links, entnommen aus detail-plattenfuge. Weiche
     Schatten sind auf der Startseite nicht mehr zugelassen. */
  --cast: 8px 8px 0 rgb(0 0 0 / 55%);
  --cast-sm: 4px 4px 0 rgb(0 0 0 / 50%);

  /* --- Materialtöne, aus den Fotos gemessen ------------------------------
     Nur als 1-2-px-Kante und als Labelfarbe. Nie als Fläche. */
  --klinker: #7a4038;
  --kalkstein: #cfc8bb;
  --wasser: #4b6f68;
  --beton: #8e8b85;
  --edelstahl: linear-gradient(100deg, #6e737a, #c3c8cd 45%, #6e737a);

  /* Phasenwort: eigene Stufe, weil --step-6 für Versalsatz zu groß ist. */
  --step-phase: clamp(2.4rem, 1.1rem + 6.2vw, 7.4rem);

  /* Grundton des Phasenlaufs. Drei Werte, gesetzt über html[data-phase]. */
  --ground: #0d0d10;

  /* --- Bewegung --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-snap: cubic-bezier(0.34, 1.4, 0.64, 1);
  --t-fast: 160ms;
  --t-mid: 340ms;
  --t-slow: 720ms;

  --header-h: 76px;
}

@media (max-width: 720px) {
  :root {
    --header-h: 62px;
    --cut: 7vw;
  }
}

/* --------------------------------------------------------------------------
   Grundton des Phasenlaufs.
   Nur drei Werte - mehr wäre am Bildschirm nicht mehr prüfbar. Registriert
   als echte Farbe, damit der Wechsel weich läuft statt zu springen; ohne
   @property sind Custom Properties diskret und die Transition wirkt nicht.
   -------------------------------------------------------------------------- */
@property --ground {
  syntax: '<color>';
  inherits: true;
  initial-value: #0d0d10;
}

html {
  --ground: #0d0d10;
  transition: --ground 900ms var(--ease-in-out, ease);
}

html[data-phase='00'],
html[data-phase='01'],
html[data-phase='02'] {
  --ground: #0c0a09;
}

html[data-phase='03'],
html[data-phase='04'] {
  --ground: #0d0d10;
}

html[data-phase='05'],
html[data-phase='06'] {
  --ground: #0a0d10;
}

@media (prefers-reduced-motion: reduce) {
  html,
  html[data-phase] {
    --ground: #0d0d10;
    transition: none;
  }
}

/* Helle Sektionen kehren die Textrollen um, ohne ein zweites Theme zu bauen. */
.on-stone {
  --ink: #17171a;
  --ink-2: #3f3d3a;
  --ink-3: #6e6a64;
  --ink-4: #8d8880;
  --edge: #cfc9c0;
  --edge-soft: #ded8cf;
  --panel: #eae5dd;
  --panel-2: #e2ddd3;
  --panel-3: #d8d2c7;
}

/* --------------------------------------------------------------------------
   Mobile Abstandsskala.
   Gemessen bei 390px: --sp-6 54,4 / --sp-7 54,74 / --sp-8 70,4 px. Die
   Sektionstrennung und die Blocktrennung waren mit 0,34 px Unterschied nicht
   unterscheidbar. Neu sind es drei klar getrennte Stufen: 32 / 41,6 / 54,4 px.
   Der Textgutter bleibt bei 20 px - die Textbreite ist gemessen richtig
   (45,6 Zeichen je Zeile) und wird hier nicht angetastet.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  :root {
    --gutter: 20px;
    --sp-6: 2rem;
    --sp-7: 2.6rem;
    --sp-8: 3.4rem;
  }
}