/* ============================================================
   base.css — Reset, Typografie, Pills, Chrome (hoofolution.app)
   .com-Rezept (site/assets/css/base.css) auf die Inversionsschicht
   gedreht: Grund dunkel, Nav-/Sprach-Zustaende WEISS statt orange
   (Orange-Budget: die Wortmarke traegt es allein).
   D5 (Inhaber-Go 02.07.): Viewport fix 1920x1080 wie .com —
   kein Responsive, kein clamp, keine Media Queries.
   Kaskade: tokens → tokens-inversion → base → sections → landing.
   ============================================================ */

/* --- Reset (1:1 .com) --- */
*,
*::before,
*::after{ box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  scroll-padding-top:110px;   /* Anker-Ziele frei vom Sticky-Header (~78px) halten */
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:var(--t-body);
  color:var(--ink-body);                 /* Grundwert leicht gedaempft (= .com-Fliesstext-Praxis); Ueberschriften setzen --ink-strong */
  background:var(--ground);
  line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img,
svg,
video{ max-width:100%; height:auto; display:block; }

a{ color:inherit; text-decoration:none; }

ul,
ol{ margin:0; padding:0; list-style:none; }

button{ font-family:inherit; cursor:pointer; }

/* --- Layout (Unterseiten-Variante der .com: max-width + Pad) --- */
.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 var(--container-pad);
}

/* --- Typografie-Stufen (Werte 1:1 .com base.css) --- */
.kicker{
  font-family:var(--font-kicker);
  font-weight:600;
  font-style:italic;               /* echtes Cormorant-Italic (D4/E12, Inhaber-Go 02.07.) */
  font-size:var(--t-kicker);
  line-height:1.2;
  color:rgba(255,255,255,0.90);    /* hell, gedaempft — NICHT orange (Inversion) */
  letter-spacing:0.01em;
}

h1,
h2,
h3{
  font-family:var(--font-head);
  color:var(--ink-strong);              /* leicht gedaempft gegen Blend (50+); rein weiss = var(--ink-invert) */
  margin:0 0 0.4em;
  line-height:var(--lh-tight);
}
h1{ font-weight:700; font-size:var(--t-h1); letter-spacing:-0.015em; }
h2{ font-weight:740; font-size:var(--t-h2); letter-spacing:-0.005em; }
h3{ font-weight:700; font-size:var(--t-h3); }

.t-display{
  font-family:var(--font-head); font-weight:760; font-size:var(--t-display);
  line-height:1.1; letter-spacing:-0.03em; margin:0 0 0.35em;
}
.lead{ font-size:var(--t-lead); font-weight:500; line-height:1.45; color:rgba(255,255,255,0.82); }
.caption{ font-size:var(--t-caption); font-weight:500; color:rgba(255,255,255,0.62); }

p{ margin:0 0 1em; max-width:68ch; }

/* --- CTA-Pills: hell, NIE orange (Inversionsregel).
       Optik = .com .btn--primary (base.css) — heller Pill mit Schattenwurf. --- */
.pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;                 /* UX-Regel: Primaer-CTA >= 56px, Zielgruppe 50+ */
  padding:0 24px;
  border:1px solid transparent;
  border-radius:var(--radius-pill);
  background:rgba(255,255,255,0.96);
  color:var(--blue-deep);
  font-family:var(--font-head);
  font-weight:600;
  font-size:1rem;
  letter-spacing:0.01em;
  box-shadow:0 12px 30px rgba(0,0,0,0.16);
  transition:transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.pill:hover{ transform:translateY(-1px); box-shadow:0 16px 36px rgba(0,0,0,0.22); }
.pill--klein{ min-height:44px; padding:0 18px; font-size:0.92rem; }
/* Sekundaer (Karten/Nebenwege): transparenter Pill mit Rand — .com .btn--ghost */
.pill--ghost{ background:rgba(255,255,255,0.06); color:var(--white); border-color:rgba(255,255,255,0.20); box-shadow:none; }
.pill--ghost:hover{ background:rgba(255,255,255,0.10); border-color:rgba(255,255,255,0.30); }

/* ============================================================
   HEADER — .com .site-header-Rezept auf Chrome-Flaeche.
   Wortmarke orange MIT Motto = DIE Orange-Stelle pro Screen.
   Inversion: Hover/Aktiv-Zustaende WEISS (auf .com orange).
   ============================================================ */
.kopf{
  position:sticky;
  top:0;
  z-index:1000;
  background:var(--chrome);
  border-bottom:1px solid rgba(255,255,255,0.08);   /* Haarlinie wie .com */
}
.kopf-inner{
  position:relative;               /* Anker fuer die mittig gesetzte Nav */
  min-height:78px;                 /* wie .com .site-header__inner */
  display:flex;
  align-items:center;
  gap:24px;
}
.kopf-wortmarke{
  display:inline-flex;
  align-items:center;
  min-height:48px;                 /* Touch-Target */
  margin-right:auto;               /* schiebt Pill + Sprachen nach rechts */
  margin-left:-103px;              /* Inhaber 02.07.: ~halbe Wortmarken-Breite nach links (Schaetzwert, Feintuning per Panel) */
  transform:translate(var(--lp-marke-x, 0px), var(--lp-marke-y, 0px));
}
.kopf-wortmarke img{
  width:var(--lp-marke-breite, 206px);  /* Inhaber 02.07.: ~20 % groesser (vorher Hoehe 48px ≈ Breite 172px) */
  height:auto;
  display:block;
  opacity:0.96;
}
.kopf-wortmarke:hover img{ opacity:1; }

.kopf-nav{
  position:absolute;               /* Inhaber 02.07.: Demo/Preise/FAQ mittig */
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:flex;
  align-items:center;
  gap:40px;                        /* sichtbarer Abstand ~64px = doppelt so viel wie vorher */
}
.kopf-nav a{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 12px;
  color:rgba(255,255,255,0.84);
  font-family:var(--font-head);
  font-weight:500;
  font-size:0.95rem;
  letter-spacing:0.01em;
  transition:color 0.2s ease;
}
.kopf-nav a:hover{ color:var(--white); }             /* Inversion: WEISS, nicht orange */

.kopf-sprachen{
  display:inline-flex;
  align-items:center;
  gap:2px;                         /* Inhaber 02.07.: Sprachauswahl ganz rechts (letztes Header-Element) */
}
.kopf-sprachen a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  min-width:44px;
  padding:0 6px;
  color:rgba(255,255,255,0.62);
  font-family:var(--font-head);
  font-weight:600;
  font-size:0.78rem;
  letter-spacing:0.08em;
  transition:color 0.18s ease;
}
.kopf-sprachen a:hover{ color:var(--white); }
.kopf-sprachen a[aria-current="true"]{ color:var(--white); font-weight:700; }  /* aktiv weiss/fett (Budget) */

/* ============================================================
   FOOTER — .com .site-footer-Rezept auf Chrome: ruhig, zentriert,
   Haarlinie oben, gedaempftes Weiss, Hover → Weiss. Kein Orange.
   ============================================================ */
.fuss{
  background:var(--chrome);
  color:rgba(255,255,255,0.70);
  border-top:1px solid rgba(255,255,255,0.08);
  padding:56px 0 36px;
  font-size:0.95rem;
}
.fuss-inner{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:18px;
  text-align:center;
}
.fuss-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  flex-wrap:wrap;
}
.fuss-links a{
  display:inline-flex;
  align-items:center;
  min-height:48px;
  padding:0 10px;
  color:rgba(255,255,255,0.70);
  font-family:var(--font-head);
  font-weight:500;
  transition:color 0.2s ease;
}
.fuss-links a:hover{ color:var(--white); }
.fuss .kopf-sprachen{ margin-left:0; justify-content:center; }
.fuss-meta{
  margin:0;
  font-size:0.85rem;
  color:rgba(255,255,255,0.55);
  max-width:none;
}