/* ══════════════════════════════════════════════════════════════════════
   PRO-SCHICHT — Garni Trojer
   ══════════════════════════════════════════════════════════════════════
   Diese Datei liegt ÜBER `stil.css` und ersetzt dort nichts. Wer sie
   entfernt, bekommt exakt wieder den alten Entwurf. Das ist Absicht:
   der Kunde sieht zwei Stände, /entwurf-trojer und /entwurf-trojer-pro.

   Vorbild ist dornsberg.net. Dort laufen GSAP + ScrollTrigger + Lenis.
   Nachgebaut ist die WIRKUNG, nicht die Bibliothek — 0 KB Fremdcode:

     1  Sanftlauf     Das Scrollen hat Trägheit statt Rasterung.
     2  Szenen        Werte hängen am Scrollstand, nicht an einem Schalter.
     3  Auftakt       Ein Vorhang trägt die Seite herein und hinaus.
     4  Bogen         Bilder kommen als Rundbogen und werden gerade.
     5  Bildband      Bilder laufen automatisch von rechts nach links.
     6  Laufband      Der Hausname wandert, das Scrollen schiebt ihn.
     7  Buchstaben    Überschriften kommen Buchstabe für Buchstabe.
     8  Veredelung    Jedes Bild bekommt Korn, Wärme und Tiefe.

   ⛔ NICHT MEHR DABEI (raus am 04.09.2026, auf Davids Ansage fuer ALLE
   Haeuser): der Zeiger-Ring statt des Mauspfeils und das Wegducken der
   Kopfzeile beim Runterscrollen. Beides geloescht, nicht stillgelegt —
   die Abschnitte 7 und 4c weiter unten sagen, warum.
   Wer eines davon zurueckholen will, fragt vorher David.

   GRUNDREGEL: alles hängt an `.pro` am <html>. Die Klasse setzt das
   Skript in seiner ersten Zeile. Läuft kein Skript, greift keine einzige
   Regel hier und die Seite steht vollständig da wie vorher.
   ══════════════════════════════════════════════════════════════════════ */


/* ══════════ Registrierte Eigenschaften ═══════════════════════════════
   Ein `--p`, das der Browser als Zahl kennt, kann er interpolieren und
   auf die GPU legen. Ohne @property ist jede Custom Property ein String:
   dann rechnet calc() zwar, aber jede Änderung kostet einen Style-Recalc
   auf dem Hauptstrang. Genau dieser Unterschied ist der Grund, warum
   scrollgekoppelte Effekte anderswo ruckeln.                            */
@property --p  { syntax:'<number>'; inherits:false; initial-value:0 }
@property --pe { syntax:'<number>'; inherits:false; initial-value:1 }

:root{
  /* Die eine Kurve. Alles auf dieser Seite bewegt sich mit derselben
     Beschleunigung — das ist der Unterschied zwischen „animiert" und
     „gestaltet". Schnell los, lange auslaufen. */
  --kurve:cubic-bezier(.16,.84,.34,1);
  --kurve-weich:cubic-bezier(.33,1,.68,1);
  --sanft:.9s var(--kurve);

  /* ZWEI Schriften, sauber gepaart (David 10.09.: „für die Textüberschriften
     nimm andere Schriftart"): Überschriften in der Serifen-Schrift FRAUNCES,
     Fließtext bleibt Outfit (--sans). Das klassische Luxus-Paar Serif+Sans —
     KEINE dritte Schrift (Style Script bleibt raus, Zier-Wort ist ausgeblendet). */
  --display:'Fraunces',Georgia,serif;
  --zier:var(--sans);

  /* V2-Übernahme: das eine warme Metall (Messing) als Zier-/Akzentton,
     die ruhige V2-Kurve, ein sehr helles Creme für die Sektions-Rhythmik. */
  --messing:#c3ab74;
  --ruhig:cubic-bezier(.22,.61,.36,1);
  --creme:#f7f4ec;      /* warmes Elfenbein */
  --salbei:#edf0ea;     /* Hauch Salbei — an die Hausfarbe Oliv angelehnt */
}


/* ══════════════════════════════════════════════════════════════════════
   0 · SCHRIFT-VEREDELUNG — die Handschrift von Vorlage 2 auf Vorlage 1
   ══════════════════════════════════════════════════════════════════════
   Vorlage 1 stand ganz auf „Outfit" (einer Grotesk): sauber, aber neutral.
   Vorlage 2 wirkt hochwertiger, weil die GROSSEN Zeilen eine echte
   Serifen-Display („Fraunces") tragen und ein Zier-Schriftzug
   („Style Script") die kleinen Rubriken und das Akzentwort setzt. Genau
   diese zwei Schriften holen wir her; der Fließtext bleibt Outfit (ruhig,
   lesbar). Nur in pro3 (Experiment) — die Kundenfassung bleibt unberührt,
   bis David diese Fassung freigibt.

   Fraunces ist variabel (Gewicht 400–700, optische Größe): bei großen
   Zeilen hohe „opsz" = feine, hohe Kontraste; klein = ruhiger.            */

@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(schriften/fraunces-latin-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;
}
@font-face{
  font-family:'Fraunces';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(schriften/fraunces-latin.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:'Style Script';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/stylescript-latin-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;
}
@font-face{
  font-family:'Style Script';font-style:normal;font-weight:400;font-display:swap;
  src:url(schriften/stylescript-latin.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;
}

/* Die großen SECTION-Zeilen → Serifen-Display. „opsz" hoch, damit die
   Kontraste bei Anzeigegröße fein und edel stehen; optisches Sizing an.
   ⛔ Der HERO (h1 / .titel-satz — Start- UND Unterseiten) bleibt bewusst
      DRAUSSEN: David 09.09. „das Hero mit dieser Schriftart gefällt mir nicht
      mehr, wieder normal wie früher." Der Titel läuft dort in Outfit (stil.css). */
html.pro h2,html.pro h3,html.pro .marke-gross{
  font-family:var(--display);
  font-optical-sizing:auto;
  font-variation-settings:'opsz' 130;
}
html.pro h2{font-weight:430;letter-spacing:-.012em}

/* ⛔ HERO-AKZENTWORT „Taufers" wieder NORMAL (David 09.09.): KEIN Style-Script-
   Zug mehr. Es gilt allein die Basisregel weiter unten (`.titel-satz em` =
   Sand-Farbe, font-style normal, Outfit) — der Hero steht damit exakt wie in
   der klassischen Vorlage 1. */

/* Die Rubrik läuft jetzt AUCH in Fraunces (David 09.09.: „nur eine Schriftart,
   nicht 3"). Damit ist die ganze Überschrift EINE Schrift — Fraunces: kleine
   Versal-Rubrik + großes Kursiv-Wort + Versal-Titel. Klein-versal + Messing
   bleibt; der feine Strich davor kommt aus stil.css. */
html.pro .rubrik{
  color:var(--messing);
  font-family:var(--display);font-optical-sizing:auto;font-variation-settings:'opsz' 22;
  font-weight:600;
}
html.pro .tief .rubrik{color:var(--messing)}


/* ══════════════════════════════════════════════════════════════════════
   0b · GRUND-VEREDELUNG — warmes Licht statt flachem Weiß
   ══════════════════════════════════════════════════════════════════════
   V1 stand auf reinweißem Papier (#fff). Sauber, aber flach. Wir legen HINTER
   den ganzen Inhalt (.nach-titel) ein sehr leises, warmes Licht in Sand und
   Oliv und ein kaum sichtbares Filmkorn. Die Fläche bekommt Tiefe und Wärme —
   ohne dass ein Effekt auffällt. `background-attachment:fixed` ankert das
   Licht am Bildschirm, nicht am (sehr hohen) Element: so bleibt es beim
   Scrollen ein ruhiger Raum-Ton statt eines Flecks ganz oben. Die dunklen
   `.tief`-Bänder und das Titelbild decken ihren Grund selbst — sie bleiben
   unberührt. Streng im V1-Ethos: bemerken soll man das Haus.               */
html.pro .nach-titel{
  background:
    radial-gradient(66vw 60vh, rgba(169,161,132,.22), transparent 66%),
    radial-gradient(60vw 58vh, rgba(140,158,168,.13), transparent 66%),
    radial-gradient(72vw 66vh, rgba(169,161,132,.18), transparent 66%),
    radial-gradient(58vw 58vh, rgba(120,140,120,.11), transparent 64%),
    radial-gradient(90vw 80vh, rgba(61,92,54,.07),    transparent 66%),
    var(--papier);
  background-repeat:no-repeat;
  /* ⛔ KEIN background-attachment:fixed mehr (David 10.09.: „flimmert oben und
     unten"). Fixed-Hintergründe flackern in SAFARI beim Scrollen, besonders
     hinter dem sticky-Fenstersitz — genau der Bug. Die Wolken-Drift kommt
     ohnehin aus der Scroll-Animation (atmo-drift), nicht aus fixed. */
  background-attachment:scroll;
  background-position:4% -2%, 98% 16%, -8% 56%, 112% 82%, 50% 122%, 0 0;
  /* ⛔ KEIN `overflow-x:clip` hier mehr (David 10.09.: Fenstersitz flimmert in
     SAFARI). Ein Clip DIREKT am Vorfahren eines `position:sticky`-Elements lässt
     Safari an den oberen/unteren Kanten flackern — genau der Bug (Tofana hat den
     Clip nicht und flimmert nie). Der horizontale Überlauf wird ohnehin schon am
     `body` abgefangen (`html.pro body{overflow-x:clip}`), und die früher hier
     bewusst überragenden `.grund-symbol`-Formen sind längst aus (display:none). */
}
/* ⚠️ Fenstersitz-Fahrt braucht einen DECKENDEN Grund (David 10.09.: „flackert
   oben und unten beim Scrollen"). `.nach-titel` nutzt `background-attachment:fixed`
   — der fixe Hintergrund flimmert sonst an den oberen/unteren Fensterrändern
   hinter dem sticky-Fenster durch. `--papier` ist reines Weiß (die Creme-Optik
   kommt von den Gradienten) — als flächiger Grund zu hell; `--creme` = das warme
   Creme der Bänder, deckt ab und fügt sich am Übergang ein. */
html.pro .fs-fahrt{background:var(--creme)}
/* ⭐ frascati-Richtung: die weichen „Wolken" DRIFTEN mit dem Seiten-Scroll und
   kehren beim Zurückscrollen um — jede Lage unterschiedlich weit (Parallaxe).
   `animation-timeline: scroll(root)` bindet es an den Gesamt-Scroll; ohne
   Support bleibt der ruhige statische Grund oben. Warm-creme bleibt die Basis,
   ein dezenter kühler Sky-Haze gibt die luftige Tiefe. */
@supports (animation-timeline: scroll()){
  @media all{
    @keyframes atmo-drift{
      from{background-position:4% -2%, 98% 16%, -8% 56%, 112% 82%, 50% 122%, 0 0}
      to  {background-position:-3% -18%, 105% 3%, -17% 42%, 119% 68%, 50% 102%, 0 0}
    }
    html.pro .nach-titel{
      animation:atmo-drift linear both;
      animation-timeline:scroll(root);
    }
  }
}
/* Feines, ruhendes Korn über der Fläche. --korn liefert skript.js (winziges
   Rausch-PNG). Ohne Skript/Canvas bleibt die Schicht einfach leer. */
html.pro .nach-titel::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:var(--korn);background-size:160px;
  opacity:.022;mix-blend-mode:multiply;
}


/* ══════════════════════════════════════════════════════════════════════
   0c · DIE V2-TEXTBÜHNE — 1:1 aus Vorlage 2 (David 08.09.)
   ══════════════════════════════════════════════════════════════════════
   Genau das, worauf David gezeigt hat: hinter jeder Überschrift ein großes,
   blasses ZIER-WORT (das „Gekrakel"), darüber eine kleine Rubrik, und die
   Überschrift selbst STEIGT hinter einer Kante hervor (der „Aufzug"). Die
   Absätze blenden sanft auf. Alle Kurven, Wege und Zeiten sind aus v2.css
   übernommen; getriggert per IntersectionObserver (veredelung.js), der jedem
   Ziel einzeln `.sicht` anhängt — genau wie Vorlage 2.

   ⛔ Diese Regeln hängen am Element SELBST (`.aufzug.sicht`), nie an einem
      Vorfahren — sonst kämen sie mit V1s Abschnitts-`.sicht` durcheinander. */

/* — Das Zier-Wort (Gekrakel) ————————————————————————————————————
   Großer Schreibschrift-Zug in Messing, blass; sitzt per negativem Rand eng
   über der Überschrift, als läge die Zeile im Schwung der Schrift. */
/* Das Zier-Wort läuft jetzt in Fraunces KURSIV (nicht mehr Style Script) —
   damit die Überschrift nur noch ZWEI Schriften hat (Fraunces + kleine Sans-
   Rubrik) statt drei (David 09.09.: „3 Schriftarten sind hässlich"). Das große,
   blasse Kursiv-Wort hebt sich über Skala + Schräge klar vom Versal-Titel ab. */
html.pro .zier{
  display:block;
  font-family:var(--display);font-optical-sizing:auto;font-variation-settings:'opsz' 32;
  font-style:italic;font-weight:400;
  font-size:clamp(3.2rem,6.6vw,6rem);
  line-height:.84;color:var(--messing);
  pointer-events:none;user-select:none;
  margin:0 0 -.22em -.03em;
}
html.pro .zier{opacity:0;transform:translateX(.3em);
  transition:opacity 1.2s var(--ruhig),transform 1.2s var(--ruhig)}
html.pro .zier.sicht{opacity:.5;transform:none}
html.pro .tief .zier.sicht{opacity:.42}
/* ⛔ Zier-Wort AUS (David 10.09.: „nicht zwei verschiedene Schriftarten"). Das
   große kursive Wort war Outfit-Kursiv (echte Italic gibt es nicht → schräg
   gestellt), das las sich wie eine zweite Schrift. Ohne es ist die Überschrift
   unmissverständlich EINE Schrift. */
html.pro .zier{display:none}

/* — Die Überschrift „Zeile": Serifen-Versalien, gesperrt, edel ————— */
html.pro .zeile{
  display:block;margin:0;
  font-family:var(--display);font-optical-sizing:auto;
  font-variation-settings:'opsz' 48;
  font-weight:520;text-transform:uppercase;
  letter-spacing:.13em;text-indent:.13em;
  line-height:1.16;color:var(--tinte);
  font-size:clamp(1.7rem,1.1rem + 2.4vw,3.1rem);
}
html.pro .zeile.gross{font-size:clamp(2rem,1.1rem + 3.6vw,3.9rem)}
/* EINE Farbe (David 10.09.: „nicht zwei verschiedene Farben"). Das Akzentwort
   läuft nicht mehr in Gold, sondern in derselben Farbe wie die restliche Zeile. */
html.pro .zeile em{font-style:normal;color:inherit}
html.pro .tief .zeile{color:var(--schrift-hell)}
/* Einspaltige Intro-Bänder mittig (David 10.09.: „mach das zentriert"). Nur der
   `.mitte`-Wrapper (Rubrik + Zeile + Fließtext) — die Zweispalter bleiben links,
   die Kacheln daneben unberührt. */
html.pro .mitte{text-align:center}
html.pro .mitte .rubrik{justify-content:center}
/* ⚠️ Die Überschrift `.zeile` schrumpft auf Inhaltsbreite (fit-content, für die
   Aufzug-Maske) — `text-align:center` zentriert dann nur den Text INNERHALB der
   Box, nicht die Box selbst; sie klebt links. `margin-inline:auto` rückt die Box
   in die Mitte. Bei vollbreiten Absätzen kollabiert das auto zu 0 (harmlos). */
html.pro .mitte .zeile,
html.pro .mitte .zier,
html.pro .mitte .lead,
html.pro .mitte .fliess{margin-inline:auto}

/* — Der Aufzug: die Zeile fährt hinter einer Kante herauf ——————————
   Das äußere <span class="aufzug"> schneidet ab, das innere fährt herauf.
   `--verzug` staffelt Zeile 2/3 (im HTML gesetzt), 1:1 wie V2. */
.aufzug{display:block;overflow:hidden;padding-bottom:.08em}
html.pro .aufzug > span{
  display:block;transform:translateY(106%);
  transition:transform 1s var(--ruhig);
  transition-delay:var(--verzug,0ms);
}
html.pro .aufzug.sicht > span{transform:none}

/* — Sanftes Auffahren für Absätze, Formulare, Kennzahlen ————————— */
html.pro [data-auf]{
  opacity:0;transform:translateY(24px);
  transition:opacity .9s var(--ruhig),transform .9s var(--ruhig);
  transition-delay:var(--verzug,0ms);
}
html.pro [data-auf].sicht{opacity:1;transform:none}

/* ⭐ SICHERHEITSNETZ — die Schrift MUSS auf der Startseite sichtbar sein
   (David 09.09.: „die Scroll-Animation so anpassen, dass man die Schrift
   sieht"). Der feine Einzel-Beobachter (veredelung.js) gibt jeder Zeile ihr
   eigenes Timing — greift er aber mal nicht (Sanftlauf-Timing, langsames
   Gerät), bliebe die Aufzug-Zeile unter der Kante = unsichtbar. Darum hängen
   dieselben Endzustände ZUSÄTZLICH am ABSCHNITTS-`.sicht`, das V1 doppelt
   absichert (zwei Observer + 2,5 s-Failsafe in skript.js). Sobald der
   Abschnitt sichtbar wird, steht der Text — garantiert. Die `--verzug`-
   Staffelung bleibt über die transition-delay erhalten. */
html.pro [data-sicht].sicht .aufzug > span{transform:none}
html.pro [data-sicht].sicht .zier{opacity:.5;transform:none}
html.pro [data-sicht].sicht.tief .zier{opacity:.42}
html.pro [data-sicht].sicht [data-auf]{opacity:1;transform:none}

/* — Das Zier-Wort im Titelbild („Willkommen") ————————————————————
   Hängt am Auftakt (`.los`), NICHT an `.sicht`: im Titelbild setzt nichts
   scrollend `.sicht`, und ein Übergang, dessen End- und Anfangswert im
   selben Frame stehen, fiele aus. Heller Ton mit Schatten, damit er auf
   dem Foto trägt. */
html.pro .titel-zier{
  display:block;font-family:var(--zier);font-weight:400;
  font-size:clamp(2.6rem,6vw,5.4rem);line-height:.7;
  color:var(--schrift-hell);margin:0 0 -.02em;
  text-shadow:0 1px 3px rgba(10,12,8,.45),0 2px 30px rgba(10,12,8,.4);
  opacity:0;transform:translateY(.2em);
  transition:opacity 1.2s var(--ruhig),transform 1.2s var(--ruhig);
  transition-delay:.15s;
}
html.pro.los .titel-zier{opacity:.62;transform:none}

/* — „Bewegung reduzieren": alles steht sofort ——————————————————— */
@media not all{
  html.pro .zier,html.pro .aufzug > span,html.pro [data-auf],html.pro .titel-zier{
    opacity:1!important;transform:none!important;transition:none!important;
  }
  html.pro .zier{opacity:.5!important}
  html.pro .titel-zier{opacity:.62!important}
}


/* ══════════════════════════════════════════════════════════════════════
   0d · SEKTIONS-RHYTHMUS — Weiß und ein Hauch Creme im Wechsel
   ══════════════════════════════════════════════════════════════════════
   V1 war durchweg reinweiß. Ein sehr leiser Creme-Grund auf jeder zweiten
   Sektion gibt der Seite Takt und Wärme, ohne die weiß-edle Anmutung zu
   verlieren. Die dunklen `.tief`-Bänder bleiben der harte Kontrapunkt. */
html.pro .band-creme{background:var(--creme)}
html.pro .band-salbei{background:var(--salbei)}
html.pro .band-creme + .band-creme,
html.pro .band-salbei + .band-salbei{background:transparent}


/* ══════════════════════════════════════════════════════════════════════
   0e · WASSERZEICHEN — große, blasse Zeichen im Grund (David 08.09.)
   ══════════════════════════════════════════════════════════════════════
   Das große „1973" im Haus-Band kam so gut an, dass es jetzt das Prinzip der
   ganzen Seite wird: in jedem hellen Band steht EIN großes, sehr blasses
   Zeichen im Hintergrund — mal eine Zahl (1973, 21), mal ein Schreibschrift-
   Wort (Ahrntal), mal ein Symbol (Berge, Tanne aus dem Logo). Das nimmt dem
   Weiß die Monotonie und macht die Seite lebendig, ohne laut zu werden.

   Alle sitzen absolut im `.band` (nie overflow:hidden aufs Band — bricht
   sticky, siehe stil.css), blenden mit dem Abschnitts-`.sicht` auf und
   liegen unter dem Inhalt (`.innen` ist z-index:1). Der Body ist
   overflow:clip → Zeichen dürfen über den Rand hinausragen, ohne dass die
   Seite seitlich scrollt: genau das gibt den modernen, angeschnittenen Look. */

/* Etwas kräftiger als V1s 0.05 — „krasser", aber immer noch Grund, nie Text.
   Reveal hängt am Abschnitts-`.sicht` (Vorfahr), NICHT an `.js` (das sitzt auf
   demselben <html> wie .pro, `html.pro .js` würde also nie matchen). Bis
   `.sicht` bleibt V1s Startwert 0 → das Zeichen fährt sauber ein. */
html.pro .sicht .marke-gross{opacity:.06}
html.pro .sicht .marke-gross.wm-stark{opacity:.085}

/* Farbige Wasserzeichen bringen Leben rein (statt nur Grau). Sparsam. */
html.pro .marke-gross.wm-oliv{color:var(--oliv)}
html.pro .marke-gross.wm-sand{color:var(--sand-tief)}

/* Schreibschrift-Wasserzeichen (z. B. „Ahrntal") — der Zier-Zug ganz groß. */
html.pro .marke-gross.wm-zier{
  font-family:var(--zier);font-weight:400;letter-spacing:0;
  font-size:clamp(4.5rem,19vw,15rem);line-height:.9;
}

/* — Symbol-Wasserzeichen (überarbeitet 09.09. — David: „viel krasser, dicker,
     nicht so kindlich, an den Scroll gekoppelt"). Statt Zickzack-Berg/Tanne
     jetzt eine TOPOGRAFISCHE Sprache: Höhenlinien (versetzte Contour-Ringe wie
     eine Wanderkarte) und ein kräftiger, asymmetrischer Grat. Beide per Maske,
     damit sie sich sauber einfärben. Groß, dick, blass — modern, alpin, edel. */
:root{
  --motiv-hoehen:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 160'%3E%3Cellipse cx='104' cy='90' rx='92' ry='62' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cellipse cx='100' cy='86' rx='68' ry='46' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cellipse cx='96' cy='82' rx='44' ry='30' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3Cellipse cx='92' cy='78' rx='22' ry='15' fill='none' stroke='%23000' stroke-width='2.4'/%3E%3C/svg%3E");
  --motiv-grat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 90'%3E%3Cpath d='M4 86 L40 34 L60 54 L96 16 L118 44 L150 12 L178 40 L216 86' fill='none' stroke='%23000' stroke-width='3.4' stroke-linejoin='round' stroke-linecap='round'/%3E%3C/svg%3E");
}
html.pro .grund-symbol{
  position:absolute;z-index:0;pointer-events:none;user-select:none;
  width:min(60vw,820px);aspect-ratio:1.25/1;
  background:var(--oliv);
  -webkit-mask:var(--motiv,var(--motiv-hoehen)) no-repeat center/contain;
          mask:var(--motiv,var(--motiv-hoehen)) no-repeat center/contain;
  opacity:.08;   /* statischer Fallback ohne Scroll-Timeline */
}
html.pro .grund-symbol.grat{--motiv:var(--motiv-grat);aspect-ratio:2.4/1;width:min(62vw,860px)}
html.pro .tief .grund-symbol{background:var(--sand);opacity:.14}
/* ⛔ Kreise/Ringe/Spiralen im Grund AUS (David 10.09.: „diese ganzen Spiralen,
   diese ganzen Kreise gefallen mir gar nicht — etwas Cleaneres, Hochwertigeres").
   Die grafischen Motive (Ring, Welle, Grat, konzentrische Höhenlinien) fliegen
   raus; die Ruhe kommt jetzt aus dem warmen Licht + den dezenten Zahl-
   Wasserzeichen (.marke-gross). EINE Zeile hält es reversibel. */
html.pro .grund-symbol{display:none}

/* ⭐ SCROLL-GEKOPPELT — driftet mit dem Finger, kehrt beim Zurückscrollen um.
   `animation-timeline: view()` bindet die Animation an die Scroll-POSITION des
   Elements (nicht an die Zeit): dadurch ist sie automatisch reversibel und
   läuft komplett auf dem Compositor — kein rAF, kein Lag. Genau das „richtig
   krass, bewegt sich beim Scrollen und wieder zurück" (David 09.09.). Ohne
   Timeline-Unterstützung bleibt der ruhige statische Fallback oben. */
@supports (animation-timeline: view()){
  @media all{
    @keyframes grund-schweben{
      0%{opacity:0;transform:translate3d(0,110px,0) rotate(-4deg) scale(1.04)}
      24%{opacity:.13}
      76%{opacity:.13}
      100%{opacity:0;transform:translate3d(0,-110px,0) rotate(4deg) scale(1.04)}
    }
    @keyframes grund-schweben-tief{
      0%{opacity:0;transform:translate3d(0,110px,0) rotate(-4deg) scale(1.04)}
      24%{opacity:.22}
      76%{opacity:.22}
      100%{opacity:0;transform:translate3d(0,-110px,0) rotate(4deg) scale(1.04)}
    }
    html.pro .grund-symbol{
      opacity:0;
      animation:grund-schweben linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    html.pro .tief .grund-symbol{animation-name:grund-schweben-tief}
  }
}

/* — Mehr & edlere Formen (David 09.09.: „mehr, richtig nobel"). Recherche
   (DesignRush/Webflow 2026): dünne Linien-Geometrie — Ringe, Bögen — monochrom,
   die beim Scrollen driften/rotieren, wirkt edel. Zwei neue Motive dazu:
   konzentrische RINGE und eine sanfte DOPPEL-WELLE (Bogen). */
:root{
  --motiv-ring:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'%3E%3Ccircle cx='100' cy='100' r='95' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='100' cy='100' r='66' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3Ccircle cx='100' cy='100' r='37' fill='none' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E");
  --motiv-welle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 260 90'%3E%3Cpath d='M4 74 C 74 10, 186 10, 256 74' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M4 54 C 74 -8, 186 -8, 256 54' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' opacity='.5'/%3E%3C/svg%3E");
}
html.pro .grund-symbol.ring{--motiv:var(--motiv-ring);aspect-ratio:1/1;width:min(50vw,660px)}
html.pro .grund-symbol.welle{--motiv:var(--motiv-welle);aspect-ratio:2.9/1;width:min(66vw,920px)}
/* Der Ring dreht sich sacht beim Scrollen — das „animierte Kreis"-Motiv der
   Recherche, nobel und ruhig. */
@supports (animation-timeline: view()){
  @media all{
    @keyframes grund-dreht{
      0%{opacity:0;transform:translate3d(0,70px,0) rotate(-18deg)}
      24%{opacity:.11}
      76%{opacity:.11}
      100%{opacity:0;transform:translate3d(0,-70px,0) rotate(18deg)}
    }
    html.pro .grund-symbol.ring{animation-name:grund-dreht}
  }
}


/* ══════════════════════════════════════════════════════════════════════
   0f · EDITORIAL-FEINSCHLIFF — Serifen konsequent durchziehen (David 09.09.)
   ══════════════════════════════════════════════════════════════════════
   „Edler & cooler": die Serifen-Display sitzt schon in den Überschriften —
   jetzt auch dort, wo sie am meisten Klasse bringt: die großen KENNZAHLEN
   (1973 · 21 · 3) und das VOLLBILD-ZITAT. Serifen-Ziffern und ein Serifen-
   Zitat sind die Handschrift teurer Hotelseiten. Alles andere bleibt ruhig. */

/* Die Kennzahlen: große Serifen-Ziffern, eine Spur größer, in Hausfarbe. */
html.pro .kennzahl b{
  font-family:var(--display);font-optical-sizing:auto;
  font-variation-settings:'opsz' 72;
  font-weight:430;
  font-size:clamp(2.6rem,1.5rem + 2.6vw,4.1rem);
  letter-spacing:-.012em;line-height:.94;
  color:var(--oliv);
}
html.pro .tief .kennzahl b{color:var(--sand)}
/* Das Label darunter etwas leiser und feiner gesperrt — mehr Kontrast zur Ziffer. */
html.pro .kennzahl span{letter-spacing:.24em}

/* Das Vollbild-Zitat als Serifen-Pull-Quote — filmischer, hochwertiger. */
html.pro .zitat-inhalt p{
  font-family:var(--display);font-optical-sizing:auto;
  font-variation-settings:'opsz' 120;
  font-weight:400;letter-spacing:-.01em;
}


/* ══════════════════════════════════════════════════════════════════════
   1 · SANFTLAUF
   ══════════════════════════════════════════════════════════════════════
   Das Rad des Nutzers füllt nur noch ein Ziel; die Seite zieht in jedem
   Bild ein Stück nach. `scroll-behavior:smooth` MUSS dabei weg — sonst
   kämpfen zwei Glätter um denselben Wert und es entsteht ein Gummiband. */
html.pro.sanftlauf{scroll-behavior:auto}

/* MERKE: Die Trägheit darf NICHT `pointer-events:none` auf den Body legen,
   wie es manche Bibliotheken tun. Der Nachlauf dauert knapp eine Sekunde —
   in dieser Sekunde wären alle Knöpfe tot. Wer schnell scrollt und sofort
   klickt, hätte ins Leere geklickt und das nie verstanden.

   ⛔ HIER STAND EINE GESCHWINDIGKEITS-NEIGUNG der Bilder (skewY nach
   Fahrtrichtung). RAUS aus zwei Gründen: sie hing an einer Klasse, die
   kein Element trug — sie lief also nie —, und sie gehört in dieselbe
   Familie wie der Glanz, den David rausgeworfen hat. Ein Effekt, den man
   BEMERKT, ist auf einer Hotelseite ein Fehler. Bemerken soll man das
   Haus.                                                                 */


/* ══════════════════════════════════════════════════════════════════════
   2 · SZENEN — der scrollgekoppelte Fortschritt
   ══════════════════════════════════════════════════════════════════════
   Jedes Element mit [data-szene] bekommt vom Skript zwei Zahlen:
     --p   0 … 1   die ganze Durchfahrt (unten rein bis oben raus)
     --pe  0 … 1   nur der Eintritt (Oberkante von 100 % vh auf 42 % vh)
   Alles Weitere ist reines CSS. Das ist der Kern: kein Schalter „sichtbar
   ja/nein", sondern ein Wert, der mit dem Finger mitläuft.               */

/* Tiefenzug: Blöcke kommen von unten und richten sich beim Eintreten auf. */
html.pro [data-szene="heben"]{
  opacity:calc(.15 + var(--pe) * .85);
  transform:translate3d(0,calc((1 - var(--pe)) * 90px),0)
            scale(calc(.965 + var(--pe) * .035));
}

/* Schleier: für großflächige Bilder, die nicht springen sollen. */
html.pro [data-szene="schleier"]{
  opacity:calc(.3 + var(--pe) * .7);
  filter:blur(calc((1 - var(--pe)) * 7px));
}

/* Gegenlauf: zwei Spalten fahren gegeneinander. Der Versatz ist gedeckelt,
   sonst reißt das Raster auf schmalen Schirmen auseinander. */
html.pro [data-szene="gegen-links"] {transform:translate3d(0,calc((var(--p) - .5) * -110px),0)}
html.pro [data-szene="gegen-rechts"]{transform:translate3d(0,calc((var(--p) - .5) *   70px),0)}


/* ══════════════════════════════════════════════════════════════════════
   3 · AUFTAKT UND SEITENWECHSEL
   ══════════════════════════════════════════════════════════════════════
   Ein Vorhang in Hausfarbe. Er trägt die Seite herein, und beim Klick auf
   einen internen Link trägt er sie wieder hinaus. Damit fühlen sich fünf
   einzelne HTML-Dateien wie EINE Anwendung an — das ist der Trick, den
   Next.js-Seiten wie dornsberg.net gratis haben und statische nicht.

   WICHTIG: Der Vorhang steht im HTML, nicht im Skript. Würde ihn das
   Skript einsetzen, sähe man für einen Moment die nackte Seite darunter
   — genau den Blitz, den er verhindern soll.                            */
.auftakt{
  position:fixed;inset:0;z-index:9000;
  background:var(--fels);
  display:grid;place-items:center;
  /* Die Unterkante ist ein Bogen — dieselbe Signatur wie bei den Bildern.
     Beim Heben wächst der Bogen, dann fährt die Fläche nach oben weg. */
  border-radius:0 0 0 0;
  transition:transform 1.15s var(--kurve),border-radius 1.15s var(--kurve),
             opacity .5s ease .75s;
  will-change:transform;
}
html:not(.pro) .auftakt{display:none}   /* kein Skript → kein Vorhang */

.auftakt-inhalt{
  display:flex;flex-direction:column;align-items:center;gap:1.5rem;
  transition:opacity .5s ease,transform .8s var(--kurve);
}
.auftakt-inhalt img{
  width:clamp(96px,10vw,132px);height:auto;
  opacity:0;transform:translateY(14px) scale(.94);
  animation:auftakt-marke 1.1s var(--kurve) .12s forwards;
}
.auftakt-inhalt b{
  font-weight:300;font-size:.7rem;letter-spacing:.42em;text-transform:uppercase;
  color:var(--schrift-hell-leise);
  opacity:0;animation:auftakt-marke .9s var(--kurve) .34s forwards;
}
/* Der Ladebalken ist bewusst 1 px hoch und 74 px breit: er soll den Blick
   halten, nicht Aufmerksamkeit fordern. */
.auftakt-linie{
  width:74px;height:1px;background:var(--linie-hell);position:relative;overflow:hidden;
  opacity:0;animation:auftakt-marke .9s var(--kurve) .46s forwards;
}
.auftakt-linie::after{
  content:"";position:absolute;inset:0;background:var(--sand);
  transform:scaleX(0);transform-origin:left;
  animation:auftakt-fuellen 1.15s var(--kurve) .5s forwards;
}
@keyframes auftakt-marke{to{opacity:1;transform:none}}
@keyframes auftakt-fuellen{to{transform:scaleX(1)}}

/* Zustand „hebt": der Bogen wächst, dann geht die Fläche hoch. */
.auftakt.hebt{
  transform:translate3d(0,-102%,0);
  border-radius:0 0 50% 50% / 0 0 22% 22%;
  pointer-events:none;
}
.auftakt.hebt .auftakt-inhalt{opacity:0;transform:translateY(-30px)}

/* Zustand „faellt": beim Verlassen der Seite kommt er von oben zurück.
   Kürzer als der Auftakt (0,62 s) — Warten beim Weggehen fühlt sich
   doppelt so lang an wie Warten beim Ankommen. */
.auftakt.faellt{
  transform:translate3d(0,0,0);
  border-radius:0 0 50% 50% / 0 0 18% 18%;
  transition:transform .62s var(--kurve-weich),border-radius .62s var(--kurve-weich);
  opacity:1;
}
.auftakt.faellt .auftakt-inhalt{opacity:0}

/* ⛔ HIER STAND EIN ZWEITES EINBLENDEN (Kopfzeile und Titelbild kamen mit
   `opacity:0` und wurden von `.offen` sichtbar gemacht). RAUS, und zwar
   aus einem Grund, der jedes Mal wieder auftaucht:

   Wer den sichtbaren Zustand einer Seite an eine Klasse haengt, die ein
   Skript setzt, hat eine Seite gebaut, die BEI JEDEM SKRIPTFEHLER LEER
   BLEIBT. Beim Test war genau das zu sehen — dunkler Schirm, keine
   Kopfzeile, und in den Entwicklerwerkzeugen kein einziger Fehler.

   Der Vorhang deckt die Seite waehrend des Ladens ohnehin vollstaendig
   ab. Ein zweites Ausblenden DARUNTER sieht man nie; es kann nur kaputt
   gehen. Der Vorhang selbst hat eine Reissleine im Kopf jeder Seite und
   geht auch dann weg, wenn pro.js gar nicht laedt.

   MERKE: Was der Besucher sehen MUSS, gehoert nie hinter eine Klasse,
   die erst ein Skript vergibt. Bewegung ja — Sichtbarkeit nein.        */


/* ══════════════════════════════════════════════════════════════════════
   4 · DER BOGEN, DER SICH ÖFFNET
   ══════════════════════════════════════════════════════════════════════
   Die Signatur von dornsberg.net: Bilder betreten die Seite mit einer
   gewölbten Oberkante und werden beim Weiterscrollen gerade. Beim Garni
   Trojer sitzt das doppelt richtig — das Haus HAT Rundbögen, im Buffet-
   raum und im Zimmerdurchgang. Der Effekt zitiert also die Architektur.

   Gerechnet wird über den Eintritt (--pe): bei 0 ist es ein voller Bogen,
   bei 1 ein Rechteck mit 3 px Rundung.                                   */
html.pro [data-bogenauf]{
  overflow:hidden;position:relative;isolation:isolate;
  border-radius:
    calc(50% * (1 - var(--pe))) calc(50% * (1 - var(--pe))) 3px 3px /
    calc(34% * (1 - var(--pe))) calc(34% * (1 - var(--pe))) 3px 3px;
}
/* ⛔ HIER LIEGT DIE FALLE: KEIN `transform` auf das Bild im Bogen.
   `stil.css` schreibt dort bereits
       transform: translate3d(0,var(--py)) scale(var(--zoom))
   — --py ist die Scroll-Parallaxe aus skript.js, --zoom der Vorhang- und
   Hover-Zoom. Wer hier eine dritte Hand anlegt, killt beide: das Bild
   steht dann starr im Rahmen und der Überfahr-Effekt ist tot, ohne dass
   irgendwo eine Fehlermeldung erscheint.
   Der Bogen allein trägt den Effekt. Das reicht auch.                    */

/* ⛔ HIER LAG EIN HELLER SAUM AUF DER BOGENKANTE. RAUS (03.09.2026).
   David: „dieses Kaching, das aussieht wie Glas — weg damit."
   Er meint jede Schicht, die so tut, als läge Glas über dem Foto: der
   weiße Saum hier, der Lichtwisch über den Kacheln, der Glanzfleck unter
   dem Zeiger, der Streifen über den Knöpfen. Vier verschiedene Stellen,
   ein und derselbe Fehler.

   MERKE: Ein Foto braucht keinen Glanz, um wertig zu wirken — es braucht
   Ruhe, Tiefe und eine gute Kante. Weiße Reflexe sind das, was Baukästen
   drüberlegen, WEIL das Foto darunter nichts hergibt. Hier gibt es etwas
   her. Alles Weiße, was sich bewegt, sieht nach PowerPoint aus; genau das
   hat Jannik am 02.09. schon über den Titel-Sweep gesagt.               */


/* ══════════════════════════════════════════════════════════════════════
   4a · DER STRICH UEBER DEM BOGEN
   ══════════════════════════════════════════════════════════════════════
   ⛔ EIN 1-PX-STRICH LIEF WAAGERECHT UEBER JEDES BOGENBILD — auf allen
   vier Haeusern, gemeldet am 05.09.2026.

   Ursache: `stil.css` blendet `.vorhang` per clip-path ein
       .js .vorhang            { clip-path: inset(0 0 100% 0) }
       .js .sicht .vorhang     { clip-path: inset(0 0 0 0)    }
   `inset()` OHNE `round` beschneidet aber RECHTECKIG und ignoriert den
   `border-radius` des Bogens (999px 999px 3px 3px). Der Browser clippt
   damit auf den geraden Kasten statt auf den Bogen — und ueber dem
   gewoelbten Bild bleibt die oberste Pixelzeile des Fotos stehen. Bei
   einem Himmelmotiv ist das ein hellblauer Strich quer durchs Bild.

   Nachgewiesen durch Abschalten: ohne clip-path ist der Strich weg, ohne
   box-shadow bleibt er. Es ist also der Clip, nicht der Ring.

   Die Reparatur nimmt den Radius in den Clip mit. Die Einblendung von
   unten bleibt damit erhalten — nur der Ausschnitt ist jetzt derselbe
   Bogen wie der Rahmen.

   ⚠️ Die Werte muessen zum `border-radius` von `.bogen` in stil.css
   passen. Wer den dort aendert, aendert ihn hier mit — sonst kommt der
   Strich zurueck.
   ⚠️ NUR fuer `.bogen`. `.vorhang` sitzt auch auf eckigen Rahmen
   (Zimmerbilder), und die brauchen keinen runden Clip.
   ⚠️ `html.pro.js` OHNE Leerzeichen — `.pro` und `.js` sitzen BEIDE am
   <html>. Mit Leerzeichen verlangt der Selektor ein `.js` UNTERHALB von
   `.pro` und trifft nie. Dieser Fehler ist hier schon zweimal passiert. */
html.pro.js .bogen.vorhang{
  clip-path:inset(-4px -4px 100% -4px round 1003px 1003px 7px 7px);
}
html.pro.js .sicht .bogen.vorhang,
html.pro.js .bogen.vorhang.sicht{
  clip-path:inset(-4px round 1003px 1003px 7px 7px);
}


/* ══════════════════════════════════════════════════════════════════════
   4b · DAS LUXUS-BILDFORMAT — weg vom Bogen (David 09.09.)
   ══════════════════════════════════════════════════════════════════════
   David: „weg von dem Bild mit dem Bogen, mach ein anderes Format, das schön
   luxuriös aussieht." Der Torbogen (border-radius 999px oben) wirkt verspielt;
   luxuriös ist die RUHE eines gerahmten Fotos. Also: ein fast quadratisches
   Rechteck (4/5), scharfe Kante mit Mini-Radius, eine feine Passepartout-
   Linie innen und ein weicher, weiter Schwebe-Schatten — das Foto hängt wie
   ein gerahmtes Bild an der Wand, statt die Spalte auszutapezieren. */
html.pro .lux{
  position:relative;overflow:hidden;border-radius:3px;
  aspect-ratio:4/5;
  box-shadow:0 1px 2px rgba(20,24,16,.08),0 34px 66px -26px rgba(20,24,16,.36);
}
html.pro .lux img{
  width:100%;height:100%;object-fit:cover;display:block;
  transform:none;transition:transform 1.4s cubic-bezier(.19,1,.22,1);
}
/* Feine Passepartout-Linie + Messing-Haarlinie: der „teure Rahmen". */
html.pro .lux::after{
  content:"";position:absolute;inset:0;border-radius:3px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.30),inset 0 0 0 7px rgba(255,255,255,.10);
  outline:1px solid rgba(195,171,116,.32);outline-offset:-1px;
}
@media (hover:hover){
  html.pro .lux:hover img{transform:scale(1.05)}
}
/* Der Vorhang fährt rechteckig herauf (Mini-Radius im Clip → kein Kantenstrich). */
html.pro.js .lux.vorhang{clip-path:inset(0 0 100% 0 round 3px)}
html.pro.js .sicht .lux.vorhang,
html.pro.js .lux.vorhang.sicht{clip-path:inset(0 round 3px)}


/* ══════════════════════════════════════════════════════════════════════
   4c · BILD-KOMPOSITION — zwei Fotos, moderne Überlappung + Scroll-Parallaxe
   ══════════════════════════════════════════════════════════════════════
   David 09.09.: „vielleicht zwei Bilder schön übereinander, modern, richtig
   krass animiert." Großes Haus-Foto rechts, kleineres Zimmer-Foto überlappt
   unten links. Beim Scrollen driften sie GEGENläufig aneinander vorbei
   (`animation-timeline: view()` → an die Scroll-Position gebunden, reversibel,
   Compositor, kein Lag). Beide sind `.lux` (scharfe Kante, Passepartout,
   Schwebe-Schatten). Auf schmalen Schirmen wird gestapelt/reduziert. */
/* ⭐ BILD-DARSTELLUNG NEU (David 09.09., Inspiration 21st.dev „Hero Gallery /
   Scroll Expansion / Modern Hero"). Weg vom überlappenden Duo → ein sauberes,
   strukturiertes BENTO-Raster; jedes Bild ÖFFNET sich beim Scrollen (clip-path
   von innen auf + leichtes Zoom-out + Fade) statt wild zu driften. Klar, edel,
   „krass" animiert — und robust (echtes Grid, kein absolutes Überlappen).
   Bausteine: `.reveal-bild` (die Enthüllung), `.bento` (Raster), `.bild-solo`
   (großes Einzelbild), `.weitband` (Vollbild, das beim Scrollen aufgeht). */
html.pro .reveal-bild{
  overflow:hidden;position:relative;margin:0;border-radius:5px;
  box-shadow:0 2px 8px rgba(20,24,16,.07),0 34px 72px -34px rgba(20,24,16,.42);
}
html.pro .reveal-bild img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.05) saturate(1.06)}
@supports (animation-timeline: view()){
  @media all{
    /* „SCHIEFE" BILDANIMATION im Agentur-Stil (Brandnamic-Anmutung, David 09.09.:
       die alten Reveals gefielen nicht). Das Foto fliegt LEICHT GEDREHT von
       rechts herein und richtet sich beim Eintritt gerade, das Motiv zoomt sanft
       aus. Dynamisch/edel — und fertig, SOBALD das Bild im Blick ist (endet bei
       entry ~90 %). Die Rotation resolved zu 0 → im Ruhezustand hängt nichts
       schief; das kurze Ausragen fängt .nach-titel{overflow-x:clip} ab. */
    @keyframes bild-schraeg{
      from{transform:translate(11%,44px) rotate(-5deg) scale(1.14);opacity:0}
      22% {opacity:1}
      to  {transform:none;opacity:1}
    }
    @keyframes bild-schraeg-img{from{scale:1.12}to{scale:1}}
    /* FRÜH fertig (David 12.09.: „das Bild sollte man schon sehen"): das Reveal
       ist bei entry ~45 % durch, nicht erst bei 90 % — so steht das Bild, sobald
       die Sektion im Blick ist, statt noch zu fliegen. */
    html.pro .reveal-bild{animation:bild-schraeg linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
    html.pro .reveal-bild img{animation:bild-schraeg-img linear both;animation-timeline:view();animation-range:entry 0% entry 58%}
  }
}

/* Bento: ein breites Bild oben, zwei kleine darunter — asymmetrisch, mit Gasse. */
html.pro .bento{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1vw,16px)}
html.pro .bento .breit{grid-column:1 / -1;aspect-ratio:16/10}
html.pro .bento figure:not(.breit){aspect-ratio:1/1}
/* Die ersten drei (Bento) schneller & GEMEINSAM aufziehen — man soll alle drei
   fast zugleich sehen (David 09.09.), keine Staffelung hier. */
@supports (animation-timeline: view()){
  @media all{
    html.pro .bento .reveal-bild{animation-range:entry 0% entry 60%}
    html.pro .bento .reveal-bild img{animation-range:entry 0% entry 78%}
  }
}

/* Großes Einzelbild (z. B. #morgen) — mit Format-Varianten für Abwechslung. */
html.pro .bild-solo{aspect-ratio:4/5;width:92%;margin-left:auto}
html.pro .bild-solo.hoch{aspect-ratio:3/4;width:86%}       /* schlankes Hochformat */
html.pro .bild-solo.quer{aspect-ratio:16/10;width:100%}    /* ruhiges Querformat */

/* Cinematisches Vollbild-Band, das beim Scrollen AUFGEHT (Scroll-Expansion). */
html.pro .weitband{position:relative;overflow:hidden;height:clamp(380px,66vh,760px)}
html.pro .weitband img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.04) saturate(1.05)}
html.pro .weitband-inhalt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;color:var(--schrift-hell);
  text-shadow:0 2px 30px rgba(10,12,8,.5)}
html.pro .weitband::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(18,22,17,.28),rgba(18,22,17,.12) 45%,rgba(18,22,17,.42))}
html.pro .weitband-satz{margin:.1em 0 0;font-family:var(--display);font-optical-sizing:auto;
  font-weight:430;font-size:clamp(1.9rem,1rem + 3.4vw,3.8rem);letter-spacing:-.012em;line-height:1.05}
html.pro .weitband-satz em{font-style:normal;color:var(--messing)}
html.pro #panorama{margin:clamp(2rem,5vw,5.5rem) 0}
@supports (animation-timeline: view()){
  @media all{
    @keyframes weitband-auf{
      from{clip-path:inset(9% 15% round 12px);scale:1.16}
      to  {clip-path:inset(0 0 round 0px);    scale:1}
    }
    html.pro .weitband{animation:weitband-auf linear both;animation-timeline:view();animation-range:entry 0% cover 46%}
  }
}


/* ══════════════════════════════════════════════════════════════════════
   4b · DAS BAND, DAS SICH ÖFFNET
   ══════════════════════════════════════════════════════════════════════
   Der stärkste Griff von dornsberg.net: ein Vollbildband kommt als
   eingerückte, gerundete Fläche herein und wächst beim Scrollen auf die
   volle Breite. Das Bild „öffnet" sich also, statt nur vorbeizuziehen.

   Gerechnet über clip-path, NICHT über Breite oder Abstände: eine
   Änderung an width/margin loest bei jedem Bild ein neues Layout der
   ganzen Seite aus. clip-path läuft auf der Grafikkarte und kostet nichts.
   Deshalb bleibt auch der Text im Band ruhig stehen — nur der Ausschnitt
   wächst.                                                               */
html.pro [data-oeffnet]{
  clip-path:inset(
    calc((1 - var(--pe)) * 7vh) calc((1 - var(--pe)) * 9vw)
    round calc((1 - var(--pe)) * 46px));
}
/* ACHTUNG: Auf schmalen Schirmen ist die Einrückung Unsinn — 9 vw sind
   dort 34 px, das sieht nach Fehler aus statt nach Absicht. Und es kostet
   Bildfläche, von der es auf dem Handy ohnehin zu wenig gibt. */
@media (max-width:860px){
  html.pro [data-oeffnet]{
    clip-path:inset(calc((1 - var(--pe)) * 3vh) 0
      round calc((1 - var(--pe)) * 20px));
  }
}


/* ══════════════════════════════════════════════════════════════════════
   4c · KOPFZEILE — bleibt IMMER stehen
   ══════════════════════════════════════════════════════════════════════
   ⛔ Hier stand ein „duckt sich beim Scrollen weg". RAUS (04.09.2026,
   David): „Die Sticky Bar muss bleiben, das ist ein Bestandteil der
   Webseite." Die Kopfzeile ist fixiert (stil.css) und bleibt sichtbar;
   beim Scrollen wird sie nur weiß und fest (`.fest`). Kein `transform`
   mehr in der Transition — das gab es nur fürs Verstecken.
   NICHT wieder einbauen — gilt für die ganze Vorlage 1. */
html.pro .kopf{transition:background .55s ease,padding .55s ease,color .55s ease,
  box-shadow .55s ease}


/* ══════════════════════════════════════════════════════════════════════
   5 · BILDBAND — die Impressionen als automatisches Laufband
   ══════════════════════════════════════════════════════════════════════
   David am 04.09.2026: „Bilder sollen automatisch von rechts nach links
   kommen, wie ein Rad. Automatisch, nicht händisch. Alle im gleichen
   Format, scharf, nichts abgeschnitten."

   Vorher war das eine Reihe zum ZIEHEN mit gemischten Formaten (mal
   hoch, mal quer, versetzt). Das sah lebendig aus, verlangte aber eine
   Handbewegung — und die machen die wenigsten. Jetzt läuft es von selbst.

   ⚙️ Wie der endlose Lauf funktioniert, ohne Sprung:
   Das Band enthält die Bilder ZWEIMAL hintereinander (das Skript braucht
   es dafür nicht — die Kopie steht im HTML). Die Spur fährt per CSS von
   0 auf −50 %. Bei −50 % steht Bild 1 der zweiten Hälfte exakt dort, wo
   Bild 1 der ersten Hälfte bei 0 % stand — der Rücksprung ist deshalb
   unsichtbar. Kein JavaScript, keine Rechnerei, kein Ruckeln.

   ⛔ DER GAP DARF NICHT ÜBER `gap` LAUFEN. Mit flex-`gap` teilt −50 % die
   Reihe nicht sauber (der Abstand zwischen den zwei Hälften fehlt), und es
   entsteht ein sichtbarer Sprung pro Runde. Deshalb sitzt der Abstand als
   `margin-inline-end` an JEDEM Bild — dann ist eine Hälfte exakt
   n·(Breite+Abstand) und −50 % trifft die Naht.

   FORMAT: Alle Kacheln 3/4 hochkant. Die Bilddaten des Hauses sind fast
   alle hochkant (0,72–0,80) — ein Querformat dazwischen müsste hart
   beschnitten werden, genau das soll nicht sein. Höhe ist fest, die
   Breite folgt dem Seitenverhältnis: eine saubere Filmstreifen-Reihe. */
.bildband{
  position:relative;
  /* Bis an den Bildschirmrand, wie das Textlaufband. */
  margin-inline:calc(clamp(1.4rem,5vw,4.5rem) * -1);
  margin-top:clamp(2.2rem,5vw,4rem);
  overflow:hidden;
  /* Weiche Kanten links und rechts: die Bilder tauchen auf und ab, statt
     an der Bildschirmkante hart abgeschnitten zu werden. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
}
.bildband-spur{
  display:flex;width:max-content;
}
html.pro .bildband-spur{
  animation:bildband-lauf 60s linear infinite;
  will-change:transform;
}
/* Anhalten auf zwei Wegen (der bedienbare Pause-Schalter wurde auf Wunsch
   von David entfernt, 06.09.2026):
   1 · Drüberfahren mit der Maus  2 · „Bewegung reduzieren" (Abschnitt unten). */
@media (hover:hover){
  html.pro .bildband:hover .bildband-spur{animation-play-state:paused}
}
@keyframes bildband-lauf{to{transform:translateX(-50%)}}
/* David 09.09.: die Reihe soll wieder DURCHGEHEND laufen (nicht nur beim
   Scrollen). Also der Autolauf oben (`bildband-lauf 60s infinite`) bleibt die
   Bewegung — der scroll-gekoppelte Pan-Override ist wieder raus. Die anderen
   Cool-Sachen (Formate, Tiefe, Hover, Reihe-Reveal beim Reinscrollen) bleiben. */


.bildband-bild{
  flex:0 0 auto;
  height:clamp(300px,42vh,460px);
  /* ⛔ 3/4.15 ist KEIN Zufallswert: es ist das exakte Verhältnis der
     Quellbilder (1200×1660 = 856×1184 = 0,7229) und zugleich die
     Bogen-Signatur des Hauses aus stil.css. Kartenformat = Bildformat
     bedeutet: `cover` schneidet NICHTS weg. Genau das war Davids
     Bedingung („nichts abgeschnitten"). Wer hier ein anderes Format
     einsetzt, MUSS die Bilder auf dasselbe Verhältnis bringen — sonst
     beschneidet der Browser wieder. */
  aspect-ratio:3/4.15;
  margin:0 clamp(.8rem,1.5vw,1.4rem) 0 0;   /* Abstand als margin, siehe oben */
  overflow:hidden;position:relative;background:var(--band-tief);
  border-radius:3px;
}
.bildband-bild img{
  width:100%;height:100%;object-fit:cover;object-position:center;
  /* KEIN Ruhe-Zoom. scale(1.03) hätte auch bei perfekt passendem Bild 3 %
     an jeder Kante weggeschnitten — im Ruhezustand steht das Bild jetzt
     vollständig. Der leichte Zoom passiert nur beim Drüberfahren, das ist
     eine bewusste Handlung, kein Dauerzustand. */
  transition:transform 1.2s var(--kurve),filter .6s ease;
}
@media (hover:hover){
  .bildband-bild:hover img{transform:scale(1.045);filter:brightness(1.04) saturate(1.04)}
}
.bildband-bild b{
  position:absolute;left:1.1rem;bottom:1rem;z-index:4;
  color:var(--schrift-hell);font-weight:400;font-size:.72rem;
  letter-spacing:.2em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(20,27,20,.85);
}
/* Ein leiser Verlauf, damit die Beschriftung immer lesbar ist. */
.bildband-bild::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:3;
  background:linear-gradient(0deg,rgba(20,27,20,.6) 0%,rgba(20,27,20,0) 44%);
}

/* ⭐ IMPRESSIONEN COOLER (David 09.09., 21st.dev-Galerie-Stil): variierte
   Formate für Rhythmus (Breiten wechseln — Periode 3, passt zu 9 Bildern je
   Hälfte, Klon bleibt deckungsgleich → Pan nahtlos), mehr TIEFE (Radius +
   Schatten), edler Hover-Lift; und die ganze Reihe HEBT sich beim Reinscrollen.
   Der Scroll-Pan bleibt. */
html.pro .bildband-bild{border-radius:7px;
  box-shadow:0 3px 10px rgba(20,27,20,.14),0 30px 58px -30px rgba(20,27,20,.5)}
html.pro .bildband-bild:nth-child(3n+2){aspect-ratio:1/1}
html.pro .bildband-bild:nth-child(3n){aspect-ratio:4/5}
@media (hover:hover){
  html.pro .bildband-bild{transition:transform .55s var(--kurve),box-shadow .55s var(--kurve)}
  html.pro .bildband-bild:hover{transform:translateY(-.5rem) scale(1.025);
    box-shadow:0 40px 72px -24px rgba(20,27,20,.55);z-index:6}
}
/* ⭐ IMPRESSIONEN = BILDERKETTE MIT TIEFE (David 12.09.: „eins zu eins wie
   Brandnamic, geht in die Tiefe"). Der frühere Skew/Diagonal-Behelf ist RAUS —
   #impressionen nutzt jetzt den Baustein `jahr.css`/`jahr.js` (perspektivisch
   gekippte Ebene, 1:1 aus Tofana). Das Markup ist `class="band tief jahr-band"`
   mit `.jahr-lauf > .jahr-buehne > .jahr-spur > .jahr-bild`. Keine
   `.bildband`-Overrides für #impressionen mehr nötig. Rezept: bausteine/jahr/. */

/* Schmale Schirme: kleiner und einen Tick schneller, damit die Bilder in
   vernünftiger Zeit durchlaufen. */
@media (max-width:860px){
  .bildband-bild{height:clamp(240px,52vw,340px)}
  html.pro .bildband-spur{animation-duration:34s}
  /* Skew ist ohnehin nur ab Desktop (min-width) — hier nur den Reveal ruhig stellen. */
  html.pro #impressionen .bildband{animation:none!important}
}

/* Ruhemodus: kein Lauf. Statt eines toten Streifens wird das Band von Hand
   schiebbar — und die zweite (geklonte) Hälfte muss weg, sonst stünde jedes
   Bild doppelt in der Liste. */
@media not all{
  html.pro .bildband{overflow-x:auto;-webkit-overflow-scrolling:touch}
  html.pro .bildband-spur{animation:none}
  html.pro .bildband-bild[data-klon]{display:none}
}


/* ══════════════════════════════════════════════════════════════════════
   6 · LAUFBAND
   ══════════════════════════════════════════════════════════════════════
   Der Hausname wandert langsam durchs Bild. Das Scrollen schiebt ihn
   zusätzlich an und dreht beim Zurückscrollen die Richtung um. Genau
   dieses Detail — Richtungswechsel — unterscheidet ein Laufband von
   einer Endlosschleife aus dem Baukasten.                               */
.laufband{
  overflow:hidden;padding:clamp(2.4rem,5vw,4.5rem) 0;
  border-block:1px solid var(--linie);
  background:var(--band);
  user-select:none;
  pointer-events:none;
}
.laufband.tief{background:var(--fels);border-color:var(--linie-hell)}
.laufband-spur{display:flex;width:max-content;will-change:transform}
.laufband-spur>span{
  display:flex;align-items:center;gap:clamp(2rem,4vw,4rem);
  padding-right:clamp(2rem,4vw,4rem);
  font-size:clamp(2.2rem,5.5vw,5.4rem);font-weight:300;line-height:1;
  letter-spacing:-.02em;color:var(--tinte);white-space:nowrap;
}
.laufband.tief .laufband-spur>span{color:var(--schrift-hell)}
/* Die Trennzeichen sind Kreise in Hausfarbe, keine Mittelpunkte aus der
   Zeichensatztabelle — die stehen je nach Schrift auf anderer Höhe. */
.laufband-spur i{
  display:inline-block;width:.34em;height:.34em;border-radius:50%;
  background:var(--sand);flex:none}
/* ⛔ HIER STAND `font-style:italic`. Von „Outfit" liegt aber nur EIN
   Schnitt in der Datei (font-style:normal). Der Browser hat die Kursive
   deshalb selbst schraeggestellt — eine Faelschung, die man bei 5 rem
   sofort sieht. Jetzt traegt die Hausfarbe den Unterschied. */
.laufband-spur em{color:var(--oliv);font-weight:300}
.laufband.tief .laufband-spur em{color:var(--sand)}

/* ⭐ REINES CSS-MARQUEE (David 09.09.: „wenn ich über ein Wort scrolle, laggt/
   buggt alles"). Früher schob ein scroll-gekoppeltes rAF (jeden Frame `scrollY`
   lesen + `transform` schreiben) das Band — das kollidierte mit dem Sanftlauf
   und ruckelte genau beim Drüberscrollen. Jetzt läuft es mit KONSTANTEM Tempo
   allein auf dem Compositor: kein JS, kein Scroll-Einfluss, kann nicht laggen.
   Die Spur steht ZWEIMAL identisch im HTML → -50 % verschiebt um genau eine
   Hälfte, der Sprung ist unsichtbar (nahtlose Endlosschleife). */
@keyframes laufband-lauf{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
html.pro .laufband-spur{animation:laufband-lauf 60s linear infinite}
/* Pointer-events sind auf .laufband ohnehin aus — zur Sicherheit hält das Band
   trotzdem an, falls doch mal jemand draufkommt (kein Zucken beim Verweilen). */
html.pro .laufband:hover .laufband-spur{animation-play-state:paused}


/* ══════════════════════════════════════════════════════════════════════
   7 · (ENTFERNT) — kein eigener Mauszeiger
   ══════════════════════════════════════════════════════════════════════
   Hier stand ein Ring, der dem Mauszeiger nachlief und über Bildern wuchs.
   RAUS (04.09.2026, David): „Ich möchte gar keinen Maus-Effekt haben, die
   Maus soll ganz normal sein."
   Ein eigener Cursor ist ein Effekt, den man BEMERKT — und auf einer
   Hotelseite soll man das Haus bemerken, nicht die Spielerei. Die Maus ist
   jetzt der normale System-Zeiger. Die `data-zeiger`-Attribute im HTML sind
   damit wirkungslos und wurden entfernt.
   ⛔ NICHT wieder einbauen — gilt für die ganze Vorlage 1. */



/* ══════════════════════════════════════════════════════════════════════
   8 · BUCHSTABEN-AUFZUG
   ══════════════════════════════════════════════════════════════════════
   stil.css hebt Überschriften zeilenweise. Hier kommt die feinere Stufe:
   Buchstabe für Buchstabe, mit einer Spur Unschärfe und Drehung.

   ACHTUNG: Das Skript zerlegt NUR Elemente mit [data-buchstaben] und legt
   dabei ein `aria-label` mit dem Originaltext an. Ohne das liest ein
   Screenreader „G a r n i" als Einzelbuchstaben vor.                     */
/* Jedes Wort ist ein zusammenhaengender Block — Umbruch nur zwischen
   Woertern, nie mitten im Wort (siehe pro.js). */
.wort{display:inline-block;white-space:nowrap}
html.pro .buchstabe{
  display:inline-block;white-space:pre;
  /* Ohne Drehung. Gedrehte Buchstaben, die sich geradestellen, wirken
     wie ein Spielautomat — und genau das ist die Grenze zwischen
     „hochwertig" und „Effekt". Was bleibt: steigen und scharf werden. */
  transform:translateY(.88em);
  opacity:0;filter:blur(4px);
  /* Kürzer + engerer Takt (David 12.09.: „sollte man schon alles sehen"):
     Lauf .82s, Takt 16ms — mit dem früheren Observer steht die Zeile,
     sobald die Sektion im Blick ist. */
  transition:transform .82s var(--kurve),opacity .55s ease,filter .55s ease;
  transition-delay:calc(var(--bi,0) * 16ms);
}
html.pro .sicht .buchstabe,html.pro .buchstabe.sicht{
  transform:none;opacity:1;filter:none;
}
/* Die Maske MUSS die Unterlängen mitnehmen, sonst steht das g ohne Bauch. */
html.pro [data-buchstaben]{overflow:hidden;display:block;
  padding-bottom:.14em;margin-bottom:-.14em}


/* ══════════════════════════════════════════════════════════════════════
   8b · DER WORT-AUFZUG, ENTSCHÄRFT
   ══════════════════════════════════════════════════════════════════════
   stil.css hebt jedes Wort einer Überschrift einzeln: 130 % von unten,
   4 Grad gedreht, auf 94 % geschrumpft, mit 11 px Unschärfe, gestaffelt
   im 82-ms-Takt. Jeder einzelne Wert ist begründbar — zusammen ist es zu
   viel. Bei einer sechswortigen Überschrift beginnt das letzte Wort erst
   nach 0,41 s und braucht dann 1,25 s; in der Zwischenzeit taumelt der
   Satz. Auf jedem Testbild dieser Seite steht die Überschrift halbfertig
   und verwaschen da — das ist kein Zufall des Zeitpunkts, das ist die
   Dauer.

   Hier bleibt die Idee (das Auge liest die Zeile entstehen) und geht die
   Übertreibung: keine Drehung, halb so viel Unschärfe, kürzerer Weg,
   engerer Takt. Aus 1,66 s Gesamtlauf werden 1,15 s.

   MERKE: Bei Bewegung ist die Frage nie „geht das noch stärker", sondern
   „merkt man schon, DASS da eine Animation ist". Ab da schaut man dem
   Effekt zu statt dem Haus.                                            */
html.pro .js .worte .wort,
html.pro .worte .wort{
  transform:translateY(108%) scale(.975);
  filter:blur(6px);
  transition:transform .82s var(--kurve),filter .55s ease,opacity .55s ease;
}
html.pro .js .sicht .worte .wort,
html.pro .sicht .worte .wort{
  transform:none;filter:blur(0);
  /* Engerer Takt 40ms (war 56ms): sechswortige Zeile ist ~.6s früher fertig. */
  transition-delay:calc(var(--wi,0) * 40ms);
}
/* ⛔ ÜBERSCHRIFT-KOLLAPS-FIX (David 12.09.: „hier ist gar keine Überschrift").
   Markup wie `<h2 data-worte><span class="zeilen">…` mischt ZWEI Systeme:
   `.zeilen` = Zeilenmaske (display:block, overflow:hidden) und die Wort-Staffel.
   pro.js hängt bei `data-worte` die Klasse `worte` AN den `.zeilen`-Span → dann
   gewinnt `.js .worte{display:inline}` (0,2,0) über `.zeilen{display:block}`
   (0,1,0), die Maske wird inline und klappt mit `overflow:hidden` auf 0 zusammen
   → die ganze Zeile ist weg. Trifft beide Klassen zusammen, MUSS die Maske block
   bleiben (die Wörter darin sind ohnehin inline-block). Spezifität hier (0,3,1). */
html.pro .zeilen.worte{display:block}


/* ══════════════════════════════════════════════════════════════════════
   9 · BILDVEREDELUNG
   ══════════════════════════════════════════════════════════════════════
   „Jedes Bild soll schöner aussehen." Drei Schichten, alle sehr leise:

     Korn      ein feines Rauschen, damit Verläufe nicht bandieren
     Wärme     eine Spur mehr Kontrast und Sättigung
     Tiefe     eine Vignette, die den Blick in die Mitte zieht

   Alles zusammen kostet ein Element und keinen einzigen Byte Bilddaten.
   Das Rauschen ist ein SVG-Filter als data-URI: 380 Zeichen statt einer
   PNG-Kachel von 40 KB.                                                  */
html.pro .veredelt{position:relative;isolation:isolate}
html.pro .veredelt>img{filter:contrast(1.045) saturate(1.06) brightness(1.01)}

/* ⛔ WARUM EIN ECHTES ELEMENT UND KEIN ::before?
   Weil an fast jedem dieser Rahmen schon eines hängt: .kachel::after ist
   der Textverlauf, .kopfbild::after die Blende, .zitat::after die
   Abdunklung. Ein zweites Pseudoelement gibt es pro Element nicht —
   wer es trotzdem versucht, löscht eine der beiden Schichten und sucht
   den Fehler dann in der Farbe. Das <i> setzt das Skript.
   Das Korn ist ein SVG-Filter als data-URI: rund 380 Zeichen statt einer
   PNG-Kachel von 40 KB. */
html.pro .veredelung{
  position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  /* Tiefe: eine sehr weiche Vignette. Sie zieht den Blick in die Mitte
     und lässt selbst ein flaues Handyfoto plastisch wirken. */
  background:radial-gradient(128% 92% at 50% 40%,
    rgba(20,27,20,0) 46%,rgba(20,27,20,.14) 79%,rgba(20,27,20,.32) 100%);
}
/* Korn: eine eigene Schicht, damit die Deckkraft getrennt regelbar ist.
   7 % ist die Grenze, ab der man es nur noch bemerkt, wenn es FEHLT —
   Verläufe in großen Bildern bandieren sonst sichtbar in Stufen.
   Als SVG-Filter rund 380 Zeichen statt einer PNG-Kachel von 40 KB. */
html.pro .veredelung::after{
  content:"";position:absolute;inset:0;border-radius:inherit;opacity:.07;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:140px 140px;
}

/* Beschriftungen bleiben IMMER über der Veredelung. */
html.pro .kachel-text,html.pro .kopfbild-inhalt,html.pro .titel-inhalt,
html.pro .familie-bild figcaption,html.pro .bildband-bild b,
html.pro .zitat-inhalt{z-index:4}


/* ══════════════════════════════════════════════════════════════════════
   10 · KOPFZEILE — der aktive Punkt
   ══════════════════════════════════════════════════════════════════════
   Ein Strich unter dem Menüpunkt, in dessen Abschnitt man gerade steht.
   Er gleitet zwischen den Punkten statt zu springen — deshalb EIN Strich
   für das ganze Menü und nicht einer pro Punkt.                          */
html.pro .menue{position:relative}
html.pro .menue::after{
  content:"";position:absolute;left:0;bottom:.18rem;height:1px;
  width:var(--mw,0px);transform:translateX(var(--mx,0px));
  background:currentColor;opacity:0;
  transition:transform .55s var(--kurve),width .55s var(--kurve),opacity .35s ease;
}
html.pro .menue.zeigt::after{opacity:.9}

/* Die Fortschrittslinie der Kopfzeile ist im Ruhezustand 1 px. Beim
   Scrollen wächst sie auf 2 px — man sieht dann, DASS sie lebt. */
html.pro .kopf.fest::after{height:2px;background:linear-gradient(90deg,var(--oliv),var(--sand))}


/* ══════════════════════════════════════════════════════════════════════
   11 · ABSCHNITTSZÄHLER
   ══════════════════════════════════════════════════════════════════════
   Eine schmale Spalte am linken Rand mit der laufenden Nummer und dem
   Namen des Abschnitts. Kostet keine Fläche, gibt aber sofort das Gefühl
   eines gebauten Dokuments statt einer Abfolge von Blöcken.
   Erst ab 1200 px — darunter ist der Rand für Inhalt da, nicht für Marginalien. */
.zaehlspalte{
  position:fixed;left:clamp(1rem,2.2vw,1.9rem);top:50%;z-index:50;
  transform:translateY(-50%);display:none;
  writing-mode:vertical-rl;
  font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;
  color:var(--text-leise);
  opacity:0;transition:opacity .6s ease,color .6s ease;
  pointer-events:none;
}
html.pro .zaehlspalte.da{opacity:1}
html.pro .zaehlspalte.hell{color:var(--schrift-hell-leise)}
.zaehlspalte b{font-weight:400;color:var(--oliv)}
html.pro .zaehlspalte.hell b{color:var(--sand)}
/* „von 05" — die Gesamtzahl. Sie steht bewusst leiser als die aktuelle
   Nummer: die Nummer ist die Information, die Gesamtzahl gibt ihr nur den
   Massstab. Gleich laut wären es zwei Zahlen, die um Aufmerksamkeit
   streiten. */
.zaehlspalte span{
  margin-top:.5em;opacity:.55;font-size:.86em;letter-spacing:.24em;
}
.zaehlspalte i{display:block;width:1px;height:38px;background:currentColor;
  opacity:.35;margin:.9rem auto}
@media (min-width:1200px){.zaehlspalte{display:block}}


/* ══════════════════════════════════════════════════════════════════════
   12 · KACHELN UND KARTEN — die Aufwertung des Bestehenden
   ══════════════════════════════════════════════════════════════════════ */

/* Die Kachelgalerie der Startseite: gestaffelter Eintritt statt alle auf
   einmal. Der Index kommt vom Skript als --ki. */
html.pro .kachel{
  opacity:calc(.1 + var(--pe,1) * .9);
  transform:translate3d(0,calc((1 - var(--pe,1)) * 74px),0);
  transition:box-shadow .6s var(--kurve);
}
@media (hover:hover){
  /* Statt Glanz: Tiefe. Nur der Schatten — den Bildzoom, den Verlauf und
     die Beschriftung regelt stil.css bereits richtig.
     ⛔ NICHT den Zoom hier nachbauen: stil.css steht im Ruhezustand auf
     scale(1.04) und beim Ueberfahren auf 1.1. Ein eigener Wert dazwischen
     macht den Effekt KLEINER statt groesser — genau das war hier zuerst
     der Fall und faellt beim Testen fast nicht auf. */
  html.pro .kachel{transition:box-shadow .7s var(--kurve)}
  html.pro .kachel:hover{box-shadow:0 30px 66px rgba(24,32,24,.26)}
}

/* ⭐ SCROLL-PARALLAXE auf den Kacheln (David 09.09.). Jede Kachel ist an die
   Scroll-Position gebunden und driftet; eine leichte Staffelung (jede zweite
   langsamer) lässt sie lebendig GEGENeinander laufen statt als ein Block —
   dasselbe Prinzip wie bei den Wasserzeichen/Bildern. `view()` → reversibel,
   läuft auf dem Compositor (kein Lag). Ohne Timeline-Support bleibt die
   --pe-Einblendung von oben. Der Bildzoom/Schatten beim Hover bleibt unberührt. */
@supports (animation-timeline: view()){
  @media all{
    /* Ruhig & GLEICHMÄSSIG (David 10.09.: „nicht alles drunter und drüber"):
       alle Kacheln fahren gemeinsam EINMAL auf und stehen dann still — als
       sauberes, ausgerichtetes Raster (kein Gegeneinander-Driften mehr). */
    @keyframes kachel-auf{from{opacity:0;transform:translate3d(0,52px,0)}to{opacity:1;transform:none}}
    html.pro .kacheln > .kachel{
      opacity:1;
      animation:kachel-auf linear both;
      animation-timeline:view();
      animation-range:entry 0% entry 72%;
    }
  }
}
/* ⛔ KEINE eigene Kachel-Anordnung mehr (David 10.09.: „cleaner, wie ganz am
   Anfang"). Das Basis-Layout aus stil.css ist sauberer: Reihe 1 = drei gleiche
   Kacheln, Reihe 2 = ZWEI BREITE über die volle Breite (je 1,5 Spalten). Die
   schmalen, mittig schwebenden Kacheln waren der Fehler — hier bewusst nichts
   überschreiben, nur der gemeinsame Auftritt oben bleibt. */

/* Und dieselbe Reinigung an den beiden Stellen in stil.css. Ueberschrieben
   statt dort geloescht: stil.css ist die gemeinsame Stilschicht aller
   Entwuerfe, sie soll mit dem Original vergleichbar bleiben.
     .kippt::before  — der Glanzfleck, der dem Zeiger folgt
     .knopf::before  — der Streifen, der ueber den Knopf wischt          */
html.pro .kippt::before{content:none}
html.pro .knopf::before{content:none}

/* ⛔ HIER STANDEN DIE REGELN FUER DIE PORTRAETREIHE. Die fuenf
   Einzelportraets sind aus index.html raus (siehe Kommentar dort):
   schwarzweiss, frontal, weisse Wand — Erkennungsdienst statt Familie.
   Die Regeln muessen mit, sonst sucht der Naechste ein Raster, das es
   nicht mehr gibt.                                                      */

/* Die Kennzahlen bekommen eine mitwachsende Linie unter der Zahl. */
html.pro .kennzahl{position:relative;padding-bottom:.9rem}
html.pro .kennzahl::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;
  width:calc(var(--pe,1) * 100%);max-width:56px;background:var(--sand);
}


/* ══════════════════════════════════════════════════════════════════════
   13 · DAS TITELBILD — nach dornsberg.net
   ══════════════════════════════════════════════════════════════════════
   Zerlegt aus deren ausgelieferten Dateien. Der Aufbau dort ist:

     .Hero_image        height:100vh                  Vollbild
     .Hero_innerBorder  box-shadow:0 0 0 24px #f6f3ee ein cremefarbener
                                                      Rand ringsum
     .Hero_border       border:0 solid #f6f3ee        Startwert 0 — der
                                                      Rand faehrt beim
                                                      Laden auf
     .Hero_slogan       top:30–35 %; left:50 %;       EIN Satz, mittig,
                        width:75–88 %                 im oberen Drittel
     .heroSlogan.t2.c4  Ayer, calc(115/20*.8rem)      = 92 px, weiss,
                        line-height:95 %              zwei Zeilen

   Drei Entscheidungen daraus, und warum:

   1 · DER RAHMEN. Das Foto beruehrt den Bildschirmrand nicht. Es haengt
       wie ein Bild an der Wand statt zu tapezieren. Das ist der Griff,
       an dem man die Seite auf den ersten Blick fuer teuer haelt — und
       er kostet ein Element.

   2 · EIN SATZ, GROSS, MITTIG. Vorher standen im Titel fuenf Dinge
       untereinander. Jedes einzelne war dadurch klein. Die Referenz
       setzt einen Satz auf rund 100 px und laesst sonst das Bild
       arbeiten.
       ⚠️ Das widerspricht CLAUDE.md („keine zentrierte Hero-Section").
       Die Regel ist Davids Vorgabe — hier hat er ausdruecklich das
       Gegenteil verlangt („fast so gleich wie die Referenz"), und die
       Referenz ist mittig. Steht hier, damit es niemand fuer ein
       Versehen haelt.

   3 · KEIN BOGEN MEHR IM TITEL. Der Bogen war meine Zutat, nicht die
       der Referenz — dort oeffnet sich der RAND, nicht das Bild. Der
       Bogen bleibt, wo er hingehoert: bei den Bildern weiter unten.

   Die Abfolge nach `.los`:
     0,10  der Rand faehrt von 0 auf 22 px auf        (1,3 s)
     0,55  Zeile 1 des Satzes steigt aus der Maske    (1,35 s)
     0,69  Zeile 2 folgt
     1,55  Hinunter-Marke und die zwei Punkte

   ⛔ Die Regie haengt an `.los`, nicht an `.bereit`. Sonst laeuft sie
   hinter dem geschlossenen Vorhang ab und niemand sieht sie.          */

/* Der Rand als registrierte Laenge: nur so interpoliert der Browser ihn
   auf der Grafikkarte. Als gewoehnliche Custom Property waere es ein
   String und der Rand spraenge in einem Schritt auf. */
@property --rand{ syntax:'<length>'; inherits:false; initial-value:0px }

/* Die Rahmenbreite als EINE Zahl. Sie wird an zwei Stellen gebraucht —
   vom Rahmen selbst und vom Verlauf unter der Kopfzeile, der sonst ueber
   den Rahmen malt. Zwei Stellen mit demselben Wert sind zwei Stellen,
   die auseinanderlaufen. */
/* David 09.09.: „keine weißen Ränder mehr, das ganze Bild soll den Bildschirm
   füllen — das schaut hochwertiger aus." Also KEIN Creme-Rahmen mehr ums
   Titelbild → full-bleed, randlos. Der Mechanismus (Block unten) bleibt, nur
   die Breite ist 0. Gilt Startseite UND Unterseiten-Heros. */
html.pro{--rahmen:0px}

.titel-rand{
  position:absolute;inset:0;z-index:3;pointer-events:none;
  --rand:0px;
  box-shadow:inset 0 0 0 var(--rand) var(--papier);
}
html.pro .titel-rand{transition:--rand 1.3s var(--kurve) .1s}
html.pro.los .titel-rand{--rand:var(--rahmen)}

/* ── Die Verdunklung, neu gerechnet ────────────────────────────────────
   stil.css legt drei Verlaufsschichten ueber das Titelbild — und die sind
   fuer das ALTE Layout gebaut: schwerer Fuss, dazu eine Ecke links unten,
   „die genau den Textblock traegt" (so steht es dort im Kommentar). Der
   Textblock stand damals unten links. Er steht jetzt mittig oben.
   Die Ecke verdunkelt also eine Stelle, an der nichts mehr steht, und der
   Satz liegt in einer Stelle, die niemand aufgehellt hat.

   Neu, in drei Schichten mit klarer Aufgabe:
     1  ein leichter Schleier oben  — traegt Menue und Logo
     2  ein weicher Teich in der Mitte — traegt den Satz
     3  ein leichter Fuss unten     — traegt die Hinunter-Marke
   Zusammen deutlich heller als vorher. Das Winterbild ist von sich aus
   schattig; drei schwere Schichten darauf machen aus einem Hotel eine
   Hoehle.                                                               */
/* Verlauf jetzt UNTEN-LINKS-schwer (der Satz sitzt dort), oben nur ein leichter
   Schleier für Menü/Logo. Cinematisch, das Foto bleibt hell in der Mitte. */
html.pro .titel::after{
  background:
    linear-gradient(180deg,rgba(18,22,17,.40) 0%,rgba(18,22,17,.10) 20%,rgba(18,22,17,0) 42%),
    linear-gradient(64deg,rgba(18,22,17,.66) 0%,rgba(18,22,17,.24) 30%,rgba(18,22,17,0) 58%),
    linear-gradient(0deg,rgba(18,22,17,.50) 0%,rgba(18,22,17,.12) 26%,rgba(18,22,17,0) 48%);
}
/* Die atmende Vignette darf dann auch leiser werden. */
html.pro .titel-vignette{opacity:.5;animation:none}
/* Und das Motiv selbst bekommt eine Spur Licht zurueck. `filter` ist
   frei — auf `transform` laeuft dort die Einzugs-Animation aus stil.css. */
html.pro .titel-bild img{filter:brightness(1.07) contrast(1.03) saturate(1.04)}

/* ⭐ HERO-PUSH (David 09.09.: „Heroes wirklich krass"): das Titelbild zoomt
   sanft mit, während der Inhalt beim Scrollen über den gepinnten Hero hochzieht
   — cinematisch, an den Seiten-Scroll gebunden (erste Bildschirmhöhe). Über die
   EIGENE `scale`-Property (nicht `transform`) → kollidiert nicht mit dem Basis-
   Zoom/Einzug aus stil.css. Läuft auf dem Compositor. */
@supports (animation-timeline: scroll()){
  @media all{
    @keyframes hero-zoom{from{scale:1}to{scale:1.16}}
    /* ⭐ 22.09.2026: titel-atmen laeuft ZUSAETZLICH zum Scroll-Zoom.
       hero-zoom nutzt die eigene `scale`-Property, das Atmen `transform` —
       beide kollidieren nicht und laufen gemeinsam auf dem Compositor. */
    html.pro .titel-bild img{
      animation:hero-zoom linear both, titel-atmen 16s ease-in-out infinite alternate;
      animation-timeline:scroll(root), auto;
      animation-range:0 100vh, normal;
      will-change:transform;
    }
  }
}

/* ── Der Satz ───────────────────────────────────────────────────────────
   Mittig, im oberen Drittel, sonst nichts. Die Groesse ist der Punkt:
   bei 1440 px sind das rund 100 px — dieselbe optische Groesse wie in der
   Referenz. Alles darunter sieht aus wie eine Unterzeile.
   ⛔ NICHT ueber `transform` zentrieren: auf .titel-inhalt schreibt
   skript.js seinen Scroll-Versatz. Deshalb Flexbox.                    */
/* Jetzt UNTEN LINKS, editorial (David 09.09.: „nicht zentriert, lieber unten
   links, richtig krass"). Eyebrow (Ort) über dem Satz, ein kräftiger Verlauf
   unten-links trägt beides. ⛔ .titel-inhalt NICHT per transform verschieben —
   skript.js schreibt dort seinen Scroll-Versatz; nur Flex-Ausrichtung ändern. */
html.pro .titel-inhalt{
  align-items:flex-start;justify-content:flex-end;text-align:left;
  /* Logo etwas nach RECHTS (mehr linkes Padding) und nach OBEN (mehr unteres
     Padding) — bleibt unten links, sitzt nur höher/eingerückter (David 10.09.). */
  padding:0 clamp(1.6rem,6vw,6rem) clamp(5rem,14vh,9rem) clamp(2.6rem,7vw,7.5rem);
}
html.pro .titel-augen{
  margin:0 0 1.35rem;font-family:var(--sans);font-weight:500;
  font-size:clamp(.64rem,.5rem + .3vw,.8rem);letter-spacing:.42em;text-transform:uppercase;
  color:var(--schrift-hell);display:flex;align-items:center;gap:.9rem;
  text-shadow:0 1px 3px rgba(10,12,8,.55);pointer-events:none;
  /* Auftritt: fährt VOR den Zeilen sanft herein. */
  opacity:0;transform:translateY(16px);
  transition:opacity 1s ease .3s,transform 1s var(--kurve) .3s;
}
html.pro.los .titel-augen{opacity:.92;transform:none}
html.pro .titel-augen::before{content:"";width:44px;height:1px;background:currentColor;opacity:.7;flex:none}

/* ⭐ HERO = nur das LOGO unten links (David 10.09.), scharf. Das weiße Logo
   (marke-hell) liegt auf dem Foto; ein weicher Schlagschatten trägt es. Größe
   bewusst begrenzt, damit die 300-px-Quelle immer scharf bleibt. */
html.pro .titel-logo-wrap{margin:0;line-height:0}
html.pro .titel-logo{
  width:clamp(220px,28vw,380px);height:auto;display:block;
  /* Die Logodatei ist dunkel (Ø RGB 25/25/25) — auf dem Foto unsichtbar.
     `brightness(0) invert(1)` macht sie zuverlässig WEISS, der Schlagschatten
     trägt sie über helle Bildstellen (David 10.09.: „schön scharf reinhauen"). */
  filter:brightness(0) invert(1) drop-shadow(0 2px 16px rgba(10,12,8,.55)) drop-shadow(0 1px 3px rgba(10,12,8,.45));
}
html.pro .titel-satz{
  margin:0;max-width:min(15ch,94%);
  font-weight:200;
  font-size:clamp(2.4rem,.6rem + 5.4vw,6.2rem);
  line-height:.98;letter-spacing:-.03em;
  color:var(--schrift-hell);
  /* Ein harter, kurzer Schatten fuer die Kante, ein weiter, schwacher
     fuer die Lesbarkeit auf hellen Bildstellen (Schnee, Wolken). */
  text-shadow:0 1px 3px rgba(10,12,8,.45),0 2px 44px rgba(10,12,8,.5);
}
/* Die Referenz setzt ein Wort kursiv. Das geht hier NICHT: von „Outfit"
   liegt nur ein Schnitt in der Datei (font-style:normal, Gewicht 100–900).
   `font-style:italic` wuerde der Browser selbst schraegstellen — bei
   100 px sieht man dieser Faelschung jeden Pixel an.
   Die ehrliche Entsprechung in einer Grotesk: die Hausfarbe. Das Wort
   tritt heraus, ohne dass etwas erfunden wird. */
html.pro .titel-satz em{font-style:normal;color:var(--sand)}

/* ⭐ GROSSES WORTZEICHEN (David 09.09.): ein riesiges, blasses „Trojer" bleedet
   unten rechts aus dem Titelbild — editorial, gibt dem Hero Gewicht. `.titel`
   ist overflow:hidden → das Ausragen wird sauber geklippt (kein Überlauf).
   Fährt beim Laden mit ein (Opacity). */
html.pro .titel-wortmarke{
  position:absolute;z-index:1;pointer-events:none;user-select:none;
  right:clamp(.6rem,3vw,3rem);bottom:-.16em;margin:0;line-height:.7;
  font-family:var(--sans);font-weight:200;letter-spacing:-.045em;
  font-size:clamp(6rem,25vw,22rem);color:var(--schrift-hell);
  text-shadow:0 2px 44px rgba(10,12,8,.32);
  opacity:0;transition:opacity 1.5s ease .7s;
}
html.pro.los .titel-wortmarke{opacity:.11}
@media (max-width:860px){ html.pro .titel-wortmarke{font-size:34vw;bottom:auto;top:8%;right:-.04em;opacity:0} html.pro.los .titel-wortmarke{opacity:.09} }

/* ⭐ HERO-PARALLAX (David 09.09.): Titel, Wortzeichen und Bild wandern beim
   Scrollen der ersten Bildschirmhöhe UNTERSCHIEDLICH schnell → Tiefe. Der Titel
   zieht am schnellsten nach oben weg, das Wortzeichen driftet leicht mit, das
   Bild zoomt (siehe hero-zoom). scroll(root) = an den Seiten-Scroll gebunden.
   ⛔ Nicht .titel-inhalt animieren (skript.js schreibt dort) — nur .titel-satz. */
@supports (animation-timeline: scroll()){
  @media all{
    @keyframes hero-satz-parallax{from{transform:translateY(0);opacity:1}to{transform:translateY(-64px);opacity:.55}}
    @keyframes hero-mark-parallax{from{transform:translateY(0)}to{transform:translateY(44px)}}
    html.pro .titel-satz{animation:hero-satz-parallax linear both;animation-timeline:scroll(root);animation-range:0 92vh}
    html.pro .titel-wortmarke{animation:hero-mark-parallax linear both;animation-timeline:scroll(root);animation-range:0 92vh}
  }
}

.satz-zeile{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.satz-zeile>span{display:block}
html.pro .satz-zeile>span{
  transform:translateY(112%);filter:blur(7px);
  transition:transform 1.35s var(--kurve) .55s,filter .95s ease .55s;
}
html.pro.los .satz-zeile>span{transform:none;filter:none}
html.pro.los .satz-zeile+.satz-zeile>span{transition-delay:.69s}

/* ── Hinunter-Marke ────────────────────────────────────────────────── */
html.pro .runter{animation:none;opacity:0;transition:opacity .9s ease 1.55s,transform .5s var(--kurve)}
html.pro.los .runter{opacity:1}
html.pro.faehrt-los .runter{opacity:0;transform:translateY(14px);transition-delay:0s}

/* ── Zwei Punkte fuer den Bildwechsel ──────────────────────────────────
   Kein Wort, nur die Information, DASS es zwei Motive gibt. Unten links,
   weil unten rechts auf jeder Seite der Chat-Startknopf sitzt. */
.titel-punkte{
  display:flex;gap:.6rem;opacity:0;
  margin:clamp(1.8rem,3.4vh,2.8rem) 0 0;
}
html.pro .titel-punkte{transition:opacity .9s ease 1.55s}
html.pro.los .titel-punkte{opacity:1}
.titel-punkte i{
  width:7px;height:7px;border-radius:50%;background:rgba(245,246,242,.4);
  box-shadow:0 1px 4px rgba(15,18,12,.35);   /* Definition auf hellen Bildstellen */
  transition:background .5s ease;
}
/* bleibt immer ein Punkt — aktiver ist einfach voll deckend (keine Pille) */
.titel-punkte i.an{background:var(--schrift-hell)}

/* ⛔ Der dunkle Verlauf unter der Kopfzeile (`.kopf::before`, 190 % hoch)
   liegt bei z-index 60 — also UEBER dem Rahmen. Im Test war die obere
   Rahmenkante dadurch grau statt weiss, und zwar nur oben: ein Fehler,
   den man fuer einen Bildfehler haelt statt fuer eine Stapelreihenfolge.
   Der Verlauf rueckt jetzt um die Rahmenbreite ein. Auf den Unterseiten
   aendert das nichts, dort ist die Kopfzeile von Anfang an weiss und der
   Verlauf ohnehin auf opacity 0. */
html.pro .kopf::before{left:var(--rahmen);right:var(--rahmen);top:var(--rahmen)}

/* ── Der Name gehoert in den Kopf ──────────────────────────────────────
   stil.css blendet das Logo in der Kopfzeile erst ein, wenn sie weiss
   wird — weil im Titelbild frueher der Name gross stand und es sonst
   doppelt gewesen waere. Der Name steht dort jetzt NICHT mehr. Also muss
   das Logo von Anfang an da sein, sonst traegt die Startseite den Namen
   des Hauses ueberhaupt nicht.
   ⚠️ Und es muss weiss sein: BEIDE Logodateien sind dunkel (gemessen,
   Ø RGB 25/25/25) — auch die, die `marke-hell` heisst. Auf dem Foto waere
   sie unsichtbar. `brightness(0) invert(1)` macht daraus zuverlaessig
   Weiss, unabhaengig davon, welche Datei dort spaeter steht. */
/* ⭐ Kopf-Logo erst beim Scrollen (David 10.09.): Auf dem Hero KEIN Logo oben —
   dort trägt das große Logo unten links das Bild. Sobald der Kopf weiß wird
   (.fest), gleitet die Wortmarke sanft von links oben herein. Bei offenem
   Mobilmenü (.offen) ist sie ebenfalls da. */
html.pro .marke{
  opacity:0;visibility:hidden;transform:translateX(-16px);
  transition:opacity .55s ease,transform .55s var(--kurve),visibility .55s ease;
}
html.pro .kopf.fest .marke,html.pro .kopf.offen .marke{opacity:1;visibility:visible;transform:none}
html.pro .marke-hell{filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(10,12,8,.5))}
/* Trojer-Logo oben links etwas groesser (David 08.09.). Basis war height clamp(52,5.4vw,68);
   fest clamp(44,4.4vw,54). Nur Trojer (jedes Haus hat sein eigenes Logo). */
html.pro .marke img{height:clamp(62px,6.4vw,82px)}
html.pro .kopf.fest .marke img{height:clamp(50px,5vw,62px)}
@media (max-width:760px){
  html.pro .marke img{height:clamp(50px,12vw,64px)}
  html.pro .kopf.fest .marke img{height:clamp(42px,9.5vw,50px)}
}

/* ── Beim Scrollen ─────────────────────────────────────────────────────
   `skript.js` schreibt Verschiebung und Deckkraft direkt ins style-
   Attribut des Textblocks. Dort duerfen wir nicht hin — `filter` ist
   frei. Der Satz wird beim Weggehen unscharf, als zoege die Kamera an
   ihm vorbei. Gesetzt wird er im Skript, NICHT hier: `blur(0px)` ist
   nicht dasselbe wie „kein Filter", der Browser rastert die Schrift dann
   dauerhaft neu und der Satz stuende bei 100 px sichtbar weich da.     */
html.pro .titel-tiefe{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(13,18,13,0) 34%,rgba(13,18,13,.9) 100%);
  opacity:var(--p,0);
}


/* ══════════════════════════════════════════════════════════════════════
   13c · DIE KOPFBILDER DER UNTERSEITEN
   ══════════════════════════════════════════════════════════════════════
   David am 04.09.2026: „es muss so sein, dass auch alle Unterseiten diesen
   geilen Look haben von der Hero."

   Und er hat recht — es war inkonsequent: die Startseite trug den weissen
   Rahmen und den mittigen Satz, die vier Unterseiten noch das alte Layout
   (randlos bis an den Bildschirm, Text unten links, dazu eine kleine Rubrik
   darueber). Zwei Bildsprachen auf einer Seite sind keine Handschrift,
   sondern ein halber Umbau.

   Drei Dinge werden angeglichen:
     1  derselbe weisse Rahmen (dasselbe Element, dieselbe Variable)
     2  die Ueberschrift mittig statt unten links
     3  hoeher: 52 vh waren ein Streifen, kein Kopfbild

   Und eines faellt weg: die Rubrik ueber der Ueberschrift („WELLNESS" ueber
   „Gesund schwitzen, dann ausruhen."). Sie stand dreimal dasselbe da — im
   Menue, in der Rubrik und in der Ueberschrift. Genau der Impressum-Look,
   der auf der Startseite schon raus ist.                                  */

/* Hoehe: 52 vh sind auf einem 900-px-Schirm 468 px — abzueglich Kopfzeile
   bleibt ein Streifen. 72 vh geben dem Bild Luft, ohne eine volle
   Bildschirmhoehe zu beanspruchen; das gehoert der Startseite. */
html.pro .kopfbild{height:clamp(420px,72vh,780px)}

/* Der Rahmen ist dasselbe Element wie im Titelbild — gleiche Klasse,
   gleiche Variable, gleiche Fahrt. Er haengt an `.los`, und `.los` setzt
   der Vorhang auf JEDER Seite. */

/* Die Ueberschrift mittig, in der Groesse der Startseite gedacht: dort
   ~104 px, hier eine Stufe darunter (~86 px bei 1440). Die Startseite
   muss der lauteste Auftritt bleiben. */
html.pro .kopfbild .kopfbild-inhalt{
  align-items:center;justify-content:center;text-align:center;
  padding:clamp(4rem,10vh,7rem) clamp(1.4rem,6vw,5rem);
}
html.pro .kopfbild h1{
  max-width:min(1000px,92%);
  font-weight:200;
  font-size:clamp(2.2rem,.3rem + 5.5vw,5.6rem);
  line-height:.99;letter-spacing:-.032em;
  text-shadow:0 1px 3px rgba(10,12,8,.45),0 2px 44px rgba(10,12,8,.5);
  /* Ohne das bricht „Gesund schwitzen, dann ausruhen." nach „dann" um und
     laesst ein einzelnes Wort auf der zweiten Zeile stehen. `balance`
     verteilt die Woerter gleichmaessig auf die Zeilen — der Browser
     rechnet das selbst und trifft es besser als jede feste Breite.
     Auf der Startseite nicht noetig: dort stehen die zwei Zeilen als
     eigene Elemente im Markup, weil jede ihre eigene Maske braucht. */
  text-wrap:balance;
}
/* ⚠️ Der Buchstabentakt MUSS hier kuerzer sein als auf der Startseite.
   „Gesund schwitzen, dann ausruhen." hat 31 Zeichen — bei 24 ms waeren das
   744 ms Versatz plus 1,05 s Laufzeit. Der Satz haette fast zwei Sekunden
   gebraucht, und die letzten Buchstaben kommen an, wenn der Blick laengst
   weiter ist. 14 ms halten es bei rund 1,5 s. */
html.pro .kopfbild .buchstabe{transition-delay:calc(var(--bi,0) * 14ms)}

/* Die Verdunklung, neu gerechnet — dieselbe Logik wie im Titelbild.
   Der Verlauf aus stil.css war fuer Text UNTEN LINKS gebaut: schwerer Fuss,
   heller Kopf. Der Text steht jetzt in der Mitte, also gehoert die
   Abdunklung auch dorthin. */
html.pro .kopfbild::after{
  background:
    linear-gradient(180deg,rgba(18,22,17,.44) 0%,rgba(18,22,17,.14) 26%,rgba(18,22,17,0) 55%),
    radial-gradient(74% 56% at 50% 50%,rgba(18,22,17,.46) 0%,rgba(18,22,17,.16) 64%,rgba(18,22,17,0) 100%),
    linear-gradient(0deg,rgba(18,22,17,.3) 0%,rgba(18,22,17,0) 30%);
}
/* Und dieselbe Spur Licht zurueck ins Motiv wie oben. */
html.pro .kopfbild>img{filter:brightness(1.06) contrast(1.03) saturate(1.04)}

@media (max-width:860px){
  html.pro .kopfbild{height:clamp(360px,58vh,520px)}
  html.pro .kopfbild h1{max-width:96%;letter-spacing:-.026em}
}


/* ══════════════════════════════════════════════════════════════════════
   13b · DER STARTKNOPF DES CHATS
   ══════════════════════════════════════════════════════════════════════
   Dort lag ein 160 Pixel breites Foto des Hauses, als Kreis beschnitten:
   ein gruener Fleck mit einem hellen Balken darin. Bei 88 px erkennt man
   kein Gebaeude mehr — nur, dass da irgendein Bild ist. Die uebrigen
   ALPIX-Demos tragen an dieser Stelle das LOGO des Hauses, und genau das
   ist richtig: ein Logo ist dafuer gebaut, klein zu funktionieren.

   ⚠️ Die Logodatei ist DUNKEL (gemessen: Ø RGB 20/26/21) — beide
   Varianten sind es, auch die, die `marke-hell` heisst. Auf dem gruenen
   Knopf waere sie damit fast unsichtbar. `brightness(0) invert(1)` macht
   daraus zuverlaessig reines Weiss, egal welche der beiden Dateien
   jemand spaeter einsetzt. Deckkraft und Transparenz bleiben erhalten.  */
html.pro #alx-launcher img,
html.pro #alx-wrap header .alx-logo img{
  object-fit:contain;
  padding:11%;
  border-radius:0;
  filter:brightness(0) invert(1);
}
/* Der Knopf traegt schon den Hausverlauf. Der Ring darum darf ruhiger
   werden, sobald ein Logo darin steht — sonst konkurrieren zwei Kreise. */
html.pro #alx-launcher img{padding:13%}

/* ── Und dasselbe Problem an zwei weiteren Stellen ──────────────────────
   Die Logodatei ist dunkel — auf JEDER dunklen Flaeche verschwindet sie.
   Betroffen sind der Vorhang (Flaeche --fels) und die Fusszeile. Beim
   Vorhang faellt es besonders auf: dort ist das Logo das einzige, was
   waehrend des Ladens zu sehen sein soll, und es war schlicht unsichtbar.
   Gefunden erst durch Nachmessen der Pixel (Ø RGB 25/25/25) — auf dem
   Schirm sieht „dunkles Logo auf dunklem Grund" einfach aus wie „kein
   Logo", und man sucht den Fehler im Skript statt in der Datei.         */
.auftakt-inhalt img{filter:brightness(0) invert(1);opacity:.92}
html.pro .fuss-logo{filter:brightness(0) invert(1);opacity:.88}

/* ── Die Farbe des Chats an das Haus binden ─────────────────────────────
   Der Chat kam mit #6c6526 — einem Oliv-Gold. Die Hausfarbe ist aber ein
   klares Dunkelgruen (--oliv #3d5c36), gemessen an den Fichten im Logo.
   Nebeneinander sieht das aus wie zwei Marken auf einer Seite.
   Die Widget-Datei ist so gebaut, dass EIN Wert genuegt und sich alles
   Weitere ableitet — Flaechen, Raender, Schatten, Fokus. Genau diesen
   einen Wert setzen wir hier, zusammen mit seiner HSL-Zerlegung, aus der
   das Widget seine Abstufungen rechnet.
   #3d5c36 = hsl(109 26% 29%).                                          */
html.pro .alx-wurzel{
  --alx-brand:#3d5c36;
  --alx-brand-h:109; --alx-brand-s:26%; --alx-brand-l:29%;
}


/* ══════════════════════════════════════════════════════════════════════
   14 · SCHMALE SCHIRME
   ══════════════════════════════════════════════════════════════════════
   Auf dem Handy fallen Zeiger, Zählspalte und Sanftlauf weg — dort macht
   der Browser die Trägheit selbst und besser. Was bleibt: Bögen, Szenen,
   Auftakt, Laufband. Das sind die Effekte, die auch am Daumen tragen.    */
@media (max-width:860px){
  .laufband-spur>span{font-size:clamp(1.9rem,8vw,3rem)}
  /* Die alten Zieh-Regeln (.ziehbild, .ziehreihe-schiene) sind raus — das
     Impressionen-Band laeuft jetzt automatisch, seine Mobil-Werte stehen
     in Abschnitt 5. */
  /* Der Bogen faellt auf dem Handy flacher aus: bei 390 px Breite frisst
     ein 21-%-Einzug fast die Haelfte des Bildes, und der Titel steht
     dann in einem Streifen statt in einer Landschaft. */
  /* Der Satz rueckt hoch und wird schmaler gefuehrt: auf 390 px braucht
     „Am Fuße der / Burg Taufers." drei statt zwei Zeilen, und drei Zeilen
     bei 29 % Hoehe stossen unten an die Hinunter-Marke. */
  html.pro .titel-inhalt{padding-top:clamp(6.5rem,22vh,10rem)}
  html.pro .titel-satz{max-width:94%;letter-spacing:-.028em}
  /* Der Endzustand MUSS hier mit. Er stuende zwar schon weiter oben und
     gewinnt nach Spezifitaet (.pro.los schlaegt .pro) — aber wer diesen
     Block spaeter anfasst und den Zustand oben uebersieht, baut sich ein
     Titelbild, das auf dem Handy fuer immer im Bogen stehenbleibt.
     Zwei Zeilen, die eine halbe Stunde Fehlersuche sparen. */
  .titel-punkte{margin-top:clamp(2rem,4vh,3rem)}
}


/* ══════════════════════════════════════════════════════════════════════
   15 · RUHEMODUS
   ══════════════════════════════════════════════════════════════════════
   ACHTUNG: Hier steht KEINE Abrissbirne (`*{animation:none}`). Wer
   „Bewegung reduzieren" einschaltet, will keine Fahrten und keine
   Parallaxe — er will nicht eine Seite, auf der die Hälfte unsichtbar
   hängenbleibt. Deshalb: alle Endzustände hart setzen, Bewegung raus.    */
@media not all{
  html.pro [data-szene]{opacity:1!important;transform:none!important;filter:none!important}
  html.pro [data-bogenauf]{border-radius:3px}
  html.pro [data-bogenauf]>img{transform:none}
  html.pro [data-bogenauf]::after{box-shadow:none}
  html.pro .buchstabe{transform:none!important;opacity:1!important;filter:none!important;
    transition:none!important}
  html.pro .kachel,html.pro .portrait{opacity:1!important;transform:none!important}
  html.pro .kennzahl::after{width:56px}
  html.pro .laufband-spur{transform:none!important;animation:none!important}
  html.pro .veredelt{transform:none!important}
  .auftakt{display:none}
  /* Titelbild: Endzustand hart setzen. Ohne Uebergang bleibt sonst der
     ANFANGSWERT stehen — der Rahmen bei 0 px, der Satz unter seiner
     Maske. Das ist der haeufigste Fehler in Ruhemodus-Bloecken: man
     schaltet die Bewegung ab und vergisst, dass damit auch das Ziel nie
     erreicht wird. */
  html.pro .titel-rand{--rand:var(--rahmen)}
  html.pro .satz-zeile>span{transform:none;filter:none}
  html.pro .runter,html.pro .titel-punkte{opacity:1;transform:none}
  html.pro .titel-inhalt{filter:none}
}


/* ══════════════════════════════════════════════════════════════════════
   KENNZAHLEN — drei wenn Platz, sonst nur zwei (David 05.09.2026)
   ══════════════════════════════════════════════════════════════════════
   Davids Regel woertlich: „Wenn es keinen Platz hat, nur zwei lassen und die
   dritte, die unten abgeschnitten ist, weglassen. Wenn Platz ist, drei."

   Die Basis (stil.css) ist flex-wrap: drei Kennzahlen in einer schmalen
   Spalte brachen als einsame dritte Zeile um (bei Kasern sogar am
   Abschnittsrand abgeschnitten). Ein blosses Grid haette daraus ein
   sauberes 2+1 gemacht — aber David will dort GAR KEINE dritte, sondern zwei.

   Loesung: ein Grid mit auto-fit (drei nebeneinander, wenn die Reihe breit
   genug ist; sonst zwei) PLUS eine Container-Query, die die dritte Kennzahl
   ausblendet, sobald die Reihe zu schmal fuer drei ist. Container-Query statt
   Media-Query, weil die Kennzahlen in einer HALBEN Spalte stehen — es zaehlt
   die echte Breite DIESER Reihe, nicht die des Fensters (sonst waere es auf
   dem Tablet falsch, wo das Fenster breit, die Spalte aber schmal ist).
   ⛔ Gilt nur, wenn drei da sind: bei zwei Kennzahlen trifft nth-child(n+3)
      nichts, beide bleiben immer. */
html.pro .kennzahlen{
  container-type:inline-size;
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:clamp(1.2rem,2.6vw,2.4rem) clamp(1.6rem,3vw,3rem);
  align-items:start;
}
@container (max-width:470px){
  html.pro .kennzahlen > .kennzahl:nth-child(n+3){ display:none }
}

/* ══════════════════════════════════════════════════════════════════════
   PREISTABELLE — hochwertiger Hover (David 05.09.2026)
   ══════════════════════════════════════════════════════════════════════
   „So geile Effekte, wenn man drueberfaehrt, dass es hochwertig aussieht."
   Die Zeile hebt sich ruhig hervor: ein Hauch Hausfarbe im Grund, die
   Unterlinie wird zur Akzentfarbe, Text tritt in die Tinte — alles auf
   derselben Kurve wie der Rest der Seite. Nur mit echter Maus (hover:hover),
   damit auf Touch nichts „klebt". Hell UND dunkel (.tief) bedacht. */
html.pro table.preise tbody tr{
  transition:background-color .4s cubic-bezier(.16,.84,.34,1);
}
html.pro table.preise tbody th,
html.pro table.preise tbody td{
  transition:color .4s cubic-bezier(.16,.84,.34,1),border-color .4s cubic-bezier(.16,.84,.34,1);
}
@media (hover:hover){
  html.pro table.preise tbody tr:hover{background:color-mix(in srgb,var(--oliv) 7%,transparent)}
  html.pro table.preise tbody tr:hover th,
  html.pro table.preise tbody tr:hover td{color:var(--tinte);border-bottom-color:var(--oliv)}
  html.pro .tief table.preise tbody tr:hover{background:color-mix(in srgb,var(--sand) 12%,transparent)}
  html.pro .tief table.preise tbody tr:hover th,
  html.pro .tief table.preise tbody tr:hover td{color:var(--schrift-hell);border-bottom-color:var(--sand)}
}

/* ══════════════════════════════════════════════════════════════════════
   KEIN WAAGERECHTES SCROLLEN (David 05.09.2026: Handy-Ueberlauf auf index)
   ══════════════════════════════════════════════════════════════════════
   Ein full-bleed-Element ragte auf 375 px ein paar Pixel ueber den Rand
   und machte die ganze Seite seitlich schiebbar (fuehlt sich kaputt an).
   `overflow-x:clip` schneidet den Ueberstand weg, OHNE einen Scrollcontainer
   zu bilden — position:sticky (die Kopfzeile!) bleibt dadurch heil, anders
   als bei `overflow:hidden`. */
html.pro body{overflow-x:clip}

/* ⛔ Zimmer-Seite: riesiger weißer Platz behoben (David 06.09.). Auf Desktop
   (>=861px) zeigt jedes Zimmer sein eigenes Foto (.zimmer-bild-mobil) und der
   geteilte Rahmen (.zimmer-rahmen) ist ausgeblendet — die klebende Spalte
   .zimmer-fach blieb aber als leere 100svh-Box stehen = die weiße Lücke.
   Sie muss mit weg. */
@media (min-width:861px){ html.pro .zimmer-fach{display:none} }

/* Reveal zügiger scharf (David 06.09.): Texte/Zahlen sollen schnell lesbar sein —
   die Einblend-Animation BLEIBT, nur schneller (1.1s -> .55s, Stagger halbiert),
   damit die Kennzahlen nicht blass/unscharf stehen, wenn man auf die Seite schaut. */
html.pro .stufe{transition:opacity .55s ease,transform .55s cubic-bezier(.16,.84,.34,1)}
html.pro .sicht .stufe:nth-child(2){transition-delay:.06s}
html.pro .sicht .stufe:nth-child(3){transition-delay:.12s}
html.pro .sicht .stufe:nth-child(4){transition-delay:.18s}
html.pro .sicht .stufe:nth-child(5){transition-delay:.24s}

/* Header-Inhalt auf Seitenbreite (1340px, wie .innen) zentrieren — auf breiten
   Schirmen stand das Logo ganz links / der Button ganz rechts an den Rändern,
   nicht mittig gruppiert und nicht mit dem Inhalt darunter fluchtend. David 06.09.
   Nur Desktop (>1024px); Mobile/Burger unberührt. */
@media (min-width:1025px){
  html.pro .kopf{padding-inline:max(clamp(1.4rem,5vw,4.5rem), calc((100vw - 1460px) / 2))}
}

/* Menü EXAKT mittig zentriert (war sichtbar linksbündig, weil 4 Elemente per
   space-between: Logo | Nav | Sprachen | Button → Nav links-lastig). Jetzt:
   Nav absolut in die Bildschirmmitte, Logo links, Sprachen+Button rechts. David 06.09. */
@media (min-width:1025px){
  /* Menü zentriert OHNE Überlappung: der nav füllt den mittleren Platz und
     zentriert sein Menü darin — so zentral wie möglich, aber nie zusammengequetscht
     mit dem Sprachumschalter/den Buttons rechts (v.a. Häuser mit Anfragen+Buchen). */
/* 3-Spalten-Grid: minmax(auto,1fr) | auto | minmax(auto,1fr). Bei genug Platz
     sind beide Randspalten gleich breit => die 5 Menuepunkte sitzen EXAKT mittig;
     wird es eng, waechst die rechte Spalte auf ihre Inhaltsbreite und die Nav
     rutscht sauber in den Restplatz (nie Ueberlappung). Rechte Gruppe (Sprachen +
     Anfragen + Buchen) ganz rechts, Logo links. David 06.09. Hebelt zugleich die
     Basisregel (stil.css @1400px position:absolute) per display:grid aus. */
  html.pro .kopf{display:grid;grid-template-columns:minmax(auto,1fr) auto minmax(auto,1fr);align-items:center;gap:2rem}
  html.pro .kopf > .marke{grid-column:1;justify-self:start}
  html.pro .kopf > nav{grid-column:2;justify-self:center;position:static;left:auto;top:auto;transform:none;margin:0 clamp(1rem,3vw,2.4rem) 0 0;min-width:0}
  html.pro .kopf > .kopf-cta{grid-column:3;justify-self:end;display:flex;align-items:center}
  html.pro .kopf > .burger{grid-column:3;justify-self:end}
}
/* Kein Strich beim Runterscrollen: die dünne Fortschritts-Linie unten am Kopf
   raus — sie sah beim Scrollen "scheiße" aus. Optisch sonst alles gleich. David 06.09. */
html.pro .kopf::after{display:none}

/* Kopf-Verlauf weicher + länger: seit die Unterseiten-Kopfzeile transparent ist
   (statt fest), macht der harte 190%-Verlauf über hellen Bild-Heros beim Scrollen
   eine sichtbare dunkle Bande/Kante ("Linie"). Jetzt fließender Mehrstufen-Verlauf
   über 250%, ohne sichtbare Kante — Nav bleibt lesbar. David 06.09. */
html.pro .kopf::before{
  height:250%;
  background:linear-gradient(180deg,rgba(28,30,19,.5) 0%,rgba(28,30,19,.3) 34%,rgba(28,30,19,.12) 62%,rgba(28,30,19,.03) 84%,rgba(28,30,19,0) 100%);
}

/* Scroll-Effekt wie der Startseiten-Hero: der Unterseiten-Hero bleibt STEHEN
   (sticky), der Inhalt (.nach-titel, deckend) scrollt darüber hoch. Vorher war
   .kopfbild position:relative → scrollte weg, und der Kopf-Verlauf über dem
   wandernden Bild machte die hässliche Linie/Kante. David 06.09. */
html.pro .kopfbild{position:sticky;top:0;z-index:0}
/* ── Text & Zahlen sofort scharf beim Scrollen (David 06.09.) ────────────
   Problem auf JEDER Seite/jedem Haus: die scroll-gebundene Einblendung
   (animation-timeline:view() in stil.css, Basis "entry 3% cover 28%", Listen
   bis "cover 34%") macht Text/Listen/Zahlen erst scharf, wenn man WEIT genug
   weiterscrollt. Steht die Section normal im Bild, ist der untere Text noch
   blass/unscharf. Fix: die Einblendung frueh in der entry-Phase abschliessen,
   damit alles scharf & lesbar ist, sobald man die Section normal sieht. Die
   Animation (Aufsteigen + Schaerfen) bleibt, nur der scharfe Endzustand kommt
   frueher. Gilt fuer den GESAMTEN Reveal, nicht nur die Kennzahlen. Verifiziert:
   bei ~76% Viewporthoehe (gerade eingetreten) opacity 1, kein Blur. */
@supports (animation-timeline: view()){
  html.pro .innen p, html.pro .innen li, html.pro .innen h2, html.pro .innen h3,
  html.pro .zimmer p, html.pro .zimmer li,
  html.pro .kennzahl, html.pro .kennzahlen > *{
    animation-range:entry 0% cover 24%;
  }
  /* Zimmer-Reveal wie am Anfang Vorlage 1 (David 07.09.): die sichtbare Stichpunkt-
     Animation war weg, weil ich sie zu frueh (cover 15%) hatte enden lassen -> Punkte
     waren schon scharf, bevor man sie sah = "Animation funktioniert nicht mehr". Zurueck
     auf die ORIGINAL-Staffel (entry 3% cover 28% ... bis cover 34%) = die sichtbare,
     gestaffelte Animation, die David mag. Kleine Elemente brauchen den weiten cover-
     Bereich, sonst laeuft der Reveal unsichtbar im untersten Sichtrand ab. */
  html.pro .zimmer p, html.pro .zimmer li, html.pro .zimmer .mehr{ animation-range:entry 3% cover 28% }
  html.pro .zimmer li:nth-child(2){ animation-range:entry 6% cover 30% }
  html.pro .zimmer li:nth-child(3){ animation-range:entry 9% cover 32% }
  html.pro .zimmer li:nth-child(n+4){ animation-range:entry 12% cover 34% }
}
/* ── Hover auf den Unterpunkten (David 06.09.) ───────────────────────────
   Beim Ueberfahren mit der Maus hebt sich der Punkt sanft hervor: kleiner
   Versatz nach rechts (Feder-Kurve), Text wird dunkler/lesbarer, der Akzent
   (Trennlinie bzw. Strich-Marker) faerbt sich in die Hausfarbe (--oliv). Nur
   echte Hover-Geraete (kein Kleben auf Touch). Gilt fuer beide Unterpunkt-
   Listen: .leistungen (Label + Text) und .merkmale (Zeilenliste). */
@media (hover:hover){
  html.pro .leistungen li{ transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .45s ease }
  html.pro .leistungen li span{ transition:color .45s ease }
  html.pro .leistungen li:hover{ transform:translateX(.6rem);border-top-color:var(--oliv) }
  html.pro .leistungen li:hover span{ color:var(--tinte) }
  html.pro .tief .leistungen li:hover{ border-top-color:var(--sand) }
  html.pro .tief .leistungen li:hover span{ color:var(--schrift-hell) }

  html.pro .merkmale li{ transition:transform .55s cubic-bezier(.16,1,.3,1),color .45s ease }
  html.pro .merkmale li::before{ transition:width .55s cubic-bezier(.16,1,.3,1),background-color .45s ease }
  html.pro .merkmale li:hover{ transform:translateX(.5rem);color:var(--tinte) }
  html.pro .merkmale li:hover::before{ width:22px;background:var(--oliv) }
  html.pro .tief .merkmale li:hover{ color:var(--schrift-hell) }

  /* .hinweise (z.B. Wellness: Finnische Sauna / Infrarotkabine …) — gleicher Hover
     wie oben: sanfter Versatz, Trennlinie + Titel in Hausfarbe, Text dunkler (David 08.09.). */
  html.pro .hinweise li{ transition:transform .55s cubic-bezier(.16,1,.3,1),border-color .45s ease,color .45s ease }
  html.pro .hinweise li b{ transition:color .45s ease }
  html.pro .hinweise li:hover{ transform:translateX(.6rem);border-top-color:var(--oliv);color:var(--tinte) }
  html.pro .hinweise li:hover b{ color:var(--oliv) }
  html.pro .tief .hinweise li:hover{ border-top-color:var(--sand);color:var(--schrift-hell) }
  html.pro .tief .hinweise li:hover b{ color:var(--sand) }
}
/* ── Zimmerbilder: KEIN weisser Rand/Ruckeln beim Scrollen (David 06.09.) ──
   Chrome zeigte beim Scrollen einen weissen Rand UNTER den Zimmerbildern, der
   sich dann korrigierte. Ursache: der Vorhang-Reveal (clip-path von unten offen)
   schneidet waehrend der Einblendung den unteren Teil ab — dahinter lag WEISS
   (transparenter Rahmen = Seitenhintergrund). Drei robuste Absicherungen:
   1) Rahmen bekommt einen dunklen Hintergrund -> waehrend Reveal/Lazy-Load
      blitzt nie mehr WEISS durch; das Bild wirkt, als steige es aus der Tiefe.
   2) vertikale Parallaxe (--py) auf den Inline-Zimmerbildern AUS -> kein Drift,
      das Bild deckt den Rahmen immer voll (Zoom + Vorhang-Reveal bleiben).
   3) min-height:82svh (Rest der ausgeblendeten Klebe-Buehne) weg -> keine
      svh-Neuberechnung/Hoehenspruenge; die Zimmer sitzen an ihrem Inhalt. */
html.pro .zimmer-bild-mobil{background:#2e2422}
/* Zimmer GANZ zeigen, nicht abgeschnitten (David 08.09.): die Quellfotos sind schon im
   Bogen-Hochformat (3/4.15) und zeigen den kompletten Raum. Der Vorhang-Zoom (--zoom bis 1.38)
   zoomte wieder ~38% rein und schnitt den Raum an. Im Ruhezustand darum KEIN Zoom
   (transform:none) -> object-fit:cover deckt bei gleichem Seitenverhaeltnis exakt = ganzer Raum.
   Beim Ueberfahren bleibt ein sanfter Zoom. */
html.pro .zimmer-bild-mobil img{transform:none!important;transition:transform 1.2s cubic-bezier(.19,1,.22,1)!important}
@media(hover:hover){ html.pro .zimmer-bild-mobil:hover img{transform:scale(1.05)!important} }
@media (min-width:861px){
  /* Zimmer wie am Anfang Vorlage 1 (David 07.09.: Grid-Experiment rueckgaengig,
     "so gefallen sie mir nicht"): zurueck zum Basis-Layout (flex-row, hochkant-
     Bogen 3/4.15). Nur die Klebe-Buehnen-Resthoehe raus. */
  html.pro .zimmer{min-height:0;justify-content:flex-start}
  /* Bild ein bisschen kleiner (David 07.09.: "nicht zu viel"): Cap 520->470px.
     Anordnung (flex-row, links/rechts abwechselnd) + Animationen bleiben. */
  html.pro .zimmer-bild-mobil{flex-basis:clamp(280px,39%,470px)}
}
/* Kennzahlen in ZENTRIERTEN Sektionen (.mitte) auch mittig (David 06.09.):
   In zentrierten Sektionen (z. B. Berge) standen die Kennzahlen unter einem
   zentrierten Absatz, waren aber linksbuendig (Flex-Default). Jetzt Gruppe UND
   jede Zahl mittig. Linksbuendige Kennzahlen der zweispaltigen "Das Haus"-
   Section (NICHT in .mitte) bleiben unberuehrt. */
html.pro .mitte .kennzahlen{justify-content:center}
html.pro .mitte .kennzahl{text-align:center}
html.pro .mitte .kennzahl::after{left:50%;transform:translateX(-50%)}

/* Zwei Kopf-Buttons (z. B. Buchen + Anfragen) gleich groß und mit Abstand
   (David 10.09.: „sind nicht gleich groß und kleben zusammen"). Der gefüllte
   und der Outline-Knopf unterscheiden sich nur in der Fläche, nicht in der Größe.
   Bei nur EINEM Kopf-Button unschädlich. */
html.pro .kopf-cta{gap:clamp(.5rem,.9vw,.75rem)}
html.pro .kopf-cta .knopf{
  min-width:8.6rem;height:2.85rem;padding:0 1.4rem;
  display:inline-flex;align-items:center;justify-content:center;text-align:center;
  box-sizing:border-box;line-height:1;
}

/* ══════════════════════════════════════════════════════════════════════
   DEZENTER SEKTIONS-HINTERGRUND (David 10.09.: „schöne Hintergründe, sehr
   dezent wie Tofana" — Stärke freigegeben)
   ══════════════════════════════════════════════════════════════════════
   Ein großes Umgebungsfoto liegt stark ENTSÄTTIGT und oben/unten ins Creme
   AUSGEBLENDET hinter dem Sektionsinhalt — der Text gewinnt immer. Sparsam
   einsetzen (2–3 Sektionen), NICHT auf Ring-/Bilderketten-/dunklen (tief)
   Sektionen. Section: `class="… band-grund" style="--grund-bild:url(bilder/x.jpg)"`.
   Feintuning je Sektion optional: `--grund-pos` (Bildausschnitt, Default 28%),
   `--grund-deck` (Deckkraft, Default .14). */
html.pro .band-grund{position:relative}
html.pro .band-grund::before{
  content:"";position:absolute;left:0;right:0;top:0;z-index:0;pointer-events:none;
  /* ⭐ NUR ein Streifen OBEN, nicht die ganze Bandhoehe (David 19.09.:
     „im Hintergrund ist immer noch kein Hintergrundbild zu sehen ... es
     sollte ganz oben sein"). Vorher lag das ::before ueber das GANZE Band
     — bei 3181 px Hoehe und einem 2,6:1-Foto zoomt `cover` das Motiv
     gigantisch hoch, und man sieht nur einen winzigen, ausgewaschenen
     Ausschnitt. Mit begrenzter Hoehe steht oben ein echtes Foto, das nach
     unten ausblendet. */
  height:clamp(320px,52vh,640px);
  background:var(--grund-bild) center var(--grund-pos,50%)/cover no-repeat;
  filter:grayscale(.5) saturate(.65) brightness(1.02) contrast(1);
  opacity:var(--grund-deck,.24);
  -webkit-mask-image:linear-gradient(180deg,#000 0,#000 46%,transparent 100%);
          mask-image:linear-gradient(180deg,#000 0,#000 46%,transparent 100%);
}
html.pro .band-grund > *{position:relative;z-index:1}

/* Zweispalter gespiegelt: Bild LINKS, Text RECHTS (David 10.09.). Als Modifier
   `class="innen zwei gedreht"`. Nur am Desktop — mobil bleibt das Bild oben
   (Basisregel `.zwei .bildspalte{order:-1}`). Gut auch für einen Wechsel-Rhythmus
   (mal Bild links, mal rechts). */
@media (min-width:761px){
  html.pro .zwei.gedreht > :first-child{order:2}
  html.pro .zwei.gedreht > .bildspalte{order:1}
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOTEL CORNELIA — Haus-Anpassungen (Vorlage 1 · veredelt · Demo)
   ═══════════════════════════════════════════════════════════════════════════ */
:root{ --oliv:#9a071e; }   /* Hausfarbe: das Rot aus dem Logo, gemessen (Median der
                              deckenden Rotpixel #9a071e) — 8,7:1 auf Weiß. */

/* ⛔ Das Cornelia-Logo bringt seinen eigenen WEISSEN Grund mit (ein Wimpel mit
   Schatten, darauf Schrift und Bergstrich in Rot/Grau). `brightness(0) invert(1)`
   machte daraus einen weißen Kasten ohne Schrift. Also OHNE Filter, nur ein
   Schlagschatten für die Kante — an ALLEN Stellen: Hero, Kopf, Fuß, Vorhang.
   Quelle ist nur 313 px breit (PNG, kein SVG auf der Domain): Anzeige nie breiter. */
html.pro .titel-logo{
  width:clamp(200px,20vw,300px);
  filter:drop-shadow(0 3px 18px rgba(10,12,8,.45)) drop-shadow(0 1px 3px rgba(10,12,8,.35));
}
html.pro .marke-hell{filter:drop-shadow(0 2px 10px rgba(10,12,8,.35))}
html.pro .fuss-logo{filter:none;opacity:1;width:190px}
.auftakt-inhalt img{filter:none;opacity:1}
html.pro .auftakt-inhalt img{filter:none;width:clamp(150px,16vw,230px)}

/* Kopf-Logo: Höhe steuert, Breite frei — der Wimpel ist 313×175. */
html.pro .marke img{width:auto;height:clamp(66px,6.4vw,92px)}
html.pro .kopf.fest .marke img{height:clamp(60px,5.4vw,78px)}
@media(max-width:760px){
  html.pro .marke img{height:clamp(46px,12vw,56px)}
  html.pro .kopf.fest .marke img{height:clamp(42px,10vw,50px)}
}

/* Preisliste (Abschnitt „Zimmer & Preise") */
html.pro .preisliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
html.pro .preisliste li{display:flex;align-items:baseline;justify-content:space-between;
  gap:1.4rem;padding:1.05rem .1rem;border-bottom:1px solid var(--linie)}
html.pro .preisliste li:last-child{border-bottom:none}
html.pro .pl-name b{display:block;font-family:var(--display);font-weight:500;
  font-size:1.08rem;letter-spacing:.005em;color:var(--tinte)}
html.pro .pl-name span{display:block;font-size:.85rem;color:var(--text-leise);margin-top:.28rem}
html.pro .pl-preis{flex:none;font-family:var(--display);font-weight:600;
  font-size:1.14rem;color:var(--oliv);white-space:nowrap}
html.pro .preisliste-fuss{margin:1.15rem .1rem 0;font-size:.8rem;line-height:1.5;color:var(--text-leise)}

/* Veredelte reveal-/weitband-Elemente ragen über den Rand → sonst waagerechter
   Dokument-Scroll. overflow-x:clip lässt overflow-y:visible bestehen (sticky heil). */
/* ⛔ 19.09.2026 RAUS — David meldete zum dritten Mal „oben und unten ist dieser
   weisse Strich, der immer flackert" am Zugfenster.
   Diese Zeile widersprach der Notiz weiter oben in derselben Datei: ein Clip
   DIREKT am Vorfahren eines `position:sticky`-Elements laesst Safari an den
   oberen und unteren Kanten flackern. Sie war ausserdem ueberfluessig —
   `html.pro body{overflow-x:clip}` faengt den waagerechten Ueberlauf bereits ab.
   html.pro .nach-titel{overflow-x:clip}  <- absichtlich still gelegt */

/* #panorama ist die Fenstersitz-Fahrt: alte Margin raus, sonst weißer Strich. */
html.pro #panorama{margin-block:0}

/* Hero: nicht reingezoomt + heller (David 18.09., wie die Referenz-Demo). */
@keyframes ruhig{
  0%{transform:scale(1)}
  100%{transform:scale(1.045)}}
html.pro .titel-bild img{transform:scale(1)}
html.pro .titel::after{
  background:
    linear-gradient(180deg,rgba(18,22,17,.22) 0%,rgba(18,22,17,.04) 15%,rgba(18,22,17,0) 32%),
    linear-gradient(0deg,rgba(18,22,17,.30) 0%,rgba(18,22,17,.06) 22%,rgba(18,22,17,0) 42%);
}
html.pro .titel-vignette{opacity:.24;animation:none}
html.pro .titel-bild img{filter:brightness(1.06) contrast(1.02) saturate(1.04)}

/* ── Kopf-Knöpfe „Buchen" + „Anfragen" (echte Seite hat ein Buchungssystem) ──
   „Buchen" sieht GENAUSO aus wie „Anfragen" (David 07.09.) und tut nichts.
   ⚠️ Unter 761 px gehören die Kopf-Knöpfe in den Burger (stil.css), die
   Vorlage-Regel `.kopf-cta .knopf{display:inline-flex}` schlüge das sonst
   und der Kopf würde am Handy doppelt so hoch (Muster: Hotel am Hang). */
@media (max-width:760px){
  html.pro .kopf:not(.offen) .kopf-cta .knopf{display:none}
  /* Ganze Gruppe weg (auch der eingefügte Sprachumschalter), solange das Menü zu
     ist. Im offenen Menü (.kopf.offen) greift wieder die Vorlage (display:contents). */
  html.pro .kopf:not(.offen) > .kopf-cta{display:none}
}
@media (min-width:761px){
  html.pro .kopf .knopf-buchen{font:inherit;font-size:.71rem;cursor:pointer;background:transparent}
  html.pro .kopf-cta{display:flex;align-items:center}
}

/* ── Burger bleibt Burger: stil.css schreibt `.offen .burger span` ohne
   Element davor, `.offen` sitzt aber auch am <html> (Vorhang). Geschlossenen
   Zustand wiederherstellen, solange die KOPFZEILE nicht offen ist. */
html.pro .kopf:not(.offen) .burger span:nth-child(1){transform:none}
html.pro .kopf:not(.offen) .burger span:nth-child(2){opacity:1}
html.pro .kopf:not(.offen) .burger span:nth-child(3){transform:none}

/* ── Offenes Handymenü aufgeräumt: Logo + Kreuz oben in einer Zeile, darunter
   die Menüpunkte, darunter Sprachen und die zwei Knöpfe nebeneinander.
   (Vorher: Logo links NEBEN der Liste, Knöpfe umgebrochen, Kreuz ganz unten.) */
@media (max-width:760px){
  html.pro .kopf.offen{display:flex;flex-wrap:wrap;align-content:flex-start;align-items:center;justify-content:space-between}
  html.pro .kopf.offen > .marke{order:0}
  html.pro .kopf.offen > .burger{order:1;margin-left:auto}
  html.pro .kopf.offen > nav{order:2;flex:0 0 100%}
  html.pro .kopf.offen > .kopf-cta{order:3;display:flex;flex:0 0 100%;flex-wrap:wrap;align-items:center;gap:.9rem;margin-top:2.4rem}
  html.pro .kopf.offen > .kopf-cta .alpix-sprachen{flex:0 0 100%;margin:0 0 .4rem}
  html.pro .kopf.offen > .kopf-cta .knopf{margin-top:0}
}

/* ══════════════════════════════════════════════════════════════════════
   TEXT IST DA, SOBALD MAN IHN SIEHT
   ══════════════════════════════════════════════════════════════════════
   David 20.09.: „die Bilder kommen ganz verspaetet ... das darf nicht
   passieren, erst wenn ich vorbei bin kommen Texte und Bilder."

   Gemessen im Band #lage (Fenster 762 px), Nachlauf zwischen „taucht am
   unteren Rand auf" und „ist deckend":
       Bild      42 px   ok
       Rubrik   164 px
       Ueberschrift 166 px
       Lead     219 px   <- fast ein Drittel Bildschirm

   Ursache: `stil.css` setzt fuer .innen p/h2/h3/li
   `animation-range: entry 3% cover 28%`. Das Ende liegt auf der COVER-Achse,
   die ueber die ganze Durchfahrt laeuft — der Text ist deshalb erst fertig,
   wenn er schon ein gutes Stueck im Bild steht. Dazu kommt `blur(3px)` in
   den Keyframes: solange die Animation laeuft, ist er nicht nur blass,
   sondern auch unscharf.

   ⛔ stil.css wird NICHT angefasst (Basis — wie skript.js). Die Pro-Schicht
   legt sich mit `html.pro` drueber und beendet die Bewegung auf der
   ENTRY-Achse: fertig, sobald das Element zu zwei Dritteln eingetreten ist.
   Der Effekt bleibt derselbe, er ist nur rechtzeitig durch.             */
@supports (animation-timeline: view()){
  @media all{
    html.pro .innen p, html.pro .innen li,
    html.pro .innen h2, html.pro .innen h3,
    html.pro .zimmer p, html.pro .zimmer li,
    html.pro .kennzahl, html.pro .kennzahlen > *{
      animation-range:entry 0% entry 62%;
    }
    /* Aufzaehlungen laufen weiter versetzt, nur ebenfalls frueher fertig. */
    html.pro .zimmer li:nth-child(2){animation-range:entry 4% entry 66%}
    html.pro .zimmer li:nth-child(3){animation-range:entry 8% entry 70%}
    html.pro .zimmer li:nth-child(n+4){animation-range:entry 12% entry 74%}
  }
}


/* ══════════════════════════════════════════════════════════════════════
   FLUESSIGKEIT — Dauerkosten beim Scrollen abgestellt (20.09.2026)
   ══════════════════════════════════════════════════════════════════════
   Gemessen an Chi Vai und Sonnblick: ZWEI dauerhaft sichtbare feste
   Elemente mit `backdrop-filter` und bis zu 27 Elemente gleichzeitig in
   einem `blur(3px)`. Alle drei zwingen den Browser, in jedem Bild neu zu
   zeichnen — genau waehrend gescrollt wird.

   1 · Kopfleiste: `backdrop-filter:blur(16px)` auf einem Grund, der ohnehin
       zu 94 % deckt. Vom Weichzeichnen war fast nichts zu sehen, er kostete
       aber bei JEDEM Scroll-Bild. Jetzt 97 % deckend, ohne Filter.
   2 · Entwurfs-Banner unten links: dasselbe (92 % -> 96 %).
   3 · Das Text-Reveal zog `filter:blur(3px)` ueber jeden Absatz. Blur ist
       der teuerste Filter ueberhaupt. Die Keyframes werden hier unter
       demselben Namen neu definiert (spaetere Datei gewinnt) — nur noch
       opacity und transform, beides Compositor-Arbeit.
   ⛔ stil.css bleibt unangetastet (Basis).                              */
html.pro .kopf.fest{
  background:rgba(255,255,255,.97);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
html.pro .entwurf{
  background:rgba(20,24,18,.96);
  -webkit-backdrop-filter:none;backdrop-filter:none;
}
@supports (animation-timeline: view()){
  @media all{
    @keyframes alpix-ein{
      from{ opacity:0; transform:translateY(22px) }
      to  { opacity:1; transform:none             }
    }
  }
}


/* ══════════════════════════════════════════════════════════════════════
   TEXTE HOLEN DAS SCROLLEN EIN (20.09.2026)
   ══════════════════════════════════════════════════════════════════════
   David: „die Texte kommen erst, wenn ich vorbeigescrollt habe."
   Der Ausloeser war nicht schuld — es sind die Dauern. Ein Teil der
   Enthuellung laeuft ZEITBASIERT (transition), nicht am Scrollstand:
       .aufzug (Ueberschriften)  1,00 s
       .lead                     0,90 + 0,22 = 1,12 s
       [data-auf]                0,90 s
       .stufe                    0,55 + 0,24 = 0,79 s
   Wer in unter einer Sekunde an einem Abschnitt vorbeizieht — also ganz
   normal — sieht den Text noch im Aufbauen. Jetzt rund ein Drittel davon.
   Die Bewegung bleibt dieselbe, sie ist nur durch, bevor der Abschnitt
   wieder weg ist. Der gestaffelte Verzug bleibt, nur kuerzer.           */
html.pro .aufzug > span{ transition-duration:.34s !important; }
html.pro .stufe{ transition-duration:.30s !important; transition-delay:.06s !important; }
html.pro [data-auf]{ transition-duration:.34s !important; }
html.pro .lead{ transition-duration:.34s !important; transition-delay:.07s !important; }
html.pro [style*="--verzug"]{ transition-delay:calc(var(--verzug, 0ms) * .34) !important; }


/* ══════════════════════════════════════════════════════════════════════
   HERO WIRKLICH VOLLBILD — kein weisser Streifen unten
   ══════════════════════════════════════════════════════════════════════
   David 20.09.: „bei Sonnblick die Hero Vollbildschirm, dass unten kein
   weisser Rand ist — aber nur wenn die Qualitaet gleich bleibt."

   stil.css setzt `.titel{height:100svh}`. `svh` ist die KLEINSTE
   Fensterhoehe, also die mit ausgeklappten Browserleisten. Klappen die beim
   Scrollen ein, wird der sichtbare Schirm GROESSER als die Hero — und unten
   schaut der Seitengrund durch. Genau der weisse Streifen.
   `dvh` folgt der tatsaechlichen Fensterhoehe und passt immer.

   Qualitaet: unveraendert. Das Titelbild bzw. der Film liegt in voller
   Aufloesung und wird per `object-fit:cover` ohnehin HERUNTERgerechnet —
   ein paar Pixel mehr Hoehe heisst nur ein minimal anderer Ausschnitt,
   nicht weniger Schaerfe.
   `min-height:620px` aus der Basis bleibt.
   ⛔ stil.css bleibt unangetastet (Basis).                              */
html.pro .titel{ height:100dvh; }


/* ══════════════════════════════════════════════════════════════════════
   ENDLOSE ANIMATIONEN SCHLAFEN, WENN SIE NICHT IM BILD SIND
   ══════════════════════════════════════════════════════════════════════
   David 21.09.: „bei St. Veit stockt es keinen Millimeter ... bei den
   anderen stockt es beim Durchscrollen immer."
   Gemessen bei Sonnblick, ganz oben auf der Seite: das BILDERRAD lief mit
   48 endlosen Animationen (16 Bilder in einem 3D-Ring, je drei), dazu das
   Laufband — obwohl das Rad 12 200 px WEITER UNTEN lag. Vom Seitenstart an
   musste die Grafikkarte 16 gedrehte 3D-Ebenen in JEDEM Bild mitrechnen,
   egal wo man gerade scrollt. St. Veit hat kein Bilderrad — deshalb lief es
   dort fluessig und hier nicht.
   Die jahr-Kette machte es laengst richtig (laeuft nur, solange sie im
   Bild ist). Genau das bekommen Rad und Laufband jetzt auch: `.ruht`
   haelt sie an, pro.js nimmt die Klasse weg, sobald sie in die Naehe
   kommen. Laufen tun sie also genau dann, wenn man sie sieht.          */
html.pro .ruht, html.pro .ruht *{ animation-play-state:paused !important; }

/* ═══ BURGER BLEIBT BURGER (22.09.2026) ═══════════════════════════════════
   stil.css zeichnet das „X" mit `.offen .burger span` — gemeint war der
   geoeffnete Kopf (.kopf.offen). pro.js setzt `offen` aber auch auf <html>,
   sobald der Vorhang weg ist. Folge: am Handy stand der Menueknopf dauerhaft
   als „X" da, obwohl das Menue zu war. Hier gilt das X nur noch fuer den
   wirklich geoeffneten Kopf. */
html.pro .kopf:not(.offen) .burger span{transform:none;opacity:1}
/* Am Handy (<=760px) blendet stil.css den Anfragen-Knopf im Kopf aus. Die
   Regel `html.pro .kopf-cta .knopf{display:inline-flex}` holte ihn zurueck —
   Logo + Sprachen + Knopf + Burger passten nicht in 390 px, der Kopf wurde
   441 px breit und das Handy zoomte die GANZE Seite heraus (gemessen
   22.09.2026). Im geoeffneten Menue steht der Knopf weiterhin da. */
@media (max-width:760px){
  html.pro .kopf:not(.offen) .kopf-cta .knopf{display:none}
}
/* Waagrechten Ueberstand auch am <html> abschneiden (wie St. Veit). Nur am
   <body> reicht am Handy nicht: der Browser verbreitert sonst die ganze
   Seite um herausragende Bilder und zoomt heraus. */
html.pro{overflow-x:clip}

/* Keyframes und Pause fuer das Titelbild-Atmen (siehe HERO-PUSH oben). */
@keyframes titel-atmen{ from{ transform:scale(1) } to{ transform:scale(1.07) } }
html.pro .titel.titel-ruht .titel-bild img{ animation-play-state:paused }

/* ═══ HANDY-MENUE AUFGERAEUMT (29.09.2026, David: „besser strukturiert") ═══
   Vorher brach der geoeffnete Kopf (.kopf.offen) einfach um: Logo mitten
   links, Menue rechts daneben, Sprachen + Knopf + X in einer Zeile darunter.
   Jetzt ein festes Raster ueber den ganzen Schirm:
     oben   Logo links · X rechts (genau dort, wo der Burger stand)
     Mitte  die Menuepunkte gross, untereinander, mit feinen Linien
     unten  Sprachen links · „Anfragen" als voller Knopf (ueber der Chat-Glocke)
   Nur <=760 px. Grosse Schirme unveraendert. */
@media (max-width:760px){
  html.pro .kopf.offen{
    display:grid; grid-template-columns:1fr auto; grid-template-rows:auto 1fr auto;
    grid-template-areas:"marke burger" "nav nav" "cta cta";
    align-items:center; column-gap:1rem;
    height:100dvh; overflow-y:auto; overscroll-behavior:contain;
    padding:clamp(.9rem,3vw,1.2rem) 22px calc(5.6rem + env(safe-area-inset-bottom,0px));
    background:var(--papier); color:var(--tinte);
  }
  html.pro .kopf.offen .marke{grid-area:marke; justify-self:start; margin:0}
  html.pro .kopf.offen .burger{grid-area:burger; justify-self:end; margin:0}
  html.pro .kopf.offen > nav{grid-area:nav; align-self:center; width:100%; margin:0}
  html.pro .kopf.offen .menue{display:flex; flex-direction:column; align-items:stretch; gap:0;
    width:100%; margin:0; padding:0; list-style:none; border-top:1px solid var(--linie, rgba(0,0,0,.12))}
  html.pro .kopf.offen .menue li{border-bottom:1px solid var(--linie, rgba(0,0,0,.12));
    animation:menue-rein .7s cubic-bezier(.34,1.3,.64,1) both}
  html.pro .kopf.offen .menue li:nth-child(2){animation-delay:.05s}
  html.pro .kopf.offen .menue li:nth-child(3){animation-delay:.1s}
  html.pro .kopf.offen .menue li:nth-child(4){animation-delay:.15s}
  html.pro .kopf.offen .menue li:nth-child(5){animation-delay:.2s}
  html.pro .kopf.offen .menue li:nth-child(6){animation-delay:.25s}
  html.pro .kopf.offen .menue a{display:flex; align-items:center; justify-content:space-between;
    padding:1.05rem 0; font-size:clamp(1.6rem,7.4vw,2rem); font-weight:300; line-height:1.1;
    letter-spacing:-.01em; text-transform:none; color:var(--tinte); opacity:1}
  html.pro .kopf.offen .kopf-cta{grid-area:cta; display:flex; align-items:center; justify-content:space-between;
    gap:1rem; width:100%; margin:0; padding-top:1.2rem;
    animation:menue-rein .7s cubic-bezier(.34,1.3,.64,1) .2s both}
  html.pro .kopf.offen .kopf-cta .knopf{display:inline-flex; justify-content:center; flex:1 1 auto; max-width:13rem;
    margin:0; background:var(--tinte); color:var(--papier); border-color:var(--tinte)}
  html.pro .kopf.offen .alpix-sprachen{margin:0}
  /* Der Entwurf-Hinweis unten verdeckte sonst Sprachen und Knopf. */
  html.pro:has(.kopf.offen) .entwurf{display:none}
}
@keyframes menue-rein{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}

/* Wortmarke statt Bild-Logo (Adler, Maria …): im offenen Menue dunkel, sonst weiss auf weiss. */
@media (max-width:760px){
  html.pro .kopf.offen .marke-schrift{color:var(--tinte)!important;text-shadow:none!important;border-color:currentColor}
}

/* Kopf-Knöpfe stehen fest (David 29.09.2026): „Buchen" und „Anfragen" oben rechts
   wandern nicht mehr mit der Maus mit. Schlägt die Verschiebung aus skript.js
   (data-magnet setzt style.transform). */
.kopf [data-magnet],.kopf .knopf{transform:none!important}