/* ══════════════════════════════════════════════════════════════════════
   EXPERTEN1.DE — Skin „Fachredaktion"

   Papierweiß, Flaschengrün, Messing für die Auszeichnung. Editorial-Serife
   mit hohem Strichkontrast als Display, ruhige Grotesk im Fließtext.

   Die Leitidee: eine Fachzeitschrift, kein Software-Produkt. Deshalb warme
   statt kühle Flächen, Haarlinien statt Schattenkästen, fast rechte Winkel
   statt weicher Radien — und eine Serife, die man liest, nicht überfliegt.

   Diese Datei wird NACH topexperte.css geladen und schreibt dessen
   Token-Ebene um. Bauteile werden nur dort angefasst, wo die Tokens allein
   den Charakter nicht tragen.
   ══════════════════════════════════════════════════════════════════════ */

/* ─── Schriften ─── */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('/static/fonts/instrument-sans-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-stretch:100%;font-display:swap;src:url('/static/fonts/instrument-sans-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/instrument-serif-latin.woff2') format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url('/static/fonts/instrument-serif-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ─── Token-Ebene ─── */
:root {
  /* Grün-Rampe ersetzt die Blau-Rampe. Die Variablennamen bleiben, damit
     jede Regel des Basis-Systems ohne Änderung weiterträgt. */
  --blue-50:  #EDF2EE;
  --blue-100: #D8E4DB;
  --blue-200: #B6CDBC;
  --blue-400: #4E7C68;
  --blue-500: #2C6250;
  --blue-600: #1F4E3D;   /* PRIMÄR */
  --blue-700: #16382B;   /* Hover */
  --blue-800: #102A20;
  --blue-900: #0E251C;

  /* Warme Grau-Rampe: Papier statt Bildschirm. Slate ist blaustichig und
     würde neben dem Grün kalt und technisch wirken. */
  --slate-50:  #FAF8F4;
  --slate-100: #F4F1EA;
  --slate-200: #E7E2D7;
  --slate-300: #D5CFC1;
  --slate-400: #A9A294;
  --slate-500: #7C766A;
  --slate-600: #5C5750;
  --slate-700: #3E3B35;
  --slate-800: #232120;
  --slate-900: #14140F;
  --slate-950: #0B0B08;

  /* Messing statt Gold — matter, weniger Pokal, mehr Prägestempel. */
  --gold:      #B5893C;
  --gold-dark: #7E5E27;
  --gold-tint: rgba(181, 137, 60, 0.14);
  --gold-tint-strong: rgba(181, 137, 60, 0.30);

  --surface:      #FAF8F4;
  --surface-alt:  #F4F1EA;
  --surface-tint: #EDF2EE;
  --surface-dark: #14140F;

  --border:        #E7E2D7;
  --border-strong: #D5CFC1;
  --border-brand:  #D8E4DB;

  /* Fast rechte Winkel. Ein 12-Pixel-Radius ist die Handschrift von
     Software; Druckerzeugnisse haben Kanten. */
  --r-xs: 1px;  --r-sm: 2px;  --r: 2px;   --r-md: 3px;
  --r-lg: 3px;  --r-xl: 4px;  --r-2xl: 4px; --r-3xl: 6px;
  --r-pill: 100px;

  /* Schatten werden warm und sehr flach — sie sollen Papierlagen andeuten,
     nicht schwebende Karten. */
  --shadow-xs: 0 1px 0 rgba(20, 20, 15, 0.05);
  --shadow-sm: 0 1px 2px rgba(20, 20, 15, 0.05);
  --shadow:    0 2px 6px rgba(20, 20, 15, 0.06);
  --shadow-md: 0 4px 12px rgba(20, 20, 15, 0.07);
  --shadow-lg: 0 8px 22px rgba(20, 20, 15, 0.08);
  --shadow-xl: 0 16px 40px rgba(20, 20, 15, 0.10);
  --shadow-brand:    0 2px 10px rgba(31, 78, 61, 0.18);
  --shadow-brand-lg: 0 10px 28px rgba(31, 78, 61, 0.22);

  /* Schleier in Flaschengrün statt Cobalt. */
  --brand-schleier-06: rgba(31, 78, 61, .06);
  --brand-schleier-08: rgba(31, 78, 61, .08);
  --brand-schleier-09: rgba(31, 78, 61, .09);
  --brand-schleier-14: rgba(31, 78, 61, .14);
  --brand-schleier-20: rgba(31, 78, 61, .20);
  --brand-schleier-22: rgba(31, 78, 61, .22);
  --brand-schleier-24: rgba(31, 78, 61, .24);
  --brand-schleier-28: rgba(31, 78, 61, .28);
  --brand-schleier-30: rgba(31, 78, 61, .30);
  --brand-schleier-32: rgba(31, 78, 61, .32);
  --brand-schleier-35: rgba(31, 78, 61, .35);
  --brand-schleier-42: rgba(31, 78, 61, .42);

  --font-sans:    'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-display: 'Instrument Serif', Georgia, 'Times New Roman', serif;
}

/* ─── Typografie ─── */
/* Der Charakter der Marke steckt in den Überschriften: hoher Strichkontrast,
   normale Strichstärke, große Grade, enger Zeilenabstand. Fett gesetzt
   verliert Instrument Serif genau die Eleganz, für die sie gewählt wurde —
   deshalb 400 statt 700. */
h1, h2, h3,
.hp-hero h1, .hp-sec-head h2,
.angebot-hero h1, .p-card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.012em;
  line-height: 1.08;
}
h1 { font-size: clamp(38px, 5.4vw, 66px); font-weight: 400; letter-spacing: -0.016em; }
h2 { font-size: clamp(29px, 3.7vw, 44px); }
h3 { font-size: 25px; }
h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; }

body { letter-spacing: 0; }
p { line-height: 1.68; }

/* Kapitälchen-Marken mit weiter Laufweite — die Rubrikenschilder einer
   Zeitschrift. */
.t-caps, .hp-sec-tag, .p-tier, .quiz-step-tag, .ei-badge {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 600;
  font-size: 10.5px;
}

::selection { background: var(--gold-tint-strong); color: var(--ink); }

/* ─── Wortmarke ─── */
/* „Experten" in der Serife, die „1" als gesetzte Ziffer in Messing —
   hochgestellt wie eine Fußnotenziffer im Satz. */
.logo {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 25px;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}
.logo-wort { color: var(--ink); }
.logo-ziffer {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 0.52em;
  color: var(--gold);
  transform: translateY(-0.62em);
  letter-spacing: 0;
}
.navbar.scrolled .logo-wort { color: var(--ink); }
.footer .logo-wort { color: var(--text-on-dark, #FAF8F4); }
.mob-drawer .logo { font-size: 21px; }

/* ─── Navigation ─── */
/* Haarlinie statt Schatten: Die Leiste sitzt auf dem Papier, sie schwebt
   nicht darüber. */
.navbar {
  background: rgba(250, 248, 244, 0.92);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
}
.navbar.scrolled {
  box-shadow: none;
  border-bottom-color: var(--border-strong);
}
.nav-links a, .nav-dropdown-toggle {
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.005em;
}
/* Der aktive Punkt bekommt einen Unterstrich statt einer Pille — die
   Auszeichnung eines Registers, nicht eines Reiters. */
.nav-links a.active, .nav-dropdown-toggle.active {
  background: none;
  color: var(--brand);
  box-shadow: inset 0 -2px 0 var(--brand);
  border-radius: 0;
}

/* ─── Bedienelemente ─── */
.btn {
  font-family: var(--font-sans);
  font-weight: 600;
  letter-spacing: 0.005em;
  border-radius: var(--r-sm);
}
.btn-primary {
  background: var(--brand);
  box-shadow: none;
}
.btn-primary:hover {
  background: var(--brand-hover);
  box-shadow: var(--shadow-brand);
}
.btn-outline {
  border: 1px solid var(--ink);
  color: var(--ink);
}
.btn-outline:hover {
  background: var(--ink);
  color: var(--surface);
}

/* ─── Flächen und Karten ─── */
.card, .expert-card, .p-card, .art-card {
  border: 1px solid var(--border);
  box-shadow: none;
  background: var(--surface);
}
.card:hover, .expert-card:hover, .art-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow);
  transform: none;          /* kein Anheben — Papier hebt nicht ab */
}

/* Marginal-Ziffern: Abschnittsköpfe tragen links eine hochgestellte Zahl,
   wie die Kapitelzählung eines Fachbeitrags. Rein dekorativ, deshalb
   aria-versteckt über ::before statt echtem Text. */
.hp-sec-head, .angebot-hero { position: relative; }

/* ─── Auszeichnung ─── */
/* Messing bleibt der Auszeichnung vorbehalten und taucht sonst nirgends auf.
   Genau das macht ihn zum Signal. */
.award-badge, .pt-badge, .p-card.award .p-tier {
  color: var(--gold-dark);
  background: var(--gold-tint);
  border: 1px solid var(--gold);
  border-radius: var(--r-xs);
}
/* .p-tier ist im Basis-System ein Block ohne Innenabstand. Mit Rahmen und
   Fläche wäre das ein randloser Balken über die volle Kartenbreite — als
   Plakette braucht es eigene Maße. */
.p-card.award .p-tier {
  display: inline-block;
  padding: 3px 11px;
  letter-spacing: 0.16em;
}
.p-card.award { border-color: var(--gold); }
.p-card.feat  { border-color: var(--brand); border-width: 2px; }
.feat-badge {
  background: var(--brand);
  border-radius: var(--r-xs);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
}

/* ─── Footer ─── */
.footer { background: var(--surface-dark); }
.footer h4 {
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.16em;
  font-size: 10.5px;
  font-weight: 600;
}

/* ─── Formulare ─── */
.form-input, .form-select, .form-textarea, input[type="text"],
input[type="email"], input[type="password"], input[type="tel"], textarea, select {
  border-radius: var(--r-sm);
  border-color: var(--border-strong);
  background: var(--surface);
}
.form-input:focus, input:focus, textarea:focus, select:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-tint);
}

/* ─── Feinheiten ─── */
/* Ziffern in Tabellen und Preisen laufen auf gleicher Breite — sonst
   zappeln sie beim Umschalten zwischen Monats- und Jahrespreis. */
.price-val, .p-now, .stat-num, .pagination a {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.price-val, .p-now {
  font-family: var(--font-display);
  font-weight: 400;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}