/* =================================================================
   UNEQ Design System — Colors & Typography
   Source: UNEQ_BrandGuideline2023_V2.pdf
   ================================================================= */

/* Montserrat — local, brand-supplied variable font (weight axis 100..900) */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-VariableFont_wght.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype-variations'),
       url('fonts/Montserrat-Italic-VariableFont_wght.ttf') format('truetype');
}

/* Mulish — still loaded from Google Fonts (no brand-supplied file yet) */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;500;600;700;800;900&display=swap');

:root {
  /* ---------- COLORS ---------- */
  /* Primary — UNEQ Ground (the dominant dark, used as background) */
  --uneq-ground:        #2B2931; /* UNEQ Blue */
  --uneq-blue:          #2B2931;
  --uneq-dark-blue:     #1F1D24;
  --uneq-light-blue:    #312F39;
  --uneq-apricot:       #FAB784; /* UNEQ Apricot. Legacy-Name: Peach (--uneq-peach bleibt als Alias) */
  --uneq-off-white:     #F6F4F1;
  --uneq-ground-90:     #2B2931E6;
  --uneq-ground-70:     #2B2931B3;
  --uneq-ground-soft:   #353340;   /* slight lift for cards on dark bg */
  --uneq-ground-deep:   #1F1D24;   /* deeper shade for layering */

  /* Secondary — UNEQ Apricot (the signature accent — lines, buttons, highlights) */
  --uneq-peach:         #FAB784;
  --uneq-peach-200:     #FCD2B0;

  /* Orange — UNEQ Orange (warm orange, used sparingly for accents:
     eyebrows, accent words, focus rings, indicators) */
  --uneq-orange:        #FBB040;

  /* Gold — UNEQ Gold (warm earth-beige; allowed as both AREA fill
     and HAIRLINES. Brings warmth to dark-heavy layouts.) */
  --uneq-gold:          #B89B5E; /* nur Ratgeber-Cover, nie mit Apricot */

  /* Gray — UNEQ Gray (mid neutral; STRICTLY for lines, dividers,
     and secondary metadata. Never a fill — it dulls the system.) */
  --uneq-gray:          #58595B;

  /* Legacy — Petrol. Vermeiden. Nur in bestehenden Legacy-Produkten. */
  --uneq-petrol-legacy: #00A79D;

  /* Ampel — nur Diagramme und Status */
  --uneq-signal-red:    #D9483B; /* UNEQ Rot */
  --uneq-red:           #D9483B;
  --uneq-signal-orange: #FBB040;
  --uneq-signal-green:  #3FA34D; /* UNEQ Grün */
  --uneq-green:         #3FA34D; /* alias */

  /* --- Legacy aliases (deprecated — keep so existing UI keeps working) --- */
  --uneq-highlight:     #FBB040; /* alias of --uneq-orange (legacy spelling) */
  --uneq-silver:        #58595B; /* alias of --uneq-gray */
  --uneq-earth:         #B89B5E; /* alias of --uneq-gold (legacy spelling) */

  /* Surface tones */
  --uneq-paper:         #FFFFFF;   /* light background option */
  --uneq-paper-soft:    #F6F4F1;   /* warm off-white */
  --uneq-paper-line:    #E8E3DD;   /* hairlines on paper */

  /* ---------- SEMANTIC FOREGROUNDS ---------- */
  --fg-on-dark-1:       #FFFFFF;        /* primary text on Ground */
  --fg-on-dark-2:       #C9C5CF;        /* secondary text on Ground */
  --fg-on-dark-3:       #8A8693;        /* tertiary / metadata */
  --fg-on-light-1:      var(--uneq-ground);
  --fg-on-light-2:      #5B5862;
  --fg-on-light-3:      #8A8693;

  /* Accents — highlights / focal points use Orange (#FBB040).
     Apricot (#FAB784) is reserved strictly for thin lines / outlines. */
  --accent:             var(--uneq-orange);

  /* Hairlines */
  --rule-on-dark:       rgba(255,255,255,0.08);
  --rule-on-light:      rgba(43,41,49,0.08);

  /* ---------- TYPOGRAPHY ---------- */
  --font-display:  'Montserrat', 'Helvetica Neue', Arial, sans-serif; /* SECONDARY in guide — used for headlines/buttons */
  --font-body:     'Mulish', 'Helvetica Neue', Arial, sans-serif;     /* PRIMARY in guide — body text */
  --font-mono:     ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Type scale (1.250 / Major Third) */
  --fs-display-xl: clamp(56px, 7vw, 96px); /* @kind font */
  --fs-display:    clamp(40px, 5vw, 64px); /* @kind font */
  --fs-h1:         clamp(32px, 3.6vw, 48px); /* @kind font */
  --fs-h2:         clamp(26px, 2.6vw, 36px); /* @kind font */
  --fs-h3:         22px; /* @kind font */
  --fs-h4:         18px; /* @kind font */
  --fs-body:       16px; /* @kind font */
  --fs-small:      14px; /* @kind font */
  --fs-caption:    12px; /* @kind font */
  --fs-eyebrow:    12px; /* @kind font */

  /* Line heights */
  --lh-tight:      1.05; /* @kind font */
  --lh-snug:       1.2; /* @kind font */
  --lh-normal:     1.55; /* @kind font */
  --lh-relaxed:    1.7; /* @kind font */

  /* Tracking */
  --tr-eyebrow:    0.18em; /* @kind font */
  --tr-button:     0.12em; /* @kind font */
  --tr-display:    -0.01em; /* @kind font */

  /* ---------- SPACING (8pt grid) ---------- */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;

  /* ---------- RADII ---------- */
  --r-none: 0; /* @kind radius */
  --r-sm:   2px;     /* UNEQ leans nearly-square — radii are minimal */
  --r-md:   4px;
  --r-lg:   8px;
  --r-pill: 999px;

  /* ---------- ELEVATION (used sparingly, mostly on light surfaces) ---------- */
  --shadow-1: 0 1px 2px rgba(43,41,49,0.06), 0 1px 1px rgba(43,41,49,0.04);
  --shadow-2: 0 6px 14px rgba(43,41,49,0.08), 0 2px 4px rgba(43,41,49,0.06);
  --shadow-3: 0 20px 40px rgba(43,41,49,0.18), 0 6px 12px rgba(43,41,49,0.10);

  /* Motion */
  --ease-out:  cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --dur-fast:  120ms; /* @kind other */
  --dur-base:  220ms; /* @kind other */
  --dur-slow:  420ms; /* @kind other */

  /* Default theme = dark (Ground). Override with .uneq-light. */
  --bg:        var(--uneq-ground);
  --fg-1:      var(--fg-on-dark-1);
  --fg-2:      var(--fg-on-dark-2);
  --fg-3:      var(--fg-on-dark-3);
  --rule:      var(--rule-on-dark);
}

.uneq-light {
  --bg:    var(--uneq-paper);
  --fg-1:  var(--fg-on-light-1);
  --fg-2:  var(--fg-on-light-2);
  --fg-3:  var(--fg-on-light-3);
  --rule:  var(--rule-on-light);
}

/* =================================================================
   SEMANTIC ELEMENTS
   ================================================================= */

body.uneq, .uneq {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.uneq h1, .uneq .h1,
.uneq h2, .uneq .h2,
.uneq h3, .uneq .h3,
.uneq h4, .uneq .h4 {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: var(--tr-display);
  line-height: var(--lh-tight);
  text-transform: uppercase;       /* Guideline shows headlines in CAPS */
  margin: 0 0 var(--sp-4);
  color: var(--fg-1);
}

.uneq .display-xl { font-size: var(--fs-display-xl); font-weight: 900; }
.uneq .display    { font-size: var(--fs-display);    font-weight: 900; }
.uneq h1, .uneq .h1 { font-size: var(--fs-h1); }
.uneq h2, .uneq .h2 { font-size: var(--fs-h2); }
.uneq h3, .uneq .h3 { font-size: var(--fs-h3); font-weight: 700; }
.uneq h4, .uneq .h4 { font-size: var(--fs-h4); font-weight: 700; }

.uneq .subhead {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-2);
}

/* Eyebrows: NEVER peach text. Foreground or muted; the peach is reserved
   strictly for thin lines/separators per brand rules. */
.uneq .eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tr-eyebrow);
  text-transform: uppercase;
  color: var(--fg-1);
}
.uneq .eyebrow--muted { color: var(--fg-3); }

.uneq p, .uneq .body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  text-wrap: pretty;
  margin: 0 0 var(--sp-4);
}

.uneq small, .uneq .small { font-size: var(--fs-small); color: var(--fg-3); }
.uneq .caption { font-size: var(--fs-caption); color: var(--fg-3); }

/* The signature peach line — strictly a thin line. Vertical, before
   headlines/blocks. Width is 2 px ("dezent") — never a thick bar.
   The padding gives the text a confident breath of room from the line. */
.uneq .peach-line {
  position: relative;
  padding-left: var(--sp-6);
}
.uneq .peach-line::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--uneq-peach);
}

/* Horizontal peach separator (for centered headlines, per guideline p.13).
   Thin line only — never a heavy fill. */
.uneq .peach-rule {
  display: block;
  width: 56px;
  height: 2px;
  background: var(--uneq-peach);
  border: 0;
  margin: var(--sp-5) auto;
}

/* Buttons — strict brand rules:
   - Apricot is ONLY allowed as a thin outline (or as the left accent line).
   - Apricot is NEVER used as a fill, NEVER as text color.
   - Default text color = foreground (white on dark, ground on light).
   - Hover = subtle foreground/border shift. No peach fill flashes. */
.uneq .btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 14px 22px 14px 26px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: var(--tr-button);
  text-transform: uppercase;
  text-decoration: none;
  background: transparent;
  color: var(--fg-1);
  border: 1px solid var(--uneq-peach);
  /* Outline buttons ALWAYS carry a thick peach accent on the left.
     The accent is the recognisable element — make it confident. */
  border-left-width: 6px;
  padding-left: 22px; /* compensate so label sits at same optical inset */
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}
.uneq .btn:hover {
  /* No fill flash. Just a slightly more visible peach outline. */
  border-color: var(--uneq-peach-700);
}
.uneq .btn:active { transform: translateY(1px); }

/* Primary: even thicker left accent line for the primary outline. */
.uneq .btn--primary {
  border-left-width: 9px;
  padding-left: 19px;
}
.uneq .btn--primary:hover {
  border-color: var(--uneq-peach-700);
}

/* Ghost: hairline border on neutral, peach only as the left accent. */
.uneq .btn--ghost {
  border: 1px solid var(--rule);
  border-left: 5px solid var(--uneq-peach);
  padding-left: 23px;
  color: var(--fg-1);
}
.uneq .btn--ghost:hover { border-color: var(--rule); border-left-color: var(--uneq-peach-700); }

/* Solid: ORANGE fill on Ground text. The ONLY area-fill button.
   Apricot is NEVER a fill — solids always use Orange (#FBB040).
   Text is ALWAYS dark, on every surface. */
.uneq .btn--solid {
  background: var(--uneq-orange);
  color: var(--uneq-ground) !important; /* text always dark, even inside dark panels */
  border: 1px solid var(--uneq-orange);
  border-left-width: 1px; /* no peach accent — the fill IS the accent */
  font-weight: 800;
}
.uneq .btn--solid:hover {
  background: #FFC15C; /* one step lighter, no peach */
  border-color: #FFC15C;
}

/* =================================================================
   LINE FEATURE — UNEQ's signature 45° peach diagonals
   ----------------------------------------------------
   Used on print + digital to symbolise UNEQ's pattern-based, individually
   tailored work: the same INTERNAL pattern (1 px peach, 12 px spacing,
   45° angle bottom-left → top-right), but the SHAPE/CROP is always different.
   Apply by adding `.uneq-lines` to any element. Combine with regular
   width/height/clip-path/border-radius to vary the silhouette.
   Rules: ALWAYS Apricot (#FAB784). ALWAYS 45°. ALWAYS equal line spacing.
   Lines should sit subtly behind/around content — never dominate.

   Density variants (tweak the LINE-spacing only, never the angle):
     .uneq-lines           = default (12px gap) — most uses
     .uneq-lines--tight    = 8px gap            — small accents
     .uneq-lines--loose    = 18px gap           — large fills, hero areas

   Opacity variants (subtle on photos, fuller on flat areas):
     .uneq-lines--soft     = 60% opacity (over photos)
     .uneq-lines--ghost    = 30% opacity (very subtle background fill) */
.uneq-lines {
  /* repeating-linear-gradient at 135° draws CONTINUOUS diagonal lines from
     bottom-left to top-right (CSS angle is measured from 12 o'clock clockwise,
     so 135° means the gradient runs ↘ which makes the LINES go ↗). One single
     canonical density: 1.2px peach line, 16px period. */
  background-image: repeating-linear-gradient(
    135deg,
    var(--uneq-peach) 0,
    var(--uneq-peach) 1.2px,
    transparent 1.2px,
    transparent 16px
  );
}
.uneq-lines--soft  { opacity: 0.60; }
.uneq-lines--ghost { opacity: 0.30; }

/* Code (rare in this brand but defined for completeness) */
.uneq code, .uneq .mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: rgba(255,255,255,0.06);
  padding: 1px 6px;
  border-radius: var(--r-sm);
}