/* ============================================================================
   HIMMELSUHR — Seitenkopf. EINE Datei für alle Seiten (13.10.2026).
   ----------------------------------------------------------------------------
   Vorher gab es den Kopf dreimal: hell im Next-Layout (app/globals.css), dunkel
   in dashboard-v1.html, kalender.html und himmelsuhr-3d.html (je eigene Regeln),
   und gar nicht auf den Verkaufsseiten. Folge: drei Höhen, drei Logo-Größen und
   ein Menü, das selbst bei 1440 px Breite in drei Zeilen umbrach.

   Jetzt: Markup aus lib/nav-html.mjs (kopfHtml), Inhalt aus public/nav.json,
   Aussehen nur hier. Next importiert diese Datei über app/globals.css, die
   statischen Seiten binden sie per <link> ein.

   Regeln, die das Umbrechen verhindern:
   - Kein Menüpunkt bricht je um (white-space: nowrap).
   - Passt die Leiste nicht, verschwinden die Textlinks und ein Menü-Knopf
     übernimmt. Der Reading-Knopf bleibt sichtbar, bis es ganz eng wird.
   - Feste Höhe. Kein Kopf wächst je in die Seite hinein.
   ============================================================================ */

.site-head {
  --kopf-hoehe: 76px;
  --kopf-text: rgba(247, 243, 233, 0.80);
  --kopf-text-voll: #f7f3e9;
  position: relative;
  z-index: 40;
  width: 100%;
  margin: 0;
  padding: 0;
  max-width: none;
  display: block;
  background: linear-gradient(180deg, #0a1020 0%, #16233a 100%);
  border-bottom: 1px solid rgba(201, 168, 76, 0.22);
  font-family: 'Archivo', -apple-system, 'Segoe UI', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
/* Über dem Abendhimmel (Startseite, Kalender, 3D-Uhr): durchsichtig,
   sonst identisch. */
.site-head.site-head--himmel { background: transparent; border-bottom-color: transparent; }

.site-head .site-head__inner {
  box-sizing: border-box;
  max-width: 1320px;
  height: var(--kopf-hoehe);
  margin: 0 auto;
  padding: 0 clamp(18px, 3.4vw, 40px);
  display: flex;
  align-items: center;
  gap: 28px;
}

/* ---------- Marke ---------- */
.site-head .brand {
  display: inline-flex; align-items: center; gap: 12px;
  flex: 0 0 auto;
  text-decoration: none;
  color: var(--kopf-text-voll);
  font-family: inherit;
}
.site-head .brand .mark { width: 36px; height: 36px; display: block; color: var(--kopf-text-voll); flex: 0 0 auto; }
.site-head .wortmarke {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500; font-size: 20px; line-height: 1;
  letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--kopf-text-voll);
  white-space: nowrap;
}

/* ---------- Leiste ---------- */
.site-head .site-nav {
  display: flex; align-items: center; justify-content: flex-end;
  flex-wrap: nowrap;
  gap: 24px;
  margin: 0 0 0 auto;
  padding: 0;
  min-width: 0;
  font-family: inherit;
  font-size: 14px;
}
.site-head .site-nav a {
  white-space: nowrap;
  font-family: inherit; font-size: 14px; font-weight: 400; letter-spacing: 0.01em; line-height: 1.2;
  text-decoration: none;
  color: var(--kopf-text);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.site-head .site-nav a:hover { color: var(--kopf-text-voll); }
.site-head .site-nav a.active { color: var(--kopf-text-voll); border-bottom-color: rgba(201, 168, 76, 0.75); }
.site-head .site-nav a.nav-cta {
  color: #1c2733; background: var(--kopf-text-voll);
  padding: 9px 18px; border-radius: 999px; border: 0;
  font-weight: 600;
  margin-left: 4px;
  box-shadow: 0 4px 16px rgba(8, 13, 26, 0.28);
  transition: transform .15s, box-shadow .15s;
}
.site-head .site-nav a.nav-cta:hover { color: #1c2733; transform: translateY(-1px); box-shadow: 0 8px 22px rgba(8, 13, 26, 0.36); }

/* ---------- Menü-Knopf (nur wenn die Leiste nicht passt) ---------- */
.site-head .site-menu { display: none; position: relative; flex: 0 0 auto; }
.site-head .site-menu > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 14px; border-radius: 999px;
  border: 1px solid rgba(247, 243, 233, 0.32);
  color: var(--kopf-text-voll);
  font-size: 14px; font-weight: 500; line-height: 1.2;
  white-space: nowrap; user-select: none;
}
.site-head .site-menu > summary::-webkit-details-marker { display: none; }
.site-head .site-menu > summary:hover { border-color: rgba(247, 243, 233, 0.6); }
.site-head .site-menu__icon { position: relative; width: 16px; height: 10px; display: inline-block; }
.site-head .site-menu__icon::before,
.site-head .site-menu__icon::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; border-radius: 1px;
  transition: transform .2s, top .2s;
}
.site-head .site-menu__icon::before { top: 1px; }
.site-head .site-menu__icon::after { top: 7.5px; }
.site-head .site-menu[open] .site-menu__icon::before { top: 4.25px; transform: rotate(45deg); }
.site-head .site-menu[open] .site-menu__icon::after { top: 4.25px; transform: rotate(-45deg); }

.site-head .site-nav.site-nav--panel {
  position: absolute; top: calc(100% + 12px); right: 0;
  width: min(300px, calc(100vw - 32px));
  display: flex; flex-direction: column; align-items: stretch; gap: 0;
  margin: 0; padding: 8px;
  background: #121c2e;
  border: 1px solid rgba(247, 243, 233, 0.14);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(4, 8, 18, 0.45);
}
.site-head .site-nav--panel a {
  padding: 11px 14px; border-radius: 9px; border: 0;
  font-size: 15px; color: var(--kopf-text);
}
.site-head .site-nav--panel a:hover { background: rgba(247, 243, 233, 0.07); color: var(--kopf-text-voll); }
.site-head .site-nav--panel a.active { background: rgba(201, 168, 76, 0.14); color: var(--kopf-text-voll); }
.site-head .site-nav--panel a.nav-cta { margin: 8px 0 2px; text-align: center; box-shadow: none; }

/* Mittelbreit: Textlinks raus, Reading-Knopf + Menü bleiben. */
@media (max-width: 1259px) {
  .site-head .site-nav--leiste a:not(.nav-cta) { display: none; }
  .site-head .site-menu { display: block; }
  .site-head .site-head__inner { gap: 14px; }
  .site-head .site-nav--leiste { gap: 0; }
}
/* Eng: nur Marke + Menü. */
@media (max-width: 600px) {
  .site-head { --kopf-hoehe: 64px; }
  .site-head .site-nav--leiste { display: none; }
  .site-head .site-menu { margin-left: auto; }
  .site-head .brand .mark { width: 30px; height: 30px; }
  .site-head .wortmarke { font-size: 17px; letter-spacing: 0.24em; }
}
/* Sicherheitsnetz: site-nav.js setzt die Klasse, wenn die Leiste trotz
   Breakpoint nicht passt (andere Schrift geladen, große Systemschrift). */
.site-head.site-head--eng .site-nav--leiste a:not(.nav-cta) { display: none; }
.site-head.site-head--eng .site-menu { display: block; }
.site-head.site-head--eng .site-head__inner { gap: 14px; }

/* ============================================================================
   SEITENFUSS — ebenfalls eine Datei für alle Seiten (13.10.2026).
   Markup: lib/nav-html.mjs (fussHtml). Gleiche Breite und Kante wie der Kopf.
   Die Selektoren sind bewusst an .site-foot gebunden und setzen Schrift,
   Ausrichtung und Zeilenhöhe selbst — einige Seiten haben eigene Regeln für
   das nackte <footer>-Element, die hier nicht durchschlagen dürfen.
   ============================================================================ */
.site-foot {
  position: relative; z-index: 2;
  width: 100%; margin: 0; padding: 0; max-width: none;
  display: block; text-align: left;
  background: #f5f6f7;
  border-top: 1px solid #e3e4e2;
  color: #1c2733;
  font-family: 'Archivo', -apple-system, 'Segoe UI', system-ui, sans-serif;
  font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
main + .site-foot, .site-main + .site-foot { margin-top: 96px; }
.site-foot .site-foot__inner {
  box-sizing: border-box;
  max-width: 1320px; margin: 0 auto;
  padding: 56px clamp(18px, 3.4vw, 40px) 48px;
}
.site-foot .foot-top {
  display: grid;
  grid-template-columns: minmax(200px, 1.3fr) repeat(3, minmax(0, auto));
  gap: 32px 72px; align-items: start;
}
.site-foot .brand {
  display: inline-flex; align-items: center; gap: 12px; align-self: start;
  text-decoration: none; color: #1c2733;
}
.site-foot .brand .mark { width: 32px; height: 32px; display: block; color: #1c2733; flex: 0 0 auto; }
.site-foot .wortmarke {
  font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
  font-weight: 500; font-size: 18px; line-height: 1;
  letter-spacing: 0.28em; text-transform: uppercase; color: #1c2733;
}
.site-foot .foot-col { display: grid; gap: 10px; align-content: start; }
.site-foot .foot-h {
  margin-bottom: 4px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
  color: #96741f;
}
.site-foot a { color: #4a5563; text-decoration: none; font-size: 14px; }
.site-foot a:hover { color: #1c2733; text-decoration: underline; text-underline-offset: 2px; }
.site-foot .brand:hover { text-decoration: none; }
.site-foot .foot-meta {
  margin: 48px 0 0; padding-top: 24px;
  border-top: 1px solid #e3e4e2;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 48px;
}
.site-foot .foot-meta p { margin: 0; font-size: 12px; line-height: 1.7; color: #6b7480; }
.site-foot .foot-absender { margin-top: 18px; font-size: 12px; color: #6b7480; }

@media (max-width: 900px) {
  .site-foot .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; }
  .site-foot .brand { grid-column: 1 / -1; }
  .site-foot .foot-meta { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .site-foot .site-foot__inner { padding-top: 44px; }
  .site-foot .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media print { .site-head, .site-foot { display: none; } }