/* Farb-, Schrift- und Layout-Tokens (Quelle: Paper-Datei „Digital Agency One“, Maße nach Template Unilook)
   Markenfarben, Schriften, Überschriften, Buttons, Abstände und Raster kommen aus ACSS
   (acss/acss-settings-2026-10-28_DAO.json) – dort ändern, dann ziehen alle Seiten mit.
   ACSS rechnet fließend zwischen 360 und 1200 px; das Design hat feste Stufen. Deshalb setzt diese Datei
   die ACSS-Variablen für Tablet (≤ 1199 px) und Mobil (≤ 767 px) unten fest. Sie muss NACH acss.css laden.
   Fein abgestimmte Zwischentöne (Leuchtflächen, Verläufe, Linien) bleiben eigene Werte. */
:root {
  /* Raster: ACSS liefert 1200 px (= vp-max), das Design 1380 px */
  --content-width: 1380px;

  /* Grundfarben */
  --dao-weiss: var(--white);
  --dao-seitengrund: var(--body-bg-color);
  --dao-kartengrund: #f3f5fb;
  --dao-linie: #e6e9f3;
  --dao-linie-stark: #dce2f2;
  --dao-fliesstext: var(--neutral);
  --dao-text-platzhalter: #8a90a8;
  --dao-fehler: #c2334d;         /* fehlende Pflichtangabe (Fördercheck) */
  --dao-navy: var(--base);
  --dao-blau: var(--primary);
  --dao-blau-mittel: #2a33b0;
  --dao-nachtblau: #161c80;      /* dunkler Hero-Verlauf, Mitte */
  --dao-nachtblau-tief: #0a0e55; /* dunkler Hero-Verlauf, unten */
  --dao-hellblau: var(--secondary);
  --dao-blau-hell: #d6e2ff;
  --dao-blau-pastell: #c9d6ff;   /* Fördercheck: Kachel 80 % */
  --dao-blauverlauf-start: #dce5ff;
  --dao-blauverlauf-ende: #f1f4fc;
  --dao-badge-grund: #e9eefb;
  --dao-badge-rand: #c9d4f5;
  --dao-dunkellila: var(--tertiary);
  --dao-lila-kachel: #dccbf6;
  --dao-lila-rand: #e7dbf7;
  --dao-lilaverlauf-start: #ece1fb;
  --dao-lilaverlauf-ende: #f6f2fd;

  /* Leuchtflächen im Hintergrund (radiale Verläufe) */
  --dao-glow-lila: #eee3fb;
  --dao-glow-blau: #dee6ff;
  --dao-glow-blau-hell: #e2e9ff;
  --dao-glow-blau-stark: #dce6ff; /* Seitenkopf-Verlauf, Mitte oben */
  --dao-glow-blau-mitte: #eef2fd;
  --dao-seitengrund-0: #f6f7fb00; /* Seitengrund, voll transparent – Endpunkt der Verläufe */

  /* Weiß mit Deckkraft – für Texte, Linien und Flächen auf Navy */
  --dao-weiss-04: #ffffff0b;
  --dao-weiss-05: #ffffff0d;
  --dao-weiss-06: #ffffff0f;
  --dao-weiss-07: #ffffff12;
  --dao-weiss-08: #ffffff14; /* Hilfslinien auf Navy */
  --dao-weiss-10: #ffffff1a;
  --dao-weiss-12: #ffffff1f;
  --dao-weiss-13: #ffffff21;
  --dao-weiss-15: #ffffff26;
  --dao-weiss-16: #ffffff29;
  --dao-weiss-20: #ffffff33;
  --dao-weiss-40: #ffffff66;
  --dao-weiss-45: #ffffff73;
  --dao-weiss-50: #ffffff80;
  --dao-weiss-60: #ffffff99;
  --dao-weiss-65: #ffffffa6;
  --dao-weiss-70: #ffffffb3;
  --dao-weiss-75: #ffffffbf;
  --dao-weiss-80: #ffffffcc;
  --dao-weiss-85: #ffffffd9;

  /* Navy, Blau und Hellblau mit Deckkraft – für Schatten, Überlagerungen und Verläufe */
  --dao-navy-00: color-mix(in srgb, var(--dao-navy) 0%, transparent);
  --dao-navy-18: color-mix(in srgb, var(--dao-navy) 18%, transparent);
  --dao-navy-20: color-mix(in srgb, var(--dao-navy) 20%, transparent);
  --dao-navy-25: color-mix(in srgb, var(--dao-navy) 25%, transparent);
  --dao-navy-35: color-mix(in srgb, var(--dao-navy) 35%, transparent);
  --dao-navy-45: color-mix(in srgb, var(--dao-navy) 45%, transparent);
  --dao-navy-50: color-mix(in srgb, var(--dao-navy) 50%, transparent);
  --dao-mitternacht-55: #0102288c; /* Preisfeld auf dem dunklen Preis-Kasten */
  --dao-blau-25: color-mix(in srgb, var(--dao-blau) 25%, transparent);
  --dao-blau-35: color-mix(in srgb, var(--dao-blau) 35%, transparent);
  --dao-blau-70: color-mix(in srgb, var(--dao-blau) 70%, transparent);
  --dao-hellblau-00: color-mix(in srgb, var(--dao-hellblau) 0%, transparent);
  --dao-hellblau-70: color-mix(in srgb, var(--dao-hellblau) 70%, transparent);
  --dao-hellblau-90: color-mix(in srgb, var(--dao-hellblau) 90%, transparent);
  --dao-flieder-00: #b794f400;
  --dao-flieder-80: #b794f4cc;

  /* Weitere Leuchtflächen (Verlaufsstufen) */
  --dao-glow-blau-zart: #e4ebff;  /* Deutschlandkarte, blauer Schimmer */
  --dao-glow-blau-kuehl: #e7edff; /* Kundenstimmen-Verlauf */
  --dao-glow-lila-zart: #f1eefb;  /* Kundenstimmen-Verlauf */

  /* Platzhalter-Flächen (Avatare) und Rasterlinien */
  --dao-avatar-dunkel: #2c2e2e;
  --dao-avatar-tief: #1c1e1e;
  --dao-avatar-grau: #999999;
  --dao-avatar-warm: #55524e;
  --dao-avatar-hell: #c9c8c5;
  --dao-rasterlinie: #e3e2df;      /* Raster hinter den Kundenstimmen */

  /* Schatten */
  --dao-schatten-navy: 0 16px 32px -14px color-mix(in srgb, var(--dao-navy) 60%, transparent);
  --dao-schatten-blau: 0 14px 28px -14px color-mix(in srgb, var(--dao-blau) 60%, transparent);
  --dao-schatten-hellblau: 0 14px 32px -12px color-mix(in srgb, var(--dao-hellblau) 55%, transparent);

  /* Schriften (Mono hat in ACSS keine eigene Variable, nur die Button-Schrift) */
  --dao-font: var(--text-font-family);
  --dao-font-mono: "DM Mono", ui-monospace, monospace;

  /* Typografie-Stufen: Größe und Laufweite aus ACSS, Zeilenhöhe in px wie Paper */
  --dao-h1-size: var(--h1);     /* Seitentitel (Hero) */
  --dao-h1-line: 88px;
  --dao-h1-spacing: var(--h1-letter-spacing);
  --dao-h2-size: var(--h2);     /* Sektionstitel */
  --dao-h2-line: 66px;
  --dao-h2-spacing: var(--h2-letter-spacing);
  --dao-h3-size: var(--h3);     /* Aussage-Titel (Über uns, Wirkung) */
  --dao-h3-line: 46px;
  --dao-h3-spacing: var(--h3-letter-spacing);

  /* Buttons */
  --dao-button-height: 50px;
  --dao-button-padding: var(--btn-padding-inline); /* links/rechts */

  /* Abstände */
  --dao-section-space: var(--section-padding-block); /* oben/unten je Sektion */

  /* Seitenrand wie Template (Unilook): mind. Gutter (30 px), Inhalt max. 1380 px breit und mittig */
  --dao-content: var(--content-width);
  --dao-gutter: max(var(--gutter), calc((100% - var(--dao-content)) / 2));

  /* Höhe der Navigation; der erste Abschnitt jeder Seite rückt seinen Inhalt um diesen Wert nach unten */
  --dao-header-height: 90px;
}

/* Tablet und Mobil: feste Stufen statt fließender ACSS-Werte (gilt auch für Überschriften ohne dao-Klasse) */
@media (max-width: 1199px) {
  :root {
    --h1: 66px;
    --h1-letter-spacing: -0.05em;
    --h2: 48px;
    --h3: 34px;
    --text-l: 20px;              /* Einleitung/Kartentitel 24 → 20 px */
    --btn-padding-inline: 22px;
    --btn-padding-block: 14px;   /* ACSS-Buttons 48 px hoch */
    --section-padding-block: 100px;
    --gutter: 48px;

    --dao-h1-line: 72px;
    --dao-h2-line: 53px;
    --dao-h3-line: 38px;
    --dao-button-height: 48px;
    --dao-header-height: 86px;
  }
}

@media (max-width: 767px) {
  :root {
    --h1: 30px;
    --h1-letter-spacing: -0.04em;
    --h2: 32px;
    --h2-letter-spacing: -0.04em;
    --h3: 26px;
    --btn-padding-inline: 15px;
    --btn-padding-block: 11px;   /* ACSS-Buttons 42 px hoch */
    --section-padding-block: 60px;
    --gutter: 20px;

    --dao-h1-line: 33px;
    --dao-h2-line: 35px;
    --dao-h3-line: 30px;
    --dao-button-height: 42px;
    --dao-header-height: 66px;
  }
}

/* ACSS setzt bei Überschriften und Fließtext text-wrap: balance/pretty – Paper bricht normal um */
[class*="dao-"] {
  text-wrap: wrap;
}

/* Hilfsklassen für Texte, die nur auf Mobil anders lauten */
.dao-only-mobile {
  display: none;
}

@media (max-width: 767px) {
  .dao-only-mobile {
    display: inline;
  }

  .dao-hide-mobile {
    display: none;
  }
}