/* ==========================================================================
   IB Funder – Basis & Komponenten
   Reihenfolge: Fonts → Reset → Layout → Typo → Komponenten → Sektionen
   ========================================================================== */

/* --- Schriften (selbst gehostet, DSGVO-konform) -------------------------- */
/* Dateien gehoeren nach assets/fonts/. Siehe assets/fonts/README.md */

@font-face {
  font-family: "Syne";
  src: url("../fonts/syne-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --- Reset --------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--c-surface);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-light);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4, p, figure, ul, ol { margin: 0; }
ul, ol { padding-left: 1.25em; }

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: 2px;
}

.screen-reader-text {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  left: var(--space-s);
  top: -100px;
  z-index: 200;
  background: var(--c-brand);
  color: var(--c-on-dark);
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-s); }

/* --- Layout -------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: calc(var(--content) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); }
.section--flush-top { padding-top: 0; }
.section--muted { background: var(--c-surface-muted); }
.section--gruen { background: var(--c-surface-gruen); }

.section--dark {
  background: var(--c-dark);
  color: var(--c-on-dark);
}
.section--dark a { color: var(--c-on-dark); }

/* --- Typografie ---------------------------------------------------------- */

.t-hero, .t-h1, .t-h2, .t-h3, .t-h4, .t-h5 {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  /*
   * Deutsche Komposita sind lang: "Bestandsimmobilien" ist bei 36 px
   * breiter als ein 320-px-Display. Ohne Trennung schiebt ein einziges
   * Wort die ganze Seite seitlich auf.
   */
  hyphens: auto;
  overflow-wrap: break-word;
}

/* Am Figma gemessen: 115 pt Zeilenabstand bei 96 px Schrift. */
.t-hero { font-size: var(--fs-hero); line-height: 1.2; }
.t-h1   { font-size: var(--fs-h1); }
.t-h2   { font-size: var(--fs-h2); }
.t-h3   { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-h4   { font-size: var(--fs-h4); line-height: var(--lh-snug); }
.t-h5   { font-size: var(--fs-h5); line-height: var(--lh-snug); }

.t-lead { font-size: var(--fs-lead); line-height: var(--lh-body); }

/* Kickerzeile über Projekttiteln: 18 px laut Figma. */
.t-kicker {
  font-family: var(--font-body);
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);
  color: var(--c-ink-muted);
  margin-bottom: var(--space-2xs);
}
.section--dark .t-kicker { color: var(--c-on-dark-muted); }

.prose > * + * { margin-top: 1em; }
.prose { max-width: 68ch; }
.prose li + li { margin-top: 0.4em; }

/* --------------------------------------------------------------------------
   Abschnittsmarke: Wort mit Rechteck dahinter, das vom Text ausgespart wird.

   Die Maße stammen aus dem Figma-Export und sind an der VERSALHÖHE
   ausgerichtet, nicht an der Schriftgröße. Gemessen an zwei Marken
   ("Kompetenzen" und "Projekte"), die identische Verhältnisse zeigen –
   das Rechteck hat also eine feste Größe und wächst nicht mit dem Wort:

     Breite           5,07 × Versalhöhe
     Höhe             2,67 × Versalhöhe
     über Versalhöhe  0,84 ×
     unter Grundlinie 0,82 ×
     Text eingerückt  0,71 ×

   --cap ist die Versalhöhe von Syne SemiBold (676/1000 em). Bei einem
   Schriftwechsel nur diesen einen Wert anpassen, der Rest folgt.
   -------------------------------------------------------------------------- */
.tag-heading {
  --cap: 0.676em;
  --tag-knockout: var(--c-surface);

  position: relative;
  display: inline-block;
  isolation: isolate;
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h2);
  line-height: 1;
  padding-left: calc(var(--cap) * 0.71);
  /* Senkrechter Platz, damit das Rechteck nicht in Nachbarelemente ragt */
  padding-block: calc((var(--cap) * 2.67 - 1em) / 2);
  margin-bottom: var(--space-l);
}

.tag-heading::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: calc(var(--cap) * 5.07);
  height: calc(var(--cap) * 2.67);
  border: 1px solid var(--c-brand);
  z-index: 0;
}

/*
 * Der Text liegt über dem Rechteck und trägt die Hintergrundfarbe der
 * Sektion. Dadurch bricht die Rahmenlinie dort ab, wo das Wort sie kreuzt –
 * genau wie im Figma. Die Hintergrundfläche eines Inline-Elements
 * entspricht der Content-Area der Schrift und deckt damit von selbst den
 * richtigen Bereich ab.
 */
.tag-heading__text {
  position: relative;
  z-index: 1;
  background: var(--tag-knockout);
  padding-inline: 0.03em;
}

.section--dark .tag-heading  { --tag-knockout: var(--c-dark); }
.section--muted .tag-heading { --tag-knockout: var(--c-surface-muted); }
.section--gruen .tag-heading { --tag-knockout: var(--c-surface-gruen); }
.section--dark .tag-heading::before {
  border-color: rgba(255, 255, 255, 0.6);
}

/* --- Buttons ------------------------------------------------------------- */

/*
 * Am Figma gemessen: Schrift 16 px, Pille 46 px hoch. Mit 16 px Text und
 * 0,94 em oben wie unten kommt genau das heraus.
 */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.94em 1.6em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}
.btn__icon { flex: none; width: 1em; height: 1em; }

.btn--primary { background: var(--c-brand); color: var(--c-on-dark); }
.btn--primary:hover { background: var(--c-brand-hover); }

.btn--outline {
  background: transparent;
  color: var(--c-brand);
  border-color: var(--c-brand);
}
.btn--outline:hover { background: var(--c-brand); color: var(--c-on-dark); }

.section--dark .btn--outline { color: var(--c-on-dark); border-color: var(--c-line-invert); }
.section--dark .btn--outline:hover { background: var(--c-on-dark); color: var(--c-dark); }

/* Textlink mit vorangestelltem Pfeil */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  text-decoration: none;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 0.35em;
}
.link-arrow:hover { border-bottom-color: currentColor; }
.link-arrow__icon { flex: none; width: 1em; height: 1em; }

/* --- Karten -------------------------------------------------------------- */

.card {
  background: var(--c-surface);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  padding: var(--space-m);
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}
/*
 * Icons kommen in zwei Formaten: quadratisch (250x250) und doppelt breit
 * (500x250). Deshalb feste Höhe und freie Breite – sonst würden die
 * breiten Motive gestaucht. Höhe am Figma gemessen: rund 66 px.
 *
 * align-self ist nötig, weil die Karte ein Flex-Container ist: Ohne den
 * Wert zieht sich der Rahmen des Icons auf die volle Kartenbreite, und
 * die Zeichnung sitzt dann mittig statt links.
 */
.card__icon {
  height: 66px;
  width: auto;
  max-width: 100%;
  align-self: flex-start;
}
/* Am Figma gemessen: 32 px, nicht 18. */
.card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h4);
  line-height: 1.18;
}
/*
 * 16 px statt der im Figma gemessenen 13,5. Das ist eine bewusste
 * Abweichung: Unter 14 px wird Fließtext für viele unangenehm zu lesen,
 * und in diesen Karten steht echter Inhalt, keine Randnotiz.
 */
.card__text { font-size: var(--fs-base); }
.card__foot { margin-top: auto; padding-top: var(--space-xs); }

/* --- Raster -------------------------------------------------------------- */

.grid { display: grid; gap: var(--space-m); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

@media (max-width: 1023px) {
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
}

/*
 * Zweispaltiger Seitenkopf: Titel links, Einleitung rechts.
 * Am Figma gemessen – auf Kontakt- und Leistungsseiten identisch:
 * linke Spalte 651, Abstand 64, rechte Spalte 437 = die 1152 Inhaltsbreite.
 * Die rechte Spalte ist also deutlich schmaler als die linke.
 */
.page-head {
  display: grid;
  grid-template-columns: minmax(0, 651fr) minmax(0, 437fr);
  gap: 64px;
  align-items: start;
}
@media (max-width: 1023px) {
  .page-head { grid-template-columns: 1fr; gap: var(--space-m); }
}

/*
 * Breites Kopfbild. Im Figma 1152 x 350 – ein flaches Banner.
 */
.banner img,
.banner .ph {
  width: 100%;
  aspect-ratio: var(--banner-ratio, 1152 / 350);
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/*
 * Auf dem Handy wäre dasselbe Verhältnis nur noch ein 130 px hoher
 * Streifen. Dort wird das Bild deutlich höher, der Zuschnitt übernimmt
 * die Mitte.
 */
@media (max-width: 639px) {
  .banner img,
  .banner .ph { aspect-ratio: 3 / 2; }
}

/* --- Projektkarte -------------------------------------------------------- */

/*
 * Die ganze Karte ist anklickbar. Umgesetzt über einen unsichtbaren
 * Bereich, den der Titellink über die Karte legt – nicht über ein
 * <a> um alles herum. So bleibt die Gliederung sauber, es gibt nur
 * einen Tabstopp, und Screenreader lesen den Projektnamen als Linktext
 * statt "Bild, Kicker, Titel, Text, Mehr erfahren".
 */
.projekt-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.projekt-card__link { text-decoration: none; }
.projekt-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: var(--radius-sm);
}
.projekt-card:hover .projekt-card__link { text-decoration: underline; }

/*
 * Tastaturfokus muss sichtbar sein – der Link selbst hat keine eigene
 * Fläche. Beim Klick mit der Maus soll der Rahmen aber nicht erscheinen.
 *
 * :focus-within greift auch nach einem Mausklick. Deshalb wird es in
 * Browsern mit :has() durch :has(:focus-visible) ersetzt – das reagiert
 * nur auf Tastatur. Die Variante ohne :has() behält den Rahmen; lieber
 * einer zu viel als ein unsichtbarer Fokus.
 */
.projekt-card:focus-within {
  outline: 2px solid var(--c-brand);
  outline-offset: 6px;
  border-radius: var(--radius-sm);
}
@supports selector(:has(*)) {
  .projekt-card:focus-within { outline: none; }
  .projekt-card:has(:focus-visible) {
    outline: 2px solid var(--c-brand);
    outline-offset: 6px;
    border-radius: var(--radius-sm);
  }
}
.projekt-card__link:focus-visible { outline: none; }

/* Der Pfeil unten ist nur noch Beschriftung, reagiert aber sichtbar mit */
.projekt-card:hover .link-arrow { border-bottom-color: currentColor; }
.projekt-card__media {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-surface-muted);
  border-radius: var(--radius-sm);
}
.projekt-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 500ms var(--ease);
}
.projekt-card:hover .projekt-card__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .projekt-card:hover .projekt-card__media img { transform: none; }
}
/*
 * 24 px statt der im Figma gemessenen 32: Dort standen kurze Platzhalter
 * wie "Hier steht eine Headline". Die echten Projektnamen sind deutlich
 * länger und liefen bei 32 px über vier Zeilen.
 */
.projekt-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h5);
  line-height: 1.25;
}
.projekt-card__text { font-size: var(--fs-base); }
.projekt-card__foot { margin-top: var(--space-2xs); }


/* --------------------------------------------------------------------------
   Aufklappbarer Textblock ("Mehr lesen").

   Der vollständige Text steht immer im HTML – er wird nur optisch gekürzt.
   Das ist wichtig für Suchmaschinen und für Screenreader-Nutzer, die den
   Block überspringen können, ohne dass Inhalt fehlt.

   Ohne JavaScript wird nichts gekürzt (siehe <noscript> in header.php),
   sonst wäre der Text unerreichbar.
   -------------------------------------------------------------------------- */
.mehr__inhalt {
  position: relative;
  overflow: hidden;
  max-height: var(--mehr-hoehe, 17em);
}
.mehr.is-offen .mehr__inhalt { max-height: none; }

/* Weicher Auslauf am unteren Rand, damit der Schnitt nicht hart wirkt */
.mehr__schleier {
  position: absolute;
  inset: auto 0 0 0;
  height: 5em;
  background: linear-gradient(to bottom, transparent, var(--c-surface) 85%);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.mehr.is-offen .mehr__schleier { opacity: 0; }

.mehr__schalter {
  margin-top: var(--space-m);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--c-line);
  padding: 0 0 0.35em;
  cursor: pointer;
}
.mehr__schalter .link-arrow__icon { transition: transform var(--dur) var(--ease); }
.mehr__schalter[aria-expanded="true"] .link-arrow__icon { transform: rotate(-90deg); }

/* Auf hellgrauen Flächen muss der Auslauf die Flächenfarbe treffen */
.section--muted .mehr__schleier {
  background: linear-gradient(to bottom, transparent, var(--c-surface-muted) 85%);
}
.section--gruen .mehr__schleier {
  background: linear-gradient(to bottom, transparent, var(--c-surface-gruen) 85%);
}


/* --------------------------------------------------------------------------
   Bildslider auf den Projektdetailseiten.

   Die Spur ist ein waagerecht scrollbarer Flex-Container mit Scroll-Snap.
   Wischen und Trackpad-Scrollen funktionieren damit ohne eine Zeile
   JavaScript; das Skript bedient nur Knöpfe und Punkte. Fällt es aus,
   bleibt die Spur scrollbar – kein Inhalt geht verloren.
   -------------------------------------------------------------------------- */
.slider {
  position: relative;
  --slider-ratio: 16 / 9;
}

.slider__spur {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  border-radius: var(--radius-sm);
  /* Bildlaufleiste ausblenden, gescrollt wird trotzdem */
  scrollbar-width: none;
}
.slider__spur::-webkit-scrollbar { display: none; }
@media (prefers-reduced-motion: reduce) {
  .slider__spur { scroll-behavior: auto; }
}

.slider__folie {
  flex: 0 0 100%;
  margin: 0;
  scroll-snap-align: center;
  position: relative;
}
.slider__folie img,
.slider__rahmen img {
  width: 100%;
  aspect-ratio: var(--slider-ratio, 16 / 9);
  object-fit: cover;
  border-radius: var(--radius-sm);
  display: block;
}

.slider__unterschrift {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-m);
  font-size: var(--fs-small);
  color: var(--c-on-dark);
  background: linear-gradient(to top, rgba(0, 48, 46, 0.72), transparent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* Blättern */
.slider__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--c-surface);
  color: var(--c-brand);
  box-shadow: 0 4px 16px rgba(0, 48, 46, 0.22);
  cursor: pointer;
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.slider__nav svg { width: 22px; height: 22px; }
.slider__nav:hover { transform: translateY(-50%) scale(1.08); }
.slider__nav--zurueck { left: var(--space-s); }
.slider__nav--vor     { right: var(--space-s); }
/* Am Anfang und Ende verschwindet die jeweilige Schaltfläche */
.slider__nav[hidden] { display: none; }

.slider__punkte {
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
  margin-top: var(--space-s);
}
.slider__punkt {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--c-line);
  cursor: pointer;
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.slider__punkt.is-aktiv { background: var(--c-brand); transform: scale(1.3); }

@media (max-width: 639px) {
  .slider__nav { width: 38px; height: 38px; }
  .slider__nav svg { width: 18px; height: 18px; }
  .slider__unterschrift { padding: var(--space-s); font-size: var(--fs-micro); }
}

/* --- Accordion ----------------------------------------------------------- */

.accordion { border-top: 1px solid var(--c-line); }
.accordion__item { border-bottom: 1px solid var(--c-line); }

.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  padding: var(--space-s) 0;
  background: none;
  border: 0;
  text-align: left;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  cursor: pointer;
}
.accordion__icon {
  flex: none;
  width: 22px; height: 22px;
  color: var(--c-brand);
  transition: transform var(--dur) var(--ease);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(180deg); }

.accordion__panel { display: none; padding-bottom: var(--space-m); font-size: var(--fs-base); }
.accordion__panel.is-open { display: block; }


/* --------------------------------------------------------------------------
   Interaktive Hausgrafik.

   Die Punkte liegen als echte <button> über dem SVG, nicht im SVG selbst.
   Damit funktionieren Tastatur, Touch und Screenreader ohne Sonderlocken,
   und die Zeichnung bleibt eine reine Grafik.
   -------------------------------------------------------------------------- */
.hauskarte__bild {
  position: relative;
  max-width: 100%;
  margin-inline: auto;
  /* Platz für die Beschriftung unter dem untersten Punkt */
  padding-bottom: 2rem;
  /*
   * Die Zeichnung ist bewusst hell: Sie ist Hintergrund für die
   * Beschriftungen, nicht Hauptdarsteller. In vollem Markengrün wäre die
   * dunkle Schrift darüber nicht zu lesen.
   */
  color: var(--c-schema);
}
.hauskarte__bild svg { width: 100%; height: auto; display: block; }

/*
 * Hervorhebung: Alle Zonen werden zurückgenommen, die gewählte leuchtet in
 * Markengrün auf. Das Zurücknehmen ist wichtig – ohne es wäre der Kontrast
 * zwischen aktiv und inaktiv zu schwach, um den Blick zu führen.
 */
.hauskarte__bild [data-zone],
.hauskarte__bild .hk-basis {
  transition: color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.hauskarte__bild.is-fokus [data-zone] { opacity: 0.28; }
.hauskarte__bild.is-fokus .hk-basis   { opacity: 0.45; }
.hauskarte__bild [data-zone].is-hervor {
  opacity: 1;
  color: var(--c-brand);
}

/* Der Punkt selbst */
.hauskarte__punkt {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.hauskarte__marke {
  position: absolute;
  inset: 0;
  border: 2px solid var(--c-surface);
  border-radius: 50%;
  background: var(--c-brand);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.hauskarte__marke::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--c-surface);
}
.hauskarte__punkt:hover .hauskarte__marke,
.hauskarte__punkt:focus-visible .hauskarte__marke,
.hauskarte__punkt.is-aktiv .hauskarte__marke {
  transform: scale(1.22);
  box-shadow: 0 0 0 6px rgba(0, 48, 46, 0.16);
}

/* Beschriftung mittig unter dem Punkt */
.hauskarte__label {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: var(--fw-regular);
  line-height: 1;
  color: var(--c-ink);
  background: var(--c-surface-muted);
  padding: 0.3em 0.5em;
  border-radius: var(--radius-sm);
  pointer-events: none;
  transition: color var(--dur) var(--ease);
}
/*
 * Beim Hovern bleibt die Beschriftung in der normalen Textfarbe – nur das
 * Gewicht wechselt. Der aktive Bereich leuchtet ohnehin schon grün, und
 * der Punkt ist grün: Wenn die Schrift mitzieht, wird es zu viel.
 */
.hauskarte__punkt:hover .hauskarte__label,
.hauskarte__punkt:focus-visible .hauskarte__label,
.hauskarte__punkt.is-aktiv .hauskarte__label {
  font-weight: var(--fw-medium);
}

@media (prefers-reduced-motion: no-preference) {
  .hauskarte__marke { animation: hk-puls 2.8s var(--ease) infinite; }
  .hauskarte__punkt:hover .hauskarte__marke,
  .hauskarte__punkt:focus-visible .hauskarte__marke,
  .hauskarte__punkt.is-aktiv .hauskarte__marke { animation: none; }
}
@keyframes hk-puls {
  0%, 70%, 100% { box-shadow: 0 0 0 0 rgba(0, 48, 46, 0.30); }
  35%           { box-shadow: 0 0 0 9px rgba(0, 48, 46, 0); }
}

/*
 * Die Tafel schwebt über der Grafik neben dem aktiven Punkt. Sie ist aus
 * dem Textfluss genommen, damit unter der Zeichnung kein Platz reserviert
 * werden muss – vorher standen dort dauerhaft rund 150 px leer.
 */
.hauskarte__tafel {
  position: absolute;
  z-index: 3;
  width: 17rem;
  max-width: 88%;
  padding: 0.85rem 1rem;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 28px rgba(0, 48, 46, 0.14);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.hauskarte.is-offen .hauskarte__tafel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hauskarte__titel {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  margin-bottom: var(--space-2xs);
  color: var(--c-ink);
}
.hauskarte__text { font-size: var(--fs-small); margin: 0; color: var(--c-ink); line-height: 1.5; }

.hauskarte__hinweis {
  margin-top: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--c-ink-muted);
  text-align: center;
}

/*
 * Auf schmalen Bildschirmen ist eine schwebende Karte zu eng. Dort rutscht
 * die Tafel wieder unter die Grafik – mit fester Höhe, damit nichts springt.
 */
@media (max-width: 639px) {
  .hauskarte__punkt { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
  .hauskarte__marke::after { inset: 9px; }
  .hauskarte__label { font-size: var(--fs-micro); }
  .hauskarte__tafel {
    position: static;
    width: auto;
    max-width: none;
    margin-top: var(--space-s);
    min-height: 8.5rem;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .hauskarte__hinweis { margin-top: var(--space-2xs); }
}

/* --- Header -------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--c-surface);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck { border-bottom-color: var(--c-line); }

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding-block: var(--space-s);
}
.site-logo { display: inline-flex; align-items: center; }
/* 46 px Hoehe, am Figma-Frame gemessen. Breite folgt dem Seitenverhaeltnis. */
.site-logo img { height: 46px; width: auto; }
@media (max-width: 639px) { .site-logo img { height: 38px; } }

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-m);
  list-style: none;
  margin: 0; padding: 0;
}
/* 16 px laut Figma – 13 px waren zu klein zum bequemen Treffen. */
.site-nav__list a { font-size: var(--fs-base); text-decoration: none; }
.site-nav__list a:hover { text-decoration: underline; }
.site-nav .current-menu-item > a { font-weight: var(--fw-medium); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: var(--space-2xs);
  cursor: pointer;
}
.nav-toggle svg { width: 26px; height: 26px; }

/* Umschalter Hamburger / Schließen */
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* "Kontakt" ist mobil ein Menüeintrag, auf dem Desktop der Button rechts */
.site-nav__cta { display: none; }

/* --------------------------------------------------------------------------
   Mobiles Menü. Am Figma-Frame gemessen (Panelbreite 390 px):

     Panel          füllt den Bildschirm, weiß
     Einträge       zentriert, 24 px
     Zeilenabstand  85 px von Grundlinie zu Grundlinie
     erster Eintrag 139 px unter der Oberkante

   Das Panel setzt UNTER der Kopfzeile an, damit Logo und Schließen-Symbol
   sichtbar bleiben. Die Höhe der Kopfzeile misst das Skript und schreibt sie
   nach --header-h – so stimmt der Anschluss auch, wenn das Logo mal größer
   wird oder die Schrift skaliert.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; }
  .site-header__cta { display: none; }
  .site-nav__cta { display: block; }

  .site-nav {
    display: none;
    position: fixed;
    top: var(--header-h, 78px);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 95;
    background: var(--c-surface);
    /* 139 px Oberkante minus Kopfzeile ergibt im Figma rund 58 px */
    padding: 58px var(--gutter) var(--space-2xl);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .site-nav.is-open { display: block; }

  .site-nav__list {
    flex-direction: column;
    align-items: center;
    gap: 56px;                  /* 56 + 24 × 1,2 ergibt die gemessenen 85 px */
  }
  .site-nav__list a {
    font-size: 1.5rem;          /* 24 px */
    line-height: 1.2;
    text-decoration: none;
  }
  .site-nav__list a:hover { text-decoration: underline; }
}

/* Solange das Menü offen ist, scrollt nur das Menü */
body.nav-offen { overflow: hidden; }


/* --------------------------------------------------------------------------
   Störerband – dunkler Abschnitt mit Hinweis und Button.

   Am Figma-Frame (1280 px) gemessen:
     Kickerzeile      ca. 18 px
     Aussage          41,5 px  -> --fs-h3 (40 px)
     Zeilenabstand    1,16
     Textbreite       779 von 1152 px Inhaltsbreite = rund 19 em

   Die Breite steht bewusst in em, nicht in Prozent: So schrumpft der
   Textblock auf kleinen Bildschirmen zusammen mit der Schriftgröße und
   behält seine Zeilenlänge.
   -------------------------------------------------------------------------- */
.band__kicker {
  font-size: var(--fs-lead);
  font-weight: var(--fw-light);
  color: var(--c-on-dark-muted);
}

.band__text {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.16;
  letter-spacing: -0.01em;
  max-width: 19em;
}

/* Die Anrede im Fußband ist eine Stufe größer als im Störer */
.site-footer .cta-band__inner > .t-lead {
  font-size: var(--fs-h5);
  line-height: var(--lh-snug);
  max-width: 34ch;
}

/* --- CTA-Band & Footer --------------------------------------------------- */

.cta-band__inner { display: flex; flex-direction: column; gap: var(--space-m); align-items: flex-start; }
/*
 * Die Adresse ist ein Wort ohne Trennstellen. word-break würde mitten im
 * Namen umbrechen ("info@ib-fun / der.de"), deshalb lieber eine Stufe
 * kleiner auf schmalen Displays.
 */
.cta-band__mail {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-tight);
  text-decoration: none;
  overflow-wrap: anywhere;
}
@media (max-width: 639px) {
  .cta-band__mail { font-size: var(--fs-h3); }
}
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-s); }

.site-footer__meta {
  margin-top: var(--space-xl);
  padding-top: var(--space-m);
  border-top: 1px solid var(--c-line-invert);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-m);
  justify-content: space-between;
  font-size: var(--fs-small);
  color: var(--c-on-dark-muted);
}
.site-footer__legal { display: flex; gap: var(--space-m); }
.site-footer__mark { display: inline-flex; }
/* 40 px Höhe, an der Fußzeile im Figma gemessen */
.site-footer__mark img { height: 40px; width: auto; }
@media (max-width: 639px) { .site-footer__mark img { height: 34px; } }

/* --- Hero (Startseite) --------------------------------------------------- */

/*
 * Kundenwunsch aus der Kommentar-Präsentation: Headline höher setzen und
 * in Markengrün. Der obere Abstand ist von 4,5 auf 2,5 rem reduziert.
 */
/*
 * Abstände am Figma gemessen: Kopfzeile bis Headline 166 pt, Headline bis
 * Bildreihe 153 pt, Bildreihe bis nächster Abschnitt 128 pt. Oben ist
 * bewusst enger als im Original – Kundenwunsch, die Headline höher zu
 * setzen. Die beiden anderen Abstände bleiben wie gezeichnet.
 */
.hero { padding-block: clamp(2rem, 6vw, 6rem) clamp(3rem, 8vw, 8rem); }
.hero__title {
  max-width: 16ch;
  color: var(--c-brand);
}
/*
 * Hero-Raster. Am Figma-Frame gemessen: Bild 434 px, Abstand 30 px,
 * Textkarte 688 px – zusammen die 1152 px Inhaltsbreite. Als fr-Werte
 * notiert, damit das Verhaeltnis bei jeder Breite erhalten bleibt.
 */
.hero__media {
  --hero-ratio: 434 / 340;
  margin-top: clamp(2.5rem, 9.5vw, 9.5rem);
  display: grid;
  grid-template-columns: minmax(0, 434fr) minmax(0, 688fr);
  gap: 30px;
}
@media (max-width: 1023px) { .hero__media { grid-template-columns: 1fr; } }

/*
 * 56 px Innenabstand fressen auf einem 390er Display zwei Drittel der
 * Breite auf – dort bleiben 238 px für den Text. Deshalb auf dem Handy
 * deutlich weniger.
 */
@media (max-width: 639px) {
  .claim-card { padding: var(--space-m); }
}

/*
 * Das Figma misst 434 x 387. Seit die Kickerzeile entfallen ist und der
 * Claim kürzer geworden ist, bleibt in der Textkarte zu viel Luft stehen –
 * deshalb hier etwas flacher. Als Variable, damit es sich nachjustieren
 * lässt, ohne die Regel zu suchen.
 */
.hero__figure img {
  width: 100%;
  aspect-ratio: var(--hero-ratio);
  object-fit: cover;
  border-radius: var(--radius-sm);
}

/*
 * Textkarte im Hero. Aufbau laut Figma: Das Bild liegt vollflächig in der
 * Karte, wird stark weichgezeichnet und der Text steht dunkel darauf.
 * Kein Farbverlauf – die Unschärfe allein erzeugt die ruhige Fläche.
 */
.claim-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--space-s);
  min-height: 100%;
  padding: 3.5rem;
  border-radius: var(--radius-sm);
  overflow: hidden;
  isolation: isolate;
  background: var(--c-surface-muted);
}

.claim-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  filter: blur(28px);
  /*
   * Etwas größer skalieren: Sonst zieht die Weichzeichnung die Ränder
   * nach innen und es entsteht ein heller Saum an den Kanten.
   */
  transform: scale(1.18);
}

/*
 * Leichter weißer Schleier. Im Figma-Bild nicht nötig, aber die Kundin
 * tauscht das Motiv später aus – bei einem dunklen Foto wäre der Text
 * sonst nicht mehr lesbar.
 */
.claim-card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.28);
}

.claim-card__kicker {
  font-size: var(--fs-lead);
  color: var(--c-ink-muted);
}
.claim-card__text {
  font-family: var(--font-display);
  font-weight: var(--fw-display);
  font-size: var(--fs-h3);
  line-height: 1.16;
  letter-spacing: -0.01em;
  color: var(--c-ink);
}