/* sbm.swiss · Sigrist Baumanagement GmbH · NetriX GmbH 2026
   Schrift: Archivo (SIL Open Font License), selbst gehostet, Breite 62–125 %, Gewicht 100–900.
   Erkennungszeichen ist die Bautafel: sandfarbene Tafel mit den Angaben zum Projekt,
   wie sie auf Schweizer Baustellen steht. Alles andere bleibt ruhig. */

@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-latin-wdth-normal.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Archivo";
  src: url("/assets/fonts/archivo-latin-wdth-italic.woff2") format("woff2-variations"),
       url("/assets/fonts/archivo-latin-wdth-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --papier: #FBFAF7;
  --beton: #EDEAE4;
  --lehm: #D9B97E;
  --lehm-hell: #EBD9B4;
  --nuss: #402401;
  --erde: #4C4136;
  --stein: #6B6258;
  --linie: #DCD5C9;
  --fehler: #9B2C1A;

  --rand: clamp(20px, 5vw, 64px);
  --breite: 1320px;
  --text: 40rem;

  --schrift: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --schmal: 72%;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--papier);
  color: var(--erde);
  font-family: var(--schrift);
  font-size: 1.125rem;
  line-height: 1.6;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { display: block; max-width: 100%; height: auto; }
picture { display: block; }
p, ul, ol, dl, figure, h1, h2, h3, h4 { margin: 0; }
ul[role="list"] { list-style: none; padding: 0; }

a { color: var(--nuss); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--nuss); outline-offset: 3px; }

h1, h2, h3, .titel {
  font-family: var(--schrift);
  font-stretch: var(--schmal);
  color: var(--nuss);
  font-weight: 640;
  letter-spacing: -.012em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.75rem, 6.4vw, 6rem); line-height: .96; }
h2 { font-size: clamp(2rem, 3.6vw, 3.25rem); line-height: 1.02; }
h3 { font-size: clamp(1.375rem, 1.8vw, 1.625rem); line-height: 1.15; font-weight: 620; }
.lead { font-size: clamp(1.25rem, 1.7vw, 1.5rem); line-height: 1.45; color: var(--nuss); font-weight: 420; max-width: 34em; }
.text > * + * { margin-top: 1em; }
.text { max-width: var(--text); }
.klein { font-size: .9375rem; color: var(--stein); }

.wrap { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.springen { position: absolute; left: var(--rand); top: -100px; background: var(--nuss); color: var(--papier); padding: 10px 16px; z-index: 20; }
.springen:focus { top: 10px; }

/* Kopf */
.kopf { position: relative; z-index: 5; }
.kopf .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; padding-block: 22px; }
.marke { display: block; width: clamp(150px, 16vw, 196px); }
.marke img { width: 100%; }
.nav ul { display: flex; flex-wrap: wrap; gap: 6px clamp(18px, 2.4vw, 36px); list-style: none; padding: 0; }
.nav a {
  display: inline-block;
  padding-block: 6px;
  color: var(--nuss);
  text-decoration: none;
  font-weight: 520;
  font-size: 1.0625rem;
  border-bottom: 3px solid transparent;
}
.nav a:hover { border-bottom-color: var(--lehm-hell); }
.nav a[aria-current="page"] { border-bottom-color: var(--lehm); }

/* Knöpfe */
.knopf {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 52px;
  padding: 12px 26px;
  background: var(--nuss);
  color: var(--papier);
  font: inherit;
  font-weight: 560;
  font-size: 1.0625rem;
  text-decoration: none;
  border: 2px solid var(--nuss);
  border-radius: 0;
  cursor: pointer;
}
.knopf:hover { background: #2C1900; border-color: #2C1900; }
.knopf.hell { background: transparent; color: var(--nuss); }
.knopf.hell:hover { background: var(--nuss); color: var(--papier); }
.aktionen { display: flex; flex-wrap: wrap; gap: 14px 18px; align-items: center; }

/* Abschnitte */
.abschnitt { padding-block: clamp(72px, 10vw, 148px); }
.abschnitt.beton { background: var(--beton); }
.abschnitt-kopf { display: grid; gap: 18px; margin-bottom: clamp(36px, 5vw, 64px); max-width: 52rem; }

/* Startseite: Titel, darunter das Bild über die ganze Breite */
.start-text { display: grid; gap: 28px; padding-block: clamp(36px, 6vw, 88px) clamp(40px, 5vw, 72px); }
@media (min-width: 900px) {
  .start-text { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 56px; }
  .start-text .lead { font-size: 1.1875rem; }
}
.start-text .lead { margin-bottom: 26px; }

.bildband { position: relative; }
.bildband > picture img { width: 100%; height: clamp(320px, 62vw, 820px); object-fit: cover; }
.bildband .bautafel { position: relative; margin: -72px var(--rand) 0 auto; }
@media (min-width: 900px) {
  .bildband .wrap { position: absolute; left: 0; right: 0; bottom: 0; }
  .bildband .bautafel { margin: 0 0 -64px 0; }
}

/* Die Bautafel */
.bautafel {
  --schraube: radial-gradient(circle at center, rgba(64, 36, 1, .45) 0 2.2px, transparent 2.6px);
  position: relative;
  width: min(100%, 26rem);
  padding: 26px 28px 24px;
  background-color: var(--lehm);
  background-image: var(--schraube), var(--schraube), var(--schraube), var(--schraube);
  background-size: 14px 14px;
  background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
  background-repeat: no-repeat;
  color: var(--nuss);
  box-shadow: 0 1px 0 rgba(64, 36, 1, .25), 0 24px 40px -28px rgba(40, 22, 0, .55);
}
.bautafel .titel { display: block; font-size: 1.625rem; line-height: 1.08; font-weight: 680; margin-bottom: 16px; }
.bautafel dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 18px; font-size: .9375rem; line-height: 1.4; }
.bautafel dt, .bautafel dd { padding-block: 8px; border-top: 1px solid rgba(64, 36, 1, .28); }
.bautafel dt { font-weight: 560; }
.bautafel dd { margin: 0; }
.bautafel .mehr { display: inline-block; margin-top: 16px; font-weight: 560; }
.bautafel.gross { width: 100%; max-width: none; padding: clamp(26px, 3vw, 40px); }
.bautafel.gross .titel { font-size: clamp(1.75rem, 2.6vw, 2.375rem); }
@media (min-width: 640px) {
  .bautafel.gross dl { font-size: 1.0625rem; column-gap: 28px; }
}

/* Leistungen als Ablauf, gezeichnet wie eine Bemassung im Plan */
.ablauf { list-style: none; padding: 0; display: grid; gap: 0; counter-reset: schritt; }
.ablauf > li { position: relative; padding: 0 0 36px 44px; counter-increment: schritt; }
.ablauf > li::before {
  content: counter(schritt);
  position: absolute; left: 0; top: -2px;
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border: 1.5px solid var(--nuss);
  border-radius: 50%;
  font-size: .875rem; font-weight: 600; color: var(--nuss);
  background: var(--papier);
}
.ablauf > li::after { content: ""; position: absolute; left: 14px; top: 28px; bottom: 0; border-left: 1.5px solid var(--nuss); }
.ablauf > li:last-child::after { display: none; }
.ablauf h3 { margin-bottom: 8px; }
.ablauf p { max-width: 30rem; }
.beton .ablauf > li::before { background: var(--beton); }
@media (min-width: 900px) {
  .ablauf { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; }
  .ablauf > li { padding: 52px 0 0 0; }
  .ablauf > li::before { top: 0; left: 0; }
  .ablauf > li::after { left: 36px; right: -40px; top: 14px; bottom: auto; border-left: 0; border-top: 1.5px solid var(--nuss); }
  .ablauf > li:last-child::after { display: block; right: 0; }
  .ablauf > li:last-child { background: linear-gradient(var(--nuss), var(--nuss)) right 7px / 1.5px 15px no-repeat; }
}

.begleitend { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: 28px; padding-top: 32px; border-top: 1px solid var(--linie); }
.begleitend > h3 { font-size: 1.125rem; color: var(--stein); font-stretch: 100%; font-weight: 520; letter-spacing: 0; }
.begleitend ul { list-style: none; padding: 0; display: grid; gap: 28px; }
.begleitend li h4 { font-stretch: var(--schmal); font-size: 1.375rem; font-weight: 620; color: var(--nuss); line-height: 1.15; margin-bottom: 6px; }
@media (min-width: 900px) {
  .begleitend { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); }
  .begleitend ul { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
}

/* Projekte: grosses Bild, Bautafel daneben oder darüber */
.projekt { display: grid; gap: 0; }
.projekt + .projekt { margin-top: clamp(80px, 10vw, 140px); }
.projekt-bild picture img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.projekt .bautafel { margin: -48px 0 0 var(--einzug, 16px); width: min(calc(100% - 16px), 27rem); }
@media (min-width: 900px) {
  .projekt { grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; }
  .projekt-bild { grid-column: 1 / span 9; grid-row: 1; }
  .projekt .bautafel { grid-column: 8 / span 5; grid-row: 1; margin: 0 0 -56px 0; width: 100%; justify-self: end; }
  .projekt.gespiegelt .projekt-bild { grid-column: 4 / span 9; }
  .projekt.gespiegelt .bautafel { grid-column: 1 / span 5; justify-self: start; }
}

/* Person */
.person { display: grid; gap: 32px; align-items: start; }
.person-bild img { width: 100%; max-width: 320px; aspect-ratio: 1; object-fit: cover; filter: saturate(.92); }
.person h2, .person h3 { margin-bottom: 4px; }
.person .rolle { color: var(--stein); margin-bottom: 22px; }
.kontaktliste { list-style: none; padding: 0; display: grid; gap: 6px; font-size: 1.125rem; }
.kontaktliste a { text-decoration: none; border-bottom: 1px solid var(--lehm); }
.kontaktliste a:hover { border-bottom-width: 2px; }
.kontaktliste .gross { font-size: clamp(1.375rem, 2vw, 1.75rem); font-stretch: var(--schmal); font-weight: 600; }
@media (min-width: 760px) {
  .person { grid-template-columns: minmax(200px, 320px) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); }
}

/* Seitenkopf der Unterseiten */
.seitenkopf { padding-block: clamp(36px, 6vw, 88px) clamp(40px, 6vw, 80px); display: grid; gap: 24px; }
@media (min-width: 900px) {
  .seitenkopf.mit-lead { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: end; gap: 56px; }
}

.zweispaltig { display: grid; gap: clamp(40px, 6vw, 96px); }
@media (min-width: 900px) {
  .zweispaltig { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
  .zweispaltig.umgekehrt { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .klebt { position: sticky; top: 32px; }
}

/* Galerie */
.galerie { display: grid; gap: clamp(8px, 1.2vw, 16px); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(8px, 1.2vw, 16px); }
.galerie a { display: block; position: relative; overflow: hidden; background: var(--beton); }
.galerie img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .5s ease; }
.galerie a:hover img { transform: scale(1.03); }
@media (min-width: 900px) { .galerie { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .galerie img { transition: none; } .galerie a:hover img { transform: none; } }

/* Planung und Ausgeführt, überblendet (T11) */
.vergleich { display: grid; gap: clamp(32px, 4vw, 56px); }
@media (min-width: 900px) { .vergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vergleich-paar { display: grid; gap: 12px; }
.vergleich-bild { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--beton); }
.vergleich-bild picture, .vergleich-bild img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vergleich-bild .ausgefuehrt { opacity: 0; transition: opacity 1.1s ease; }
.vergleich-paar[data-zustand="ausgefuehrt"] .ausgefuehrt { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .vergleich-bild .ausgefuehrt { transition: none; } }
.umschalter { display: inline-flex; border: 1.5px solid var(--nuss); width: max-content; }
.umschalter button {
  font: inherit; font-size: .9375rem; font-weight: 560;
  padding: 8px 16px; min-height: 40px;
  border: 0; background: transparent; color: var(--nuss); cursor: pointer;
}
.umschalter button[aria-pressed="true"] { background: var(--nuss); color: var(--papier); }
.vergleich-paar figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 20px; }
.no-js .umschalter { display: none; }
.no-js .vergleich-bild .ausgefuehrt { opacity: 1; }

/* Formular */
.formular { display: grid; gap: 22px; }
.felder { display: grid; gap: 22px; }
@media (min-width: 640px) { .felder.zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); } .felder.plz { grid-template-columns: 9rem minmax(0, 1fr); } }
.feld { display: grid; gap: 6px; }
.feld label { font-weight: 560; color: var(--nuss); font-size: 1rem; }
.feld .pflicht { color: var(--stein); font-weight: 400; }
.feld input, .feld textarea {
  width: 100%;
  font: inherit;
  font-size: 1.0625rem;
  color: var(--nuss);
  background: #fff;
  border: 1.5px solid #B9B0A3;
  border-radius: 0;
  padding: 12px 14px;
  min-height: 52px;
}
.feld textarea { min-height: 180px; resize: vertical; line-height: 1.5; }
.feld input:focus, .feld textarea:focus { outline: 3px solid var(--lehm); outline-offset: 0; border-color: var(--nuss); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--fehler); }
.feld .hinweis-fehler { color: var(--fehler); font-size: .9375rem; }
.honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.meldung { padding: 18px 20px; border-left: 4px solid var(--nuss); background: var(--beton); color: var(--nuss); }
.meldung.fehler { border-left-color: var(--fehler); }
.meldung:empty { display: none; }

/* Rechtstexte */
.rechtstext { max-width: 46rem; }
.rechtstext h2 { font-size: clamp(1.5rem, 2.2vw, 1.875rem); margin: 2.2em 0 .6em; }
.rechtstext h3 { font-size: 1.25rem; margin: 1.6em 0 .4em; }
.rechtstext p + p, .rechtstext ul { margin-top: .9em; }
.rechtstext ul { padding-left: 1.2em; }
.rechtstext li + li { margin-top: .3em; }

/* Fuss */
.fuss { background: var(--nuss); color: #E9DFCF; padding-block: clamp(56px, 7vw, 96px) 32px; }
.fuss a { color: #FBFAF7; text-decoration-color: rgba(217, 185, 126, .7); }
.fuss .marke { width: 180px; margin-bottom: 32px; }
.fuss-raster { display: grid; gap: 32px; }
@media (min-width: 760px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; } }
.fuss h2 { font-size: 1rem; font-stretch: 100%; font-weight: 600; color: var(--lehm); letter-spacing: 0; margin-bottom: 10px; }
.fuss ul { list-style: none; padding: 0; display: grid; gap: 4px; }
.fuss-unten { margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(217, 185, 126, .3); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; font-size: .9375rem; color: #CBBBA3; }
.fuss-unten ul { display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* Bild gross ansehen */
.leuchtkasten { border: 0; padding: 0; background: transparent; max-width: min(96vw, 1800px); max-height: 94vh; }
.leuchtkasten::backdrop { background: rgba(26, 15, 0, .96); }
.leuchtkasten figure { margin: 0; }
.lk-buehne { display: grid; place-items: center; touch-action: pan-y pinch-zoom; -webkit-user-select: none; user-select: none; }
.lk-bild { grid-area: 1 / 1; max-height: calc(94vh - 150px); width: auto; opacity: 0; transition: opacity .55s ease; }
.lk-bild.aktiv { opacity: 1; }
.lk-bild:not([src]) { display: none; }
.leuchtkasten figcaption { display: grid; gap: 2px; margin-top: 12px; text-align: center; color: #E9DFCF; font-size: .9375rem; line-height: 1.4; }
.leuchtkasten .lk-nachweis { font-size: .8125rem; color: #B9A88D; }
.lk-steuerung { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 14px; color: #E9DFCF; font-variant-numeric: tabular-nums; }
.lk-steuerung button { display: grid; place-items: center; width: 48px; height: 48px; border: 0; padding: 0; background: var(--papier); color: var(--nuss); cursor: pointer; transition: background-color .2s ease; }
.lk-steuerung button:hover { background: var(--lehm); }
.lk-steuerung button::before { content: ""; width: 18px; height: 18px; background-color: currentColor; -webkit-mask: var(--pfeil-weiter) center / contain no-repeat; mask: var(--pfeil-weiter) center / contain no-repeat; }
.lk-steuerung .lk-zurueck::before { transform: scaleX(-1); }
.lk-zaehler { min-width: 4.5em; text-align: center; }
.leuchtkasten.einzeln .lk-steuerung { display: none; }
.leuchtkasten :focus-visible { outline-color: var(--lehm); }
@media (prefers-reduced-motion: reduce) { .lk-bild, .lk-steuerung button { transition: none; } }
.leuchtkasten .zu { position: fixed; top: 16px; right: 16px; font: inherit; font-weight: 560; background: var(--papier); color: var(--nuss); border: 0; padding: 10px 16px; cursor: pointer; }

/* Fehlerseite */
.fehlerseite { padding-block: clamp(56px, 10vw, 140px); display: grid; gap: 24px; }

/* Abstände ohne Inline-Stil (die Content-Security-Policy erlaubt keine style-Attribute) */
.oben { margin-top: 28px; }
.oben-gross { margin-top: 48px; }
.oben-klein { margin-top: 14px; }

/* Bildband in Unterseiten: weniger hoch */
.bildband.schmal > picture img { height: clamp(240px, 40vw, 560px); }

.titel-person { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.05; margin-bottom: 4px; }
.status { display: inline-block; font-weight: 560; font-size: .9375rem; color: var(--nuss); padding: 3px 10px; border: 1.5px solid var(--nuss); margin-bottom: 14px; }

/* Projektseite */
.projekt-detail { padding-block: clamp(56px, 8vw, 120px); }
.projekt-detail.beton { background: var(--beton); }
.kopf-holcim .text > h2 + .lead { margin-top: 18px; }
.projekt-detail h2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); }
.projekt-gross { display: block; background: var(--beton); }
.projekt-gross img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
ul.galerie { list-style: none; padding: 0; }
.kopf-holcim { margin-bottom: clamp(40px, 5vw, 72px); }
@media (min-width: 900px) { .kopf-holcim { align-items: start; } .kopf-holcim .text { padding-top: 8px; } }

/* Kontaktseite */
.kontakt-abschnitt { padding-top: 0; }
.kontaktkarte .klein-bild img { width: 160px; margin-bottom: 22px; }
.formular h2 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); }

/* =====================================================================
   Variante B (07.11.2026): mehr Bildwirkung, Kopf über dem Bild,
   Menü auf dem Handy als aufklappende Bautafel.
   ===================================================================== */

/* Kopf über einem Bild: weiss */
.logo-hell { display: none; }
.kopf-hell .kopf { position: absolute; inset: 0 0 auto 0; }
.kopf-hell .kopf .logo-dunkel { display: none; }
.kopf-hell .kopf .logo-hell { display: block; }
.kopf-hell .nav a { color: #fff; }
.kopf-hell .nav a:hover { border-bottom-color: rgba(255, 255, 255, .55); }
.kopf-hell .nav a[aria-current="page"] { border-bottom-color: var(--lehm); }
.kopf-hell :focus-visible { outline-color: #fff; }

/* Menü auf dem Handy */
.menue-knopf, .menue-kontakt { display: none; }
@media (max-width: 759px) {
  .kopf .wrap { flex-wrap: nowrap; }
  .js .menue-knopf {
    display: inline-flex; align-items: center; gap: 12px;
    min-height: 48px; padding: 8px 2px 8px 12px;
    background: none; border: 0; cursor: pointer;
    font: inherit; font-weight: 600; font-size: 1.0625rem; color: var(--nuss);
  }
  .kopf-hell .menue-knopf { color: #fff; }
  .striche, .striche::before, .striche::after { display: block; width: 24px; height: 2px; background: currentColor; transition: transform .25s ease, background-color .25s ease; }
  .striche { position: relative; }
  .striche::before, .striche::after { content: ""; position: absolute; left: 0; }
  .striche::before { top: -7px; }
  .striche::after { top: 7px; }
  .kopf.offen .striche { background: transparent; }
  .kopf.offen .striche::before { transform: translateY(7px) rotate(45deg); }
  .kopf.offen .striche::after { transform: translateY(-7px) rotate(-45deg); }

  .js .nav { display: none; }
  .js .kopf.offen .nav {
    --schraube: radial-gradient(circle at center, rgba(64, 36, 1, .45) 0 2.2px, transparent 2.6px);
    display: block;
    position: absolute; left: 12px; right: 12px; top: calc(100% - 4px); z-index: 30;
    padding: 22px 26px 26px;
    background-color: var(--lehm);
    background-image: var(--schraube), var(--schraube), var(--schraube), var(--schraube);
    background-size: 14px 14px;
    background-position: 8px 8px, calc(100% - 8px) 8px, 8px calc(100% - 8px), calc(100% - 8px) calc(100% - 8px);
    background-repeat: no-repeat;
    box-shadow: 0 30px 60px -20px rgba(30, 16, 0, .55);
    animation: tafel-auf .28s ease-out;
  }
  .js .kopf.offen .nav ul { display: block; }
  .js .kopf.offen .nav a {
    display: block; padding: 12px 0;
    color: var(--nuss); border-bottom: 1px solid rgba(64, 36, 1, .28);
    font-stretch: var(--schmal); font-size: 2.25rem; font-weight: 640; line-height: 1.1;
  }
  .js .kopf.offen .nav a[aria-current="page"] { border-bottom-color: rgba(64, 36, 1, .28); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
  .js .kopf.offen .menue-kontakt { display: block; margin-top: 18px; font-size: 1.0625rem; line-height: 1.8; }
  .js .kopf.offen .menue-kontakt a { display: inline; padding: 0; border: 0; font-size: inherit; font-stretch: 100%; font-weight: 500; }
  .kopf-hell .kopf.offen .menue-knopf { color: #fff; }
}
@keyframes tafel-auf { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .js .kopf.offen .nav { animation: none; } .striche, .striche::before, .striche::after { transition: none; } }

/* Bühne der Startseite und Bildköpfe der Unterseiten */
.buehne, .bildkopf { position: relative; display: flex; align-items: flex-end; color: #fff; isolation: isolate; background: var(--nuss); }
.buehne { min-height: max(620px, min(100svh, 1040px)); }
.bildkopf { min-height: clamp(460px, 72svh, 780px); }
.buehne > picture, .buehne > picture img, .bildkopf > picture, .bildkopf > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.buehne > picture img { object-position: 58% 50%; }
.buehne::before, .bildkopf::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(26, 15, 2, .62) 0, rgba(26, 15, 2, .28) 45%, rgba(26, 15, 2, 0) 70%),
    linear-gradient(180deg, rgba(26, 15, 2, .55) 0, rgba(26, 15, 2, 0) 22%, rgba(26, 15, 2, 0) 45%, rgba(26, 15, 2, .7) 100%);
}
@media (max-width: 759px) {
  .buehne::before, .bildkopf::before { background: linear-gradient(180deg, rgba(26, 15, 2, .55) 0, rgba(26, 15, 2, .15) 22%, rgba(26, 15, 2, .35) 45%, rgba(26, 15, 2, .85) 100%); }
}
.buehne-text { padding-block: 150px clamp(110px, 12vw, 170px); width: 100%; }
.bildkopf .buehne-text { padding-block: 150px clamp(48px, 6vw, 88px); }
.buehne h1, .bildkopf h1 { color: #fff; max-width: 12ch; }
.bildkopf h1 { max-width: none; }
h1 { overflow-wrap: normal; -webkit-hyphens: auto; hyphens: auto; }
.buehne h1 { font-size: clamp(3.1rem, 8.6vw, 8.75rem); line-height: .9; }
.buehne .lead, .bildkopf .lead { color: rgba(255, 255, 255, .92); margin-top: 26px; max-width: 32em; }
.buehne .aktionen { margin-top: 34px; }
.buehne .aktionen a:not(.knopf) { color: #fff; }
.nachweis {
  position: absolute; right: 10px; bottom: 24px; z-index: 1;
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: .75rem; letter-spacing: .01em; color: rgba(255, 255, 255, .82);
}
.knopf.sand { background: var(--lehm); border-color: var(--lehm); color: var(--nuss); }
.knopf.sand:hover { background: #fff; border-color: #fff; color: var(--nuss); }

/* Bautafel, die unten aus der Bühne herausragt */
.tafel-unter { position: relative; z-index: 2; display: flex; justify-content: flex-end; margin-top: -84px; }
.tafel-unter .bautafel { width: min(100%, 27rem); }
@media (max-width: 759px) { .tafel-unter { margin-top: -56px; padding-left: calc(var(--rand) + 16px); } }

/* Grosse Aussage */
.aussage { font-family: var(--schrift); font-stretch: 86%; font-weight: 460; color: var(--nuss); font-size: clamp(1.75rem, 3.4vw, 3rem); line-height: 1.18; letter-spacing: -.01em; max-width: 24ch; text-wrap: balance; }
.aussage-raster { display: grid; gap: 32px; }
@media (min-width: 900px) { .aussage-raster { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); align-items: end; gap: 64px; } }

/* Dunkler Abschnitt */
.abschnitt.dunkel { background: var(--nuss); color: #E6DAC6; }
.dunkel h2, .dunkel h3, .dunkel h4 { color: #FBFAF7; }
.dunkel .lead { color: #F1E7D6; }
.dunkel .ablauf > li::before { border-color: var(--lehm); color: var(--lehm); background: var(--nuss); }
.dunkel .ablauf > li::after { border-color: var(--lehm); }
@media (min-width: 900px) { .dunkel .ablauf > li:last-child { background: linear-gradient(var(--lehm), var(--lehm)) right 7px / 1.5px 15px no-repeat; } }
.dunkel .begleitend { border-top-color: rgba(217, 185, 126, .3); }
.dunkel .begleitend > h3 { color: var(--lehm); }
.dunkel .begleitend li h4 { color: #FBFAF7; }
.dunkel .knopf.hell { color: var(--lehm); border-color: var(--lehm); }
.dunkel .knopf.hell:hover { background: var(--lehm); color: var(--nuss); }
.dunkel :focus-visible { outline-color: var(--lehm); }

/* Bildwand: Bild über die ganze Breite, Text und Bautafel darauf */
.bildwand { position: relative; isolation: isolate; color: #fff; min-height: clamp(560px, 92svh, 980px); display: flex; align-items: flex-end; }
.bildwand > picture, .bildwand > picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.bildwand::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(26, 15, 2, .78) 0, rgba(26, 15, 2, .35) 48%, rgba(26, 15, 2, 0) 75%); }
.bildwand-inhalt { width: 100%; padding-block: clamp(64px, 8vw, 120px); display: grid; gap: 40px; align-items: end; }
@media (min-width: 900px) { .bildwand-inhalt { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .bildwand .bautafel { justify-self: end; } }
.bildwand h2 { color: #fff; font-size: clamp(2.5rem, 5.4vw, 5rem); line-height: .95; max-width: 12ch; }
.bildwand .lead { color: rgba(255, 255, 255, .9); margin-block: 22px 30px; max-width: 28em; }
@media (max-width: 899px) { .bildwand::before { background: linear-gradient(180deg, rgba(26, 15, 2, 0) 20%, rgba(26, 15, 2, .82) 70%); } }

/* Mosaik */
.mosaik { display: grid; gap: clamp(8px, 1.2vw, 16px); grid-template-columns: minmax(0, 1fr); }
.mosaik a { display: block; overflow: hidden; background: var(--beton); }
.mosaik img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16 / 10; transition: transform .6s ease; }
.mosaik a:hover img { transform: scale(1.03); }
@media (min-width: 760px) {
  .mosaik { grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; }
  .mosaik a:first-child { grid-row: 1 / span 2; }
  .mosaik a:first-child img { aspect-ratio: auto; }
}
@media (prefers-reduced-motion: reduce) { .mosaik img { transition: none; } .mosaik a:hover img { transform: none; } }
.mosaik-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; margin-top: 18px; align-items: baseline; }

/* Sandfarbener Abschnitt */
.abschnitt.sand { background: var(--lehm); color: var(--nuss); }
.sand .rolle, .sand .text { color: var(--nuss); }
.sand .kontaktliste a { border-bottom-color: var(--nuss); }
.sand .person-bild img { box-shadow: 0 24px 40px -26px rgba(40, 22, 0, .6); }

/* =====================================================================
   Mitlaufender Kopf (07.11.2026, überarbeitet nach Wunsch Dominik): von
   Anfang an oben fixiert. Beim ersten Scrollen geht er fliessend in den
   schmalen dunklen Balken über: Hintergrund, Höhe, Logo und Schrift.
   ===================================================================== */
.js .kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  background-color: rgba(251, 250, 247, 1);
  border-bottom: 1px solid rgba(217, 185, 126, 0);
  box-shadow: 0 12px 30px -22px rgba(0, 0, 0, 0);
  transition: background-color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.js .kopf-hell .kopf { background-color: rgba(46, 26, 1, 0); }
.js body:not(.kopf-hell) main { padding-top: var(--kopf-h, 110px); }
.js .kopf .wrap { transition: padding .4s ease; }
.js .kopf .marke { display: grid; transition: width .4s ease; }
.js .kopf .marke img { grid-area: 1 / 1; display: block; transition: opacity .4s ease; }
.js .kopf .logo-dunkel { opacity: 1; }
.js .kopf .logo-hell { opacity: 0; }
.js .kopf-hell .kopf .logo-dunkel { opacity: 0; }
.js .kopf-hell .kopf .logo-hell { opacity: 1; }
.js .kopf .nav a, .js .kopf .menue-knopf { transition: color .4s ease, border-color .2s ease, padding .4s ease; }

.js body .kopf.fix {
  background-color: rgba(46, 26, 1, .94);
  border-bottom-color: rgba(217, 185, 126, .35);
  box-shadow: 0 12px 30px -22px rgba(0, 0, 0, .7);
}
@supports (backdrop-filter: blur(8px)) {
  .js body .kopf.fix { background-color: rgba(46, 26, 1, .86); backdrop-filter: blur(10px) saturate(1.2); }
}
.kopf.fix .wrap { padding-block: 10px; }
.kopf.fix .marke { width: 124px; }
.js .kopf.fix .logo-dunkel { opacity: 0; }
.js .kopf.fix .logo-hell { opacity: 1; }
.kopf.fix .nav a { color: #fff; }
.kopf.fix .nav a:hover { border-bottom-color: rgba(255, 255, 255, .55); }
.kopf.fix .nav a[aria-current="page"] { border-bottom-color: var(--lehm); }
.kopf.fix .menue-knopf { color: #fff; }
.kopf.fix :focus-visible { outline-color: var(--lehm); }
@media (min-width: 760px) { .kopf.fix .nav a { padding-block: 4px; } }
@media (max-width: 759px) {
  .kopf.fix .marke { width: 112px; }
  .js .kopf.fix.offen .nav a { color: var(--nuss); }
  .js .kopf.offen .nav { max-height: calc(100vh - 100px); overflow-y: auto; }
}
/* Beim Laden und beim Messen ohne Übergang, damit nichts sichtbar springt. */
.kopf.ohne-uebergang, .kopf.ohne-uebergang * { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  .js .kopf, .js .kopf .wrap, .js .kopf .marke, .js .kopf .marke img, .js .kopf .nav a, .js .kopf .menue-knopf { transition: none; }
}
/* Sprungziele nicht unter dem Balken verstecken */
:target, [id] { scroll-margin-top: 84px; }

/* =====================================================================
   Links ohne Unterstreichung (Wunsch Dominik 07.11.2026). Im Fliesstext
   bleibt die Linie (Datenschutz, Hinweise), sonst erscheint sie erst
   beim Darüberfahren und wächst von links.
   ===================================================================== */
.fuss a:not(.knopf), .kontaktliste a, .aktionen a:not(.knopf), .bautafel .mehr, .mosaik-fuss a, .menue-kontakt a {
  text-decoration: none;
  border-bottom: 0;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
  transition: background-size .3s ease, color .2s ease;
}
.fuss a:not(.knopf):hover, .kontaktliste a:hover, .aktionen a:not(.knopf):hover, .bautafel .mehr:hover, .mosaik-fuss a:hover, .menue-kontakt a:hover,
.fuss a:not(.knopf):focus-visible, .kontaktliste a:focus-visible, .aktionen a:not(.knopf):focus-visible, .bautafel .mehr:focus-visible, .mosaik-fuss a:focus-visible {
  background-size: 100% 1.5px;
}
@media (prefers-reduced-motion: reduce) {
  .fuss a:not(.knopf), .kontaktliste a, .aktionen a:not(.knopf), .bautafel .mehr, .mosaik-fuss a, .menue-kontakt a { transition: none; }
}
.aktionen a:not(.knopf), .bautafel .mehr, .mosaik-fuss a { font-weight: 600; }
.kontaktliste a { border-bottom: 0; }

/* Fuss neu */
.fuss { padding-block: clamp(64px, 8vw, 112px) 28px; color: #D9CBB3; }
.fuss a { color: #F4ECDF; }
.fuss a:hover, .fuss a:focus-visible { color: var(--lehm); }
.fuss-auftakt { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 40px; padding-bottom: clamp(40px, 5vw, 64px); margin-bottom: clamp(40px, 5vw, 64px); border-bottom: 1px solid rgba(217, 185, 126, .3); }
.fuss-frage { font-stretch: var(--schmal); font-weight: 640; font-size: clamp(2.25rem, 5vw, 4.25rem); line-height: .98; color: #FBFAF7; letter-spacing: -.012em; }
.fuss .marke { width: 168px; margin-bottom: 0; }
.fuss-raster { display: grid; gap: 36px 32px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fuss-marke { grid-column: 1 / -1; }
@media (min-width: 900px) { .fuss-raster { grid-template-columns: 1.3fr 1fr 1.2fr 1fr; } .fuss-marke { grid-column: auto; } }
.fuss h2 { font-size: .9375rem; font-weight: 600; color: var(--lehm); margin-bottom: 12px; }
.fuss ul { gap: 8px; }
.fuss-unten { margin-top: clamp(48px, 6vw, 80px); padding-top: 22px; border-top: 1px solid rgba(217, 185, 126, .2); font-size: .875rem; color: #B9A88D; }
.fuss-unten a { color: #D9CBB3; }
@media (max-width: 559px) { .fuss-raster { grid-template-columns: minmax(0, 1fr); } }

/* =====================================================================
   Feinschliff nach dem Go-Live (Rückmeldung Dominik 07.11.2026)
   ===================================================================== */

/* Kontaktkarte klebt unter dem mitlaufenden Kopf (69 px hoch), nicht dahinter.
   Auf niedrigen Bildschirmen klebt sie nicht, sonst wäre ihr Ende nicht erreichbar. */
@media (min-width: 900px) { .klebt { top: 100px; } }
@media (min-width: 900px) and (max-height: 860px) { .klebt { position: static; } }

/* Pfeile an Links. Wie die Signale auf der Baustelle zeigt der Pfeil, wohin es geht:
   nach rechts auf eine andere Seite dieser Website, schräg hinaus zu einer fremden
   Website, nach unten zum Herunterladen. Gezeichnet als Maske, darum in der Farbe des Links. */
:root {
  --pfeil-weiter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M1 8h13M9 3l5 5-5 5'/%3E%3C/svg%3E");
  --pfeil-hinaus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M3 13 13 3M5.5 3H13v7.5'/%3E%3C/svg%3E");
  --pfeil-laden: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000' stroke-width='1.9'%3E%3Cpath d='M8 1v10M3.5 6.5 8 11l4.5-4.5M2 15h12'/%3E%3C/svg%3E");
}
.aktionen a:not(.knopf)::after, .bautafel .mehr::after, .mosaik-fuss a::after,
main a[href^="http"]:not([href*="sbm.swiss"])::after, .fuss a[href^="http"]:not([href*="sbm.swiss"])::after, a[download]::after {
  content: "";
  display: inline-block;
  width: .68em;
  height: .68em;
  margin-left: .42em;
  background-color: currentColor;
  -webkit-mask: var(--pfeil-weiter) center / contain no-repeat;
          mask: var(--pfeil-weiter) center / contain no-repeat;
  transition: transform .2s ease;
}
/* Stärker als die Regeln der Bautafel und der Aktionen, damit fremde Links immer schräg hinaus zeigen. */
a[href^="http"]:not([href*="sbm.swiss"]):is(main *, .fuss *)::after { -webkit-mask-image: var(--pfeil-hinaus); mask-image: var(--pfeil-hinaus); }
a[download]:is(main *, .fuss *)::after { -webkit-mask-image: var(--pfeil-laden); mask-image: var(--pfeil-laden); }
.fuss a[href^="http"]::after, .fuss a[download]::after { background-color: var(--lehm); }
.aktionen a:not(.knopf):hover::after, .bautafel .mehr:hover::after, .mosaik-fuss a:hover::after { transform: translateX(3px); }
a[href^="http"]:not([href*="sbm.swiss"]):is(main *, .fuss *):hover::after { transform: translate(2px, -2px); }
a[download]:is(main *, .fuss *):hover::after { transform: translateY(2px); }
@media (prefers-reduced-motion: reduce) {
  .aktionen a:not(.knopf)::after, .bautafel .mehr::after, .mosaik-fuss a::after,
  main a[href^="http"]::after, .fuss a[href^="http"]::after, a[download]::after { transition: none; }
}
/* Die Links unter der Adresse auf der Kontaktseite etwas kräftiger als der Text daneben. */
.kontaktliste.oben-klein a { font-weight: 560; }

/* Rechtstexte enden mit Luft vor dem Fuss. */
.rechtstext { padding-bottom: clamp(72px, 10vw, 136px); }

/* Bautafel der Website im Impressum: wer gebaut hat, wie auf der Baustelle. */
.website-tafel { margin-top: 28px; width: min(100%, 32rem); }
.website-tafel .absender { display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; margin-top: 4px; padding-top: 18px; border-top: 1px solid rgba(64, 36, 1, .28); }
.website-tafel .netrix-marke { width: 150px; height: auto; flex: none; }
.website-tafel .mehr { margin-top: 0; }
.rechtstext .website-tafel p { margin-top: 0; }
.buero-tafel { margin-top: 36px; width: min(100%, 34rem); }