/* =========================================================
   base.css
   Shared design tokens and elements used on every page
   (index.html, impressum.html, datenschutz.html).
   Page-specific layout lives in main.css (index.html) and
   legal.css (impressum.html, datenschutz.html).
   ========================================================= */

/* ================= self-hosted fonts ================= */
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-v25-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-v25-latin-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-v25-latin-500italic.woff2") format("woff2");
  font-weight:500;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-v25-latin-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-v25-latin-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("../fonts/archivo-v25-latin-800.woff2") format("woff2");
  font-weight:800;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("../fonts/public-sans-v21-latin-300.woff2") format("woff2");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("../fonts/public-sans-v21-latin-regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("../fonts/public-sans-v21-latin-500.woff2") format("woff2");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Public Sans";
  src:url("../fonts/public-sans-v21-latin-600.woff2") format("woff2");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}

/* ================= tokens ================= */
:root{
  --bg:#F6F4EE;
  --bg-alt:#EFEBDE;
  --surface:#FFFFFF;
  --ink:#191D1B;
  --ink-soft:#565B54;
  --ink-faint:#8B8F84;
  --accent:#1F5D52;
  --accent-strong:#173F38;
  --accent-2:#B08D4F;
  --line:#E1DBC9;
  --deep-bg:#14201D;
  --deep-bg-alt:#1B2B26;
  --deep-ink:#F3F0E4;
  --deep-ink-soft:#B7C2BA;
  --deep-accent:#C9A968;
  --deep-line:#2B3A34;
  --shadow: 0 1px 2px rgba(20,20,10,0.05), 0 10px 30px -14px rgba(20,20,10,0.18);
  --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --sans: "Public Sans", "Segoe UI", Arial, sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#15140F;
    --bg-alt:#1D1C15;
    --surface:#1C1B15;
    --ink:#EFEBDD;
    --ink-soft:#B9B3A0;
    --ink-faint:#847E6E;
    --accent:#6FA695;
    --accent-strong:#8FBDAE;
    --accent-2:#D9B571;
    --line:#332F23;
    --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 10px 30px -14px rgba(0,0,0,0.55);
  }
}
:root[data-theme="dark"]{
  --bg:#15140F;
  --bg-alt:#1D1C15;
  --surface:#1C1B15;
  --ink:#EFEBDD;
  --ink-soft:#B9B3A0;
  --ink-faint:#847E6E;
  --accent:#6FA695;
  --accent-strong:#8FBDAE;
  --accent-2:#D9B571;
  --line:#332F23;
  --shadow: 0 1px 2px rgba(0,0,0,0.35), 0 10px 30px -14px rgba(0,0,0,0.55);
}

*{box-sizing:border-box;}

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* ================= eyebrow label ================= */
.eyebrow{
  font-family:var(--sans);
  font-size:0.76rem;
  font-weight:700;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  gap:0.6em;
}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--accent-2); display:inline-block;}

/* ================= nav logo (light/dark swap) ================= */
.nav-logo{height:52px; width:auto; display:block;}
.nav-logo--dark{display:none;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nav-logo--light{display:none;}
  :root:not([data-theme="light"]) .nav-logo--dark{display:block;}
}
:root[data-theme="dark"] .nav-logo--light{display:none;}
:root[data-theme="dark"] .nav-logo--dark{display:block;}

/* ================= footer ================= */
footer{padding:28px 0; text-align:center; font-size:0.8rem; color:var(--ink-faint); background:var(--bg);}
.footer-legal a{color:var(--ink-faint); text-decoration:none; margin:0 8px;}
.footer-legal a:hover{color:var(--ink-soft); text-decoration:underline;}

/* ================= cookie consent banner ================= */
.cookie-banner{
  position:fixed; left:50%; bottom:16px; z-index:100;
  width:calc(100% - 32px); max-width:640px;
  transform:translateX(-50%);
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); padding:12px 14px;
  display:flex; flex-direction:column; align-items:stretch; gap:8px;
}
/* display:flex oben würde sonst das hidden-Attribut (JS) überstimmen */
.cookie-banner[hidden]{display:none;}
.cookie-banner-text{
  margin:0; font-size:0.86rem; line-height:1.5; color:var(--ink-soft);
}
.cookie-banner-text a{color:var(--accent); text-decoration:underline;}
.cookie-banner-actions{display:flex; gap:10px; justify-content:flex-end;}
.cookie-btn{
  font-family:var(--sans); font-size:0.86rem; font-weight:600;
  padding:10px 18px; border-radius:8px; border:1px solid transparent;
  cursor:pointer; transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.cookie-btn--primary{background:var(--ink); color:var(--bg);}
.cookie-btn--primary:hover{transform:translateY(-1px); background:var(--accent);}
.cookie-btn--ghost{background:transparent; border-color:var(--ink-faint); color:var(--ink);}
.cookie-btn--ghost:hover{border-color:var(--ink); transform:translateY(-1px);}