/* ============================================================
   TANJAX — Designsystem
   Jerry-Vorgabe: warmes Weiss, dunkles Blau, dezentes
   mediterranes Tuerkis. Hochwertig, ruhig, keine KI-Klischees.
   Alle Farbpaare rechnerisch gegen WCAG AA geprueft (Werte im
   Kommentar = gemessen, nicht geschaetzt).
   ============================================================ */

/* ---------- 1. TOKENS ---------- */
:root{
  /* Grundflaechen — warmes Weiss statt Kaltweiss: Mittelmeerlicht */
  --paper:      #FBF8F3;   /* Grundflaeche */
  --paper-warm: #F4EFE6;   /* Sektionswechsel, 2. Stufe */
  --paper-pure: #FFFFFF;   /* Karten auf paper */

  /* Dunkles Blau — Tiefe und Textanker */
  --ink:        #0E2233;   /* Haupttext, dunkle Flaechen — 15.30:1 auf paper */
  --ink-soft:   #16314A;   /* dunkle Flaeche, 2. Stufe   — 12.61:1 */
  --ink-raise:  #1D3E5C;   /* erhoehte Flaeche auf dunkel (Karten) */

  /* Mediterranes Tuerkis — DEZENT. Gedeckt, kein Pool-Blau.
     Zwei Toene, weil ein Ton nie auf hell UND dunkel AA haelt. */
  --aqua:       #277575;   /* auf paper — 5.10:1, AA auch fuer Text */
  --aqua-hi:    #7FD4D4;   /* auf ink   — 9.47:1 */
  --aqua-veil:  rgba(39,117,117,.10);
  --aqua-line:  rgba(39,117,117,.26);

  /* Sand — waermender Gegenpol, sparsam */
  --sand:       #C8A87C;   /* auf ink — 7.22:1 */
  /* --sand haelt auf hellem Grund nur 2.12:1. Ein Ton kann nicht auf hell UND
     dunkel AA halten; deshalb ein zweiter, dunklerer fuer helle Flaechen. */
  --sand-lo:    #8A6834;   /* auf paper — 4.82:1, ab 11px AA */
  --sand-text:  #6E5526;   /* auf sand-veil über paper — 5.71:1, AA für Kleintext */
  --sand-veil:  rgba(200,168,124,.14);

  /* Text */
  --text:        var(--ink);
  --text-muted:  #44535F;        /* auf paper — 7.49:1 */
  --text-soft:   #5A6B78;        /* auf paper — 5.20:1 */
  --text-label:  #64737F;        /* auf paper — 4.61:1, ab 12px AA */
  --text-inv:    #FBF8F3;        /* auf ink   — 15.30:1 */
  --text-inv-mut:#B6C6D1;        /* auf ink   —  9.25:1 */

  /* Linien */
  --line:       #E6DFD3;
  --line-str:   #D4CABA;
  --line-inv:   rgba(251,248,243,.14);
  --bw:         1px;

  /* Schrift — Fraunces (humanistische Serif, warm) + Inter.
     Bewusst NICHT das c-mate-Paar: Space Grotesk traegt
     Schach-Autoritaet, hier braucht es Seriositaet mit Waerme. */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-text:    'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Typo-Skala */
  --t-display: clamp(2.1rem, 1.3rem + 3.6vw, 4.25rem);
  --t-h1:      clamp(2.0rem, 1.35rem + 2.9vw, 3.75rem);
  --t-h2:      clamp(1.6rem, 1.25rem + 1.7vw, 2.6rem);
  --t-h3:      clamp(1.2rem, 1.08rem + .6vw, 1.55rem);
  --t-lead:    clamp(1.0625rem, .99rem + .4vw, 1.3rem);
  --t-body:    clamp(1rem, .975rem + .12vw, 1.0625rem);
  --t-small:   .9375rem;
  --t-micro:   .8125rem;

  --lh-display: 1.04;
  --lh-head:   1.14;
  --lh-body:   1.65;
  --tr-display:-.022em;
  --tr-head:   -.015em;
  --tr-label:   .14em;

  /* Abstand */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;

  --sect:   clamp(68px, 3.5rem + 5.5vw, 150px);
  --sect-s: clamp(44px, 2.25rem + 3.6vw, 96px);

  --wrap:     1240px;
  --wrap-nar: 940px;
  --measure:  62ch;
  --gut:      clamp(20px, 1rem + 2.2vw, 52px);

  --r-sm: 6px;
  --r:    12px;
  --r-lg: 22px;

  --ease: cubic-bezier(.22,.61,.36,1);
  --focus: 2px;
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:var(--s9)}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--font-text);font-size:var(--t-body);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%}
/* list-style:none global NICHT setzen — das hat in c-mate die Marker
   stillschweigend entfernt. Listen werden pro Komponente geregelt. */
ul,ol{margin:0;padding:0}
button,input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
:focus-visible{outline:var(--focus) solid var(--aqua);outline-offset:3px;border-radius:2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;
    scroll-behavior:auto!important}
}

/* ---------- 3. TYPOGRAFIE ---------- */
h1,h2,h3{
  font-family:var(--font-display);font-weight:500;
  margin:0;color:var(--text);
}
.t-display{font-family:var(--font-display);font-weight:500;font-size:var(--t-display);
  line-height:var(--lh-display);letter-spacing:var(--tr-display)}
.t-h1{font-family:var(--font-display);font-weight:500;font-size:var(--t-h1);
  line-height:var(--lh-head);letter-spacing:var(--tr-display)}
.t-h2{font-family:var(--font-display);font-weight:500;font-size:var(--t-h2);
  line-height:var(--lh-head);letter-spacing:var(--tr-head)}
.t-h3{font-family:var(--font-display);font-weight:500;font-size:var(--t-h3);
  line-height:1.3;letter-spacing:-.01em}
.t-lead{font-size:var(--t-lead);line-height:1.52;color:var(--text-muted);max-width:var(--measure)}
.t-body{font-size:var(--t-body);color:var(--text-muted);max-width:var(--measure)}
.t-small{font-size:var(--t-small);color:var(--text-muted)}
.t-micro{font-size:var(--t-micro);color:var(--text-label)}
p{margin:0}

.label{
  font-family:var(--font-text);font-size:var(--t-micro);font-weight:600;
  letter-spacing:var(--tr-label);text-transform:uppercase;color:var(--aqua);
}
.on-ink .label{color:var(--aqua-hi)}

/* ---------- 4. LAYOUT ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.wrap-nar{max-width:var(--wrap-nar);margin-inline:auto;padding-inline:var(--gut)}
.sect{padding-block:var(--sect)}
.sect-s{padding-block:var(--sect-s)}
.on-warm{background:var(--paper-warm)}
.on-ink{background:var(--ink);color:var(--text-inv)}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--text-inv)}
.on-ink .t-lead,.on-ink .t-body,.on-ink .t-small{color:var(--text-inv-mut)}

/* ---------- 5. MARKE ---------- */
.logo{display:inline-flex;align-items:baseline;gap:.42em;text-decoration:none}
.logo__word{
  font-family:var(--font-display);font-weight:600;font-size:21px;
  letter-spacing:.02em;color:var(--ink);
}
.logo__by{
  font-family:var(--font-text);font-size:12.5px;font-weight:500;
  color:var(--text-soft);letter-spacing:.01em;
}
.on-ink .logo__word{color:var(--text-inv)}
.on-ink .logo__by{color:var(--text-inv-mut)}

/* ---------- 6. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:14px 26px;border-radius:999px;border:var(--bw) solid transparent;
  font-family:var(--font-text);font-size:var(--t-small);font-weight:600;
  text-decoration:none;cursor:pointer;
  transition:background 180ms var(--ease),color 180ms var(--ease),
             border-color 180ms var(--ease),transform 180ms var(--ease);
}
.btn--primary{background:var(--aqua);color:#fff}
.btn--primary:hover{background:#1E5F5F;transform:translateY(-1px)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-str)}
.btn--ghost:hover{border-color:var(--aqua);color:var(--aqua)}
.on-ink .btn--ghost{color:var(--text-inv);border-color:var(--line-inv)}
.on-ink .btn--ghost:hover{border-color:var(--aqua-hi);color:var(--aqua-hi)}
.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;pointer-events:none;
}