/* Hunter Marketing · Dach.
   1. Die Dach-Leiste: steht oben auf jeder Seite und sieht überall gleich aus, egal welche Brand darunter kommt.
      Sie verlinkt auf nichts (keine Landingpage verweist auf eine andere).
   2. Die schlichten Seiten des Dachs: index.html (nur Logo, Name, E-Mail), impressum.html, datenschutz.html.
      Diese Regeln gelten nur unter <body class="hm">, die Landingpages bleiben unberührt.
   Farben nach 00_Dach/00_DACH.md: Hunter-Grau #878A8D (Logo-Grund), Schrift #3A3D40, Grund #F2F3F4, Creme des Hundes #EAE6DE.
   Schrift Manrope aus fonts/ (OFL). Die Seite lädt nichts von außen. */

@font-face { font-family: "Manrope"; src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype"); font-weight: 200 800; font-display: swap; }

:root {
  --hm-grau: #878A8D;
  --hm-schrift: #3A3D40;
  --hm-grund: #F2F3F4;
  --hm-creme: #EAE6DE;
  --hm-linie: #DCDEE0;
  --hm-leise: #5F6265;   /* gedämpfte Schrift, auf --hm-grund gut lesbar */
  --hm-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --hm-gutter: clamp(20px, 5vw, 48px);   /* wie die Landingpages, damit Leiste und Brand-Kopf bündig stehen */
}

/* 1. Dach-Leiste */
.dach { margin: 0; background: var(--hm-grund); border-bottom: 1px solid var(--hm-linie); }
.dach-innen { box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: 100%; max-width: calc(1120px + 2 * var(--hm-gutter)); margin: 0 auto; padding: 8px var(--hm-gutter); }
.dach-logo { display: block; flex: none; width: 38px; height: 38px; margin: 0; border-radius: 6px; background: var(--hm-grau); }
.dach-name { margin: 0; font: 700 1rem/1.2 var(--hm-sans); letter-spacing: .01em; color: var(--hm-schrift); white-space: nowrap; }

/* 2. Seiten des Dachs */
body.hm { display: flex; flex-direction: column; min-height: 100vh; min-height: 100svh; margin: 0; background: var(--hm-grund); color: var(--hm-schrift); font-family: var(--hm-sans); font-size: 1.0625rem; line-height: 1.55; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
:where(.hm) *, :where(.hm) *::before, :where(.hm) *::after { box-sizing: border-box; }
:where(.hm) :where(h1, h2, p, address, nav) { margin: 0; }   /* :where hält die Grundregeln schwach, damit die Abstände unten greifen */
:where(.hm) a { color: inherit; }
.hm :focus-visible { outline: 3px solid var(--hm-schrift); outline-offset: 3px; border-radius: 4px; }
.hm-wrap { width: 100%; max-width: calc(1120px + 2 * var(--hm-gutter)); margin-inline: auto; padding-inline: var(--hm-gutter); }

/* Startseite: Logo, Name, E-Mail. Sonst nichts. */
.start { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; padding: 64px var(--hm-gutter) 32px; text-align: center; }
.start-logo { display: block; width: clamp(112px, 28vw, 148px); height: auto; border-radius: 16%; }
.start-name { margin-top: 28px; font-weight: 800; font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.15; letter-spacing: -0.015em; }
.start-mail { margin-top: 10px; font-weight: 600; text-decoration-line: underline; text-decoration-thickness: 1px; text-decoration-color: var(--hm-grau); text-underline-offset: 5px; }
.start-mail:hover { text-decoration-color: currentColor; }

/* Impressum und Datenschutz */
.recht { flex: 1; padding-block: clamp(32px, 6vw, 72px) clamp(56px, 9vw, 112px); }
.recht h1 { font-weight: 800; font-size: clamp(2.1rem, 6.5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.025em; }
.recht h2 { margin-top: 40px; font-size: 1.15rem; font-weight: 800; line-height: 1.3; }
.recht p, .recht address { max-width: 36em; margin-top: 10px; font-size: 1.15rem; font-style: normal; line-height: 1.55; }
.recht .angaben { margin-top: 28px; }
.recht .angaben p { margin-top: 4px; }
.recht .angaben p:first-child { margin-top: 0; font-weight: 800; }
.recht .zurueck { display: inline-block; margin-top: 48px; font-weight: 700; }

/* Fuß der Dach-Seiten */
.hm-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-block: 28px; font-size: .92rem; color: var(--hm-leise); }
.hm-fuss nav { display: flex; gap: 20px; }
.hm-fuss a { font-weight: 700; color: var(--hm-schrift); }
.hm-start .hm-fuss { justify-content: center; }