/* ============================================================
   DOREN — Corporate Identity / Brand Tokens
   Wortmarke 02 · Kupfer-Variante
   Drop this file into your website project and link it once:
   <link rel="stylesheet" href="brand.css">
   Fonts are self-hosted from /fonts (no external requests — DSG/GDPR clean).
   Run fonts/download-fonts.command once to fetch the woff2 files.
   ============================================================ */

/* ---------- Self-hosted fonts (local, no Google requests) ---------- */
@font-face{
  font-family:'Libre Franklin';font-style:normal;font-weight:400;
  font-display:swap;src:url('fonts/libre-franklin-400.woff2') format('woff2');
}
@font-face{
  font-family:'Libre Franklin';font-style:normal;font-weight:500;
  font-display:swap;src:url('fonts/libre-franklin-500.woff2') format('woff2');
}
@font-face{
  font-family:'Libre Franklin';font-style:normal;font-weight:600;
  font-display:swap;src:url('fonts/libre-franklin-600.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:normal;font-weight:400;
  font-display:swap;src:url('fonts/newsreader-400.woff2') format('woff2');
}
@font-face{
  font-family:'Newsreader';font-style:italic;font-weight:400;
  font-display:swap;src:url('fonts/newsreader-italic-400.woff2') format('woff2');
}

:root {
  /* — Brand colours — */
  --doren-navy:        #0E2640;  /* Logo / Wortmarke (tiefes Navy) */
  --doren-navy-web:    #153455;  /* Web: Überschriften + Hero-Verlauf (helleres Navy) */
  --doren-copper:      #B0794A;  /* Akzent — NUR Kupfer, nie Grün */
  --doren-ink:         #262A2E;  /* Fliesstext dunkel */
  --doren-paper:       #F6F4F0;  /* Warmes Papier (Flächen) */
  --doren-paper-light: #F2F1EE;  /* Logo-Glyph auf dunklem Grund */
  --doren-muted:       #6B6F73;  /* Sekundärtext */
  --doren-muted-2:     #9B968E;  /* Labels / Captions */
  --doren-line:        #ECE9E4;  /* Trennlinien */
  --doren-hero-text:   #9BB0C4;  /* Hero-Subtext auf Navy */

  /* — Type — */
  --doren-font-sans:  'Libre Franklin', system-ui, sans-serif;  /* UI, Wortmarke, Labels */
  --doren-font-serif: 'Newsreader', Georgia, serif;             /* Display / Headlines */

  /* — Hero-Verlauf über dem Himmelbild (Navy → transparent) — */
  --doren-hero-gradient:
    linear-gradient(108deg,
      rgba(21,52,85,0.94) 0%,
      rgba(21,52,85,0.82) 42%,
      rgba(21,52,85,0.40) 100%);
}

/* ---------- Wortmarke (reine Typo, kein Bild nötig) ----------
   <span class="doren-wordmark">DOREN<span class="doren-dot">.</span></span>
   Auf dunklem Grund: zusätzlich class="is-light" setzen.            */
.doren-wordmark {
  font-family: var(--doren-font-sans);
  font-weight: 600;
  letter-spacing: 0.18em;        /* konstant — nie enger/weiter */
  color: var(--doren-navy);
  white-space: nowrap;
  padding-left: 0.18em;          /* optischer Ausgleich der Sperrung */
}
.doren-wordmark.is-light { color: var(--doren-paper-light); }
.doren-dot { color: var(--doren-copper); }   /* Punkt IMMER kupfer */

/* ---------- Hero ----------
   <section class="doren-hero" style="--hero-img:url('hero-warm-s23.jpg')"> … */
.doren-hero {
  background-image: var(--doren-hero-gradient), var(--hero-img);
  background-position: center 42%;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--doren-paper-light);
}
.doren-hero h1 {
  font-family: var(--doren-font-serif);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.08;
}

/* ---------- Display-Überschriften ---------- */
.doren-display {
  font-family: var(--doren-font-serif);
  font-weight: 400;
  color: var(--doren-navy-web);
  letter-spacing: -0.005em;
}

/* ---------- Eyebrow / Label ---------- */
.doren-eyebrow {
  font-family: var(--doren-font-sans);
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--doren-copper);
}