/* ============================================================
   AQUA-STRUSCH · colors_and_type.css
   Verbindliche Farb- und Typo-Foundation (STY-D1, STY-D3).
   Fonts via Google Fonts CDN geladen (siehe Hinweis am Ende).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&family=Cormorant:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root {
  /* ---- Markenfarben (STY-D1, verbindlich) ---------------- */
  --petrol:        #234B4A;   /* Primär · Text auf Hell, BG auf Dark        */
  --dunkelpetrol:  #1B3A39;   /* Tiefe · Verlaufsende DARK                  */
  --kupfer:        #C17A3A;   /* Akzent · NIE flach, immer Verlauf          */
  --offwhite:      #F4EDE4;   /* Papier · BG Hell                           */

  /* Brücken-/Verlaufstöne (aus STY-D2 HELL DUNKLER) ------- */
  --sand:          #E2D8CB;   /* Verlaufsende HELL DUNKLER                  */
  --sand-tief:     #D9CFC0;   /* Karten-/Sektionsfläche auf Offwhite        */

  /* ---- Aqua-Blau (STY-D1b · Wasser / Funktion) ----------- */
  --aquablau:      #2A86B0;   /* Wasserton · Icons, Pfeile, Flüssigkeit     */
  --dunkelaqua:    #295776;   /* dunkles Paar · Text auf Hellaqua, Outline  */
  --hellaqua:      #B3D8E9;   /* Wäsche · Füllung Glas/Blase, Callout-BG    */

  /* ---- Kupfer-Verlauf (STY-D1: niemals flach) ------------ */
  --kupfer-grad: linear-gradient(105deg, #A8642F 0%, #E3A45C 52%, #B8743B 100%); /* @kind color */
  --kupfer-line: linear-gradient(90deg, #A8642F 0%, #E3A45C 50%, #B8743B 100%); /* @kind color */

  /* ---- Template-Hintergründe (STY-D2) -------------------- */
  --bg-hell:        var(--offwhite);
  --bg-hell-dunkel: radial-gradient(120% 120% at 50% 0%, #F4EDE4 0%, #E2D8CB 100%);
  --bg-dark:        radial-gradient(120% 130% at 50% 0%, #234B4A 0%, #1B3A39 100%);
  --bg-aqua:        linear-gradient(180deg, #F4EDE4 0%, #DCEAF2 100%); /* nur Wasser-/Datenfolien */

  /* ---- Semantische Textfarben ---------------------------- */
  --fg-on-light:        #234B4A;   /* Petrol-Text auf Hell/Sand   */
  --fg-on-light-soft:   #4C6968;   /* gedämpft, Sekundärtext      */
  --fg-on-dark:         #F4EDE4;   /* Offwhite auf Dark           */
  --fg-on-dark-soft:    #B9C7C6;   /* gedämpft auf Dark           */
  --fg-accent:          #C17A3A;   /* Kupfer (für Flächen Verlauf)*/
  --fg-aqua:            #2A86B0;   /* Wasser-Label/-Wert (selten) */
  --fg-aqua-on-dark:    #7FC0DD;   /* Aqua-Akzent auf Dark        */

  /* ---- Typografie (STY-D3) ------------------------------- */
  --font-struktur: 'Montserrat', system-ui, sans-serif;     /* Struktur, UI, Body */
  --font-statement: 'Cormorant', Georgia, 'Times New Roman', serif; /* Statements */

  /* Type-Skala (Carousel 4:5 @ 1080px Basis) --------------- */
  --t-kicker:    16px;   /* Label/Kicker, getrackt, uppercase */
  --t-body:      30px;   /* Fließtext Slide                   */
  --t-lead:      40px;   /* Lead / Hervorhebung               */
  --t-h2:        54px;   /* Slide-Zwischentitel               */
  --t-h1:        76px;   /* Hook / Haupttitel (Struktur)      */
  --t-statement: 96px;   /* Cormorant-Statement               */

  --lh-tight:    1.04; /* @kind font */
  --lh-snug:     1.18; /* @kind font */
  --lh-body:     1.42; /* @kind font */

  --tracking-kicker: 0.22em;
  --tracking-tight:  -0.01em;

  /* ---- Form / Material (STY-D5: Material > Grafik) ------- */
  --radius-card:  20px;
  --radius-chip:  999px;
  --hairline:     1px;
  --hairline-on-light: rgba(35,75,74,0.16);
  --hairline-on-dark:  rgba(244,237,228,0.18);

  /* sparsam eingesetzt — Premium heißt Fläche, nicht Schatten */
  --shadow-soft:  0 18px 40px -24px rgba(27,58,57,0.45);
  --shadow-lift:  0 30px 70px -36px rgba(27,58,57,0.55);
}

/* ============================================================
   SEMANTISCHE BASIS-STILE
   ============================================================ */

.as-kicker {
  font-family: var(--font-struktur);
  font-weight: 600;
  font-size: var(--t-kicker);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
}

.as-h1 {
  font-family: var(--font-struktur);
  font-weight: 700;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

.as-h2 {
  font-family: var(--font-struktur);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-snug);
  text-wrap: balance;
}

.as-statement {
  font-family: var(--font-statement);
  font-weight: 500;
  font-style: italic;
  font-size: var(--t-statement);
  line-height: var(--lh-tight);
  text-wrap: balance;
}

.as-lead {
  font-family: var(--font-struktur);
  font-weight: 500;
  font-size: var(--t-lead);
  line-height: var(--lh-snug);
}

.as-body {
  font-family: var(--font-struktur);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  text-wrap: pretty;
}

/* Kupfer als Textfläche (nur über background-clip, nie flach) */
.as-kupfer-text {
  background: var(--kupfer-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Kupferlinie oben (STY-D2) */
.as-kupfer-rule {
  height: 3px;
  width: 64px;
  border: 0;
  border-radius: 999px;
  background: var(--kupfer-line);
}

/* ============================================================
   HINWEIS ZU FONTS
   Montserrat + Cormorant sind die Markenfonts (STY-D3).
   Hier via Google Fonts CDN geladen statt lokaler TTF/WOFF.
   Falls lizenzierte Schriftdateien vorliegen, in /fonts ablegen
   und @import oben durch @font-face ersetzen.
   ============================================================ */