/* Startseiten-Varianten A · B · C (20.08.)

   Auftrag: die Startseite soll zur Sprache der Unterseiten passen und heller
   werden. Der bisherige Aufbau „4 Kapitel" war siebenmal Vollbild auf Navy —
   jeder Abschnitt exakt eine Bildschirmhoehe, jeder gleich schwer, Grundton
   durchgehend dunkel. Die Unterseiten machen das Gegenteil: heller Lesegrund,
   Navy nur als Aufmacher, ein Band und der Abschluss.

   Deshalb gilt fuer ALLE drei Varianten:
   - `body` traegt `--sheet` (hell), nicht Navy.
   - Navy ist Interpunktion, keine Grundflaeche.
   - Abschnitte sind UNTERSCHIEDLICH hoch. Gleich schwere Abschnitte sind der
     Grund, warum saubere Entwuerfe langweilen.
   - Bauteile der Unterseiten (.ps, .ps--band, .pcta, .foot, .eyebrow) werden
     wiederverwendet, nicht nachgebaut. Hier steht nur, was es dort nicht gibt.

   Die Varianten unterscheiden sich in Aufmacher, Leserichtung und
   Spaltensystem — nicht in der Abschnittsreihenfolge. Das war die Lektion aus
   der ersten Runde im August.

   A = Titelband   · Bildband wie die Unterseiten, Zahlen hell darunter, 3 Spalten
   B = Zahlen      · gar kein Aufmacherbild, Zahlenregister zuerst, 2 Spalten
   C = Zweispalter · heller Textblock links, Bild rechts, asymmetrisch
*/

body { background: var(--sheet); color: var(--ink); }

/* ======================================================================
   Gemeinsam: Kennzahlen, Kompetenzregister, Track-Record-Teaser
   ====================================================================== */

/* --- Kennzahlen als Register auf HELLEM Grund --------------------------
   Bisher standen die fuenf Zahlen weiss auf dem dunklen Aufmacherbild und
   waren dort am schlechtesten lesbar. Auf hellem Grund mit Haarlinien
   dazwischen sind sie eine Tabelle — und genau das sind sie auch. */

.figs {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  border-top: 1px solid var(--line);
}
.figs > div {
  /* Links 30 px Luft: die Trennlinie sitzt am rechten Zellrand, ohne linkes
     Polster klebte sie an der naechsten Zahl (Befund 10.09.). */
  padding: 26px 22px 26px 30px;
  border-right: 1px solid var(--line-soft);
}
.figs > div:first-child { padding-left: 0; }
/* Ohne Linie rechts braucht die letzte Zelle kein rechtes Polster — sonst
   bricht „150.000 m²" schon bei 1440 px um (gemessen 10.09.). */
.figs > div:last-child { border-right: 0; padding-right: 0; }
.figs b {
  display: block;
  font-family: var(--f-display);
  font-size: clamp(24px, 2.5vw, 38px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
.figs span {
  display: block;
  margin-top: 9px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* --- Die drei Kernkompetenzen ------------------------------------------
   Bildlos. Fuer Immobilienmanagement und Construction gibt es kein Motiv,
   das nicht erzwungen waere — und ein falsches Bild ist schlimmer als kein
   Bild. Die Nummer und die Haarlinie tragen den Abschnitt. */

.komp { display: grid; gap: 0; }
.komp__it {
  display: block;
  padding: 30px 0 34px;
  border-top: 1px solid var(--line);
  color: inherit;
}
.komp__nr {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.komp__it h2 {
  margin: 12px 0 10px;
  font-size: clamp(21px, 1.8vw, 27px);
  line-height: 1.15;
}
.komp__it p {
  margin: 0;
  color: var(--muted);
  max-width: 42ch;
}
.komp__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 1px solid var(--line-hard);
  padding-bottom: 3px;
  transition: gap .2s;
}
.komp__it:hover .komp__go { gap: 16px; }

/* --- Track Record: EINE Reihe -------------------------------------------
   Nutzerentscheid 20.08.: nur noch eine Reihe. Vorher standen alle sechs
   Projekte auf der Startseite — das ist keine Vorschau mehr, sondern die
   Uebersichtsseite ein zweites Mal. Drei Projekte plus der Weg zur
   vollstaendigen Liste. */

.tr { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); }
.tr > a { display: block; color: inherit; }
.tr__fr { display: block; aspect-ratio: 3 / 2; overflow: hidden; background: var(--band-2); }
.tr__fr img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s; }
.tr > a:hover .tr__fr img { transform: scale(1.03); }
.tr__say { display: block; margin-top: 13px; padding-top: 12px; border-top: 1px solid var(--line); }
.tr__name { display: block; font-family: var(--f-display); font-size: 16px; font-weight: 700; }
.tr__meta {
  display: block;
  margin-top: 5px;
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Kopfzeile eines Abschnitts: Titel links, Weiterweg rechts auf einer Linie. */
.sechead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.sechead h2 { margin: 0; font-size: clamp(25px, 2.6vw, 40px); line-height: 1.12; }

/* ======================================================================
   A — Titelband
   Uebernimmt den Aufmacher der Unterseiten unveraendert (.ph aus page.css).
   Danach sofort hell. Drei Spalten fuer die Kompetenzen.
   ====================================================================== */

/* Der Deckel fuer .ph steht seit 20.08. in page.css und gilt damit fuer alle
   Seiten — hier bewusst KEINE zweite Fassung, sonst laufen sie auseinander. */

.a-figs { padding-block: clamp(34px, 3.6vw, 52px); }
.a-komp { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3vw, 52px); }
.a-komp .komp__it { border-top: 1px solid var(--line-hard); }

/* ======================================================================
   B — Zahlenregister
   Kein Aufmacherbild. Die Seite beginnt als Text und Zahl auf Weiss; das
   einzige grosse Bild kommt spaeter und traegt keinen Text — es ist eine
   Atempause, keine Buehne. Zwei Spalten.
   ====================================================================== */

.b-title { padding-block: clamp(56px, 7vw, 104px) clamp(30px, 3.4vw, 46px); }
.b-title h1 {
  margin: 14px 0 0;
  font-size: clamp(34px, 5.4vw, 74px);
  line-height: 1.04;
  letter-spacing: -.03em;
  max-width: 17ch;
}
.b-title .lead {
  margin-top: 26px;
  font-size: var(--t-lead);
  line-height: 1.55;
  color: var(--muted);
  max-width: 52ch;
}
.b-figs { padding-bottom: clamp(46px, 5vw, 76px); }

/* Vollbreites Bildband ohne Text. Bewusst begrenzt hoch: es soll die Seite
   gliedern, nicht sie noch einmal verdunkeln. */
/* margin:0 ist Pflicht — `figure` bringt vom Browser 16px 40px mit, das Band
   waere sonst nicht randlos, sondern eine eingerueckte Kachel. */
.b-bild { position: relative; margin: 0; height: clamp(240px, 34vw, 430px); overflow: hidden; background: var(--ink); }
.b-bild img { width: 100%; height: 100%; object-fit: cover; }
/* Mit Platte hinterlegt: der Nachweis stand vorher hell auf einem hellen
   Bildbereich und war nicht zu lesen. */
.b-bild figcaption {
  position: absolute;
  left: 0; bottom: 0;
  padding: 7px 13px;
  background: rgba(11,28,48,.82);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

.b-komp { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); column-gap: clamp(28px, 4vw, 74px); }
.b-komp .komp__it { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; align-items: start; }
/* Fallback, wo subgrid fehlt: dann steht der Titel eben ueber dem Text. */
@supports not (grid-template-columns: subgrid) {
  .b-komp .komp__it { display: block; }
}
.b-komp .komp__say { grid-column: 2; }
.b-komp .komp__it h2 { margin-top: 0; }

/* ======================================================================
   C — Zweispalter
   Geteilter Aufmacher: links heller Textblock, rechts das Bild. Damit ist
   die halbe erste Bildschirmhoehe hell — der groesste Unterschied zum
   bisherigen Vollbild auf Navy. Darunter ein SCHMALES Navy-Band mit den
   Zahlen, nicht eine ganze dunkle Flaeche.
   ====================================================================== */

.c-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: min(78vh, 720px); }
.c-hero__say {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(72px, 8vw, 120px) clamp(30px, 5vw, 86px);
  background: var(--sheet);
}
.c-hero__say h1 {
  margin: 16px 0 0;
  font-size: clamp(32px, 4.4vw, 62px);
  line-height: 1.05;
  letter-spacing: -.03em;
  max-width: 15ch;
}
.c-hero__say .lead { margin-top: 24px; font-size: var(--t-lead); line-height: 1.55; color: var(--muted); max-width: 44ch; }
.c-hero__media { position: relative; overflow: hidden; background: var(--ink); }
.c-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.c-hero__slot {
  position: absolute;
  left: 0; bottom: 0;
  padding: 7px 13px;
  background: rgba(11,28,48,.82);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}

/* Zahlen als schmaler dunkler Streifen — die einzige dunkle Flaeche vor dem
   Abschluss. Traegt die eigene Variante der .figs, deshalb neu gefaerbt. */
.c-figs { background: var(--ink); color: var(--paper); padding-block: clamp(26px, 3vw, 40px); }
.c-figs .figs { border-top: 0; }
.c-figs .figs > div { border-right-color: rgba(255,255,255,.16); padding-block: 0; }
.c-figs .figs span { color: rgba(239,239,239,.62); }

/* Kompetenzen als breite Zeilen: Nummer links, Inhalt rechts. */
.c-komp { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(26px, 4vw, 70px); }
.c-komp .komp__it { display: grid; grid-template-columns: subgrid; grid-column: 1 / -1; }
@supports not (grid-template-columns: subgrid) {
  .c-komp .komp__it { display: block; }
}
.c-komp .komp__idx {
  font-family: var(--f-display);
  font-size: clamp(30px, 3.4vw, 52px);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--line-hard);
}

/* ======================================================================
   D — Bildbänder für die Leistungsdarstellung
   Nutzerwunsch 20.08.: die drei Kernkompetenzen mit grossen Bildern als
   Hintergrund. Aufbau sonst wie A, damit der Vergleich genau diese eine
   Frage stellt: Textspalten oder Bildbaender?

   Ein Unterschied zur alten Startseite ist wichtig: die Baender sind
   ~480px hoch, NICHT eine volle Bildschirmhoehe. Drei Vollbilder
   hintereinander waren der Grund, warum die Seite zu dunkel wirkte — bei
   begrenzter Hoehe bleiben sie ein Akzent und man sieht beim Scrollen,
   dass es weitergeht.
   ====================================================================== */

.dkap { position: relative; min-height: clamp(330px, 38vw, 480px); display: flex; align-items: flex-end; overflow: hidden; background: var(--ink); color: var(--paper); }
.dkap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* Verlauf statt flaechiger Abdunklung: das Motiv bleibt oben offen, unten
   traegt es Text. Eine gleichmaessige Schwarzblende wuerde jedes Bild
   gleich aussehen lassen. */
.dkap::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(11,28,48,.15) 0%, rgba(11,28,48,.42) 46%, rgba(11,28,48,.88) 100%);
}
.dkap__in { position: relative; z-index: 2; padding-block: clamp(30px, 3.4vw, 48px); width: 100%; }
.dkap__nr {
  font-family: var(--f-mono);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
  margin: 0;
}
.dkap h2 { margin: 11px 0 9px; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.1; }
.dkap p { margin: 0; max-width: 48ch; color: rgba(239,239,239,.82); }
.dkap .komp__go { color: #fff; border-bottom-color: rgba(255,255,255,.45); margin-top: 20px; }
.dkap:hover .komp__go { gap: 16px; }
/* Bildnachweis unten RECHTS, nicht oben links wie sonst: die Baender stossen
   direkt aneinander: eine Marke an der Oberkante klebt optisch am Band darueber
   und sieht aus, als gehoerte sie dorthin. Unten rechts steht sie eindeutig. */
.dkap__slot {
  position: absolute; right: 0; bottom: 0; z-index: 3;
  padding: 6px 12px;
  background: rgba(11,28,48,.8);
  font-family: var(--f-mono);
  font-size: 9.5px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
}

/* ======================================================================
   Mobil
   ====================================================================== */

/* Zweispaltiger Fliesstext im Band „Ueber ONE".
   Stand bis 03.09.2026 als INLINE-STYLE im HTML — und war deshalb auf dem
   Telefon nicht zu retten: ein Inline-Style gewinnt gegen jede Regel aus der
   CSS-Datei, eine Media Query kann ihn nicht aufheben. Gemessen bei 390px:
   152px Spaltenbreite fuer 303 Zeichen Text, also rund 13 Zeichen pro Zeile.
   Lesbar sind 45 bis 75; unter 30 zerfaellt der Satz in Silben. */
.dual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 56px);
}
/* Absatzabstand innerhalb einer Spalte. Fehlte ganz — die Absaetze standen
   ohne Zwischenraum aufeinander („… bis zum Exit." / „Neubau wie Bestand …")
   und lasen sich als ein Block. Das galt auf JEDER Breite, war am Desktop nur
   weniger auffaellig. Gemessen 03.09.2026: margin 0 an allen vier Absaetzen.
   Nur `p + p`, damit der bestehende Abstand am Pfeil-Link (24px, inline
   gesetzt) unberuehrt bleibt. */
.dual p + p { margin-top: 15px; }

@media (max-width: 900px) {
  /* Einspaltig, sobald es eng wird — siehe Begruendung an `.dual`. */
  .dual { grid-template-columns: 1fr; gap: 0; }
  .dual > div + div { margin-top: 22px; }

  .figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .figs > div { border-right: 0; border-bottom: 1px solid var(--line-soft); padding-right: 0; padding-left: 0; }
  .figs > div:nth-child(even) { padding-left: 22px; }
  /* `:not(:last-child)` ist der Punkt. Bei UNGERADER Anzahl steht das letzte
     Feld allein in seiner Zeile — der rechte Trennstrich haette daneben ins
     Leere gezeigt. Betrifft beide Vorkommen: Startseite 5 Felder,
     Ueber uns 3 Felder. */
  .figs > div:nth-child(odd):not(:last-child) { padding-right: 22px; border-right: 1px solid var(--line-soft); }
  /* Untere Kante der letzten Zeile weg. `:nth-last-child(-n+2)` trifft die
     letzten zwei, also bei gerader Anzahl beide Felder der Schlusszeile und
     bei ungerader das Einzelfeld plus das darueber — dort steht die Linie
     ohnehin schon als Trennung zur letzten Zeile, deshalb zusaetzlich
     `:nth-child(even)` bzw. `:last-child` pruefen. */
  .figs > div:last-child { border-bottom: 0; }
  .figs > div:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
  .c-figs .figs > div { border-bottom-color: rgba(255,255,255,.16); }
  .c-figs .figs > div:nth-child(odd) { border-right-color: rgba(255,255,255,.16); }

  .a-komp, .b-komp, .c-komp { grid-template-columns: 1fr; }
  .b-komp .komp__it, .c-komp .komp__it { display: block; }

  .tr { grid-template-columns: 1fr; }

  .c-hero { grid-template-columns: 1fr; min-height: 0; }
  .c-hero__media { aspect-ratio: 16 / 10; order: -1; }
}


/* ======================================================================
   Kernkompetenz-Baender: Form „Luft" — entschieden 20.08.2026
   Gewaehlt aus H1/H2/H3 (Frage war: wie wird D heller, ohne die Baender zu
   verkleinern). Der Nutzerentscheid lautet: Schrift bleibt IM Bild.

   Die Bandhoehe ist deshalb unveraendert (.dkap oben, 330–480px). Heller wird
   die Seite durch zwei Dinge: die Baender stehen im Satzspiegel mit weisser
   Fuge — drei randlose Baender waren auf dem Bildschirm ein dunkler Block von
   ueber 1400px — und der Verlauf ist schwaecher, weil die Bandkante dem Text
   schon Halt gibt. Verworfen: H2 (Text unter dem Bild) und H3 (weisse Karte
   auf dem Bild), beide liegen als startseite-h2/-h3.html im Archiv.
   ====================================================================== */

.hluft { padding-block: clamp(26px, 3vw, 44px) clamp(48px, 5vw, 80px); }
.hluft .wrap { display: grid; gap: clamp(14px, 1.6vw, 22px); }

/* Verlauf schwaecher als bei randlosen Baendern (in der Mitte .34 statt .42,
   oben 0 statt .15): das Motiv traegt den Text auch so, weil die Bandkante
   ihm Halt gibt. Weiter zurueckgenommen geht nicht — bei .28 verschwand die
   Ziffer „01" auf dem Rundfenster-Motiv. */
.hluft .dkap::after {
  background: linear-gradient(180deg, rgba(11,28,48,0) 0%, rgba(11,28,48,.34) 48%, rgba(11,28,48,.82) 100%);
}
/* Der Innenabstand kommt sonst von .wrap — die Baender SIND hier im .wrap. */
.hluft .dkap__in { padding-inline: clamp(24px, 2.6vw, 40px); }
/* Die Ziffer verschwand auf dem Rundfenster-Motiv: bei schwaecherem Verlauf
   traegt .62 Weiss nicht mehr. */
.hluft .dkap__nr { color: rgba(255,255,255,.82); }
.hluft .dkap__in > * { max-width: none; }

/* Auf dem Telefon traegt der schwaechere Verlauf den Text NICHT mehr.
   Gemessen 03.09.2026 an der ersten Karte („Immobilienmanagement",
   Rundfenster-Motiv): das Band bleibt bei 330px Mindesthoehe, der Textblock
   waechst durch den Umbruch auf drei Zeilen plus Link — die Schrift rutscht
   damit aus der dunklen Zone nach oben ins helle Motiv. Der Verlauf wird
   deshalb unter 900px nachgezogen. Die Entscheidung „Schrift bleibt IM Bild"
   vom 20.08. bleibt unberuehrt, nur der Schleier darunter wird dichter. */
@media (max-width: 900px) {
  /* Erst Hoehe, dann Schleier — in dieser Reihenfolge, und das ist der Punkt.
     Gemessen bei 390px: das Band blieb bei 330px, der Textblock wuchs durch
     den Umbruch aber auf 17 %–100 % der Kartenhoehe. Die Schrift lag damit
     ueber dem hellen Teil des Motivs.
     Nur den Schleier zu verdichten haette AA gebraucht: 72 % Deckung an der
     Texthoehe (gemessen an den Pixeln des Rundfenster-Motivs, schlechtester
     Bildpunkt, Textfarbe rgba(239,239,239,.82) mitgerechnet). Bei 72 % ueber
     der ganzen Karte waere das Foto zur Tapete geworden — und die
     Entscheidung vom 20.08. lautet „Schrift bleibt IM Bild", nicht „Schrift
     auf Navy".
     Deshalb waechst die Karte, der Text rutscht in die untere Haelfte, und
     der Verlauf wird nur DORT dicht. Oben bleibt das Motiv frei. */
  .hluft .dkap { min-height: clamp(430px, 112vw, 520px); }
  .hluft .dkap::after {
    background: linear-gradient(180deg,
      rgba(11,28,48,0) 0%,
      rgba(11,28,48,.22) 26%,
      rgba(11,28,48,.80) 46%,
      rgba(11,28,48,.94) 100%);
  }
}


/* =========================================================================
   AUFMACHER DER STARTSEITE - Fassung V9 "Gesperrt"
   Uebertragen aus Output/hero-start-lab am 07.09.2026.
   -------------------------------------------------------------------------
   Die Regeln stammen unveraendert aus dem Labor und haengen an den
   data-Attributen am <html>-Element der Startseite:

     data-hero="v9"        die Fassung
     data-text="g"         Satzfassung G "Leise Grundlinie"
     data-satzgr="l"       Schriftgrad L
     data-cut="deckung"    Foto in den Buchstaben deckungsgleich zum Grund
     data-kopf="symbol"    statt der Navigationszeile ein Aufklappsymbol
     data-hoehe="voll"     Aufmacher fuellt das Fenster

   Die Attribute sind bewusst stehen geblieben statt sie herauszurechnen:
   Sie halten fest, WELCHE der sieben Satzfassungen und fuenf Schriftgrade
   gewaehlt wurde, und die uebrigen bleiben ohne Aufwand vergleichbar. Der
   Reglerkasten aus dem Labor ist NICHT mituebertragen.

   Zwei Dinge brauchen das Skript am Fuss der Startseite:
   die Ausrichtung der Linse (deckungsgleicher Ausschnitt) und das
   Aufklappen der Kopfzeile. Ohne Skript zeigt die Seite den
   freigestellten Ausschnitt und die Navigationszeile - kein Ausfall.
   ========================================================================= */

/* ---------- aus varianten.css ---------- */

/* ONE — Aufmacher Startseite, Varianten (Labor, 04.09.2026)
   =========================================================================
   NICHT im Deploy. Diese Datei wird ausschliesslich von den Laborseiten
   v1/v2/v3.html geladen und ueberschreibt .ph NUR fuer die Startseite,
   ueber die Zusatzklasse .ph--start. Kein anderer Aufmacher ist betroffen
   — Nutzerentscheid 04.09.: „bitte nur die Startseite aendern, sonst
   keine Bilder".

   Erst wenn eine Variante gewaehlt ist, wandert genau dieser Block nach
   Deploy/css/page.css. Bis dahin bleibt der Live-Stand unangetastet.
   ========================================================================= */

/* ---------- 1. Gemeinsam: Licht & Farbe ---------------------------------
   Prioritaet des Nutzers. Der Ist-Stand dreht das Motiv auf saturate(.78)
   herunter UND legt zwei Verlaeufe darueber, die zusammen rund 60 % der
   Flaeche einfaerben. Das goldene Abendlicht im Motiv ist dadurch praktisch
   nicht zu sehen. Hier: Saettigung zurueck auf normal, und die Verlaeufe
   werden von Flaechen zu BAENDERN — sie stehen nur noch dort, wo wirklich
   Schrift liegt. Alles dazwischen zeigt das Foto.                        */

.ph--start .ph__img {
  filter: saturate(1.02) contrast(1.05) brightness(1.0);
}



.ph--start::after {
  background:
    /* Dach fuer die Kopfnavigation — schmal, endet bei 18 % */
    linear-gradient(180deg,
      rgba(11, 28, 48, .62) 0%,
      rgba(11, 28, 48, .30) 9%,
      rgba(11, 28, 48, 0) 18%),
    /* Sockel fuer Eyebrow/H1 — beginnt erst bei 62 %, vorher nichts */
    linear-gradient(0deg,
      rgba(11, 28, 48, .88) 0%,
      rgba(11, 28, 48, .58) 16%,
      rgba(11, 28, 48, .22) 32%,
      rgba(11, 28, 48, 0) 44%);
}



/* ---------- 2. Gemeinsam: Bewegung --------------------------------------
   Sehr langsamer Zoom (Ken Burns). 24 s, 1.0 -> 1.06 — bewusst so traege,
   dass man sie nicht als Animation liest, sondern das Bild nur „lebt".
   `will-change` haelt es auf der GPU, sonst flackert der Text darueber.

   ⚠ Der Zoom laeuft auf .ph__img. Sobald hier ein <video> statt <img>
   steht (Drohnenaufnahme, „kommt evtl. spaeter"), wird diese Regel
   ersatzlos geloescht — ein Video bringt seine eigene Bewegung mit, beides
   zusammen wird seekrank.                                                */

@keyframes ph-drift {
  from { transform: scale(1.0); }
  to   { transform: scale(1.06); }
}



/* ⚠ Gilt seit 09.09.2026 nur noch UNTER 701 px. Im Querformat ersetzt
   ph-fahrt (8 s, 1.20, endlos alternierend) diese Regel - siehe Abschnitt
   "AUFMACHER: MEHR HIMMEL + ZOOMFAHRT" weiter unten. */
.ph--start .ph__img {
  animation: ph-drift 24s ease-out forwards;
  will-change: transform;
}



/* Gestaffeltes Einblenden. Reihenfolge = Leserichtung der jeweiligen
   Variante, die Verzoegerungen stehen weiter unten je Variante.          */
@keyframes ph-rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}



.ph--start .ph__brand,
.ph--start .ph__nr,
.ph--start h1,
.ph--start .ph__scroll {
  animation: ph-rise .9s cubic-bezier(.16, .84, .44, 1) both;
}

@media (prefers-reduced-motion: reduce) {
  
    .ph--start .ph__img,
    .ph--start .ph__brand,
    .ph--start .ph__nr,
    .ph--start h1,
    .ph--start .ph__scroll {
      animation: none;
      opacity: 1;
      transform: none;
    }
}



/* ---------- 4. Gemeinsam: leisere H1 ------------------------------------
   Nutzerentscheid: H1 bleibt H1 (SEO, Copy 1:1), tritt aber hinter die
   Marke zurueck. 66px/800 -> ~34px/500. Die Zeile darf umbrechen, aber
   nicht mehr als zwei Zeilen fuellen — daher max-width in ch.            */

.ph--start h1 {
  font-size: clamp(21px, 2.1vw, 31px);
  font-weight: 500;
  line-height: 1.24;
  letter-spacing: -.012em;
  max-width: 30ch;
  text-shadow: 0 1px 18px rgba(11, 28, 48, .55);
}

@media (max-width: 700px) {
  
    .ph--start h1 { font-size: clamp(19px, 5vw, 24px); max-width: none; }
}

/* ---------- aus varianten-b.css ---------- */


/* Seitenverhaeltnisse aus der Messung — als aspect-ratio hinterlegt, damit
   die Hoehe nie von Hand nachgerechnet werden muss. */
.mk--one { -webkit-mask-image: url(wortmarke.svg);   mask-image: url(wortmarke.svg);   aspect-ratio: 327.8 / 115.6; }

/* ---------- NACHTRAG: Regeln, die im Labor mehrere Fassungen in EINEM
   Selektor zusammenfassen -----------------------------------------------
   In varianten-c.css stehen sie als
     [data-hero="v8"] X, [data-hero="v9"] X, [data-hero="v10"] X, ...
   Der Auszug hat solche Bloecke zunaechst verworfen, weil sie auch andere
   Fassungen nennen. Aufgefallen ist es am Pixelvergleich gegen die
   Laborseite: Das Kopf-Logo stand da, obwohl die Marke im Aufmacher sitzt.

   object-position ist der wichtigste der fuenf: Daran haengt, WELCHEN
   Ausschnitt das Hintergrundfoto zeigt - und die Linse rechnet mit
   50% 44%. Weicht das ab, ist der Ausschnitt nicht mehr deckungsgleich. */

[data-hero="v9"] .head__logo { display: none; }
[data-hero="v9"] .head__in   { justify-content: flex-end; }

[data-hero="v9"] .ph--start {
  background: var(--ink);
  align-items: center;
  min-height: clamp(500px, 90vh, 800px);
}
[data-hero="v9"] .ph__img {
  opacity: .15;
  filter: saturate(.7) contrast(1.1);
  object-position: center 44%;
}
[data-hero="v9"] .ph--start::after {
  background: linear-gradient(180deg, rgba(11, 28, 48, .5) 0%, rgba(11, 28, 48, 0) 18%);
}

/* ---------- aus varianten-c.css ---------- */



/* Der Ausschnitt selbst — gemeinsame Grundeinstellung.
   background-size ist bewusst groesser als „cover": Motiv (2,82:1) und
   Wortmarke (2,84:1) sind fast formgleich, bei cover laege das GANZE Bild
   in den Buchstaben, samt der dunklen Daecher. Nur der helle Streifen
   traegt die Form. */
.cut {
  background-image: url(../assets/img/hero/wien-kuppel.jpg);
  background-repeat: no-repeat;
  background-size: 168% auto;
  background-position: 50% 44%;
  filter: saturate(1.24) contrast(1.02) brightness(1.16);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
  animation: ph-rise .9s cubic-bezier(.16, .84, .44, 1) both;
}


.cut--one { -webkit-mask-image: url(wortmarke.svg); mask-image: url(wortmarke.svg); aspect-ratio: 327.8 / 115.6; }



/* Die Zusatzzeile als eigener Ausschnitt. 15,8:1 — ein sehr flacher
   Streifen, deshalb hier `cover` statt Zoom: bei diesem Seitenverhaeltnis
   bestimmt die Breite die Skalierung, und die Position waehlt eine duenne
   waagrechte Scheibe aus dem Bild. 40 % trifft die goldene Skyline. */
.cut--sub {
  -webkit-mask-image: url(zusatzzeile.svg); mask-image: url(zusatzzeile.svg);
  aspect-ratio: 594.1 / 37.6;
  background-size: cover;
  background-position: 50% 40%;
}

@media (prefers-reduced-motion: reduce) {
   .cut { animation: none; opacity: 1; transform: none; }
}



/* =========================================================================
   V9 — „Gesperrt"
   Antwort auf den Stapel: Die Zusatzzeile wird nicht kleiner gesetzt,
   sondern in Schrift NACHGEBAUT und exakt auf die Breite des Ausschnitts
   gesperrt. Sie liest sich dadurch nicht mehr als zweites Logo, sondern als
   Grundlinie darunter — ein Bauteil des Satzes, kein Bildelement.

   ⚠ Auch das ist eine Abweichung vom Logoblock: Die Zeile ist hier
   gesetzter Text in Red Hat Display, nicht die Logo-Zeichnung. Der Vorteil
   ist, dass sie sich beliebig sperren und in der Groesse fuehren laesst.
   Gehoert freigegeben.
   ========================================================================= */

[data-hero="v9"] .ph__in {
  padding-bottom: 0;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}


[data-hero="v9"] .cut--one { width: min(80vw, 1000px); animation-delay: .05s; }


[data-hero="v9"] .ph__nr { order: -1; margin-bottom: clamp(18px, 2.2vw, 30px); animation-delay: 0s; }



/* ⚠ KORREKTUR 04.09.: Hier stand zuerst schlichtes letter-spacing. Die
   Zeile war dadurch rund 370 px breit statt der 1000 px des Ausschnitts —
   sie sass zentriert darunter und war eben NICHT die Grundlinie, die die
   Fassung ausmacht. Mit letter-spacing ist das auch nicht zu erreichen:
   Die Zeilenbreite haengt an Schriftgroesse UND Sperrung, beide aendern
   sich mit dem Fenster, die Kante wird nie getroffen.

   Jetzt ist jedes Zeichen ein eigenes <i>, die Zeile ein Flex-Container
   mit space-between. Der Browser verteilt den Rest — die Zeile ist bei
   jeder Breite exakt so breit wie der Ausschnitt. */
[data-hero="v9"] .ph__line {
  width: min(80vw, 1000px);
  margin: clamp(16px, 2vw, 26px) 0 0;
  display: flex;
  justify-content: space-between;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(11px, 1.5vw, 20px);
  line-height: 1;
  text-transform: uppercase;
  color: rgba(239, 239, 239, .92);
  animation: ph-rise .9s cubic-bezier(.16, .84, .44, 1) both;
  animation-delay: .24s;
}


[data-hero="v9"] .ph__line i { font-style: normal; }


/* Wortzwischenraum: eine breitere Luecke, damit die drei Woerter noch als
   Woerter lesbar bleiben und nicht zu einer Zeichenkette verschmelzen. */
[data-hero="v9"] .ph__line .sp { width: 1.1em; }


[data-hero="v9"] h1 {
  margin-top: clamp(30px, 3.6vw, 52px);
  max-width: 32ch;
  animation-delay: .38s;
}


[data-hero="v9"] .ph__scroll { left: 50%; transform: translateX(-50%); flex-direction: column; animation-delay: .55s; }

@media (max-width: 700px) {
  
  
    [data-hero="v9"] .cut--one { width: 88vw; }
  
    /* Bei 390 px stuenden 17 Zeichen auf 343 px — die Verteilung wuerde die
       Buchstaben so weit auseinanderziehen, dass die Zeile als Wortfolge
       nicht mehr lesbar ist. Deshalb hier keine Verteilung mehr, sondern
       schlichte Zentrierung mit massvoller Sperrung. */
    [data-hero="v9"] .ph__line {
      width: 88vw; justify-content: center;
      letter-spacing: .16em; font-size: 11px;
    }
  
    [data-hero="v9"] .ph__line .sp { width: .7em; }
}

/* ---------- aus varianten-d.css ---------- */

/* ONE — V9 „Gesperrt", Feinabstimmung (Labor, 05.09.2026)
   =========================================================================
   Nutzerbefund: V9 ist die richtige Fassung, aber „die Kontraste sind etwas
   zu stark" und „die Schrift unten passt noch nicht ins Gesamtbild".

   Diese Datei macht beides EINSTELLBAR statt es zu erraten:
     · Kontrast   → vier Variablen, ueber Regler bedienbar
     · Satz unten → vier Fassungen, ueber data-text umschaltbar

   ⚠ Was hier BEWUSST nicht passiert: das Navy aufhellen. #0b1c30 ist eine
   der drei belegten CI-Farben. Der Grund wird stattdessen ueber das
   durchscheinende Foto angehoben — das hebt den Tonwert, ohne die Farbe
   anzutasten.
   ========================================================================= */

[data-hero="v9"] {
  /* ENDSTAND des Nutzers vom 07.09.2026, von ihm selbst am Reglerkasten
     abgelesen und als Bildschirmfoto bestaetigt.

     Der Weg dorthin, weil die Zahlen sonst willkuerlich aussehen:
       20.08.  Grund .15  Hell 1.16  Saett 1.24  - Marke als Effekt
       05.09.  Grund .30  Hell 1.02  Saett 1.06  - deutlich zurueckgenommen
       07.09.  Grund .30  Hell  .90  Saett  .80  - Zwischenstand
       final   Grund .40  Hell 1.15  Saett  .80  Kontr .70

     Der letzte Schritt dreht die Sache um und ist der eigentliche Punkt
     der Fassung: Der GRUND geht auf .40 hoch, das Foto hinter der Marke
     traegt also viel mehr als frueher. In den Buchstaben steigt die
     Helligkeit auf 1.15, waehrend Saettigung (.80) und vor allem Kontrast
     (.70) weit unter eins bleiben.

     Das Foto im Ausschnitt ist damit HELLER, aber FLAUER als der Grund -
     nicht bunter und nicht harter. Die Buchstaben treten dadurch ueber
     Helligkeit hervor, nicht ueber einen Farb- oder Kontrastsprung. Genau
     deshalb bleibt der Ausschnitt als Fenster lesbar und kippt nicht in
     einen Effekt. Wer hier spaeter den Kontrast anhebt, nimmt der Fassung
     ihre Begruendung. */
  --ghost:      0.40;   /* wie stark das Foto hinter der Marke durchscheint */
  --cut-bright: 1.15;   /* Helligkeit IN den Buchstaben */
  --cut-sat:    0.80;   /* Saettigung in den Buchstaben */
  --cut-kontr:  0.70;   /* Kontrast in den Buchstaben */
  --linie:      0.75;   /* Deckkraft der gesperrten Zeile */

  /* ⚠ BEFUND 07.09. (gemessen): Die Marke war mit min(80vw, 1000px) nur
     von der BREITE abhaengig. Bei 1310x700 blieb sie 1000 px breit und
     damit 353 px hoch, waehrend der Aufmacher von 800 auf 658 px schrumpfte.
     Der Fuss hat margin-top: auto und verteilt nur UEBRIGEN Platz - war
     keiner da, sass seine Haarlinie mit 0 px Abstand an der gesperrten
     Zeile und lief durch "PARTNER". Bei 1440x900 waren es 133 px.

     Die Hoehe gehoert deshalb in die Formel. 112vh ist so gewaehlt, dass
     ab 900 px Fensterhoehe weiterhin die vollen 1000 px stehen und der
     bisherige Eindruck unveraendert bleibt - erst darunter greift sie.

     EINE Quelle fuer Marke UND gesperrte Zeile: Ihre gleiche Breite ist
     die Grundlage der Fassung (siehe Korrektur vom 04.09. in
     varianten-c.css). Zwei getrennte Formeln wuerden wieder auseinander
     laufen. */
  --mk-breite: min(80vw, 1000px, 112vh);
}

/* ⚠ BEFUND 07.09. (gemessen): QUERFORMAT-TABLETS.
   Bei 1024x768 und 1180x820 lag die Unterkante der Marke bei 55 % der
   Fensterhoehe. Freigegeben sind die 48,2 % vom Schreibtisch (1920x1080).

   Ursache: Das Foto (2800x992) fuellt IMMER die volle Fensterhoehe - es
   wird nur waagrecht beschnitten, senkrecht nie (gemessener senkrechter
   Beschnitt: 0). Der Horizont sitzt damit stets an derselben Stelle des
   FENSTERS, waehrend die Marke mit der BREITE waechst. Im niedrigen
   Querformat rutscht ihr unteres Drittel unter den Horizont: gemessene
   Helligkeit dort 101 (1180x820) bzw. 118 (1024x768) statt 181 wie am
   Schreibtisch. Die Buchstaben treten dort nicht mehr ueber Helligkeit
   hervor - und genau das ist die Begruendung von V9.

   ⚠ object-position ist hier KEIN Hebel. Ohne senkrechten Beschnitt
   bewirkt der zweite Wert nichts. Nicht damit "reparieren".

   84vh haelt die Unterkante bei BEIDEN Groessen unter 48,2 %
   (1024x768: 47,1 % / Helligkeit 187 - 1180x820: 48,1 % / 173).
   Der Deckel greift ab 701 px Breite bei hoechstens 900 px Hoehe.
   ⚠ Die HOEHE ist die Bedingung, nicht die Breite - die obere
   Breitengrenze von 1200 px ist am 08.09.2026 entfallen, nachdem der
   Nutzer den Laptop 1440x900 freigegeben hat. Dort war die Unterkante
   57,7 % und die Helligkeit im unteren Drittel 77; mit dem Deckel sind
   es 48,1 % und 113. Das ist keine Aenderung des freigegebenen
   Eindrucks, sondern seine WIEDERHERSTELLUNG - freigegeben waren 48,2 %.
   ⚠ Der Schreibtisch bleibt unangetastet, WEIL die Hoehe begrenzt ist:
   1920x1080 hat 1080 px Hoehe, faellt also nicht unter die Regel und
   behaelt seine 1000 px. Wer hier die Hoehengrenze anhebt, schrumpft
   die Marke am Schreibtisch auf 84vh und bricht die Freigabe. */
@media (min-width: 701px) and (max-height: 900px) {
  [data-hero="v9"] { --mk-breite: min(80vw, 1000px, 84vh); }
}



[data-hero="v9"] .ph__img {
  opacity: var(--ghost);
  filter: saturate(.82) contrast(1.02);
}


[data-hero="v9"] .cut {
  filter:
    saturate(var(--cut-sat))
    contrast(var(--cut-kontr))
    brightness(var(--cut-bright));
}


[data-hero="v9"] .ph__line { color: rgba(239, 239, 239, var(--linie)); }



/* Der Verlauf oben war fuer weisse Schrift auf hellem Himmel gedacht. Auf
   dem dunklen Grund von V9 verstaerkt er den Kontrastsprung nur. Deutlich
   zurueckgenommen. */
[data-hero="v9"] .ph--start::after {
  background: linear-gradient(180deg,
    rgba(11, 28, 48, .34) 0%, rgba(11, 28, 48, 0) 16%);
}



/* -------------------------------------------------------------------------
   Aufbau: Markenblock oben, Satz im Fuss. Getrennte Behaelter, damit der
   Satz wandern kann, ohne dass etwas absolut positioniert werden muss.
   ------------------------------------------------------------------------- */

[data-hero="v9"] .ph--start { align-items: stretch; }


[data-hero="v9"] .ph__in {
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Die Polsterung hing nur an der Breite: bei 1310 px Breite standen
     oben 118 px, auch wenn das Fenster nur 700 px hoch war. Jetzt
     entscheidet der kleinere der beiden Werte. */
  padding: clamp(56px, min(9vw, 13vh), 118px) 0 clamp(26px, min(3.6vw, 5vh), 52px);
}


/* Marke und gesperrte Zeile aus derselben Quelle - siehe --mk-breite. */
[data-hero="v9"] .cut--one,
[data-hero="v9"] .ph__line { width: var(--mk-breite); }



[data-hero="v9"] .ph__block {
  display: flex; flex-direction: column; align-items: center; text-align: center;
}


[data-hero="v9"] .ph__fuss { display: flex; }



/* ⚠ KORREKTUR 05.09.: Gemessen lagen 104 px zwischen gesperrter Zeile und
   Satz, obwohl hier nur 22 px gesetzt waren. Ursache: varianten-b.css gibt
   der H1 fuer V9 ein eigenes margin-top (51,8 px bei 1440), das sich zum
   Abstand des Fusses addierte.

   Der Abstand gehoert an EINE Stelle, sonst rechnet man beim naechsten
   Feinschliff wieder gegen einen unsichtbaren zweiten Wert an. Er wird
   ausschliesslich ueber .ph__fuss gefuehrt. */
[data-hero="v9"] .ph--start h1 { margin-top: 0; }



/* Fassungen C, D, F und G schieben den Fuss mit margin-top: auto nach
   unten. Auto verteilt nur UEBRIGEN Platz - ist keiner da, wird der
   Abstand null. Ein Mindestabstand am Block darueber ist echter Rand und
   bleibt deshalb auch dann stehen. */
[data-hero="v9"][data-text="c"] .ph__block,
[data-hero="v9"][data-text="d"] .ph__block,
[data-hero="v9"][data-text="f"] .ph__block,
[data-hero="v9"][data-text="g"] .ph__block { margin-bottom: clamp(34px, 5vh, 72px); }



/* =========== Fassung A — „Mittig, wie bisher" ============================
   Der Satz steht zentriert unter der gesperrten Zeile. Ausgangszustand. */
[data-hero="v9"][data-text="a"] .ph__fuss { justify-content: center; margin-top: clamp(30px, 3.6vw, 52px); }


[data-hero="v9"][data-text="a"] h1 { text-align: center; max-width: 32ch; }



/* =========== Fassung B — „Bildunterschrift" =============================
   Der Satz rueckt DICHT an die gesperrte Zeile heran und wird deutlich
   leiser. Er liest sich dann als Unterzeile zur Marke, nicht als zweite
   Ueberschrift — der Grund, warum er vorher nicht ins Bild passte, war
   seine Groesse, nicht sein Platz. */
[data-hero="v9"][data-text="b"] .ph__fuss { justify-content: center; margin-top: clamp(14px, 1.6vw, 22px); }


[data-hero="v9"][data-text="b"] h1 {
  text-align: center;
  max-width: 46ch;
  font-size: clamp(15px, 1.25vw, 18.5px);
  font-weight: 400;
  line-height: 1.5;
  color: rgba(239, 239, 239, .70);
  letter-spacing: 0;
}



/* =========== Fassung C — „Aus der Achse" ================================
   Der Satz verlaesst die Mittelachse und sinkt an den Fuss, linksbuendig.
   Marke und Aussage teilen sich den Aufmacher dann nicht mehr dieselbe
   Linie — die strenge Symmetrie oben bleibt ungestoert. */
[data-hero="v9"][data-text="c"] .ph__fuss { margin-top: auto; padding-top: clamp(28px, 3.4vw, 46px); }


[data-hero="v9"][data-text="c"] h1 {
  text-align: left;
  max-width: 26ch;
  font-size: clamp(17px, 1.5vw, 22px);
  font-weight: 400;
  color: rgba(239, 239, 239, .82);
}



/* =========== Fassung D — „Fuss mit Linie" ===============================
   Wie C, aber der Fuss bekommt eine Haarlinie und rechts einen zweiten
   Anker. Der Aufmacher schliesst damit unten ab, statt auszulaufen. */
[data-hero="v9"][data-text="d"] .ph__fuss {
  margin-top: auto;
  padding-top: clamp(20px, 2.4vw, 30px);
  border-top: 1px solid rgba(255, 255, 255, .22);
  align-items: baseline;
  justify-content: space-between;
  gap: 30px;
}


[data-hero="v9"][data-text="d"] h1 {
  text-align: left;
  max-width: 30ch;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 400;
  color: rgba(239, 239, 239, .84);
}


[data-hero="v9"][data-text="d"] .ph__ende {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(239, 239, 239, .5); white-space: nowrap;
}


/* Der Anker rechts gehoert nur zu Fassung D. */
[data-hero="v9"] .ph__ende { display: none; }


[data-hero="v9"][data-text="d"] .ph__ende { display: block; }


/* ⚠ KORREKTUR 05.09.: Der schwebende Scroll-Hinweis aus varianten.css sitzt
   absolut an der Unterkante. Der stammt aus dem alten Aufbau, in dem der
   Satz weit oben stand. Seit der Aufmacher eine Spalte mit Fuss ist, liegt
   er DIREKT HINTER der H1 — ein zweites Mal dieselbe Falle wie bei V5.
   Absolut positionierte Elemente wissen nichts vom Fluss.

   Er entfaellt hier fuer alle vier Fassungen. Fassung D bringt mit
   „Mehr ↓" ihren eigenen Abschluss mit, C schliesst ueber den Fuss ab,
   und in A/B endet der Aufmacher ohnehin mit dem Satz. */
[data-hero="v9"] .ph__scroll { display: none; }

@media (max-width: 700px) {
  
    /* varianten-c.css setzt hier width: 88vw fuer Marke und Zeile. Da
       diese Datei spaeter geladen wird, wuerde die Variable oben das
       ueberschreiben - deshalb wird sie hier neu gesetzt statt die
       Breiten doppelt zu pflegen. */
    [data-hero="v9"] { --mk-breite: 88vw; }
  
    [data-hero="v9"] .ph__in { padding-top: 96px; }
  
    [data-hero="v9"][data-text="c"] h1,
    [data-hero="v9"][data-text="d"] h1 { max-width: none; }
  
    [data-hero="v9"][data-text="d"] .ph__fuss { flex-direction: column; align-items: flex-start; gap: 14px; }
}



/* =========================================================================
   DECKUNGSGLEICHER AUSSCHNITT - Befund des Nutzers vom 07.09.2026
   -------------------------------------------------------------------------
   Der Befund: Das Foto IN den Buchstaben zeigte einen anderen Bildausschnitt
   als das Foto DAHINTER. An den Kanten sprang das Motiv sichtbar um.

   Die Ursache: .cut trug ein eigenes background-image mit eigener Skalierung
   (background-size: 168% auto) auf einer eigenen, viel kleineren Box. Das
   Hintergrundfoto ist ein <img> mit object-fit: cover ueber die ganze
   Aufmacherflaeche. Zwei voneinander unabhaengige Rahmungen - die koennen
   per Bauart nicht zusammenpassen, an keiner Stelle und bei keiner Breite.

   Das war seinerzeit Absicht (siehe Kommentar in varianten-c.css: bei cover
   laege das ganze Motiv samt dunkler Daecher in den Buchstaben, nur der
   helle Streifen trage die Form). Der Einwand des Nutzers wiegt schwerer:
   Ein Fenster muss zeigen, was dahinter liegt, sonst ist es kein Fenster.

   Die Loesung: eine LINSE. .cut__lens bedeckt exakt dieselbe Box wie
   .ph__img, mit derselben Skalierung, derselben Position UND derselben
   Zoomfahrt. Die Maske auf .cut--one schneidet die Buchstaben daraus
   heraus. Deckungsgleich per Bauart, nicht per Einstellung.

   Drei Fallen, die dabei zu umgehen waren:

   1. .cut--one darf WEDER filter NOCH transform tragen. Beides macht das
      Element zum Bezugsrahmen fuer absolut positionierte Kinder - die Linse
      waere dann wieder nur so gross wie die Buchstaben, und man haette
      nichts gewonnen. Der Farbfilter sitzt deshalb auf der Linse, und das
      Einblenden laeuft ueber die Deckkraft statt ueber translateY.

   2. Das Hintergrundfoto zoomt 24 s lang von 1.0 auf 1.06 (ph-drift). Ohne
      dieselbe Fahrt auf der Linse waere der Ausschnitt nur im ersten Moment
      deckungsgleich und wuerde danach langsam auswandern.

   3. .ph__in ist position: relative - der Bezugsrahmen der Linse ist also
      NICHT der Aufmacher, sondern der Inhaltsrahmen. inset: 0 traefe die
      falsche Box. Die Linse bekommt ihre Masse deshalb von dial.js gesetzt
      (Abschnitt "Linse ausrichten"), gemessen statt geraten. Ohne
      JavaScript bleibt die Linse aus und es gilt die alte, freigestellte
      Fassung - kein Ausfall, nur der bisherige Stand.
   ========================================================================= */

@keyframes ph-fade { from { opacity: 0; } to { opacity: 1; } }



/* Solange dial.js nicht gemessen hat, bleibt die Linse aus. */
.cut__lens { display: none; }



[data-hero="v9"][data-cut="deckung"] .cut--one {
  background-image: none;
  filter: none;                 /* Punkt 1 - wandert auf die Linse */
  animation-name: ph-fade;      /* Punkt 1 - kein transform mehr */
}


[data-hero="v9"][data-cut="deckung"] .cut--one.cut--sync .cut__lens { display: block; }



[data-hero="v9"][data-cut="deckung"] .cut__lens {
  position: absolute;
  /* left/top/width/height setzt dial.js - siehe Punkt 3 */
  background-image: url(../assets/img/hero/wien-kuppel.jpg);
  background-repeat: no-repeat;
  background-size: cover;       /* identisch zu object-fit: cover */
  background-position: 50% 44%; /* identisch zu object-position der v9-Regel */
  filter:
    saturate(var(--cut-sat))
    contrast(var(--cut-kontr))
    brightness(var(--cut-bright));
  animation: ph-drift 24s ease-out forwards;   /* Punkt 2 - im Querformat
                                                  von ph-fahrt ersetzt */
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  
    [data-hero="v9"][data-cut="deckung"] .cut__lens { animation: none; }
}



/* =========================================================================
   AUFMACHER FUELLT DAS FENSTER - Frage des Nutzers vom 07.09.
   -------------------------------------------------------------------------
   "Warum sehe ich die Seite nicht auf der ganzen Bildschirmgroesse?"
   Gemessen und im Code gefunden: varianten-c.css Zeile 34 deckelt den
   Aufmacher auf clamp(500px, 90vh, 800px). Bei 800 px ist Schluss. Auf
   einem 1080 px hohen Bildschirm sind das 74 % der Hoehe - der Rest der
   Seite schiebt sich von unten ins Bild.

   Das war eine bewusste Entscheidung (der naechste Abschnitt soll
   anschneiden und zum Weiterlesen einladen), aber es ist eine Wahl, keine
   Notwendigkeit. Als Schalter statt als Festlegung.

   svh statt vh: Auf dem Telefon zaehlt vh die Flaeche OHNE die
   Browserleisten mit, der Aufmacher waere dort zu hoch und der Satz
   rutschte unter den Rand. svh nimmt die kleinste Fassung des
   Sichtbereichs. Die vh-Zeile davor bleibt als Rueckfall fuer aeltere
   Browser stehen.
   ========================================================================= */

[data-hero="v9"][data-hoehe="voll"] .ph--start { min-height: 100vh; }

@supports (height: 100svh) {
  
    [data-hero="v9"][data-hoehe="voll"] .ph--start { min-height: 100svh; }
}



/* =========================================================================
   KOPF: NUR EIN AUFKLAPPSYMBOL - Ueberlegungen 1 und 3 des Nutzers (07.09.)
   -------------------------------------------------------------------------
   Vorgeschichte: Zuerst gebaut als "Navigation erscheint beim Scrollen".
   Dabei wurde .head fixiert und bekam einen eigenen Grund - also genau das
   mitlaufende Band, das der Nutzer ausdruecklich NICHT will. Der Ansatz ist
   vollstaendig zurueckgebaut.

   Jetzt: Rechts oben im Aufmacher steht ein kleines Aufklappsymbol statt
   der Navigationszeile - und statt gar nichts. Es oeffnet das vorhandene
   vollflaechige Navy-Overlay. Der Kopf bleibt position: absolute wie in
   base.css, scrollt also mit dem Aufmacher weg. Kein Band, das mitlaeuft.

   Wiederverwendet statt neu gebaut: nav.js erzeugt Symbol UND Overlay
   bereits aus derselben .nav-Quelle, base.css bringt beides mit - nur
   hinter einer Abfrage unter 900 px versteckt. Hier wird die Abfrage fuer
   V9 aufgehoben. Eine Navigationsliste, eine Quelle: die Regel aus dem
   Kopf der nav.js gilt weiter.
   ========================================================================= */

/* ⚠ KORREKTUR 07.09.: Das Symbol oeffnete zuerst das vollflaechige
   Navy-Overlay. Der Nutzer will keine zweite Layoutform - beim Klick
   erscheint schlicht die vorhandene Kopfzeile, unveraendert wie gebaut.
   Zugeklappt steht nur das Symbol da, aufgeklappt Zeile UND Symbol
   (letzteres wird zum Kreuz und schliesst wieder). */
[data-hero="v9"][data-kopf="symbol"] .nav    { display: none; }


[data-hero="v9"][data-kopf="symbol"] .burger { display: block; }



[data-hero="v9"][data-kopf="symbol"][data-nav="offen"] .nav {
  display: flex;
  animation: nav-ein .34s cubic-bezier(.16, .84, .44, 1) both;
}


@keyframes nav-ein { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  
    [data-hero="v9"][data-kopf="symbol"][data-nav="offen"] .nav { animation: none; }
}


/* Das Verlaufsdach traegt die Zeile - es kommt mit ihr zurueck. */
[data-hero="v9"][data-kopf="symbol"] .ph--start::after { transition: opacity .34s ease; }


[data-hero="v9"][data-kopf="symbol"][data-nav="offen"] .ph--start::after { opacity: 1; }



/* Das Symbol steht auf dem Foto, nicht auf einer Flaeche. Ein feiner
   Schattenwurf haelt die Striche auch ueber hellem Himmel lesbar - dieselbe
   Loesung wie beim Kopf-Logo in base.css. */
[data-hero="v9"][data-kopf="symbol"] .burger span,
[data-hero="v9"][data-kopf="symbol"] .burger::before,
[data-hero="v9"][data-kopf="symbol"] .burger::after {
  width: 20px;
  filter: drop-shadow(0 1px 7px rgba(11, 28, 48, .85));
}


/* Das Verlaufsdach oben trug die Navigationszeile. Fuer ein einzelnes
   Symbol braucht es das nicht - der obere Bildrand bleibt frei. */
[data-hero="v9"][data-kopf="symbol"] .ph--start::after { opacity: 0; }



/* =========================================================================
   WEITERE SATZFASSUNGEN - Ueberlegung 3 des Nutzers
   A-D siehe oben. E-G gehen bewusst in andere Richtungen, damit der
   Vergleich etwas entscheidet und nicht nur Groessen durchprobiert.
   ========================================================================= */

/* =========== Fassung E - "Dritte Zeile" =================================
   Der Satz hoert auf, ein Satz zu sein, und wird zur dritten Zeile des
   Logoblocks: gesperrt wie "REAL ESTATE PARTNER", klein, dicht darunter.
   Der Aufmacher hat dann EIN Gebilde statt Marke plus Aussage. */
[data-hero="v9"][data-text="e"] .ph__fuss {
  justify-content: center;
  margin-top: clamp(10px, 1.1vw, 15px);
}


[data-hero="v9"][data-text="e"] h1 {
  text-align: center;
  max-width: 62ch;
  font-family: var(--f-mono);
  font-size: clamp(9.5px, .82vw, 12px);
  font-weight: 400;
  letter-spacing: .26em;
  text-transform: uppercase;
  line-height: 1.9;
  color: rgba(239, 239, 239, .58);
}



/* =========== Fassung F - "Rechts angeschnitten" =========================
   Spiegelbild zu C/D: Der Satz sitzt rechts im Fuss, der Scroll-Hinweis
   links. Das Auge laeuft von der mittigen Marke nach rechts unten und
   findet dort die Aussage - eine Diagonale statt einer Mittelachse. */
[data-hero="v9"][data-text="f"] .ph__fuss {
  margin-top: auto;
  padding-top: clamp(24px, 3vw, 40px);
  flex-direction: row-reverse;
  align-items: baseline;
  justify-content: space-between;
  gap: 30px;
}


[data-hero="v9"][data-text="f"] h1 {
  text-align: right;
  max-width: 28ch;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 400;
  color: rgba(239, 239, 239, .84);
}


[data-hero="v9"][data-text="f"] .ph__ende {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .24em; text-transform: uppercase;
  color: rgba(239, 239, 239, .5); white-space: nowrap;
}



/* =========== Fassung G - "Leise Grundlinie" =============================
   Der Satz raeumt das Feld: ganz unten, sehr klein, mittig, ueber eine
   Haarlinie von Rand zu Rand. Der Aufmacher wirkt fast leer - die Marke
   traegt alles allein, die Aussage ist nur noch Fussnote. Die
   zurueckhaltendste der sieben Fassungen. */
[data-hero="v9"][data-text="g"] .ph__fuss {
  margin-top: auto;
  padding-top: clamp(16px, 1.8vw, 24px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  justify-content: center;
}


/* Fuenf Stufen fuer den Satz in Fassung G - Wunsch des Nutzers vom 07.09.
   M ist der bisherige Wert, damit der Vergleich einen Nullpunkt hat. Die
   Stufen sind bewusst keine gleichmaessige Reihe: von XS (Fussnote) bis
   XL (zweite Aussage neben der Marke) soll jede Stufe eine andere
   Rangordnung zwischen Marke und Satz zeigen. */
[data-hero="v9"][data-satzgr="xs"] { --satz-g: clamp(10px, .78vw, 11.5px); }


[data-hero="v9"][data-satzgr="s"]  { --satz-g: clamp(11.5px, .92vw, 13.5px); }


[data-hero="v9"][data-satzgr="m"]  { --satz-g: clamp(13px, 1.05vw, 15.5px); }


[data-hero="v9"][data-satzgr="l"]  { --satz-g: clamp(15px, 1.3vw, 19px); }


[data-hero="v9"][data-satzgr="xl"] { --satz-g: clamp(17px, 1.62vw, 24px); }



[data-hero="v9"][data-text="g"] h1 {
  text-align: center;
  max-width: 54ch;
  font-size: var(--satz-g, clamp(13px, 1.05vw, 15.5px));
  font-weight: 400;
  line-height: 1.6;
  color: rgba(239, 239, 239, .62);
}

@media (max-width: 700px) {
  
    [data-hero="v9"][data-text="e"] h1 { letter-spacing: .18em; font-size: 9.5px; }
  
    [data-hero="v9"][data-text="f"] .ph__fuss { flex-direction: column; align-items: flex-start; gap: 14px; }
  
    [data-hero="v9"][data-text="f"] h1 { text-align: left; max-width: none; }
}

/* =========================================================================
   AUFMACHER: MEHR HIMMEL + ZOOMFAHRT - freigegeben am 08.09.2026
   -------------------------------------------------------------------------
   Wunsch des Nutzers: "mehr Himmel zeigen und unten mehr wegschneiden",
   damit die grosse Marke lesbar im Himmel steht.

   GEMESSEN, nicht geschaetzt: Der Himmel endet bei 44 % der Fotohoehe (die
   Helligkeit faellt dort von 240 auf 90). Das Foto fuellt die Fensterhoehe
   immer exakt aus - senkrecht ist NICHTS in Reserve, waagrecht dagegen viel
   (bei 1440 x 900 sind nur 56,7 % der Bildbreite zu sehen). Ein anderer
   Ausschnitt ist damit unmoeglich; der einzige Hebel ist, das Foto groesser
   als das Fenster zu zeichnen und OBEN zu verankern. Die iStock-Vorlage ist
   selbst schon 2,82 (1024 x 363) - ein hoeheres Original gibt es nicht.

   Freigegebene Werte (Labor Output/hero-lab/hero-lab.html):
     Grundzoom 1,10 x  |  Fahrt 8 s ease-in-out  |  Ziel GESAMT 1,32 x
     hin und zurueck, endlos (Takt 16 s)  |  Marke unveraendert

   ⚠ Die drei Punkte, an denen es schiefgeht:

   1. DECKUNGSGLEICHHEIT. .ph__img und .cut__lens muessen dieselbe Box und
      dieselbe Fahrt haben, sonst zeigen die Buchstaben einen anderen
      Ausschnitt als der Himmel daneben. Die GEOMETRIE der Linse kommt aus
      dem Skript in index.html (linseAusrichten misst offsetWidth/Height des
      Fotos und schreibt sie als Inline-Stil) - sie folgt der Hoehe unten
      also von selbst und darf hier NICHT zusaetzlich gesetzt werden, ein
      Inline-Stil schlaegt ohnehin jede Regel. Die FAHRT dagegen steht in
      keiner Messung und wird hier ausdruecklich auf beide gelegt.

   2. DIE ZOOMWERTE MULTIPLIZIEREN SICH. Der Grundzoom sitzt in der Hoehe,
      die Fahrt als transform darueber:  1,32 / 1,10 = 1,20. Deshalb heisst
      das Ziel der Keyframes 1.20 und nicht 1.32.

   3. NUR IM QUERFORMAT (Entscheidung 09.09.2026). Bei 390 x 844 sind nur
      16,4 % der Bildbreite zu sehen und die Marke endet ohnehin bei 30 % -
      dort brauchte es den Zoom nicht, er ginge nur weiter ueber die
      Aufloesung hinaus. Unter 701 px bleibt deshalb alles wie freigegeben:
      Hoehe 100 % und die alte, einmalige ph-drift (24 s -> 1.06).

   Der Preis, ausgesprochen und akzeptiert: am Endpunkt (1,32 x) wird das
   Foto ueber seine Aufloesung hinaus gezeichnet - 1440 x 900 auf 3353 px
   gegen 2800 in der Datei (1,20 x), 1920 x 1080 auf 4023 px (1,44 x). Bei
   "hin und zurueck" ist es dort nur kurz.                                */

@keyframes ph-fahrt {
  from { transform: scale(1); }
  to   { transform: scale(1.20); }
}



@media (min-width: 701px) {

  /* Grundzoom: Foto 10 % hoeher als das Fenster, oben verankert. Der
     Ueberstand faellt unten weg - .ph--start traegt overflow: hidden.
     bottom: auto ist noetig, weil das Basis-inset: 0 sonst zusammen mit
     top und height ueberbestimmt waere. */
  .ph--start .ph__img {
    height: calc(100% * 1.10);
    top: 0;
    bottom: auto;
  }

  /* Die Fahrt - auf BEIDEN Ebenen identisch. Ersetzt ph-drift, ueberlagert
     sie nicht: kein forwards mehr, das waere bei alternate infinite
     wirkungslos und irrefuehrend. */
  .ph--start .ph__img,
  [data-hero="v9"][data-cut="deckung"] .cut__lens {
    animation: ph-fahrt 8s ease-in-out infinite alternate;
    will-change: transform;
  }
}



/* Die Fahrt laeuft jetzt endlos statt einmalig. Wer im Betriebssystem
   weniger Bewegung eingestellt hat, bekommt das Standbild - der Grundzoom
   (reine Hoehe) bleibt, er ist keine Bewegung. Diese Regel muss NACH der
   obigen stehen, sonst gewinnt bei gleicher Spezifitaet die spaetere. */
@media (min-width: 701px) and (prefers-reduced-motion: reduce) {
  .ph--start .ph__img,
  [data-hero="v9"][data-cut="deckung"] .cut__lens { animation: none; }
}



/* ---------- aus masken.css ---------- */

/* ERZEUGT von build.py — nicht von Hand aendern.
   Logo-Masken als eingebettete Daten, damit sie auch beim Oeffnen
   per Doppelklick (file://) greifen. Siehe baue_masken(). */

.mk--one, .cut--one, [data-hero] .ph__cut {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE2MC45IDU5LjUgMzI3LjggMTE1LjYiIGZpbGw9IiNmZmZmZmYiPg0KICAgIDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yMTguNywxNzQuMWMtMzEuMywwLTU2LjgtMjUuNS01Ni44LTU2LjhzMjUuNS01Ni44LDU2LjgtNTYuOCw1Ni44LDI1LjUsNTYuOCw1Ni44LTI1LjUsNTYuOC01Ni44LDU2LjhaTTIxOC43LDc1LjNjLTIzLjIsMC00MiwxOC44LTQyLDQyczE4LjgsNDIsNDIsNDIsNDItMTguOCw0Mi00Mi0xOC44LTQyLTQyLTQyWiI+PC9wYXRoPg0KICAgIDxnPg0KICAgICAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTM4Ni41LDE3Mi4zaC0xNXYtNjUuNmMwLTE2LjMtMTMuMi0yOS41LTI5LjUtMjkuNXMtMjkuNSwxMy4yLTI5LjUsMjkuNXY2NS42aC0xNXYtNjUuNmMwLTI0LjUsMjAtNDQuNSw0NC41LTQ0LjVzNDQuNSwyMCw0NC41LDQ0LjV2NjUuNloiPjwvcGF0aD4NCiAgICAgIDxyZWN0IGNsYXNzPSJzdDEiIHg9IjQxMy4xIiB5PSIxMTAuMyIgd2lkdGg9Ijc0LjYiIGhlaWdodD0iMTUiPjwvcmVjdD4NCiAgICAgIDxnPg0KICAgICAgICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNDc5LjEsMTcyLjNoLTY2di0xNWg3NC42djYuNWMwLDQuNy0zLjgsOC41LTguNSw4LjVoLS4xWiI+PC9wYXRoPg0KICAgICAgICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNDg3LjYsNzguMmgtNzQuNnYtMTVoNjZjNC43LDAsOC41LDMuOCw4LjUsOC41djYuNWguMVoiPjwvcGF0aD4NCiAgICAgIDwvZz4NCiAgICA8L2c+DQogIDwvc3ZnPg0K");
          mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE2MC45IDU5LjUgMzI3LjggMTE1LjYiIGZpbGw9IiNmZmZmZmYiPg0KICAgIDxwYXRoIGNsYXNzPSJzdDEiIGQ9Ik0yMTguNywxNzQuMWMtMzEuMywwLTU2LjgtMjUuNS01Ni44LTU2LjhzMjUuNS01Ni44LDU2LjgtNTYuOCw1Ni44LDI1LjUsNTYuOCw1Ni44LTI1LjUsNTYuOC01Ni44LDU2LjhaTTIxOC43LDc1LjNjLTIzLjIsMC00MiwxOC44LTQyLDQyczE4LjgsNDIsNDIsNDIsNDItMTguOCw0Mi00Mi0xOC44LTQyLTQyLTQyWiI+PC9wYXRoPg0KICAgIDxnPg0KICAgICAgPHBhdGggY2xhc3M9InN0MSIgZD0iTTM4Ni41LDE3Mi4zaC0xNXYtNjUuNmMwLTE2LjMtMTMuMi0yOS41LTI5LjUtMjkuNXMtMjkuNSwxMy4yLTI5LjUsMjkuNXY2NS42aC0xNXYtNjUuNmMwLTI0LjUsMjAtNDQuNSw0NC41LTQ0LjVzNDQuNSwyMCw0NC41LDQ0LjV2NjUuNloiPjwvcGF0aD4NCiAgICAgIDxyZWN0IGNsYXNzPSJzdDEiIHg9IjQxMy4xIiB5PSIxMTAuMyIgd2lkdGg9Ijc0LjYiIGhlaWdodD0iMTUiPjwvcmVjdD4NCiAgICAgIDxnPg0KICAgICAgICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNDc5LjEsMTcyLjNoLTY2di0xNWg3NC42djYuNWMwLDQuNy0zLjgsOC41LTguNSw4LjVoLS4xWiI+PC9wYXRoPg0KICAgICAgICA8cGF0aCBjbGFzcz0ic3QxIiBkPSJNNDg3LjYsNzguMmgtNzQuNnYtMTVoNjZjNC43LDAsOC41LDMuOCw4LjUsOC41djYuNWguMVoiPjwvcGF0aD4NCiAgICAgIDwvZz4NCiAgICA8L2c+DQogIDwvc3ZnPg0K");
}


.mk--sub, .cut--sub {
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjI3LjcgMjA5LjkgNTk0LjEgMzcuNiIgZmlsbD0iI2ZmZmZmZiI+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTI4LjcsMjQ2LjF2LTM0LjVoMTQuOGMyLjMsMCw0LjIuNCw1LjksMS4yczMsMiwzLjksMy41LDEuNCwzLjIsMS40LDUuMi0uNyw0LjItMiw1LjgtMy4xLDIuOC01LjMsMy40bDcuNywxNS4zaC00LjJsLTcuNC0xNC44aC0xMXYxNC44aC0zLjhaTTMyLjUsMjI4aDEwLjdjMi4zLDAsNC4yLS42LDUuNi0xLjgsMS40LTEuMiwyLjEtMi44LDIuMS00LjhzLS43LTMuNS0yLjEtNC43Yy0xLjQtMS4yLTMuMy0xLjgtNS42LTEuOGgtMTAuN3YxMy4xWiI+PC9wYXRoPg0KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02My44LDI0Ni4xdi0zNC41aDI0Ljd2My40aC0yMC45djEyLjFoMTMuN3YzLjNoLTEzLjd2MTIuNGgyMS4xdjMuNGgtMjQuOSwwWiI+PC9wYXRoPg0KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05NC41LDI0Ni4xbDE0LjMtMzQuNWg0LjZsMTQuMiwzNC41aC00LjFsLTQuMy0xMC44aC0xNi4zbC00LjQsMTAuOGgtNFpNMTA0LjIsMjMyaDEzLjZsLTYuOC0xNi45LTYuOCwxNi45WiI+PC9wYXRoPg0KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMzUsMjQ2LjF2LTM0LjVoMy44djMxLjFoMjAuNnYzLjRoLTI0LjRaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTE4MiwyNDYuMXYtMzQuNWgyNC43djMuNGgtMjAuOXYxMi4xaDEzLjd2My4zaC0xMy43djEyLjRoMjEuMXYzLjRoLTI0LjksMFoiPjwvcGF0aD4NCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjI2LjgsMjQ2LjVjLTIuNywwLTUuMy0uNS03LjgtMS43cy00LjctMi43LTYuNi00LjhsMi41LTIuNmMxLjgsMS45LDMuNywzLjMsNS43LDQuM3M0LjEsMS40LDYuNCwxLjQsMy40LS4zLDQuOC0uOWMxLjQtLjYsMi41LTEuNCwzLjMtMi40czEuMi0yLjIsMS4yLTMuNS0uNi0zLjEtMS44LTQuMS0zLjMtMS43LTYuMS0yLjFsLTUtLjhjLTMuMy0uNi01LjgtMS41LTcuMy0zcy0yLjQtMy4zLTIuNC01LjguNS0zLjYsMS41LTUsMi40LTIuNiw0LjMtMy40YzEuOC0uOCwzLjktMS4yLDYuMy0xLjJzNC44LjQsNy4yLDEuMmMyLjMuOCw0LjUsMS45LDYuNCwzLjRsLTIuMiwzYy0zLjgtMi45LTcuNi00LjMtMTEuNi00LjNzLTMuMS4zLTQuMy44LTIuMiwxLjItMi45LDIuMWMtLjcuOS0xLDItMSwzLjJzLjUsMi44LDEuNiwzLjcsMi45LDEuNSw1LjQsMS45bDQuOS44YzMuOC42LDYuNSwxLjcsOC4yLDMuMnMyLjYsMy42LDIuNiw2LjMtLjYsMy44LTEuNyw1LjNjLTEuMSwxLjYtMi43LDIuOC00LjcsMy42LTIsLjktNC4zLDEuMy02LjksMS4zaDBaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1Ny4yLDI0Ni4xdi0zMS4xaC0xMi41di0zLjRoMjguN3YzLjRoLTEyLjV2MzEuMWgtMy44LDBaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTI3MS42LDI0Ni4xbDE0LjMtMzQuNWg0LjZsMTQuMiwzNC41aC00LjFsLTQuMy0xMC44aC0xNi4zbC00LjQsMTAuOGgtNFpNMjgxLjQsMjMyaDEzLjZsLTYuOC0xNi45LTYuOCwxNi45aDBaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTMxNS40LDI0Ni4xdi0zMS4xaC0xMi41di0zLjRoMjguN3YzLjRoLTEyLjV2MzEuMWgtMy44LDBaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTMzOS41LDI0Ni4xdi0zNC41aDI0Ljd2My40aC0yMC45djEyLjFoMTMuN3YzLjNoLTEzLjd2MTIuNGgyMS4xdjMuNGgtMjQuOVoiPjwvcGF0aD4NCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzg3LjEsMjQ2LjF2LTM0LjVoMTVjMi4zLDAsNC4yLjQsNS45LDEuMiwxLjcuOCwyLjksMiwzLjksMy41LjksMS41LDEuNCwzLjIsMS40LDUuMnMtLjUsMy44LTEuNCw1LjJjLS45LDEuNS0yLjIsMi43LTMuOSwzLjUtMS43LjgtMy42LDEuMy01LjksMS4zaC0xMS4ydjE0LjVoLTMuOFpNMzkxLDIyOC4yaDEwLjljMi4zLDAsNC4yLS42LDUuNi0xLjhzMi4xLTIuOCwyLjEtNC45LS43LTMuNi0yLjEtNC44LTMuMi0xLjgtNS42LTEuOGgtMTAuOXYxMy4zWiI+PC9wYXRoPg0KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MTMuOCwyNDYuMWwxNC4zLTM0LjVoNC42bDE0LjIsMzQuNWgtNC4xbC00LjMtMTAuOGgtMTYuM2wtNC40LDEwLjhoLTRaTTQyMy41LDIzMmgxMy42bC02LjgtMTYuOS02LjgsMTYuOWgwWiI+PC9wYXRoPg0KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NTQuMSwyNDYuMXYtMzQuNWgxNC44YzIuMywwLDQuMi40LDUuOSwxLjIsMS43LjgsMywyLDMuOSwzLjVzMS40LDMuMiwxLjQsNS4yLS43LDQuMi0yLDUuOC0zLjEsMi44LTUuMywzLjRsNy43LDE1LjNoLTQuMmwtNy40LTE0LjhoLTExdjE0LjhoLTMuOFpNNDU4LDIyOGgxMC43YzIuMywwLDQuMi0uNiw1LjYtMS44czIuMS0yLjgsMi4xLTQuOC0uNy0zLjUtMi4xLTQuNy0zLjMtMS44LTUuNi0xLjhoLTEwLjd2MTMuMVoiPjwvcGF0aD4NCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDk3LjUsMjQ2LjF2LTMxLjFoLTEyLjV2LTMuNGgyOC43djMuNGgtMTIuNXYzMS4xaC0zLjgsMFoiPjwvcGF0aD4NCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTIxLjgsMjQ2LjF2LTM0LjVoMy44bDIwLjgsMjh2LTI4aDMuNnYzNC41aC0zLjRsLTIxLjItMjguN3YyOC43aC0zLjZaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTU2MC44LDI0Ni4xdi0zNC41aDI0Ljd2My40aC0yMC45djEyLjFoMTMuN3YzLjNoLTEzLjd2MTIuNGgyMS4xdjMuNGgtMjQuOVoiPjwvcGF0aD4NCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTk0LjQsMjQ2LjF2LTM0LjVoMTQuOGMyLjMsMCw0LjIuNCw1LjksMS4yczMsMiwzLjksMy41LDEuNCwzLjIsMS40LDUuMi0uNyw0LjItMiw1LjgtMy4xLDIuOC01LjMsMy40bDcuNywxNS4zaC00LjJsLTcuNC0xNC44aC0xMXYxNC44aC0zLjgsMFpNNTk4LjIsMjI4aDEwLjdjMi4zLDAsNC4yLS42LDUuNi0xLjgsMS40LTEuMiwyLjEtMi44LDIuMS00LjhzLS43LTMuNS0yLjEtNC43Yy0xLjQtMS4yLTMuMy0xLjgtNS42LTEuOGgtMTAuN3YxMy4xWiI+PC9wYXRoPg0KICA8L3N2Zz4NCg==");
          mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjI3LjcgMjA5LjkgNTk0LjEgMzcuNiIgZmlsbD0iI2ZmZmZmZiI+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTI4LjcsMjQ2LjF2LTM0LjVoMTQuOGMyLjMsMCw0LjIuNCw1LjksMS4yczMsMiwzLjksMy41LDEuNCwzLjIsMS40LDUuMi0uNyw0LjItMiw1LjgtMy4xLDIuOC01LjMsMy40bDcuNywxNS4zaC00LjJsLTcuNC0xNC44aC0xMXYxNC44aC0zLjhaTTMyLjUsMjI4aDEwLjdjMi4zLDAsNC4yLS42LDUuNi0xLjgsMS40LTEuMiwyLjEtMi44LDIuMS00LjhzLS43LTMuNS0yLjEtNC43Yy0xLjQtMS4yLTMuMy0xLjgtNS42LTEuOGgtMTAuN3YxMy4xWiI+PC9wYXRoPg0KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik02My44LDI0Ni4xdi0zNC41aDI0Ljd2My40aC0yMC45djEyLjFoMTMuN3YzLjNoLTEzLjd2MTIuNGgyMS4xdjMuNGgtMjQuOSwwWiI+PC9wYXRoPg0KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik05NC41LDI0Ni4xbDE0LjMtMzQuNWg0LjZsMTQuMiwzNC41aC00LjFsLTQuMy0xMC44aC0xNi4zbC00LjQsMTAuOGgtNFpNMTA0LjIsMjMyaDEzLjZsLTYuOC0xNi45LTYuOCwxNi45WiI+PC9wYXRoPg0KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik0xMzUsMjQ2LjF2LTM0LjVoMy44djMxLjFoMjAuNnYzLjRoLTI0LjRaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTE4MiwyNDYuMXYtMzQuNWgyNC43djMuNGgtMjAuOXYxMi4xaDEzLjd2My4zaC0xMy43djEyLjRoMjEuMXYzLjRoLTI0LjksMFoiPjwvcGF0aD4NCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjI2LjgsMjQ2LjVjLTIuNywwLTUuMy0uNS03LjgtMS43cy00LjctMi43LTYuNi00LjhsMi41LTIuNmMxLjgsMS45LDMuNywzLjMsNS43LDQuM3M0LjEsMS40LDYuNCwxLjQsMy40LS4zLDQuOC0uOWMxLjQtLjYsMi41LTEuNCwzLjMtMi40czEuMi0yLjIsMS4yLTMuNS0uNi0zLjEtMS44LTQuMS0zLjMtMS43LTYuMS0yLjFsLTUtLjhjLTMuMy0uNi01LjgtMS41LTcuMy0zcy0yLjQtMy4zLTIuNC01LjguNS0zLjYsMS41LTUsMi40LTIuNiw0LjMtMy40YzEuOC0uOCwzLjktMS4yLDYuMy0xLjJzNC44LjQsNy4yLDEuMmMyLjMuOCw0LjUsMS45LDYuNCwzLjRsLTIuMiwzYy0zLjgtMi45LTcuNi00LjMtMTEuNi00LjNzLTMuMS4zLTQuMy44LTIuMiwxLjItMi45LDIuMWMtLjcuOS0xLDItMSwzLjJzLjUsMi44LDEuNiwzLjcsMi45LDEuNSw1LjQsMS45bDQuOS44YzMuOC42LDYuNSwxLjcsOC4yLDMuMnMyLjYsMy42LDIuNiw2LjMtLjYsMy44LTEuNyw1LjNjLTEuMSwxLjYtMi43LDIuOC00LjcsMy42LTIsLjktNC4zLDEuMy02LjksMS4zaDBaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTI1Ny4yLDI0Ni4xdi0zMS4xaC0xMi41di0zLjRoMjguN3YzLjRoLTEyLjV2MzEuMWgtMy44LDBaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTI3MS42LDI0Ni4xbDE0LjMtMzQuNWg0LjZsMTQuMiwzNC41aC00LjFsLTQuMy0xMC44aC0xNi4zbC00LjQsMTAuOGgtNFpNMjgxLjQsMjMyaDEzLjZsLTYuOC0xNi45LTYuOCwxNi45aDBaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTMxNS40LDI0Ni4xdi0zMS4xaC0xMi41di0zLjRoMjguN3YzLjRoLTEyLjV2MzEuMWgtMy44LDBaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTMzOS41LDI0Ni4xdi0zNC41aDI0Ljd2My40aC0yMC45djEyLjFoMTMuN3YzLjNoLTEzLjd2MTIuNGgyMS4xdjMuNGgtMjQuOVoiPjwvcGF0aD4NCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMzg3LjEsMjQ2LjF2LTM0LjVoMTVjMi4zLDAsNC4yLjQsNS45LDEuMiwxLjcuOCwyLjksMiwzLjksMy41LjksMS41LDEuNCwzLjIsMS40LDUuMnMtLjUsMy44LTEuNCw1LjJjLS45LDEuNS0yLjIsMi43LTMuOSwzLjUtMS43LjgtMy42LDEuMy01LjksMS4zaC0xMS4ydjE0LjVoLTMuOFpNMzkxLDIyOC4yaDEwLjljMi4zLDAsNC4yLS42LDUuNi0xLjhzMi4xLTIuOCwyLjEtNC45LS43LTMuNi0yLjEtNC44LTMuMi0xLjgtNS42LTEuOGgtMTAuOXYxMy4zWiI+PC9wYXRoPg0KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MTMuOCwyNDYuMWwxNC4zLTM0LjVoNC42bDE0LjIsMzQuNWgtNC4xbC00LjMtMTAuOGgtMTYuM2wtNC40LDEwLjhoLTRaTTQyMy41LDIzMmgxMy42bC02LjgtMTYuOS02LjgsMTYuOWgwWiI+PC9wYXRoPg0KICAgIDxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00NTQuMSwyNDYuMXYtMzQuNWgxNC44YzIuMywwLDQuMi40LDUuOSwxLjIsMS43LjgsMywyLDMuOSwzLjVzMS40LDMuMiwxLjQsNS4yLS43LDQuMi0yLDUuOC0zLjEsMi44LTUuMywzLjRsNy43LDE1LjNoLTQuMmwtNy40LTE0LjhoLTExdjE0LjhoLTMuOFpNNDU4LDIyOGgxMC43YzIuMywwLDQuMi0uNiw1LjYtMS44czIuMS0yLjgsMi4xLTQuOC0uNy0zLjUtMi4xLTQuNy0zLjMtMS44LTUuNi0xLjhoLTEwLjd2MTMuMVoiPjwvcGF0aD4NCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDk3LjUsMjQ2LjF2LTMxLjFoLTEyLjV2LTMuNGgyOC43djMuNGgtMTIuNXYzMS4xaC0zLjgsMFoiPjwvcGF0aD4NCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTIxLjgsMjQ2LjF2LTM0LjVoMy44bDIwLjgsMjh2LTI4aDMuNnYzNC41aC0zLjRsLTIxLjItMjguN3YyOC43aC0zLjZaIj48L3BhdGg+DQogICAgPHBhdGggY2xhc3M9InN0MCIgZD0iTTU2MC44LDI0Ni4xdi0zNC41aDI0Ljd2My40aC0yMC45djEyLjFoMTMuN3YzLjNoLTEzLjd2MTIuNGgyMS4xdjMuNGgtMjQuOVoiPjwvcGF0aD4NCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNTk0LjQsMjQ2LjF2LTM0LjVoMTQuOGMyLjMsMCw0LjIuNCw1LjksMS4yczMsMiwzLjksMy41LDEuNCwzLjIsMS40LDUuMi0uNyw0LjItMiw1LjgtMy4xLDIuOC01LjMsMy40bDcuNywxNS4zaC00LjJsLTcuNC0xNC44aC0xMXYxNC44aC0zLjgsMFpNNTk4LjIsMjI4aDEwLjdjMi4zLDAsNC4yLS42LDUuNi0xLjgsMS40LTEuMiwyLjEtMi44LDIuMS00LjhzLS43LTMuNS0yLjEtNC43Yy0xLjQtMS4yLTMuMy0xLjgtNS42LTEuOGgtMTAuN3YxMy4xWiI+PC9wYXRoPg0KICA8L3N2Zz4NCg==");
}

@supports not ((-webkit-mask-image: url(#x)) or (mask-image: url(#x))) {
  
    .mk, .cut { display: none; }
  
    .head__logo { display: block !important; }
}