/* ============================================================
   SÜDRAMOL — Design System / colors_and_type.css
   ------------------------------------------------------------
   Tokens + semantische Helper für die Südramol-Dachmarke.
   Wird in jede Marketing-Seite eingebunden.
   ============================================================ */

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

:root {
  /* ---- Marken-Farben (direkt aus dem Logo-SVG extrahiert) ---- */
  --sued-blue:         #222165;  /* Primary — Südramol-Königsblau, tief und vertrauensvoll */
  --sued-blue-deep:    #17163F;  /* Tiefer Nachthimmel — Footer, deep hovers */
  --sued-blue-soft:    #2E2D80;  /* Weicher Blau-Ton für Cards/Zweit-Sektionen */

  --sued-orange:       #FF5F1E;  /* Signal-Orange — CTAs, Akzente, Sonne im Logo */
  --sued-orange-deep:  #E04D0E;  /* Hover-State und Zweit-Orange */
  --sued-orange-light: #FF8351;  /* Sanftes Orange für Highlights */

  --sued-sun:          #DCDBED;  /* Sonnen-Hell — sehr helles Lavendel-Grau vom Logo */
  --sun:               #DCDBED;  /* Alias — konsistent mit UI-Kit-Namensschema */

  /* ---- Neutrals — bayerisch-warm, nicht kalt ---- */
  --cream:             #FAF7F1;  /* Warmer Hintergrund, weicher als Weiß */
  --cream-dark:        #EFEAE0;  /* Hover-State für Cream-Cards */
  --paper:             #FFFFFF;  /* Für Karten auf Cream-Sektionen */
  --ink:               #1A1A22;  /* Dark text on light — nicht ganz Schwarz */
  --ink-soft:          #4A4A55;  /* Body-Text-Grau */
  --ink-muted:         #7A7A82;  /* Sekundär-Text, Labels */

  /* ---- Sub-Marken-Farben (aus Website-Logos identifiziert) ---- */
  /* Diese sind INFO, nicht standardmäßig verwendet — die Dachmarke
     bleibt bei Blau + Orange. Sub-Marken-Farben nur einsetzen wenn
     eine spezifische Sub-Marke visualisiert wird. */
  --ran-red:           #E30613;  /* RAN — Neon-Rot der Tankstellen-Leuchtreklame */
  --waschwelt-blue:    #009EE0;  /* WaschWelt — sauberes Aqua-Blau */
  --pizzabob-red:      #C8102E;  /* PIZZABOB — italienisches Rot */
  --pizzabob-yellow:   #FFC72C;  /* PIZZABOB — Gelb-Akzent */
  --marylou-green:     #A6CE39;  /* MARY LOU — frisches Kräuter-Grün */
  --brotzeit-brown:    #8B5E34;  /* BrotZeit — warmes Brotkrusten-Braun */

  /* ---- Lines / Borders ---- */
  --line:              rgba(34, 33, 101, 0.15);        /* blau-getönte Trennlinien */
  --line-strong:       rgba(34, 33, 101, 0.35);
  --line-warm:         rgba(255, 95, 30, 0.18);        /* Orange-Hairline */
  --line-inverse:      rgba(220, 219, 237, 0.18);      /* auf Dunkel: helles Lavendel */

  /* ---- Semantische Aliase ---- */
  --bg-primary:        var(--sued-blue);
  --bg-dark:           var(--sued-blue-deep);
  --bg-cream:          var(--cream);
  --bg-accent:         var(--sued-orange);
  --bg-paper:          var(--paper);

  --fg-on-dark:        var(--cream);
  --fg-on-cream:       var(--ink);
  --fg-on-orange:      var(--sued-blue-deep);
  --fg-accent:         var(--sued-orange);
  --fg-muted-dark:     rgba(250, 247, 241, 0.72);
  --fg-muted-light:    var(--ink-muted);

  /* ---- Typografie ---- */
  --font-serif:        "Merriweather", Georgia, "Times New Roman", serif;
  --font-sans:         "Fira Sans", -apple-system, BlinkMacSystemFont,
                       "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --tracking-tight:    -0.015em;   /* Displays */
  --tracking-normal:   0;
  --tracking-wide:     0.08em;     /* Buttons */
  --tracking-wider:    0.22em;     /* Eyebrows/Small-Caps */

  /* ---- Spacing-Skala (16 Stops, base 4px) ---- */
  --s-1:   4px;
  --s-2:   6px;
  --s-3:   8px;
  --s-4:  12px;
  --s-5:  16px;
  --s-6:  20px;
  --s-7:  24px;
  --s-8:  28px;
  --s-9:  32px;
  --s-10: 36px;
  --s-11: 40px;
  --s-12: 56px;
  --s-13: 64px;
  --s-14: 80px;
  --s-15: 96px;
  --s-16: 128px;

  /* ---- Layout ---- */
  --container-max:     1320px;
  --container-narrow:  980px;
  --gutter:            clamp(20px, 4vw, 64px);
  --section-y:         clamp(72px, 9vw, 128px);

  /* ---- Radien — freundlich, nicht scharf ---- */
  --radius-sm:         4px;
  --radius:            8px;         /* Standard für Cards und Buttons */
  --radius-lg:         16px;        /* Große Hero-Container */
  --radius-pill:       999px;       /* Für Tags und Pills */

  /* ---- Shadows / Elevation ---- */
  --shadow-card:       0 4px 20px rgba(34, 33, 101, 0.08);
  --shadow-card-hover: 0 8px 28px rgba(34, 33, 101, 0.14);
  --shadow-cta:        0 12px 32px rgba(255, 95, 30, 0.28);
  --shadow-lg:         0 24px 64px rgba(34, 33, 101, 0.18);
}

/* ============================================================
   Semantische Typografie-Helper — für konsistente Anwendung.
   ============================================================ */

/* Eyebrow — kleine Überschrift über einer Sektion, Sie-Form-freundlich */
.ds-eyebrow {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--sued-orange);
  margin: 0;
}
.ds-eyebrow--blue { color: var(--sued-blue); }
.ds-eyebrow--muted { color: var(--ink-muted); }

/* Display — Hero-Größe. Sans-Serif bold, freundlich, nicht editorial. */
.ds-h1, .ds-display {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(clamp(48px, 7vw, 96px) * var(--heading-scale, 1));
  line-height: 1.02;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Sektion-Headline groß */
.ds-h2 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(clamp(36px, 5vw, 64px) * var(--heading-scale, 1));
  line-height: 1.08;
  letter-spacing: var(--tracking-tight);
  margin: 0;
}

/* Sektion-Headline standard */
.ds-h3 {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: calc(clamp(28px, 3.5vw, 42px) * var(--heading-scale, 1));
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}

/* Card-Titel groß */
.ds-h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: calc(clamp(22px, 2.4vw, 28px) * var(--heading-scale, 1));
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0;
}

/* Card-Titel klein */
.ds-h5 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: 0;
  margin: 0;
}

/* Serif-Zitat — Merriweather italic für emotionale Passagen */
.ds-quote {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.4;
  color: var(--sued-blue);
  margin: 0;
}

/* Serif-Emphasis inline — für ein einzelnes Wort/Phrase in Headlines */
.ds-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  color: var(--sued-orange);
}

/* Lede — Intro-Absatz nach Headline */
.ds-lede {
  font-family: var(--font-sans);
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.55;
  font-weight: 400;
  color: var(--ink-soft);
  max-width: 62ch;
  text-wrap: pretty;
  margin: 0;
}

/* Body — Standard-Prosa */
.ds-body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.65;
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0;
}

/* Body Small — Card-Beschreibungen */
.ds-body-s {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink-soft);
  margin: 0;
}

/* Stat-Number — große Zahl (43 Tankstellen, 1961, 3. Generation, etc.) */
.ds-stat-num {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: clamp(40px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--sued-blue);
}
.ds-stat-num sup {
  font-size: 0.5em;
  vertical-align: super;
  font-weight: 600;
  margin-left: 4px;
  color: var(--sued-orange);
}

/* Stat-Label */
.ds-stat-label {
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--ink-muted);
  margin-top: 6px;
}

/* Button-Basis */
.ds-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-decoration: none;
  border: 0;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.ds-btn--primary {
  background: var(--sued-orange);
  color: var(--sued-blue-deep);
  box-shadow: var(--shadow-cta);
}
.ds-btn--primary:hover {
  background: var(--sued-orange-deep);
  transform: translateY(-1px);
}
.ds-btn--secondary {
  background: var(--sued-blue);
  color: var(--cream);
}
.ds-btn--secondary:hover {
  background: var(--sued-blue-deep);
  transform: translateY(-1px);
}
.ds-btn--ghost {
  background: transparent;
  color: var(--sued-blue);
  border: 2px solid var(--sued-blue);
}
.ds-btn--ghost:hover {
  background: var(--sued-blue);
  color: var(--cream);
}

.ds-tabular { font-variant-numeric: tabular-nums; }