/* BAUSCH – Garten- & Landschaftsbau
   Umsetzung nach Entwurf "Bausch-Web-10-kl-a_010926" (Artboard 1312,64 x 9215 px)
   und Corporate Design "DD-Bausch_kurz_040626".
   Alle Desktop-Maße sind aus dem Entwurf vermessen (1 Entwurfs-px = 1 CSS-px). */

/* ------------------------------------------------------------------ *
 * Hausschriften
 * Der Entwurf setzt Novecento sans wide UltraBold (Headlines) und
 * Proxima Nova (Copy). Beide sind Adobe-Schriften: Sie duerfen nicht selbst
 * gehostet werden, und externe Schriftdienste sind hier ausgeschlossen.
 * Ersatz sind zwei freie Schriften, die selbst gehostet werden - sie liegen
 * unter assets/fonts/, Lizenz und Herkunft in assets/fonts/OFL.txt:
 *
 *   Montserrat Black      statt  Novecento sans wide UltraBold
 *     Geometrische Groteske derselben Formtradition, breite Versalien.
 *   Mulish                statt  Proxima Nova
 *     Von den freien Schriften am naechsten an Proxima Nova, mit echten
 *     Kursiven. Als Variable Font decken je eine Datei alle Schnitte ab.
 *
 * Nur die Latin-Untermenge: Deutsch braucht nichts darueber hinaus.
 * ------------------------------------------------------------------ */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat-900.0a53da91.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish.14cc0eab.woff2") format("woff2");
  font-weight: 600 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Mulish";
  src: url("../fonts/mulish-italic.59b79338.woff2") format("woff2");
  font-weight: 300 600; font-style: italic; font-display: swap;
}

:root {
  /* Farbwelt aus dem Corporate Design */
  --asphalt: #141312;   /* Schwarz  – Text, Buttons, Footer */
  --erde:    #C3A06E;   /* Beige    – Akzent */
  --beton:   #B8AE98;   /* Warmgrau – Heroflaeche, Labels, Icon */
  --natur:   #8A8560;   /* Moos     – Akzent */
  --kalk:    #F4F0E8;   /* Warmweiss – Kartenflaechen */
  --weiss:   #FFFFFF;
  --fokus:   #0B57D0;

  /* Schriften */
  --font-display: "Montserrat", "Arial Black", "Helvetica Neue", Impact, sans-serif;
  --font-text: "Mulish", "Avenir Next", Avenir, "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Raster (Entwurfsmaße) */
  --breite: 1043.5px;   /* Inhaltsspalte, in der die Flaechen sitzen */
  --rand: 20px;         /* Seitenrand, Desktop siehe Media Query */
  --einzug: 0px;        /* Textspalte gegenueber den Flaechen, Desktop 97.17px */

  /* Schriftgrade (mobil), Desktopwerte in der Media Query */
  /* Displaygrade bleiben so nah wie moeglich am Entwurf: Die Headline waechst bis auf
     den Entwurfswert 82,31 px und wird erst kleiner, wenn die Khaki-Flaeche sie nicht
     mehr traegt. Der Teiler 7,315 kommt aus dieser Bedingung: Die breiteste Zeile misst
     5,475 x Schriftgrad, der halbe Textblock 1,84 x Schriftgrad, dazu Rand und Zeile
     des Claims - zusammen rund (100vw - 38,5px) / 7,5. So aendert sich zwischen Handy und
     Desktop vor allem der Ausschnitt der Grafik, nicht der Schriftgrad. */
  --t-h1: min(82.31px, calc((100vw - 38.5px) / 7.5));
  --lh-h1: 0.9197;
  --t-h2: calc(var(--t-h1) * 0.7076);    /* 58,24 / 82,31 wie im Entwurf */
  --lh-h2: 0.9203;
  --t-intro: 21px;
  --t-body: 18px;
  --t-klein: 14px;
  --t-label: 14px;
  --t-meta: 13px;
  --t-bu: 15px;
  --lh-text: 1.2;

  /* Abstaende zwischen den Informationsebenen (mobil, Desktop in der Media Query).
     Sie gelten in jeder Textspalte gleich - Abschnitt, Leistungskarte, Bauen-Block
     und Kontakt -, damit gleiche Ebenen ueberall denselben Abstand haben.
     Ebenenfolge: Label > Headline > Copy/Zwischenzeile > Liste > Button. */
  --ab-kicker: 3.5px;    /* Label -> Headline: bewusst dicht, wie im Entwurf */
  --ab-headline: 16px;   /* Headline -> erster Textblock */
  --ab-block: 24px;      /* Textblock -> naechster Textblock gleicher Ebene */
  --ab-zwischen: 6px;    /* In den Leistungskarten haengt die erste Zeile unmittelbar an der Kartenueberschrift
   (Entwurf: Versalfuss -> Oberkante der Folgezeile 15 px). Das ist ein anderes Ebenenpaar
   als Headline -> Copy und behaelt deshalb den engen Wert. */
.karte__inhalt > h2 + * { margin-top: var(--ab-zwischen); }

/* Zwischenzeile -> die Liste, die zu ihr gehoert */
  --ab-cta: 18px;        /* letzter Textblock -> Button */

  --flaeche-innen: 24px; /* seitlicher Innenabstand der Kalk-Flaechen, Desktop 48px */
  /* Senkrechte Innenabstaende der Kalk-Flaechen. Nicht als Kastenmass gewaehlt, sondern so
     gerechnet, dass der *optische* Abstand oben und unten gleich ist: oben von der Kante bis
     zur Versalhoehe, unten von der Unterlaenge der letzten Zeile bis zur Kante. Unten steht
     bewusst ein Hauch mehr. Gemessene Zielwerte: 24 / 28 px mobil, 38 / 42 px ab 1313 px. */
  /* Der Abstand ueber der Versalhoehe ist kein fester Wert: Im Zeilenkasten stehen
     ueber dem Versalbild konstant 0,155 x Schriftgrad. Solange die Headline mitwaechst,
     waechst die Polsterung deshalb mit - sonst wuerde der optische Abstand schrumpfen.
     Gemessen: 0,155 bei 32 px wie bei 58,24 px Schriftgrad. */
  --flaeche-oben: calc(24px + 0.155 * var(--t-h2));
  --flaeche-unten: 28px;
}

/* Ab 656 px steht die Headline auf ihrem vollen Entwurfsgrad (dort erreicht --t-h1 die
   82,31 px). Von da an gelten die Entwurfswerte der Flaeche: optisch 38 px oben, 43 px
   unten - ein Hauch mehr unten, wie gewuenscht. */
@media (min-width: 656px) {
  :root {
    --flaeche-oben: 47px;
    --flaeche-unten: 43px;
  }
}

@media (min-width: 1313px) {
  :root { --rand: 134.57px; --einzug: 97.17px;
    --t-h1: 82.31px; --lh-h1: 0.9197;      /* 75.7 / 82.31 */
    --t-h2: 58.24px; --lh-h2: 0.9203;      /* 53.6 / 58.24 */   /* ab hier feste Entwurfsmaße */
    --t-intro: 36.65px;                    /* Zeilenabstand 44   */
    --t-body: 29.32px;                     /* Zeilenabstand 35.2 */
    --t-klein: 18.94px;                    /* Zeilenabstand 22.7 */
    --t-label: 18.94px;
    --t-meta: 14.65px;
    --t-bu: 21.89px;

    /* Desktop: Zeilenraster des Entwurfs ist 35,2 px */
    --ab-kicker: 3.5px;
    --ab-headline: 21.8px;
    --ab-block: 35.2px;
    --ab-zwischen: 6.8px;
    --ab-cta: 25.28px;   /* Entwurfsmass; vorher 25,28 / 24,79 / 45,68 nebeneinander */

    --flaeche-innen: 48px;
  }
}

/* ---------- Grundlagen ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  /* Sprungziele ("Zum Inhalt springen", Anker) duerfen nicht unter dem stehenden
     Kopf landen. Wert = Hoehe des Kopfes je Stufe. */
  scroll-padding-top: 72px;       /* Hoehe des stehenden Kopfes */
}
@media (min-width: 1313px) { html { scroll-padding-top: 101px; } }

body {
  margin: 0;
  background: var(--weiss);
  color: var(--asphalt);
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--t-body);
  line-height: var(--lh-text);
  overflow-wrap: break-word;
}

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

figure { margin: 0; }

a { color: inherit; text-decoration: none; }

/* Sichtbare Rueckmeldung, dass ein Element anklickbar ist – bei Maus und Tastatur gleich.
   Der Ruhezustand bleibt wie im Entwurf ohne Unterstrich. */
a:not(.btn):not(.kopf__logo):not(.karte__marke):not(.kopf__kontakt a):hover,
a:not(.btn):not(.kopf__logo):not(.karte__marke):not(.kopf__kontakt a):focus-visible {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.kopf__logo { transition: opacity 160ms ease; }
.kopf__logo:hover { opacity: 0.62; }

:where(a, [tabindex]):focus-visible {
  outline: 3px solid var(--fokus);
  outline-offset: 3px;
}

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--asphalt); color: var(--weiss);
  padding: 12px 16px; z-index: 100;
  font-style: italic; text-decoration: none;
}
.skip:focus { left: 0; }

/* Umbruch, der erst ab 900 px gilt: Auf schmalen Schirmen soll der Satz frei
   umbrechen, ab 900 px trennt er sauber an der Satzgrenze. */
@media (max-width: 899.98px) { .umbruch-ab-900 { display: none; } }

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

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

.wrap {
  width: min(var(--breite), 100% - 2 * var(--rand));
  margin-inline: auto;
}

/* Textspalte: sitzt im Entwurf 97,17 px rechts der Flaechenkante */
.txt { margin-left: var(--einzug); }

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

h1, h2 {
  font-family: var(--font-display);
  font-weight: 900;
  margin: 0;
  text-transform: uppercase;
  color: #000;
  /* Lange Komposita wie STRASSENBANKETT passen auf schmalen Schirmen nicht in eine
     Zeile. Mit Silbentrennung bricht das Wort mit Trennstrich statt mitten im Wort. */
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Headlines mit fest gesetzter Trennstelle: Hier gilt nur der weiche Trennstrich aus dem
   HTML, die automatische Silbentrennung bleibt aussen vor. So bricht AUSSEN-ANLAGEN und
   STRASSEN-BANKETT an der gewollten Stelle, und WELCHES PROJEKT wird gar nicht getrennt. */
.trennung-fest {
  -webkit-hyphens: manual;
  hyphens: manual;
}

h1 { font-size: var(--t-h1); line-height: var(--lh-h1); }
h2 { font-size: var(--t-h2); line-height: var(--lh-h2); }

/* Headlines: Montserrat Black, Laufweite -10 (= -0,01 em).
   Dazu die horizontale Stauchung, die schon fuer die Vorgaengerschrift galt: Novecento
   sans wide UltraBold laeuft schmaler als jede verfuegbare Ersatzschrift, und die
   Zeilenbreiten des Entwurfs haengen daran (Headline im Hero gegen die Khaki-Kante,
   "ORDENTLICHES HANDWERK." gegen seine Spalte). Ohne Stauchung laufen die Zeilen rund
   12,5 % breiter, die Herozeile stoesst an die Kante und die lange H2 bricht um.
   Sichtbar bleiben damit Black und rund -9 Laufweite (-0,01 em x 0,9167).
   Wird spaeter die lizenzierte Novecento nachgeliefert, entfaellt die Stauchung. */
h1, h2 {
  letter-spacing: -0.01em;
  transform-origin: left center;
}

/* Nur in der Desktopstufe, in der die Entwurfsmaße gelten. `width: max-content` ist dabei
   noetig, weil das Layout die ungestauchte Breite misst - ohne sie braeche eine Headline
   um, obwohl sie gestaucht laengst passt. Die Umbrueche stehen als <br> im HTML. */
@media (min-width: 1313px) {
  h1, h2 { width: max-content; }
  h1 { transform: scaleX(0.9167); }
  h2 { transform: scaleX(0.9041); }
}

p { margin: 0; }

.label {
  font-size: var(--t-label);
  font-style: italic;
  color: var(--beton);
  line-height: 1.246;
  margin: 0;
}

.intro { font-size: var(--t-intro); line-height: 1.2004; max-width: 828px; }

.bu {   /* Bildunterschrift */
  font-family: var(--font-text);
  font-weight: 300;
  font-style: italic;
  font-size: var(--t-bu);
  line-height: 1.183;
  margin: 0;
}

.zwischen {  /* "Neubau/Sanierung:", "Darum BAUSCH:" ... */
  font-style: italic;
  margin: 0;
}

ul.liste { list-style: none; margin: 0; padding: 0; }
ul.liste > li { text-indent: -0.72em; padding-left: 0.72em; }
ul.liste > li::before { content: "- "; }

ol.liste--zahlen { list-style: none; margin: 0; padding: 0; counter-reset: schritt; }
ol.liste--zahlen > li { counter-increment: schritt; text-indent: -1.1em; padding-left: 1.1em; }
ol.liste--zahlen > li::before { content: counter(schritt) ". "; }

/* Chronik: Die Jahreszahl ist die Marke, nicht der Strich. Zwei Spalten, damit die Jahre
   sauber untereinander stehen. Muss nach `ul.liste > li` stehen - gleiche Spezifitaet. */
ul.liste--jahre > li {
  display: grid;
  grid-template-columns: 3.4em 1fr;
  text-indent: 0;
  padding-left: 0;
}
ul.liste--jahre > li::before { content: none; }
ul.liste--jahre > li + li { margin-top: 4px; }
ul.liste--jahre b { font-weight: 700; }

/* ---------- Button ---------- */

.btn {
  display: inline-block;
  background: var(--asphalt);
  color: var(--weiss);
  font-size: var(--t-label);
  font-style: italic;
  line-height: 23.6px;
  text-decoration: none;
  padding: 4.07px 12px 5.48px 9.78px;
  margin-left: -9.78px;
}
.btn { transition: background-color 160ms ease, color 160ms ease; }

/* Der Entwurf zieht den Buttonkasten 9,78 px nach links, damit die Buttonschrift auf der
   Textkante sitzt. Auf schmalen Schirmen zaehlt die aeussere Flucht mehr als die Schriftkante:
   Dort steht der Kasten buendig mit Text, Headline und Listen. */
@media (max-width: 767.98px) {
  .btn { margin-left: 0; }
}
.btn:hover,
.btn:focus-visible { background: var(--beton); color: var(--asphalt); }
.btn:focus-visible { outline-offset: 2px; }

/* ---------- Kopf ---------- */

/* Der Kopf bleibt beim Scrollen stehen. Am Seitenanfang steht er auf Weiss wie im
   Entwurf; sobald gescrollt wird, blendet er langsam nach Schwarz - so bleiben Wortmarke
   und Kontaktzeile ueber jedem Untergrund lesbar, ueber dem Hero-Foto ebenso wie ueber
   den hellen Flaechen. Die Klasse setzt assets/js/kopf.js, das Umblenden macht CSS.
   z-index 50: Der Hero setzt mit `isolation` einen eigenen Stapelkontext, ohne den Wert
   liefe er ueber den Kopf. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--weiss);
  color: var(--asphalt);
  /* Die Flaeche blendet langsam um, Schrift und Wortmarke wechseln in der Mitte kurz.
     Grund: Liefen beide gleich lang, kreuzten sie sich in derselben Graustufe - grauer
     Text auf grauem Grund, Kontrast 1,0:1. Deshalb springt die Schrift hart um, und zwar
     genau an dem Punkt, an dem Schwarz und Weiss auf dem Grauwert gleich gut stehen
     (Helligkeit 0,194 - erreicht nach 56,6 % der Strecke, bei linearem Verlauf 283 ms).
     Dadurch ist der Kontrast in beide Scrollrichtungen gleich und faellt nie unter 4:1. */
  transition: background-color 500ms linear, color 0s linear 283ms;
}
.kopf.ist-gescrollt {
  background: var(--asphalt);
  color: var(--weiss);
}

/* Die Wortmarke wechselt mit: helle und dunkle Fassung liegen uebereinander und blenden
   gegeneinander. Die helle ist `aria-hidden`, damit sie nicht doppelt vorgelesen wird. */
.kopf__logo { position: relative; }
.kopf__logo img { transition: opacity 0s linear 283ms; }
.kopf__logo-hell { position: absolute; left: 0; top: 0; opacity: 0; }
.kopf.ist-gescrollt .kopf__logo-dunkel { opacity: 0; }
.kopf.ist-gescrollt .kopf__logo-hell { opacity: 1; }

/* Der blaue Fokusring hat auf Schwarz nur 2,4:1 - auf der dunklen Stufe deshalb Weiss
   (WCAG 1.4.11 verlangt 3:1 gegen die Umgebung). Auf Weiss bleibt es beim Blau. */
.kopf.ist-gescrollt :where(a, [tabindex]):focus-visible { outline-color: var(--weiss); }

.kopf__innen {
  display: flex;
  align-items: center;
  gap: 8px 16px;
  flex-wrap: wrap;
  padding-block: 16px;
}

.kopf__logo { display: block; flex: none; }
.kopf__logo img { width: 87.45px; height: 31.42px; }

.kopf__claim,
.kopf__kontakt {
  font-size: var(--t-meta);
  font-style: italic;
  line-height: 1.242;
  margin: 0;
}

.kopf__kontakt { margin-left: auto; display: flex; gap: 4px 16px; flex-wrap: wrap; }

/* Der Kopf steht jetzt beim Scrollen - er soll deshalb so flach wie moeglich sein.
   Unter 768 px entfaellt der Claim: Mit ihm braucht die Zeile 575 px, ohne ihn 379 px.
   Verloren geht nichts, er steht unmittelbar darunter als Subline im Hero. */
/* Telefon, E-Mail und Instagram tragen dieselbe Zeichensprache: 19,8 px Flaeche,
   Strichstaerke 1,008, gleiche Rundungen. Telefon und Mail stehen mit Zeichen vor dem
   Text; wo der Platz fehlt, bleibt nur das Zeichen. */
.kopf__zeichen { width: 19.8px; height: 19.8px; flex: none; }
/* 3 px oben und unten heben die Trefferflaeche der reinen Zeichenlinks auf 25,8 px und
   damit ueber die 24 px aus WCAG 2.5.8. Die Kopfhoehe aendert sich nicht, weil das Logo
   mit 31,4 px hoeher bleibt. */
.kopf__kontakt a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-block: 3px;
  text-decoration: none;
}
/* Die Unterstreichung gehoert an den Text, nicht unter das Zeichen. */
.kopf__kontakt a:hover .kopf__kontakt-text,
.kopf__kontakt a:focus-visible .kopf__kontakt-text {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

@media (max-width: 767.98px) {
  .kopf__claim { display: none; }
  /* nur die drei Zeichen: sie tragen die Zeile allein und stehen deshalb groesser -
     26 px kommen der Hoehe der Wortmarke (31,42 px) optisch nahe, ohne sie zu ueberholen.
     Beide Zwischenraeume sind gleich gross, damit die Reihe ruhig wirkt. */
  .kopf__kontakt-text { display: none; }
  .kopf__innen { gap: 8px 26px; }   /* optisch gleich: das Instagram-Zeichen fuellt seine
                                       Flaeche randlos, Mail und Telefon haben Luft */
  .kopf__kontakt { gap: 4px 22px; }

  /* Die Wortmarke traegt die Zeile mit und darf etwas groesser stehen. Die Spitze der
     Bildmarke ragt dabei 2 px ueber die Registerkante hinaus - spitze Formen wirken sonst
     eingerueckt (optischer Ausgleich, wie bei Rundungen). */
  .kopf__logo { margin-left: -2px; }
  .kopf__logo img { width: 96px; height: 34.49px; }
}
@media (min-width: 900px) { .kopf__kontakt { gap: 34.3px; } }

.kopf__social { width: 19.8px; height: 19.8px; flex: none; }

/* Unter 768 px tragen die drei Zeichen die Zeile allein und stehen deshalb groesser:
   26 px kommen der Hoehe der Wortmarke (31,42 px) optisch nahe, ohne sie zu ueberholen.
   Muss nach beiden Grundgroessen stehen - gleiche Spezifitaet, es entscheidet die Reihenfolge. */
@media (max-width: 767.98px) {
  .kopf__zeichen,
  .kopf__social { width: 26px; height: 26px; }
}

@media (min-width: 1313px) {
  .kopf__innen { padding-block: 40.81px 28.27px; gap: 0; flex-wrap: nowrap; }
  .kopf__claim { margin-left: 34.51px; }   /* Logo endet 649.69, Claim beginnt 684.2 */
  .kopf__kontakt { margin-left: auto; margin-right: 70.95px; }  /* Mail endet 1419.6, Icon beginnt 1490.55 */
  .kopf__logo { margin-left: 94.71px; }    /* 562.24 - 467.53 */
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--beton);
  isolation: isolate;
}

.hero__buehne { position: absolute; inset: 0; z-index: 0; }

/* Das Bild reicht immer bis an den rechten Fensterrand, links sitzt es auf der
   Entwurfskante. object-position haelt den linken Ausschnitt fest, wenn es breiter wird. */
.hero__bild {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
}

/* Khaki-Flaeche = Ausschnitt der Bildmarke.
   Die Marke (assets/images/bausch-logo.svg) besteht ausschliesslich aus 45-Grad-Kanten.
   Damit Form und Winkel in jedem Format unveraendert bleiben, sind alle Punkte in Pixeln
   gegen einen einzigen Ankerpunkt gerechnet - die Spitze J der Marke. Nur dieser Anker
   haengt am Layout; der Hero schneidet die Form an (overflow: hidden). Es aendert sich
   also immer nur der Ausschnitt, nie die Form.

   Massstab 120: 1 Markeneinheit = 120 px, die Marke ist damit 1821 x 3771 px gross.
   Aus der Kontur der Marke, gemessen ab der Spitze J (15.176 / 21.883):
     G  -9.539 / -21.883  ->  -1144.68 / -2625.96
     H   0.000 / -12.344  ->      0.00 / -1481.28
     I  -6.172 /  -6.172  ->   -740.64 /  -740.64
     J   0.000 /   0.000  ->      0.00 /     0.00   (Spitze)
     A  -9.539 /  +9.539  ->  -1144.68 / +1144.68
   G und A sind der oberste und der unterste Punkt der Marke. Die vier Punkte danach
   schliessen die Flaeche 4000 px ausserhalb des Heros und werden nie sichtbar. */
.hero__flaeche {
  position: absolute;
  inset: 0;
  background: var(--beton);
  z-index: 1;

  /* Anker: Spitze der Marke. Entwurfsmass 50 % + 145,22 px / 44,18 % der Herohoehe
     (im Entwurf 245,5 von 555,7 px) - damit bleibt die Flaeche im Register der
     Textspalte, egal wie hoch der Hero gerade ist. */
  --marke-x: calc(50% + 145.22px);
  --marke-y: 44.18%;

  clip-path: polygon(
    calc(var(--marke-x) - 1144.68px) calc(var(--marke-y) - 2625.96px),   /* G */
    var(--marke-x)                   calc(var(--marke-y) - 1481.28px),   /* H */
    calc(var(--marke-x) -  740.64px) calc(var(--marke-y) -  740.64px),   /* I */
    var(--marke-x)                   var(--marke-y),                     /* J, Spitze */
    calc(var(--marke-x) - 1144.68px) calc(var(--marke-y) + 1144.68px),   /* A */
    calc(var(--marke-x) - 1144.68px) calc(var(--marke-y) + 5144.68px),
    calc(var(--marke-x) - 5144.68px) calc(var(--marke-y) + 5144.68px),
    calc(var(--marke-x) - 5144.68px) calc(var(--marke-y) - 6625.96px),
    calc(var(--marke-x) - 1144.68px) calc(var(--marke-y) - 6625.96px)
  );
}

.hero__inhalt { position: relative; z-index: 2; padding-block: 40px; }

/* Das Raster haelt Headline und Subline auf derselben Flaeche wie im Entwurf. */
.hero__inhalt > .txt { display: grid; }
.hero__text { grid-area: 1 / 1; }

.hero h1, .hero__kopf {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #000;
  margin: 0;
}

.hero__claim {
  color: var(--weiss);
  font-size: var(--t-label);
  font-style: italic;
  line-height: 1.246;
  margin: 0;
}

@media (min-width: 1313px) {
  .hero { height: 555.7px; }
  /* Die Breite wird ausgerechnet statt ueber `right: 0` gesetzt: Bei absolut
     positionierten Bildern ignoriert der Browser `right`, solange die Breite `auto` ist,
     und nimmt stattdessen die Eigenbreite aus dem Seitenverhaeltnis. Ab rund 1421 px
     Fensterbreite blieb dadurch rechts ein Streifen der Khaki-Flaeche stehen. */
  .hero__bild {
    inset: auto;
    left: calc(50% - 363.92px);        /* 625.36 - 332.96 - 1312.64/2 */
    width: calc(50% + 363.92px);       /* laeuft bis an den Fensterrand */
    top: -158.52px;                    /* -57.52 - 101 */
    height: 714.41px;
    max-width: none;                   /* schlaegt die globale Regel img { max-width: 100% } */
    object-fit: cover;
    object-position: left top;
  }
  .hero__inhalt { padding-block: 0; height: 100%; }
  .hero h1, .hero__kopf {
    padding-top: 67.7px;
    width: max-content;
    transform: scaleX(0.9167);
    transform-origin: left center;
  }
  .hero__claim { padding-top: 50.99px; }
}

/* Zwischen 900 und 1312 px folgt der Hero der Proportion des Entwurfs
   (555,7 : 1312,64 = 42,33 %). Nur so hat die Spitze der Bildmarke denselben
   Raum wie im Entwurf; ein flacherer Hero wuerde von ihr nur eine Nase zeigen. */
@media (min-width: 900px) and (max-width: 1312.98px) {
  .hero { min-height: max(440px, 42.33vw); }
}

@media (max-width: 899.98px) {
  /* Hochformat: Auch hier zeigt der Ausschnitt die Spitze der Marke, wie im Entwurf.
     Sie sitzt genau auf der rechten Kante des Heros, auf halber Hoehe; das Foto steht
     dadurch in den beiden rechten Ecken. Der Text liegt auf derselben Hoehe wie die
     Spitze - dort ist die Flaeche am breitesten, deshalb steht die Headline immer
     vollstaendig auf Khaki. Winkel und Form bleiben unveraendert. */
  /* Zentriert wird ueber den Hero selbst: `height: 100%` am Inhalt loest an einem
     Elternteil mit blossem `min-height` nicht auf. */
  /* Die Spitze sitzt bewusst ueber der Mitte - mittig wirkt die Flaeche symmetrisch und
     leblos. Der Text laeuft mit: Er steht immer auf Spitzenhoehe, weil die Flaeche dort am
     breitesten ist. Umgesetzt ueber `padding-bottom` am Hero: Der zentrierte Inhalt
     verschiebt sich damit um die halbe Polsterung nach oben,
     (520 - 125) / 2 = 197,5 px = 38 % der Herohoehe. */
  .hero { min-height: 520px; display: grid; align-content: center; padding-bottom: 125px; }
  .hero__flaeche {
    --marke-x: 100%;
    --marke-y: 38%;
  }
  .hero__inhalt { padding-block: 32px; }
  .hero__claim { padding-top: 20px; }
}

/* ---------- Abschnitte ---------- */

.abschnitt { padding-top: 40px; }

/* Direkt unter dem Hero darf es enger sein: Die Khaki-Flaeche endet ohnehin mit viel
   Luft, ein voller Abschnittsabstand liesse den Text abreissen. */
.abschnitt--intro { padding-top: 24px; }

/* Ein Abstandssystem fuer alle Textspalten der Seite. Die Reihenfolge der Regeln
   entspricht der Ebenenfolge; jede spaetere Regel ist mindestens so spezifisch wie
   die Grundregel darueber und gewinnt deshalb zuverlaessig. */
.abschnitt > .txt > * + *,
.karte__inhalt > * + *,
.bauen-block__inhalt > * + *,
.kontakt__inhalt > * + * { margin-top: var(--ab-block); }

/* Label -> Headline */
.abschnitt > .txt > .label + h2,
.kontakt__inhalt > .label + h2 { margin-top: var(--ab-kicker); }

/* Headline -> erster Textblock */
.abschnitt > .txt > h2 + *,
.karte__inhalt > h2 + *,
.bauen-block__inhalt > h2 + *,
.kontakt__inhalt > h2 + * { margin-top: var(--ab-headline); }

/* Zwischenzeile -> die Liste, die zu ihr gehoert */
.abschnitt > .txt > .zwischen + ul.liste,
.abschnitt > .txt > .zwischen + ol.liste--zahlen,
.karte__inhalt > .zwischen + ul.liste,
.karte__inhalt > .zwischen + ol.liste--zahlen { margin-top: var(--ab-zwischen); }

/* letzter Textblock -> Button */
.abschnitt > .txt > .btn-abstand,
.kontakt__inhalt > .btn-abstand { margin-top: var(--ab-cta); }

@media (min-width: 1313px) {
  .abschnitt--intro   { padding-top: 44.8px; }
  .abschnitt--leistungen { padding-top: 145.1px; }
  .abschnitt--referenzen { padding-top: 267.63px; }
  .abschnitt--ueberuns   { padding-top: 211.59px; }
  .abschnitt--bauen      { padding-top: 175.21px; }
  .abschnitt--karriere   { padding-top: 182.64px; }
  .abschnitt--kontakt    { padding-top: 162.30px; }


}

/* Textbreiten reproduzieren die Zeilenumbrueche des Entwurfs */
@media (min-width: 1313px) {
  /* Mit Mulish statt der Systemschrift laufen die Zeilen 1,59 % breiter; die Maße sind
     mit diesem Faktor nachgezogen, damit dieselben Woerter je Zeile stehen wie zuvor. */
  .b-leistungen { max-width: 599px; }
  /* .b-referenzen entfaellt: Der Umbruch steht als <br> an der Satzgrenze im HTML,
     weil das Zeitfenster ueber die Breite nur 48 px betraegt und bei Schriftersatz
     kippen wuerde. */
  .b-ueberuns   { max-width: 723px; }
  .b-karriere   { max-width: 701px; }
  .b-bauen      { max-width: 678px; }
}

/* ---------- Portraets ---------- */

/* Im Entwurf liegt der Name auf dem Bild, unten links ueber den Kreisrand hinaus.
   Die Versaetze sind relativ zum Kreis gemessen, damit Name und Bild zusammenbleiben.

   Der Bildausschnitt steckt in width/height/left/top: Das Foto liegt vollstaendig in der
   Datei, der Kreis zeigt nur einen Teil davon. Fuer Luis Bausch ist der Ausschnitt im
   1200 x 800 grossen Bild x 264, y 0, Seitenlaenge 720 - damit stehen die Augen auf 39 %
   und der Kopf auf 62 % der Kreishoehe. Je Kreisdurchmesser D gilt deshalb
   width = 1,6667 D, height = 1,1111 D, left = -0,36667 D, top = 0. */
.mit-portrait { position: relative; }

.portraet { position: relative; margin: 24px 0 0; }
.portraet__kreis {
  display: block;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  width: 100%; height: 100%;
}
.portraet__kreis img { position: absolute; max-width: none; }
.portraet .bu { position: absolute; z-index: 2; white-space: nowrap; }

.portraet--luis { width: 200px; height: 200px; }
.portraet--luis .portraet__kreis img { width: 333.33px; height: 222.22px; left: -73.33px; top: 0; }
.portraet--luis .bu { left: 8px; top: 140px; }

.portraet--klein { width: 120px; height: 120px; margin-top: 16px; }
.portraet--klein .portraet__kreis img { width: 200px; height: 133.33px; left: -44px; top: 0; }
.portraet--klein .bu { left: 0; top: 66px; }

.portraet--kontakt { width: 200px; height: 200px; }
.portraet--kontakt .portraet__kreis img { width: 333.33px; height: 222.22px; left: -73.33px; top: 0; }
.portraet--kontakt .bu { left: 8px; top: 140px; }

/* Unter 1313 px steht der Name links am Kreis und laeuft wie im Entwurf ein Stueck in
   das Foto hinein - er sitzt im Anschnitt, nicht daneben. Dafuer rueckt der Kreis nach
   rechts. Auf den Kalk-Flaechen haengt er zusaetzlich mit
   der unteren Haelfte ueber die Kante - wie im Entwurf auf dem Desktop. */
@media (max-width: 1312.98px) {
  .portraet .bu { left: auto; }

  /* Leistungsabschnitt: Kreis rechts in der Textspalte */
  .portraet--luis { margin-left: auto; }
  .portraet--luis .bu { right: 140px; top: 110px; }

  /* Karte Fragen: Kreis rechts, halb unter der Kartenkante. Der noetige Freiraum unten
     steht bei den Referenzregeln - dort, wo auch die Grundpolsterung gesetzt wird. */
  .portraet--klein {
    position: absolute;
    right: 24px;
    bottom: -60px;          /* halbe Kreishoehe */
    margin: 0;
  }
  .portraet--klein .bu { right: 84px; top: 62px; }
  .referenzen { margin-bottom: 72px; }   /* Platz fuer den ueberstehenden Kreis */

  /* Kontaktflaeche: gleiches Prinzip, groesserer Kreis. Der noetige Freiraum unten steht
     bei den Kontaktregeln - dort, wo auch die Grundpolsterung gesetzt wird. */
  .portraet--kontakt {
    position: absolute;
    right: 24px;
    bottom: -100px;         /* halbe Kreishoehe */
    margin: 0;
  }
  .portraet--kontakt .bu { right: 140px; top: 110px; }
}

@media (min-width: 1313px) {
  .portraet { margin: 0; position: absolute; }

  .portraet--luis {
    width: 263px; height: 263px;
    left: 694.47px;            /* 1162   - 467.53 */
    top: 439.62px;             /* 1344.5 - 944.88, plus 40 px tiefer */
  }
  .portraet--luis .portraet__kreis img { width: 438.33px; height: 292.22px; left: -96.43px; top: 0; }
  .portraet--luis .bu { left: -55px; top: 139.2px; }   /* 40 px hoeher: der Name bleibt an
                                                          seiner Stelle, liegt aber auf dem
                                                          hellen Hintergrund statt auf der Jacke */

  .portraet--klein {
    width: 156px; height: 156px;
    left: 135.96px;            /* 1317.5 - 1181.54 */
    top: 148.24px;             /* 4804   - 4655.76 */
  }
  .portraet--klein .portraet__kreis img { width: 260px; height: 173.33px; left: -57.2px; top: 0; }
  .portraet--klein .bu { left: -108.7px; top: 76px; }    /* 1208.8 - 1317.5, Name auf halber Hoehe */

  .portraet--kontakt {
    width: 356px; height: 356px;
    left: 615.47px;            /* 1083   - 467.53 */
    top: 216.57px;             /* 8050.5 - 7873.93, plus 40 px tiefer - mehr Versatz
                                  brachte den Kreis zu dicht an den Footer */
  }
  .portraet--kontakt .portraet__kreis img { width: 593.33px; height: 395.56px; left: -130.53px; top: 0; }
  .portraet--kontakt .bu { left: -43.8px; top: 186.7px; } /* 60 px hoeher, siehe oben */
}

/* ---------- Leistungskarten ---------- */

.karte {
  background: var(--kalk);
  padding: var(--flaeche-oben) var(--flaeche-innen) var(--flaeche-unten);
  margin-top: 48px;
  position: relative;
}
.karte h2 { color: var(--asphalt); }
.karte .karte__inhalt { margin-left: var(--einzug); max-width: 898px; }
.karte--erste { margin-top: 180px; }   /* Luft unter dem Portrait im Leistungsabschnitt */

/* Winkelquadrat der Karte STRASSENBANKETT: Link auf die eigene Bankett-Website.
   Es sitzt mit gleichem Abstand zur rechten und zur unteren Kartenkante. */
.karte__marke {
  position: absolute;
  right: 22.65px;
  bottom: 22.65px;
  width: 33.15px; height: 33.15px;
  background: var(--asphalt);
  display: grid; place-items: center;
}
.karte__marke img { width: 14.27px; height: 19.4px; transition: transform 160ms ease; }
/* Rueckmeldung ueber die Groesse, wie bei den uebrigen Winkeln des Entwurfs */
.karte__marke:hover img,
.karte__marke:focus-visible img { transform: scale(1.35); }
.karte__marke:focus-visible { outline: 3px solid var(--fokus); outline-offset: 3px; }

@media (max-width: 1312.98px) {
  .karte { margin-top: 32px; }
  .karte--erste { margin-top: 76px; }
  /* Der Link bleibt auch auf kleinen Schirmen erreichbar; die Karte haelt dafuer
     unten Platz frei, damit das Zeichen nie auf dem Text sitzt. */
  .karte--bankett { padding-bottom: 78px; }
}

@media (min-width: 1313px) {
  .karte--wege { margin-top: 48.73px; }
  .karte--landschaft, .karte--strassenbankett { margin-top: 60.76px; }
}

/* ---------- Referenzraster ---------- */

.referenzen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 48px;
  list-style: none; padding: 0;
}

.referenz {
  background: var(--kalk);
  padding: 27px 24px;
  position: relative;
}
/* Ortszeile als Einstieg jeder Referenzkachel. Sie nutzt die Werte des Abschnittslabels
   (`.label`: kursiv, --t-label, --beton) und haelt zur Kachelueberschrift denselben engen
   Abstand wie ein Label zur Headline. */
.referenz__ort + h3 { margin-top: var(--ab-kicker); }

.referenz h3 {
  font-family: var(--font-text);
  font-weight: 600;
  font-size: var(--t-body);
  line-height: 1.04;
  margin: 0;
  color: var(--asphalt);
}
.referenz ul { list-style: none; margin: 14px 0 0; padding: 0; font-size: var(--t-klein); line-height: 1.1985; }
.referenz ul li { text-indent: -0.72em; padding-left: 0.72em; }
.referenz ul li::before { content: "- "; }

.referenz--frage p { font-size: var(--t-klein); line-height: 1.1985; margin: 14px 0 0; }

/* Unter 1313 px haengt das Portrait mit der unteren Haelfte ueber die Kartenkante. Die Karte
   haelt dafuer unten Platz frei, damit der Kreis unterhalb des Textes beginnt und ihn nicht
   ueberdeckt. Muss nach der Grundpolsterung stehen, gleiche Spezifitaet. */
@media (max-width: 1312.98px) {
  .referenz--frage { padding-bottom: 72px; }
}

@media (min-width: 1313px) {
  .referenzen {
    grid-template-columns: repeat(3, 329.49px);
    gap: 32.91px 27.51px;
    margin-top: 80.55px;
  }
  .referenz { min-height: 214.85px; padding: 24.5px 24px 24px 24.47px; }
  .referenz ul { margin-top: 14.3px; }
}


/* ---------- "Darauf koennen Sie bei uns bauen" ---------- */

.bauen-block {
  background: var(--kalk);
  padding: var(--flaeche-oben) var(--flaeche-innen) var(--flaeche-unten);
  margin-top: 23.28px;
}
.bauen-block h2 { color: #000; }
.bauen-block__inhalt { margin-left: var(--einzug); }

@media (max-width: 1312.98px) {
  .bauen-block { margin-top: 20px; }
}
@media (min-width: 1313px) {
  .bauen-block + .bauen-block { margin-top: 59.94px; }
  .bauen-block { min-height: 206.6px; }
}

/* ---------- Kontakt ---------- */

.kontakt {
  background: var(--kalk);
  padding: 32px var(--flaeche-innen) 40px;
  position: relative;
  margin-top: 0;
}
.kontakt__inhalt { margin-left: var(--einzug); }
.kontakt h2 { color: #000; }
.kontakt .adresse { font-style: normal; }

/* Unter 1313 px haengt das Portrait mit der unteren Haelfte ueber die Kante. Die Flaeche
   haelt dafuer unten so viel Platz frei, wie der Kreis in sie hineinragt - sonst laege er
   auf dem Button. Muss nach der Grundpolsterung stehen, gleiche Spezifitaet. */
@media (max-width: 1312.98px) {
  .kontakt { padding-bottom: 116px; }
}

@media (min-width: 1313px) {
  .kontakt { padding: 53.57px var(--flaeche-innen) 0; min-height: 477.24px; }
}


/* ---------- Fuss ---------- */

.fuss {
  background: var(--asphalt);
  color: var(--weiss);
  margin-top: 166px;   /* Luft unter dem ueberhaengenden Kontakt-Portrait */
  padding-block: 56px;
}
.fuss h2 {
  font-family: var(--font-display);
  color: var(--weiss);
  font-size: var(--t-h1);
  line-height: var(--lh-h1);
}
.fuss__claim {
  color: var(--weiss);
  font-size: var(--t-label);
  font-style: italic;
  line-height: 1.246;
  margin-top: 24px;
}
.fuss__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.fuss__marke img { width: 188.1px; height: 67.6px; }

.fuss__recht {
  margin-top: 40px;
  font-size: var(--t-meta);
  font-style: italic;
  line-height: 1.242;
  display: flex; gap: 24px; flex-wrap: wrap;
}

@media (min-width: 1313px) {
  /* 180 statt 136,29 px: Das Portrait haengt 95 px unter die Kontaktflaeche; so bleiben
     darunter 85 px Luft bis zum Footer. */
  .fuss { margin-top: 180px; padding-block: 86.64px 147.57px; }
  .fuss h2 { font-size: var(--t-h1); }
  .fuss__claim { margin-top: 14.1px; }        /* 8916.8 - 8902.7 */
  .fuss__marke { margin-bottom: -8.5px; }
  .fuss__recht { margin-top: 111.4px; gap: 14.3px; }  /* 9051.8 - 8940.4 */
  .fuss__recht span { display: none; }
}

/* ---------- Unterseiten ---------- */

/* Gleicher Satzspiegel wie die Startseite: Text auf der eingerueckten Textspalte,
   Zeilenraster 35,2 px, Ueberschriften in der Hausschrift. */
.rechtstext { padding-block: 48px 72px; }
.rechtstext h1 { font-size: var(--t-h2); line-height: var(--lh-h2); }
.rechtstext h2 { font-size: calc(var(--t-h2) * 0.52); line-height: var(--lh-h2); margin-top: 52.8px; }
.rechtstext p,
.rechtstext ul { margin-top: 21.8px; max-width: 712px; }
.rechtstext ul { padding-left: 1.1em; }
.rechtstext li + li { margin-top: 4px; }
.rechtstext a { text-decoration: underline; text-underline-offset: 2px; }
.rechtstext strong { font-weight: 700; }

@media (min-width: 1313px) {
  .rechtstext { padding-block: 145.1px 136.29px; }
  .rechtstext h1 { width: max-content; transform: scaleX(0.9041); transform-origin: left center; }
  .rechtstext h2 { margin-top: 70.4px; }
  .rechtstext h1 + p { margin-top: 35.2px; }
}

/* ---------- Register ---------- */

/* Jeder Text der Seite sitzt auf derselben senkrechten Kante - so zeigen es die
   Hilfslinien der Layoutvorlage: Label, Headline, Copy, Buttons und Listen, auch
   innerhalb der Kalk-Flaechen. Die Flaechen haben zusaetzlich ihren Innenabstand,
   der sonst auf den Einzug aufaddiert wuerde; er wird hier wieder abgezogen.
   Muss nach den Grundregeln der Komponenten stehen, sonst gewinnen diese. */
/* Nur in der Desktopstufe, in der die Entwurfsmaße und die Hilfslinien gelten. Darunter
   ist der Einzug 0; dort behalten die Flaechen ihren eigenen Innenabstand, sonst klebte
   der Text auf schmalen Schirmen an der Kartenkante. */
@media (min-width: 1313px) {
  .karte .karte__inhalt,
  .bauen-block__inhalt,
  .kontakt__inhalt { margin-left: calc(var(--einzug) - var(--flaeche-innen)); }
}

/* ---------- Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}