/* ============================================================================
   MHD Site-Header — das EINZIGE Stylesheet für den Header.
   Wird von jeder Seite über _header.php eingebunden (Startseite, /power-tree/ …).

   Gekapselt: Alles, was von der einbettenden Seite vererbt werden könnte
   (font-size, line-height, font-weight, letter-spacing, text-transform …),
   wird auf .site-header explizit gesetzt. Sämtliche Maße stehen in px statt
   rem/em, damit eine abweichende Root- oder Body-Schriftgröße der Gastseite
   den Header nicht verschiebt. Fremdes CSS kann hier nicht hineinwirken,
   dieses CSS wirkt nirgends hinaus (alles unter .site-header gescopet).
   ========================================================================== */

@font-face{font-family:"Newsreader";font-style:normal;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-var-latin.woff2) format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:200 800;font-display:swap;src:url(/fonts/newsreader-var-italic-latin.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fira-sans-400-latin.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/fira-sans-500-latin.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/fira-sans-600-latin.woff2) format("woff2")}
@font-face{font-family:"Fira Sans Condensed";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/fira-sans-cond-400-latin.woff2) format("woff2")}
@font-face{font-family:"Fira Sans Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/fira-sans-cond-500-latin.woff2) format("woff2")}
@font-face{font-family:"Fira Sans";font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0370-03FF;src:url(/fonts/fira-sans-400-greek.woff2) format("woff2")}
@font-face{font-family:"Fira Sans Condensed";font-style:normal;font-weight:400;font-display:swap;unicode-range:U+0370-03FF;src:url(/fonts/fira-sans-cond-400-greek.woff2) format("woff2")}
@font-face{font-family:"Fira Sans Condensed";font-style:normal;font-weight:500;font-display:swap;unicode-range:U+0370-03FF;src:url(/fonts/fira-sans-cond-500-greek.woff2) format("woff2")}

/* ── Kapselung: vererbbare Eigenschaften neutralisieren ───────────────────── */
.site-header{
  --violet:#6A007A; --violet-deep:#4A0056; --ink:#1A1A1E; --paper:#F7F7F5;
  --panel:#EDECE9; --hairline:#DBD9D3; --muted:#565B61; --corner:18px;
  --maske:#0C2519; --maske-hell:#123122; --gold:#DCAE6C; --gold-hell:#EBC98F;
  /* Schattenfamilie wie im Seiten-CSS. Der Anfrage-Knopf traegt die kraeftigere Stufe. */
  --sh-btn-hi:0 1px 3px rgba(26,26,30,.12), 0 8px 24px rgba(26,26,30,.13);
  --sh-btn-hover:0 2px 6px rgba(26,26,30,.15), 0 14px 34px rgba(26,26,30,.18);
  --sans:"Fira Sans",system-ui,sans-serif; --cond:"Fira Sans Condensed","Fira Sans",sans-serif;
  font:400 16px/1.5 var(--sans);
  letter-spacing:normal; word-spacing:normal; text-transform:none; text-indent:0;
  text-align:left; font-variant:normal; font-feature-settings:normal; font-style:normal;
  color:var(--ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.site-header *{box-sizing:border-box;margin:0;padding:0;font-family:inherit;letter-spacing:normal;text-transform:none}
.site-header a{text-decoration:none;color:inherit}

/* ── Gerüst ───────────────────────────────────────────────────────────────── */
header.site-header{position:sticky;top:0;z-index:40;background:rgba(247,247,245,.95);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--hairline)}
.site-header .wrap{max-width:1160px;margin:0 auto;padding:0 28px}
@media(min-width:1440px){.site-header .wrap{max-width:1300px}}
@media(min-width:1800px){.site-header .wrap{max-width:1480px}}
@media(min-width:2300px){.site-header .wrap{max-width:1620px}}
/* Keine Uebergaenge in der Kopfzeile (15.09.2026): kommt header.css nach dem ersten Rendern an,
   wurde der Wechsel von Attributgroesse auf CSS-Groesse animiert, das Logo "flog" beim Oeffnen
   von gross auf klein (auf /power-tree/ gesehen). Schrumpfen beim Scrollen jetzt ohne Animation. */
.site-header .nav{display:flex;align-items:center;justify-content:space-between;height:98px;gap:20px}
header.site-header.scrolled .nav{height:76px}

/* ── Marke ────────────────────────────────────────────────────────────────── */
.site-header .brand{display:flex;align-items:center;gap:28px;color:var(--ink)}
.site-header .mark{width:auto;height:48px;flex:none;transform:scale(1.36);transform-origin:center}
header.site-header.scrolled .mark{transform:scale(1)}
/* Wortmarke mit Slogan als Grafik (15.09.2026, img/mhd-wortmarke.png, 940x147).
   Hoehe entspricht dem frueheren zweizeiligen Textblock. */
.site-header .wordmark{display:block;height:40px;width:auto;flex:none}
header.site-header.scrolled .wordmark{height:34px}
/* Container ist bis 1439px 1160px breit, darum die engere Kopfzeile bis dahin (17.09.2026: bei 1366px lag die Wortmarke auf „Leistungen“) */
@media(max-width:1439px){.site-header .wordmark{height:34px}header.site-header.scrolled .wordmark{height:30px}}
@media(max-width:600px){.site-header .wordmark{display:none}}

/* ── Navigation ───────────────────────────────────────────────────────────── */
.site-header .nav-r{display:flex;align-items:center;gap:26px}
.site-header .nav-r a{font-family:var(--sans);font-size:15.2px;font-weight:500;line-height:1.5;color:var(--ink)}
.site-header .nav-r a:hover{color:var(--violet)}
/* Mobil: Projektanfrage-Button raus aus dem Header, er steht unten im Menü (02.09.2026) */
@media(max-width:1120px){.site-header .nav-r>a{display:none}}

/* ── Button ───────────────────────────────────────────────────────────────── */
.site-header .btn{display:inline-block;font-family:var(--sans);font-weight:600;font-size:15.7px;line-height:1.5;
  padding:14px 28px;border-radius:0 var(--corner) 0 0;border:1px solid transparent;
  box-shadow:var(--sh-btn-hi);
  transition:background .15s,color .15s,border-color .15s,box-shadow .15s}
.site-header .btn:hover{box-shadow:var(--sh-btn-hover)}
.site-header .nav-r a.btn{padding:11px 22px;font-size:15.7px;font-weight:600;white-space:nowrap}
/* Zwischen 1121 und 1300px wird es mit der Wortmarke eng: engere Abstaende, schmalere Knoepfe */
@media(max-width:1439px){.site-header .nav-r{gap:18px}.site-header .nav-r a.btn{padding:11px 16px}}
.site-header .btn-primary,.site-header .nav-r a.btn-primary{background:var(--violet);color:#fff}
.site-header .btn-primary:hover,.site-header .nav-r a.btn-primary:hover{background:var(--violet-deep);color:#fff}
/* MHD Apps: Loetstopplack-Gruen mit Goldschrift, dieselben Toene wie der
   Endblock ueber dem Fuss (.cta in index.php). Steht links vom Anfrage-Knopf. */
.site-header .btn-apps,.site-header .nav-r a.btn-apps{background:var(--maske);color:var(--gold)}
.site-header .btn-apps:hover,.site-header .nav-r a.btn-apps:hover{background:var(--maske-hell);color:var(--gold-hell)}

/* ── Lesefortschritt (B1) ─────────────────────────────────────────────────
   Kein zusaetzlicher Balken: der Streifen liegt auf der Haarlinie der Kopfzeile
   und faerbt sie beim Scrollen von links nach rechts violett ein.
   --fortschritt setzt das Skript in _header.php als Zahl zwischen 0 und 1. */
header.site-header::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:var(--violet);transform-origin:0 50%;transform:scaleX(var(--fortschritt,0));
  transition:transform .1s linear;pointer-events:none}

/* ── Mobiles Menü ─────────────────────────────────────────────────────────── */
.site-header details.menu{display:none;position:relative}
@media(max-width:1120px){.site-header details.menu{display:block}}
.site-header details.menu summary{list-style:none;cursor:pointer;font-family:var(--sans);font-size:16px;font-weight:600;padding:10px 4px}
.site-header details.menu summary::-webkit-details-marker{display:none}
.site-header details.menu[open] summary{color:var(--violet)}
.site-header .menu-list{position:absolute;right:0;top:calc(100% + 10px);background:var(--paper);
  border:1px solid var(--hairline);border-radius:0 var(--corner) 0 0;min-width:230px;padding:10px 0;
  box-shadow:0 16px 40px rgba(26,26,30,.12);max-height:calc(100vh - 110px);overflow:auto}
.site-header .menu-list a{display:block;font-family:var(--sans);font-size:16px;font-weight:500;padding:11px 20px;color:var(--ink)}
.site-header .menu-list a:hover{background:var(--panel);color:var(--violet)}

/* ── Aktiver Menüpunkt ────────────────────────────────────────────────────── */
.site-header .nav-r>a.aktiv{color:var(--violet);position:relative}
.site-header .nav-r>a.aktiv::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:1px;background:var(--violet)}
.site-header .nav-r>a.btn.aktiv{color:var(--gold)}
.site-header .nav-r>a.btn.aktiv::after{display:none}
.site-header .menu-list a.aktiv{color:var(--violet);box-shadow:inset 3px 0 0 var(--violet)}

@media(prefers-reduced-motion:reduce){header.site-header::after{transition:none}}