/* ------------------------------------------------------------------
   Sanwald-Group — eigene Schicht ueber dem Basis-Mirror.
   Regel R1: Das Original-CSS des Mirrors bleibt unangetastet. Alles,
   was Sanwald aendert, steht ausschliesslich hier.

   W1 (King-Entscheid): Die Schrift-DATEIEN kommen aus dem Fonts-Mirror des Lagers,
   das typografische SYSTEM (Groessen, Zeilenhoehen, Gewichte, clamp-Werte)
   bleibt vom Basis-Mirror. Darum werden hier NUR die beiden
   Familien-Variablen ueberschrieben, keine Groessen.

   Lizenz-Merker: Aeonik und Feature Deck sind fremdlizenzierte Schriften.
   Vor dem Livegang ist eine Webfont-Lizenz auf den Kunden noetig.
   Siehe _plan/COPY-SLOTS.md und den Bericht.
   ------------------------------------------------------------------ */

@font-face{font-family:"Aeonik";src:url("/assets/fonts/Aeonik-Regular.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/assets/fonts/Aeonik-Medium.otf") format("opentype");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/assets/fonts/Aeonik-RegularItalic.ttf") format("truetype");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Aeonik";src:url("/assets/fonts/Aeonik-MediumItalic.ttf") format("truetype");
  font-weight:500;font-style:italic;font-display:swap}

@font-face{font-family:"Feature Deck";src:url("/assets/fonts/FeatureDeck-Regular.otf") format("opentype");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Feature Deck";src:url("/assets/fonts/FeatureDeck-Medium.otf") format("opentype");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Feature Deck";src:url("/assets/fonts/FeatureDeck-RegularItalic.otf") format("opentype");
  font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Feature Deck";src:url("/assets/fonts/FeatureDeck-MediumItalic.otf") format("opentype");
  font-weight:500;font-style:italic;font-display:swap}

:root{
  /* ROLLENTAUSCH 2026-08-22 (King-Ansage, Aenderung zu W1).
     Bis dahin trug Feature Deck (Serif) die grossen Ueberschriften -- das ist
     die Satzlogik der Basis. Neu, nach Vorbild des Fonts-Mirrors: AEONIK traegt alles, Feature
     Deck ist nur noch der kursive Akzent fuer einzelne Woerter INNERHALB von
     Ueberschriften und die Wortmarke.
     das Groessensystem der Basis bleibt unangetastet -- getauscht werden nur die
     beiden Familien-Variablen. */
  --font-family-primary:"Aeonik","Helvetica Neue",Helvetica,Arial,sans-serif;
  --font-family-content:"Aeonik","Helvetica Neue",Helvetica,Arial,sans-serif;
  /* Die Akzentschrift bekommt eine eigene Variable, damit sie gezielt
     gesetzt werden kann und nirgends versehentlich flaechig landet. */
  --font-family-akzent:"Feature Deck","Georgia","Times New Roman",serif;
}

/* Der Akzent: kursive Woerter innerhalb von Ueberschriften. Der Basis-Mirror
   zeichnet genau diese Woerter mit <em> aus -- daran haengen wir uns an,
   statt Klassen zu erfinden. Fliesstext-Kursive bleibt Aeonik. */
h1 em, h2 em, h3 em, h4 em,
[class*="__title"] em, [class*="__heading"] em, [class*="ButtonAnimatedText"] em{
  font-family:var(--font-family-akzent);
  font-style:italic;
  /* Serif und Sans laufen unterschiedlich hoch -- der Akzent bekommt etwas
     mehr Groesse, damit die Zeile optisch ruhig bleibt. */
  font-size:1.06em;
  letter-spacing:-.005em;
}

/* ------------------------------------------------------------------
   Wortmarke des Basis-Mirrors stilllegen.

   Die grosse Wortmarke in Hero und Footer wird NICHT aus dem DOM, sondern
   per WebGL auf ein <canvas> gezeichnet. Die Buchstaben stammen aus einem
   MSDF-Bitmap-Atlas (webgl/logo/font.json + font.png), der ausschliesslich
   die vier Glyphen V, E, R und O enthaelt — es ist die Logo-Schrift der
   Quellfirma, kein vollstaendiges Alphabet. "SANWALD" laesst sich damit
   nicht setzen.

   Bis der Atlas in Stufe 7 durch einen eigenen ersetzt ist, wird das Canvas
   ausgeblendet. Im Hero liegt darunter bereits die SVG-Wortmarke
   (/brand.svg#logo, auf Sanwald umgestellt) und wird dadurch sichtbar.
   Im Footer entfaellt die Flaeche ersatzlos.
   ------------------------------------------------------------------ */

[class*="MainHero"][class*="__logo"] canvas{ display:none !important; }
[class*="MainHero"][class*="__logo"] svg{ opacity:1 !important; visibility:visible !important; }
/* Fusszeile: volles Logo MIT Unterzeile.
   Erster Versuch war, den ausgeblendeten Knoten der WebGL-Wortmarke sichtbar
   zu machen und ihm das Logo als Hintergrund zu geben. Damit mountet die
   Szene aber wieder ein Canvas darauf -- gemessen: Canvas 0 -> 1 auf vier
   Routen, ohne dass eine einzige WebGL-Datei geladen wird. Ein unbenutztes
   Canvas im Baum ist kein guter Tausch fuer ein Hintergrundbild.
   Deshalb bleibt der Knoten aus, und das Logo haengt an der Rechtszeile. */
[class*="RootLayoutFooter"][class*="__scene"]{ display:none !important; }
/* Revision 1: Die Rechtszeile traegt kein Logo mehr. Der Basis-Mirror stellt
   an dieser Stelle die Marke GROSS ueber die volle Breite (dort als
   WebGL-Szene mit Bitmap-Atlas). Denselben Auftritt liefert hier ein
   eigener Block mit der echten Vektormarke -- ohne WebGL, ohne Canvas,
   ohne fremden Schrift-Atlas. Der Szenenknoten bleibt aus. */
/* Revision 2, Block 4 (2026-09-14) -- Fuss-Wortmarke zweizeilig.
   Kunden-Screenshot aus Safari: "SANWALD" rechts angeschnitten, das D am
   Fensterrand beschnitten.

   URSACHE, gemessen: Die bisherige Fassung setzte die Schriftgroesse auf
   Bandbreite / 4,3617 -- die einmal gemessene Tintenbreite von "SANWALD" in
   AEONIK. Die Laufzeit-"Messung" las die Breite eines display:block-
   Elements, also die Bandbreite und nie die Textbreite; die Groesse war damit
   fest gerechnet. Rendert der Browser das Wort in der Ersatzschrift (Aeonik
   noch nicht geladen oder blockiert), laeuft es 30 px (1440) bzw. 25 px
   (1280) ueber das Band, und dessen overflow:hidden schneidet das D ab.

   NEU: zwei Zeilen, gestaffelt -- SANWALD, darunter GROUP, dessen linke
   Kante unter dem N beginnt. Die Groesse kommt allein aus CSS:
   clamp(72px, 11.5vw, 240px). "SANWALD" misst in Aeonik 4,495 em Vorschub
   (mit Tracking) -- gegengerechnet 662 / 744 / 992 / 1079 / 324 px bei
   1280 / 1440 / 1920 / 2560 / 390 px Fenster gegen 1220 / 1380 / 1728 /
   1728 / 350 px Inhaltsbreite; auch die breitere Ersatzschrift hat Luft.
   Die Marke steht im Raster des Fusses, buendig mit der Menueliste, nicht
   mehr in einem 100vw-Band.
   Einzug Zeile 2: N-Kasten 1,195 em + Tintenrand N 0,07 em - Tintenrand G
   0,04 em = 1,225 em (WebKit) bzw. 1,221 em (Chromium) -> 1,22 em. In em
   statt vw, damit die Kante auch an den clamp-Grenzen unter dem N bleibt.
   margin-left -0,04 em: der Tintenrand des S steht auf der Inhaltskante. */
.sw-fussmarke{
  grid-column:1 / -1;
  display:block; margin:0; padding:0;
  /* eigener Groessen-Bezug: die Schrift richtet sich nach der BANDBREITE,
     nicht nach der Fensterbreite -- nur so fuellt der Zug das Band auf jeder
     Stufe gleich (das Band ist bei 1920 und 2560 gleich breit). */
  container-type:inline-size;
  /* Finale Runde (2026-09-17, King): EINE Zeile "SANWALD GROUP". Die Groesse
     ist so bemessen, dass der Zug die Bandbreite fuellt statt anzuschneiden
     (gemessen bei 1440: 1.380 px Band, Zug 1.376 px) -- der Fuss wird dadurch
     rund 130 px niedriger. */
}
.sw-fussmarke__wort{
  display:block; margin-left:-.04em;
  font:var(--font-weight-regular) 1em/.82 var(--font-family-primary);
  /* NACH dem font-Kurzschreiben -- das setzt die Groesse sonst auf 1em zurueck.
     Zug = 7,983 x Schriftgrad (gemessen, Aeonik, alle Stufen gleich);
     12,4cqw laesst rund 1 % Luft, damit kein Anschnitt entsteht. */
  font-size:12.5cqw;
  letter-spacing:-.022em; text-transform:uppercase; white-space:nowrap;
  color:#F2F4F1;
}
/* Sicherheitsnetz, nicht die Loesung: nichts im Fuss darf die Seite seitlich
   aufschieben. */
footer[class*="RootLayoutFooter"]{ overflow-x:clip; }


/* ------------------------------------------------------------------
   Farbpalette — Stufe 8, Wahl an die Maschine delegiert (W4, King 2026-08-22).
   Gewaehlt: Variante A "FM-frisch". Begruendung im BUILD-BERICHT.
   Beide Proben liegen als Screenshot in _vergleich/farben/.
   Ein spaeterer Wechsel des Kings kostet genau diesen einen Block.
   ------------------------------------------------------------------ */
:root{
  --color-beige-100: #F2F4F1;   /* Grundflaeche hell, leicht gruenstichig-neutral */
  --color-beige-300: #DDE3DA;   /* zweite Flaeche */
  --color-grey-900:  #1A322A;   /* Text — Logo-Dunkelgruen, 12.38:1 auf Grundflaeche */
  --color-black:     #1A322A;
  --color-orange:    #616837;   /* Akzent — aus dem Logo-Oliv abgedunkelt, 5.36:1 / 4.54:1 */
  --color-grey-600:  #6B6F6B;   /* Sekundaertext */
}

/* ------------------------------------------------------------------
   Kontakt- und Bewerbungsformular. Werte aus der Token-Schicht des
   Basis-Mirrors, keine erfundenen Groessen.
   ------------------------------------------------------------------ */
.sw-kontakt{
  /* Der Abschnitt landet im Grid-Container des Basis-Mirrors -- volle Breite holen. */
  grid-column:1 / -1; width:100%;
  padding:clamp(7rem,12vw,12rem) clamp(1.25rem,5vw,5rem) clamp(4rem,8vw,8rem);
}
.sw-kontakt__grid{ display:grid; gap:clamp(2rem,5vw,5rem); grid-template-columns:1fr; max-width:1440px; margin:0 auto; }
@media (min-width:900px){ .sw-kontakt__grid{ grid-template-columns:1fr 1fr; } }
.sw-kontakt__h2{ margin:0 0 .6em;
  font:var(--font-weight-regular) clamp(30px,3.4vw,60px)/1.05 var(--font-family-primary);
  color:var(--color-grey-900); }
.sw-kontakt__text{ margin:0 0 2em; max-width:38ch;
  font:var(--font-weight-regular) 1.0625rem/1.55 var(--font-family-content);
  color:var(--color-grey-900); }
.sw-kontakt__daten{ margin:0; font:var(--font-weight-regular) 1rem/1.6 var(--font-family-content); }
.sw-kontakt__daten dt{ margin-top:1.1em; color:var(--color-grey-600);
  font-size:.8125rem; letter-spacing:.08em; text-transform:uppercase; }
.sw-kontakt__daten dd{ margin:.15em 0 0; color:var(--color-grey-900); }
.sw-kontakt__daten a{ color:inherit; text-underline-offset:.25em; }

.sw-form{ display:flex; flex-direction:column; gap:1.25rem; max-width:34rem; }
.sw-form__hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.sw-form__feld{ display:flex; flex-direction:column; gap:.4rem; }
.sw-form__feld label{ font:var(--font-weight-regular) .8125rem/1.2 var(--font-family-content);
  letter-spacing:.08em; text-transform:uppercase; color:var(--color-grey-600); }
.sw-form__feld input, .sw-form__feld textarea, .sw-form__feld select{
  font:var(--font-weight-regular) 1rem/1.5 var(--font-family-content);
  color:var(--color-grey-900); background:transparent;
  border:0; border-bottom:1px solid var(--color-grey-300);
  padding:.55rem 0; border-radius:0; }
.sw-form__feld input:focus-visible, .sw-form__feld textarea:focus-visible,
.sw-form__feld select:focus-visible, .sw-form__senden:focus-visible{
  outline:2px solid var(--color-orange); outline-offset:3px; }
.sw-form__feld textarea{ resize:vertical; }
.sw-form__hinweis{ margin:.4rem 0 0;
  font:var(--font-weight-regular) .875rem/1.5 var(--font-family-content);
  color:var(--color-grey-600); }
.sw-form__hinweis a{ color:inherit; }
.sw-form__senden{ align-self:flex-start; cursor:pointer;
  font:var(--font-weight-regular) .9375rem/1 var(--font-family-content);
  letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--color-orange);
  border:0; padding:1rem 2rem; }
.sw-form__senden:hover{ opacity:.9; }

/* Bewerbungsformular auf /stellenangebote/ -- haengt im Container des
   Basis-Mirrors unter der Stellenliste, gleiche Feldmechanik wie /kontakt/. */
/* NAV-014-Lauf, Modul 3 -- STREICHUNG NACH R5.
   Der untere Block "Jetzt bewerben / Kurz ausfuellen, wir melden uns."
   samt Knopf "Kontakt aufnehmen" entfaellt ersatzlos, auf dem Schirm
   wie auf dem Handy. Er doppelte den Knopf "JETZT BEWERBEN", der 157 px
   darueber steht (gemessen: y=1453 gegen y=1610) und auf dasselbe Ziel
   fuehrt. Der obere bleibt.
   Ausgeblendet statt aus dem Baum entfernt: der Block steht in SSR UND
   Nutzlast, ein Entfernen wuerde React beim Neuaufbau rueckgaengig
   machen. Die Regeln darunter bleiben stehen, damit der Block ohne
   diese eine Zeile wieder vollstaendig da waere. */
.sw-bewerbung{ display:none !important; }

.sw-bewerbung{ margin-top:clamp(4rem,8vw,7rem); padding-top:clamp(2.5rem,5vw,4rem);
  border-top:1px solid var(--color-grey-300); }
.sw-bewerbung__h2{ margin:0 0 .5em;
  font:var(--font-weight-regular) clamp(30px,3.4vw,60px)/1.05 var(--font-family-primary);
  color:var(--color-grey-900); }
.sw-bewerbung__text{ margin:0 0 2.5em; max-width:38ch;
  font:var(--font-weight-regular) 1.0625rem/1.55 var(--font-family-content);
  color:var(--color-grey-900); }
.sw-form__zusatz{ letter-spacing:0; text-transform:none; color:var(--color-grey-600); }

/* Der Basis-Mirror blendet ueber "Umsetzung" ein Feld mit den Agentur-Credits
   der Quellseite ein. Die Daten sind entfernt; der Ausloeser bleibt sonst als
   leere Schaltflaeche stehen. */
.RootLayoutFooterCredits-module-scss-module__PB550W__RootLayoutFooterCreditsTrigger{ display:none; }

/* ------------------------------------------------------------------
   Stufe 7, Modul 1 -- Zitat-Grafik (Vorbild: Zitat-Mirror des Lagers).
   Startzustand steht hier, nicht im JS: sonst blitzt der Endzustand auf,
   bevor das Modul laeuft.
   ------------------------------------------------------------------ */
/* Revision 1, Modul 5: zwei Kommas in den Ecken statt eines Paares in der
   Mitte. Deutlich groesser und kontrastreicher, aber weiter hinter dem Text
   (z-index 0, der Inhalt liegt darueber). */
.sw-ascii{
  position:absolute; z-index:0;
  margin:0; padding:0; pointer-events:none; white-space:pre;
  /* Einzige Monospace-Stelle im Build und bewusst so: das hier ist keine
     Typografie, sondern ein Zeichenraster. Eine Proportionalschrift wuerde
     die Zeichnung zerstoeren. Das <pre> ist aria-hidden, also reine Grafik. */
  font:400 clamp(7px,1.05vw,13px)/1 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  color:var(--color-grey-900);
  opacity:0; transform:translate(-50%,-50%) scale(.94);
  transition:opacity 1.2s cubic-bezier(.25,.46,.45,.94),
             transform 1.6s cubic-bezier(.25,.46,.45,.94);
}
.sw-ascii--oben { left:clamp(.5rem,3vw,3rem); top:clamp(.5rem,3vh,3rem);
                  transform:translate(0,0) scale(.94); transform-origin:left top; }
.sw-ascii--unten{ right:clamp(.5rem,3vw,3rem); bottom:clamp(.5rem,3vh,3rem);
                  transform:translate(0,0) scale(.94); transform-origin:right bottom; }
/* Kontrast rauf: 0,13 war auf hellem Grund praktisch unsichtbar. */
.sw-ascii.is-da{ opacity:.30; }
.sw-ascii--oben.is-da { transform:translate(0,0) scale(1); }
.sw-ascii--unten.is-da{ transform:translate(0,0) scale(1); }
/* 90 Spalten passen auf einem Handy nicht -- Rezept Schritt 5. */
@media (max-width:767px){ .sw-ascii{ display:none; } }
@media (prefers-reduced-motion: reduce){ .sw-ascii{ transition:none; } }

/* ------------------------------------------------------------------
   Stufe 7, Modul 3 -- Scroll-Flipbook (Vorbild: Scroll-Mirror des Lagers).
   Hoher Container, innen sticky: der Scrollweg IST die Zeitachse.
   ------------------------------------------------------------------ */
/* Revision 3, Modul 4: der Scrollweg ist von 600vh auf 1100vh verlaengert.
   Die Verwandlung des Flurs laeuft damit ueber spuerbar mehr Weg statt
   nach drei Radumdrehungen fertig zu sein. */
.sw-flip{ grid-column:1 / -1; width:100%; height:300vh; position:relative;
  /* Final, Modul 5: Start + GENAU ZWEI Stopps. Die klebende Buehne ist
     100vh hoch, es bleiben 200vh Scrollweg -- also je 100vh bis zum
     ersten und zweiten Stopp. Vorher 1100vh, das war zehnmal so weit. */ }
.sw-flip__sticky{
  position:sticky; top:0; height:100vh; width:100%;
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.sw-flip__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.sw-flip__stand{
  position:absolute; inset:0; margin:auto; max-width:100%; max-height:100%;
  width:auto; height:auto; object-fit:contain;
}
.sw-flip__text{
  /* Final, Modul 5: mittig statt linksbuendig. */
  position:relative; z-index:1; text-align:center;
  padding:0 clamp(1.25rem,5vw,5rem); max-width:1440px; width:100%;
}
/* Revision 3, Modul 4: drei Stufen liegen deckungsgleich uebereinander und
   blenden am Scroll-Fortschritt gegeneinander. Der Kasten haelt die Hoehe
   der laengsten Zeile, damit nichts springt. */
.sw-flip__text{ position:relative; min-height:4.4em; }
.sw-flip__stufe{
  /* Final, Modul 5: Display-Satz nach dem Vorbild der Sektion
     "wir PUENKTLICH und ZUVERLAESSIG." auf derselben Seite. Dort gemessen:
     Aeonik 120px bei 1440er Fenster, Zeilenhoehe 1.0. Auf die Fensterbreite
     umgerechnet sind das 8,33vw -- als clamp mit denselben Grenzen gesetzt.
     Vorher 74px Deckel, also gut ein Drittel kleiner. */
  position:absolute; left:0; right:0; top:0; margin:0 auto; max-width:20ch;
  font:var(--font-weight-regular) clamp(40px,8.33vw,120px)/1.0 var(--font-family-primary);
  color:var(--color-grey-900);
  /* Modul 2 (2026-08-31): Text sofort sichtbar. Die JS-Werte (textStufen)
     sind seither ein Hartschnitt 0/1 -- ohne "transition" hier wuerde der
     Browser trotzdem jeden Frame-Sprung ueber .38s weich auslaufen lassen. */
  opacity:0; will-change:opacity;
}
/* Versal-Akzente und Feature-Deck-Auftakt -- exakt das Muster des Vorbilds:
   Schluesselwoerter in Versalien, das Auftaktwort in Feature Deck bei 106 %
   der Aeonik-Groesse (im Vorbild gemessen: 127,2px zu 120px). */
.sw-flip__versal{ text-transform:uppercase; }
.sw-flip__auftakt{ font-family:var(--font-family-akzent); font-size:1.06em; }
/* Ohne JS steht wenigstens die erste Stufe. */
.sw-flip__stufe[data-stufe="1"]{ opacity:1; }
/* Ohne Sequenz bleibt der Abschnitt kurz -- 600vh Leerlauf fuer ein
   Standbild waere eine Zumutung. Und Text und Bild stehen nebeneinander
   statt uebereinander: ein Standbild traegt keine Schrift. */
.sw-flip[data-modus^="standbild"]{ height:auto; }
.sw-flip[data-modus^="standbild"] .sw-flip__sticky{
  position:relative; height:auto; overflow:visible;
  display:grid; gap:clamp(2rem,5vw,4.5rem); align-items:center;
  grid-template-columns:1fr;
  max-width:1440px; margin:0 auto;
  padding:clamp(4rem,9vw,9rem) clamp(1.25rem,5vw,5rem);
}
@media (min-width:900px){
  .sw-flip[data-modus^="standbild"] .sw-flip__sticky{ grid-template-columns:minmax(0,5fr) minmax(0,7fr); }
}
.sw-flip[data-modus^="standbild"] .sw-flip__stand{
  position:relative; inset:auto; width:100%; height:auto; max-width:none; max-height:none;
  aspect-ratio:1/1; object-fit:cover; order:2;
}
.sw-flip[data-modus^="standbild"] .sw-flip__text{
  padding:0; max-width:none; order:1; text-align:left;
}

/* Revision 2, Modul 1: Die Sequenz ist wieder VOLLFLAECHIGER Hintergrund,
   der Text liegt darueber. Die Aufteilung nebeneinander ist raus
   (King-Entscheid).

   Lesbarkeit ueber einen Schutzverlauf zwischen Bild und Text: links
   kraeftig, nach rechts auslaufend. Das Bild bleibt sichtbar, der Text
   steht immer auf ausreichend dunklem Grund. Die Sequenz wird zum Ende
   hin deutlich heller (die Scheibe wird frei) -- der Verlauf ist deshalb
   auf den HELLSTEN Frame ausgelegt, nicht auf den ersten. */
.sw-flip[data-modus="sequenz"] .sw-flip__canvas{ z-index:0; }
/* Feinschliff 2, Modul 6: KEIN Verlauf mehr, sondern gleichmaessige
   Abdunklung ueber das ganze Bild. Der gruene Verlauf von links entfaellt.
   Der Wert ist gemessen, nicht geschaetzt -- siehe Bericht: die Sequenz
   hellt von Mittel 49 auf 121 auf, das 95-Perzentil der hellsten Bilder
   liegt bei 215 von 255.

   Gemessen wurde der Grund UNTER der Schrift: der Textblock wird kurz
   ausgeblendet, dann genau sein Kasten fotografiert -- so zaehlen keine
   Kantenglaettungs-Pixel der Buchstaben mit. Neun Punkte entlang der
   Strecke, jeweils das 99-Perzentil:
       ohne Schleier  1,02:1   .35 -> 2,06:1
       .50 -> 2,94:1  .62 -> 4,05:1
   Schlechtester Punkt ist immer das Streckenende, wo das Bild am
   hellsten ist. Gewaehlt: .62 -- Grossschrift braucht 3:1. */
.sw-flip[data-modus="sequenz"] .sw-flip__sticky::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Kundenversand, Modul 4: KEIN gruenes Overlay mehr, sondern ein
     minimaler senkrechter Verlauf -- unten Schwarz mit dezenter
     Deckkraft, nach oben hin auslaufend. Die Schrift steht mittig
     unten, dort traegt der Verlauf am meisten. Werte gemessen, siehe
     Bericht. */
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%, rgba(0,0,0,.14) 30%,
    rgba(0,0,0,.70) 55%, rgba(0,0,0,.90) 100%);
}
.sw-flip[data-modus="sequenz"] .sw-flip__text{ z-index:2; }
.sw-flip[data-modus="sequenz"] .sw-flip__stufe{ color:#F2F4F1; }

@media (max-width:767px){
  /* Zweiter Verlauf entfaellt -- die Abdunklung ist jetzt gleichmaessig. */
}

/* ------------------------------------------------------------------
   Stufe 7, Modul 4 -- Arbeitsweise (Vorbild: Referenz A).
   Vier bildschirmhohe Ebenen, die letzte klebend. Hintergrund und die
   beiden freigestellten Objekte liegen ueber der ganzen Sektion und
   werden per Scroll-Fortschritt versetzt. Befund: _plan/SCROLL-MECHANIK-REFERENZ-A.md
   ------------------------------------------------------------------ */
/* Die Buehne bleibt ueber die ganze Sektion stehen -- wie in der Vorlage,
   wo die Komposition ruht und nur die Objekte darin wandern. Das negative
   margin-bottom haelt sie aus dem Hoehenfluss heraus. */
/* Revision 2, Modul 11: vier Zustaende uebereinander, die per
   Scroll-Fortschritt ueberblenden. Die frueheren drei Grafiken
   (Hintergrund plus zwei schwebende Kacheln) sind raus. */
/* Revision 3, Modul 5: voll deckende Hintergruende. Genau ein Zustand ist
   gesetzt; der Wechsel an der Ebenengrenze dauert 300 ms. Kein Zustand
   steht dauerhaft halbtransparent ueber einem anderen. */
/* Schutzschleier zwischen Sequenz und Text: die Gebaeude sind hell, die
   Schrift steht hell darauf. Der Schleier liegt ueber den Bildern und
   unter den Ebenen (die tragen z-index 1). */
/* Zusaetzlich ein enger Schein direkt an der Schrift. Der Schleier allein
   reichte an einer Stelle nicht: bei Zustand 3 stand "Erreichbar" auf einer
   hellen Fassade mit Grundwert 248 von 255 (gemessen). */

/* Revision 3, Modul 5: Anordnung nach dem Vorbild der Referenz A. Der Text steht nicht
   mehr mittig fett ueber dem Gebaeude, sondern als schmale Spalte seitlich --
   und je Ebene versetzt, damit das Modell frei bleibt. */
/* Versatz je Ebene ueber das Attribut -- nth-of-type zaehlt den Buehnen-Div
   mit und traf dadurch die falschen Ebenen (im Bild gesehen). */
}
/* Die letzte Ebene bleibt stehen -- wie in der Vorlage. */

/* Revision 3: Die Info-Kacheln stehen sauber UNTERHALB des Textblocks der
   ersten Ebene, nicht mehr in deren Kopfbereich. */
}
/* Auf schmalen Geraeten duerfen die schwebenden Objekte den Text nicht
   ueberlagern: kleiner, weiter an den Rand, zurueckgenommen. */
/* Zweite Platzierung der Zitat-Grafik: /ueber-uns/. Dort steht das Zitat
   rechts neben dem Bild -- die Grafik gehoert hinter DEN TEXT, nicht in die
   Sektionsmitte, sonst verschwindet sie hinter dem Bild. */
/* Die alte Sonderlage rechts entfaellt -- die Ecken regeln das jetzt. */

/* Die Sonderregeln der alten Mittellage sind mit den Ecken hinfaellig --
   sie hielten die Schrift auf 7,5 px und zogen sie mobil wieder in die Mitte. */

/* ------------------------------------------------------------------
   Wortmarke: echter Vektor aus der Kunden-PDF (Schritt 7).
   Der Basis-Mirror gibt der Marke 88 x 28 px -- das reichte fuer den
   reinen Schriftzug der Basis, nicht fuer eine Sperrschrift mit Unterzeile.
   Die Marke bekommt deshalb mehr Breite; die Hoehe bleibt in der Kopfzeile.
   ------------------------------------------------------------------ */
/* Die Marke skaliert ueber die Hoehe, die Breite folgt dem Verhaeltnis der
   Sperrschrift (543,7 : 142,6 = 3,81) von selbst. Der Basis-Mirror gab ihr
   28 px -- das reichte fuer den reinen Schriftzug der Basis, nicht fuer eine
   Sperrschrift mit Unterzeile. */
[class*="Brand-module"]{ height:30px !important; }
@media (min-width:900px){ [class*="Brand-module"]{ height:36px !important; } }
[class*="MainHero"][class*="__logo"] [class*="Brand-module"],
[class*="MainHero"][class*="__logo"] svg{ width:min(62vw,760px) !important; height:auto !important; }


/* ------------------------------------------------------------------
   Hero-Abdunkler (Medien Welle 1).
   Die eigenen Motive sind hell -- der Basis Hero war dunkelorange und trug
   helle Schrift ohne Weiteres. Ohne Abdunklung verschwinden Headline,
   Kopfzeile und Scroll-Pfeil im Bild.

   Zwei Wege verworfen, beide dokumentiert:
   1. Verlauf per ::after am Medien-Container. Das noetige position:relative
      dort hat der Basis Einblendung der Kopfzeile ausser Kraft gesetzt -- sie
      blieb dauerhaft auf opacity 0.
   2. Verlauf per ::after an der Hero-Sektion. Kommt nicht ueber das Medium,
      der Medien-Container bildet einen eigenen Stapelkontext.

   Genommen: Filter direkt am Bild. Beruehrt kein Layout, keinen
   Stapelkontext und keine Animation. Wird ein dunkles Motiv geliefert,
   kann der Wert auf 1 gesetzt werden.
   ------------------------------------------------------------------ */
section[class*="MainHero"] img[class*="lFYlva"]{
  filter:brightness(.66) saturate(.92);
}

/* ------------------------------------------------------------------
   Kopfzeile: Bildmarke plus Wortmarke ohne Unterzeile (#logo-kopf).
   Die Breite haelt der Elternknoten <a class=...__logo>, nicht das <svg>
   -- deshalb liefen fruehere Overrides am svg ins Leere. Und der Knoten
   heisst __logo, nicht __brand. Verhaeltnis 4,00 bei
   36 px Hoehe ergibt 144 px.
   ------------------------------------------------------------------ */
/* BEFUND Revision 1: der Knoten ist ein <div>, kein <a> -- die alte Regel
   griff nie, und der Knoten ist leer. Im Kopf stand ueberhaupt kein Logo.
   Jetzt als Hintergrundbild aus einer EIGENSTAENDIGEN SVG-Datei: ein
   Fragment-Verweis auf ein <symbol> rendert als background-image nicht.
   Verhaeltnis der Kopf-Variante ist 4,002 -- 152 x 38 haelt es exakt. */
[class*="RootLayoutHeader"] [class*="__logo"]{
  /* Revision 2, Modul 5: NUR die Bildmarke, als PNG direkt aus dem
     Kunden-PDF gerendert. Die Wortmarke entfaellt im Kopf ganz
     (King-Entscheid) -- sie steht gross im Fuss. Drei Dichten ueber
     image-set: bei 40 px Anzeige liegt 3x bei 120 px.
     Die Kopfzeile ist ueber dem Hero durchsichtig; ihre eigenen Knoepfe
     loesen das mit einer hellen Platte (theme-plain::after, gemessen
     #F8F8F8, Hoehe 45). Die Marke bekommt dieselbe Platte. */
  /* Revision 3, Modul 1: KEINE Platte mehr. Das PNG traegt sauberes
     Alpha (gemessen: 0 helle Halbrand-Punkte) -- der weisse Kasten kam
     aus genau dieser Zeile, nicht aus der Datei. Ausserhalb des Hero
     traegt die Kopfzeile seit Revision 2 ein eigenes Band; darueber
     steht die Marke ohnehin auf ruhigem Grund. */
  width:56px !important; height:45px !important;
  background-image:image-set(url("/assets/logo/marke-1x.png") 1x,
                             url("/assets/logo/marke-2x.png") 2x,
                             url("/assets/logo/marke-3x.png") 3x);
  background-image:-webkit-image-set(url("/assets/logo/marke-1x.png") 1x,
                                     url("/assets/logo/marke-2x.png") 2x,
                                     url("/assets/logo/marke-3x.png") 3x);
  background-repeat:no-repeat; background-position:center;
  background-size:40px 40px;
}
@media (max-width:899px){
  [class*="RootLayoutHeader"] [class*="__logo"]{
    width:48px !important; height:40px !important; background-size:34px 34px;
  }
}

/* ------------------------------------------------------------------
   Revision 1: Die Kleid-Sektion dreht wieder. Das Standbild und seine
   Regeln entfallen; das Canvas der Szene wird nicht mehr ausgeblendet.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   /ueber-uns/, Zitat der Gesellschafter — typografischer Umbau.

   Vorher: grosses Hochzeitsfoto links, schmale Textspalte rechts, dazu
   ein Portraet-Thumbnail in der Zuschreibung. Beide Bilder sind raus
   (Personenmotive der Quellseite, kein Ersatzmotiv sinnvoll).

   Muster: die Typo-Zitat-Sektion aus dem Zitat-Mirror
   (`screenshots/ascii-cta-end.png`): grosse Sans-Headline links, die
   ASCII-Anfuehrungszeichen rechts daneben, kein Foto, Zuschreibung als
   reiner Text. Wir haben den ASCII-Export bereits — dieselbe Herkunft,
   dasselbe Zeichen.
   ------------------------------------------------------------------ */
section[class*="MediaQuote"] [class*="__scroll"]{ display:none !important; }
section[class*="MediaQuote"] [class*="__container"]{
  display:block !important; padding-block:clamp(4rem,9vw,9rem);
}
/* Revision 1, Modul 5: Der Text steht mittig, die beiden Kommas stehen in
   den Ecken dahinter. Vorher lag der Text links und das Kommapaar rechts
   daneben. */
section[class*="MediaQuote"] [class*="__content"]{
  max-width:min(60ch, 74%) !important; width:auto !important;
  margin:0 auto !important; position:relative; z-index:1; text-align:center;
}
section[class*="MediaQuote"] [class*="__title"]{
  margin:0 0 clamp(1.2rem,2.6vw,2rem) !important;
  font:var(--font-weight-regular) .8125rem/1.2 var(--font-family-content) !important;
  letter-spacing:.14em; text-transform:uppercase; color:var(--color-grey-600) !important;
}
section[class*="MediaQuote"] [class*="__text"]{
  /* Der Inhalt ist ein laengerer Absatz, keine kurze Aussage. In echter
     Displaygroesse laeuft er ueber die Seite hinaus -- gemessen. Also
     gehobenes Zitatmass statt Schlagzeile. */
  font:var(--font-weight-regular) clamp(19px,1.9vw,29px)/1.42 var(--font-family-primary) !important;
  color:var(--color-grey-900) !important;
}
section[class*="MediaQuote"] [class*="__author"]{
  margin-top:clamp(2rem,4vw,3.2rem) !important;
}
/* Die Sektion ist der Bezugsrahmen der beiden Eck-Kommas. */
section[class*="MediaQuote"], section[class*="LargeQuote"]{ position:relative; }

/* Basis-Angleich, Modul 3: Die Muenze steht mobil groesser -- 88 -> 150 px.
   Alle Szenenwerte sind nachweislich die des Originals (Material,
   Lichter, Schatten, Kamera, Normierung, Drehung, Texturen -- Wert fuer
   Wert verglichen, kein einziger Unterschied). Geaendert ist allein die
   Groesse im Bild.
   Der Textumfluss bleibt: das Basis-Skript rechnet den Versatz der
   Wortgruppen je Bild aus dem gemessenen Muenzradius und ihrer Hoehe --
   er waechst mit. */
@media (max-width:767px){
  section[class*="LargeQuote"] [class*="__coin"]{
    width:150px !important; height:150px !important;
  }
}

/* ------------------------------------------------------------------
   Letzter Schliff, Modul 3 — Zitat und Muenze mobil zurueck auf das
   Original.

   In Mobile-Finale M6 stand hier ein zentrierter Einspalter mit 200 px
   grosser Muenze ueber dem Satz -- damals verlangt, weil die zwei
   Spalten sich als zwei Spalten lasen statt als ein Satz.
   Dieser Auftrag verlangt das Gegenteil: Satzbild EXAKT nach dem
   Original, zwei Spalten links und rechts der Muenze, Desktop UND
   Mobil. Der juengere Auftrag gilt.

   Am Original nachgemessen (375 px): Muenze 88x88 bei x=144, also
   mittig; Zeile 1 links 100..166, rechts 200..279; Schrift 18 px bei
   19,8 px Zeilenhoehe. Genau dieses Bild liefert der Basis-Aufbau von
   sich aus -- die Sonderregeln fallen deshalb ersatzlos weg, statt
   durch neue ersetzt zu werden.
   ------------------------------------------------------------------ */

@media (max-width:899px){
  section[class*="MediaQuote"] [class*="__content"]{ max-width:none !important; }
}

/* ------------------------------------------------------------------
   Navigation nach Katalog-Muster NAV-014 (Ink-Blot Circle-Reveal).

   Uebernommen aus library/effects/nav-014: runder Schalter, ein
   kreisfoermiger Beschnitt, der vom Schaltermittelpunkt ueber den
   ganzen Bildschirm waechst, darunter das dunkle Vollbild-Menue mit
   gestaffelt einfliegenden Punkten. Ersetzt nav-010 vollstaendig.

   Farben und Schriften aus den Sanwald-Token, nicht aus den
   Demo-Werten des Musters -- so schreibt es das Muster selbst vor.
   Schalter 52 px statt 72: die Kopfzeile des Basis-Mirrors ist 45 px
   hoch, ein 72er Kreis spraengte sie.

   Fallstricke aus meta.json, alle beachtet:
   - Feste IDs des Musters durch Referenzen im eigenen Namensraum
     ersetzt -- die Kopplung entfaellt damit ganz.
   - Beide Schichten (SVG-Kreis und clip-path des Inhalts) werden aus
     EINEM Wert getrieben.
   - overflow:hidden steht NUR im offenen Zustand und nur am
     Wurzelelement, nicht global.
   - Der Schalter liegt ueber dem Menue (z-index 320 gegen 305), sonst
     waere er im offenen Zustand nicht mehr erreichbar.
   - Die Kreismasse werden bei jedem Oeffnen neu gemessen, nicht einmal
     beim Laden -- sonst startet der Kreis nach einem Schriftnachladen
     ausserhalb der Mitte.
   ------------------------------------------------------------------ */
/* Der Basis-Kopf traegt hinter seinen Knoepfen helle Platten
   (::after, #F8F8F8). Mit nav-014 entfallen sie -- das Muster gibt
   einen freistehenden runden Schalter vor, keine Kaesten. Gilt fuer
   Schirm und Handy gleichermassen; der eigene Sticky-Aufbau und die
   Glas-Varianten sind mit den alten Bloecken schon entfallen. */
header[class*="RootLayoutHeader"] a[class*="Button-module"]::after,
header[class*="RootLayoutHeader"] button[class*="Button-module"]::after{
  display:none !important;
}
/* Der verborgene Original-Schalter bleibt aus dem Weg. */
header[class*="RootLayoutHeader"] button[class*="__trigger"]{
  visibility:hidden !important;
}
/* Ohne Platte stand der Kontakt-CTA dunkel auf hellem Foto -- gemessen
   3,59:1 bei 1440 px, unter dem Mindestwert. Er bekommt deshalb die
   Formsprache des Musters: dieselbe volle Flaeche wie der runde
   Schalter, nur als Pille. Damit traegt er auf jedem Grund. */
header[class*="RootLayoutHeader"] a[class*="__button"]{
  background:var(--color-grey-900) !important;
  color:var(--color-beige-100) !important;
  border-radius:999px !important;
  padding:0 1.4rem !important;
  transition:background .5s cubic-bezier(.65,0,.35,1);
}
header[class*="RootLayoutHeader"] a[class*="__button"]:hover{
  background:var(--color-orange) !important;
}
header[class*="RootLayoutHeader"] a[class*="__button"] em,
header[class*="RootLayoutHeader"] a[class*="__button"] span{
  color:var(--color-beige-100) !important;
}

.sw-nav{ --sw-nav-groesse:52px; }
.sw-nav__schalter{
  position:fixed; top:26px; left:30px; z-index:320;
  width:var(--sw-nav-groesse); height:var(--sw-nav-groesse);
  display:inline-flex; align-items:center; justify-content:center;
  border:0; padding:0; cursor:pointer; border-radius:50%;
  background:var(--color-grey-900); color:var(--color-beige-100);
  -webkit-tap-highlight-color:transparent;
  transition:border-radius .5s cubic-bezier(.65,0,.35,1),
             background .5s cubic-bezier(.65,0,.35,1);
}
.sw-nav__schalter:hover{
  border-radius:48% 52% 42% 58% / 55% 44% 56% 45%;
  background:var(--color-orange);
}
.sw-nav__schalter:focus-visible{ outline:2px solid var(--color-grey-900); outline-offset:4px; }
.sw-nav__zeichen{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; width:100%; height:100%;
}
.sw-nav__strich{
  display:block; width:18px; height:1.5px; border-radius:2px;
  background:currentColor;
  transition:width .5s cubic-bezier(.65,0,.35,1),
             transform .5s cubic-bezier(.65,0,.35,1),
             opacity .4s cubic-bezier(.65,0,.35,1);
}
.sw-nav.is-auf .sw-nav__strich:nth-child(1){ transform:translateY(5.5px) rotate(45deg); }
.sw-nav.is-auf .sw-nav__strich:nth-child(2){ opacity:0; width:0; }
.sw-nav.is-auf .sw-nav__strich:nth-child(3){ transform:translateY(-5.5px) rotate(-45deg); }

.sw-nav__menue{ position:fixed; inset:0; z-index:305; pointer-events:none; }
.sw-nav__menue.is-auf{ pointer-events:auto; }
.sw-nav__svg{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.sw-nav__fuellung{ fill:var(--color-grey-900); }
.sw-nav__inhalt{
  position:absolute; inset:0;
  clip-path:circle(var(--cr, 0px) at var(--cx, 50%) var(--cy, 0%));
  will-change:clip-path;
  display:flex; flex-direction:column; justify-content:center;
  padding:clamp(6rem,14vh,9rem) clamp(1.25rem,5vw,5rem) clamp(2rem,6vh,4rem);
  color:var(--color-beige-100);
}
.sw-nav__liste{ list-style:none; margin:0; padding:0; }
.sw-nav__punkt{ border-top:1px solid rgba(242,244,241,.12); }
.sw-nav__punkt:last-child{ border-bottom:1px solid rgba(242,244,241,.12); }
.sw-nav__link{
  display:grid; grid-template-columns:44px 1fr; align-items:center;
  gap:clamp(1rem,3vw,2rem); padding:clamp(.7rem,1.6vh,1.2rem) 0;
  text-decoration:none; color:inherit;
}
.sw-nav__num{
  font:var(--font-weight-regular) 12px/1 var(--font-family-content);
  letter-spacing:.06em; color:rgba(242,244,241,.5);
}
.sw-nav__text{
  /* Untergrenze 26 px statt 34: bei 375 px stehen fuer den Text
     335 - 44 (Ziffernspalte) - 16 (Spalt) = 275 px zur Verfuegung.
     "STELLENANGEBOTE" mass bei 34 px rund 300 px und lief rechts
     heraus (gemessen). Bei 26 px passt es. */
  font:var(--font-weight-regular) clamp(26px,7vw,96px)/1.05 var(--font-family-primary);
  text-transform:uppercase; letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.sw-nav__knopf{
  align-self:flex-start; margin-top:clamp(1.5rem,4vh,2.5rem);
  padding:.85rem 1.6rem; border:1px solid rgba(242,244,241,.45);
  border-radius:999px; text-decoration:none; color:inherit;
  font:var(--font-weight-regular) clamp(13px,1vw,15px)/1.2 var(--font-family-content);
  letter-spacing:.06em; text-transform:uppercase;
  transition:background .35s cubic-bezier(.65,0,.35,1), color .35s cubic-bezier(.65,0,.35,1);
}
.sw-nav__knopf:hover{ background:var(--color-beige-100); color:var(--color-grey-900); }
.sw-nav__recht{ display:flex; gap:1.5rem; margin-top:clamp(1.5rem,4vh,2.5rem); }
.sw-nav__klein{
  text-decoration:none; color:rgba(242,244,241,.62);
  font:var(--font-weight-regular) clamp(13px,1.1vw,15px)/1.4 var(--font-family-content);
}
.sw-nav__klein:hover{ color:var(--color-beige-100); }

/* Gestaffelt einfliegend -- der Versatz je Element setzt das Skript. */
.sw-nav__link, .sw-nav__knopf, .sw-nav__klein{
  opacity:0; transform:translateY(40px);
  transition:opacity .6s cubic-bezier(.33,1,.68,1),
             transform .6s cubic-bezier(.33,1,.68,1);
}
.sw-nav.is-auf .sw-nav__link,
.sw-nav.is-auf .sw-nav__knopf,
.sw-nav.is-auf .sw-nav__klein{ opacity:1; transform:none; }

/* overflow:hidden NUR im offenen Zustand -- der Fallstrick des Musters. */
html.sw-menue-auf, html.sw-menue-auf body{ overflow:hidden; }

@media (max-width:767px){
  .sw-nav__schalter{ left:20px; top:26px; }
}
@media (prefers-reduced-motion: reduce){
  .sw-nav__link, .sw-nav__knopf, .sw-nav__klein,
  .sw-nav__strich, .sw-nav__schalter{ transition-duration:1ms !important; }
}

/* ------------------------------------------------------------------
   Revision 1, Modul 2 — Hero-Inhalt (Struktur-Vorgabe des Kings).

   Das Atrium bleibt vollflaechig im Hintergrund. Darauf unten links der
   Textblock, unten rechts die Kartengruppe. Der Inhaltsknoten des
   Basis-Mirrors ist position:fixed und flex-zentriert -- er wird auf
   "unten, verteilt" gedreht statt neu gebaut.

   Alle Texte stammen aus copy.md (H-01 Zeile und Unterzeile, H-02) und
   aus den Namen bestehender Seiten. Nichts erfunden.
   ------------------------------------------------------------------ */
/* Gemessen: der Inhaltsknoten ist eine SPALTE. Fuer "Text links unten,
   Karten rechts unten" muss er auf Reihe gedreht werden -- mit
   align-items:flex-end sitzen dann beide Bloecke auf der Grundlinie. */
/* Textblock unten links (vorhandene H1 klein, darunter die grosse Zeile),
   Kartengruppe unten rechts. Der Inhaltsknoten steht fest im Bild -- die
   Karten haengen deshalb absolut an seiner unteren rechten Ecke und
   sprengen so keine Zeilenhoehe des Textblocks. */
[class*="MainHero"] [class*="__content"]{
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  padding:0 clamp(1.25rem,5vw,5rem) clamp(2.5rem,6vh,4.5rem) !important;
  /* Verlauf zum unteren Rand: der Atriumboden ist hell, darauf war die
     helle Schrift nicht zu lesen (im Bild geprueft). Der Verlauf sitzt am
     Inhaltsknoten -- er liegt ueber dem Bild, aber unter seinen eigenen
     Kindern, faerbt also nur den Grund und nie den Text. Farbe aus dem
     Token --color-grey-900. */
  background-image:linear-gradient(to top,
    rgba(26,50,42,.74) 0%, rgba(26,50,42,.46) 26%, rgba(26,50,42,0) 56%);
}
[class*="MainHero"] [class*="__content"] > [class*="__beacon"]{ display:none !important; }
[class*="MainHero"] [class*="__content"] > [class*="__title"]{
  order:1;
  /* BEFUND: Der Titel-Knoten steht dauerhaft auf Deckkraft 0. Seine
     Einblendung haengt an --mask-progress des Basis-Mirrors, und der
     bleibt ueber Minuten auf 0,0000 -- die Mechanik laeuft nie an, weil
     die Hydration auf dieser Seite scheitert. Die H1 der Startseite war
     damit fuer Besucher unsichtbar. Hier fest auf sichtbar. */
  opacity:1 !important;
}
/* Dieselbe Ursache eine Ebene tiefer: die Woerter der H1 blenden einzeln
   ein (--stagger). Gemessen standen sie auf 0,67 / 0,46 / 1 / 0 / 1 mit
   halben Versaetzen -- ein eingefrorener Zwischenzustand. Hier fest auf
   fertig. */
[class*="MainHero"] [class*="__title"] h1 [data-word]{
  opacity:1 !important; transform:none !important;
}
[class*="MainHero"] [class*="__content"] > .sw-hero__gross{ order:2; }
[class*="MainHero"] [class*="__content"] > .sw-hero__karten{
  position:absolute; right:clamp(1.25rem,5vw,5rem); bottom:clamp(2.5rem,6vh,4.5rem);
}
/* Der Textblock endet vor der Kartengruppe -- sonst laeuft die grosse
   Zeile darunter hindurch (im Bild gemessen). */
@media (min-width:900px){
  [class*="MainHero"] [class*="__content"] > [class*="__title"],
  [class*="MainHero"] [class*="__content"] > .sw-hero__gross{
    max-width:calc(100% - min(30vw,360px) - clamp(1.5rem,4vw,4rem)) !important;
  }
}
/* Die vorhandene H1 traegt bereits genau die kleine Zeile -- sie bleibt
   die H1 der Seite und wird nur kleiner gesetzt. Kein zweites H1. */
[class*="MainHero"] [class*="__title"]{
  flex:0 1 auto; max-width:min(58ch,52vw); text-align:left !important;
}
[class*="MainHero"] [class*="__title"] h1{
  margin:0 0 .55em;
  font:var(--font-weight-regular) clamp(13px,1.15vw,16px)/1.4 var(--font-family-content) !important;
  letter-spacing:.1em; text-transform:uppercase; color:#F2F4F1;
  text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.sw-hero__gross{
  margin:0; color:#F2F4F1; text-wrap:balance;
  font:var(--font-weight-regular) clamp(38px,5.4vw,86px)/1.02 var(--font-family-primary);
  letter-spacing:-.015em; text-shadow:0 2px 22px rgba(0,0,0,.42);
}
.sw-hero__gross em{
  font-family:var(--font-family-akzent); font-style:italic; font-size:1.06em;
  letter-spacing:-.005em;
}

/* Kartengruppe unten rechts */
.sw-hero__karten{
  flex:0 0 auto; display:grid; gap:.6rem;
  grid-template-columns:repeat(2,minmax(0,1fr));
  width:min(30vw,360px);
}
.sw-hero__karte{
  display:block; text-decoration:none; color:#F2F4F1; position:relative;
  overflow:hidden; background:rgba(26,50,42,.34);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(242,244,241,.22);
  transition:border-color 320ms var(--sw-nav-ruhig), transform 320ms var(--sw-nav-ruhig);
}
.sw-hero__karte:hover, .sw-hero__karte:focus-visible{
  border-color:rgba(242,244,241,.62); transform:translateY(-2px);
}
.sw-hero__karte:focus-visible{ outline:2px solid #F2F4F1; outline-offset:3px; }
.sw-hero__karte--gross{ grid-column:1 / -1; }
.sw-hero__karte img{ display:block; width:100%; height:auto; }
.sw-hero__karte--gross img{ aspect-ratio:16/10; object-fit:cover; }
.sw-hero__karte--klein img{ aspect-ratio:1/1; object-fit:cover; }
.sw-hero__karte__text{ display:block; padding:.7rem .85rem .8rem; }
.sw-hero__karte__titel{
  display:block; margin:0; font:var(--font-weight-regular) clamp(14px,1.15vw,17px)/1.25 var(--font-family-primary);
}
.sw-hero__karte__zeile{
  display:block; margin:.28em 0 0; color:rgba(242,244,241,.78);
  font:var(--font-weight-regular) clamp(12px,.9vw,13.5px)/1.4 var(--font-family-content);
}
/* Die zwei Pillen zwischen grosser und kleinen Karten */
.sw-hero__pillen{ grid-column:1 / -1; display:flex; gap:.6rem; }
.sw-hero__pille{
  flex:1 1 0; text-align:center; text-decoration:none; color:var(--color-grey-900);
  background:#F8F8F8; padding:.7rem .9rem; border:1px solid transparent;
  font:var(--font-weight-regular) clamp(13px,1vw,15px)/1.2 var(--font-family-content);
  letter-spacing:.06em; text-transform:uppercase;
  transition:background 320ms var(--sw-nav-ruhig);
}
.sw-hero__pille:hover, .sw-hero__pille:focus-visible{ background:#FFF; }
.sw-hero__pille:focus-visible{ outline:2px solid #F2F4F1; outline-offset:3px; }

/* Mobil: Kartengruppe unter den Text stapeln, nichts ueberlappt. */
/* Mobil: Karten unter den Text stapeln, nichts ueberlappt. */
@media (max-width:899px){
  [class*="MainHero"] [class*="__content"]{
    align-items:stretch !important;
    /* Oben Platz fuer die Kopfzeile (gemessen 75 px hoch) plus Luft --
       sonst legt sich der Navigations-Schalter auf die kleine Zeile. */
    padding-top:92px !important;
    padding-bottom:clamp(1.5rem,4vh,2.5rem) !important;
  }
  /* Die grosse Zeile darf mobil nicht die halbe Hoehe fressen. Und die
     Kartengruppe muss so weit schrumpfen, dass der ganze Block unter die
     Kopfzeile passt -- gemessen lag die kleine Zeile sonst bei y 57 und
     damit unter dem Schalter (27 bis 79). */
  .sw-hero__gross{ font-size:clamp(28px,7.2vw,40px); }
  .sw-hero__karte--gross img{ aspect-ratio:2/1; }
  .sw-hero__karte--klein img{ aspect-ratio:4/3; }
  .sw-hero__karten{ gap:.45rem; }
  .sw-hero__karte__text{ padding:.5rem .65rem .55rem; }
  .sw-hero__pille{ padding:.55rem .7rem; }
  [class*="MainHero"] [class*="__title"]{ max-width:none; }
  [class*="MainHero"] [class*="__content"] > .sw-hero__karten{
    position:static; order:3; width:100%; margin-top:clamp(1rem,3vh,1.6rem);
  }
}
@media (prefers-reduced-motion: reduce){
  .sw-hero__karte{ transition:none; }
}

/* ------------------------------------------------------------------
   Mobile-Finale, Modul 3 — Hero-Karten mobil ohne Fotos.

   Auf 375 px trugen die drei Karten drei Fotos, zusammen 446 px Hoehe.
   Sie zeigen dasselbe, was die Zielseiten gleich darunter noch einmal
   zeigen, und druecken die Kartengruppe unter die Faltkante.
   Mobil bleiben deshalb nur die Textknoepfe: Unsere Arbeitsweise,
   Services, Kontakt, Stellenangebote, Ueber uns -- in genau dieser
   Reihenfolge, die schon die Baumfolge ist (grosse Karte, die zwei
   Pillen, die zwei kleinen Karten). Nichts umsortiert, nur die Bilder
   ausgeblendet und alle fuenf auf dieselbe kompakte Zeile gebracht.

   Die Fotos bleiben im Markup (die Zeile ist Teil der Karte und traegt
   den Alt-Text) -- sie werden nicht geladen, weil loading="lazy" auf
   display:none nicht ausloest. Desktop bleibt unveraendert.
   Grenze 767 px wie ueberall in diesem Projekt.
   ------------------------------------------------------------------ */
@media (max-width:767px){
  /* Mobil-Feinschliff, Modul 6: Die Linkliste im Hero entfaellt
     KOMPLETT -- ohne Ersatz. In Letzter Schliff/M4 standen dort noch
     fuenf Textlinks (vorher fuenf helle Kaesten); jetzt bleibt der Hero
     dem Bild und der Headline.
     Die Ziele gehen nicht verloren: Arbeitsweise, Services, Kontakt,
     Stellenangebote und Ueber uns stehen alle in der Navigation.

     Die Headline rutscht an die Stelle, an der die Links standen: der
     Inhalt richtet sich am unteren Rand aus statt oben zu beginnen.
     Gemessen standen die Links bis y=780; die Headline endet jetzt
     dort. Desktop bleibt bei den Karten mit Bildern. */
  .sw-hero__karten{ display:none !important; }
  [class*="MainHero"] [class*="__content"]{
    justify-content:flex-end !important;
    padding-bottom:32px !important;
  }
}

/* ------------------------------------------------------------------
   Mobile-Finale, Modul 3 — der Taschen-Knopf im mobilen Kopf.

   Oben rechts stand ein Einkaufstaschen-Symbol aus dem Zeichensatz, ein
   Ueberbleibsel des Basis-Mirrors (dort ein Shop). Das Ziel des Knopfes
   war schon richtig (/kontakt), nur sein Zeichen nicht -- ein
   Facility-Management hat keinen Warenkorb.

   Mobil zeigt der Knopf jetzt dieselbe Beschriftung wie der Desktop-CTA,
   nur kompakt: das kursive "Kontakt" bleibt, das nachgestellte
   "aufnehmen" entfaellt. Der Wortlaut wird nicht ersetzt, sondern
   gekuerzt -- es kommt kein neues Wort dazu.
   ------------------------------------------------------------------ */
/* NAV-014: Der CTA ist jetzt eine volle dunkle Pille wie der runde
   Schalter des Musters -- seine Beschriftung steht deshalb hell.
   Vorher stand sie dunkel auf heller Platte; die Platte ist mit den
   Sonderloesungen entfallen. */
header[class*="RootLayoutHeader"] a[class*="__button"],
header[class*="RootLayoutHeader"] a[class*="__button"] em,
header[class*="RootLayoutHeader"] a[class*="__button"] span{
  color:var(--color-beige-100) !important;
}

/* Die Einkaufstasche verschwindet auf JEDER Breite -- sie ist an keiner
   Stelle richtig. Die Beschriftung tritt ueberall an ihre Stelle. */
header[class*="RootLayoutHeader"] a[class*="__button"] [class*="buttonIcon"]{
  display:none !important;
}
header[class*="RootLayoutHeader"] a[class*="__button"] [class*="buttonText"]{
  display:block !important;
}

/* Bis 1023 px steht nur "Kontakt": darueber wird der Knopf im Raster der
   Kopfzeile zu schmal fuer "Kontakt aufnehmen". Ab 1024 die volle
   Beschriftung wie auf dem Schirm. */
/* Bis 1023 px steht nur "Kontakt": darueber wird der Knopf im Raster der
   Kopfzeile zu schmal fuer "Kontakt aufnehmen". Ab 1024 die volle
   Beschriftung wie auf dem Schirm.

   Die Beschriftung des Basis-Knopfes liess sich schmal nicht ausrichten.
   Ihr Kasten haengt an einer Rolle fuer den Hover -- die Beschriftung
   steht zweimal uebereinander, die zweite Fassung schiebt sich beim
   Zeigen hoch. Drei Wege wurden gemessen und verworfen:
     width:min-content  -> presste die Kette auf 17 px, "Kontakt" wurde
                           zu "Kontak" abgeschnitten
     width:auto         -> Kasten 117 px, Knopf 148 px, stiess an die Marke
     width:100% / display:contents auf der Kette -> Beschriftung blieb
                           unveraendert 47 px eingerueckt stehen
   Also traegt der Knopf mobil eine EIGENE Beschriftung als ::before --
   die zentriert der Flex-Kasten des Knopfes zuverlaessig. Der Wortlaut
   ist derselbe wie auf dem Schirm, nur gekuerzt.

   Die React-Beschriftung wird NICHT ausgeblendet, sondern nur unsichtbar
   gestellt (1x1 px, clip-path): so bleibt "Kontakt aufnehmen" der
   Vorlesename des Knopfes. Mit display:none waere er verschwunden. */
@media (max-width:1023px){
  header[class*="RootLayoutHeader"] a[class*="__button"] [class*="buttonText"]{
    position:absolute !important; width:1px !important; height:1px !important;
    padding:0 !important; margin:0 !important; overflow:hidden !important;
    clip-path:inset(50%) !important; white-space:nowrap !important;
  }
  header[class*="RootLayoutHeader"] a[class*="__button"]::before{
    content:"Kontakt";
    position:relative; z-index:1;
    font:italic var(--font-weight-regular) 15px/1 var(--font-family-akzent);
    color:var(--color-beige-100);
  }
  header[class*="RootLayoutHeader"] a[class*="__button"]{
    /* Die Kopfzeile ist ein Raster aus drei gleichen Spalten (gemessen
       111,66 px bei 375). Der Knopf steht in der dritten und richtet
       sich rechts aus. Ohne Deckel wuchs er auf 148 px -- ueber seine
       Spalte hinaus und bis unter die Marke in der Mitte (Ueberlappung
       4 px gemessen). max-width:100% haelt ihn in seiner Spalte. */
    width:auto !important; min-width:0 !important; max-width:100% !important;
    padding:0 .95rem !important;
    justify-content:center !important; align-items:center !important;
    color:var(--color-beige-100) !important;
  }
}

/* ------------------------------------------------------------------
   Mobile-Finale, Modul 5 — die Beschriftungen im Icon-Raster.

   Befund bei 375 px: zwei Spalten a 156 px, Schrift 18 px. Drei
   Beschriftungen sind EIN Wort und laenger als ihre Spalte -- sie haben
   keine Umbruchstelle und liefen ueber die Kante:
     HAUSMEISTERDIENST   183 px
     KUNDENSPEZIFISCHE   182 px
     MIETERBETREUUNG     168 px
   Sichtbar als "HAUSMEISTERDIEN", "MIETERBETREUUN",
   "KUNDENSPEZIFISC" (Screenshot m5-ist-icons-375.png).

   Fix: Schrift auf 15 px. Damit misst das laengste Wort 152 px und
   passt in die 156er Spalte -- gerechnet aus der Messung, nicht
   geschaetzt. hyphens:auto und overflow-wrap:anywhere stehen als Netz
   dafuer, dass auch eine kuenftige laengere Beschriftung umbricht statt
   ueberzulaufen. Mehrzeilig ist ausdruecklich erlaubt.
   ------------------------------------------------------------------ */
@media (max-width:767px){
  ul[class*="MediaGrid"][class*="__items"] [class*="__text"]{
    font-size:15px !important; line-height:1.3 !important;
    hyphens:auto; -webkit-hyphens:auto;
    overflow-wrap:anywhere; word-break:normal;
  }
}

/* ------------------------------------------------------------------
   Revision 1, Modul 4 — Icon-Raster auf der Startseite.
   Der Rasterplatz bleibt, sein Inhalt wechselt vom Foto auf ein Icon.
   ------------------------------------------------------------------ */
/* Revision 2, Modul 10: deutlich kleiner und kompakter. Zehn Motive statt
   zwanzig, das Raster ruecht enger zusammen. Farben stecken im SVG selbst
   (Linien Dunkelgruen, Flaechen Oliv), deshalb hier keine Textfarbe mehr. */
.sw-icon{
  display:flex; align-items:center; justify-content:center;
  width:100%; height:100%;
}
[class*="MediaGrid"] ul[data-sw-icons="1"] .sw-icon svg{
  width:min(76px, 62%); height:auto;
}
/* Stillgelegte Rasterplaetze verschwinden ganz. */
[class*="MediaGrid"] ul[data-sw-icons="1"] li[data-sw-leer="1"]{ display:none !important; }

/* Mobil-Feinschliff, Modul 2 -- STREICHUNG NACH R5.
   Der Knopf "Zu den LEISTUNGEN" unter dem Icon-Raster entfaellt
   ersatzlos, auf dem Schirm wie auf dem Handy. Ausgeblendet statt aus
   dem Baum entfernt: er ist React-eigen, ein Entfernen wuerde beim
   naechsten Neuaufbau rueckgaengig gemacht.
   Er war das einzige Bedienelement der Sektion (gemessen: 1 Knopf,
   270x45, Ziel /services). Das Ziel bleibt ueber die Navigation und die
   Hero-Karten erreichbar. */
section[class*="MediaGridPush"] a[class*="MediaGridPush"][class*="Button-module"],
section[class*="MediaGridPush"] [class*="MediaGridPush"][class*="__button"]{
  display:none !important;
}
/* Engeres Raster: der Basis-Mirror rechnet mit 20 Hochformat-Kacheln. */
[class*="MediaGrid"] ul[data-sw-icons="1"]{
  row-gap:clamp(2rem,4vw,3.4rem) !important;
  column-gap:clamp(1.5rem,4vw,4rem) !important;
}
/* Die Zelle war auf ein Hochformat-Foto gerechnet. Fuer ein Icon reicht
   ein flacher Kasten -- sonst klafft zwischen Zeichen und Beschriftung
   ein halber Bildschirm. */
[class*="MediaGrid"] ul[data-sw-icons="1"] [class*="__mediaContainer"]{
  height:96px !important; aspect-ratio:auto !important;
}
/* Die Kachel trug ein festes Verhaeltnis 190/237 -- gerechnet auf ein
   Hochformat-Foto. Fuer ein Icon faellt es weg, sonst bleibt unter
   jedem Zeichen ein halber Bildschirm Luft stehen (gemessen). */
[class*="MediaGrid"] ul[data-sw-icons="1"] li{
  min-height:0 !important; aspect-ratio:auto !important; height:auto !important;
}
[class*="MediaGrid"] ul[data-sw-icons="1"] [class*="__legend"]{
  position:static !important; margin-top:.9em;
  /* Finale Runde (2026-09-17): Die Basis zentriert die Beschriftung ab 768 px
     ueber "position:absolute; left:50%; translate(-50%)" und laesst sie dabei
     in ihrer natuerlichen Breite stehen. Wir hatten nur die Position auf
     static gezogen -- der Versatz blieb und schob jede Beschriftung um ihre
     halbe Breite nach links (Ueberlappung "HAUSMEISTERDIENSTREINIGUNG") und
     die letzte Spalte 125 px aus der Seite (gemessen bei 768 und 900 px).
     Also Versatz weg, Breite = Spaltenbreite, dafuer umbrechen lassen. */
  transform:none !important; width:100% !important;
}
@media (min-width:768px){
  [class*="MediaGrid"] ul[data-sw-icons="1"] [class*="__legend"]{
    justify-content:center !important; text-align:center !important;
  }
}
/* Die Basis legt jede Zeile in eine Maske (nowrap + overflow:hidden) fuer ihre
   Zeilen-Einblendung. Die laeuft hier nicht (die Versaetze stehen auf 0), die
   Maske schnitt lange Namen aber ab ("ENTRUEMPELUNG U"). Im Icon-Raster darf
   die Beschriftung daher umbrechen. */
[class*="MediaGrid"] ul[data-sw-icons="1"] [class*="__legend"] span{
  white-space:normal !important; display:block !important; max-width:100%;
}
[class*="MediaGrid"] ul[data-sw-icons="1"] [class*="__legend"]{
  -webkit-hyphens:manual; hyphens:manual;   /* kein "LOESUNGEN NACH BE-/DARF" */
}
/* Ein einzelnes langes Wort kann nicht umbrechen: "HAUSMEISTERDIENST" misst
   183 px, die Spalte aber nur 159 px (768), 144 px (930) oder 160 px (1024).
   Die Beschriftung richtet sich darum ab 768 px nach der SPALTENBREITE und
   wird nur so weit kleiner, wie sie muss (16 px bleibt die Obergrenze). */
@media (min-width:768px){
  [class*="MediaGrid"] ul[data-sw-icons="1"] li{ container-type:inline-size; }
  /* die Groesse sitzt auf den inneren Spans (18 px), nicht auf dem Absatz */
  [class*="MediaGrid"] ul[data-sw-icons="1"] [class*="__legend"] span{
    font-size:min(18px, 9.5cqw) !important;
  }
}
.sw-icon svg{ width:100%; height:auto; max-height:100%; display:block; }
/* Dieselbe eingefrorene Einblendung wie im Hero: die Bildunterschrift steht
   per translateY(27px) unter ihrem beschnittenen Elternknoten und faehrt nie
   hoch. Gemessen. Nur im Icon-Raster festgesetzt. */
[class*="MediaGrid"] ul[data-sw-icons="1"] [class*="__text"]{ transform:none !important; }

/* ------------------------------------------------------------------
   Revision 1, Modul 6 — die zwei Chips ueber der Arbeitsweise-Buehne.
   Als HTML gesetzt, nicht ins Bild gebrannt: so bleiben sie in jeder
   Groesse scharf und passen sich dem Umbruch an. Sanwald-Gruen aus dem
   Token, heller Text fuer den Kontrast auf dunklem Grund.
   ------------------------------------------------------------------ */
/* Revision 2: die schwebenden Objekte sind weg, die Sequenz fuellt die
   Buehne. Die Chips ruecken an die Raender, wo das Modell nicht steht. */
/* Revision 3: feste Positionen auf halber Hoehe an beiden Raendern. Dort
   steht keine Textspalte -- die sitzen oben oder unten. Vorher lag Chip 1
   auf den Info-Kacheln (im Bild gemessen). */
}
}

/* ------------------------------------------------------------------
   Revision 1, Modul 7 — /kontakt/ traegt zwei klar getrennte Formulare.
   Ein sichtbarer Trenner und eigene Ueberschriften halten sie auseinander.
   ------------------------------------------------------------------ */
.sw-kontakt__h3{
  margin:0 0 1.1em;
  font:var(--font-weight-regular) clamp(13px,1.1vw,15px)/1.2 var(--font-family-content);
  letter-spacing:.13em; text-transform:uppercase; color:var(--color-grey-600);
}
.sw-kontakt__trenner{
  grid-column:1 / -1; height:1px; background:var(--color-beige-300);
  margin:clamp(3.5rem,7vw,6rem) 0 clamp(3rem,6vw,5rem);
  max-width:1440px; margin-inline:auto; width:100%;
}


/* ------------------------------------------------------------------
   Revision 2, Modul 3 — der Fuss steht auf Dunkelgruen, alles darauf
   in Weiss. Die Regeln greifen ueber den ganzen Fussbereich, damit auch
   Eingabefeld, Linien und Pfeil-Symbole mitziehen.
   ------------------------------------------------------------------ */
[class*="RootLayoutFooter"]{
  background:var(--color-grey-900) !important; color:#F2F4F1 !important;
}
[class*="RootLayoutFooter"] *{ color:#F2F4F1 !important; }
[class*="RootLayoutFooter"] a{ color:#F2F4F1 !important; }
[class*="RootLayoutFooter"] svg{ fill:currentColor; stroke:currentColor; }
[class*="RootLayoutFooter"] input{
  background:transparent !important; color:#F2F4F1 !important;
  border-color:rgba(242,244,241,.42) !important;
}
[class*="RootLayoutFooter"] input::placeholder{ color:rgba(242,244,241,.62) !important; }
/* Trennlinien und Unterstriche des Basis-Mirrors auf helle Werte drehen. */
[class*="RootLayoutFooter"] [class*="__emailCapture"] *,
[class*="RootLayoutFooter"] [class*="__legals"]{ border-color:rgba(242,244,241,.28) !important; }
[class*="RootLayoutFooter"]::before, [class*="RootLayoutFooter"]::after{
  background:rgba(242,244,241,.22) !important;
}


/* ------------------------------------------------------------------
   Revision 2, Modul 4 — solange das Menue offen ist, verschwinden die
   hellen Platten von Kopfzeile und Hero. Sonst schimmern sie durch den
   jetzt leicht durchsichtigen Overlay.
   ------------------------------------------------------------------ */
.sw-menue-auf [class*="RootLayoutHeader"] [class*="__logo"]{ background-color:transparent !important; }
.sw-menue-auf [class*="RootLayoutHeader"] a[class*="Button-module"]{ opacity:0 !important; }
.sw-menue-auf .sw-hero__pille,
.sw-menue-auf .sw-hero__karte{ opacity:0 !important; }
.sw-menue-auf [class*="RootLayoutHeader"] [class*="__logo"],
.sw-menue-auf [class*="RootLayoutHeader"] a[class*="Button-module"],
.sw-menue-auf .sw-hero__pille, .sw-menue-auf .sw-hero__karte{
  transition:opacity .45s var(--sw-nav-ruhig), background-color .45s var(--sw-nav-ruhig);
}

/* ------------------------------------------------------------------
   Revision 2, Modul 13 — "Kontakt aufnehmen" als eigener Knopf, fuenfte
   Position der Hauptspalte. Deutlich von den Nav-Links abgesetzt: Rahmen,
   Innenabstand, kleinere Schrift. Weiss auf Dunkelgruen.
   ------------------------------------------------------------------ */
.sw-nav__punkt--knopf{ margin-top:clamp(1.2rem,3vh,2.2rem); }
.sw-nav__knopf{
  display:inline-block; padding:.78em 1.9em;
  border:1px solid rgba(242,244,241,.62); border-radius:999px;
  font:var(--font-weight-regular) clamp(14px,1.25vw,18px)/1.2 var(--font-family-content);
  letter-spacing:.09em; text-transform:uppercase; color:var(--sw-nav-hell);
  transition:background-color .32s var(--sw-nav-ruhig), color .32s var(--sw-nav-ruhig),
             border-color .32s var(--sw-nav-ruhig), top 900ms var(--sw-nav-raus);
}
.sw-nav__knopf:hover, .sw-nav__knopf:focus-visible{
  background:var(--sw-nav-hell); color:var(--color-grey-900); border-color:var(--sw-nav-hell);
}
/* Die Rechtstexte stehen rechts daneben, klein und ruhig. */
.sw-nav__link--neben{
  font-size:clamp(13px,1.05vw,15px); color:rgba(242,244,241,.78);
}
.sw-nav__link--neben:hover{ color:var(--sw-nav-hell); }

@media (max-width:767px){
  /* Mobil: Knopf ueber die volle Breite, Rechtstexte darunter klein. */
  .sw-nav__punkt--knopf{ margin-top:1.4rem; }
  .sw-nav__knopf{ display:block; width:100%; text-align:center; padding:.85em 1rem; }
  .sw-nav__link--neben{ font-size:13px; }
}

/* ------------------------------------------------------------------
   Revision 2, Modul 2 — die Kopfzeile zerschnitt Ueberschriften.

   BEFUND: Der feste "Kontakt aufnehmen"-Knopf sitzt auf einer deckenden
   weissen Platte. Laeuft eine Ueberschrift darunter durch, wird sie mitten
   im Wort abgeschnitten -- gemessen an neun Stellen auf /ueber-uns/,
   darunter "Wo wir arbeiten" bei scrollY 10950.

   Der Basis-Mirror setzt die Kopfzeile ueber dem Hero auf
   theme-transparent und sonst auf theme-plain. Genau dort bekommt sie
   jetzt ein mattiertes Band: der Inhalt dahinter wird weich, statt hart
   zerschnitten zu werden. Ueber dem Hero bleibt alles wie es war.
   ------------------------------------------------------------------ */
/* ------------------------------------------------------------------
   Kundenversand, Modul 3 — Header EXAKT nach dem Basis-Original.

   Der Mirror wurde gerendert und vermessen (/accessibility/, 1440 px):
     Kopfzeile   background rgba(0,0,0,0) -- TRANSPARENT, Hoehe 75,
                 Klassen theme-plain is-visible, opacity 1
     MENU-Kasten rect 30,30,130,45 -- die helle Platte ist das ::after,
                 gemessen rgb(248,248,248)
     Marke       rect 676,39,88,28 -- frei, ohne Platte
     CTA-Kasten  rect 1162,30,248,45 -- ebenfalls Platte rgb(248,248,248)
   Oben und beim Hochscrollen MESSGLEICH -- die Kopfzeile kennt im
   Original gar keine Zustaende.

   Damit entfallen alle Sonderloesungen: das durchgehende Band, das Glas,
   die Scrollrichtungs-Steuerung und der adaptive Burger.
   ------------------------------------------------------------------ */
header[class*="RootLayoutHeader"]{
  background:transparent !important;
  opacity:1 !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  pointer-events:auto !important;
}


/* Revision 2, Modul 6 (Aufblenden der Buehne) ENTFAELLT im Kopie-Lauf.
   Das Original kennt kein Aufblenden: die Buehne steht vom ersten Bild
   an voll da (aus der laufenden Szene ausgelesen, Deckkraft durchgehend
   1). Die Regel und das Modul, das --sw-buehne setzte, sind entfernt. */

/* Letzter Schliff, Nachtrag zu Modul 2: Das Laufband der
   zurueckgeholten Service-Sektion ist breiter als das Fenster -- es
   soll ja durchlaufen. Mobil schob es die ganze Seite um 180 px auf
   (gemessen mit scrollWidth). overflow-x:clip faengt es an der
   Sektionskante ab, ohne einen Scrollkasten zu erzeugen (hidden wuerde
   das klebende Verhalten darin stoeren). */
@media (max-width:767px){
  div[data-type="full-size-scroller-stepper"]{ overflow-x:clip; }
}

/* ------------------------------------------------------------------
   Gebaeude-Sektion: KOPIE der Original-Sektion, keine Sonderregeln.

   Aus der laufenden Szene des Mirrors ausgelesen -- auf dem Schirm wie
   auf dem Handy:
     Sektion            3,00 vh (Schirm) bzw. 3,22 vh (Handy)
     Buehne             position:fixed, volle Fenstergroesse
     Renderer           volle Fenstergroesse, dpr 1
     Kamera             orthografisch, oben 1 / unten -1,
                        links/rechts = plusminus Seitenverhaeltnis,
                        Zoom 1,6 (faellt am Ende auf 1,51)
     Kamera y           faehrt 1,51 -> -0,68 ueber den Scrollweg
     Objekt             Position (0,-1.25,0), Skalierung 2,5/Modellhoehe
     Drehung            haengt am ZEIGER, nicht am Scroll
   Alle frueheren Sonderregeln dieser Sektion sind damit hinfaellig:
   das Ausblenden der Buehne, die quadratische Leinwand, die statische
   Buehne, die eigenen Polster und Schriftgroessen, das Aufloesen der
   Wortmasken. Sie sind entfernt -- die Sektion laeuft jetzt auf dem
   Aufbau des Originals.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Revision 3, Modul 6 — der CTA-Kasten zwischen Arbeitsweise-Sektion und
   Fuss entfaellt auf /services/ (Streichung nach R5).

   Der Kasten ist zugleich der ANKER, vor den das Arbeitsweise-Modul seine
   Sektion setzt. Er wird deshalb ausgeblendet, nicht aus dem Baum
   entfernt -- sonst faende das Modul beim Wiederanlauf nichts mehr und
   die ganze Sektion bliebe weg.

   Der Geschwister-Selektor trifft nur dort, wo .sw-arbeit davorsteht --
   also ausschliesslich auf /services/. Auf den uebrigen Seiten bleibt der
   Kasten unangetastet.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   Revision 3, Modul 7 — auf /stellenangebote/ steht statt des Formulars
   ein Knopf, der direkt zum Bewerbungsformular auf /kontakt/ springt.
   Das Formular selbst lebt dort unveraendert weiter und ist bei Netlify
   registriert.
   ------------------------------------------------------------------ */
.sw-bewerbung__knopf{
  display:inline-block; margin-top:.5rem;
  padding:.9em 2.2em; border-radius:999px;
  background:var(--color-grey-900); color:var(--color-beige-100);
  text-decoration:none;
  font:var(--font-weight-regular) clamp(14px,1.15vw,17px)/1.2 var(--font-family-content);
  letter-spacing:.09em; text-transform:uppercase;
  transition:background-color .3s cubic-bezier(.25,.46,.45,.94);
}
.sw-bewerbung__knopf:hover, .sw-bewerbung__knopf:focus-visible{
  background:var(--color-orange);
}
.sw-bewerbung__knopf:focus-visible{ outline:2px solid var(--color-grey-900); outline-offset:3px; }

/* ------------------------------------------------------------------
   Revision 3, Modul 8 -- Endscan-Fund: unsichtbarer Uptitle.

   Die Basis versteckt die Quell-Absaetze von Uptitle/Titel per
   `visibility:hidden` und laesst die Zeilen-Animation sichtbare Klone
   einsetzen. Auf /impressum/ hydriert React sauber (0 Warnungen), die
   Animation laeuft dort nie -- der Absatz bleibt versteckt und
   "Stand: 22. August 2026" fehlt komplett, waehrend /datenschutz/ ihn
   zeigt.

   `> p:only-child` trifft ausschliesslich Bloecke ohne Klone, also
   genau die Faelle, in denen die Animation nicht gelaufen ist.
   Gemessen am 2026-08-24: nur /impressum/ Uptitle erfuellt das,
   alle anderen Titelbloecke tragen SPAN-Klone. Rein visuelle Regel,
   kein Eingriff in SSR oder Nutzlast.
   ------------------------------------------------------------------ */
.LargeTitle-module-scss-module__WbxenW__uptitle > p:only-child,
.LargeTitle-module-scss-module__WbxenW__title > p:only-child{
  visibility:visible;
}

/* Final, Modul 1 (Nachtrag): heller Burger auf dunklem Grund.
   Dasselbe Token, das der geoeffnete Zustand nutzt -- kein neuer Wert. */
.sw-nav.sw-nav--hell .sw-nav__strich{ background-color:var(--sw-nav-hell); }

/* ------------------------------------------------------------------
   Final, Modul 2 — Doppel-Logo auf den Unterseiten.

   BEFUND: Nicht doppeltes Markup und kein Hydrations-Duplikat -- es gibt
   je Seite genau EIN Logo-Element (auf allen acht gemessen). Der Fehler
   sitzt darin: auf den Unterseiten ist es ein <a> und traegt das eigene
   <svg> der Basis (<use href="/brand.svg#logo">, die VOLLE Marke samt
   Wortmarke und Unterzeile). Darueber liegt seit Revision 2 unsere
   Bildmarke als Hintergrundbild. Zwei Zeichen, versetzt uebereinander.
   Auf der Startseite ist dasselbe Element ein leeres <div> -- dort fiel
   es nie auf.

   King-Entscheid aus Revision 2 gilt: im Kopf steht NUR die Bildmarke.
   Also faellt das innere SVG. Rein visuell, kein Eingriff in SSR oder
   Nutzlast -- die Hydration bleibt unberuehrt.
   ------------------------------------------------------------------ */
header[class*="RootLayoutHeader"] [class*="__logo"] > svg{
  display:none !important;
}

/* ------------------------------------------------------------------
   Final, Modul 6 — Arbeitsweise als Kamerafahrt (Vorbild: Referenz B,
   autorisierte Referenz Nr. 6).

   Buehne: bildschirmfuellend, klebend, dunkler Grund. Die Bildsequenz
   liegt als Canvas darunter, darueber ein Verlauf fuer die Lesbarkeit.
   Drei Kennzahl-Stopps im Satz der Referenz B: duenne Linie ueber die Bildmitte,
   links das Etikett in Versalien, rechts die grosse Zahl.

   Ersetzt den Nachbau der Referenz A vollstaendig (Streichung nach R5,
   Code und Bilder in _archiv/arbeitsweise-referenz-a/).
   ------------------------------------------------------------------ */
.sw-fahrt{
  grid-column:1 / -1; width:100%; height:500vh; position:relative;
  background:#0E1A16;
}
.sw-fahrt__sticky{
  position:sticky; top:0; height:100vh; width:100%;
  overflow:hidden; background:#0E1A16;
}
.sw-fahrt__canvas{ position:absolute; inset:0; width:100%; height:100%; }
.sw-fahrt__stand{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}
/* Leseschleier: unten dichter, damit Etikett und Zahl tragen. */
.sw-fahrt__sticky::after{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,
    rgba(14,26,22,.55) 0%, rgba(14,26,22,.18) 34%,
    rgba(14,26,22,.30) 64%, rgba(14,26,22,.72) 100%);
}

/* Einstieg: Label und Dreizeiler aus dem Bestand. */
.sw-fahrt__einstieg{
  position:absolute; z-index:2; left:0; right:0; top:50%;
  transform:translateY(-50%); text-align:center;
  padding:0 clamp(1.25rem,5vw,5rem);
  /* Modul 2 (2026-08-31): Text sofort sichtbar -- kein "transition" mehr,
     sonst laesst der Browser den Hartschnitt aus einblenden(p) weich
     auslaufen (siehe sw-flip__stufe fuer denselben Befund). */
  opacity:1;
}
.sw-fahrt__label{
  margin:0 0 1.1em; color:#F2F4F1; opacity:.72;
  font:var(--font-weight-regular) clamp(12px,1.05vw,15px)/1.2 var(--font-family-content);
  letter-spacing:.16em; text-transform:uppercase;
}
.sw-fahrt__gross{
  margin:0; color:#F2F4F1;
  font:var(--font-weight-regular) clamp(40px,8.33vw,120px)/1.0 var(--font-family-primary);
}
.sw-fahrt__gross span{ display:block; }
/* Revision 2, Block 1: Die Headline der Trust-Sektion hat mehrere Woerter je
   Zeile -- Groesse, Zeilenhoehe und Laufweite wie der Statement-Satz der
   Startseite (sw-statement__satz) statt der Einwort-Groesse. */
.sw-fahrt__gross--satz{
  font-size:clamp(30px,5.6vw,82px); line-height:1.06; letter-spacing:-.012em;
}

/* Kennzahl-Stopp: Linie ueber die Bildmitte, links Etikett, rechts Zahl. */
.sw-fahrt__stopp{
  position:absolute; z-index:2; left:0; right:0; top:50%;
  transform:translateY(-50%);
  padding:0 clamp(1.25rem,5vw,5rem);
  display:grid; grid-template-columns:1fr auto; align-items:center;
  column-gap:clamp(1.5rem,4vw,4rem);
  /* Modul 2 (2026-08-31): Text sofort sichtbar -- kein "transition" mehr,
     Begruendung siehe sw-fahrt__einstieg oben. */
  opacity:0; pointer-events:none;
}
.sw-fahrt__linie{
  grid-column:1 / -1; grid-row:1;
  height:1px; width:100%; background:rgba(242,244,241,.42);
}
.sw-fahrt__marke{
  grid-column:1; grid-row:2; justify-self:start; padding-top:1.1em;
  color:#F2F4F1; opacity:.86;
  font:var(--font-weight-regular) clamp(11px,1.05vw,15px)/1.3 var(--font-family-content);
  letter-spacing:.16em; text-transform:uppercase; max-width:22ch;
}
.sw-fahrt__zahl{
  grid-column:2; grid-row:2; justify-self:end; align-self:start;
  color:#F2F4F1; margin-top:-.16em;
  font:var(--font-weight-regular) clamp(76px,15vw,240px)/.86 var(--font-family-primary);
  letter-spacing:-.02em;
}

/* Handy und reduzierte Bewegung: Standbild, Text gestapelt, kein Kleben. */
.sw-fahrt[data-modus^="standbild"]{ height:auto; }
.sw-fahrt[data-modus^="standbild"] .sw-fahrt__sticky{
  position:relative; height:auto; overflow:visible;
  padding:clamp(3.5rem,9vw,8rem) clamp(1.25rem,5vw,5rem);
}
.sw-fahrt[data-modus^="standbild"] .sw-fahrt__stand{
  position:relative; inset:auto; width:100%; height:auto;
  aspect-ratio:16/9; margin-bottom:clamp(2rem,6vw,3.5rem);
}
.sw-fahrt[data-modus^="standbild"] .sw-fahrt__einstieg{
  position:relative; top:auto; transform:none; padding:0; text-align:left;
  margin-bottom:clamp(2.5rem,7vw,4rem);
}
.sw-fahrt[data-modus^="standbild"] .sw-fahrt__stopp{
  position:relative; top:auto; transform:none; padding:0; opacity:1;
  margin-bottom:clamp(2rem,6vw,3rem);
}
.sw-fahrt[data-modus^="standbild"] .sw-fahrt__sticky::after{ display:none; }

/* Der CTA-Kasten zwischen Sektion und Fuss entfaellt auf /services/
   (Streichung aus Revision 3, Modul 6 -- unveraendert gueltig, nur an
   den neuen Klassennamen gezogen). Ausgeblendet statt entfernt, weil er
   zugleich der Anker ist, vor den die Sektion gesetzt wird. */
/* Kundenversand, Modul 5: Der Geschwister-Selektor hing an .sw-fahrt.
   Seit die Technik-Sektion dazwischen steht, traf er nicht mehr und
   der zweite CTA-Kasten wurde wieder sichtbar. Jetzt haengt die
   Streichung an .sw-technik -- dem tatsaechlichen Vorgaenger.
   Ausgeblendet statt entfernt, weil der Kasten zugleich der Anker
   ist, vor den die Kamerafahrt gesetzt wird. */
.sw-technik + section[class*="Reassurance"],
.sw-fahrt + section[class*="Reassurance"]{ display:none !important; }

/* ------------------------------------------------------------------
   Final, Modul 7 — Statement-Sektion auf der Startseite.
   Vorbild: Referenz B (autorisiert, Nr. 6).

   Dunkelgruen-schwarze Buehne, das Objekt als ruhiges Zentrum, darueber
   der Versal-Satz. Die erste Zeile beginnt eingerueckt, die folgenden
   laufen bis an den Rand -- so entsteht die Blocksatz-Anmutung des
   Vorbilds, ohne echten Blocksatz und ohne Silbentrennung.
   ------------------------------------------------------------------ */
.sw-statement{
  /* Mobile-Finale, Modul 2: Das Objekt ist der SEKTIONSHINTERGRUND.

     Vorher lag es als eigenes Bild mittig auf der Buehne (76 % Breite,
     Hoehe automatisch). Sein weicher Alpha-Rand und der elliptische
     Schleier darueber zeichneten zusammen einen Hof, der als Kante
     lesbar wurde -- sichtbar bei 768 px, siehe
     screenshots/mobilfinale/m2-ist-statement-768.png.
     Jetzt fuellt es die Sektion randlos (inset:0, 100 %/100 %,
     object-fit:cover, kein Einzug, kein Radius, kein Rand). Damit KANN
     es konstruktionsbedingt keine Kante mehr geben: es gibt keine
     Bildbegrenzung innerhalb der Sektion. */
  position:relative; overflow:hidden;
  grid-column:1 / -1; width:100%;
  background:#0E1A16;
  padding:clamp(5rem,12vw,11rem) 0;
}
.sw-statement__buehne{
  /* static, damit Bild und Schleier sich auf die SEKTION beziehen und
     nicht auf die eingerueckte Buehne -- sonst blieben die seitlichen
     Polster frei und genau dort entstuende wieder eine Kante. */
  position:static; max-width:1728px; margin:0 auto;
  padding:0 clamp(1.25rem,5vw,5rem);
}
.sw-statement__objekt{
  position:absolute; inset:0; z-index:0;
  display:block; width:100%; height:100%; object-fit:cover;
  margin:0; border-radius:0;
  opacity:0;
  transition:opacity 1.1s cubic-bezier(.22,1,.36,1);
}
.sw-statement.is-da .sw-statement__objekt{ opacity:1; }

.sw-statement__satz{
  /* Mobile-Finale, Modul 2b -- Satz und Staffelung nach dem Vorbild.

     EIN Lauftext, linksbuendig, ausgefranst auslaufend. Die erste Zeile
     beginnt eingerueckt, die folgenden laufen ueber die volle Breite.
     Am Original gemessen (Referenz B, 1440 px Fenster): Textkasten
     1400 px, erste Zeile beginnt bei 710 px -- 50,7 % Einzug.
     Screenshot des Originals: screenshots/mobilfinale/referenz-b-statement.png

     Der Einzug steht zweimal: als text-indent fuer den Fliesstext, an
     dem der natuerliche Umbruch gemessen wird, und als padding-left der
     ersten Zeile, nachdem das Skript die Zeilen aufgeteilt hat. Beide
     lesen dieselbe Zahl -- sonst wandert der Umbruch beim Aufteilen. */
  --sw-satz-einzug:50.7%;
  position:relative; z-index:2; margin:0;
  color:#F2F4F1; text-transform:uppercase; text-align:left;
  font:var(--font-weight-regular) clamp(30px,5.6vw,82px)/1.06 var(--font-family-primary);
  letter-spacing:-.012em;
  text-indent:var(--sw-satz-einzug);
  pointer-events:none;
}
/* Nach dem Aufteilen traegt die erste ZEILE den Einzug, nicht der Kasten. */
.sw-statement__satz:has(.sw-statement__zeile){ text-indent:0; }
.sw-statement__zeile{
  /* Maske: was unterhalb der Zeile steht, bleibt verdeckt. Das Polster
     oben gibt den Umlautpunkten Luft (KUEMMERN) -- overflow schneidet an
     der Polsterkante, nicht an der Textkante. */
  display:block; overflow:hidden;
  padding-top:.18em; margin-top:-.18em;
}
.sw-statement__zeile[data-zeile="1"]{ padding-left:var(--sw-satz-einzug); }
.sw-statement__innen{
  /* Modul 2 (2026-08-31): Text sofort sichtbar -- kein Einlaufen mehr.
     Vorher zeilenweise von unten eingelaufen (is-da-gebunden); die Zeile
     steht jetzt von Anfang an voll da. Das Bild der Sektion (__objekt)
     blendet weiterhin ein, das ist keine Text-Einblendung. */
  display:block;
  transform:none; opacity:1;
}

@media (max-width:767px){
  /* Mobil ist der Kasten schmal -- ein halber Einzug liesse fuer die
     erste Zeile kaum Platz. Ein Drittel haelt den Auftakt, ohne den
     Umbruch zu zerreissen. */
  .sw-statement__satz{ font-size:clamp(28px,8.6vw,44px); --sw-satz-einzug:32%; }
}

@media (prefers-reduced-motion: reduce){
  .sw-statement__innen{ transition:none; transform:none; opacity:1; }
}

/* Letzter Schliff, Modul 2: Die Sektion ist ZURUECK.

   Sie war in Final/M7 stillgelegt worden, als die Statement-Sektion an
   ihre Stelle trat (Streichung nach R5). Sie traegt aber die
   Leistungs-Zeile "Vom Hausmeister, zur Gartenpflege, zur Reinigung."
   -- und die soll als erste Service-Sektion auf der Startseite stehen.
   Statt sie auszublenden, steht sie jetzt wieder im Fluss: gleich hinter
   dem Statement und damit vor dem Icon-Raster. */

/* ------------------------------------------------------------------
   Final, Modul 8 — Technik-Sektion mit Schnittzeichnung.
   Anmutung der "Technology"-Sektion der Referenz B: dunkler Fond,
   Zeichnung grosszuegig, daneben ein kurzer Bestands-Text.
   ------------------------------------------------------------------ */
.sw-technik{
  grid-column:1 / -1; width:100%;
  /* Exakt die Grundfarbe der Zeichnung, damit ihre Kante nicht als
     Rechteck aufliegt. Gemessen an sechs Randpunkten: rgb(22,45,37),
     Streuung hoechstens 3 je Kanal -- die Flaeche ist gleichmaessig,
     eine feste Farbe trifft sie also. */
  background:#162D25;
  padding:clamp(4.5rem,11vw,10rem) 0;
}
.sw-technik__raster{
  max-width:1728px; margin:0 auto;
  padding:0 clamp(1.25rem,5vw,5rem);
  display:grid; grid-template-columns:minmax(0,58fr) minmax(0,30fr);
  column-gap:clamp(2rem,6vw,6rem); align-items:center;
}
.sw-technik__bild{
  display:block; width:100%; height:auto;
  opacity:0; transform:translateY(1.6rem);
  transition:opacity 1s cubic-bezier(.22,1,.36,1),
             transform 1.1s cubic-bezier(.22,1,.36,1);
}
.sw-technik__text{
  /* Modul 2 (2026-08-31): Text sofort sichtbar -- kein Einblenden mehr.
     Das Bild (__bild) bleibt is-da-gebunden, das ist keine Text-Einblendung. */
  margin:0; color:#F2F4F1; opacity:1;
  font:var(--font-weight-regular) clamp(17px,1.5vw,23px)/1.55 var(--font-family-content);
  transform:none;
}
.sw-technik.is-da .sw-technik__bild{ opacity:1; transform:none; }

@media (max-width:767px){
  .sw-technik__raster{
    grid-template-columns:1fr; row-gap:clamp(1.75rem,6vw,2.5rem);
  }
}


/* Feinschliff 2, Modul 2: Flaeche hinter der Schrift leicht abdunkeln.
   Gemessen wurde der Grund unter den vier Zeilen: die hellsten Platten
   erreichen dort Luminanz 0,29 (Weiss 1,0), das ergibt gegen weisse
   Versalien ein Verhaeltnis von 2,9:1 -- unter dem Mindestwert 4,5:1.
   Ein ruhiger Schleier von 38 % Schwarz mittig, nach aussen auslaufend,
   druckt den Grund auf 0,18 und hebt das Verhaeltnis ueber 4,5:1,
   ohne das Objekt flach zu machen. */
/* Stapelung: Objekt (0) -- Schleier (1) -- Schrift (2). In der ersten
   Fassung lagen Schleier und Objekt beide auf 0; das Objekt kommt spaeter
   im Baum und lag deshalb VOR dem Schleier. Gemessen blieb der Kontrast
   dadurch bei 2,7:1, obwohl der Schleier auf 62 % stand. */
/* Mobile-Finale, Modul 2: Der Schleier liegt jetzt auf der SEKTION und
   deckt sie gleichmaessig -- vorher war es eine Ellipse auf der Buehne.
   Eine Ellipse hat einen Rand; auf den ruhigen Flaechen am Bildrand war
   genau dieser Rand als weiche Kante zu sehen. Ein gleichmaessiger
   Schleier hat keinen. Deckung nach der alten Messung gewaehlt: der
   Grund unter der Schrift erreichte Luminanz 0,29, gefordert sind
   4,5:1 gegen #F2F4F1 -- 55 % Schwarz druecken ihn auf 0,13. */
.sw-statement::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:rgba(6,12,10,.55);
}

/* Kontakt-Band vor dem Fuss AUSGEBAUT (Kundenversand, Modul 5).
   CSS in _archiv/kontakt-band-referenz-b.css. */


/* Feinschliff 2, Modul 9: Ueberschrift der Technik-Sektion.
   Satzbild wie die uebrigen grossen Saetze der Seite: Aeonik-Versalien
   auf den Schluesselwoertern, Feature Deck kursiv auf den Kleinwoertern. */
.sw-technik__spalte{ display:flex; flex-direction:column; gap:clamp(1.25rem,2.6vw,2.25rem); }
.sw-technik__titel{
  margin:0; color:#F2F4F1;
  font:var(--font-weight-regular) clamp(30px,3.9vw,56px)/1.06 var(--font-family-primary);
  letter-spacing:-.01em; text-wrap:balance;
}
.sw-technik__versal{ text-transform:uppercase; }
.sw-technik__akzent{ font-family:var(--font-family-akzent); font-style:italic; }


/* Kundenversand, Modul 5: Der einzige CTA von /services/ sitzt jetzt IM
   Skizzen-Block, unter dem Bestands-Text. Form und Masse vom
   Knopf der Referenz B uebernommen -- 220x60, angeschnittene Ecke. */
.sw-technik__knopf{
  align-self:flex-start;
  width:220px; height:60px;
  display:flex; align-items:center; justify-content:center;
  background:var(--color-beige-100);
  color:var(--color-grey-900); text-decoration:none;
  font:var(--font-weight-regular) clamp(12px,1.05vw,15px)/1.2 var(--font-family-content);
  letter-spacing:.14em; text-transform:uppercase;
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%);
  /* Modul 2 (2026-08-31): Text sofort sichtbar -- kein Einblenden mehr. */
  opacity:1; transform:none;
  transition:background-color .3s ease;
}
.sw-technik__knopf:hover{ background:var(--color-beige-300); }
@media (max-width:767px){ .sw-technik__knopf{ width:min(220px,72vw); height:52px; } }

/* ------------------------------------------------------------------
   Modul 2 (2026-08-31) — Text sofort sichtbar, King-Auftrag.

   Der Basis-Mirror blendet Ueberschriften und Fliesstext wort- bzw.
   zeilenweise ein, ausgeloest durch eine Modifikator-Klasse
   (is-title-visible, is-visible ...), die eine React-Komponente nach dem
   Mounten setzt. Auf den fuenf Routen mit fehlschlagender Hydration
   (siehe HYDRATION-BASELINE.md) kommt dieser Zustand nie oder erst nach
   sichtbarer Verzoegerung an -- BEFUND: die MainHero-Titelzeile der
   Startseite steht deswegen unabhaengig vom Scroll dauerhaft auf
   visibility:hidden (gemessen ueber den ganzen Scrollweg, siehe
   Verifikation zu diesem Modul). Auftrag des Betreibers: kein Text darf
   "erst kommen" -- alle betroffenen Textknoten werden hier permanent auf
   ihren Endzustand gezwungen. Selektoren ueber [class*=] (Next.js haengt
   den Modul-Hash an), damit sie auch nach einem Neu-Export halten. Bild-
   und 3D-Ebenen dieser Komponenten (Video-Maske, Muenze, Gebaeude-Drehung
   im DressDiscover-Canvas) sind hier NICHT angefasst -- nur Text.

   Ausdruecklich NICHT angefasst (Begruendung in EFFEKTE-DOKU.md Teil 2):
   die Marquee, der Prozent-Preloader, der Doppel-Text-Hover-Swap der
   Nav-/Fusslinks und das gestaffelte Oeffnen des Vollbild-Menues -- keins
   davon versteckt Text scrollgetrieben, alle drei sind als "aktiv"
   dokumentierte, gewollte Effekte.
   ------------------------------------------------------------------ */

/* MainHero -- die Titelzeile im Hero der Startseite. */
[class*="MainHero-"][class*="__title"]{ opacity:1 !important; }
[class*="MainHero-"][class*="__title"] > span{ visibility:visible !important; }
[class*="MainHero-"][class*="__title"] > span[data-line] .uppercase span{ transform:translateY(0) !important; }
[class*="MainHero-"][class*="__title"] > span[data-line] em span{ opacity:1 !important; }

/* SecondaryHero -- die Seitenueberschriften der Unterseiten. */
[class*="SecondaryHero-"][class*="__text"] > p{ visibility:visible !important; }
[class*="SecondaryHero-"][class*="__text"] span p{ transform:translateY(0) !important; }

/* LargeTitle -- grosse Satz-Ueberschriften (u. a. Zitat-Umfeld). */
[class*="LargeTitle-"][class*="__title"] > p,
[class*="LargeTitle-"][class*="__uptitle"] > p{ visibility:visible !important; }
[class*="LargeTitle-"][class*="__title"] > span[data-line] .uppercase span,
[class*="LargeTitle-"][class*="__title"] > span[data-line] em span,
[class*="LargeTitle-"][class*="__uptitle"] > span[data-line] .uppercase span{ transform:translateY(0) !important; }

/* DressDiscover -- Text neben der Gebaeude-Drehung (die Drehung selbst
   bleibt unangetastet, sie ist eine der fuenf erlaubten Animationen).

   NEUFASSUNG (King-Klarstellung, 2026-08-31, fuenfter Anlauf): Es SIND
   zwei Phrasen, die einander abloesen -- "Ordnung, die bleibt"
   (firstText) oben, "-- DAS IST unsere Aufgabe." (secondText) unten an
   der Grafik. Dazwischen darf firstText hinter dem Gebaeude verschwinden
   (die vorgesehene Verdeckung durch die Kamerafahrt). Der vierte Anlauf
   (secondText dauerhaft entfernt, firstText dauerhaft display:block)
   war falsch: firstText blieb dadurch auf der GANZEN Seite sichtbar,
   auch weit unterhalb der Sektion (.container ist position:fixed und
   deckt immer den ganzen Bildschirm -- ohne eigene Sichtbarkeits-
   pruefung bleibt jeder Inhalt darin ueberall stehen).

   Steuerung jetzt zweistufig, um den fruehen Timing-Wettlauf (siehe
   Git-Historie: "kommt fuer 1s und verschwindet direkt") auszuschliessen:
   1) sanwald-custom.js setzt eine eigene Klasse (sw-txt-an) auf genau
      das Element, das gerade dran ist, per Scroll-Fortschritt UND einer
      Sichtprüfung der SEKTION (nicht des fixen Containers) -- ausserhalb
      der Sektion bekommt keins der beiden Elemente die Klasse.
   2) Hier in CSS entscheidet ausschliesslich diese Klasse ueber
      display, mit !important. Das schlaegt IMMER die Inline-Styles, die
      die Vorlage ueber ihre eigene, an der scheiternden Hydration
      haengende up/down-Logik setzt -- kein Wettlauf zwischen zwei
      Skripten mehr, nur noch Kaskade.

   .title/.description bleiben unsichtbar fuer sehende Nutzer (alte
   Datenblatt-Ueberschrift/Technik-Absatz), ihr sr-only-Span traegt
   weiter den Text fuer Screenreader/SEO. */
[class*="DressDiscover-"][class*="__title"],
[class*="DressDiscover-"][class*="__description"]{ visibility:hidden !important; display:none !important; }
[class*="DressDiscover-"][class*="__firstText"],
[class*="DressDiscover-"][class*="__secondText"]{ display:none !important; }
[class*="DressDiscover-"][class*="__firstText"].sw-txt-an,
[class*="DressDiscover-"][class*="__secondText"].sw-txt-an{ display:block !important; opacity:1 !important; transform:translateY(0) !important; }
[class*="DressDiscover-"][class*="__firstText"] .uppercase span,
[class*="DressDiscover-"][class*="__firstText"] em span,
[class*="DressDiscover-"][class*="__secondText"] .uppercase span,
[class*="DressDiscover-"][class*="__secondText"] em span{ opacity:1 !important; transform:translateY(0) !important; }

/* King-Befund (2026-08-31): "Ordnung, die bleibt" springt beim Scrollen
   fuer einen Frame auf EINE Zeile statt zwei. Ursache: die sichtbare
   Struktur der Vorlage traegt KEINEN festen Umbruch -- nur die
   sr-only-Fassung (fuer Screenreader) hat ein echtes <br>, die sichtbare
   aria-hidden-Fassung reiht alle Woerter als data-line="0" lose
   aneinander und verlaesst sich auf natuerlichen Zeilenumbruch durch
   Platzmangel. Gemessen: "Ordnung," (602px) + "die" (161px) + "bleibt"
   (365px) passen bei 1400px Breite rechnerisch knapp AUF eine Zeile --
   der zweizeilige Normalzustand haengt an einer Breitenberechnung, die
   offenbar fuer einen Frame kurz anders ausfaellt. Fest erzwungen statt
   vom Zufall abhaengig: das <em> in firstText (traegt "die") und das
   vierte Wort in secondText ("unsere", der Umbruchpunkt der sr-only-
   Fassung) werden auf display:block gezwungen -- garantiert derselbe
   Umbruch bei jeder Breite, kein Wettlauf mehr.

   NICHT display:block auf dem Wortelement selbst (erster Versuch,
   sofort verworfen): das raeumt dem Wort seine eigene volle Zeile frei
   und wirft alles danach zusaetzlich in eine DRITTE Zeile ("Ordnung," /
   "die" / "BLEIBT" statt der gewollten zwei). Stattdessen ein leeres,
   blockweises ::before direkt vor dem Umbruch-Wort -- das erzwingt den
   Zeilenumbruch an der richtigen Stelle, laesst das Wort selbst aber
   inline, sodass alles danach auf DERSELBEN neuen Zeile weiterlaeuft. */
[class*="DressDiscover-"][class*="__firstText"] em::before{ content:""; display:block !important; }
/* Finale Runde (2026-09-17, King): Der Umbruch im Satz der Gebaeude-Sektion
   steht nicht mehr im CSS. Ein leeres ::before im Wort-Span brach die Zeile in
   der zerlegten Fassung gar nicht (gemessen), der Satz sprang deshalb beim
   Einblenden von zwei auf drei Zeilen. Das Modul "gebaeude-text" setzt jetzt
   selbst ein <br> vor dem zweiten "Man" -- in beiden Zustaenden dieselbe
   Zeilenaufteilung. */

/* Revision 2, Block 2 (2026-09-14) -- Einblendungsfehler "-- DAS IST unsere
   Aufgabe." (Kunden-Screenshots aus Safari: Text schon im Hero, unterhalb der
   Manifest-Sektion weiter sichtbar, darueber die Caption der Folgesektion).

   URSACHE, gemessen in WebKit und Chromium (1440 und 390 px): Traeger beider
   Phrasen ist .container der Gebaeude-Sektion. Die Basis setzt ihn auf
   position:fixed (.DressDiscover .container{height:100lvh;position:fixed;
   top:0;left:0;overflow:clip}). Sein Bezugsrahmen ist damit das FENSTER,
   nicht die 2 700 px hohe Sektion; kein Vorfahr traegt transform, filter oder
   clip-path, der ihn begrenzen koennte. Die Basis versteckt die Phrasen ueber
   React-Zustandsklassen (up/down/is-visible) -- diese Logik laeuft wegen der
   Baseline-Hydration nie. Seit Modul 2 (2026-08-31) haelt allein das Modul
   "gebaeude-text" die Phrasen ausserhalb der Sektion verborgen. Setzt es aus,
   steht der Text ueber der ganzen Seite: die Manifest-Sektion (deckender
   Grund) schiebt sich darueber, die Stepper-Sektion ist durchsichtig
   (rgba(0,0,0,0)) und zeigt ihn samt Caption -- das Bild der Screenshots.

   FIX nach Sollstruktur: Der Traeger klebt nur noch INNERHALB seiner Sektion
   (position:sticky, top:0). Die Sektion bleibt der Wrapper mit relativer
   Position und der Scrollstrecke der Basis (height:calc(100lvh + 1800px)).
   Vor der Sektion steht der Traeger unterhalb des Fensters, danach scrollt er
   mit ihr hinaus -- ohne JS, ohne Hydration. Kein Vorfahr traegt
   overflow:hidden (gemessen), sticky greift. Welche Phrase innerhalb der
   Sektion steht, entscheidet weiter "gebaeude-text"; die CSS-Voreinstellung
   bleibt unsichtbar (display:none, Regel oben). */
[class*="DressDiscover-"][class*="__DressDiscover"] > [class*="DressDiscover-"][class*="__container"]{
  position:sticky !important; top:0 !important;
}

/* DiptychMainEdito -- Fliesstext-Absaetze. */
[class*="DiptychMainEdito-"][class*="__text"] > span span{ transform:translateY(0) !important; }

/* FullSizeScrollerStepper -- die Leistungs-Zeile auf der Startseite.
   Der Bildanteil (media/image, mask-progress) bleibt unangetastet. */
[class*="FullSizeScrollerStepper-"][class*="__content"]{ opacity:1 !important; }
[class*="FullSizeScrollerStepper-"][class*="__text"]{ transform:translateY(0) !important; }

/* RootLayoutFooter -- die Navigationslinks im Fuss. Der Doppel-Text-
   Hover-Swap (copy/label) bleibt unangetastet, das ist Interaktion,
   kein scrollgetriebenes Einblenden. */
[class*="RootLayoutFooter-"][class*="__inner"]{ transform:translateY(0) !important; }

/* LargeQuote -- die Autorenzeile unter dem Zitat. Ihre Deckkraft wird von
   der (nicht editierbaren, siehe EFFEKTE-DOKU.md) WebGL-Muenzen-Logik
   jeden Frame per Inline-Style neu gesetzt und faellt dabei zeitweise auf
   0 (gemessen: unsichtbar zwischen rund 88 % und 96 % der Scrolltiefe der
   Startseite). Die Muenze selbst bleibt unangetastet -- nur der Name der
   Geschaeftsfuehrung wird fest sichtbar gehalten. !important noetig, weil
   Inline-Style sonst jede Klassenregel schlaegt. */
[class*="LargeQuote-"][class*="__author"]{ opacity:1 !important; }

/* ------------------------------------------------------------------
   King-Feedback (2026-08-31): Auf dem Handy soll das Bild in der
   Leistungs-Zeile (FullSizeScrollerStepper, "Vom Hausmeister, zur
   Gartenpflege, zur Reinigung.") von UNTEN nach OBEN einlaufen statt
   von links nach rechts.

   Die Vorlage baut ihre Maske als Rechteck, das von der Mitte aus
   gleichzeitig in x UND y waechst (--mask-progress 0..1) -- auf schmalen,
   hohen Handy-Bildschirmen liest sich das optisch als seitliches
   Einlaufen. Nur auf dem Mobil-Breakpoint (max-width 767px, derselbe wie
   sonst im Projekt) durch eine reine Vertikal-Maske ersetzt: bei
   Fortschritt 0 eine Linie am unteren Rand, bei Fortschritt 1 das volle
   Bild -- die sichtbare Kante wandert von unten nach oben. transform:scale
   der Vorlage (Zoom-Effekt beim Aufdecken) mit abgeschaltet, das gehoerte
   zur seitlichen Wirkung dazu. Nur diese eine Komponente, nur mobil --
   Desktop und alle anderen Bildstufen (Flipbook, Kamerafahrt, Gebaeude-
   Drehung) sind unangetastet. */
@media (max-width:767px){
  [class*="FullSizeScrollerStepper-"][class*="__media"]{
    clip-path:polygon(
      0% 100%,
      100% 100%,
      100% calc(100% - (100% * var(--mask-progress, 0))),
      0% calc(100% - (100% * var(--mask-progress, 0)))
    ) !important;
    transform:none !important;
    transform-origin:50% 100% !important;
  }
}

/* ------------------------------------------------------------------
   Revision 2, Block 6 (2026-09-14) -- /services/: Leistungen in der
   Modelle-Struktur der Referenz C (Mechanik im Modul "leistungen" in
   sanwald-custom.js). Masse aus der Vorlage; die rechnet 1rem = 100vw/1920
   am Schirm und 100vw/375 am Handy -- hier als vw/clamp umgerechnet, die
   Vorlagenwerte stehen dahinter. Farben (#1A322A, #F2F4F1, #616837) und
   Schriften (Aeonik, Feature Deck) aus dieser Datei; keine Schriften,
   Farben oder Bilder der Vorlage.
   ------------------------------------------------------------------ */
.sw-leistungen{
  grid-column:1 / -1; width:100%; position:relative;
  margin-top:100px; margin-bottom:100px;             /* Abstaende der Stepper-Sektion (Basis) */
}
@media (min-width:930px){
  .sw-leistungen{ margin-top:200px; margin-bottom:200px; }
}
/* Korrektur des Kings (2026-09-14): Die Leistungen stehen auf der Startseite
   hinter der Stepper-Sektion, die zuruecktritt -- ausgeblendet statt entfernt
   (React-eigen). Der Selektor trifft nur, wenn die Leistungen wirklich folgen;
   ohne Skript bleibt die Basis-Sektion sichtbar. /services/ zeigt wieder ihre
   eigene Leistungs-Sektion. */
div[data-type="full-size-scroller-stepper"]:has(+ .sw-leistungen){ display:none !important; }

.sw-leistung{ position:relative; }
.sw-leistung__karte--liste{ display:none; }

/* Editorial-Karte: 100vh, Bild vollflaechig, Verlauf, Inhalt oben.
   sticky wie in der Vorlage -- der gleich hohe Wrapper laesst die Karte
   dort wie hier im normalen Fluss laufen. */
.sw-leistung__karte--editorial{
  position:sticky; top:0; z-index:1;
  display:block; width:100%; height:100vh; overflow:hidden;
  color:#F2F4F1; background:var(--color-grey-900);
  transform-origin:50% 50%;
}
/* Grund hinter den Karten: fuellt den Rand, den das Schrumpfen einer Karte
   kurz freigibt (Vorlage: schwarz). Nur am Schirm -- mobil steht die Liste
   auf dem hellen Seitengrund. */
@media (min-width:768px){
  .sw-leistungen__katalog{ background:var(--color-grey-900); }
}
.sw-leistung__bild{ position:absolute; inset:0; }
.sw-leistung__bild picture{ display:block; width:100%; height:100%; }
.sw-leistung__bild img{ display:block; width:100%; height:100%; object-fit:cover; }
.sw-leistung__verlauf{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  /* Vorlage: Schwarz .88 -> .6 (35 %) -> 0 (65 %). Die Sanwald-Motive sind
     heller (weisse Waende, Tageslicht) -- dichter und laenger, im Dunkel der
     Buehnen-Sektionen (#0E1A16). */
  background:linear-gradient(180deg,
    rgba(14,26,22,.92) 0%, rgba(14,26,22,.76) 38%,
    rgba(14,26,22,.28) 68%, rgba(14,26,22,.08) 100%);
}
.sw-leistung__inhalt{
  position:relative; z-index:2; height:100%;
  display:flex; flex-direction:column; justify-content:flex-start;
  padding-top:clamp(110px, 7.8125vw, 150px);      /* Vorlage 150rem, mobil 110rem */
  padding-bottom:clamp(40px, 3.125vw, 60px);      /* Vorlage 60rem */
}
.sw-leistung__rahmen{ padding:0 clamp(1.25rem,5vw,5rem); }
.sw-leistung__tag,
.sw-leistung__label{
  margin:0;
  font:var(--font-weight-regular) clamp(12px,1.05vw,15px)/1.2 var(--font-family-content);
  letter-spacing:.16em; text-transform:uppercase; opacity:.72;
}
.sw-leistung__tag{ margin-bottom:clamp(10px,.833vw,16px); }   /* Vorlage 16rem */
.sw-leistung__kopf{ margin-bottom:clamp(24px,2.5vw,48px); }    /* Vorlage 48rem */
.sw-leistung__titel{
  margin:0; max-width:15ch;
  font:var(--font-weight-regular) clamp(34px,8.33vw,120px)/1.0 var(--font-family-primary);
  letter-spacing:-.02em;
  hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;
}
.sw-leistung__spalten{ display:flex; flex-wrap:wrap; gap:clamp(32px,3.125vw,60px); }   /* 60rem, mobil 32rem */
.sw-leistung__ueberblick{
  flex:1 1 clamp(260px,21.875vw,420px); max-width:56ch;                             /* 420rem */
  display:flex; flex-direction:column; gap:clamp(10px,.833vw,16px);
}
.sw-leistung__text{
  margin:0; font:var(--font-weight-regular) clamp(17px,1.5vw,23px)/1.55 var(--font-family-content);
}
.sw-leistung__gebiet{
  flex:1 1 clamp(200px,14.583vw,280px); max-width:clamp(240px,17.708vw,340px);       /* 280rem / 340rem */
  display:flex; flex-direction:column; gap:clamp(10px,.729vw,14px);
}
.sw-leistung__linie{ height:1px; width:100%; background:currentColor; opacity:.4; }
.sw-leistung__wert,
.sw-leistung__liste{
  margin:0; font:var(--font-weight-regular) clamp(15px,1.1vw,18px)/1.45 var(--font-family-content);
}
.sw-leistung__liste{ list-style:none; padding:0; display:flex; flex-direction:column; gap:4px; }
.sw-leistung__zusatz{
  display:flex; flex-wrap:wrap; gap:clamp(14px,1.042vw,20px) clamp(28px,2.5vw,48px);  /* 20rem 48rem */
  margin-top:clamp(12px,.729vw,14px); padding-top:clamp(12px,.729vw,14px);          /* 14rem */
  border-top:1px solid rgba(242,244,241,.18); max-width:56ch;
}
.sw-leistung__zusatz-zeile{ display:flex; flex-direction:column; gap:6px; }
/* Knopf unten rechts in der Karte (Vorlage 30rem / 60rem), Formsprache des
   Kontakt-Knopfs in der Kopfzeile: volle dunkle Pille, Akzentwort kursiv. */
.sw-leistung__cta{
  position:absolute; right:clamp(1.25rem,5vw,5rem); bottom:clamp(40px,3.125vw,60px); z-index:3;
  display:inline-flex; align-items:center; height:45px; padding:0 1.4rem; border-radius:999px;
  background:var(--color-grey-900); color:var(--color-beige-100); text-decoration:none;
  font:var(--font-weight-regular) clamp(14px,1.05vw,16px)/1 var(--font-family-content);
  transition:background .5s cubic-bezier(.65,0,.35,1);
}
.sw-leistung__cta em{
  margin-left:.28em; font-family:var(--font-family-akzent); font-style:italic; font-size:1.06em;
}
.sw-leistung__cta:hover{ background:var(--color-orange); }
.sw-leistung__cta:focus-visible{ outline:2px solid var(--color-beige-100); outline-offset:3px; }

/* Liste: Nummer, Name, ein Satz. Am Schirm auf dem dunklen Katalog-Grund,
   mobil wie in der Vorlage auf hellem Grund mit dunkler Schrift. */
.sw-leistungen[data-layout="list"] .sw-leistung__karte--editorial{ display:none; }
.sw-leistungen[data-layout="list"] .sw-leistung__karte--liste{
  display:grid; grid-template-columns:clamp(128px,11.5vw,180px) minmax(0,1fr) minmax(0,1.25fr);
  align-items:baseline; column-gap:clamp(16px,2.5vw,48px);
  padding:clamp(20px,1.667vw,32px) clamp(1.25rem,5vw,5rem);                         /* 32rem */
  border-bottom:1px solid rgba(242,244,241,.15); color:#F2F4F1;
}
/* "Leistung VIII" ist die laengste Nummer -- sie bleibt auf einer Zeile
   (erste Messung: "LEISTUNG / VII" brach bei 115 px Spaltenbreite um). */
.sw-leistungen[data-layout="list"] .sw-leistung__tag{ white-space:nowrap; }
.sw-leistung__listtitel{
  margin:0; font:var(--font-weight-regular) clamp(28px,3.9vw,56px)/1.06 var(--font-family-primary);
  letter-spacing:-.01em; hyphens:auto; -webkit-hyphens:auto; overflow-wrap:break-word;
}
.sw-leistung__satz{
  margin:0; font:var(--font-weight-regular) clamp(16px,1.25vw,20px)/1.5 var(--font-family-content);
  opacity:.86;
}

/* Umschalter Editorial/Liste -- Aufbau und Masse der Vorlage (Grundmass am
   1920er-Schirm), nur sichtbar, solange die Leistungen im Bild sind. */
.sw-leistungen__umschalter{
  position:fixed; left:0; right:0; bottom:20px; z-index:99;
  display:flex; justify-content:center; pointer-events:none;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility 0s linear .25s;
}
.sw-leistungen.is-im-bild .sw-leistungen__umschalter{
  opacity:1; visibility:visible; transition:opacity .25s ease;
}
.sw-leistungen__optionen{
  pointer-events:auto; display:flex; gap:6px; padding:4px;
  background:var(--color-grey-900); border-radius:4px;
}
.sw-leistungen__option{
  display:flex; align-items:center; gap:10px; padding:6px 16px 6px 6px;
  border:0; border-radius:4px; background:transparent; color:var(--color-beige-100); cursor:pointer;
  font:500 13px/1 var(--font-family-content);
  transition:background-color .45s, color .45s;
}
.sw-leistungen__option.is-active{ background:var(--color-beige-100); color:var(--color-grey-900); }
.sw-leistungen__option:focus-visible{ outline:2px solid var(--color-beige-100); outline-offset:2px; }
.sw-leistungen__icon{
  display:flex; align-items:center; justify-content:center; gap:2px; flex-shrink:0;
  width:28px; height:28px; background:var(--color-beige-100); border-radius:3px;
}
.sw-leistungen__wuerfel{ width:10px; height:10px; background:var(--color-grey-900); border-radius:2px; }
.sw-leistungen__wuerfel.is-klein{ width:6px; height:6px; }

@media (max-width:767px){
  .sw-leistung__inhalt{ padding-top:110px; }
  .sw-leistung__spalten{ gap:32px; }
  /* Vorlage mobil: Knopf in den Fluss unter den Inhalt. */
  .sw-leistung__cta{ position:static; margin-top:16px; }
  .sw-leistungen[data-layout="list"] .sw-leistung__karte--liste,
  .sw-leistungen:not([data-layout]) .sw-leistung__karte--liste{
    display:flex; flex-direction:column; gap:6px; padding:28px 20px;
    color:var(--color-grey-900); border-bottom:1px solid rgba(26,50,42,.15);
  }
  /* Ohne Wahl steht mobil die Liste (wie in der Vorlage). */
  .sw-leistungen:not([data-layout]) .sw-leistung__karte--editorial{ display:none; }
  .sw-leistungen__umschalter{ bottom:16px; }
}
@media (prefers-reduced-motion: reduce){
  .sw-leistungen__option, .sw-leistung__cta, .sw-leistungen__umschalter{ transition:none; }
}

/* ------------------------------------------------------------------
   Korrektur des Kings zu Block 6 (2026-09-14) -- Einstieg des Leistungs-
   Katalogs auf der Startseite im Aufbau der Stepper-Sektion der Basis:
   Titel oben, darunter das kleine Bild, das sich zum Vollbild oeffnet; voll
   offen traegt es die Karte "Leistung I". Werte aus der Basis (gemessen und
   aus ihrem CSS): Abstaende 200/100 px, Titel 165 px unter der Oberkante,
   30 px Rand, 36 px (mobil 32 px) Luecke, Schriften --font-label-1 /
   --font-display-1 samt Laufweiten, Formeln fuer Rahmen, Maske und
   Skalierung, Overlay .6 s ease-out-quart. --p (Fortschritt 0..1) und --vr
   (Fensterverhaeltnis) setzt das Modul "leistungen".
   ------------------------------------------------------------------ */
.sw-leistungen__einstieg{ position:relative; }
.sw-leistungen__kopf{ margin:0 20px 32px; color:var(--color-grey-900); text-align:center; }
.sw-leistungen__kopfinnen{ display:flex; flex-direction:column; align-items:center; gap:32px; }
.sw-leistungen__caption{ margin:0; font:var(--font-label-1); letter-spacing:.02em; }
.sw-leistungen__titel{ margin:0; font:var(--font-display-1); letter-spacing:.01em; }
.sw-leistungen__titel em{
  font-family:var(--font-family-akzent); font-style:italic; font-size:1.06em; letter-spacing:-.005em;
}
.sw-leistungen__huelle{
  position:relative;
  height:calc(100vh + 120vh + 50vh); height:calc(100lvh + 120lvh + 50lvh);   /* Buehne + Oeffnungsweg + Halt */
}
.sw-leistungen__buehne{
  position:sticky; top:0; display:block; overflow:hidden;
  height:100vh; height:100lvh;
  color:#F2F4F1; transform-origin:50% 50%;
}
.sw-leistungen__rahmen{ position:relative; width:100%; height:100%; margin:0 auto; overflow:hidden; }
.sw-leistungen__rahmen picture{ display:block; width:100%; height:100%; }
.sw-leistungen__medium{ display:block; width:100%; height:100%; object-fit:cover; }
/* Unter 930 px: das Bild oeffnet von unten nach oben (King-Feedback 2026-08-31). */
@media (max-width:929px){
  .sw-leistungen__medium{
    clip-path:polygon(0% 100%, 100% 100%,
      100% calc(100% - 100% * var(--p, 0)), 0% calc(100% - 100% * var(--p, 0)));
  }
}
@media (min-width:930px){
  .sw-leistungen__kopf{ position:sticky; top:0; height:0; margin:0; z-index:0; }
  .sw-leistungen__kopfinnen{
    position:absolute; top:165px; left:50%; transform:translateX(-50%);
    width:calc(100% - 60px); max-width:1728px; gap:36px;
  }
  .sw-leistungen__caption{ letter-spacing:.04em; }
  .sw-leistungen__titel{ letter-spacing:0; }
  .sw-leistungen__huelle{ height:calc(100vh + 106.7vh + 50vh); height:calc(100lvh + 106.7lvh + 50lvh); }
  .sw-leistungen__rahmen{
    width:auto;
    aspect-ratio:clamp(1, 1 + var(--p, 0) * (var(--vr, 1.6) - 1), var(--vr, 1.6));
  }
  .sw-leistungen__medium{
    --offset:25%; --scale:.5;
    clip-path:polygon(
      calc(30% * (1 - var(--p, 0))) calc((30% + var(--offset)) * (1 - var(--p, 0))),
      calc(70% + 30% * var(--p, 0)) calc((30% + var(--offset)) * (1 - var(--p, 0))),
      calc(70% + 30% * var(--p, 0)) calc(70% + var(--offset) + (100% - (70% + var(--offset))) * var(--p, 0)),
      calc(30% * (1 - var(--p, 0))) calc(70% + var(--offset) + (100% - (70% + var(--offset))) * var(--p, 0)));
    transform:scale(max(var(--scale), min(var(--scale) + (1 - var(--scale)) * var(--p, 0), 1)));
    transform-origin:50% calc(50% + var(--offset));
  }
}
/* Grund hinter der Buehne, sobald das Bild offen ist: beim Schrumpfen in der
   Ueberblendung zeigt der Rand dasselbe Dunkel wie der Katalog (Vorlage:
   schwarz) statt des hellen Seitengrunds und des Titels dahinter. Nur ab
   768 px -- wie der Katalog-Grund; mobil steht die Liste auf hellem Grund. */
@media (min-width:768px){
  .sw-leistungen.is-offen .sw-leistungen__huelle{ background:var(--color-grey-900); }
}
/* Leistung I auf der Buehne: erst bei voll offenem Bild (is-offen). */
.sw-leistungen__buehne .sw-leistung__verlauf,
.sw-leistungen__buehne .sw-leistung__inhalt{
  position:absolute; inset:0; opacity:0; visibility:hidden;
  transition:opacity .6s var(--ease-out-quart), visibility 0s linear .6s;
}
.sw-leistungen.is-offen .sw-leistungen__buehne .sw-leistung__verlauf,
.sw-leistungen.is-offen .sw-leistungen__buehne .sw-leistung__inhalt{
  opacity:1; visibility:visible; transition:opacity .6s var(--ease-out-quart);
}
/* Liste: Buehne ohne Overlay, Leistung I als erste Zeile. Editorial: Leistung I
   steht auf der Buehne, ihre Katalog-Zeile tritt zurueck. */
.sw-leistungen[data-layout="list"] .sw-leistungen__buehne .sw-leistung__verlauf,
.sw-leistungen[data-layout="list"] .sw-leistungen__buehne .sw-leistung__inhalt{ display:none; }
.sw-leistungen:not([data-layout="list"]) .sw-leistung.is-einstieg{ display:none; }
@media (max-width:767px){
  .sw-leistungen:not([data-layout]) .sw-leistungen__buehne .sw-leistung__verlauf,
  .sw-leistungen:not([data-layout]) .sw-leistungen__buehne .sw-leistung__inhalt{ display:none; }
  .sw-leistungen:not([data-layout]) .sw-leistung.is-einstieg{ display:block; }
}
@media (prefers-reduced-motion: reduce){
  .sw-leistungen__huelle{ height:100vh; height:100lvh; }
  .sw-leistungen__buehne .sw-leistung__verlauf,
  .sw-leistungen__buehne .sw-leistung__inhalt{ transition:none; }
}

/* ------------------------------------------------------------------
   Finale Runde (2026-09-17, King) -- Startseiten-Sektion und Zitat.
   ------------------------------------------------------------------ */
/* Das kleine Einzelbild in der Mitte der Sektion faellt weg; die beiden Bilder
   darunter ruecken damit hoch. Die Komponente bleibt im Baum (React-eigen),
   sie steht nur auf der Startseite. */
[class*="DiptychSingleMaskMedia"]{ display:none !important; }
/* Der Knopf steht jetzt direkt ueber dem Text (Modul "diptych-knopf"). */
[class*="DiptychButton"][data-sw-knopf="oben"]{
  margin-top:0 !important; margin-bottom:clamp(18px,1.8vw,28px) !important;
}
[data-sw-knopf="oben"] + [class*="DiptychMainEdito"]{ margin-top:0 !important; }

/* Die beiden Gesellschafter in der Zitat-Sektion von /ueber-uns/: eigene
   Bildspalte links neben dem Absatz (die Bildspalte der Basis ist dort leer).
   Masse aus dem Raster der Sektion: linker Freiraum 30 bis 424 px bei 1440. */
section[class*="MediaQuote"] [class*="__container"]{ position:relative; }


/* Livegang IONOS (2026-09-17): Rueckmeldung der Formulare.
   Das Modul "formulare" setzt diesen Absatz an den Anfang des betroffenen
   Formulars -- als Fehlermeldung nach einem missglueckten Versand oder als
   Bestaetigung der Anmeldung im Fuss (dort auf dunklem Grund). */
.sw-form__meldung{
  margin:0 0 .6rem; padding:.5rem 0 .5rem .7rem;
  border-left:2px solid var(--color-grey-300);
  font:var(--font-weight-regular) .9375rem/1.45 var(--font-family-content);
  color:var(--color-grey-900);
}
.sw-form__meldung[data-sw-art="fehler"]{ border-left-color:var(--color-orange); }
footer .sw-form__meldung{ color:#F2F4F1; border-left-color:rgba(242,244,241,.45); }
footer .sw-form__meldung[data-sw-art="fehler"]{ border-left-color:var(--color-orange); }

/* King, 2026-09-18: Instagram und LinkedIn erstmal weg. Die Verweise gehoeren
   der Basis (Fuss und Vollbild-Menue) und wuerden nach jedem React-Neuaufbau
   wieder dastehen -- darum hier in der eigenen Schicht ausgeblendet statt aus
   dem Baum geschnitten. Aus dem JSON-LD (sameAs) sind sie ganz entfernt. */
a[href*="instagram.com"], a[href*="linkedin.com"]{ display:none !important; }
li:has(> a[href*="instagram.com"]), li:has(> a[href*="linkedin.com"]){ display:none !important; }

/* King, 2026-09-18: Der Kontakt-Knopf im Kopf verschwindet, sobald gescrollt
   wird, und kommt am Seitenanfang zurueck. Das Modul "kopf-knopf" setzt dazu
   sw-gescrollt auf <html>. Menue-Knopf und Wortmarke bleiben stehen. */
header[class*="RootLayoutHeader"] a[href^="/kontakt"][class*="Button"]{
  transition:opacity .28s var(--ease-out-quart, ease), transform .28s var(--ease-out-quart, ease);
}
html.sw-gescrollt header[class*="RootLayoutHeader"] a[href^="/kontakt"][class*="Button"]{
  opacity:0; transform:translateY(-10px); pointer-events:none; visibility:hidden;
}


/* King, 2026-09-18: Beim Scrollen sprang die Phrase kurz in eine andere
   Zeilenaufteilung. Ursache ist die gestaffelte Wort-Einblendung der Vorlage:
   die Woerter fahren einzeln in ihre Endlage, und solange sie unterwegs sind,
   sitzt der Umbruch woanders (gemessen bei gleicher Breite und gleicher Hoehe,
   nur andere Wortverteilung). Hier bekommen die Woerter keine Bewegung mehr --
   sie stehen von der ersten Bildschirmausgabe an, wo sie hingehoeren. */
[class*="DressDiscover-"][class*="__firstText"] span,
[class*="DressDiscover-"][class*="__secondText"] span,
[class*="DressDiscover-"][class*="__firstText"] em,
[class*="DressDiscover-"][class*="__secondText"] em{
  transition:none !important; animation:none !important;
  transform:none !important; opacity:1 !important;
}


/* Gruender-Block unter dem Zitat auf /ueber-uns/ (King, 2026-09-18).
   Format aus dem Triptychon derselben Seite uebernommen: Aussenrand 30 px,
   Fuge 10 px, Kachel 549:637. Zwei Kacheln nebeneinander in der Breite EINER
   Triptychon-Kachel-Reihe (je knapp ein Drittel), links buendig mit dem
   Satzspiegel; auf dem Handy untereinander und in voller Breite. */
.sw-gruenderblock{
  display:block; margin:clamp(48px,7vw,120px) 0 clamp(64px,9vw,140px);
  padding:0 var(--sw-rand, 30px);
}
.sw-gruenderblock__reihe{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px; max-width:916px;
  margin-inline:auto;            /* mittig, gleicher Abstand links wie rechts */
}
.sw-gruenderblock__kachel{ margin:0; display:block; }
.sw-gruenderblock__bild{
  display:block; width:100%; height:auto; aspect-ratio:549 / 637;
  object-fit:cover; object-position:50% 22%;
  background:rgba(26,50,42,.06);
}
.sw-gruenderblock__name{
  margin-top:clamp(10px,1vw,16px);
  font:var(--font-weight-regular) .8125rem/1.3 var(--font-family-content);
  letter-spacing:.08em; text-transform:uppercase; color:var(--color-grey-900);
}
@media (max-width:767px){
  .sw-gruenderblock{ padding:0 20px; margin:clamp(40px,10vw,64px) 0 clamp(48px,12vw,80px); }
  .sw-gruenderblock__reihe{ grid-template-columns:minmax(0,1fr); gap:clamp(24px,6vw,36px); max-width:none; }
}

/* Die Huelle um "Man merkt es." (Modul gebaeude-text). Als Block bricht sie
   immer um -- ohne Messung, ohne <br>, damit nichts mehr aufschaukelt. */
[class*="DressDiscover-"] .sw-satzzeile{ display:block; }