/* ==========================================================================
   Seatsandstays — Theme "Kompass" (Variante C)
   Drop-in-Override. NACH points4you.css laden:

     <link rel="stylesheet" href="/assets/css/points4you.css">
     <link rel="stylesheet" href="/assets/css/theme-kompass.css">

   Prinzip: points4you.css bleibt unangetastet. Diese Datei setzt nur die
   Design-Tokens neu (dadurch zieht das ganze Bestandssystem automatisch mit)
   und formt danach gezielt Header, Marke und ein paar Akzente um.
   Kein Build-Schritt: Datei ändern, hochladen, fertig.
   ========================================================================== */

/* -------------------------------------------------- Schriften (selbst hosten)
   Die beiden woff2 müssen nach /assets/fonts/ kopiert werden — Google Fonts
   nicht direkt einbinden (Abmahnrisiko, siehe Kommentar in points4you.css).
   Quelle: fonts.google.com/specimen/Cormorant+Garamond  bzw.  /specimen/Archivo
   Variable Fonts nutzen, dann reicht je eine Datei.                          */

@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond.woff2") format("woff2-variations"),
       url("../fonts/cormorant-garamond.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-italic.woff2") format("woff2-variations"),
       url("../fonts/cormorant-garamond-italic.woff2") format("woff2");
  font-weight: 300 700;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo.woff2") format("woff2-variations"),
       url("../fonts/archivo.woff2") format("woff2");
  font-weight: 400 650;
  font-style: normal;
  font-display: swap;
}

/* ============================================================ 1. Farbtokens
   Weniger Beige als im ersten Entwurf: die Flächen sind jetzt kühl-grünliches
   Off-White, das Grün trägt die Marke, Gold ist nur Akzent.
   Die Namen bleiben wie gehabt (--cream, --terra, --sage …), damit jede
   bestehende Regel und jedes inline style="background:var(--terra)" mitzieht. */

:root {
  /* Flächen */
  --cream:      #F4F6F1;  /* Seitenhintergrund — grünliches Off-White */
  --cream-deep: #E8EDE4;  /* zweite Fläche, Hover, Platzhalter */
  --paper:      #FFFFFF;  /* Karten */

  /* Text */
  --ink:        #12271C;  /* Tannengrün statt Schwarzbraun */
  --ink-soft:   #33473B;
  --muted:      #546A58;

  /* Linien */
  --line:       #D3DCCF;
  --line-soft:  #E4EBE0;

  /* Akzent: Gold ist der Markenakzent, --terra bleibt als Name bestehen,
     damit alle Bestandsregeln funktionieren. */
  --terra:      #96702C;  /* Goldbronze */
  --terra-deep: #7E6021;  /* dunkler, für Links und Hover — 5,9:1 auf --paper */
  --terra-wash: #F5EEDC;

  /* Nebenakzente */
  --plum:       #3B5244;  /* aus Lila auf Waldgrün gedreht */
  --plum-wash:  #E8EDE6;
  --sage:       #4A6B52;
  --sage-wash:  #E9EFE9;
  --gold:       #C39A32;
  --gold-wash:  #F7F1DE;
  --gold-ink:   #7E6021;

  /* Dunkle Fläche (Deals-Block, Footer, Kennzahlen) */
  --forest:     #0F2118;
  --forest-2:   #16311F;

  /* Typografie */
  --display: "Cormorant Garamond", Garamond, "Iowan Old Style", Palatino, Georgia, serif;
  --sans: "Archivo", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Form: kantiger als vorher — Reisejournal, nicht App */
  --radius: .25rem;
  --shadow: 0 2px 24px rgba(15, 33, 24, .07);
}

/* Cormorant läuft klein und dünn — Display-Größen brauchen etwas mehr
   Gewicht und Laufweite, sonst wirken Überschriften blass. */
h1, h2, h3, h4 { font-weight: 500; letter-spacing: 0; }
.hero-title, .prose h2 { letter-spacing: .005em; }

::selection { background: var(--forest); color: #fff; }
:focus-visible { outline-color: var(--gold); }

/* Die runden Sonderradien im Bestand mitziehen */
.hero,
.mobile-nav .m-kids a,
section[style*="border-radius:1.75rem"] { border-radius: .25rem !important; }
.btn, .pill, .chip, .lang, .lang a, .icon-btn { border-radius: 2px; }

/* ====================================================== 2. Kopf: dunkelgrün
   Der Header ist die auffälligste Änderung: dunkelgrüne Fläche, goldene
   Wortmarke, goldener Newsletter-Knopf. Er sitzt als ruhiger Block über der
   hellen Seite und macht die Marke sofort erkennbar.                        */

.site-head {
  background: var(--forest);
  border-bottom: 1px solid var(--forest);
  color: #F1F4EC;
}
.site-head.scrolled {
  background: rgba(15, 33, 24, .94);
  border-bottom-color: rgba(195, 154, 50, .35);
  backdrop-filter: blur(12px);
}

/* Wortmarke */
.logo-word { color: #F4F1DF; letter-spacing: .01em; font-style: italic; }
.logo-word span { color: var(--gold); }
.logo-sub { color: rgba(244, 241, 223, .6); }

/* Bildmarke: Kreis mit Horizontlinie. Liegt als SVG-Datei daneben und wird
   in layout.php vor .logo-word eingesetzt (siehe HANDOFF.md, Schritt 3). */
.logo { flex-direction: row; align-items: center; gap: .6875rem; }
.logo-mark { width: 30px; height: 30px; flex: none; }
.logo-mark .ring { stroke: #F4F1DF; }
.logo-mark .horizon, .logo-mark .dot { stroke: var(--gold); fill: var(--gold); }

/* Wortmarke + Untertitel müssen in einem gemeinsamen Wrapper stehen, weil
   .logo oben auf flex-direction:row gestellt wurde (Bildmarke links, Text
   rechts). Ohne diese Regel stünden Bildmarke, Wortmarke und Untertitel
   alle nebeneinander in einer Reihe. Siehe HANDOFF.md, Schritt 3. */
.logo-text { display: flex; flex-direction: column; line-height: 1; }

/* Navigation */
.nav-link { color: rgba(244, 241, 223, .72); }
.nav-link:hover, .nav-item:hover .nav-link, .nav-link.active { color: #FFFFFF; }
.nav-link.active::after { background: var(--gold); }
.nav-caret { opacity: .6; }
.nav-drop ul { background: var(--forest-2); border-color: rgba(195, 154, 50, .28); }
.nav-drop a { color: rgba(244, 241, 223, .78); }
.nav-drop a:hover { background: rgba(195, 154, 50, .16); color: #FFFFFF; }

/* Werkzeuge rechts */
.icon-btn { color: rgba(244, 241, 223, .78); }
.icon-btn:hover { background: rgba(244, 241, 223, .1); color: #FFFFFF; }
.lang { border-color: rgba(195, 154, 50, .5); }
.lang a { color: rgba(244, 241, 223, .7); }
.lang a.on { background: var(--gold); color: var(--forest); }

/* Der Newsletter-Knopf im Kopf ist .btn-primary — im Header golden statt
   dunkel, sonst verschwindet er in der grünen Fläche. */
.site-head .btn-primary { background: var(--gold); color: var(--forest); }
.site-head .btn-primary:hover { background: #D8AD3F; color: var(--forest); }

/* Mobiles Menü klappt in der gleichen dunklen Fläche auf */
.mobile-nav { background: var(--forest-2); border-top-color: rgba(195, 154, 50, .28); }
.mobile-nav .m-item { border-bottom-color: rgba(244, 241, 223, .12); }
.mobile-nav .m-top { color: #F4F1DF; }
.mobile-nav .m-kids a { border-color: rgba(244, 241, 223, .22); color: rgba(244, 241, 223, .75); }
.mobile-nav .btn-primary { background: var(--gold); color: var(--forest); }

/* ================================================= 3. Dunkle Flächen im Body
   Deals-Block, Footer und Kennzahlen laufen im Bestand auf var(--ink).
   Das ist jetzt Tannengrün — hier auf das tiefere Forest ziehen, damit die
   Blöcke sich vom Text abheben.                                             */

.site-foot { background: var(--forest); }
.foot-news { background: var(--forest-2); }
section[style*="background:var(--ink)"] { background: var(--forest) !important; }

/* Textfarben im Footer: --muted/--ink/--ink-soft/--line sind fuer hellen
   Grund gedacht und wurden auf dem jetzt dunklen Forest praktisch
   unlesbar (Rueckmeldung: Newsletter-Ueberschrift kaum zu sehen). Hier
   gezielt fuer den dunklen Footer aufgehellt. */
.site-foot h2, .site-foot h3 { color: var(--cream); }
.site-foot .eyebrow { color: var(--gold); }
.site-foot .muted { color: rgba(244, 246, 241, .7); }
.site-foot .foot-cols a { color: rgba(244, 246, 241, .68); }
.site-foot .foot-cols a:hover { color: var(--cream); }
.site-foot .socials a { border-color: rgba(244, 246, 241, .3); color: rgba(244, 246, 241, .75); }
.site-foot .socials a:hover { border-color: var(--gold); color: var(--gold); }
.site-foot .foot-news { border-bottom-color: rgba(244, 241, 223, .14); }
.site-foot .foot-legal { border-top-color: rgba(244, 241, 223, .14); }

/* Kennzahlenleiste (neu, siehe HANDOFF.md Schritt 5) */
.metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 1px;
  margin: 2.5rem 0;
  background: rgba(244, 241, 223, .14);
  border-radius: .25rem;
  overflow: hidden;
}
.metrics > div { background: var(--forest); padding: 1.25rem 1.125rem; }
.metrics dt {
  font-size: .625rem; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: rgba(244, 241, 223, .55);
}
.metrics dd {
  margin: .75rem 0 0; font-family: var(--display); font-size: 1.6875rem;
  line-height: 1; color: #FFFFFF; font-variant-numeric: tabular-nums;
}
.metrics-label {
  margin: 0 0 1.25rem; font-size: .6875rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--gold);
}

/* Themen-Schnellzugriff auf der Startseite, direkt unter dem Hero: auf dem
   Handy sind die Kategorien sonst erst nach mehreren Bildschirmhoehen
   erreichbar (Rueckmeldung anhand reisetopia.de). Eine Zeile, horizontal
   scrollbar, ohne sichtbaren Scrollbalken. */
.topic-pills {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding-bottom: .25rem;
}
.topic-pills::-webkit-scrollbar { display: none; }
.topic-pill {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex: none;
  white-space: nowrap;
  padding: .5rem .875rem;
  border: 1px solid var(--line);
  border-radius: 2px;
  background: var(--paper);
  color: var(--ink);
  text-decoration: none;
  font-size: .8125rem;
  letter-spacing: .02em;
}
.topic-pill:hover, .topic-pill:focus-visible { border-color: var(--gold); color: var(--gold-ink); }
.topic-pill-dot { width: .5rem; height: .5rem; border-radius: 50%; flex: none; }

/* ============================================================ 4. Feinschliff */

/* Kategorie-Chips: im Bestand kommt die Farbe aus der Datenbank
   (style="background:<?= $post['category_accent'] ?>"). Bis die Werte in der
   DB auf die neue Palette umgestellt sind, hält diese Regel sie im Rahmen. */
.chip { border-radius: 2px; letter-spacing: .16em; }
.chip-light { background: rgba(255, 255, 255, .94); color: var(--forest); }

/* Hero-Badge (Kategorie-Chip über dem Titelbild, siehe HANDOFF.md Schritt 8):
   auf hellen Fotos verschwindet ein halbtransparenter Chip fast — hier
   deckend auf Forest mit Goldrahmen, damit er auf jedem Bild lesbar bleibt. */
.hero-body .chip-light {
  background: var(--forest);
  color: var(--cream);
  border: 1px solid var(--gold);
}

/* Zitat kursiv — Cormorant hat einen sehr schönen Kursivschnitt */
.pull { border-left-color: var(--gold); }
.pull blockquote { font-style: italic; }
.prose .lead { font-style: normal; }

/* Goldene Haarlinie vor Labeln: das wiederkehrende Detail der Variante */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 1.25rem;
  height: 1px;
  margin-right: .625rem;
  vertical-align: .22em;
  background: var(--gold);
}
.eyebrow.center::before { display: none; }

/* Sterne und Bewertung auf Gold */
.rating-score span { color: var(--gold-ink); }
.stars svg { color: var(--gold); }
.step-no { background: var(--forest); color: #F4F1DF; }

/* Links im Fließtext: Gold ist auf Weiß knapp — der dunkle Ton hält 5,9:1 */
.prose a { color: var(--terra-deep); }
.prose a:hover { color: var(--forest); }
.prose li::marker { color: var(--gold); }

/* Formulare */
.field:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(195, 154, 50, .2); }
.check input { accent-color: var(--sage); }
.btn-accent { background: var(--gold-ink); }
.btn-accent:hover { background: var(--forest); }

/* ============================================================ 5. Startseite
   Kurs-Teaser neben der Hotelsuche (siehe HANDOFF.md Schritt 7): beide sind
   .card-Elemente, hier im gleichen zweispaltigen Grid wie die Themen-Kacheln. */
.course-teaser-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 760px) { .course-teaser-grid { grid-template-columns: 1fr; } }