/* ===========================================================================
   haushoch digital – Website (Startseite und Unterseiten)
   Der obere Teil (Schrift, Farben, Bausteine) ist die Übernahme von
   Business/Growth/Brand-Assets/tokens.css. Ändert sich dort etwas, hier nachziehen.
   Regeln und Herleitung: Brand-Assets/brand-assets.md
   =========================================================================== */

/* ---------- Schrift: selbst gehostet, nicht über das Google-CDN ---------- */
@font-face { font-family: "Mulish"; font-style: normal; font-weight: 200 1000; font-display: swap;
  src: url("/schrift/mulish.woff2") format("woff2"); }
@font-face { font-family: "Mulish"; font-style: italic; font-weight: 200 1000; font-display: swap;
  src: url("/schrift/mulish-italic.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url("/schrift/jetbrains-mono.woff2") format("woff2"); }

/* ---------- Farben ---------- */
:root {
  --hh-blau: #1484C6;
  --hh-blau-hover: #1170AB;
  --hh-dunkel: #0D1C2A;
  --hh-flaeche: #14293A;
  --hh-bernstein: #FFB13D;
  --hh-weiss: #FFFFFF;
  --hh-weiss-90: rgba(255,255,255,0.90); /* Lesetext, Brand-Assets Regel 5 (18.09.2026) */
  --hh-weiss-72: rgba(255,255,255,0.72);
  --hh-weiss-55: rgba(255,255,255,0.55);
  --hh-weiss-45: rgba(255,255,255,0.45);
  --hh-weiss-35: rgba(255,255,255,0.35);
  --hh-linie: rgba(255,255,255,0.18);
  --hh-linie-schwach: rgba(255,255,255,0.10);
  --hh-linie-karte: rgba(255,255,255,0.12);
  --hh-linie-stark: rgba(255,255,255,0.24);

  --hh-schrift: "Mulish", system-ui, -apple-system, "Segoe UI", sans-serif;
  --hh-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;

  --hh-breite: 1240px;
  --hh-polster: 64px;
  --hh-sektion: 128px;
}

/* ---------- Grundzustand ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--hh-dunkel);
  color: var(--hh-weiss);
  font-family: var(--hh-schrift);
  font-weight: 400;               /* bei Variable Fonts explizit, sonst hauchdünn */
  font-size: 17px;
  line-height: 1.65;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
h1, h2, h3 { font-weight: 800; margin: 0; }
h1, h2 { text-wrap: balance; }
h1 { font-size: 50px; letter-spacing: -0.03em; line-height: 1.16; }
h2 { font-size: 46px; letter-spacing: -0.025em; line-height: 1.2; }
h3 { font-size: 32px; letter-spacing: -0.02em; line-height: 1.15; }
p  { margin: 0; }
img { display: block; max-width: 100%; }
a { color: var(--hh-weiss); text-decoration: none; }
a:hover { color: var(--hh-bernstein); }   /* Hover seitenweit Bernstein (Hanno, 23.09.2026) */
:focus-visible { outline: 2px solid var(--hh-bernstein); outline-offset: 2px; }
:target { scroll-margin-top: 32px; }

/* ---------- Bausteine ---------- */
.hh-rubrik {
  font-family: var(--hh-schrift); font-size: 14px; font-weight: 700;   /* keine Versalien, keine Mono (Hanno, 19.10.2026) */
  letter-spacing: 0; color: var(--hh-bernstein);   /* alle Rubriken Bernstein (Hanno, 23.09.2026) */
}
.hh-rubrik--befund { color: var(--hh-bernstein); }   /* seit 23.09. ohne eigene Wirkung, bleibt für das Hero-HTML */
.hh-rubrik--klein { font-size: 13px; }

/* Weiß auf Blau hat 4,1:1 – laut Regelwerk nur ab Überschriftengröße. Deshalb 19 px fett
   (ab 18,66 px fett gilt Großtext, 3:1 reicht). Gilt auch für <button> (28.09.2026) */
.hh-button {
  display: inline-block; background: var(--hh-blau); color: var(--hh-weiss);
  font-family: inherit; font-weight: 700; font-size: 19px; line-height: 1.4; letter-spacing: -0.005em;
  padding: 16px 26px; border: 0; border-radius: 0; cursor: pointer;
  transition: background-color 150ms ease;
}
.hh-button:hover { background: var(--hh-blau-hover); color: var(--hh-weiss); }
.hh-button:disabled { opacity: 0.6; cursor: default; }
.hh-button--klein { padding: 11px 20px; }
.hh-button--kontur {
  background: transparent; border: 1px solid var(--hh-linie-stark);
  transition: border-color 150ms ease;
}
.hh-button--kontur:hover { background: transparent; border-color: var(--hh-bernstein); color: var(--hh-weiss); }
.hh-button--breit { text-align: center; padding: 20px 28px; }

/* Textmarkierung – zwei im Hero, dazu ein markiertes Wort je Kasten (Hanno, 22.09.2026) */
.hh-mark {
  background: var(--hh-blau); display: inline-block; line-height: 0.9;
  padding: 0.1em 0.02em;
  box-shadow: 0.08em 0 0 var(--hh-blau), -0.08em 0 0 var(--hh-blau);
}
/* In Kartentiteln und Zitaten läuft die Markierung im Text mit und darf umbrechen */
.hh-karte .hh-mark, .karte__titel .hh-mark, blockquote .hh-mark {
  display: inline; line-height: inherit; padding: 0.04em 0.14em; box-shadow: none;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}

/* Modul A: Kennzahl mit Haarlinie */
.hh-kennzahl { border-top: 1px solid var(--hh-bernstein); padding-top: 18px;
  display: flex; flex-direction: column; gap: 4px; flex: 1; }
.hh-kennzahl__wert { font-size: 40px; font-weight: 800; line-height: 1;
  letter-spacing: -0.02em; color: var(--hh-bernstein); }
.hh-kennzahl__label { font-size: 14px; font-weight: 400; color: var(--hh-weiss-72); }   /* 300 war zu dünn (28.09.2026) */

/* Modul B: Kennungskreis – sitzt auf einer Kante */
.hh-kennung {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hh-bernstein); background: var(--hh-dunkel);
  color: var(--hh-bernstein); font-family: var(--hh-mono);
  font-size: 14px; font-weight: 500;
  display: flex; align-items: center; justify-content: center;
}
/* Kennungskreise stehen auf der Website alle in Bernstein (Hanno, 22.09.2026) – keine graue Nebensache-Variante mehr */
/* Kennungskreis, der auf einer Flächenkante sitzt (Kontaktblock) */
.hh-kennung--auf-flaeche { background: var(--hh-flaeche); }

/* Konturkarte */
.hh-karte { position: relative; border: 1px solid var(--hh-linie); padding: 52px 40px 44px;
  display: flex; flex-direction: column; gap: 22px; }
.hh-karte > .hh-kennung { position: absolute; left: 36px; top: -22px; }

/* ===========================================================================
   Seitenaufbau
   =========================================================================== */
.bahn { max-width: var(--hh-breite); margin: 0 auto; padding-left: var(--hh-polster); padding-right: var(--hh-polster); }
.sektion { padding-top: var(--hh-sektion); }
.stapel { display: flex; flex-direction: column; }

/* ---------- Navigation ---------- */
.kopf { display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 20px 32px; padding-top: 26px; padding-bottom: 26px; }
.kopf__marke { flex-shrink: 0; }
.kopf__menue { display: flex; gap: 26px; font-size: 16px; font-weight: 600; flex-wrap: wrap; }
.kopf__menue a { color: var(--hh-weiss-72); white-space: nowrap; }
.kopf__menue a:hover { color: var(--hh-bernstein); }
.kopf .hh-button { white-space: nowrap; flex-shrink: 0; }

/* ---------- Hero ---------- */
.hero { padding-top: 80px; padding-bottom: 104px; }
/* Lücke 40 statt 56 px: „Leichter Mitarbeitende finden.“ braucht 684 px, bei 56 px Lücke
   blieben 676 – „finden.“ stand allein in der dritten Zeile (28.09.2026) */
.hero__raster { display: grid; grid-template-columns: 1fr 380px; gap: 40px; align-items: center; }
.hero__text { display: flex; flex-direction: column; gap: 30px; }
.hero__lead { font-size: 19px; line-height: 1.6; font-weight: 300;
  color: var(--hh-weiss-90); max-width: 44ch; }
.hero__knoepfe { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* Versetzter Bildrahmen: leere Kontur hinten, Bild vorn */
.bildrahmen { position: relative; width: 100%; aspect-ratio: 4 / 5; max-width: 520px; justify-self: end; }
.bildrahmen__kontur { position: absolute; left: 40px; top: 0; right: 0; bottom: 60px;
  border: 1px solid var(--hh-linie-stark); }
.bildrahmen__bild { position: absolute; left: 40px; top: 60px; right: 60px; bottom: 0; overflow: hidden; }

/* Hero-Bild mit Bildunterschrift (23.09.2026) */
.hero__bild { margin: 0; width: 380px; max-width: 100%; display: flex; flex-direction: column; gap: 16px; }
.hero__bild .bildrahmen--hero { width: 100%; }
.hero__bild figcaption { font-size: 14px; line-height: 1.5; color: var(--hh-weiss-55); }

/* Hero-Rahmen, gesetzte Fassung 14.09.2026: 3 px Bernstein, Bild 3:4, Versatz 32/48 */
.bildrahmen--hero { aspect-ratio: 3 / 4; width: 380px; max-width: 100%; justify-self: stretch; }
.bildrahmen--hero .bildrahmen__kontur { left: 32px; top: 0; right: 0; bottom: 48px;
  border: 3px solid var(--hh-bernstein); }
.bildrahmen--hero .bildrahmen__bild { left: 0; top: 48px; right: 48px; bottom: 0;
  background: var(--hh-flaeche); }
.bildrahmen__bild img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Kundenleiste: laufendes Band ---------- */
/* Bernsteinband ober- und unterhalb – rahmt das Logoband ein (14.09.2026) */
.kunden { border-top: 3px solid var(--hh-bernstein); border-bottom: 3px solid var(--hh-bernstein); }
.sektion + .kunden { margin-top: var(--hh-sektion); }   /* Logoband nach einem Abschnitt, z. B. Über uns */
.kunden__inhalt { padding-top: 40px; padding-bottom: 40px; display: flex; flex-wrap: wrap; gap: 12px 24px;
  align-items: baseline; justify-content: space-between; }
.kunden__titel { font-size: 15px; line-height: 1.5; color: var(--hh-weiss-72); }
.kunden__titel a { color: var(--hh-weiss-72); display: inline-flex; gap: 10px; }
.kunden__titel a:hover { color: var(--hh-bernstein); }
/* Anhalten per Knopf – für Tastatur und Touch, Hover allein reicht nicht (WCAG 2.2.2, 28.09.2026) */
.kunden__pause { background: none; border: 0; padding: 8px; margin: -8px; cursor: pointer; line-height: 0;
  color: var(--hh-weiss-72); }
/* Symbol statt Text (21.10.2026): läuft → Pause-Zeichen, steht → Play-Zeichen */
.kunden__play-zeichen { display: none; }
.kunden--angehalten .kunden__pause-zeichen { display: none; }
.kunden--angehalten .kunden__play-zeichen { display: inline; }
.kunden__pause:focus-visible { outline: 2px solid var(--hh-bernstein); outline-offset: 2px; }
.kunden__pause:hover { color: var(--hh-bernstein); }

/* Das Band läuft über die volle Fensterbreite, nicht nur über die Inhaltsbahn */
.kunden__band { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 80px, #000 calc(100% - 80px), transparent); }
/* Luft nach unten, damit die Logos nicht an das untere Bernsteinband stoßen (23.09.2026) */
.kunden__band { padding-bottom: 56px; }
.kunden__spur { display: flex; width: max-content; animation: kunden-lauf 48s linear infinite; }
.kunden__band:hover .kunden__spur,
.kunden--angehalten .kunden__spur { animation-play-state: paused; }
.kunden__satz { display: flex; align-items: center; gap: 56px; padding-right: 56px; flex: none; }
.kunden__satz img { height: 36px; width: auto; opacity: 0.82; }
@keyframes kunden-lauf { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Ohne Bewegung: von Hand wischbar statt laufend */
@media (prefers-reduced-motion: reduce) {
  .kunden__band { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }
  .kunden__spur { animation: none; }
  .kunden__pause { display: none; }
}

/* ---------- Handlungsfelder ---------- */
.felder { gap: 52px; }
.felder__kopf { display: flex; flex-direction: column; gap: 20px; }
.felder__kopf h2 { max-width: 24ch; }
.felder__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 32px; padding-top: 8px; }
.karte__text { font-size: 17px; line-height: 1.65; color: var(--hh-weiss-90); }
.karte__liste { display: flex; flex-direction: column; gap: 10px;
  font-size: 16px; line-height: 1.5; color: var(--hh-weiss-90);
  border-top: 1px solid var(--hh-linie-karte); padding-top: 22px;
  list-style: none; margin: 0; padding-left: 0; }
.karte__mehr { margin-top: auto; padding-top: 10px; font-size: 16px; font-weight: 700;
  display: inline-flex; align-items: center; gap: 10px; }

/* ---------- Kundenstimmen als Karussell ---------- */
.stimmen { gap: 28px; }
.stimmen__kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }

/* Spur: nativ wischbar, rastet je Karte ein. Am Desktop genau zwei Karten nebeneinander –
   eine angeschnittene dritte endete mitten im Wort. Jede Karte so hoch wie ihr Zitat,
   sonst stand unter kurzen Zitaten bis zu 270 px Leere (28.09.2026) */
.stimmen__spur {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 48px) / 2);
  gap: 48px; overflow-x: auto; scroll-snap-type: x mandatory; align-items: start;   /* 48 px: Kreis der dritten Karte bleibt verdeckt */
  scroll-padding-left: 0; scrollbar-width: none; padding-bottom: 4px;
  /* Platz für den Kreis, der oben links aus der Karte ausbricht – ohne negativen Rand nach oben,
     sonst ragt der Kreis in die Rubrik */
  padding-top: 44px;
  padding-left: 44px; margin-left: -44px; scroll-padding-left: 44px;
}
.stimmen__spur::-webkit-scrollbar { display: none; }
.stimme { margin: 0; position: relative; scroll-snap-align: start; border: 1px solid var(--hh-linie);
  padding: 44px 40px 40px; display: flex; flex-direction: column; gap: 26px; }

/* Der Durchbruch: Kundenlogo im Bernstein-Kreis auf der linken oberen Ecke */
.stimme__logo {
  position: absolute; left: -1px; top: -1px; width: 88px; height: 88px;
  border-radius: 50%; border: 1px solid var(--hh-bernstein); background: var(--hh-dunkel);
  margin: -44px 0 0 -44px; overflow: hidden;
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
.stimme__logo img { width: 100%; height: 100%; object-fit: contain; }
/* Platzhalter, solange kein Logo vorliegt: Kürzel im Kreis (Modul B) */
.stimme__kuerzel { font-family: var(--hh-mono); font-size: 14px; font-weight: 500; color: var(--hh-bernstein); }
.stimme blockquote { font-size: 24px; line-height: 1.45; font-weight: 700;
  letter-spacing: -0.015em; margin: 0; }
.stimme__wer { display: flex; flex-direction: column; gap: 4px;
  border-top: 1px solid var(--hh-linie-karte); padding-top: 20px; margin-top: auto; }
.stimme__name { font-size: 16px; font-weight: 700; }
.stimme__rolle { font-size: 15px; color: var(--hh-weiss-55); }

/* Steuerung */
.karussell__steuer { display: flex; align-items: center; gap: 20px; }
.karussell__pfeile { display: flex; gap: 8px; }
.karussell__pfeil {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--hh-bernstein); background: transparent; color: var(--hh-bernstein);
  font-family: var(--hh-mono); font-size: 15px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background-color 150ms ease, color 150ms ease;
}
/* Hover ohne Bernstein-Fläche (Bernstein ist nie Fläche): die Kontur wird kräftiger */
.karussell__pfeil:hover:not(:disabled) { border-width: 2px; }
.karussell__pfeil:disabled { border-color: var(--hh-weiss-35); color: var(--hh-weiss-35); cursor: default; }
.karussell__punkte { display: flex; gap: 0; align-items: center; }
/* Punkt 9 px, Trefferfläche 24 px */
.karussell__punkt {
  width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.karussell__punkt::before {
  content: ""; width: 9px; height: 9px; border-radius: 50%; box-sizing: border-box;
  border: 1px solid var(--hh-bernstein); transition: background-color 150ms ease;
}
.karussell__punkt[aria-current="true"]::before { background: var(--hh-bernstein); }
.karussell__wisch { font-size: 13px; color: var(--hh-weiss-55); white-space: nowrap; }
/* Zähler „3 / 11“ ersetzt am Handy die Punkte */
.karussell__zaehler { display: none; font-family: var(--hh-mono); font-size: 14px; color: var(--hh-weiss-72);
  font-variant-numeric: tabular-nums; }

/* ---------- Über uns ---------- */
.ueber__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 72px; align-items: center; }
.ueber__text { display: flex; flex-direction: column; gap: 26px; }
.ueber__text h2 { font-size: 44px; max-width: 22ch; }
.ueber__lead { font-size: 18px; line-height: 1.65; color: var(--hh-weiss-90); max-width: 52ch; }
.ueber__zahlen { display: flex; align-items: stretch; gap: 0; max-width: 640px; padding-top: 8px; flex-wrap: wrap; }
/* Trennlinie mit Kennungskreis darauf – das Bernstein-Modul dieses Bildschirms */
.ueber__trenner { width: 1px; background: var(--hh-linie); margin: 0 30px; position: relative; flex: none; }
.ueber__trenner .hh-kennung { position: absolute; left: -22px; top: 50%; margin-top: -22px; }
/* Versatz gespiegelt: Kontur links/unten, Bild rechts/oben */
.bildrahmen--quadrat { aspect-ratio: 1 / 1; max-width: 480px; }
.bildrahmen--quadrat .bildrahmen__kontur { left: 0; top: 40px; right: 40px; bottom: 0; }
.bildrahmen--quadrat .bildrahmen__bild { left: 40px; top: 0; right: 0; bottom: 40px; }
/* Foto mit Bildunterschrift im Abschnitt „Über uns“ der Startseite (21.10.2026) */
.ueber__bild { margin: 0; width: 100%; max-width: 480px; justify-self: end; display: flex; flex-direction: column; gap: 16px; }
.ueber__bild .bildrahmen { max-width: none; }
.ueber__bild figcaption { font-size: 14px; line-height: 1.5; color: var(--hh-weiss-55); padding-left: 40px; }
@media (max-width: 900px) { .ueber__bild { justify-self: start; } }

/* ---------- Kontakt ---------- */
.kontakt__flaeche { position: relative; background: var(--hh-flaeche); padding: 64px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 56px; align-items: center; }   /* mittig statt unten: Rubrik stand deutlich unter der Fotokante (Hanno, 21.10.2026) */
.kontakt__flaeche > .hh-kennung { position: absolute; left: 64px; top: -22px; }
.kontakt__text { display: flex; flex-direction: column; gap: 22px; }
.kontakt__text h2 { font-size: 44px; line-height: 1.24; max-width: 20ch; }
.kontakt__lead { font-size: 19px; line-height: 1.6; font-weight: 300; color: var(--hh-weiss-90); max-width: 50ch; }
.kontakt__aktion { display: flex; flex-direction: column; gap: 16px; }
/* Startseite: Kopf und Button mittig, Button als klarer, normal großer CTA (24.09.2026) */
.kontakt__aktion--mitte { align-items: center; gap: 24px; }
/* Kopfporträt im Kreis über dem Button (Kreise immer in Bernstein) */
/* Hanno mit Oberkörper statt nur Kopf, größer (Kommentar k15, 29.09.2026): Hero-Porträt im Kreis */
.kontakt__bild { width: 200px; height: 200px; border-radius: 50%; border: 1px solid var(--hh-bernstein);
  object-fit: cover; object-position: 50% 8%; margin-bottom: 8px; }
.kontakt__wer { font-size: 15px; line-height: 1.6; color: var(--hh-weiss-55); }
.kontakt__wer a { color: var(--hh-weiss-55); text-decoration: underline; text-underline-offset: 3px; }
.kontakt__wer a:hover { color: var(--hh-bernstein); }
/* Kontaktblock: Nachricht ist der Hauptweg, Terminbuchung nur als kleiner Zusatz (20.10.2026) */
.kontakt__termin { font-size: 15px; line-height: 1.6; color: var(--hh-weiss-55); text-decoration: underline; text-underline-offset: 3px; margin-top: -8px; }
.kontakt__termin:hover { color: var(--hh-bernstein); }

/* ---------- Footer ---------- */
/* Trennlinie nur über der Inhaltsbahn (vorher lief sie 64 px über den Inhalt hinaus).
   Links in zwei Gruppen: Leistungen und Fachartikel, dann Rechtliches (28.09.2026) */
.fuss { max-width: var(--hh-breite); margin: 88px auto 0; padding: 64px var(--hh-polster);
  background: linear-gradient(var(--hh-linie-schwach), var(--hh-linie-schwach)) no-repeat
    var(--hh-polster) 0 / calc(100% - 2 * var(--hh-polster)) 1px;
  display: flex; align-items: flex-start; gap: 24px 48px; flex-wrap: wrap; }
.fuss__links { display: flex; flex-direction: column; gap: 14px; font-size: 14px; color: var(--hh-weiss-55); flex: 1 1 480px; }
.fuss__gruppe { display: flex; gap: 8px 28px; flex-wrap: wrap; align-items: center; }
.fuss__links a { color: var(--hh-weiss-55); }
.fuss__links a:hover { color: var(--hh-bernstein); }

/* ---------- Bildplätze: ersetzen, sobald echte Bilder da sind ---------- */
.bildplatz { width: 100%; height: 100%; border: 1px dashed var(--hh-linie-stark);
  display: flex; align-items: center; justify-content: center; padding: 16px;
  font-family: var(--hh-mono); font-size: 12px; line-height: 1.5;
  color: var(--hh-weiss-45); text-align: center; }

/* ---------- Leistungsseiten im Startseiten-Aufbau (24.09.2026) ---------- */
/* Hero mit Produktbild: zwei gleich breite Spalten, Rahmen quer oder quadratisch */
.hero__raster--quer { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.hero__raster--quer .hero__bild { width: 100%; }
.bildrahmen--hero.bildrahmen--quer { aspect-ratio: 16 / 10; }
.bildrahmen--hero.bildrahmen--quadratisch { aspect-ratio: 1 / 1; }
.band-zahlen { padding-top: 8px; }
/* Bildreihe: Einblicke in echte Kundenprojekte */
.einblick { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 32px; }
.einblick figure { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.einblick img { width: 100%; height: auto; border: 1px solid var(--hh-linie); }
.einblick figcaption { font-size: 14px; line-height: 1.5; color: var(--hh-weiss-55); }
/* Kundenstimmen als festes Raster (ohne Karussell); der Logokreis sitzt auf der oberen Kante */
.stimmen-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
  gap: 76px 32px; padding-top: 44px; }
.stimmen-raster .stimme__logo { margin: -44px 0 0 28px; }
/* Weitere Referenzen als Karten mit Logokreis auf der Oberkante (Vermietungsseite, 19.10.2026) */
.referenz-raster { margin-top: 76px; row-gap: 76px; }
.referenz-raster .stimme__logo { margin: -44px 0 0 28px; }
.referenz-raster .hh-karte { padding-top: 64px; }
/* Weitere Projekte als Karussell: drei Karten sichtbar, der Rest wischt herein (Vermietungsseite, 21.10.2026).
   44 px Polster oben, sonst schneidet overflow den Logokreis ab */
/* Kundenstimmen mit eigener Auswahl innerhalb eines Abschnitts (stimmen-bauen.py, data-auswahl) */
.stimmen[data-auswahl] { margin-top: 56px; }
.referenz-karussell { margin-top: 76px; display: flex; flex-direction: column; gap: 4px; }
.referenz-spur { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 64px) / 3); gap: 32px;
  margin-top: 0; padding-top: 44px; padding-bottom: 4px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; }
.referenz-spur::-webkit-scrollbar { display: none; }
.referenz-spur > .hh-karte { scroll-snap-align: start; }
@media (max-width: 1100px) { .referenz-spur { grid-auto-columns: calc((100% - 32px) / 2); } }
@media (max-width: 640px) { .referenz-spur { grid-auto-columns: 100%; } }
/* Ergebnisse aus dem Recruiting als Karussell im Stil der Kundenstimmen (Recruiting-Seite, 21.10.2026):
   Logo im Kreis oben, Jobtitel, kurzer Text, Kernzahlen unten. Karten gleich hoch, damit die Zahlen auf einer Linie stehen */
.ergebnisse__kopf { align-items: flex-end; }
.ergebnisse__spur { align-items: stretch; }
.ergebnis__titel { font-size: 24px; line-height: 1.3; font-weight: 700; letter-spacing: -0.015em; margin: 0; }
.ergebnis__text { font-size: 16px; line-height: 1.6; color: var(--hh-weiss-72); margin: 0; }
.ergebnis__fuss { display: flex; flex-direction: column; gap: 14px; margin-top: auto;
  border-top: 1px solid var(--hh-linie-karte); padding-top: 20px; }
.ergebnis__zahlen { display: flex; gap: 32px; flex-wrap: wrap; }
.ergebnis__zahl { display: flex; flex-direction: column; gap: 4px; }
.ergebnis__wert { font-size: 44px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--hh-bernstein); }
.ergebnis__label { font-size: 14px; color: var(--hh-weiss-72); }
.ergebnis__vorsatz { display: block; font-size: 15px; font-weight: 400; color: var(--hh-weiss-55); margin-bottom: 6px; }
/* Logokacheln: farbige Kunden- und Verbandslogos auf Weiß, groß (Hanno, 19.10.2026 – Ausnahme von „Logos einfarbig weiß“) */
.logokacheln { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); }
.logokacheln li { background: var(--hh-weiss); height: 128px; display: flex; align-items: center; justify-content: center;
  padding: 20px 24px; overflow: hidden; }
.logokacheln img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logokacheln + .abschnitt__kopf { margin-top: 72px; }
/* Hintergrundtext zum Aufklappen – bleibt für Suchmaschinen im Quelltext */
.aufklapp { border-top: 1px solid var(--hh-linie); border-bottom: 1px solid var(--hh-linie); }
.aufklapp summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 16px;
  padding: 24px 0; font-size: 20px; font-weight: 700; letter-spacing: -0.015em; }
.aufklapp summary::-webkit-details-marker { display: none; }
.aufklapp summary::after { content: "+"; margin-left: auto; font-size: 28px; font-weight: 300; color: var(--hh-weiss-72); }
.aufklapp[open] summary::after { content: "–"; }
.aufklapp summary:hover { color: var(--hh-bernstein); }
.aufklapp .prosa { padding-bottom: 40px; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 900px) {
  :root { --hh-polster: 24px; --hh-sektion: 72px; }
  h1 { font-size: 36px; }
  h2 { font-size: 32px; }
  .ueber__text h2, .kontakt__text h2 { font-size: 32px; }
  .hero { padding-top: 48px; padding-bottom: 72px; }
  .hero__raster { grid-template-columns: minmax(0, 1fr); }
  /* Der Hero-Rahmen ist am Desktop fest 380 px – am Handy nimmt er die Spaltenbreite, sonst schiebt er die Seite über den Rand */
  .bildrahmen--hero, .hero__bild { width: 100%; }
  .prosa table { display: block; overflow-x: auto; }
  .seitenkopf__zahlen .hh-kennzahl { max-width: none; }
  .hero__raster, .ueber__raster { gap: 48px; }
  .bildrahmen { justify-self: start; }
  /* Drei Kennzahlen brechen um – die senkrechten Trenner stünden dann falsch */
  .ueber__zahlen { gap: 28px 0; }
  .ueber__trenner { display: none; }
  .kontakt__flaeche { padding: 40px 28px; gap: 36px; }
  .hh-karte { padding: 52px 28px 36px; }
  /* Lange Einzelwörter („Vermietungsmarketing“) passen bei 32 px nicht in die Karte */
  .hh-karte h3 { font-size: 26px; }
  .seitenkopf h1 { overflow-wrap: anywhere; hyphens: auto; }
  .hh-karte h3, .karte__titel { overflow-wrap: anywhere; }
  .stimme { padding: 44px 28px 32px; }
  .stimme blockquote { font-size: 21px; }
  /* Handy: eine Karte je Bild, Kreis auf der Oberkante statt auf der Ecke (sonst links angeschnitten),
     48 px Lücke, damit der Kreis der nächsten Karte nicht am Rand hereinragt (28.09.2026) */
  .stimmen__spur { grid-auto-columns: 100%; gap: 48px; padding-left: 0; margin-left: 0; scroll-padding-left: 0; }
  .stimmen__spur .stimme__logo { margin: -44px 0 0 20px; }
  .stimmen__kopf { align-items: center; }
  .karussell__steuer { width: 100%; justify-content: space-between; }
  .karussell__wisch, .karussell__punkte { display: none; }
  .karussell__zaehler { display: block; }
  .kontakt__flaeche > .hh-kennung { left: 28px; }
  .fuss { padding: 48px var(--hh-polster); }
  /* Kopfzeile: Scheibe und Button in einer Zeile, Menü darunter (vorher drei Zeilen, 28.09.2026) */
  .kopf { gap: 12px 16px; padding-top: 18px; padding-bottom: 18px; }
  .kopf__marke img { width: 48px; height: 48px; }
  .kopf .hh-button { order: 2; margin-left: auto; }
  .kopf__menue { order: 3; width: 100%; gap: 4px 22px; font-size: 15px; }
  .nur-breit { display: none; }
  /* Lange Wörter („Wohnungsunternehmen“) trennen statt über den Rand laufen */
  h1, h2 { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 12 5 5; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}


/* ===========================================================================
   Unterseiten (seit 22.09.2026)
   =========================================================================== */
/* Sprunglink: erst sichtbar, wenn er per Tab den Fokus bekommt */
.sprung { position: absolute; left: -999px; top: 8px; background: var(--hh-blau); color: var(--hh-weiss);
  padding: 10px 16px; font-size: 19px; font-weight: 700; z-index: 10; }
.sprung:focus { left: 16px; }
.sprung:hover { color: var(--hh-weiss); }   /* sonst Bernstein auf Blau, 2,3:1 */

/* Aktueller Bereich im Menü */
.kopf__menue a[aria-current="page"] { color: var(--hh-weiss); border-bottom: 1px solid var(--hh-weiss-45); padding-bottom: 2px; }

/* Menü „Leistungen“ mit Unterpunkten (20.10.2026): am Rechner Ausklapper bei Hover/Fokus, am Handy stehen die Unterpunkte direkt in der Zeile */
.kopf__gruppe { position: relative; }
.kopf__oben { cursor: pointer; }
.kopf__oben.ist-aktiv { color: var(--hh-weiss); }
.kopf__pfeil { font-size: 11px; margin-left: 5px; display: inline-block; transform: translateY(-1px); }
.kopf__unter { display: none; position: absolute; top: 100%; left: -20px; z-index: 30; padding-top: 12px; }
.kopf__unter-innen { display: flex; flex-direction: column; gap: 12px; min-width: 190px; padding: 18px 20px;
  background: var(--hh-flaeche); border: 1px solid var(--hh-linie); }
.kopf__gruppe:hover .kopf__unter, .kopf__gruppe:focus-within .kopf__unter { display: block; }
@media (max-width: 900px) {
  .kopf__gruppe, .kopf__unter, .kopf__unter-innen { display: contents; }
  .kopf__oben { display: none; }
}

/* Burger am Handy (21.10.2026): Menü klappt unter der Kopfzeile auf; ohne JS (keine Klasse kopf--burger) bleibt es offen */
.kopf__burger, .kopf__krume { display: none; }
@media (max-width: 900px) {
  .kopf--burger .kopf__burger { display: flex; order: 3; align-items: center; justify-content: center;
    width: 48px; height: 48px; padding: 0; background: transparent; color: var(--hh-weiss);
    border: 1px solid var(--hh-linie-stark); border-radius: 0; cursor: pointer; }
  .kopf__burger:hover { border-color: var(--hh-bernstein); }
  .kopf__burger-striche, .kopf__burger-striche::before, .kopf__burger-striche::after {
    display: block; width: 20px; height: 2px; background: currentColor; position: relative; transition: transform 150ms ease; }
  .kopf__burger-striche::before, .kopf__burger-striche::after { content: ""; position: absolute; left: 0; }
  .kopf__burger-striche::before { top: -6px; }
  .kopf__burger-striche::after { top: 6px; }
  .kopf--offen .kopf__burger-striche { background: transparent; }
  .kopf--offen .kopf__burger-striche::before { top: 0; transform: rotate(45deg); }
  .kopf--offen .kopf__burger-striche::after { top: 0; transform: rotate(-45deg); }
  .kopf--burger .kopf__menue { display: none; order: 4; flex-direction: column; gap: 0; font-size: 18px;
    border-top: 1px solid var(--hh-linie); margin-top: 6px; }
  .kopf--offen .kopf__menue { display: flex; }
  .kopf--burger .kopf__menue a { padding: 14px 0; border-bottom: 1px solid var(--hh-linie-schwach); }
  .kopf--burger .kopf__menue a[aria-current="page"] { padding-bottom: 14px; border-bottom-color: var(--hh-linie-schwach); color: var(--hh-weiss); font-weight: 800; }
  /* Brotkrume: wo bin ich – nur bei geschlossenem Menü */
  .kopf__krume { display: block; order: 5; width: 100%; font-size: 14px; color: var(--hh-weiss-72); }
  .kopf--offen .kopf__krume { display: none; }
  .kopf__krume a { color: var(--hh-weiss-72); text-decoration: underline; text-underline-offset: 3px; }
  .kopf__krume span:last-child { color: var(--hh-weiss); }
  .kopf__krume-pfeil { margin: 0 8px; }
}

/* Mitlaufender Kontakt-Knopf (21.10.2026): kommt, sobald der obere Teil weg ist, geht am Kontaktblock und Fuß */
.mitlauf { position: fixed; right: 24px; bottom: 24px; z-index: 800;
  opacity: 0; transform: translateY(12px); pointer-events: none; visibility: hidden;
  transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms, background-color 150ms ease; }
.mitlauf--an { opacity: 1; transform: none; pointer-events: auto; visibility: visible;
  transition: opacity 200ms ease, transform 200ms ease, background-color 150ms ease; }
@media (max-width: 900px) {
  .mitlauf { left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); text-align: center; }
}

/* Seitenkopf: Rubrik, H1, Lead, optional eine Kennzahlreihe (das Bernstein-Modul dieses Bildschirms) */
.seitenkopf { padding-top: 72px; padding-bottom: 64px; display: flex; flex-direction: column; gap: 22px; }
.seitenkopf h1 { font-size: 46px; max-width: 26ch; }
.seitenkopf__lead { font-size: 19px; line-height: 1.6; font-weight: 300; color: var(--hh-weiss-90); max-width: 60ch; }
.seitenkopf__zahlen { display: flex; gap: 40px; flex-wrap: wrap; padding-top: 16px; max-width: 820px; }
.seitenkopf__zahlen .hh-kennzahl { flex: 1 1 200px; max-width: 260px; }

/* Lesetext */
.prosa { max-width: 72ch; display: flex; flex-direction: column; gap: 18px; }
.prosa h2 { font-size: 30px; letter-spacing: -0.02em; line-height: 1.2; margin-top: 40px; }
.prosa h3 { font-size: 22px; letter-spacing: -0.015em; line-height: 1.3; margin-top: 22px; }
.prosa h2:first-child, .prosa h3:first-child { margin-top: 0; }
.prosa .hh-rubrik + h2 { margin-top: 0; }
.prosa p, .prosa li { color: var(--hh-weiss-90); }
.prosa strong { color: var(--hh-weiss); }
.prosa ul, .prosa ol { margin: 0; padding-left: 22px; display: flex; flex-direction: column; gap: 8px; }
.prosa a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--hh-weiss-45); overflow-wrap: anywhere; }
.prosa a:hover { color: var(--hh-bernstein); text-decoration-color: var(--hh-bernstein); }
.prosa blockquote { margin: 10px 0; padding: 4px 0 4px 24px; border-left: 1px solid var(--hh-linie-stark);
  font-size: 21px; line-height: 1.45; font-weight: 700; letter-spacing: -0.01em; }
.prosa blockquote p { color: var(--hh-weiss); }
.prosa figure { margin: 12px 0; display: flex; flex-direction: column; gap: 10px; }
.prosa img { border: 1px solid var(--hh-linie); width: 100%; height: auto; }
.prosa figcaption { font-size: 14px; line-height: 1.5; color: var(--hh-weiss-55); }
.prosa hr { border: 0; border-top: 1px solid var(--hh-linie-schwach); margin: 24px 0; width: 100%; }
.prosa table { border-collapse: collapse; width: 100%; font-size: 15px; line-height: 1.5; }
.prosa th { text-align: left; font-family: var(--hh-schrift); font-size: 13px; font-weight: 700;
  color: var(--hh-weiss-72); padding: 10px 14px 10px 0; border-bottom: 1px solid var(--hh-linie); }
.prosa td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hh-linie-schwach); vertical-align: top; color: var(--hh-weiss-90); }
.prosa--breit { max-width: 100%; }
.prosa--klein p, .prosa--klein li, .prosa--klein td { font-size: 15px; }

/* Abschnitt mit eigenem Kopf */
.abschnitt { display: flex; flex-direction: column; gap: 40px; }
.abschnitt__kopf { display: flex; flex-direction: column; gap: 16px; }
.abschnitt__kopf h2 { font-size: 40px; max-width: 26ch; }
/* Rubrik, die zugleich Abschnittsüberschrift ist (Ressourcen): sieht aus wie jede Rubrik */
.abschnitt__kopf h2.hh-rubrik { font-size: 12px; line-height: 1.65; max-width: none; }
.abschnitt__kopf p:not(.hh-rubrik) { font-size: 18px; line-height: 1.6; color: var(--hh-weiss-90); max-width: 60ch; font-weight: 300; }
.zweispalter { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 64px; align-items: start; }

/* Kundenstimme als eigener Block */
.zitat { margin: 0; border: 1px solid var(--hh-linie); padding: 40px; display: flex; flex-direction: column; gap: 20px; max-width: 760px; }
.zitat blockquote { margin: 0; font-size: 22px; line-height: 1.45; font-weight: 700; letter-spacing: -0.015em; }
.zitat__wer { font-size: 15px; color: var(--hh-weiss-55); display: flex; flex-direction: column; gap: 2px;
  border-top: 1px solid var(--hh-linie-karte); padding-top: 18px; }
.zitat__wer strong { color: var(--hh-weiss); font-weight: 700; font-size: 16px; }

/* Kartenraster */
/* Zeilenabstand 56 px: die Kreise der zweiten Reihe ragen 22 px nach oben (28.09.2026) */
.raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 56px 32px; padding-top: 8px; }
.raster--zwei { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); }
.karte__titel { font-size: 26px; letter-spacing: -0.02em; line-height: 1.2; }
/* Lange Wörter in schmalen Karten trennen, kurze („Erstgespräch“) nicht (28.09.2026) */
.hh-karte h3, .karte__titel { -webkit-hyphens: auto; hyphens: auto; hyphenate-limit-chars: 14 6 6; }
.karte__meta { font-family: var(--hh-schrift); font-size: 13px; font-weight: 700; color: var(--hh-bernstein); }
.hh-karte--flach { padding: 40px 36px 36px; gap: 16px; }

/* Logowand */
.logowand { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 44px 32px; align-items: center;
  list-style: none; margin: 0; padding: 8px 0; }
.logowand li { display: flex; justify-content: center; }
.logowand img { height: 36px; width: auto; max-width: 100%; opacity: 0.82; }
.textliste { display: flex; flex-wrap: wrap; gap: 12px 32px; font-family: var(--hh-mono); font-size: 13px; letter-spacing: 0.03em;
  color: var(--hh-weiss-72); list-style: none; margin: 0; padding: 0; }

/* Termine */
.termine { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.termin { display: grid; grid-template-columns: 160px 1fr auto; gap: 24px; align-items: baseline; padding: 22px 0;
  border-top: 1px solid var(--hh-linie-schwach); }
.termin:last-child { border-bottom: 1px solid var(--hh-linie-schwach); }
.termin__datum { font-family: var(--hh-mono); font-size: 14px; color: var(--hh-weiss-72); display: flex; flex-direction: column; gap: 4px; }
.termin__thema { font-size: 18px; font-weight: 700; display: block; }
.termin__anbieter { font-size: 15px; color: var(--hh-weiss-55); }
.termin .hh-button--klein { justify-self: end; }

/* Schritte: Kennungskreise in Bernstein auf der Trennlinie */
.schritte { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 32px; padding-top: 22px; }
.schritte li { display: flex; flex-direction: column; gap: 12px; padding-top: 32px; border-top: 1px solid var(--hh-linie); position: relative; }
.schritte li .hh-kennung { position: absolute; top: -22px; left: 0; }
.schritte h3 { font-size: 21px; letter-spacing: -0.015em; line-height: 1.25; }
.schritte p { color: var(--hh-weiss-90); font-size: 16px; line-height: 1.6; }

/* Fläche für einen Hinweis mit Knopf (Absprung für Seminar-Anbieter) */
.flaeche { background: var(--hh-flaeche); padding: 40px 44px; display: flex; flex-wrap: wrap; gap: 24px 40px;
  align-items: center; justify-content: space-between; }
.flaeche p { font-size: 17px; line-height: 1.6; color: var(--hh-weiss-90); max-width: 62ch; }
.flaeche .hh-rubrik { margin-bottom: 8px; display: block; }

/* Formular: Beschriftung am Feld, Fokus sichtbar, Pflicht nicht nur per Farbe */
.formular { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 22px 28px; max-width: 760px; }
.feld { display: flex; flex-direction: column; gap: 8px; }
.feld--breit { grid-column: 1 / -1; }
.feld label { font-size: 15px; font-weight: 600; }
.feld label small { font-weight: 400; color: var(--hh-weiss-55); }
.feld input, .feld textarea, .feld select { background: var(--hh-flaeche); color: var(--hh-weiss); border: 1px solid var(--hh-linie-stark);
  padding: 14px 16px; font: inherit; font-size: 17px; line-height: 1.4; border-radius: 0; width: 100%; }
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: 2px solid var(--hh-bernstein); outline-offset: 2px; border-color: var(--hh-weiss); }
.feld textarea { min-height: 160px; resize: vertical; }
.feld__hinweis { font-size: 14px; color: var(--hh-weiss-55); line-height: 1.5; }
.formular__fuss { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; }
.formular__meldung { font-size: 15px; line-height: 1.5; border: 1px solid var(--hh-linie-stark); padding: 12px 16px; }
.formular__meldung:empty { display: none; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Leere Seite (404) */
.leer { padding-top: 120px; padding-bottom: 120px; display: flex; flex-direction: column; gap: 22px; max-width: 60ch; }

@media (max-width: 900px) {
  .seitenkopf { padding-top: 40px; padding-bottom: 40px; }
  .seitenkopf h1 { font-size: 34px; }
  .abschnitt__kopf h2 { font-size: 30px; }
  .prosa h2 { font-size: 26px; }
  .termin { grid-template-columns: 1fr; gap: 6px; }
  .termin .hh-button--klein { justify-self: start; margin-top: 8px; }
  .zitat, .flaeche { padding: 28px; }
  .hh-karte--flach { padding: 40px 28px 32px; }
}

/* Einwilligungs-Banner (eigener Manager statt Cookiebot, 20.10.2026) – Leiste unten, Seite bleibt bedienbar */
.einwilligung { position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; background: var(--hh-flaeche);
  border-top: 3px solid var(--hh-bernstein); padding: 24px max(16px, env(safe-area-inset-right, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(16px, env(safe-area-inset-left, 0px));
  max-height: 85vh; overflow-y: auto; }
.einwilligung[hidden] { display: none; }
.einwilligung__innen { max-width: 1112px; margin: 0 auto; display: grid; gap: 16px; }
.einwilligung__titel { font-size: 20px; font-weight: 800; color: var(--hh-weiss); }
.einwilligung__text { font-size: 15px; line-height: 1.6; color: var(--hh-weiss-90); max-width: 72ch; }
.einwilligung__text a { color: var(--hh-weiss); text-decoration: underline; }
.einwilligung__auswahl { display: grid; gap: 12px 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.einwilligung__regler { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 15px; color: var(--hh-weiss); }
.einwilligung__regler small { display: block; font-size: 13px; line-height: 1.5; color: var(--hh-weiss-72); margin-top: 2px; }
.einwilligung__regler input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.einwilligung__schalter { flex: 0 0 auto; width: 40px; height: 22px; border-radius: 11px; background: var(--hh-weiss-35); position: relative; margin-top: 1px; transition: background .2s; }
.einwilligung__schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--hh-weiss); transition: transform .2s; }
.einwilligung__regler input:checked + .einwilligung__schalter { background: var(--hh-blau); }
.einwilligung__regler input:checked + .einwilligung__schalter::after { transform: translateX(18px); }
.einwilligung__regler input:disabled + .einwilligung__schalter { opacity: .6; }
.einwilligung__regler input:focus-visible + .einwilligung__schalter { outline: 2px solid var(--hh-bernstein); outline-offset: 2px; }
.einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.einwilligung__knopf { font: 700 16px/1 var(--hh-schrift); color: var(--hh-weiss); background: none; border: 1px solid var(--hh-linie-stark); padding: 16px 22px; cursor: pointer; }
.einwilligung__knopf:hover { border-color: var(--hh-bernstein); }
.fuss__knopf { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; }
@media (prefers-reduced-motion: reduce) { .einwilligung__schalter, .einwilligung__schalter::after { transition: none; } }

/* Leistungssymbole (20.10.2026): Logo-Konstruktion als Zeichen je Leistung, Scheibe sitzt auf der Kartenkante.
   Bernstein-Späne im Haus nur bei Magnet-Produkten (Vermietung, Recruiting). Dateien: /bilder/symbole/*.svg */
.raster--symbole { row-gap: 120px; padding-top: 68px; }
.hh-karte.hh-karte--symbol { padding-top: 162px; }
.hh-karte > .karte__symbol { position: absolute; left: 36px; top: -64px; width: 136px; height: 194px; }
@media (max-width: 640px) {
  .raster--symbole { row-gap: 104px; padding-top: 56px; }
  .hh-karte.hh-karte--symbol { padding-top: 136px; }
  .hh-karte > .karte__symbol { left: 24px; top: -52px; width: 112px; height: 160px; }
}

/* Symbol statt Kopfbild auf Vermietung und Recruiting (20.10.2026) */
.hero__raster--symbol { grid-template-columns: minmax(0, 1fr) 300px; gap: 72px; }
.hero__symbol { justify-self: end; }
.hero__symbol img { display: block; width: 300px; height: auto; }
/* Bild unter dem Text einer Hebel-Karte (Vermietung) */
.karte__bild { margin: auto 0 0; padding-top: 8px; display: flex; flex-direction: column; gap: 10px; }
.karte__bild img { display: block; width: 100%; height: auto; border: 1px solid var(--hh-linie); }
.karte__bild figcaption { font-size: 14px; line-height: 1.5; color: var(--hh-weiss-55); }
@media (max-width: 900px) {
  .hero__raster--symbol { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .hero__symbol { justify-self: start; }
  .hero__symbol img { width: 168px; }
}