.container { width: 100%; max-width: calc(var(--container) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }

/* Seitengerüst: Footer sitzt unten, auch bei kurzen Seiten */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; container-type: inline-size; }   /* Bezug für --inhalt-links / --inhalt-breite */

/* Header
   Logo-SVG ist auf die Zeichnung zugeschnitten (viewBox ohne Weissraum), damit der Rand
   oben und links exakt gleich ist: --rand-kopf.
   Die Unterstreichung des aktiven Menüpunkts liegt auf derselben Höhe und in derselben
   Stärke (2,5 px) wie die schwarze Linie im Logo (Logo-Linie: 42,4–44,9 px ab Logo-Oberkante). */
:root {
  --rand-kopf: 40px;
  --logo-breite: 264px;            /* Massstab 1:1 zur Figma-Grösse, ganze Pixel = scharfe Kanten */
  --logo-hoehe: 75px;
  /* Kopfhöhe: Rand oben + Logo + gleicher Rand unten; darunter beginnt das Punktraster */
  --kopf-hoehe: round(nearest, calc(var(--rand-kopf) * 2 + var(--logo-hoehe)), 1px);
  --logo-linie-unten: 45.3px;      /* Unterkante der Logo-Linie bei Massstab 1 (56.3 − 11) */
  --linie-staerke: 2.5px;
  --nav-schrift: 19px;
  --nav-zeile: 27.55px;            /* 19 px × 1,45 */
  --nav-luft: 4px;                 /* Abstand Text → Linie */
}
.site-header {
  position: relative; z-index: 20; display: flex; align-items: flex-start; justify-content: space-between;
  height: var(--kopf-hoehe); padding: var(--rand-kopf) var(--rand-kopf) 0;
  background: #fff;                /* Kopf ohne Raster */
}
.marke { display: block; flex: none; line-height: 0; }
.marke__logo { width: var(--logo-breite); height: auto; }
.hauptnav { margin-top: calc(var(--logo-linie-unten) - var(--nav-zeile) - var(--nav-luft)); }
.hauptnav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 25px; }
.hauptnav a {
  position: relative; display: block; padding-bottom: var(--nav-luft);
  color: var(--rot); text-decoration: none;
  font-weight: 600; font-size: var(--nav-schrift); line-height: var(--nav-zeile); letter-spacing: .95px; text-transform: uppercase;   /* Sperrung 5 % */
}
.hauptnav a::after {
  content: ""; position: absolute; left: 0; right: .95px; bottom: 0;   /* rechts ohne Sperrung des letzten Buchstabens */
  height: var(--linie-staerke); background: var(--linie-aktiv);
  opacity: 0; transition: opacity .15s ease;   /* nur leichtes Einblenden */
}
.hauptnav a:hover::after,
.hauptnav a:focus-visible::after,
.hauptnav .current-menu-item > a::after,
.hauptnav .current_page_item > a::after,
.hauptnav .current-menu-ancestor > a::after { opacity: 1; }
.hauptnav .current-menu-item > a::after,
.hauptnav .current_page_item > a::after,
.hauptnav .current-menu-ancestor > a::after { transition: none; }   /* aktiver Punkt steht sofort */
.nav-toggle { display: none; }
@media (prefers-reduced-motion: reduce) { .hauptnav a::after { transition: none; } }

/* Mobile – Logo im Massstab 226/286, Ränder gleich dem Inhaltsrand (24 px) */
@media (max-width: 960px) {
  :root { --rand-kopf: 24px; --logo-breite: 208px; --logo-hoehe: 59.09px; --inhalt-breite: 100%; --text-breite: 100%; }
}

/* Hamburger-Menü – ab 1100 px abwärts, damit sechs Menüpunkte neben dem Logo nie zu eng werden */
@media (max-width: 1100px) {
  .site-header { padding-right: calc(var(--rand-kopf) - 6px); }   /* rechter Strich des Icons auf dem Rand */
  .nav-toggle {
    display: block; position: relative; z-index: 2; width: 57px; height: 57px; padding: 0;
    margin-top: -13px;               /* oberer Strich des Icons auf Höhe Logo-Oberkante */
    background: none; border: 0; cursor: pointer;
  }
  .nav-toggle img { width: 57px; height: 57px; }
  .nav-toggle__zu { display: none; }
  .menue-offen .nav-toggle__auf { display: none; }
  .menue-offen .nav-toggle__zu { display: block; }

  /* Overlay beginnt unter dem weissen Kopf und scrollt selbst, wenn die Punkte nicht
     auf den Bildschirm passen (kleine Handys, Querformat). Erster Punkt wie in Figma bei 182 px. */
  .hauptnav {
    display: none; position: fixed; top: var(--kopf-hoehe); right: 0; bottom: 0; left: 0; z-index: 1;
    margin: 0; background: #fff;
    padding: max(24px, calc(182px - var(--kopf-hoehe))) 0 calc(48px + env(safe-area-inset-bottom, 0px));
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
  }
  .menue-offen .hauptnav { display: block; }
  .menue-offen .marke { position: relative; z-index: 2; }
  .hauptnav ul { flex-direction: column; align-items: center; gap: 32px; }
  .hauptnav a { font-size: 25px; line-height: 1.45; letter-spacing: 1.25px; padding-bottom: 6px; }
  .hauptnav a::after { right: 1.25px; }
  html.menue-offen, html.menue-offen body { overflow: hidden; }   /* Seite dahinter scrollt nicht mit */
}

/* Niedrige Bildschirme (kleine Handys, Querformat): Menü kompakter */
@media (max-width: 1100px) and (max-height: 640px) {
  .hauptnav { padding-top: 24px; }
  .hauptnav ul { gap: 18px; }
  .hauptnav a { font-size: 22px; }
}

/* Hero – Figma «Hero»: Text ab 360 px (bei 1440), oben 70, Abstand 25, max. 820 breit */
.hero {
  display: flex; flex-direction: column; align-items: flex-start; gap: 25px;
  --hero-oben: 237px;              /* Oberkante Titel ab Bildschirmrand, wie in Figma */
  padding: calc(var(--hero-oben) - var(--kopf-hoehe)) 30px 120px var(--inhalt-links);
  min-height: 654px;
}
.hero__titel,
.titel-gross {
  margin: 0; max-width: var(--text-breite);
  font-weight: 700; font-size: 48px; line-height: 58px; letter-spacing: .96px; color: var(--rot);   /* Figma 54 → etwas mehr Luft */
}
.hero__text {
  margin: 0; max-width: var(--text-breite);
  font-size: 24px; line-height: 37px; letter-spacing: .48px; color: var(--schwarz);   /* Figma 34 → etwas mehr Luft */
}
/* Optisch gleicher Abstand Text → Button wie Titel → Text
   (gemessen Grundlinie Text bis Button-Kante bzw. Grundlinie Titel bis Versalhöhe Text) */
.hero .button-rot { margin-top: var(--hero-button-extra, 12px); }

.button-rot {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 139px; height: 51px; padding: 0 24px; border-radius: 25px;
  border: 2px solid var(--rot);    /* Rand immer da – kein Springen beim Hover; Padding um 2 px reduziert */
  background: var(--rot); color: #fff; text-decoration: none;
  font-weight: 600; font-size: 24px; line-height: 32px; letter-spacing: .96px;
  transition: background-color .15s ease, color .15s ease;
}
.button-rot:hover, .button-rot:focus-visible { background: #fff; color: var(--rot); }
.button-rot:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .button-rot { transition: none; } }
@media (max-width: 960px) {
  .hero { --hero-oben: 160px; --hero-button-extra: 9px; padding: calc(var(--hero-oben) - var(--kopf-hoehe)) var(--rand-mobil) 72px var(--rand-mobil); min-height: 0; }   /* Figma 200, um 20 % angehoben */
  .hero__titel, .titel-gross { font-size: 36px; line-height: 43px; letter-spacing: .72px; }
  .hero__text { font-size: 22px; line-height: 31px; letter-spacing: .44px; }
}

/* Weitere Abschnitte (ohne Figma-Vorlage) */
.abschnitt { padding: 96px 0; }
.text-schmal { max-width: 720px; }

/* Inhaltsseiten – gleiche Position und Typografie wie der Hero der Startseite */
.seite {
  --hero-oben: 237px;
  padding: calc(var(--hero-oben) - var(--kopf-hoehe)) 30px 120px var(--inhalt-links);
}
.seite .titel-gross { margin: 0 0 25px; }
.inhalt { max-width: var(--text-breite); font-size: 24px; line-height: 37px; letter-spacing: .48px; color: var(--schwarz); }
.inhalt > * { margin: 0 0 25px; }
.inhalt > :last-child { margin-bottom: 0; }
.inhalt strong { font-weight: 600; }
.inhalt p:has(+ ul) { margin-bottom: 8px; }   /* Einleitung direkt über der Liste */
.inhalt ul { list-style: none; padding: 0; }
.inhalt li { position: relative; padding-left: 26px; }
.inhalt li::before {   /* roter Punkt, auf Mitte der Kleinbuchstaben ausgerichtet */
  content: ""; position: absolute; left: 2px; top: calc(.5lh - 2.5px);
  width: 8px; height: 8px; border-radius: 50%; background: var(--rot);
}
.inhalt h2 { margin-top: 49px; }   /* Stil global in typografie.css */
.inhalt > h2 { margin-bottom: 21px; }
.inhalt > h2:first-child { margin-top: 0; }
@media (max-width: 960px) {
  .seite { --hero-oben: 160px; padding: calc(var(--hero-oben) - var(--kopf-hoehe)) var(--rand-mobil) 72px var(--rand-mobil); }
  .inhalt { font-size: 22px; line-height: 31px; letter-spacing: .44px; }
  /* Silbentrennung nur auf Mobile (Sprache aus <html lang="de-CH">).
     Mind. 6 Zeichen pro Wort, 3 vor und 3 nach dem Trennstrich – vermeidet hässliche Kurztrennungen. */
  .hero__titel, .hero__text, .titel-gross, .inhalt {
    -webkit-hyphens: auto; hyphens: auto;
    hyphenate-limit-chars: 6 3 3;
  }
  .inhalt li { padding-left: 23px; }
  .inhalt li::before { width: 7px; height: 7px; top: calc(.5lh - 2px); }
}

/* Referenzen – Übersicht (Figma 13:457): zwei Spalten à 400 px, Abstand 31, Karte #F8F8F8 */
.ref-raster { list-style: none; margin: 34px 0 0; padding: 0; max-width: var(--inhalt-breite); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 31px; }
.ref-kachel { background: var(--karte, #F8F8F8); }
.ref-kachel a { display: block; height: 100%; color: var(--schwarz); text-decoration: none; }
.ref-kachel__bild { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: #fff; }   /* weiss: Bild blendet beim Hovern dorthin aus */
.ref-kachel__bild img { width: 100%; height: 100%; object-fit: cover; transition: opacity .2s ease; }
.ref-kachel__text { display: block; padding: 10px 15px 14px; font-size: 18px; line-height: 26px; letter-spacing: .36px; }
.ref-kachel__titel { display: block; font-weight: 700; }
.ref-kachel__ort { display: block; }
.ref-kachel__mehr { display: block; margin-top: 4px; line-height: 34px; font-weight: 600; color: #878686; transition: color .15s ease; }
.ref-kachel__mehr::before { content: "→ "; }
.ref-kachel a:hover .ref-kachel__mehr, .ref-kachel a:focus-visible .ref-kachel__mehr { color: var(--rot); }
.ref-kachel a:hover .ref-kachel__bild img, .ref-kachel a:focus-visible .ref-kachel__bild img { opacity: .7; }   /* leicht weiss abgeblendet, keine Bewegung */

/* Referenz – Detail: Breite wie die Übersicht, 1/3 Fakten, 2/3 Bilder (Abstand 31 wie zwischen den Karten) */
.ref-detail { --inhalt-breite-weit: var(--inhalt-breite); }
.ref-detail__ueber { margin: 0; }
.ref-detail__titel { margin: 25px 0 0; max-width: var(--inhalt-breite-weit); font-weight: 600; font-size: 30px; line-height: 36px; color: var(--schwarz); }
.ref-detail__titel span { font-weight: 600; }
.ref-detail__inhalt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 31px; align-items: start; padding-top: 28px; max-width: var(--inhalt-breite-weit); }
.ref-fakten { margin: 0; font-size: 18px; letter-spacing: .36px; }   /* Schrift wie Übersicht-Karten (18/26) */
.ref-zeile { display: flex; flex-direction: column; gap: 5px; padding: 12px 0 14px; border-top: 1px solid rgb(var(--raster-farbe) / .55); }
.ref-zeile:last-child { border-bottom: 1px solid rgb(var(--raster-farbe) / .55); }
.ref-zeile dt { font-weight: 600; line-height: 22px; color: var(--rot); }
.ref-zeile dd { margin: 0; line-height: 26px; color: var(--schwarz); }
.ref-strichliste { list-style: none; margin: 0; padding: 0; }
.ref-strichliste li { position: relative; padding-left: 18px; }
.ref-strichliste li::before { content: ""; position: absolute; left: 1px; top: calc(.5lh - 2px); width: 6px; height: 6px; border-radius: 50%; background: var(--schwarz); }   /* schwarzer Punkt */
.ref-zeile--zurueck { padding-top: 32px; align-items: flex-start; }   /* Button nur so breit wie sein Text */
.ref-zeile.ref-zeile--zurueck { border-bottom: 0; }   /* keine Abschlusslinie unter dem Button */
/* Button mit rotem Rand (Gegenstück zum roten Button): weiss, roter Rand und Text; Hover vollflächig rot */
.button-linie {
  display: inline-flex; align-items: center; gap: 10px; height: 44px; padding: 0 22px; border-radius: 22px;
  border: 2px solid var(--rot); background: #fff; color: var(--rot); text-decoration: none;
  font-weight: 600; font-size: 18px; line-height: 1; letter-spacing: .36px;
  transition: background-color .15s ease, color .15s ease;
}
.button-linie:hover, .button-linie:focus-visible { background: var(--rot); color: #fff; text-decoration: none; }
.button-linie__pfeil { flex: none; width: 20px; height: 20px; margin-left: -4px; }   /* Pfeil als SVG, Strich 2 px wie der Button-Rand; Farbe folgt dem Text */
.button-linie:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .button-linie { transition: none; } }

.ref-bildstrecke { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.ref-buehne { position: relative; display: block; width: 100%; aspect-ratio: 3 / 2; padding: 0; border: 0; background: #EDEBEA; cursor: zoom-in; overflow: hidden; }
.ref-buehne img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .3s ease; }
.ref-buehne img.hoch { object-fit: contain; }          /* Hochformate ganz zeigen, grauer Grund seitlich */
.ref-buehne img.aktiv { opacity: 1; }
.ref-buehne:focus-visible { outline: 2px solid var(--rot); outline-offset: 3px; }
.ref-miniaturen { display: flex; flex-wrap: wrap; gap: 12px; }
.ref-miniaturen button { padding: 0; border: 0; background: #EDEBEA; cursor: pointer; opacity: .45; transition: opacity .2s ease; }
.ref-miniaturen button.aktiv, .ref-miniaturen button:hover, .ref-miniaturen button:focus-visible { opacity: 1; }
.ref-miniaturen button:focus-visible { outline: 2px solid var(--rot); outline-offset: 2px; }
.ref-miniaturen img { display: block; width: 120px; height: 80px; object-fit: cover; }

@media (max-width: 960px) {
  .ref-raster { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .ref-detail { --inhalt-breite-weit: 100%; }
  .ref-detail__titel { font-size: 24px; line-height: 30px; margin-top: 16px; }
  .ref-miniaturen { gap: 8px; }
  .ref-miniaturen img { width: 84px; height: 56px; }
}
/* Detail einspaltig erst auf Mobile (wie alle anderen Raster) */
@media (max-width: 960px) {
  .ref-detail__inhalt { grid-template-columns: 1fr; gap: 28px; padding-top: 20px; }
  .ref-bildstrecke { order: -1; }   /* Bilder oben, Fakten darunter */
}
@media (prefers-reduced-motion: reduce) { .ref-buehne img, .ref-kachel__bild img { transition: none; } }

/* Kontakt – Daten und Google-Maps-Ausschnitt */
.kontakt { max-width: var(--inhalt-breite); margin-top: 49px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 24px 32px; align-items: start; }
.kontakt__daten.inhalt { max-width: none; }   /* Spalte im Kontakt-Raster, nicht begrenzen */
.kontakt__firma { font-weight: 600; color: var(--rot); }   /* Demi – wie die Zwischentitel */
.karte { position: relative; margin: 0; aspect-ratio: 3 / 2; background: #F8F8F8; }   /* 3:2 wie Referenzbilder */
.karte iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.karte__link { display: inline-block; margin-top: 12px; font-size: 20px; line-height: 28px; color: var(--rot); text-decoration: none; }
.karte__link::after { content: " →"; }
.karte__link:hover { text-decoration: underline; text-underline-offset: 4px; }
@media (max-width: 960px) {
  .kontakt { grid-template-columns: 1fr; margin-top: 32px; }
  .karte { aspect-ratio: 4 / 3; }
  .karte__link { font-size: 18px; line-height: 26px; }
}