/* ==========================================================================
   MASTELL, Basis
   Grundlagen: Schriften, Farben, Maße, Typografie, Raster, Kopf und Fuß.
   Bausteine (Karten, Galerie, Formulare, Assistent) stehen in bausteine.css.

   Gestaltungsprinzip: Schweizer Raster. Harte Linien, keine Rundungen,
   große Versalien, Monospace für Zahlen und technische Angaben.
   Farbe trägt Bedeutung, sie ist keine Dekoration.
   ========================================================================== */

/* ------------------------------------------------------------- Schriften
   Alle Schriften liegen auf dem eigenen Server. Kein Google Fonts, kein
   fremder Server, das ist der Grund, warum die Seite kein Einwilligungs-
   banner braucht. Wird das geändert, wird das Banner Pflicht. */
/* Archivo, variabel in Gewicht (100 bis 900) und Breite (62 bis 125 %). Die
   Breitenachse trägt die Überschriften: breit gesetzt wirken Versalien
   monumental, ohne dass man einen zweiten Schnitt laden muss. */
@font-face{
  font-family:'Archivo';
  src:url('../schriften/archivo.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../schriften/manrope.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../schriften/newsreader.woff2') format('woff2');
  font-weight:200 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Newsreader';
  src:url('../schriften/newsreader-kursiv.woff2') format('woff2');
  font-weight:200 700;font-style:italic;font-display:swap;
}

/* ---------------------------------------------------------------- Marken */
:root{
  /* Grundflächen */
  --papier:#FFFFFF;
  --papier-warm:#F4F8F5;      /* leicht grünliches Weiß für abgesetzte Bänder */
  --papier-blau:#EFF4F9;

  /* Schrift und Linien */
  --ink:#0D1A13;              /* sehr dunkles Grün statt Schwarz */
  --leise:#525E57;
  --haar:#D8E0DA;             /* feine Trennlinien */
  --linie:#0D1A13;            /* harte Rasterlinien */

  /* Hauptfarbe */
  --gruen:#14663C;
  --gruen-tief:#0B3E24;
  --gruen-hell:#E6F1EA;
  --gruen-leucht:#3EA86B;     /* nur auf dunklem Grund */

  /* Zweitfarbe */
  --blau:#14507D;
  --blau-tief:#0C3355;
  --blau-hell:#E5EDF5;
  --blau-leucht:#4A93D1;      /* nur auf dunklem Grund */

  /* Dritter Ton für die Immobilien, aus dem eigenen Logo genommen.
     Das Logo trägt Grün (#108040) und Rot (#F00000 bis #D02000). Grün ist
     beim Gartenbau belegt, also führt hier das Rot. Nicht das grelle aus
     der Datei: Der Farbton bleibt derselbe (rund 5°), die Sättigung ist
     von 75 auf 49 Prozent zurückgenommen. Das ergibt Terrakotta statt
     Signalrot, hält 5,9:1 auf Weiß und lässt sich zugleich besser von der
     Fehlerfarbe der Formulare unterscheiden. */
  --immo:#A8443A;
  --immo-tief:#8B342C;
  --immo-hell:#F8EDEB;
  --immo-leucht:#E08276;      /* nur auf dunklem Grund */

  --warnung:#B3302A;

  /* Je Bereich ein Ton. Wird auf der Seite umgesetzt (body.seite-…). */
  --ton:var(--gruen);
  --ton-hell:var(--gruen-hell);
  --ton-leucht:var(--gruen-leucht);
  --ton-tief:var(--gruen-tief);

  /* Ein einziges Glüh-Token, schwach gehalten. Es taucht als Textschatten,
     Kastenschatten, Filter und Füllung wieder auf, dadurch wirkt das Licht
     auf der ganzen Seite wie aus derselben Quelle. */
  --schimmer:rgba(62,168,107,.16);

  /* Maße, Achterschritte */
  --r1:.5rem;  --r2:1rem;   --r3:1.75rem;
  --r4:3rem;   --r5:5rem;   --r6:7.5rem;

  /* Bewegung
     Mikro-Interaktionen 150 bis 300 ms, größere Übergänge unter 500 ms.
     Länger fühlt sich nicht edler an, sondern träge. */
  --weich:cubic-bezier(.2,.7,.2,1);
  --kurz:.18s; --mittel:.28s; --lang:.45s;

  /* Kleinstes Antippziel. Alles, was man drücken kann, hält das ein. */
  --griff:44px;

  /* Rundung. Bewusst nur für die Bereichskacheln und Glaselemente,
     der Rest der Seite bleibt scharfkantig. */
  --rund:26px;

  --kopf-hoehe:88px;

  /* Höhe der klebenden Anrufleiste am unteren Rand.
     Sie war mit 56 Pixeln angesetzt, das ist die Mindesthöhe eines
     Knopfes. Gemessen wird sie 72: zwei Pixel Oberlinie, und bei 375
     Pixeln Breite bricht „Angebot anfordern" auf zwei Zeilen um. Dazu
     kommt auf iPhones mit Home-Balken der Sicherheitsrand. Alles, was
     unten Platz freihalten muss, rechnet ab jetzt mit diesem Wert. */
  --klebe-hoehe:calc(74px + env(safe-area-inset-bottom, 0px));
}
@media(max-width:1300px){:root{--kopf-hoehe:72px}}

body.seite-tiefbau{--ton:var(--blau);--ton-hell:var(--blau-hell);--ton-leucht:var(--blau-leucht);
  --ton-tief:var(--blau-tief);--schimmer:rgba(74,147,209,.16)}
body.seite-immo{--ton:var(--immo);--ton-hell:var(--immo-hell);--ton-leucht:var(--immo-leucht);
  --ton-tief:var(--immo-tief);--schimmer:rgba(224,130,118,.16)}

/* -------------------------------------------------------------- Grundlage */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-hoehe) + 1rem)}
body{
  margin:0;background:var(--papier);color:var(--ink);
  font-family:'Archivo','Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:16px;line-height:1.62;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  /* Platz für die schwebende Kopfzeile. Das Kopfbild holt ihn sich zurück. */
  padding-top:var(--kopf-hoehe);
}
img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ton);outline-offset:2px}
::selection{background:var(--ton);color:#fff}
hr{border:0;border-top:2px solid var(--linie);margin:0}

/* ------------------------------------------------------------- Typografie */
/* Überschriften laufen leicht breit (Archivos Breitenachse), Fließtext normal.
   Gebrochen wird nur, wenn ein Wort sonst überliefe. Silbentrennung ist
   bewusst aus: sie zerlegte „ANSPRECHPART-NER" mitten im Wort, obwohl
   schmaler gesetzt genug Platz da ist. Gegen zu breite Rasterspalten hilft
   stattdessen min-width:0 an den Rasterkindern. */
h1,h2,h3,h4{margin:0;font-weight:800;letter-spacing:-.035em;line-height:.96;
  text-transform:uppercase;font-stretch:104%;overflow-wrap:break-word}
h1{font-size:clamp(2.2rem,6.2vw,4.9rem);letter-spacing:-.04em;font-stretch:106%}
h2{font-size:clamp(1.9rem,4.6vw,3.7rem);font-stretch:102%}
h3{font-size:clamp(1.2rem,1.9vw,1.55rem);letter-spacing:-.03em;font-stretch:100%}
h4{font-size:1rem;letter-spacing:-.02em}
h1 em,h2 em,h3 em{font-style:normal;color:var(--ton)}
p{margin:0 0 var(--r2)}
p:last-child{margin-bottom:0}
strong{font-weight:800}

.mono{
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,'Liberation Mono',monospace;
  font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
}
/* Kleine Überschrift über einem Abschnitt: kein gesperrtes Mono-Label,
   sondern ein kurzer Satz in normaler Schrift. */
.kicker{
  color:var(--ton);font-weight:800;
  font-size:clamp(1.15rem,1.9vw,1.5rem);letter-spacing:-.015em;line-height:1.25;
  margin:0 0 .7rem;
}
.kicker--hell{color:var(--ton-leucht)}
/* Zwischenüberschrift im Fließtext, unterhalb der Abschnittsüberschrift. */
.unterkopf{font-size:clamp(1.15rem,1.8vw,1.45rem);letter-spacing:-.025em;margin-bottom:.5rem}
.lead{font-size:clamp(1.08rem,1.4vw,1.26rem);line-height:1.66;color:var(--leise);max-width:54ch}
.klein{font-size:.96rem;line-height:1.6;color:var(--leise)}
.zitat{
  font-family:'Newsreader',Georgia,serif;font-style:italic;font-weight:400;
  font-size:clamp(1.3rem,2.4vw,2rem);line-height:1.32;letter-spacing:-.015em;
  text-transform:none;color:var(--ink);max-width:34ch;
}

/* Textlink mit wachsender Unterstreichung.
   Die Polsterung bringt das Antippziel auf 44 px, ohne dass die Linie vom
   Text wegrutscht, sie sitzt auf derselben Höhe wie die Polsterung. */
.textlink{
  --tl-luft:.63rem;
  display:inline-flex;align-items:center;gap:.45rem;position:relative;
  font-weight:800;font-size:.74rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ton);padding-block:var(--tl-luft);min-height:var(--griff);
  touch-action:manipulation;
}
.textlink::after{
  content:"";position:absolute;left:0;right:0;bottom:var(--tl-luft);height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--mittel) var(--weich);
}
.textlink:hover::after,.textlink:focus-visible::after{transform:scaleX(1)}
.textlink svg{transition:transform var(--mittel) var(--weich)}
.textlink:hover svg{transform:translateX(4px)}
.textlink--hell{color:var(--ton-leucht)}

/* ----------------------------------------------------------------- Raster */
/* Inhaltsrahmen. Kein fester Deckel mehr: Auf großen Monitoren blieben sonst
   links und rechts breite Leerränder, die je nach Sektion unterschiedlich groß
   waren (Sektionen zentriert, Fuß und Kopf voll breit) und dadurch ungleich
   wirkten. Jetzt läuft der Inhalt über die volle Breite mit einem einheitlichen
   seitlichen Rand, auf jeder Seite gleich. Der Fließtext bleibt lesbar, weil
   Lead-, Überschrift- und Textspalten ohnehin per max-width in Zeichen (ch)
   begrenzt sind; reine Leseseiten nutzen zusätzlich .huelle--schmal. */
.huelle{max-width:none;margin:0 auto;padding-inline:clamp(1.1rem,4vw,3.5rem)}
.huelle--schmal{max-width:820px}
.abschnitt{padding-block:clamp(3rem,7vw,var(--r6));border-bottom:2px solid var(--linie)}
.abschnitt--eng{padding-block:clamp(2.4rem,5vw,var(--r5))}
.abschnitt--warm{background:var(--papier-warm)}
.abschnitt--dunkel{background:var(--ink);color:var(--papier);border-bottom-color:var(--ink)}
.abschnitt--dunkel .lead,.abschnitt--dunkel .klein{color:rgba(255,255,255,.7)}
.abschnitt--dunkel h1 em,.abschnitt--dunkel h2 em{color:var(--ton-leucht)}
.abschnitt--satt{background:var(--gruen);color:#fff;border-bottom-color:var(--gruen)}
.abschnitt--satt .lead{color:rgba(255,255,255,.82)}

/* Kopfblock eines Abschnitts. Früher zweispaltig mit Abschnittsmarke links;
   seit die Marken weg sind, steht der Text einspaltig auf der linken Kante,
   auf einer Linie mit dem Inhalt darunter. */
.kopfblock{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--r2);
  margin-bottom:clamp(2rem,4vw,var(--r4))}
.kopfblock>*{min-width:0}
.kopfblock .lead{max-width:52ch}
.kopfblock h2{max-width:17ch}
.kopfblock .lead{margin-top:1.1rem}

/* Breiter Abschnittskopf: Überschrift links, Erklärung rechts daneben.
   Einspaltig stand die Überschrift bei 1900 Pixeln Bildschirmbreite in
   einer 642 Pixel schmalen Spalte, brach auf drei Zeilen um, die
   Erklärung darunter noch einmal auf drei. Der Block wurde dadurch
   279 Pixel hoch und zwei Drittel der Breite blieben leer, was den
   Abstand bis zu den Kacheln unnötig aufblähte.
   Nebeneinander zählt nur noch die höhere der beiden Spalten, und der
   Text läuft bis zur Seitenmitte. Die Erklärung behält ihre bequeme
   Zeilenlänge, statt für weniger Zeilen überbreit gezogen zu werden.
   Unterhalb der Bruchstelle bleibt alles einspaltig wie bisher. */
/* Breiter Abschnittskopf.
   Einspaltig mit 17 Zeichen Grenze lief die Überschrift auf drei Zeilen
   und die Erklärung darunter auf weitere drei. Der Block wurde dadurch
   279 Pixel hoch, obwohl zwei Drittel der Breite leer blieben, und
   dieser Leerlauf schob die Kacheln nach unten.
   Hier gilt keine Zeichengrenze für die Überschrift: Sie läuft, so weit
   der Abschnitt reicht, und steht dadurch von etwa 500 Pixeln Breite an
   auf einer einzigen Zeile. Die Erklärung darf mit 68 Zeichen deutlich
   länger laufen als die üblichen 52, bleibt damit aber noch im
   lesbaren Bereich und kommt auf zwei Zeilen statt drei. */
.kopfblock--breit h2{max-width:none}
.kopfblock--breit .lead{max-width:68ch}

/* Paar-Kopf: Überschrift und Erklärung nebeneinander, H2 links, Lead rechts
   daneben, an der Grundlinie ausgerichtet. Unter 760 px klappt es sauber auf
   einspaltig zurück, dann steht die Erklärung wieder unter der Überschrift. */
.kopfblock--paar h2{max-width:22ch}
.kopfblock--paar .lead{max-width:56ch}
@media(min-width:760px){
  .kopfblock--paar{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    column-gap:clamp(2rem,4.5vw,4.5rem);align-items:end;row-gap:0}
  .kopfblock--paar .lead{margin-top:0}
}

/* Reine Textköpfe (Überschrift + Erklärung) füllten auf breiten Schirmen nur
   die linke Hälfte, rechts blieb große Leere. Ab 1200 px stehen Überschrift
   (mit optionalem Kicker) links und die Erklärung rechts daneben, an der
   Grundlinie ausgerichtet, der Block nutzt so die volle Breite ohne Leerraum.
   Alles außer der Erklärung bleibt in der linken Spalte, dadurch funktioniert
   es auch bei Blöcken mit Kleinhinweis, Knopfreihe oder nur einer Überschrift.
   Unter 1200 px bleibt der Kopf einspaltig wie bisher. */
@media(min-width:1200px){
  .kopfblock--nur-text > div{
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    column-gap:clamp(2rem,4.5vw,4.5rem);
    align-items:end;
  }
  .kopfblock--nur-text > div > *{grid-column:1}
  .kopfblock--nur-text > div > .lead{
    grid-column:2;grid-row:1 / -1;align-self:end;margin-top:0;max-width:58ch;
  }
}
/* Überschrift und Erklärung sind hier zwei Rasterzellen statt wie sonst
   zwei Absätze in einer. Der Rasterabstand käme deshalb zum Abstand des
   Textes hinzu, zusammen 34 statt 18 Pixel. Den Abstand setzt weiterhin
   allein der Text. */
.kopfblock--breit{row-gap:0}

.raster{display:grid;gap:clamp(1rem,2vw,1.6rem)}
@media(min-width:700px){
  .raster--2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .raster--3{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(min-width:520px){.raster--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){.raster--4{grid-template-columns:repeat(4,minmax(0,1fr))}}

.abstand-oben{margin-top:clamp(2rem,4vw,var(--r4))}
.abstand-oben-klein{margin-top:var(--r3)}

/* ----------------------------------------------------------------- Knöpfe
   Regel aus MARKETING.md: Ein Knopf sagt, was der Besucher bekommt.
   Eine Hauptaktion je Seite (gefüllt), alles andere Umriss oder Textlink. */
.knopfreihe{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center}
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:1.05rem 1.9rem;min-height:52px;border:2px solid transparent;border-radius:0;
  background:var(--ton);color:#fff;cursor:pointer;text-align:center;
  font-weight:800;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  touch-action:manipulation;
  transition:background var(--kurz) ease,color var(--kurz) ease,border-color var(--kurz) ease,transform var(--kurz) ease;
}
/* Flach nach KMHP-Art. Kein Glanz, kein Schlagschatten, kein Anheben.
   Beim Überfahren ändert sich nur die Farbe: der Knopf wird satter, nicht
   schwächer. Weniger Bewegung wirkt teurer als mehr. */
.knopf{position:relative}
.knopf:hover{background:var(--ton-tief);border-color:var(--ton-tief)}
.knopf:active{transform:none}

/* Umriss: bleibt durchsichtig, nimmt beim Überfahren nur einen Hauch an. */
.knopf--linie{background:transparent;color:var(--ink);border-color:rgba(13,26,19,.26)}
.knopf--linie:hover{background:var(--ton-hell);border-color:var(--ton);color:var(--ton)}

/* Auf dunklem Grund und über Bildern. Beide Fassungen sind sattes Weiß:
   der erste gefüllt, der zweite als klare weiße Linie. Vorher war die
   Linie halbdurchsichtig und verschwand über hellen Bildstellen. */
.knopf--hell{background:#fff;color:var(--ink);border-color:#fff}
.knopf--hell:hover{background:rgba(255,255,255,.88);color:var(--ink);border-color:rgba(255,255,255,.88)}
.knopf--hell-linie{background:rgba(255,255,255,.1);color:#fff;
  border-color:#fff;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.knopf--hell-linie:hover{background:rgba(255,255,255,.22);color:#fff;
  border-color:#fff}
.knopf--klein{padding:.62rem 1.15rem;min-height:var(--griff);font-size:.68rem;letter-spacing:.12em}
.knopf[disabled]{opacity:.4;pointer-events:none}

/* Der Anruf-Knopf in der Kopfzeile ist bewusst nicht grün: Tinte statt
   Markenfarbe, damit die Leiste ruhig bleibt. Solange die Leiste
   durchsichtig über dem Kopfbild liegt, wird er zur Glasfläche, sonst
   stünde ein dunkler Klotz auf dunklem Video. */
/* Der Knopf wächst mit den Menüwörtern mit, sonst wirkt er daneben klein. */
.kopf .navi>.knopf{font-size:clamp(.72rem,.82vw,.82rem);letter-spacing:.1em}
.kopf .knopf{background:var(--ink);border-color:var(--ink);color:#fff}
.kopf .knopf:hover{background:#24382C;border-color:#24382C}
/* Dunkles Glas, nicht helles. Über dem Luftbild steht der Knopf im
   Herbstlaub, und eine 8 Prozent helle Scheibe darüber nahm dessen Farbe
   an: Der Knopf sah beige aus. Dunkel getönt und entsättigt bleibt er
   über jedem Bildinhalt neutral. */
body.hat-hero .kopf:not(.fest) .knopf{
  background:rgba(9,17,12,.34);border-color:rgba(255,255,255,.44);color:#fff;
  -webkit-backdrop-filter:blur(10px) saturate(.6);backdrop-filter:blur(10px) saturate(.6)}
body.hat-hero .kopf:not(.fest) .knopf:hover{
  background:rgba(9,17,12,.55);border-color:#fff}

/* ------------------------------------------------------------- Kopfzeile
   Die Kopfzeile liegt als Glasscheibe über dem Inhalt. Über dem dunklen
   Kopfbild ist sie dunkel getönt und trägt das helle Logo; sobald man am
   Bild vorbei ist, wird sie hell und das Logo wechselt mit. Ohne diesen
   Wechsel stünde dunkle Schrift auf einem dunklen Video. */
.kopf{
  position:fixed;top:0;left:0;right:0;z-index:60;color:var(--ink);
  background:rgba(255,255,255,.76);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-bottom:1px solid rgba(13,26,19,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 34px -26px rgba(13,26,19,.55);
  transition:transform var(--mittel) var(--weich),background-color var(--mittel) ease,
             border-color var(--mittel) ease,color var(--mittel) ease,box-shadow var(--mittel) ease;
}
/* Auf Seiten mit Kopfbild ist die Leiste von der ersten Sekunde an
   unsichtbar, das steht hier im CSS und nicht im JavaScript. Vorher hing
   der Zustand an einem Übergang und am Zeitpunkt, zu dem das Skript lief;
   je nachdem blitzte kurz eine getönte Scheibe über dem Video auf. */
body.hat-hero .kopf{
  color:#fff;background:transparent;border-bottom-color:transparent;
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
}
/* Lichtschirm unter der Kopfzeile.
   Weiße Schrift auf bewegtem Bild ist nur so lange lesbar, wie das Bild
   dunkel bleibt. Im Luftbild liegt oben rechts sonnenbeschienenes Laub,
   dort fielen die Menüwörter auf 1,9:1, also klar durch. Der Schirm hält
   seine Stärke über die Höhe der Zeile und läuft erst darunter aus, damit
   keine sichtbare Kante entsteht. Gemessen kommen die Wörter damit auf
   5,5:1. Sobald die Zeile zu hellem Glas wird, ist er weg. */
body.hat-hero .kopf:not(.fest)::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:-1;
  height:calc(var(--kopf-hoehe) + 68px);pointer-events:none;
  background:linear-gradient(to bottom,
    rgba(9,17,12,.54) 0%, rgba(9,17,12,.48) 56%, rgba(9,17,12,0) 100%);
}
/* Erst wenn das Bild durchgescrollt ist, wird daraus helles Glas. */
body.hat-hero .kopf.fest{
  color:var(--ink);background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(22px) saturate(180%);
  backdrop-filter:blur(22px) saturate(180%);
  border-bottom-color:rgba(13,26,19,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 12px 34px -26px rgba(13,26,19,.55);
}

.kopf--weg{transform:translateY(-101%)}
/* Die Kopfzeile nutzt die volle Bildschirmbreite: Logo ganz links, Menü
   ganz rechts. Der Inhalt darunter bleibt im 1440er-Rahmen, die Leiste
   läuft bewusst breiter, damit oben Luft entsteht. Nach außen etwas mehr
   Rand als bei den Textspalten, sonst klebte das Menü am Bildschirmrand. */
.kopf__innen{
  max-width:none;margin:0;min-height:var(--kopf-hoehe);
  padding:.6rem clamp(1.3rem,4.5vw,4.5rem);
  display:flex;align-items:center;gap:1.5rem;
}
/* Der Schriftzug trägt die Kopfzeile, deshalb groß und mit Kontur.
   Die gestapelten Schlagschatten legen eine dünne dunkle Linie um die
   Buchstaben; auf einem hellen Bildausschnitt bliebe der weiße Schriftzug
   sonst kraftlos. */
.marke-logo{display:flex;align-items:center;flex-shrink:0;
  min-height:var(--griff);touch-action:manipulation}
.marke-logo img{height:clamp(42px,5.4vw,68px);width:auto;
  transition:filter var(--mittel) ease}
.marke-logo .logo-hell{display:none;
  filter:
    drop-shadow(0 1px 0 rgba(8,16,12,.85)) drop-shadow(0 -1px 0 rgba(8,16,12,.55))
    drop-shadow(1px 0 0 rgba(8,16,12,.7))  drop-shadow(-1px 0 0 rgba(8,16,12,.7))
    drop-shadow(0 8px 26px rgba(8,16,12,.6));
}
.marke-logo .logo-dunkel{display:block}
body.hat-hero .kopf .marke-logo .logo-hell{display:block}
body.hat-hero .kopf .marke-logo .logo-dunkel{display:none}
.marke-logo--wappen img{height:40px}
/* Die Bereichslogos von Tiefbau und Immobilien sind kompakter als die
   MASTELL-Wortmarke. Damit sie deutlich größer im Kopf stehen können, ist die
   Kopfleiste auf diesen beiden Seiten höher gesetzt, alle darauf gerechneten
   Maße (Hero-Versatz, Sprungleiste, Sprungmarken) ziehen über die Variable
   automatisch mit, nichts verrutscht. Das Logo ist an die Kopfhöhe gekoppelt
   und das senkrechte Polster zurückgenommen, damit es die Leiste füllt. */
body.seite-tiefbau,
body.seite-immo{--kopf-hoehe:120px}
@media(max-width:1300px){
  body.seite-tiefbau,
  body.seite-immo{--kopf-hoehe:94px}
}
body.seite-tiefbau .kopf__innen,
body.seite-immo .kopf__innen{padding-block:.2rem}
body.seite-tiefbau .marke-logo img,
body.seite-immo .marke-logo img{height:calc(var(--kopf-hoehe) - 8px)}

.navi{display:flex;align-items:center;gap:clamp(1rem,2vw,1.9rem);margin-left:auto}
.navi>a{
  font-size:clamp(.82rem,.95vw,.94rem);font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;
  position:relative;padding-block:.3rem;white-space:nowrap;color:inherit;
}
.navi>a:not(.knopf)::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform var(--mittel) var(--weich);
}
.navi>a:not(.knopf):hover::after{transform:scaleX(1)}
.navi>a[aria-current="page"]{color:var(--ton)}
.navi>a[aria-current="page"]::after{transform:scaleX(1)}
body.hat-hero .kopf .navi>a[aria-current="page"]{color:#fff}
/* Über dem Bild braucht die Schrift eine Abdunklung, sonst frisst ein
   heller Bildausschnitt sie auf. */
body.hat-hero .kopf .navi>a{text-shadow:0 1px 12px rgba(8,16,12,.75)}
body.hat-hero .kopf.fest .marke-logo .logo-hell{display:none}
body.hat-hero .kopf.fest .marke-logo .logo-dunkel{display:block}
body.hat-hero .kopf.fest .navi>a{text-shadow:none}
body.hat-hero .kopf.fest .navi>a[aria-current="page"]{color:var(--ton)}

.menue-schalter{
  display:none;margin-left:auto;width:46px;height:46px;padding:0;
  background:rgba(255,255,255,.1);border:1px solid currentColor;cursor:pointer;
  color:inherit;touch-action:manipulation;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.menue-schalter span{display:block;width:20px;height:2px;background:currentColor;
  transition:transform var(--mittel) var(--weich),opacity var(--kurz) ease}
.menue-schalter[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menue-schalter[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* Seit dem siebten Menüpunkt („Aktuelles") passt die Leiste unterhalb von
   etwa 1300 px nicht mehr neben das Logo, sie ragte über den Rand hinaus.
   Darunter übernimmt deshalb das Klappmenü. */
@media(max-width:1300px){
  .menue-schalter{display:flex}
  .navi{
    /* Höhe über Viewport-Einheiten, nicht über bottom:0. Der Kopf trägt einen
       backdrop-filter und ist damit der Bezugsrahmen für dieses fixierte Menü;
       ein bottom:0 würde sich am kurzen Kopf ausrichten und das Menü auf
       Kopfhöhe zusammenschrumpfen. 100dvh löst das unabhängig davon. */
    position:fixed;top:calc(var(--kopf-hoehe) + 1px);left:0;right:0;bottom:auto;
    height:calc(100vh - var(--kopf-hoehe) - 1px);
    height:calc(100dvh - var(--kopf-hoehe) - 1px);
    background:rgba(255,255,255,.93);
    -webkit-backdrop-filter:blur(26px) saturate(180%);
    backdrop-filter:blur(26px) saturate(180%);
    color:var(--ink);
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    padding:1.5rem clamp(1.1rem,4vw,3.5rem) 3rem;margin:0;
    transform:translateY(-8px);opacity:0;pointer-events:none;
    transition:opacity var(--mittel) ease,transform var(--mittel) var(--weich);
    overflow-y:auto;
  }

  .navi.offen{transform:none;opacity:1;pointer-events:auto}
  .navi>a{font-size:1.5rem;letter-spacing:-.03em;padding:1.05rem 0;
    border-bottom:1px solid var(--haar);text-transform:uppercase}
  .navi>a:not(.knopf)::after{display:none}
  .navi>.knopf{margin-top:1.6rem;font-size:.76rem;letter-spacing:.14em;border-bottom:0}
}

/* ----------------------------------------------------- Sprungleiste (lang)
   Zweite Ebene unter der Kopfzeile auf langen Unterseiten. Sie hängt sich
   unter die Kopfzeile, und wenn die beim Herunterscrollen wegfährt, rückt
   die Leiste nach oben nach. Ohne das klaffte dort eine leere Zeile.
   Der Übergang auf „top" ist unbedenklich: Solange die Leiste noch im
   normalen Fluss steht, hat der Wert gar keine Wirkung. */
.sprung{
  position:sticky;top:var(--kopf-hoehe);z-index:55;background:var(--papier-warm);
  border-bottom:1px solid var(--haar);overflow-x:auto;scrollbar-width:none;
  transition:top var(--mittel) var(--weich);
}
html.kopf-weg .sprung{top:0}
.sprung::-webkit-scrollbar{display:none}
.sprung__innen{max-width:none;margin:0 auto;padding-inline:clamp(1.1rem,4vw,3.5rem);
  display:flex;gap:clamp(1.3rem,2.4vw,2.1rem);white-space:nowrap}
/* Dieselbe Schrift wie im Hauptmenü, nur eine Spur kleiner. Vorher stand
   hier gesperrtes Monospace in 10,5 px Grau, das war auf Armlänge nicht
   mehr zu lesen. Die Farbe ist bewusst dieselbe Tinte wie oben: Eine
   Zweitebene wird durch Größe eingeordnet, nicht durch Ausgrauen. */
.sprung a{
  font-size:clamp(.8rem,.92vw,.9rem);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;
  padding:1.05rem 0;color:var(--ink);border-bottom:2px solid transparent;
  transition:color var(--kurz) ease,border-color var(--kurz) ease;
}
.sprung a:hover{color:var(--ton)}
.sprung a.hier{color:var(--ton);border-bottom-color:var(--ton)}

/* ------------------------------------------------------------------- Hero */
/* dvh statt vh: Auf dem Handy zählt vh die eingeblendete Adressleiste mit,
   der Kopfbereich springt dann beim Scrollen.
   Das negative margin-top holt den Platz zurück, den die schwebende
   Kopfzeile dem Körper abgezogen hat, das Bild läuft unter das Glas. */
/* Vollbild. Das Bild läuft ungeteilt von oben bis unten durch. */
.hero{position:relative;min-height:100vh;min-height:100dvh;
  margin-top:calc(var(--kopf-hoehe) * -1);
  display:flex;align-items:flex-end;
  border-bottom:0;overflow:hidden;background:var(--ink);isolation:isolate}
/* Die Tiefbau-Startseite ist ein eigener Einseiter, der Hero füllt daher
   die volle Bildschirmhöhe wie eine Startseite, damit unten kein weißer
   Rand stehen bleibt. */
.hero--seite{min-height:100vh;min-height:100dvh}
/* Bildlook statt bloßer Abdunklung. Leicht entsättigt, etwas mehr Kontrast,
   eine Spur abgedunkelt: So sieht Material aus, das durch eine Kamera ging,
   nicht wie ein Video mit einer grauen Scheibe davor. */
.hero__medium{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:contrast(1.1) saturate(.92) brightness(.99)}

/* Kopfbild-Diaschau. Der Container trägt zusätzlich die Klasse .hero__medium
   und erbt dadurch Lage, Bildlook und den Parallax des Films. Darin liegen die
   Einzelbilder gestapelt und blenden sich ruhig ineinander über. Die Verläufe
   und das Korn darüber tragen weiterhin die Lesbarkeit der Schrift. Ohne
   JavaScript zeigt sich allein das erste Bild, das von Anfang an „da" trägt. */
.hero__diaschau{overflow:hidden;background:var(--ink)}
.hero__dia{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .9s var(--weich);
  /* Grundlage = Endlage der Ken-Burns-Bewegung. Verliert ein Bild „da",
     bleibt es genau dort stehen, es entsteht also kein Rücksprung, während
     das nächste sich darüberlegt. Der Schwenk bleibt innerhalb der 8 %
     Zoomreserve, damit nie ein Bildrand frei liegt. */
  transform:scale(1.045) translate3d(-.7%,-.5%,0)}
.hero__dia.da{opacity:1;animation:hero-kenburns 4.5s ease-out both}
/* Sehr ruhiger Zoom mit leichtem Schwenk auf dem aktiven Bild, gibt der Fläche
   dezentes Leben, ohne unruhig zu wirken. */
@keyframes hero-kenburns{
  from{transform:scale(1.004) translate3d(0,0,0)}
  to{transform:scale(1.045) translate3d(-.7%,-.5%,0)}
}
@media(prefers-reduced-motion:reduce){
  .hero__dia{transition:none;transform:none;animation:none}
}

/* Filmkorn. Ohne Korn zeigen große Farbverläufe über Video sichtbare Stufen,
   und die Fläche wirkt digital glatt. Das Muster liegt als winziges SVG in
   der Datei, es geht dafür keine Anfrage nach draußen. */
.hero__korn{
  position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.055;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23k)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* Lichteinfall: ein weicher Schein von links oben, wie durch ein Fenster.
   Nur noch oben, wo keine Schrift steht. Der zweite Schein lag früher
   unten rechts, also genau unter den Knöpfen, und hellte den Grund dort
   auf, wo er ruhig sein muss. */
.hero::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(105% 60% at 12% 8%,rgba(255,255,255,.12),transparent 62%);
  mix-blend-mode:screen;
}
/* Zwei Verläufe für die Lesbarkeit, wie auf einem Filmplakat.
   Der senkrechte trägt den unteren Teil, dort steht der Text und das
   geschnitzte Schild im Film bringt selbst Buchstaben mit.
   Der seitliche senkt nur die linke Spalte ab, in der die Schlagzeile
   steht, und läuft zur Bildmitte aus. Gemessen an der ersten Filmbild:
   ohne ihn fällt die Schlagzeile an der hellsten Stelle auf 3,2:1,
   mit ihm hält sie 4,9:1. Ein flächiger Abdunkler über das ganze Bild
   hätte dasselbe erreicht, aber die rechte Bildhälfte mit erschlagen. */
.hero::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(to top,
      rgba(9,17,12,.72) 0%,
      rgba(9,17,12,.64) 26%,
      rgba(9,17,12,.5) 52%,
      rgba(9,17,12,.26) 78%,
      rgba(9,17,12,.05) 100%),
    linear-gradient(105deg,
      rgba(9,17,12,.46) 0%,
      rgba(9,17,12,.2) 34%,
      rgba(9,17,12,0) 62%);
}
/* Randabstand wie in der Kopfzeile, nicht wie im Fließtext. Das „G" von
   GARTENBAU steht damit auf derselben senkrechten Linie wie das Logo
   darüber, und die Basislinie endet rechts genau unter dem Knopf.
   Vorher lagen beide neun Pixel auseinander, das sieht man. */
.hero__innen{position:relative;z-index:2;width:100%;color:#fff;
  max-width:none;
  padding-inline:clamp(1.3rem,4.5vw,4.5rem);
  /* Das obere Polster kennt die Höhe der Kopfzeile. Der Inhalt sitzt am
     unteren Rand, oben greift das Polster also nur dann, wenn der Text
     hoch hinaufreicht: auf kleinen und flachen Bildschirmen. Vorher lief
     dort die erste Zeile der Schlagzeile hinter das Logo. */
  padding-block:calc(var(--kopf-hoehe) + clamp(.6rem,2.5vw,1.6rem))
               clamp(3rem,8vh,5.5rem)}
/* Unter 860 Pixeln klebt die Anrufleiste über den letzten 56 Bildpunkten
   des Bildschirms. Das Kopfbild reicht aber über die volle Höhe, also lag
   die Belegleiste darunter und war schlicht nicht zu sehen. */
@media(max-width:860px){
  .hero__innen,
  .hero--seite .hero__innen{padding-bottom:calc(var(--klebe-hoehe) + clamp(.9rem,2.4vh,1.5rem))}
}
/* Etwas mehr Laufweite, seit die Schrift kleiner ist, sonst zerfällt
   „Kanal, Kabel und Hausanschlüsse" in vier kurze Zeilen. */
/* Voll deckendes Weiß statt eines Verlaufs in der Schrift. Der Verlauf
   nahm den Buchstaben nach unten hin bis zu einem Viertel Deckkraft, was
   über einem unruhigen Bild matschig wirkte. */
.hero h1{max-width:17ch;margin-bottom:var(--r2);color:#fff;
  text-shadow:0 2px 26px rgba(9,17,12,.5)}
/* Die Schlagzeile der Startseite trägt die Fläche allein, sie darf
   deutlich größer laufen als eine Überschrift im Fließtext. Der zweite
   Wert deckelt sie an der Bildschirmhöhe: Auf flachen Bildschirmen
   schöbe sie sonst die Basislinie aus dem Bild.
   Kein Leuchtschatten: Der würde an der Zeilenmaske abgeschnitten und
   ergäbe eine sichtbare Kante. Für den Kontrast sorgt der Verlauf. */
.hero__titel{
  max-width:none;
  /* Größe an der gemessenen Satzbreite ausgerichtet. „Gartenbau." ist die
     längste Zeile und läuft in Archivo rund 6,9 mal so breit wie hoch.
     Die Formel füllt davon etwa 93 Prozent der Spalte, der Rest bleibt als
     Luft nach rechts stehen. Der zweite Wert deckelt an der Bildschirm-
     höhe, sonst schöbe die Zeile auf flachen Schirmen die Basislinie
     aus dem Bild. */
  font-size:min(clamp(1.9rem,calc(13.4vw - 8px),7rem),13.5vh);
  letter-spacing:-.045em;line-height:.94;
  text-shadow:none;margin-bottom:clamp(1.1rem,2vh,1.6rem);
}
.hero__titel .hzeile>span{white-space:nowrap}
.hero h1 em{color:var(--ton-leucht)}
/* Die drei Gewerke stehen gleich schwer. Ein Gewichtswechsel im Wort
   funktioniert nur, wenn die Trennstelle eine ist: GARTEN und TIEF sind
   Wörter, IMMO ist keins. Zwei saubere Trennungen und eine willkürliche
   sehen aus wie ein Versehen, also trägt jetzt jede Zeile dasselbe
   Gewicht und wirkt als Block.
   Farbe steckt in der Schlagzeile keine: Über bewegtem Bild wirkt sie
   schnell bunt, und eine eingefärbte Zeile hätte die drei Gewerke
   gegeneinander gewichtet statt sie gleichzustellen. */

.hero__unter{
  max-width:45ch;font-size:clamp(1.02rem,1.4vw,1.22rem);line-height:1.58;
  color:rgba(255,255,255,.92);margin-bottom:var(--r3);
}
/* Zeilenmaske für die Schlagzeile. Jede Zeile sitzt in einem Fenster, aus
   dem sie beim Laden hochfährt. Die Anfangslage setzt ausschließlich das
   Skript, damit ohne JavaScript nichts unsichtbar bleibt. */
.hero__titel .hzeile{display:block;overflow:hidden;padding-bottom:.06em;margin-bottom:-.06em}
.hero__titel .hzeile>span{display:block}

/* Unter 860 Pixeln steht der Text enger, dort spart der kleinere
   Abstand unter der Unterzeile die nötige Luft. */
@media(max-width:859px){
  .hero__unter{margin-bottom:1.25rem}
}
/* Fokusring als Schein statt als harter Rahmen */
:focus-visible{outline-color:var(--ton);box-shadow:0 0 0 4px var(--schimmer)}
.hero__notiz{margin-top:var(--r2);font-family:ui-monospace,monospace;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ton-leucht)}

/* Seitenkopf für Seiten ohne Bild */
.seitenkopf{padding-block:clamp(3rem,6vw,var(--r5)) clamp(2rem,4vw,var(--r4));
  border-bottom:2px solid var(--linie)}
.seitenkopf h1{font-size:clamp(2.2rem,6vw,4.6rem);max-width:16ch}

/* ------------------------------------------------------------------ Fuß */
.fuss{background:var(--ink);color:rgba(255,255,255,.66);padding-block:clamp(2.5rem,5vw,var(--r5))}
/* Der Fuß nutzt dieselbe volle Breite und denselben Rand wie alle Sektionen
   (siehe .huelle), damit Inhalt und Fuß bündig laufen. */
.fuss__oben{display:grid;gap:var(--r3);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,175px),1fr))}
.fuss__oben>div:first-child{grid-column:1/-1}
@media(min-width:900px){.fuss__oben>div:first-child{grid-column:span 2}}
.fuss__logo{height:30px;width:auto;margin-bottom:var(--r2)}
/* Die Wortmarken (MASTELL, Gartenbau) tragen bei 30px gut. Die kompakten,
   detaillierten Bereichslogos (Tiefbau, Immobilien) wären so zu klein, daher
   etwas höher, damit sie im Fuß lesbar bleiben. */
.fuss__logo--bild{height:48px}
.fuss__wort{font-size:.88rem;line-height:1.62;max-width:38ch;margin:0}
/* Die Spaltentitel sind h2, damit die Stufenfolge nicht springt.
   Aussehen bleibt klein und ruhig, Semantik und Optik sind zweierlei. */
.fuss h2{margin:0 0 .9rem;color:#fff;font-family:ui-monospace,monospace;
  font-size:.66rem;font-weight:600;letter-spacing:.18em;line-height:1.4;
  text-transform:uppercase}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;font-size:.88rem}
.fuss a{transition:color var(--kurz) ease}
.fuss a:hover{color:#fff}
/* Die Listen-Links sind als Textzeile nur ~15 px hoch. Innenabstand hebt das
   Tippziel über 24 px (WCAG 2.5.8), der negative Außenabstand hält den
   optischen Zeilenrhythmus der Spalten unverändert. */
.fuss__oben ul a{display:inline-flex;align-items:center;min-height:26px;padding:.32rem 0;margin:-.32rem 0}
.fuss__unten{margin-top:var(--r4);padding-top:var(--r2);
  border-top:1px solid rgba(255,255,255,.16);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;
  font-family:ui-monospace,monospace;font-size:.64rem;letter-spacing:.12em;text-transform:uppercase}
/* Die zwei Rechtslinks stehen nebeneinander und waeren als reine Textzeile
   nur 17 px hoch. Innenabstand bringt das Tippziel ueber 24 px (WCAG 2.5.8),
   der negative Aussenabstand haelt die Zeile optisch an der alten Stelle. */
.fuss__unten nav{display:flex;gap:1.3rem;margin:-.45rem 0}
.fuss__unten nav a{display:inline-flex;align-items:center;min-height:26px;padding:.45rem 0}
/* Agenturhinweis: gehört sichtbar, aber nicht in dieselbe Reihe wie die
   Pflichtangaben. Etwas gedämpfter als der Rest der Zeile, bleibt aber
   klar lesbar. Der Name selbst ist heller als das Wort davor, sonst
   erkennt niemand, dass dort ein Link sitzt. */
.fuss__bau{color:rgba(255,255,255,.46);letter-spacing:.1em}
.fuss__bau a{
  color:rgba(255,255,255,.72);
  display:inline-flex;align-items:center;min-height:26px;
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:rgba(255,255,255,.3);
  transition:color var(--kurz) ease,text-decoration-color var(--kurz) ease;
}
.fuss__bau a:hover{color:#fff;text-decoration-color:#fff}

/* ------------------------------------------------------ Handyleiste unten */
.handyleiste{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:1fr 1fr;border-top:2px solid var(--linie);
  padding-bottom:env(safe-area-inset-bottom);
}
.handyleiste .knopf{border-radius:0;border-width:0;min-height:56px;font-size:.7rem}
.handyleiste .knopf--linie{background:var(--papier);border-right:1px solid var(--haar)}
/* Auf dem Handy sichtbar, aber erst nach der zweiten Sektion. Bis dahin
   sitzt sie unter der Bildkante und fährt dann weich herauf. Die Klasse
   cta-frei setzt kern.js beim Scrollen. */
@media(max-width:860px){
  .handyleiste{
    display:grid;transform:translateY(110%);
    transition:transform var(--mittel) var(--weich);
  }
  body.cta-frei .handyleiste{transform:none}
  body{padding-bottom:var(--klebe-hoehe)}
}

/* ---------------------------------------------------------------- Bewegung
   Verborgen wird nur, wenn JavaScript läuft. Ohne JavaScript steht alles
   sofort da, ein verborgener Abschnitt ist schlimmer als einer ohne
   Animation. Dazu eine Notbremse in kern.js. */
.js [data-auf]{opacity:0;transform:translateY(26px);
  transition:opacity var(--lang) var(--weich),transform var(--lang) var(--weich)}
.js [data-auf].da{opacity:1;transform:none}
/* Sobald GSAP übernimmt, muss der CSS-Übergang schweigen, sonst ziehen
   zwei Systeme am selben Element. */
.gsap [data-auf]{transition:none}

/* ------------------------------------------------------- Weiches Scrollen
   Vier Regeln, die Lenis braucht. Bewusst hier eingebaut statt als eigene
   Datei geladen: eine Anfrage weniger. Lenis übernimmt auch die
   Sprungmarken, deshalb wird das native Weichscrollen dann abgeschaltet. */
html.lenis,html.lenis body{height:auto}
html.lenis{scroll-behavior:auto}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:clip}
.lenis.lenis-smooth iframe{pointer-events:none}
/* Staffelung 50 ms je Element. Weiter auseinander wirkt es zäh. */
.js [data-verzug="1"]{transition-delay:.05s}
.js [data-verzug="2"]{transition-delay:.1s}
.js [data-verzug="3"]{transition-delay:.15s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js [data-auf]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important;scroll-behavior:auto!important}
}

/* Für Screenreader, aber nicht sichtbar */
.nur-lesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.zum-inhalt{position:absolute;left:1rem;top:-100px;z-index:200;background:var(--ink);color:#fff;
  padding:.8rem 1.2rem;font-weight:800;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  transition:top var(--kurz) ease}
.zum-inhalt:focus{top:1rem}

/* -------------------------------------------------------------- Drucken */
@media print{
  .kopf,.sprung,.handyleiste,.fuss__oben,video,.hero__medium,.menue-schalter{display:none!important}
  body{background:#fff;color:#000;padding:0}
  .hero,.abschnitt{min-height:0;border:0;padding-block:1rem}
  .hero::after{display:none}
  .hero__innen{color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;word-break:break-all}
  .js [data-auf]{opacity:1!important;transform:none!important}
}