/* ==========================================================================
   BUZZ Entertainment AG — Stylesheet
   Richtung A · Bühne (dunkel). Designsystem siehe design-briefing.md
   Aufbau: @font-face → Tokens → Grundlagen → Layout → Komponenten
           → Responsive → Bewegung → Druck
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften — alle lokal, keine externen Schriftserver
      Grotesque   = Markenschrift, lizenzpflichtig, von BUZZ beigestellt
      Public Sans = Fliesstext, SIL Open Font License
   -------------------------------------------------------------------------- */

/* Solange die Grotesque-Dateien fehlen, greift die Ausweichkette (Public Sans).
   Das Layout bleibt identisch, nur der Markencharakter fehlt.
   Heissen eure Dateien anders: hier die vier src-Pfade anpassen, sonst nichts. */

@font-face {
  font-family: 'Grotesque';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/grotesque-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Grotesque';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/grotesque-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Grotesque';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/grotesque-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Grotesque';
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/grotesque-700i.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/public-sans-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Public Sans';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url('../assets/fonts/public-sans-var-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   2. Tokens

   Die Namen sind bewusst rollenbasiert (bg/fg), nicht farbbasiert. Ein
   Stylesheet, in dem `--paper` schwarz ist, führt beim nächsten Eingriff in
   die Irre. Alle Kontraste sind gemessen, die Werte stehen im Briefing.
   -------------------------------------------------------------------------- */

:root {
  /* Flächen */
  --bg: #0A0A0B;          /* Grundfläche */
  --bg-2: #131317;        /* abgesetzte Fläche, Fusszeile, Panels */
  --bg-3: #191920;        /* Hinweisboxen, Eingabefelder */

  /* Schrift */
  --fg: #EFEDE8;          /* Überschriften, Hauptschrift  ~17.2:1 */
  --fg-2: #CBC6BE;        /* Lead-Absätze                 ~12.4:1 */
  --fg-3: #ADA79E;        /* Fliesstext                    ~8.7:1 */
  /* Unterste Stufe der Grauleiter. Auf dunklem Grund ist der lesbare Bereich
     schmaler als auf hellem: ein Ton, der noch dunkler wäre, fällt unter 4.5:1.
     Eine weitere Stufe darunter gibt es deshalb bewusst nicht. */
  --fg-mute: #918C84;     /* Labels, Nummern, Copyright  5.93 / 5.55 / 5.23 */

  /* Linien */
  --line: #26262C;        /* Haarlinien, Struktur */
  --line-2: #34343C;      /* Rahmen von Chips */
  --line-input: #6E6A63;  /* Rahmen von Bedienelementen, >= 3:1 */
  --line-strong: #EFEDE8; /* die kräftige Oberkante */

  /* Fehlerfarbe — sonst nichts.
     Die Marke hat keine Farbe: das Logo ist ein Grau, die Fotos liefern alles
     Bunte. Rot bedeutet auf dieser Website ausschliesslich: hier stimmt etwas
     nicht. Es erscheint deshalb nur bei Formularfehlern, also an einer Stelle,
     die die meisten Besucher nie sehen. Genau dadurch wirkt es, wenn es kommt.
     Weder Knöpfe noch Hinweise noch der Hotellerie-Block tragen es. */
  --fehler: #C4442C;      /* Flächen und Rahmen */
  --fehler-hi: #F0906F;   /* Fehlerschrift auf dunklem Grund */

  /* Schraffur der Fusszeile. Eigener Ton, weil sie weder Linie noch Fläche ist:
     sie liegt unter allem und darf nirgends als Kante gelesen werden. */
  --schraffur: rgba(239, 237, 232, .03);

  /* Schriftfamilien */
  --display: 'Grotesque', 'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --sans: 'Public Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  /* Raster */
  --pad: 72px;
  --section: 104px;
}

/* --------------------------------------------------------------------------
   3. Grundlagen
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--bg);
  color-scheme: dark;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Display läuft auf der Markenschrift. Eine Grotesk braucht bei grossen Graden
   Gewicht und eine enge Laufweite, sonst fällt die Zeile auseinander. */
h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  margin: 0;
  text-wrap: pretty;
}

h1 { font-size: 88px; line-height: 0.94; letter-spacing: -0.035em; }
h2 { font-size: 46px; line-height: 1.02; letter-spacing: -0.03em; }
h3 { font-size: 27px; line-height: 1.14; letter-spacing: -0.02em; font-weight: 600; }

h1 em, h2 em { font-style: italic; font-weight: 700; }

p { margin: 0; text-wrap: pretty; }

img { max-width: 100%; display: block; }

/* <picture> ist nur eine Hülle für die AVIF-Quelle. `display: contents` nimmt
   sie aus dem Layout, damit alle Regeln direkt auf das <img> greifen. */
picture { display: contents; }

/* Links tragen keine Farbe mehr. Im Fliesstext markiert sie ein Unterstrich,
   in Komponenten die jeweilige Linie. Unterstrich statt Farbe ist ohnehin die
   zugänglichere Auszeichnung: sie funktioniert auch für Farbenblinde. */
a { color: var(--fg); text-decoration: none; transition: color 0.15s ease, border-color 0.15s ease; }

.text a, .text--sm a, .lead a, .prose a, .form__hint a, .faq-item p a {
  text-decoration: underline;
  text-decoration-color: var(--line-input);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.text a:hover, .text--sm a:hover, .lead a:hover, .prose a:hover,
.form__hint a:hover, .faq-item p a:hover { text-decoration-color: var(--fg); }

strong { font-weight: 600; color: var(--fg); }

:focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  padding: 12px 20px; background: var(--fg); color: var(--bg);
  font-size: 14px; font-weight: 600; transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; color: var(--bg); }

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */

.wrap { padding-left: var(--pad); padding-right: var(--pad); }

.section { padding-top: var(--section); padding-bottom: var(--section); }
.section--line { border-bottom: 1px solid var(--line); }
.section--tight { padding-top: 72px; padding-bottom: 72px; }

/* Zwei Spalten: Inhalt und Bild. Das Grundmuster jeder Unterseite. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 64px;
  align-items: center;
}
.duo--flip > *:first-child { order: 2; }

.stack { display: flex; flex-direction: column; }
.stack--sm { gap: 16px; }
.stack--md { gap: 26px; }
.stack--lg { gap: 44px; }

.row { display: flex; align-items: center; gap: 16px; }
.row--between { justify-content: space-between; }
.row--end { align-items: flex-end; }
.row--wrap { flex-wrap: wrap; }

/* Zeilenlänge in ch begrenzen, nicht über einen zentrierten Container.
   Ohne Begrenzung laufen Absätze auf breiten Bildschirmen unlesbar aus. */
.lead { font-size: 20px; line-height: 1.6; color: var(--fg-2); max-width: 62ch; }
.text { font-size: 17px; line-height: 1.65; color: var(--fg-3); max-width: 68ch; }
.text--sm { font-size: 15px; line-height: 1.65; color: var(--fg-3); max-width: 74ch; }
.mute { color: var(--fg-mute); }

/* --------------------------------------------------------------------------
   5. Komponenten
   -------------------------------------------------------------------------- */

/* -- Label -------------------------------------------------------------- */

.lbl {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--fg-mute);
  line-height: 1.5;
}

/* -- Kopfzeile ---------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 22px var(--pad);
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  transition: padding 0.3s var(--ease, ease);
}
.site-head.is-scrolled { padding-top: 14px; padding-bottom: 14px; }

/* Waagrechtes Lockup aus den beiden offiziellen Bausteinen des Marken-Kits:
   Bildmarke und Wortmarke. Beide als SVG, also bei jeder Grösse scharf und
   auf jedem Bildschirm gleich. Die Farbe steckt in der Datei (#EFEDE8, der
   Ton des übrigen Textes); ein `currentColor`-Master liegt unter
   `_originals/logo/svg/`, falls das Logo einmal der Textfarbe folgen soll —
   dafür müsste das SVG allerdings inline stehen statt im `<img>`.

   Die Grössen sind optisch abgestimmt, nicht rechnerisch: Die Bildmarke ist
   hochformatig, die Wortmarke eine Zeile. Gleiche Höhe würde die Wortmarke
   erschlagen. */
.brand {
  display: flex;
  align-items: center;
  gap: 14px;
  /* darf schrumpfen, statt den Nachbarn zu verdraengen */
  min-width: 0;
  flex: 0 1 auto;
}
/* Schrumpft die Marke, schrumpft die Wortmarke mit — massstabsgetreu statt
   gestaucht, und linksbuendig, damit sie an der Bildmarke kleben bleibt. */
.brand__wordmark { max-width: 100%; object-fit: contain; object-position: left center; }
/* Die Bildmarke ist klein und bleibt immer ganz. */
.brand__mark { flex: 0 0 auto; }
.brand, .brand:hover { color: var(--fg); }
.brand__mark { height: 30px; width: auto; }
.brand__wordmark { height: 13px; width: auto; }

/* Navigation rein typografisch: keine Fläche, nur Schrift und Trennstriche.
   Dieselbe Sprache wie die nummerierten Leistungszeilen weiter unten. */
.nav { display: flex; align-items: center; gap: 0; }

.nav a:not(.nav__cta) {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-3);
  padding: 6px 20px;
  border-right: 1px solid var(--line-2);
  white-space: nowrap;
}
.nav a:not(.nav__cta):first-child { padding-left: 0; }
.nav a:not(.nav__cta):hover { color: var(--fg); }

/* Der letzte Menüpunkt vor dem Anfrageweg bekommt keinen Trennstrich, sonst
   steht dort eine Linie ins Leere. */
.nav a:has(+ .nav__cta) { border-right: 0; padding-right: 0; }

.nav a[aria-current='page']:not(.nav__cta) { color: var(--fg); }

/* Der Anfrageweg hebt sich durch eine kräftigere Linie ab, nicht durch Farbe. */
.nav__cta {
  margin-left: 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 2px solid var(--fg);
  padding-bottom: 4px;
  white-space: nowrap;
}
.nav__cta:hover { color: var(--fg); border-bottom-color: #FFFFFF; }

/* Ausgeblendet, aber trotzdem entstylt: sonst trägt der Knopf den grauen
   Browser-Standard, sobald jemand den Umbruchpunkt verschiebt. */
.nav-toggle { display: none; background: transparent; border: 0; }

/* -- Knöpfe --------------------------------------------------------------

   Ein Knopf ist hier keine Fläche, sondern eine Linie mit einem Label darauf.
   Beim Überfahren wächst die Linie zur Fläche hoch: dieselbe Geste wie die
   Trennlinien, die sich beim Scrollen zeichnen, nur in klein.

   Auf Touchgeräten gibt es kein Überfahren. Dort steht die Fläche von Anfang
   an (siehe `@media (hover: none)` weiter unten), sonst wäre der wichtigste
   Knopf ausgerechnet auf dem Handy der schwächste.
   ------------------------------------------------------------------------ */

.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 17px 24px;
  border: 0;
  border-bottom: 1px solid var(--line-input);
  background: transparent;
  color: var(--fg);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  transition: color 0.25s var(--ease), border-color 0.25s var(--ease);
}

/* Die Fläche, die aus der Linie hochwächst */
.btn::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--fg);
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform 0.32s var(--ease);
}

/* Der Pfeil wandert mit */
.btn::after {
  content: '→';
  font-size: 15px;
  letter-spacing: 0;
  transition: transform 0.32s var(--ease);
}

.btn:hover::before { transform: scaleY(1); }
.btn:hover::after { transform: translateX(5px); }

/* Zwei Stufen genügen. Sie unterscheiden sich in der Stärke der Linie und
   darin, ob überhaupt eine Fläche hochwächst — nicht in der Farbe. */

.btn--primary { border-bottom: 2px solid var(--fg); }
.btn--primary:hover { color: var(--bg); }

/* Der zurückhaltende Knopf bekommt keine Fläche, nur eine hellere Linie */
.btn--secondary::before { display: none; }
.btn--secondary:hover { border-bottom-color: var(--fg); }

.btn--sm { padding: 12px 18px; font-size: 12px; }
.btn--sm::after { font-size: 13px; }

.btn:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }

/* Ohne Überfahren keine Andeutung: Fläche sofort sichtbar. */
@media (hover: none) {
  .btn--primary { color: var(--bg); }
  .btn--primary::before { transform: scaleY(1); }
}

/* -- Textlinks mit Pfeil -------------------------------------------------
   Gleiche Geste wie beim Knopf, nur ohne Fläche. Der Pfeil steckt im
   Stylesheet, nicht im Text: nur so kann er sich bewegen, und der Text
   bleibt beim Kopieren sauber. */

.link-arrow, .row-item__link, .dir-row__link, .tile__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.link-arrow::after, .row-item__link::after, .dir-row__link::after {
  content: '→';
  transition: transform 0.28s var(--ease);
}
.link-arrow:hover::after, .row-item__link:hover::after, .dir-row__link:hover::after {
  transform: translateX(5px);
}

.tile__link::after { content: '→'; transition: transform 0.28s var(--ease); }
.tile__link:hover::after { transform: translateX(4px); }

/* Führt der Weg von der Seite weg, zeigt der Pfeil das an. Steht bewusst nach
   den obigen Regeln und ist spezifischer (Attribut + Element), damit externe
   Links den schrägen Pfeil bekommen, egal in welcher Komponente sie sitzen.

   Das nachgestellte U+FE0E ist kein Zierrat, sondern der ganze Punkt. U+2197
   (↗) gehört zum Emoji-Satz. Fehlt das Zeichen in der Textschrift — und in
   Public Sans fehlt es — greift iOS zur nächsten Schrift, die es hat, und das
   ist Apple Color Emoji. Der Pfeil kam auf dem iPhone deshalb bunt heraus.
   U+FE0E ist der Variantenwähler für Textdarstellung und zwingt den Browser
   zur einfarbigen Form. `font-variant-emoji` sagt dasselbe noch einmal für
   Browser, die es kennen.

   Der gerade Pfeil → (U+2192) in den Regeln darüber braucht das nicht: er
   gehört nicht zum Emoji-Satz und hat gar keine bunte Variante. */
a[href^='http']::after { content: '\2197\FE0E'; font-variant-emoji: text; }

.link-arrow {
  align-self: flex-start;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg);
  border-bottom: 1px solid var(--line-input);
  padding-bottom: 5px;
}
.link-arrow:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* -- Auftakt mit Vollbild ------------------------------------------------ */

.hero { position: relative; min-height: 800px; overflow: hidden; display: flex; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Der Verlauf ist keine Stimmung, sondern Lesbarkeit. Er ist auf das aktuelle
   Auftaktfoto gerechnet, nicht allgemeingültig: gemessen wurde gegen die echten
   Glyphenkanten von Label, Titel, Fliesstext und Knöpfen, jeweils mit 8 px Rand,
   im schlechtesten Bildpunkt darunter.

   Die Kante bei 38 % liegt dort, wo der Textblock beginnt. Zwischen 38 und 78 %
   hält die Deckung ein Plateau — dort steht der Titel, und dort liegt zugleich
   die hellste Stelle des Fotos. Ab 78 % wird sie wieder zurückgenommen, sonst
   verschwindet die untere Hälfte des Bildes im Schwarz: beim jetzigen Motiv wäre
   die Gastgeberin ab der Hüfte abgeschnitten. Die letzten 10 % ziehen wieder auf
   .99 hoch — nicht wegen der Lesbarkeit, sondern damit die Unterkante des Fotos
   ohne sichtbare Naht in den Seitengrund übergeht.

   Gemessen bei 1086, 1607, 1905 und 2540 px Fensterbreite — die schmalste
   Desktop-Breite ist der kritische Fall, dort zoomt der Beschnitt die helle
   Bahn unter den Fliesstext. Schlechtester Wert über alle vier: 5.2:1.
   Wer Foto, Höhe oder Textmenge ändert, misst neu nach. */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(10,10,11,.45) 0%,
    rgba(10,10,11,.36) 26%,
    rgba(10,10,11,.74) 38%,
    rgba(10,10,11,.74) 78%,
    rgba(10,10,11,.56) 90%,
    rgba(10,10,11,.99) 100%);
}

/* Im Auftakt keine gedämpften Grautöne: auf einem Foto trägt nur helle Schrift. */
.hero .lbl { color: var(--fg); }
.hero .lead { color: var(--fg-2); }
.hero__inner {
  position: relative;
  z-index: 1;
  align-self: flex-end;
  width: 100%;
  padding: 0 var(--pad) 72px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* -- Kopfbild der Unterseiten --------------------------------------------
   Ein Band über die volle Breite, direkt unter der Kopfzeile. Bewusst ohne
   Text darauf: der Auftakt der Startseite ist die einzige Stelle, an der
   Schrift auf einem Foto liegt, und das soll so bleiben. Das kostet nichts und
   spart vier weitere Kontrastmessungen, denn jedes Foto bräuchte seinen eigenen
   Verlauf. Die Unterseiten sind mit 480 px zudem deutlich flacher als die 800 px
   des Auftakts — die Rangfolge bleibt sichtbar.

   Der Verlauf am unteren Rand ist keine Stimmung, sondern eine Fuge: ohne ihn
   endet das Foto als aufgeklebtes Rechteck. Er läuft auf --bg aus, also genau
   auf den Seitengrund darunter.

   Seine Höhe ist an den Motiven abgelesen. Bei 40 % versank auf der
   Leistungsseite das Tablett und auf der Markenseite die Feuerschale im
   Dunkeln — beides genau das, was das Bild erzählt. Bei 26 % drückt sich die
   Bildkante wieder durch. 32 % lässt beides stehen und schliesst trotzdem.

   Wo das Motiv sitzt, entscheidet object-position je Seite im HTML. Die vier
   Werte sind am Zuschnitt abgelesen, nicht geraten: bei 50 % wäre der Kellnerin
   auf der Leistungsseite der Kopf abgeschnitten. */
.kopfbild {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: var(--bg-2);
}
.kopfbild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kopfbild::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 32%;
  background: linear-gradient(180deg,
    rgba(10,10,11,0) 0%,
    rgba(10,10,11,.55) 58%,
    var(--bg) 100%);
}

/* -- Helle Sektionen ------------------------------------------------------
   Rückmeldung aus dem Kollegenkreis: zu düster. Das Problem war nicht die
   Dunkelheit, sondern die Gleichförmigkeit — sieben Bildschirmhöhen im selben
   Ton, ohne Zäsur. Statt die ganze Palette aufzuhellen und damit die gewählte
   Richtung aufzugeben, kehren einzelne Sektionen um.

   Der helle Grund ist bewusst nicht Weiss. Reines Weiss neben #0A0A0B reisst
   ein Loch in die Seite. Der Ton ist derselbe, den die Schrift auf dunklem
   Grund trägt: was oben Schrift ist, wird hier Fläche. Die Seite bleibt eine
   Familie aus zwei Werten statt vier.

   Umgesetzt über die Tokens selbst, nicht über neue Klassen für jedes Bauteil.
   Genau dafür heissen sie rollenbasiert (--bg, --fg) und nicht farbbasiert:
   alles, was innerhalb steht — Überschriften, Knöpfe, Linien, Kennzahlen —
   dreht ohne eine einzige zusätzliche Regel mit.

   Gemessen gegen alle drei hellen Flächen: Überschriften 12.77:1, Lead 8.71,
   Fliesstext 6.09, das 11-px-Label 4.90. Wer einen Wert ändert, rechnet nach. */
.invers {
  --bg: #EFEDE8;
  --bg-2: #E5E2DA;
  --bg-3: #DBD7CE;

  --fg: #14141A;
  --fg-2: #33333C;
  --fg-3: #4A4A55;
  --fg-mute: #585862;

  --line: #CFCABF;
  --line-2: #BAB5A9;
  --line-input: #7C776C;
  --line-strong: #14141A;

  /* Auf hellem Grund braucht das Rot mehr Tiefe: #C4442C erreicht nur 4.26. */
  --fehler: #B03A24;
  --fehler-hi: #8F2A17;

  background: var(--bg);
  color: var(--fg);
}

/* -- Kennzahlen ---------------------------------------------------------- */

.figures {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  border-top: 1px solid var(--line-strong);
}

.figure {
  padding: 34px 32px;
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.figure:first-child { padding-left: 0; }
.figure:last-child { padding-right: 0; border-right: 0; }

.figure__num {
  font-family: var(--display);
  font-weight: 700;
  font-size: 62px;
  line-height: 1;
  letter-spacing: -0.035em;
  font-variant-numeric: lining-nums tabular-nums;
}
.figure__lbl { font-size: 14px; color: var(--fg-mute); }

/* -- Nummerierte Zeilen (Leistungen) ------------------------------------- */

.rows { display: flex; flex-direction: column; border-bottom: 1px solid var(--line); }

.row-item {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.1fr) 160px;
  gap: 32px;
  align-items: baseline;
  padding: 32px 0;
  border-top: 1px solid var(--line);
}
/* Zeile ohne Linkspalte: Nummer, Titel, Text. Steht als Klasse und nicht
   als Inline-Stil im HTML, damit die Media Queries sie umwerfen koennen —
   inline haetten sie keine Chance. */
.row-item--drei { grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.3fr); }

.row-item__no { font-family: var(--display); font-weight: 700; font-size: 14px; color: var(--fg-mute); }
.row-item__txt { font-size: 15px; line-height: 1.6; color: var(--fg-3); }
.row-item__link { justify-self: end; font-size: 14px; color: var(--fg); border-bottom: 1px solid var(--line-input); padding-bottom: 4px; }
.row-item__link:hover { color: var(--fg); border-bottom-color: var(--fg); }

/* -- Spalten (Haltung) --------------------------------------------------- */

.cols4 {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.col-item { display: flex; flex-direction: column; gap: 12px; }
.col-item__no { font-family: var(--display); font-weight: 700; font-size: 13px; color: var(--fg-mute); }

/* -- Markenkacheln ------------------------------------------------------- */

.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.tile { display: flex; flex-direction: column; gap: 18px; }
.tile__media { position: relative; height: 260px; overflow: hidden; }
.tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile__body { display: flex; flex-direction: column; gap: 8px; }
.tile__body h3 { font-size: 22px; }
.tile__body p { font-size: 14px; line-height: 1.6; color: var(--fg-3); }
.tile__link { font-size: 13px; color: var(--fg-2); }
.tile__link--none { color: var(--fg-mute); pointer-events: none; }

/* -- Panel (Hotellerie) und Band (abgesetzter Block) --------------------- */

.panel { border: 1px solid var(--line-strong); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
.panel__body { padding: 64px 56px; display: flex; flex-direction: column; gap: 22px; justify-content: center; }
.panel__media { position: relative; min-height: 520px; overflow: hidden; }
.panel__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.band { background: var(--bg-2); padding: 72px 56px; }

/* In einer hellen Sektion hat der Kasten keine Aufgabe mehr: der helle Grund
   setzt den Block schon ab. Was bliebe, waere nur seine Polsterung — und die
   schiebt den Inhalt aus der Flucht aller uebrigen Sektionen. Auf 375 px
   begann der Text dadurch bei 42 statt bei 20 px. */
.invers .band { background: none; padding: 0; }

.tag {
  align-self: flex-start;
  padding: 5px 12px;
  background: var(--fg);
  color: var(--bg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tag--outline { background: transparent; border: 1px solid var(--fg); color: var(--fg); }

/* -- Verzeichnis (Team, Listen) ------------------------------------------ */

.directory { border-top: 1px solid var(--line-strong); }

.dir-row {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr) 220px;
  gap: 28px;
  align-items: center;
  padding: 26px 0;
  border-bottom: 1px solid var(--line);
}
.dir-row__name { font-family: var(--display); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -0.015em; }
.dir-row__desc { font-size: 15px; line-height: 1.6; color: var(--fg-3); max-width: 78ch; }
.dir-row__link { justify-self: end; font-size: 14px; text-align: right; }

/* -- Fragen und Antworten ------------------------------------------------
   Trägt zwei Aufgaben: Sie beantwortet, was Verpächter und Auftraggeber
   tatsächlich fragen, und sie gibt Suchmaschinen wie Antwortmaschinen Text
   in der Sprache, in der gesucht wird. Immer zusammen mit FAQPage-Schema. */

.faq { border-top: 1px solid var(--line-strong); }

.faq-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
  gap: 44px;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.faq-item h3 { font-size: 21px; line-height: 1.25; }
.faq-item p { font-size: 15px; line-height: 1.65; color: var(--fg-3); max-width: 74ch; }

/* -- Chips --------------------------------------------------------------- */

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { padding: 8px 15px; border: 1px solid var(--line-2); font-size: 13px; color: var(--fg-3); line-height: 1.4; }

/* -- Bilder -------------------------------------------------------------- */

.media { position: relative; overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s var(--ease, ease); }
.media--mono img { filter: grayscale(1) contrast(1.1); }

/* -- Einwilligungsleiste -------------------------------------------------
   Kein Overlay, keine abgerundete Karte, kein Schatten: eine Leiste am
   unteren Rand mit kraeftiger Oberkante, wie jede andere Sektion der Seite
   auch. Sie liegt ueber allem, blockiert aber nichts — wer sie ignoriert,
   kann die Seite normal benutzen, und ohne Zustimmung wird ohnehin nichts
   geladen. */
.consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
  padding: 22px var(--pad);
  background: var(--bg-2);
  border-top: 2px solid var(--line-strong);
}
.consent__txt {
  margin: 0;
  max-width: 68ch;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-2);
}
.consent__txt a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.consent__btns { display: flex; gap: 12px; flex-shrink: 0; }
.consent .btn { padding-top: 14px; padding-bottom: 14px; }

@media (max-width: 640px) {
  .consent { padding: 20px 20px 22px; gap: 16px; }
  .consent__btns { width: 100%; flex-direction: column; }
  .consent__btns .btn { width: 100%; justify-content: center; }
}

/* -- Hinweisbox ---------------------------------------------------------- */

.note {
  background: var(--bg-3);
  border-left: 2px solid var(--line-input);
  padding: 14px 18px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg-3);
  max-width: 68ch;
}

/* -- Fliesstext für Rechtstexte ------------------------------------------ */

.prose { max-width: 72ch; }
.prose h2 { font-size: 30px; margin: 48px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 20px; font-family: var(--sans); font-weight: 600; margin: 28px 0 8px; }
.prose p { font-size: 16px; line-height: 1.7; color: var(--fg-3); margin-bottom: 14px; }
.prose ul { font-size: 16px; line-height: 1.7; color: var(--fg-3); padding-left: 20px; margin: 0 0 14px; }
.prose li { margin-bottom: 6px; }
.prose dl { margin: 0 0 14px; font-size: 16px; line-height: 1.7; }
.prose dt { font-weight: 600; color: var(--fg); margin-top: 14px; }
.prose dd { margin: 0; color: var(--fg-3); }

/* -- Offene Stellen ------------------------------------------------------
   Sichtbare Markierung für Angaben, die noch fehlen. Darf nicht live gehen:
   `node tools/check.mjs` bricht ab, solange ein .todo im HTML steht. */

.todo {
  display: inline-block;
  padding: 0 10px;
  border: 1px dashed var(--fehler-hi);
  color: var(--fehler-hi);
  font-family: var(--sans);
  font-size: 0.32em;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 2.2;
}

/* -- Formular ------------------------------------------------------------ */

.form { display: flex; flex-direction: column; gap: 22px; max-width: 640px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field > label { font-size: 14px; font-weight: 500; color: var(--fg); }

.field input,
.field select,
.field textarea {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  color: var(--fg);
  background: var(--bg-3);
  border: 1px solid var(--line-input);
  padding: 14px 16px;
  width: 100%;
  min-height: 48px;
  transition: border-color 0.15s ease;
}
.field input::placeholder, .field textarea::placeholder { color: var(--fg-mute); }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--fg); outline: none; }
.field textarea { min-height: 160px; resize: vertical; }

.field-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }

.form__hint { font-size: 13px; color: var(--fg-mute); }
.form__status { font-size: 15px; padding: 14px 18px; background: var(--bg-3); }
.form__status[data-state='error'] { border-left: 2px solid var(--fehler); }

.hp { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }

/* -- Fusszeile -----------------------------------------------------------
   Drei Spalten: Marke mit Anschrift, die sechs Toechter, Kontakt. Eine vierte
   Spalte wiederholte einmal das Kopfmenue — auf einer Seite mit vier Zielen
   ist das keine Orientierung, sondern Fuellmasse, und sie war der Hauptgrund,
   warum die Fusszeile ueppig wirkte. Die Markenliste dagegen bleibt
   vollstaendig: sie ist der Zweck dieser Fusszeile und der einzige Ort, an dem
   alle sechs Marken auf einen Blick verlinkt sind. */

/* Die Fusszeile war eine reine Fläche und lag als solche stumpf unter der
   Seite. Sie bekommt deshalb eine Schraffur: 1 px starke Linien im Abstand von
   7 px, 45 Grad, in drei Prozent Deckung.

   Warum diagonal, wo sonst alles waagrecht und senkrecht steht: genau deshalb.
   Eine Schraffur in derselben Richtung wie die Trennlinien würde mit ihnen
   konkurrieren. Quer dazu liest sie sich als das, was sie ist — Material, nicht
   Struktur. Es ist die Schnittschraffur aus dem Bauplan, und das Publikum
   dieser Seite kennt sie von dort.

   Drei Prozent sind kein zaghafter Wert, sondern der gemessene: der hellste
   Punkt der Schraffur hebt den Grund von #131317 auf #1A1A1D. Der kleinste
   Text darauf (--fg-mute, 13 px) hält damit 5.20:1, die Links darüber 7.27:1.
   Wer die Deckung erhöht, misst nach. */
.site-foot {
  padding: 52px var(--pad) 36px;
  background-color: var(--bg-2);
  background-image: repeating-linear-gradient(
    45deg,
    var(--schraffur) 0 1px,
    transparent 1px 7px
  );
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) repeat(2, minmax(0, 1fr));
  gap: 40px;
}
.foot-col { display: flex; flex-direction: column; gap: 11px; }

/* Sechs Marken in zwei Spalten statt sechs Zeilen. Spart drei Zeilen Hoehe,
   ohne einen Link zu opfern — die Markenliste ist der Zweck dieser Fusszeile. */
.foot-col--zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 28px; align-content: start; }
.foot-col--zwei .lbl { grid-column: 1 / -1; }
.foot-col a { font-size: 15px; color: var(--fg-3); }
.foot-col a:hover { color: var(--fg); }
/* In der Fusszeile tritt das Logo zurück: gleiche Datei, nur gedämpft.

   `align-self: flex-start` ist Pflicht, nicht Feinschliff. `.foot-col` ist eine
   Flex-Spalte, und deren Standard `align-items: stretch` dehnt auch ein Bild auf
   die volle Spaltenbreite. `width: auto` verliert dagegen. Das Motiv wird dann
   in den zu breiten Kasten hinein zentriert und sitzt sichtbar eingerückt,
   während alles andere in der Spalte links anschlägt. */
.foot-logo { height: 64px; width: auto; align-self: flex-start; opacity: .72; }

.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  padding-top: 22px;
  margin-top: 36px;
  border-top: 1px solid var(--line);
}
.foot-bottom, .foot-bottom a { font-size: 13px; color: var(--fg-mute); }
.foot-bottom a:hover { color: var(--fg-3); }

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1360px) {
  h1 { font-size: 68px; }
  .row-item { grid-template-columns: 60px minmax(0, 1fr) minmax(0, 1.05fr) 130px; gap: 24px; }
  .cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 40px; }
}

@media (max-width: 1100px) {
  :root { --pad: 40px; --section: 80px; }
  h1 { font-size: 54px !important; }
  h2 { font-size: 38px !important; }

  .duo { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .duo--flip > *:first-child { order: 0; }
  .duo .media, .duo figure { height: 320px !important; min-height: 0; }

  .panel { grid-template-columns: minmax(0, 1fr); }
  .panel__body { padding: 44px 36px; }
  .panel__media { min-height: 320px; }

  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  .figures { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figure { padding: 26px 24px; border-bottom: 1px solid var(--line); }
  .figure:nth-child(2n) { padding-right: 0; border-right: 0; }
  .figure:nth-child(2n+1) { padding-left: 0; }

  .row-item {
    grid-template-columns: 48px minmax(0, 1fr);
    grid-template-areas: 'no titel' 'txt txt' 'link link';
    gap: 12px 20px;
  }
  .row-item--drei { grid-template-columns: 48px minmax(0, 1fr); }
  .row-item__no { grid-area: no; }
  .row-item h3 { grid-area: titel; }
  .row-item__txt { grid-area: txt; }
  .row-item__link { grid-area: link; justify-self: start; }

  .dir-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
    padding: 22px 0;
  }

  .faq-item { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 24px 0; }
  .dir-row__link { justify-self: start; text-align: left; }

  .band { padding: 48px 36px; }

  /* Auf schmalen Bildschirmen füllt der Textblock den ganzen Auftakt: das Label
     sitzt dann ganz oben, wo der Verlauf für Desktop bewusst dünn ist. Hier
     deckt er deshalb durchgehend ab. Das Foto bleibt Textur, nicht Motiv. */
  .kopfbild { height: 340px; }
  /* -- Auftakt: unterhalb des Desktop-Bruchs gestapelt statt überlagert ----
     Auf dem grossen Schirm liegt der Text auf dem Foto. Darunter ging das
     nicht mehr auf: der Textblock ist auf einem Telefon fast so hoch wie der
     ganze Auftakt, der Verlauf musste ihn deshalb mit 80 bis 98,5 % Deckung
     abdecken — vom Bild blieb eine dunkle Struktur. Zwei Beschwerden, eine
     Ursache: „gedrungen" und „Headerbild kaum sichtbar".

     Jetzt bekommt das Foto seine eigene Fläche und der Text steht darunter
     auf ruhigem Grund. Dasselbe Prinzip wie beim Kopfbild der Unterseiten,
     mit drei Folgen: das Bild ist wieder ein Bild, der Text bekommt Luft, und
     die Kontrastfrage stellt sich nicht mehr, weil keine Schrift auf einem
     Foto liegt.

     Die Höhe steht in einer eigenen Variablen, weil sie zwei Verbraucher hat:
     die Bildfläche und den Verlauf darüber. Zwei getrennte Werte laufen
     auseinander, sobald jemand einen davon anfasst. Die erste Zeile ist der
     Rückfall für Browser ohne svh. Die Einheit svh rechnet die Adressleiste
     auf dem Telefon korrekt mit, vh nicht. */
  .hero {
    --auftakt-bild: clamp(280px, 44vh, 420px);
    --auftakt-bild: clamp(280px, 44svh, 420px);
    display: block;
    min-height: 0;
  }
  .hero picture {
    display: block;
    position: relative;
    height: var(--auftakt-bild);
  }
  .hero__img { height: 100%; }

  /* Nur noch eine Fuge am unteren Bildrand, kein Textschutz mehr. Oben
     braucht es nichts, die Kopfzeile ist deckend. */
  .hero::after {
    top: 0;
    bottom: auto;
    height: var(--auftakt-bild);
    background: linear-gradient(180deg,
      rgba(10,10,11,0) 0%,
      rgba(10,10,11,0) 58%,
      rgba(10,10,11,.5) 82%,
      var(--bg) 100%);
  }

  .hero__inner { padding-top: 30px; padding-bottom: 52px; }

  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
}

@media (max-width: 640px) {
  :root { --pad: 20px; --section: 56px; }

  /* !important schlaegt die Inline-Groessen aus dem Entwurf fuer grosse Schirme.
     Auf den Rechtsseiten stand eine h1 mit 62 px inline, auf den uebrigen 38 px. */
  h1 { font-size: 38px !important; letter-spacing: -0.025em; }
  h2 { font-size: 29px !important; line-height: 1.1 !important; }
  h3 { font-size: 22px; }

  .lead { font-size: 17px; }
  .text { font-size: 16px; }

  .figures { grid-template-columns: minmax(0, 1fr); }
  .figure { border-right: 0; padding-left: 0; padding-right: 0; }
  .figure__num { font-size: 44px; }

  .cols4 { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .tiles { grid-template-columns: minmax(0, 1fr); }
  .tile__media { height: 220px; }

  .panel__body { padding: 32px 22px; }
  .band { padding: 36px 22px; }
  .duo .media, .duo figure { height: 240px !important; }

  .site-head { padding: 16px var(--pad); position: relative; gap: 16px; }
  /* Das Logo ist der Weg zur Startseite und braucht deshalb dieselbe
     Trefferfläche wie jeder andere Menüpunkt. */
  .brand { min-height: 44px; gap: 11px; }
  .brand__mark { height: 25px; }
  .brand__wordmark { height: 11px; }

  .nav {
    display: none;
    position: absolute;
    left: 0; right: 0; top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    padding: 8px var(--pad) 20px;
    z-index: 20;
  }
  .nav[data-open='true'] { display: flex; }

  /* Im aufgeklappten Menü stehen die Punkte untereinander. Die Trennstriche
     wandern von rechts nach unten, die Schrift wird grösser. */
  .nav a:not(.nav__cta) {
    padding: 14px 0;
    min-height: 48px;
    font-size: 15px;
    letter-spacing: 0.1em;
    display: flex;
    align-items: center;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .nav a:has(+ .nav__cta) { padding-right: 0; border-bottom: 1px solid var(--line); }

  .nav__cta {
    margin-left: 0;
    margin-top: 20px;
    min-height: 48px;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    border-bottom-width: 2px;
  }

  .nav-toggle {
    display: flex;
    align-items: center;
    /* gibt niemals nach: lieber schrumpft das Logo */
    flex: 0 0 auto;
    gap: 10px;
    background: transparent;
    border: 1px solid var(--line-input);
    color: var(--fg);
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    padding: 11px 18px;
    min-height: 44px;
    cursor: pointer;
  }

  .field-pair { grid-template-columns: minmax(0, 1fr); }

  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .foot-logo { height: 56px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }

  /* Bequem treffbare Ziele */
  .foot-col a, .foot-bottom a, .dir-row__link, .link-arrow, .row-item__link, .tile__link {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  .foot-col { gap: 0; }
}

/* --------------------------------------------------------------------------
   7. Bewegung

   Die Bewegung kommt aus dem System selbst: Was die Hierarchie trägt, sind
   Linien, also werden Linien gezeichnet statt eingeblendet. Alles hängt an
   `.js` am <html>; ohne JavaScript steht die Seite sofort vollständig da.
   -------------------------------------------------------------------------- */

:root {
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 0.62s;
}

.js [data-reveal] { opacity: 0; transform: translateY(14px); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--dur) var(--ease) var(--delay, 0s),
    transform var(--dur) var(--ease) var(--delay, 0s);
}

.js [data-rule] { position: relative; border-top-color: transparent !important; }
.js [data-rule]::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 1px;
  background: var(--line-strong);
  transform: scaleX(0);
  transform-origin: left center;
}
.js [data-rule].is-in::before { transform: scaleX(1); transition: transform 0.85s var(--ease); }

.js .section--line { position: relative; }
.js [data-reveal].section--line { border-bottom-color: transparent; }
.js [data-reveal].section--line::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: var(--line);
  transform: scaleX(0);
  transform-origin: left center;
}
.js [data-reveal].section--line.is-in::after { transform: scaleX(1); transition: transform 0.9s var(--ease) 0.1s; }

.js .line-mask { display: block; overflow: hidden; }
.js .line-mask > span { display: block; transform: translateY(105%); }
.js .is-in .line-mask > span { transform: none; transition: transform 0.78s var(--ease) var(--delay, 0s); }

.js [data-wipe] { clip-path: inset(0 100% 0 0); }
.js [data-wipe] img { transform: scale(1.07); }
.js [data-wipe].is-in { clip-path: inset(0 0 0 0); transition: clip-path 0.9s var(--ease); }
.js [data-wipe].is-in img { transform: none; transition: transform 1.4s var(--ease); }

/* Der Auftakt ist beim Laden schon da und darf nicht wischen */
.js .hero[data-wipe] { clip-path: none; }
.js .hero[data-wipe] img { transform: none; }

.tile__media { overflow: hidden; }
.tile:hover .tile__media img { transform: scale(1.05); }
.tile__media img { transition: transform 0.7s var(--ease); }

.col-item, .row-item { transition: opacity var(--dur) var(--ease); }

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  @view-transition { navigation: none; }

  .js [data-reveal], .js .line-mask > span { opacity: 1 !important; transform: none !important; }
  .js [data-wipe] { clip-path: none !important; }
  .js [data-wipe] img { transform: none !important; }
  .js [data-rule] { border-top-color: var(--line-strong) !important; }
  .js [data-rule]::before { transform: scaleX(1); }
  .js [data-reveal].section--line { border-bottom-color: var(--line); }
  .js [data-reveal].section--line::after { transform: scaleX(1); }

  * { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------------
   8. Druck — auf Papier wird die Seite hell
   -------------------------------------------------------------------------- */

@media print {
  .site-head, .site-foot, .nav-toggle, .skip-link { display: none; }
  html, body { background: #fff; color: #111; }
  h1, h2, h3, .figure__num { color: #111; }
  .text, .text--sm, .lead, .prose p { color: #333; }
  a { color: #111; }
}