/* ═══════════════════════════════════════════════════════════════════════════ HOTEL SCHWARZENBACH — Stellschrauben über dem Kern Basis: Vorlage BÜHNE (Aktiv-/Berghotel), Farbwelt auf Bordeaux gedreht. Bordeaux #5a1e2e ist die Marke aus dem Chatbot — Website und Bot wirken dadurch wie aus einem Guss. Gold nur als Linie, nie als Text. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Farbwelt: dunkel, aus dem ersten Schwarzenbach-Entwurf übernommen ───── Der Entwurf vom 07.08.2026 (alpixai.com/entwurf-schwarzenbach) ist fast schwarz mit Weinrot und einem altrosa Akzent. Genau die Anmutung soll bleiben, deshalb stehen hier dessen Werte. Die Namen sind die des Kerns: `--papier` heißt weiter Papier, ist jetzt aber die dunkle Grundfläche. So bleibt kern.css unverändert nutzbar. */ /* ═══════════════════════════════════════════════════════════════════════════ SCHRIFTEN — 30.08.2026 Jannik: „sieht noch nicht so hochwertig aus, als hätte er kaum was geändert." Gemessen war der Grund handfest: die Seite lief auf `Georgia` (Windows-Systemschrift von 1993) und `-apple-system`. Der ERSTE Schwarzenbach-Entwurf, den er gut fand, hatte mit DM Sans noch eine eigene Schrift — der neue Bau war da ein Rückschritt. Titel: EB Garamond. Klassische Renaissance-Antiqua, feiner Strich und mehr Kontrast als Georgia, aber genug Fleisch, um auf fast schwarzem Grund nicht zu verschwinden (Cormorant wäre dort zu dünn geworden). Text: DM Sans — dieselbe wie im ersten Entwurf, damit die Linie hält. ⛔ SELBST GEHOSTET, nicht über fonts.googleapis.com. Zwei Gründe: eine italienische Hotelseite darf keine IP-Adressen an Google schicken, und der Entwurf geht später an Roland Schatzer — er muss ohne fremde Abhängigkeit laufen. Alle Dateien liegen in `schriften/`, 128 KB. Umlaute und italienische Akzente sind geprüft, alle enthalten. ═══════════════════════════════════════════════════════════════════════════ */ /* Nachgemessen, welche Gewichte die Seite WIRKLICH anfordert: Garamond nur 400 (die 500er und 600er lagen ungenutzt herum, 50 KB), DM Sans dagegen 400 bis 700 — der 700er fehlte, der Browser hat das Fett bis dahin selbst berechnet. Genau daran erkennt man am Ende die billige Seite: gerechnetes Fett franst aus. → schrift-nicht-geladen-messfalle */ /* ⭐ 31.08.2026 — Titelschrift von EB Garamond auf NEWSREADER. Jannik: „mir gefällt das mit den Schriften noch nicht ganz." Im direkten Vergleich (sechs Kandidaten im echten Layout) war Garamond der buchigste: klassisch und warm, aber ohne Präsenz. Newsreader ist eine moderne redaktionelle Antiqua — kräftigerer Strich, offenere Formen, trägt auf dunklem Grund deutlich besser und wirkt heutiger, ohne modisch zu sein. Garamond bleibt als Rückfall stehen, falls die Datei mal fehlt. */ @font-face{font-family:'Newsreader';src:url(../schriften/newsreader-400.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Newsreader';src:url(../schriften/newsreader-500.woff2)format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'EB Garamond';src:url(../schriften/eb-garamond-400.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'DM Sans';src:url(../schriften/dm-sans-400.woff2)format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'DM Sans';src:url(../schriften/dm-sans-500.woff2)format('woff2');font-weight:500;font-style:normal;font-display:swap} @font-face{font-family:'DM Sans';src:url(../schriften/dm-sans-600.woff2)format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'DM Sans';src:url(../schriften/dm-sans-700.woff2)format('woff2');font-weight:700;font-style:normal;font-display:swap} :root{ --papier: #0F0F11; /* Grundfläche — neutral, aus Entwurf 1 (02.09.2026) */ --papier-2: #151518; /* zweite Fläche, für das Wechselspiel */ --papier-3: #1C1C20; /* abgesetzte Kästen und Karten */ --tinte: #F2F2F4; /* Überschriften: 17,1:1 auf der Grundfläche */ --tinte-2: #DEDEE4; /* Fließtext: 14,3:1 */ --leise: #A8A8B0; /* Nebentext: 8,1:1 */ /* ── ZIER von HANDLUNG getrennt (30.08.2026) ────────────────────────── ⬇️ Der Versuch mit Messing als Zierfarbe ist zurueckgenommen: Jannik am 30.08. — „von der Farbe her aendern hat es jetzt nicht gebracht, machst gerne wieder auf die alte Farbe zurueck." Altrosa ist wieder da. Nicht zurueckgenommen ist die Trennung darunter — die ist unabhaengig von der Farbe richtig und kostet nichts. ⭐ Neu ist die Trennung: `--akzent` ist ab jetzt die ZIERfarbe (Zahlen, Rubriken, Linien, Striche), `--tat` die HANDLUNGsfarbe (jeder Knopf). Grund: Wuerde der Knopf mitwandern, stuende ein ockerfarbener Knopf direkt neben dem bordeauxroten Chatbot-Knopf. Die Handlungsfarbe bleibt deshalb im Bordeaux-Umfeld der Marke — genau das meint „nur kleine Akzente". */ --akzent: #C58297; /* Altrosa, Zier: 6,4:1 auf der Grundfläche */ --akzent-hell: #E2AABD; /* hellere Stufe für dunkle Bänder: 9,8:1 */ --tat: #C58297; /* Altrosa, Handlung: Knöpfe, 6,4:1 */ --tat-hell: #E2AABD; --wein: #5F1F30; /* Weinrot: nur Flächen und Knöpfe, nie Text */ --wein-hell: #7B2A41; --dunkel: #08080A; /* das dunkelste Band und der Fuß */ --zier: #C58297; /* Linien und Striche — folgt der Zier, nicht der Handlung */ --linie: rgba(242,242,244,.13); --linie-fein: rgba(242,242,244,.07); --schrift-titel: 'Newsreader', 'EB Garamond', Georgia, 'Times New Roman', serif; --schrift-text: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --radius: 8px; /* Sagt dem Browser, dass die Seite dunkel ist. Ohne das erscheint der Kalender hinter den Datumsfeldern weiß und die Auswahlpfeile schwarz auf schwarz. */ color-scheme: dark; } /* ⛔ Der Vorhang-Effekt des Kerns ist abgeschaltet. `kern.css` setzt `.vorhang{ clip-path:inset(0 0 100% 0) }`: Das Bild startet auf Höhe null und klappt beim Scrollen von oben nach unten auf. Genau das hat David zweimal beanstandet — es sieht aus, als ginge ein Fenster zu und wieder auf, wie ein Blinzeln. Ersetzt durch dasselbe ruhige Aufblenden, das auch der Schriftzug im Titelbild benutzt: sichtbar werden, minimal hochrücken, fertig. Kein Zuschnitt, nichts klappt. Der sanfte Zoom im Bild bleibt, der stört nicht. */ .vorhang{ clip-path:none; opacity:0; transform:translateY(18px) scale(.985); transition:opacity var(--t-lang) var(--aus), transform var(--t-lang) var(--aus); /* ⭐ 02.09.2026: Bisher fehlte hier die Staffelung, die `.stufe` laengst hatte — alle Kacheln einer Reihe erschienen gleichzeitig. Zusammen mit der gruppenweisen Zaehlung in kern.js laeuft eine Reihe jetzt sichtbar von links nach rechts durch. Das war Janniks „nicht einfach so random". Das Bild bekommt dieselbe Verzoegerung, sonst startet der Zoom vor der Kachel, in der er steckt. */ transition-delay:calc(var(--i,0) * 90ms); will-change:transform, opacity; } .vorhang.in{ clip-path:none; opacity:1; transform:none } .vorhang img{ transform:scale(1.06); transition:transform 1.6s var(--aus); transition-delay:calc(var(--i,0) * 90ms); } .vorhang.in img{ transform:scale(1) } /* ⛔ Eine Kachel ist gleichzeitig `.vorhang` UND `.kachel`. `.kachel` setzt in kern.css die transition-KURZFORM — die traegt ein implizites `transition-delay:0s` mit und loescht damit die Staffelung oben, weil sie bei gleicher Spezifitaet spaeter steht. Deshalb hier beides zusammen neu setzen: der Hover-Effekt der Kachel bleibt, die Staffelung ueberlebt. */ .kachel.vorhang{ transition:opacity var(--t-lang) var(--aus), transform var(--t-lang) var(--aus), box-shadow var(--t-mittel) var(--weich); transition-delay:calc(var(--i,0) * 90ms); } /* Beim Zeigen soll die Kachel SOFORT reagieren, nicht nach der Staffelzeit. */ .kachel.vorhang:hover{ transition-delay:0s } /* Der Kern ist für dunkle Schrift auf hellem Grund gebaut. Auf dunklem Grund kippen drei Dinge: Bildplatzhalter leuchten weiß auf, das Filmkorn legt sich als Schleier über alles, und der Knopf stünde weiß auf Altrosa — das sind nur 2,5:1 und damit unlesbar. Alle drei hier zurechtgerückt. */ .kachel,.geteilt-bild,.titel-bild{ background:var(--papier-3) } /* ⛔ Filmkorn ganz aus. `kern.css` legt ein Rauschraster als fixierte Schicht über die GANZE Seite, also auch über das Titelvideo. Gedacht ist es dafür, schwaches Fotomaterial gewollt wirken zu lassen — über einem 1080p-Video macht es genau das Gegenteil und lässt es körnig und unscharf aussehen. Das Video ist hier das beste Material, das wir haben; es braucht keine Körnung, sondern freie Sicht. */ .korn{ display:none } /* Auch die gemeinsame Farbstimmung bleibt vom Schriftzug weg. Ein Logo ist kein Foto und hat in einer Fotokorrektur nichts verloren. */ .foto-stimmung .fuss .marke img{ filter:none } .knopf{ background:var(--tat); border-color:var(--tat); color:var(--dunkel); /* 6,9:1 statt 2,5:1 */ } .knopf::before{ background:var(--akzent-hell) } .knopf:hover{ color:var(--dunkel) } .knopf--leise{ background:transparent; border-color:var(--linie); color:var(--tinte); } .knopf--leise::before{ background:var(--tat) } .knopf--leise:hover{ color:var(--dunkel); border-color:var(--akzent) } h1,h2,h3{ font-weight:400; letter-spacing:-.012em } h1{ letter-spacing:-.02em } .titel-satz em{ font-style:normal; color:var(--akzent-hell) } /* Gold zieht die Rubrikstriche, nicht die Markenfarbe */ .rubrik::after{ background:var(--zier) } .band--dunkel .rubrik::after{ background:var(--zier) } /* ═══ 1 · Kopfzeile ═══════════════════════════════════════════════════════ Drei Felder: Logo links, Menü in der Mitte, Anfrage rechts. Damit das Menü WIRKLICH mittig steht und nicht nur im Restplatz schwimmt, bekommen die beiden äußeren Felder dieselbe Grundbreite (flex:1) und die Mitte gar keine. Über dem Video ist der Balken durchsichtig, ab dem ersten Scrollen dunkel. Der Wechsel hängt an der Klasse .fest aus kern.js, nie an einer Media Query. */ .kopf{ display:flex; align-items:center; gap:clamp(12px,2vw,28px); background:transparent; /* ⛔ Kein backdrop-filter. kern.css setzt hier blur(14px), und ein Element mit Filter wird zum Bezugsrahmen für alles `position:fixed` DARIN. Das Vollbildmenü des Handys ist ein Kind dieser Kopfzeile und schrumpfte dadurch auf Kopfzeilenhöhe: 76 statt 812 px, die oberen Menüpunkte lagen 162 px über dem Bildschirmrand. Gemessen am 27.08.2026, und schon der dritte Fall dieser Art. Der Balken ist ohnehin fast deckend, das Milchglas fehlt niemandem. */ -webkit-backdrop-filter:none; backdrop-filter:none; border-bottom:1px solid transparent; padding-block:16px; transition:background var(--t-mittel) var(--weich), padding var(--t-mittel) var(--weich), border-color var(--t-mittel) var(--weich); } .kopf.fest{ background:rgba(8,8,10,.95); background:color-mix(in srgb, var(--dunkel) 95%, transparent); border-bottom-color:rgba(255,255,255,.12); padding-block:10px; } .kopf-links,.kopf-rechts{ flex:1 1 0; display:flex; align-items:center; min-width:0 } .kopf-rechts{ justify-content:flex-end } .kopf .marke{ color:#fff; display:flex; align-items:center; padding:0 } .kopf .marke img{ /* 404/320 = 1,2625 — die Sternenzone kommt oben dazu, der Schriftzug selbst bleibt dadurch exakt so gross wie vorher. */ height:clamp(33px,3.03vw,43px); width:auto; display:block; transition:height var(--t-mittel) var(--weich); } .kopf.fest .marke img{ height:clamp(28px,2.53vw,34px) } /* Die Mitte: gesperrte Kapitälchen, ruhig gesetzt, mit Goldstrich beim Zeigen. ⚠️ NUR ab 901 px. Unter 900 px baut kern.css aus derselben `.menue` das Vollbildmenü (Spalte, linksbündig, eigene Abstände). Stünden diese Regeln ungeschützt hier, würden sie das überschreiben — eine Media Query erhöht die Stärke einer Regel NICHT, und die spätere Datei gewinnt. Genau so lagen die Menüpunkte am Handy plötzlich nebeneinander und der erste 144 px über dem oberen Bildschirmrand. */ @media (min-width:901px){ .menue{ flex:0 0 auto; margin-left:0; display:flex; align-items:center; gap:clamp(14px,1.9vw,30px); } .menue a{ color:rgba(255,255,255,.88); font-weight:500; font-size:.76rem; letter-spacing:.13em; text-transform:uppercase; } .menue a:hover{ color:#fff } .menue a[aria-current="page"]{ color:#fff } } .menue a::after{ background:var(--zier); height:1px } .menue a[aria-current="page"]::after{ transform:none; background:var(--zier) } .kopf-rechts .knopf{ background:transparent; border:1px solid rgba(255,255,255,.45); color:#fff; font-size:.72rem; letter-spacing:.13em; padding-inline:clamp(16px,1.8vw,26px); min-height:44px; } .kopf-rechts .knopf::before{ background:#fff } .kopf-rechts .knopf:hover{ color:var(--dunkel); border-color:#fff } .kopf::after{ background:var(--zier) } /* ── Sprachwahl DE · IT · EN ─────────────────────────────────────────────── Sitzt IM Menü, nicht in `.kopf-rechts`. Grund steht weiter unten: unter 900 px ist `.kopf-rechts` ausgeblendet — dort wäre die Sprachwahl auf dem Handy unerreichbar, und von dort kommen rund 70 % der Gäste. ⚠️ Der Trennstrich hängt an `::before`. `::after` ist an dieser Stelle schon vergeben (Unterstrich der Menüpunkte) und würde still verschwinden. */ .sprachen{ display:flex; align-items:center; flex:none } .menue .sprachen a{ /* Breite gehoert dazu: Lighthouse mass am 16.09.2026 fuer "IT" nur 23 px und wertete das als zu kleines Tippziel — Barrierefreiheit 97 statt 100. Die Hoehe allein reicht nicht, gefordert sind 24 px in BEIDE Richtungen. */ padding-inline:.5em; min-height:44px; min-width:32px; justify-content:center; font-family:var(--schrift-text); font-size:.68rem; letter-spacing:.11em; text-transform:uppercase; color:rgba(255,255,255,.55); transition:color var(--t-kurz) var(--weich); } .menue .sprachen a::after{ display:none } .menue .sprachen a::before{ content:""; position:absolute; left:0; top:50%; margin-top:-6px; width:1px; height:12px; background:rgba(255,255,255,.25); } .menue .sprachen a:first-child::before{ display:none } .menue .sprachen a:hover{ color:#fff } .menue .sprachen a[aria-current]{ color:var(--zier) } @media (max-width:900px){ /* Im aufgeklappten Vollbildmenü: eigene Zeile, ruhiger als die Menüpunkte. Die Staffelung aus kern.js (--mi) gilt weiter, die Sprachwahl kommt also als letzte Gruppe herein. */ .sprachen{ margin-top:26px } .menue .sprachen a{ font-size:.82rem; letter-spacing:.16em; color:rgba(255,255,255,.6); /* 18.09.2026 am Geraet gemessen: die drei Kuerzel waren 32-35 px breit und stiessen ohne Luecke aneinander (Abstand 0). Lighthouse meldete nichts — der Daumen trifft trotzdem das Nachbarkuerzel. Im Menue ist Platz, also volle 44 px in beide Richtungen plus Abstand dazwischen. */ min-height:48px; min-width:44px; margin-inline:4px; } .menue .sprachen a::before{ height:14px; margin-top:-7px } .menue .sprachen a[aria-current]{ color:var(--zier) } } /* Unter 1080 px wird es in einer Zeile zu eng: die Mitte darf dann wandern. */ @media (max-width:1080px) and (min-width:901px){ .menue{ gap:clamp(10px,1.4vw,18px) } .menue a{ font-size:.7rem; letter-spacing:.09em } } /* Handy: Logo links, Burger rechts. Der Anfrage-Knopf entfällt hier, weil er unten in der festen Leiste ohnehin dauerhaft steht — zweimal dasselbe im Blick wäre nur Gedränge. ⚠️ Kein filter/transform auf einem Elternteil, sonst kippt position:fixed. */ @media (max-width:900px){ .kopf-links,.kopf-rechts{ flex:0 0 auto } .kopf-links{ flex:1 1 auto } .kopf-rechts{ display:none } /* Nur die Farben umstellen. Aufbau, Ausrichtung und Abstände des Vollbildmenüs kommen unangetastet aus kern.css. */ .menue{ background:var(--dunkel) } .menue a{ color:#fff } } /* ═══ 2 · Titelbild: Video, randlos, füllt den Bildschirm ═════════════════ Keine max-height. Die gab es vorher, und auf großen Bildschirmen endete das Video dadurch mitten auf der Seite statt unten. Jetzt füllt es immer die volle Höhe, egal wie hoch das Fenster ist. */ .buehne{ position:sticky; top:0; z-index:0; /* ⛔ 30.08.2026 — Jannik: „fixe, dass man auf der Startseite nicht direkt das Buchungsformular sieht." Gemessen: Das Titelbild war zwar 100svh hoch, wurde aber per `margin-top` um die Kopfzeilenhöhe nach OBEN gezogen — es endete also 66 px über dem unteren Fensterrand, und genau dort schob sich die Anfrageleiste ins Bild. Die Kopfzeilenhöhe muss deshalb wieder aufgeschlagen werden. Jetzt füllt das Titelbild den Bildschirm wirklich, und die Leiste kommt erst beim Scrollen. */ height:calc(100svh + var(--kopfhoehe,66px)); min-height:520px; overflow:hidden; background:var(--dunkel); margin-top:calc(-1 * var(--kopfhoehe,66px)); } /* ⛔ Alles nach dem Titel braucht eigenen Grund, sonst schimmert das Video durch. Genau dieser Fehler kostete beim Olympia-Entwurf Zeit. */ .nach-titel{ position:relative; z-index:1; background:var(--papier) } .buehne-video{ position:absolute; inset:0 } .buehne-video video, .buehne-video img{ width:100%; height:100%; object-fit:cover; display:block; } /* Zwei Verläufe: oben für die Kopfzeile, unten für Logo und Titel. Der untere trägt zusätzlich die Autos vom Parkplatz ins Dunkle. */ .buehne::after{ content:""; position:absolute; inset:0; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(10,10,11,.78) 0%, rgba(10,10,11,.22) 20%, rgba(10,10,11,.08) 42%, rgba(10,10,11,.88) 100%), linear-gradient(96deg, rgba(10,10,11,.6) 0%, rgba(10,10,11,.18) 46%, transparent 74%); } /* Im Titelbild steht nur der Schriftzug, jetzt MITTIG. David: „probier, es in der Mitte zu platzieren". Das weicht bewusst von der Hausregel „keine zentrierte Titelsektion" ab — auf seine ausdrückliche Ansage hin. Der Anflug im Video zielt frontal aufs Haus, dazu passt die Mitte besser als die linke Kante. */ .buehne-in{ position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; max-width:1680px; margin-inline:auto; padding:var(--kopfhoehe,66px) var(--rand) clamp(70px,10vh,110px); pointer-events:none; } /* Der Schriftzug tritt aus der Tiefe hervor: Er beginnt groß und unscharf, als läge er hinter dem Bild, und schiebt sich nach vorn, bis er scharf steht. Start erst nach einer halben Sekunde — vorher gehört das Bild allein dem Haus. */ /* ⛔ Hier stand eine Regel fuer `.buehne-marke` — eine Klasse, die es in KEINER Seite gibt. Der grosse Schriftzug auf der Startseite ist das Kopfzeilen-Logo, per transform:scale(4.6) in die Bildmitte geschoben (siehe weiter unten, `.startseite .kopf .marke`). Die tote Regel hat mich am 30.08.2026 eine Runde Fehlersuche gekostet: Ich habe den Logo-Schatten dorthin geschrieben und mich gewundert, dass nichts passiert. */ @keyframes marke-hervor{ from{ opacity:0; filter:blur(16px) drop-shadow(0 0 0 rgba(0,0,0,0)); transform:scale(1.22) } 60% { opacity:1 } to { opacity:1; filter:blur(0) var(--marke-schatten); transform:scale(1) } } /* ⛔ 30.08.2026 — Jannik dreimal: „das Logo passt nicht". Der Schriftzug ist formtreu (nachgemessen: 1,5 % Abweichung, symmetrisch verteilt) — er hatte nur KEINEN Schatten. Weiss auf einem Foto, in dem an genau dieser Stelle die helle Hausfassade steht: die Buchstaben verschwammen damit. Der Titeltext direkt darunter trägt längst einen Schatten, der Schriftzug nicht. ⚠️ Der Schriftzug auf der Startseite IST dieses Kopfzeilen-Logo, per `transform:scale(4.6)` in die Bildmitte geschoben. Der Schatten wird also MITSKALIERT — die Werte müssen entsprechend klein sein, sonst steht in der Bildmitte ein 40-px-Schlagschatten. Bei 4,6× werden aus 0,5/2/8 px hier rund 2/9/37 px, und das ist genau richtig. */ /* ⛔ 31.08.2026 — der drop-shadow lag auf dem BILD. Zusammen mit dem transform:scale() der Startseite zwingt das den Browser, die Grafik neu zu rastern; das Ergebnis ist sichtbar weicher als die Datei. Der Schatten sitzt jetzt auf dem Elternelement und lässt das Bild selbst unangetastet. Sichtbar ist der Unterschied genau da, wo es zählt: an den Haarlinien der Fraktur. */ .foto-stimmung .kopf .marke img, .kopf .marke img{ filter:none } .startseite .kopf:not(.fest) .marke{ filter: drop-shadow(0 .5px 1px rgba(0,0,0,.6)) drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 2px 8px rgba(0,0,0,.4)); } /* ⚠️ 30.08.2026, Janniks Screenshot: In der KLEINEN Kopfzeile (137 px) matschte der dreifache Schatten die feine Fraktur zu — sie wirkte rosa-verwaschen. Der große Schatten ist für den skalierten Zustand in der Bildmitte gebaut; sobald die Marke klein oben sitzt (.fest), reicht eine einzige feine Kante. */ .kopf.fest .marke{ filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55)) } /* Unterseiten haben keinen skalierten Zustand — dort ist die Marke immer klein. ⚠️ `.startseite` sitzt auf dem foto-stimmung-DIV, nicht am body — ein body:not(.startseite) hätte deshalb ÜBERALL gegriffen und der Startseite den großen Schatten genommen. */ .foto-stimmung:not(.startseite) .kopf .marke{ filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.55)) } .buehne-in h1{ color:#fff; margin:clamp(14px,2vw,24px) 0 0; max-width:20ch; font-size:clamp(1.5rem,3.4vw,2.6rem); line-height:1.12; font-weight:400; letter-spacing:-.018em; text-shadow:0 1px 2px rgba(0,0,0,.8), 0 2px 22px rgba(0,0,0,.45); animation:titel-herein 2.2s cubic-bezier(.19,1,.22,1) 2.1s backwards; } /* ⛔ Ohne Unschärfe — gleiche Regel wie beim übrigen Text (30.08.2026). Der fehlende Weichzeichner wird durch etwas mehr Weg ausgeglichen. */ @keyframes titel-herein{ from{ opacity:0; transform:translateY(24px) } to { opacity:1; transform:none } } .buehne-in h1 em{ font-style:normal; color:var(--akzent-hell) } /* Auch hier: bei „weniger Bewegung" nicht abschalten, nur weicher. */ @media not all{ .buehne-in h1{ animation-duration:1.7s; animation-delay:1.6s } } .bewegung-aus .buehne-in h1{ animation-duration:1.7s; animation-delay:1.6s } /* Bedienelemente über dem Video. Pflicht nach WCAG 2.2.2: Bewegung, die von allein startet und länger als 5 s läuft, muss anzuhalten sein. */ .video-halt{ /* Der Knopf ist NICHT dauerhaft sichtbar. Er stoerte unten links im Bild, und ein Bedienelement, das man nie braucht, gehoert nicht dauerhaft ins Titelbild. ⚠️ Ganz weglassen geht trotzdem nicht: Ein Video, das von allein startet und laenger als fuenf Sekunden laeuft, braucht eine sichtbare Halte-Moeglichkeit (WCAG 2.2.2) — und die Barrierefreiheitspflicht ist bei diesem Produkt das Verkaufsargument. Der Knopf erscheint deshalb, sobald jemand mit der Maus ueber das Titelbild faehrt oder mit der Tastatur dorthin gelangt. Damit ist er auffindbar, ohne im Weg zu sein. */ position:absolute; z-index:3; left:var(--rand); bottom:clamp(24px,4vh,40px); min-width:44px; min-height:44px; padding:0 16px; display:inline-flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.42); border-radius:999px; background:rgba(10,10,11,.55); color:#fff; cursor:pointer; font:600 .68rem/1 var(--schrift-text); letter-spacing:.11em; text-transform:uppercase; opacity:0; transform:translateY(8px); pointer-events:none; transition:opacity .35s var(--weich), transform .35s var(--aus), background var(--t-kurz) var(--weich); } .buehne:hover .video-halt, .video-halt:focus-visible, .buehne:focus-within .video-halt{ opacity:1; transform:none; pointer-events:auto; } /* Auf Geraeten ohne Maus gibt es kein Ueberfahren — dort bleibt der Knopf sichtbar, sonst waere er unerreichbar. */ @media (hover:none){ .video-halt{ opacity:.72; transform:none; pointer-events:auto } } .video-halt:hover{ background:rgba(34,19,23,.72); border-color:#fff } .video-halt b{ font-size:.8rem; line-height:1 } /* Hinweis zum Weiterscrollen. Bewusst STATISCH: Hier lief vorher ein Strich von oben nach unten durch, der über dem Video wie ein Abschneiden wirkte. Genau den hat David beanstandet. Jetzt steht die Linie einfach da. */ /* Steht auf derselben linken Kante wie der Schriftzug darüber, nicht am Fensterrand — sonst stehen die beiden um 95 px versetzt. */ .buehne-tiefer{ position:absolute; z-index:3; bottom:clamp(26px,4.5vh,44px); /* Echt mittig, nicht linksbuendig im Raster: Unten links steht jetzt der Halteknopf des Videos, dort wuerden sich beide ins Gehege kommen. */ left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:center; gap:13px; color:rgba(255,255,255,.72); pointer-events:none; font:600 .6rem/1 var(--schrift-text); letter-spacing:.2em; text-transform:uppercase; } .buehne-tiefer i{ display:block; width:54px; height:1px; background:linear-gradient(90deg, var(--zier), rgba(255,255,255,.25)); } @media (max-width:640px){ .buehne-tiefer{ display:none } } /* ═══ 2b · Textanimation nach Karte A-004 ════════════════════════════════ Zwei Typen, mehr erlaubt die Karte nicht auf einem Bildschirm: Zeichenlauf für die Rubrik, Unschärfe-Aufstieg für Überschrift UND Fließtext. Gestaffelt wie in der Orchestrierungstabelle der Karte: Rubrik zuerst, Überschrift 0,15 s später, Fließtext nach 0,35 s. Das SCROLLEN ist der Abspielkopf (`animation-timeline: view()`), nicht ein einmaliger Auslöser. Wer zurückscrollt, sieht denselben Stand wie vorher. Ohne diese Technik greift weiter unten der klassische Weg über eine Klasse. */ /* ⚠️ 30.08.2026 — komplett neu gebaut. Vorher zerfiel der Text in 191 Wörter und 111 Buchstaben, jedes Teil mit eigener Unschärfe. David: „unscharf und nicht flüssig." Gemessen mit echtem Mausrad war beides dieselbe Ursache: mit Unschärfe 20 zähe Bilder, 95% bei 25,1 ms, 235 Bilder ohne Unschärfe 2 zähe Bilder, 95% bei 16,7 ms, 355 Bilder ⛔ NIE WIEDER `filter:blur()` auf Textteilen. Blur ist der einzige Effekt hier, den die Grafikkarte nicht übernimmt — er wird pro Bild neu gerechnet, mal 191. Er macht die Schrift matschig UND bremst das Scrollen aus. Jetzt zwei Bewegungen, beide allein über `transform` und `opacity`: · Überschriften — ganze ZEILEN steigen hinter einer Kante hervor · Fließtext und Rubriken — blenden als ein Stück auf Das Scrollen ist der Abspielkopf (`animation-timeline: view()`), kein einmaliger Auslöser: Wer zurückscrollt, sieht denselben Stand wie vorher. */ /* ⚠️ 30.08.2026, zweite Runde. Zuerst stiegen die Zeilen hinter einer Kante hervor (`overflow:clip` + translateY(106%)). Technisch schön, aber David sah im Vorbeiscrollen eine halb durchgeschnittene Überschrift und schrieb: „ist unten abgeschnitten, sollte nicht abgeschnitten sein. So langsam reinfliegen, dass es smoother aussieht und edler." ⛔ Also keine Kante mehr. Die Zeile fliegt als Ganzes herein — sie ist in JEDEM Zwischenzustand vollständig lesbar, nur versetzt und noch blass. Die Staffelung von Zeile zu Zeile bleibt, sie macht die Ruhe aus. */ .zeile{ display:block } .zeile > i{ display:block; font-style:inherit } /* ── Weg 1: Der Scrollbalken treibt die Bewegung ─────────────────────────*/ @supports (animation-timeline: view()) { .zeile > i{ /* ⚠️ 31.08.2026 — Vorbild loewenhof.it (David geschickt). Dort sind es 100 px Weg auf dem ganzen Textblock. Bei uns waren es nur 13,9 px auf einer Zeile — die Bewegung war da, aber zu leise. ⛔ Nicht auf 100 px: Löwenhof bewegt einen Block, wir bewegen Zeilen einzeln; bei 100 px schöben sie sich sichtbar übereinander. 62 px ist das Maximum unter der Zeilenhöhe einer großen Überschrift. Kurve `ease` wie bei Löwenhof — gemessen war cubic-bezier(.16,.84,.34,1) zu steil (34→30→17→9→5, der halbe Weg in den ersten Pixeln, wirkt hektisch). */ opacity:0; transform:translateY(62px); animation:zeile-hoch ease both; animation-timeline:view(); /* ⚠️ Ende immer auf `cover`, nie auf `entry`: Die entry-Phase ist nur so lang, wie das Element HOCH ist (Überschrift ~130 px). Damit war die Bewegung nach 90 px Scrollweg vorbei — eine Mausrad-Rastung sind 100 px. `cover` misst Bildschirm + Element, rund 1000 px. Auf Wunsch von David deutlich länger als in der ersten Fassung: cover 24% → 44%. Das sind statt rund 250 px jetzt gut 450 px Scrollweg, also ungefähr das Doppelte. Langsam genug, dass man die Bewegung als Bewegung wahrnimmt und nicht als Sprung. */ /* David: „kommen sie zugleich hoch". Vorher lief jede Zeile 7 % später los — ein deutliches Nacheinander. Jetzt nur noch ein Hauch Versatz. */ animation-range:entry calc(3% + var(--zl,0) * 1.2%) cover calc(44% + var(--zl,0) * 1%); } @keyframes zeile-hoch{ to{ opacity:1; transform:none } } [data-block]{ opacity:0; transform:translateY(62px); /* ⚠️ 02.09.2026 — `ease` → `linear` und `entry` → `cover`, aus denselben zwei Gründen, die am 31.08. schon für [data-textblock] galten. Hier war es nur nicht mitgezogen worden, und die eigenständigen Blöcke (die, die NICHT in einem [data-textblock] stecken) behielten den Fehler: ⛔ `entry X%` ist bei hohen Blöcken die falsche Bezugsgröße — die entry-Phase ist so lang wie das Element hoch ist, die Animation war also durch, bevor der Block im Bild stand. ⛔ `ease` legt 80 % des Weges in die erste Hälfte. Bei einer scroll-gesteuerten Animation macht der Scrollbalken die Kurve, `linear` folgt ihm ehrlich. Gemessen ohne „weniger Bewegung": 5 von 21 Teilen standen bei JEDER Bildschirmlage auf Deckkraft 1 — man sah sie nie kommen. */ animation:block-ein linear both; animation-timeline:view(); animation-range:cover 8% cover 52%; } @keyframes block-ein{ to{ opacity:1; transform:none } } /* Die Rubrik steht über der Überschrift und kommt zuerst. */ .rubrik[data-block]{ animation-range:cover 6% cover 38% } /* ⚠️ Der letzte Abschnitt hat keinen Scrollweg mehr hinter sich. `view()` braucht ihn aber, sonst gilt die Animation sofort als abgelaufen — gemessen standen die vier Teile im Anfrage-Bereich fertig da, während sie noch 7200 px unter dem Rand warteten. Dort treibt die Zeit. */ .zeit-statt-scroll .zeile > i{ animation:none; opacity:0; transform:translateY(62px); transition:opacity 1.5s var(--aus), transform 1.5s var(--aus); transition-delay:calc(var(--zl,0) * 40ms); } .zeit-statt-scroll.text-an .zeile > i{ opacity:1; transform:none } [data-block].zeit-statt-scroll{ animation:none; opacity:0; transform:translateY(62px); transition:opacity 1.5s var(--aus), transform 1.5s var(--aus); } [data-block].zeit-statt-scroll.text-an{ opacity:1; transform:none } } /* ── Weg 2: Browser ohne Scroll-Zeitachse (heute vor allem Safari) ───────*/ @supports not (animation-timeline: view()) { .zeile > i{ opacity:0; transform:translateY(62px); transition:opacity 1.5s var(--aus), transform 1.5s var(--aus); transition-delay:calc(var(--zl,0) * 40ms); } .text-an .zeile > i{ opacity:1; transform:none } [data-block]{ opacity:0; transform:translateY(62px); transition:opacity 1.5s var(--aus), transform 1.5s var(--aus); } [data-block].text-an{ opacity:1; transform:none } .rubrik[data-block]{ transition-delay:0s } .fuehrung[data-block]{ transition-delay:.12s } } /* ⛔ Bei „weniger Bewegung" wird NICHT abgeschaltet. David hat die Einstellung dauerhaft an und sah deshalb wiederholt gar keine Animation. Die Zeilenmaske bleibt vollständig — sie bewegt nur `transform` und ist von sich aus ruhig. Nur das Aufblenden der Blöcke legt einen kürzeren Weg zurück. */ /* ⛔ Nicht abschalten, nur kürzen — David hat die Einstellung dauerhaft an. Aus 62 px werden 34 px: sichtbar, aber ruhiger. */ @media not all{ .zeile > i, [data-block]{ transform:translateY(34px) } } .bewegung-aus .zeile > i, .bewegung-aus [data-block]{ transform:translateY(34px) } /* ═══ 3 · Leit-Animation: Foto-Laufband ═══════════════════════════════════ Läuft endlos, hält beim Zeigen und beim Tastaturfokus an. */ /* Gebaut nach der Karte A-002 „Foto-Laufband" aus der Design-Bibliothek. Maske statt Verlaufsstreifen: blendet an jedem Untergrund sauber aus. */ .laufband{ overflow:hidden; padding-block:clamp(26px,3.4vw,46px); position:relative; -webkit-mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(to right,transparent,#000 7%,#000 93%,transparent); } .laufband-spur{ display:flex; gap:16px; width:max-content; animation:laufband 70s linear infinite; } .laufband:hover .laufband-spur, .laufband:focus-within .laufband-spur{ animation-play-state:paused } /* Läuft von LINKS nach RECHTS: Die Spur startet um die halbe Strecke versetzt und schiebt sich auf null zu. Weil die Fotoliste doppelt liegt, ist der Rücksprung genau dann unsichtbar. */ @keyframes laufband{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } } .laufband figure{ flex:none; width:clamp(224px,22vw,330px); margin:0; border-radius:calc(var(--radius) + 4px); overflow:hidden; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 18px 40px -26px rgba(0,0,0,.72), 0 8px 18px -14px rgba(0,0,0,.45); } .laufband img{ width:100%; aspect-ratio:3/2; object-fit:cover; display:block; filter:saturate(1.03) contrast(1.03); } /* ⛔ NICHT abschalten, nur verlangsamen. David hat „weniger Bewegung" dauerhaft gesetzt — mit `animation:none` sah er ein totes Standbild und fragte zu Recht, warum sich nichts bewegt. Die Hausregel und die Karte A-002 sagen beide: halbes Tempo, nie aus. */ .bewegung-aus .laufband-spur{ animation-duration:124s } @media not all{ .laufband-spur{ animation-duration:124s } } /* ═══ 4 · Zimmer: Umschalter ══════════════════════════════════════════════ */ .wahl{ display:flex; flex-wrap:wrap; gap:4px; padding:4px; background:var(--papier-2); border-radius:999px; margin-top:clamp(24px,3vw,38px); width:max-content; max-width:100%; } .wahl button{ min-height:44px; padding:0 19px; border:0; border-radius:999px; cursor:pointer; background:none; color:var(--tinte-2); font:600 .72rem/1 var(--schrift-text); letter-spacing:.09em; text-transform:uppercase; transition:background var(--t-kurz) var(--weich), color var(--t-kurz) var(--weich); } .wahl button{ color:var(--tinte-2) } .wahl button:hover{ background:rgba(245,242,237,.07); color:var(--tinte) } .wahl button[aria-selected="true"]{ background:var(--tat); color:var(--dunkel) } .fach{ display:none; margin-top:clamp(24px,3vw,38px) } .fach.an{ display:block; animation:fach-auf .5s var(--aus) } @keyframes fach-auf{ from{ opacity:0; transform:translateY(13px) } to{ opacity:1; transform:none } } @media not all{ .fach.an{ animation-duration:.18s } } /* Preiszeile in der Zimmerbeschreibung */ .preis{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin:20px 0 4px; padding-top:18px; border-top:1px solid var(--linie); } .preis b{ font:400 1.75rem/1 var(--schrift-titel); color:var(--akzent); font-variant-numeric:tabular-nums; } .band--dunkel .preis b{ color:var(--akzent-hell) } .preis span{ color:var(--leise); font-size:.86rem } .preis-hinweis{ color:var(--leise); font-size:.8rem; margin-top:2px } /* Merkmalsliste im Zimmer */ .merkmale{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:repeat(auto-fit,minmax(158px,1fr)); gap:7px 20px; } .merkmale li{ position:relative; padding-left:17px; font-size:.88rem; color:var(--tinte-2); } .merkmale li::before{ content:""; position:absolute; left:0; top:.55em; width:7px; height:1px; background:var(--zier); } .band--dunkel .merkmale li{ color:rgba(255,255,255,.86) } /* ═══ 4b · Preistafel: alle Kategorien auf einen Blick ════════════════════ Ersetzt den Umschalter mit sechs Reitern. Der zwang zum Klicken und zeigte nie zwei Preise nebeneinander. */ .preistafel{ margin-top:clamp(26px,3.2vw,42px); border:1px solid var(--linie); border-radius:var(--radius); overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 42px -30px rgba(0,0,0,.62); } .preiszeile{ display:grid; grid-template-columns:1.6fr .8fr 1.1fr .9fr .9fr; gap:14px; align-items:center; padding:16px clamp(14px,1.8vw,24px); border-bottom:1px solid var(--linie-fein); text-decoration:none; color:var(--tinte-2); min-height:56px; transition:background var(--t-kurz) var(--weich), transform var(--t-kurz) var(--weich); position:relative; } .preiszeile:last-child{ border-bottom:0 } .preiszeile::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:linear-gradient(180deg, transparent, var(--akzent), transparent); opacity:0; transition:opacity var(--t-kurz) var(--weich); } a.preiszeile:hover{ background:rgba(245,242,237,.05); transform:translateX(3px) } a.preiszeile:hover::before{ opacity:.85 } a.preiszeile:hover .preiszeile-name{ color:var(--akzent) } .preiszeile--kopf{ background:rgba(245,242,237,.04); font:600 .64rem/1 var(--schrift-text); letter-spacing:.14em; text-transform:uppercase; color:var(--leise); min-height:0; padding-block:12px; } .preiszeile-name{ font-family:var(--schrift-titel); font-size:1.06rem; color:var(--tinte); transition:color var(--t-kurz) var(--weich); } .preiszeile-wert{ font-size:.9rem; color:var(--leise) } .preiszeile-preis{ font-family:var(--schrift-titel); font-size:1.18rem; color:var(--akzent); font-variant-numeric:tabular-nums; } /* Unter 780 px wird aus jeder Zeile eine kleine Karte: Fünf Spalten sind auf einem Handy nicht lesbar. Die Spaltentitel wandern per data-Attribut vor den jeweiligen Wert, sonst stünden dort nackte Zahlen ohne Bezug. */ @media (max-width:780px){ .preiszeile--kopf{ display:none } /* Zwei Spalten statt einer: Größe und Belegung teilen sich eine Zeile, die beiden Preise ebenso. Einspaltig war jede Kategorie 192 px hoch, bei sechs Kategorien scrollt man dafür über tausend Pixel. */ .preiszeile{ grid-template-columns:1fr 1fr; gap:4px 14px; padding:16px clamp(14px,4vw,20px); } .preiszeile-name{ grid-column:1/-1; font-size:1.12rem; margin-bottom:2px } .preiszeile-wert::before,.preiszeile-preis::before{ content:attr(data-titel) ": "; color:var(--leise); font-family:var(--schrift-text); font-size:.78rem; letter-spacing:.02em; } .preiszeile-preis{ font-size:1rem } } /* ═══ Zimmer als gestapelte Karten (02.09.2026) ═══════════════════════════ Jede Karte bleibt beim Scrollen unter der Kopfzeile kleben, die naechste schiebt sich darueber — statt eines flachen Untereinander. ⛔ Zwei Fallen, die den Effekt lautlos toeten: 1. `position:sticky` wirkt NICHT, wenn ein Vorfahre `overflow` ausser `visible` hat. Deshalb steht der Stapel in einem eigenen Wrapper. 2. Alle Karten brauchen denselben `top`-Wert, sonst stapeln sie nicht buendig, sondern treppenfoermig. */ .kartenstapel{ --karte-oben: calc(var(--kopfhoehe,66px) + 18px); } .zimmerblock{ position:sticky; top:var(--karte-oben); background:var(--papier-3); border:1px solid var(--linie-fein); border-radius:calc(var(--radius) * 2); padding:clamp(22px,3vw,40px); margin-top:clamp(26px,3.4vw,48px); box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 -18px 40px -26px rgba(0,0,0,.85); /* ⛔ `clip` statt `hidden`: schneidet den Inhalt an der abgerundeten Kante ab (sonst ragt das Zimmerfoto der darunterliegenden Karte heraus), macht die Karte aber NICHT zum Scroll-Container — `hidden` wuerde das eigene `position:sticky` der Karte abschalten. */ overflow:clip; } .zimmerblock:first-of-type{ margin-top:clamp(30px,3.8vw,52px) } /* Der Fuss jeder Karte deckt die darunterliegende ab, sonst blitzen beim Uebereinanderschieben die Raender der vorigen Karte durch. */ .zimmerblock::after{ content:""; position:absolute; left:-1px; right:-1px; top:100%; height:clamp(26px,3.4vw,48px); background:var(--papier-2); } .zimmerblock:last-of-type::after{ display:none } /* Wer Bewegung reduziert hat, bekommt die ruhige Liste von vorher. */ @media not all{ .zimmerblock{ position:static; box-shadow:none } .zimmerblock::after{ display:none } } /* Auf sehr flachen Fenstern wuerde eine klebende Karte den halben Inhalt verdecken — dort bleibt es bei der einfachen Liste. 520px ist bewusst niedrig: bei 720px faellt schon ein normales Laptop-Fenster heraus. */ @media (max-height:520px){ .zimmerblock{ position:static } .zimmerblock::after{ display:none } } .zimmerblock h3{ font-size:clamp(1.3rem,2.4vw,1.9rem); margin:0 } .zimmerblock-eckdaten{ margin:8px 0 14px; color:var(--akzent); font:600 .72rem/1 var(--schrift-text); letter-spacing:.12em; text-transform:uppercase; } /* Beim Sprung aus der Preistafel nicht unter der Kopfzeile landen */ .zimmerblock{ scroll-margin-top:calc(var(--kopfhoehe,66px) + 24px) } /* Sprungziel der Webcam (aus der Fusszeile und von der Winterseite): dieselbe Regel wie beim Zimmerblock, sonst deckt die feste Kopfzeile die Ueberschrift zu. */ #webcam{ scroll-margin-top:calc(var(--kopfhoehe,66px) + 24px) } /* ═══ 5 · Zeitentafel (Wellness, Küche) ═══════════════════════════════════ */ .tafel{ border:1px solid var(--linie); border-radius:var(--radius); background:var(--papier-3); overflow:hidden; box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 14px 34px -24px rgba(0,0,0,.6); } .tafel-zeile{ display:grid; grid-template-columns:1fr auto; gap:14px; padding:15px clamp(16px,2vw,24px); border-bottom:1px solid var(--linie-fein); align-items:baseline; transition:background var(--t-kurz) var(--weich), transform var(--t-kurz) var(--weich); } .tafel-zeile:last-child{ border-bottom:0 } .tafel-zeile b{ font-weight:600; font-size:.94rem; color:var(--tinte) } .tafel-zeile span{ color:var(--akzent); font-weight:600; font-size:.94rem; font-variant-numeric:tabular-nums; text-align:right; } .tafel-zeile small{ display:block; color:var(--leise); font-size:.82rem; margin-top:3px; font-weight:400 } .band--dunkel .tafel{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.15) } .band--dunkel .tafel-zeile{ border-bottom-color:rgba(255,255,255,.09) } .band--dunkel .tafel-zeile b{ color:#fff } .band--dunkel .tafel-zeile span{ color:var(--akzent-hell) } .band--dunkel .tafel-zeile small{ color:rgba(255,255,255,.66) } .tafel-zeile:hover{ background:rgba(245,242,237,.04); transform:translateX(3px) } /* ═══ 6 · Karten für Themen (Sommer, Winter) ══════════════════════════════ */ .themen{ display:grid; gap:clamp(16px,2vw,26px); /* 340 statt 255: bei 255 passten auf 1440 px VIER Kacheln nebeneinander, jede nur 253 px breit — der Fliesstext brach dann auf 20 Zeichen je Zeile um. Guter Lesefluss liegt bei 45–75. Mit 340 sind es hoechstens drei, die Zeile wird rund doppelt so lang. Gemessen 15.09.2026. */ grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); margin-top:clamp(26px,3.4vw,42px); } .thema{ background:var(--papier-3); border:1px solid var(--linie); border-radius:var(--radius); padding:clamp(22px,2.6vw,32px); position:relative; box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 14px 34px -26px rgba(0,0,0,.55); } .thema h3{ font-size:1.24rem; margin:0 0 9px } .thema p{ margin:0; color:var(--tinte-2); font-size:.94rem } .thema .zahl-gross{ font:400 .74rem/1 var(--schrift-text); letter-spacing:.16em; text-transform:uppercase; color:var(--akzent); display:block; margin-bottom:13px; } .band--dunkel .thema{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14) } .band--dunkel .thema h3{ color:#fff } .band--dunkel .thema p{ color:rgba(255,255,255,.84) } .band--dunkel .thema .zahl-gross{ color:var(--akzent-hell) } /* ═══ 7 · Anfrage ═════════════════════════════════════════════════════════ Das Haus hat kein Buchungssystem — jede Anfrage geht als Nachricht ans Haus. Nirgends „buchen" versprechen, was nicht buchbar ist. */ .formular{ display:grid; gap:16px; grid-template-columns:repeat(2,1fr); margin-top:clamp(24px,3vw,36px); } .formular .feld--voll{ grid-column:1/-1 } @media (max-width:680px){ .formular{ grid-template-columns:1fr } } .feld{ display:flex; flex-direction:column; gap:5px; background:var(--papier-3); border:1px solid var(--linie); border-radius:var(--radius); padding:11px 15px; min-height:64px; justify-content:center; cursor:text; transition:border-color var(--t-kurz) var(--weich), box-shadow var(--t-kurz) var(--weich); } .feld:focus-within{ border-color:var(--akzent); box-shadow:0 0 0 3px rgba(197,130,151,.22) } .feld > span{ font:600 .66rem/1 var(--schrift-text); letter-spacing:.13em; text-transform:uppercase; color:var(--leise); } .feld input,.feld select,.feld textarea{ border:0; background:none; padding:0; width:100%; color:var(--tinte); font:400 1rem/1.45 var(--schrift-text); } .feld input:focus,.feld select:focus,.feld textarea:focus{ outline:none } .feld textarea{ resize:vertical; min-height:104px } .formular-fuss{ grid-column:1/-1; display:flex; flex-wrap:wrap; gap:16px; align-items:center; justify-content:space-between; margin-top:4px; } .formular-fuss p{ margin:0; color:var(--leise); font-size:.82rem; max-width:48ch } /* Platz für Googles „Ich bin kein Roboter“ (304 × 78 px), damit beim Nachladen nichts springt. Ab 340 px schmal wird er verkleinert statt abgeschnitten. */ .roboter{ min-height:78px } @media (max-width:360px){ .roboter{ transform:scale(.88); transform-origin:left top } } /* ═══ 7b · Anfrage-Abschnitt auf der Startseite ═══════════════════════════ Der Abschluss der Seite. Weinrot liegt als sehr flacher Schimmer darunter, damit dieser Abschnitt sich von den übrigen Bändern abhebt, ohne laut zu werden — Farbe als Fläche, nie als Text. */ .anfrage-band{ /* ⚠️ 30.08.2026 — hier stand `overflow:hidden`. Das macht aus dem Band einen eigenen Scrollbereich, und `animation-timeline: view()` bezieht sich dann auf DIESES Band statt auf das Fenster. Darin ist jeder Text immer vollständig sichtbar, also galt seine Animation sofort als abgelaufen: Rubrik, beide Titelzeilen und der Fließtext standen fertig da, während sie noch 7200 px unter dem Rand warteten. `clip` schneidet die Farbverläufe genauso ab, ohne Scrollbereich. */ position:relative; overflow:clip; background: linear-gradient(180deg, rgba(255,255,255,.02) 0%, transparent 12%, transparent 100%), radial-gradient(120% 90% at 12% 0%, rgba(95,31,48,.55) 0%, transparent 62%), radial-gradient(90% 80% at 92% 100%, rgba(95,31,48,.3) 0%, transparent 60%), var(--papier-2); } .anfrage-band::before{ content:""; position:absolute; left:0; right:0; top:0; height:1px; background:linear-gradient(90deg, transparent, var(--akzent), transparent); opacity:.5; } .anfrage-kopf{ max-width:56ch } .anfrage-kopf h2{ font-size:clamp(2rem,5vw,4rem); line-height:1.04 } /* Kein Kasten um das Formular. Der erste Entwurf stellt die Felder direkt auf die Fläche, und genau dieser Aufbau soll bleiben. */ .anfrage-kasten{ margin-top:clamp(28px,3.6vw,46px) } .anfrage-kasten .formular{ margin-top:0; gap:clamp(18px,2.2vw,28px) clamp(20px,2.4vw,32px) } .anfrage-fuss{ margin-top:clamp(20px,2.4vw,30px); color:var(--leise); font-size:.9rem; } .anfrage-fuss a{ color:var(--akzent); text-decoration:none; border-bottom:1px solid transparent } .anfrage-fuss a:hover{ border-bottom-color:var(--akzent) } /* Die Rückmeldung nach dem Absenden */ .meldung{ margin:0; padding:18px 20px; border-left:2px solid var(--akzent); background:rgba(197,130,151,.12); background:color-mix(in srgb, var(--akzent) 12%, transparent); color:var(--tinte-2); border-radius:0 var(--radius) var(--radius) 0; } .meldung strong{ color:var(--tinte) } /* ═══ 7c · Schnellanfrage direkt unter dem Titelbild ══════════════════════ Vier Felder und ein Knopf in einer Zeile, wie im ersten Entwurf. Sie verschickt nichts, sondern füllt das große Formular weiter unten. */ .schnellanfrage{ background:var(--papier-2); border-bottom:1px solid var(--linie); position:relative; z-index:2; box-shadow:0 14px 34px -28px rgba(0,0,0,.72); } .schnellanfrage-in{ max-width:var(--breite); margin-inline:auto; padding:clamp(14px,1.8vw,22px) var(--rand); display:grid; gap:clamp(14px,1.8vw,26px); grid-template-columns:repeat(4, minmax(0, 1fr)) auto; align-items:end; } .schnellanfrage .feld{ background:none; border:0; border-bottom:1px solid var(--linie); border-radius:0; padding:0 0 8px; min-height:0; gap:7px; transition:border-color var(--t-kurz) var(--weich), transform var(--t-kurz) var(--weich); } .schnellanfrage .feld:focus-within{ border-bottom-color:var(--akzent); box-shadow:none; } .schnellanfrage .feld > span{ color:var(--akzent); font-size:.62rem; letter-spacing:.16em } .schnellanfrage .feld input, .schnellanfrage .feld select{ font-size:.98rem; min-height:28px } .schnellanfrage .knopf{ min-height:46px; white-space:nowrap } .schnellanfrage .knopf:hover{ transform:translateY(-1px) } /* Ab hier bricht die Zeile: erst der Knopf unter die Felder, dann zwei Spalten, am Ende eine. Vier Felder nebeneinander sind unter 1000 px nicht mehr lesbar. */ @media (max-width:1000px){ .schnellanfrage-in{ grid-template-columns:repeat(2, minmax(0,1fr)) } .schnellanfrage .knopf{ grid-column:1/-1; width:100% } } /* Auf dem Handy bleiben zwei Spalten: Anreise neben Abreise, Personen neben Verpflegung. Einspaltig war die Leiste 355 px hoch und nahm damit fast den halben Bildschirm, bevor der erste Inhalt kam. */ @media (max-width:560px){ .schnellanfrage-in{ grid-template-columns:1fr 1fr; gap:14px 12px; padding-block:14px; } .schnellanfrage .feld > span{ font-size:.58rem; letter-spacing:.12em } .schnellanfrage .feld input, .schnellanfrage .feld select{ font-size:.92rem } } /* Die feste Anfrageleiste am unteren Rand */ .leiste{ position:fixed; left:0; right:0; bottom:0; z-index:70; /* Rueckfall zuerst — ohne ihn ist die feste Leiste auf aelteren Browsern durchsichtig und der Seiteninhalt laeuft hindurch. */ background:rgba(8,8,10,.95); background:color-mix(in srgb, var(--dunkel) 95%, transparent); -webkit-backdrop-filter:blur(15px); backdrop-filter:blur(15px); border-top:1px solid rgba(255,255,255,.13); transform:translateY(102%); transition:transform .55s var(--aus); } .ab-titel .leiste{ transform:none } .leiste-in{ max-width:var(--breite); margin-inline:auto; padding:9px var(--rand); display:flex; gap:16px; align-items:center; justify-content:space-between; flex-wrap:wrap; } .leiste-text{ color:#fff; font-size:.92rem; display:flex; align-items:baseline; gap:10px; flex-wrap:wrap } .leiste-text b{ font:400 1.05rem/1 var(--schrift-titel) } .leiste-text span{ color:rgba(255,255,255,.72); font-size:.83rem } .leiste-knoepfe{ display:flex; gap:9px; flex-wrap:wrap } .leiste .knopf{ background:var(--tat-hell); border-color:var(--tat-hell); color:var(--dunkel) } .leiste .knopf::before{ background:#fff } .leiste .knopf--leise{ background:transparent; border-color:rgba(255,255,255,.45); color:#fff } /* Auf dem Handy nimmt die Leiste sonst ein Fünftel des Bildschirms weg. Dort bleiben nur die beiden Knöpfe, nebeneinander in einer Zeile. */ @media (max-width:620px){ .leiste-text{ display:none } .leiste-in{ gap:8px; padding:8px var(--rand) } .leiste-knoepfe{ width:100%; gap:8px; flex-wrap:nowrap } .leiste-knoepfe .knopf{ flex:1; padding-inline:12px; justify-content:center; text-align:center } } /* Das Schließkreuz der Entwurfsmarke war nur 32 px groß — zu klein zum Treffen. Die Fläche wächst, das Kreuz bleibt optisch gleich. */ .entwurf-zu{ min-width:44px; min-height:44px } /* ═══ 8 · Fußzeile ════════════════════════════════════════════════════════ */ .fuss .marke img{ height:34px; width:auto; display:block; margin-bottom:14px } .fuss a:hover{ color:var(--akzent-hell) } /* ═══ 9 · Kleinigkeiten ═══════════════════════════════════════════════════ */ /* Bildunterschrift unter Vorhang-Bildern */ .bild-notiz{ margin:9px 0 0; font-size:.79rem; color:var(--leise); letter-spacing:.01em; } .band--dunkel .bild-notiz{ color:rgba(255,255,255,.62) } /* Hinweiskasten (z. B. „Montag Ruhetag") */ .hinweis{ border-left:2px solid var(--zier); padding:3px 0 3px 18px; margin:24px 0 0; color:var(--tinte-2); font-size:.93rem; } .band--dunkel .hinweis{ color:rgba(255,255,255,.84) } /* Seitenkopf der Unterseiten: kein Video, aber ein ruhiges Bild */ .aufmacher{ /* ⚠️ `clip` statt `hidden` — sonst wird der Aufmacher zum eigenen Scrollbereich und sperrt die Textanimation der Unterseiten ein (siehe .anfrage-band). Schneidet das wandernde Foto genauso ab. */ position:relative; overflow:clip; background:var(--dunkel); margin-top:calc(-1 * var(--kopfhoehe,66px)); /* 30.08.2026 — von 520 px auf 700 px. Der Aufmacher war der flachste Teil der Seite: ein Streifen, in dem das Foto kaum vorkam. Auf der Startseite steht ein Titelbild über die ganze Höhe, auf den Unterseiten ein Band von zwei Handbreit — der Bruch war deutlich zu sehen. */ min-height:clamp(440px,72vh,700px); display:flex; align-items:flex-end; box-shadow:0 24px 60px -44px rgba(0,0,0,.85); } .aufmacher img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.05); animation:aufmacher-ruhig 22s var(--aus) forwards; } @keyframes aufmacher-ruhig{ to{ transform:scale(1) } } @media not all{ .aufmacher img{ animation-duration:8s } } /* ⚠️ Oben deutlich dunkler als früher. Die Aufmacher sind teils sehr helle Bilder — das Zimmerfoto mit hellem Holz und weißer Bettwäsche ließ die weiße Kopfzeile darin verschwinden. Ein Verlauf muss den schlimmsten Fall tragen, nicht den durchschnittlichen. */ /* ZWEI Verläufe, nicht einer. Der senkrechte allein reichte nicht: Bei 40 % Höhe war er nur zu einem Viertel deckend, und genau dort steht der Text. Auf dem sonnigen Winterbild war „Dezember bis April" praktisch unlesbar. Jetzt kommt ein zweiter Verlauf von links dazu, der die Textspalte trägt, egal wie hell das Foto ist. */ .aufmacher::after{ content:""; position:absolute; inset:0; background: linear-gradient(180deg, rgba(10,10,11,.9) 0%, rgba(10,10,11,.48) 15%, rgba(10,10,11,.2) 34%, rgba(10,10,11,.34) 52%, rgba(10,10,11,.74) 74%, rgba(10,10,11,.94) 100%), linear-gradient(100deg, rgba(10,10,11,.82) 0%, rgba(10,10,11,.55) 34%, rgba(10,10,11,.12) 62%, transparent 82%); } .aufmacher-in{ position:relative; z-index:2; max-width:var(--breite); margin-inline:auto; width:100%; padding:0 var(--rand) clamp(38px,5.5vh,64px); padding-top:calc(var(--kopfhoehe,66px) + 40px); } /* Schatten zusätzlich zum Verlauf. Ein Verlauf allein kann einen Sonnenfleck im Foto nicht abfangen; ein kurzer harter Schatten plus schwacher Hof trägt die Schrift auch dort. Die Rubrik steht jetzt voll deckend statt auf 90 % und etwas kräftiger — sie war das Erste, was unlesbar wurde. */ .aufmacher-in h1{ color:#fff; margin:0; max-width:17ch; font-size:clamp(2.1rem,6vw,4.5rem); line-height:1.02; text-shadow:0 1px 2px rgba(0,0,0,.75), 0 3px 26px rgba(0,0,0,.5); } .aufmacher-in .rubrik{ color:#fff; opacity:1; font-weight:600; text-shadow:0 1px 2px rgba(0,0,0,.85), 0 2px 14px rgba(0,0,0,.55); } .aufmacher-in p{ color:#fff; max-width:52ch; margin:14px 0 0; text-shadow:0 1px 2px rgba(0,0,0,.8), 0 2px 18px rgba(0,0,0,.5); } .aufmacher-in .krumen{ text-shadow:0 1px 2px rgba(0,0,0,.8) } .aufmacher-in h1,.aufmacher-in .rubrik,.aufmacher-in p{ text-shadow:0 1px 2px rgba(20,10,12,.8), 0 2px 18px rgba(20,10,12,.45); } /* Brotkrumen */ .krumen{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; font-size:.78rem; color:var(--leise); margin:0 0 6px; } .krumen a{ color:var(--leise); text-decoration:none; border-bottom:1px solid transparent } /* Am Handy ein volles Tippziel: der Krumenlink "Haus" war 28x21 px. inline-flex + min-height vergroessert die Trefferflaeche, ohne dass sich die Zeile sichtbar veraendert. Gemessen 17.09.2026. */ @media (max-width:760px){ .krumen a{ display:inline-flex; align-items:center; min-height:44px; min-width:44px; justify-content:center } } .krumen a:hover{ color:var(--akzent); border-bottom-color:var(--akzent) } .krumen i{ font-style:normal; opacity:.5 } /* Entwurfsmarke — muss im Pitch klar sagen, was das hier ist */ .entwurf{ border-left:2px solid var(--zier) } /* ═══ 12 · Feste Knöpfe unten ausblenden ══════════════════════════════════ kern.css setzt zwei Elemente fest an den unteren Rand: den Bewegungs- Schalter rechts (`.schalter`) und die Entwurfsmarke links (`.entwurf`). Der Schalter sitzt exakt dort, wo auch die digitale Rezeptionistin steht, und schaut hinter ihr hervor. David hat beide weg haben wollen. ⚠️ Nur die KNÖPFE verschwinden, nicht die Funktion: `prefers-reduced-motion` wird weiterhin ausgewertet, kern.js setzt `bewegung-aus` unverändert. Wer die Systemeinstellung gesetzt hat, bekommt also nach wie vor die ruhigere Fassung — nur eben ohne sichtbaren Umschalter. Rückbau: diese beiden Regeln löschen. */ .schalter{ display:none } .entwurf{ display:none } /* ═══ 13 · Typografie nach Karte R-004 ═══════════════════════════════════ Gemessen an drei ausgezeichneten Südtiroler Häusern: Das teuerste davon setzt seine Überschrift auf 106 px und kommt dabei mit neun bewegten Elementen aus. Die Karte warnt vor der Mitte — mittelgroße Schrift plus mittelviele Effekte ergibt eine Seite, die nach nichts aussieht. Wir gehen die Richtung „große Type, ruhige Bewegung". */ .band h2{ font-size:clamp(1.9rem,4.8vw,3.9rem); line-height:1.06; letter-spacing:-.022em; max-width:19ch; } /* ⛔ `ch` misst die Breite der ZIFFER NULL, nicht das Durchschnittszeichen. Gemessen am 03.09.2026: 1ch = 10,9 px, ein mittleres Zeichen 8,2 px — ein Faktor von 1,33. Aus `58ch` wurden dadurch 112 echte Zeichen je Zeile, lesbar sind 60 bis 75. Deshalb hier 50ch für rund 68 Zeichen. */ .band .fuehrung{ font-size:clamp(1rem,1.25vw,1.18rem); line-height:1.62; max-width:50ch } /* Mehr Luft zwischen den Bändern. Weißraum ist bei allen drei gemessenen Häusern der zweite Träger der Wirkung. */ .band{ padding-block:clamp(58px,8.5vw,132px) } /* ═══ 14 · Bildanimation: Fotos wandern im Rahmen ════════════════════════ Jedes Foto sitzt etwas größer im Rahmen, als der Rahmen ist, und wandert beim Scrollen wenige Prozent durch ihn hindurch. Der Rahmen selbst bleibt stehen. Das ist derselbe Tiefeneindruck wie beim stehenden Titelbild, nur auf Fotogröße — und es erklärt, warum die Karte A-003 (Parallax mit gsap und Lenis, zusammen rund 80 KB) hier nicht gebraucht wird. Umgesetzt mit `animation-timeline: view()`: Der Scrollbalken ist der Abspielkopf, kein JavaScript beteiligt, läuft im Compositor. Browser ohne diese Technik zeigen das Foto einfach still — deshalb steht alles in einem @supports-Block und nichts hängt davon ab. */ @supports (animation-timeline: view()) { .geteilt-bild img, .kachel img, .aufmacher img{ animation:foto-wandert linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; } @keyframes foto-wandert{ from{ transform:scale(1.14) translate3d(0,-2.6%,0) } to { transform:scale(1.14) translate3d(0, 2.6%,0) } } /* Der Aufmacher steht schon beim Laden im Bild und hat seinen eigenen, langsamen Zoom. Ihn zusätzlich wandern zu lassen wäre zu viel. */ .aufmacher img{ animation-range:cover 0% cover 100% } @media not all{ /* Nicht abschalten, nur halbieren — Hausregel. */ @keyframes foto-wandert{ from{ transform:scale(1.07) translate3d(0,-1.2%,0) } to { transform:scale(1.07) translate3d(0, 1.2%,0) } } } /* ⚠️ Der Vorhang setzt beim Erscheinen ebenfalls ein `transform` auf dasselbe Bild. Zwei Regeln auf einer Eigenschaft: die spätere gewinnt, die Wanderung würde den Zoom überschreiben und umgekehrt. Deshalb hier der Zoom auf dem RAHMEN statt auf dem Bild. */ .vorhang img{ transform:none; transition:none } .vorhang{ overflow:hidden } .vorhang.in{ transform:none } } /* ═══ 15 · Der Schriftzug fliegt aus der Bildmitte in die Ecke ═══════════ Solange das Video läuft, steht der Schriftzug NICHT oben in der Kopfzeile, sondern gross in der MITTE DES BILDES, und hebt sich beim Laden von unten herauf. Darunter der Satz. Erst beim Scrollen fliegt er nach oben links auf seinen Platz in der Kopfzeile, schrumpft dabei, und das Menü kommt herauf. Zwei Bewegungen auf einem Element gingen nicht: Das Hereinheben beim Laden und das Fliegen beim Scrollen würden sich dieselbe `transform` teilen und gegenseitig überschreiben. Deshalb trägt der LINK die Flugbahn und das BILD darin das Hereinheben. Zwei Ebenen, zwei Aufgaben. Die Rechnung: Der Schriftzug sitzt in Ruhe oben links am Seitenrand, seine Mitte auf halber Kopfzeilenhöhe. Um ihn in die Bildmitte zu schieben, braucht es waagrecht 50vw minus Seitenrand minus die halbe vergrösserte Breite, senkrecht 44vh minus die halbe Kopfzeilenhöhe. 44 statt 50, damit der Satz darunter Platz hat. */ /* ⛔ 31.10.2026, Janniks Befund „das Logo springt am Ende nochmal". Die Flugbahn stand als `- 130%` (Handy `- 105%`) da, also in Prozent der Logobreite. Beim Flug in die Mitte wächst das Bild aber gleichzeitig von der kleinen auf die große Höhe (34 → 43 px). Safari rechnet die Bahn einmal mit der kleinen Breite vor, fliegt ~35 px zu weit nach rechts und springt am Ende auf den richtigen Platz. Gefilmt im sichtbaren Safari. Jetzt fest aus der ENDhöhe gerechnet: Breite = Höhe × 5136/1545 (viewBox der Wortmarke) = Höhe × 3,3243. 130 % davon = × 4,3216, 105 % = × 3,4905. ⚠️ Wird die Wortmarke getauscht oder die Höhe oben geändert, hier mitziehen. */ :root{ --marke-weg-gross:calc(clamp(33px,3.03vw,43px) * 4.3216); --marke-weg-klein:calc(clamp(33px,3.03vw,43px) * 3.4905); } @media (min-width:901px){ .startseite .kopf .marke{ transform-origin:left center; /* ⛔⛔ 31.08.2026 — von 4,6 auf 2,6. Die Logo-Quelle hat 322 px echte Bildinformation (mehr existiert nirgends: Website, Internet Archive, alte Fassung, Facebook — alles abgesucht). Bei 4,6× wurde der Schriftzug 1002 CSS-Pixel breit, auf Retina also 2004 echte Pixel aus 322 px Vorlage: SECHSFACHE Vergrößerung. Kein Nachzeichnen und keine größere Datei rettet das, die Information ist nicht da. Bei 2,6× sind es 566 CSS-Pixel — das trägt die Quelle. */ transform:translate(calc(50vw - var(--rand) - var(--marke-weg-gross)), calc(44vh - var(--kopfhoehe,66px) / 2 - .6em)) scale(2.6); transition:transform 1.1s cubic-bezier(.19,1,.22,1); will-change:transform; } /* ⛔⛔ 17.09.2026, Janniks Befund „das Logo versetzt sich beim Hochscrollen". Er will die Bewegung BEHALTEN — sie soll nur ruhig in die Mitte gleiten statt zu springen. (Mein erster Versuch blendete sie ein; das war das Gegenteil von dem, was er meinte.) Gemessen, warum sie sprang: `scroll-behavior:smooth` (kern.css) laesst scrollY erst nach ~269 ms unter die Schaltschwelle 40 fallen. Bis dahin steht die Marke oben links, dann faellt `.fest` weg und sie legt die ganze Strecke in der Restzeit zurueck — bei 1,1 s mit stark bremsender Kurve heisst das: erst nichts, dann ueber 200 px je Bild. Zwei Stellschrauben, beide noetig: 1. LAENGER (1,8 s) — mehr Zeit fuer dieselbe Strecke, also weniger Weg je Bild. Der Start ist ohnehin schon verzoegert, das faellt nicht auf. 2. GLEICHMAESSIGERE Kurve. cubic-bezier(.19,1,.22,1) schiesst vorn los und bremst hart; (.33,0,.2,1) verteilt den Weg ueber die ganze Dauer. → [[logo-flug-wartet-auf-smooth-scroll]] */ .startseite .kopf:not(.fest) .marke{ transition:transform 1.8s cubic-bezier(.33,0,.2,1); } @media not all{ .startseite .kopf .marke{ transition:none } } .startseite .kopf.fest .marke{ transform:none } /* Das Hereinheben beim Laden — auf dem Bild, nicht auf dem Link. */ .startseite .kopf .marke img{ animation:marke-hebt 2.6s cubic-bezier(.19,1,.22,1) .55s backwards; } @keyframes marke-hebt{ from{ opacity:0; transform:translateY(38px) } to { opacity:1; transform:none } } /* Das Menü ist oben nicht da und kommt beim Scrollen herauf. `visibility` nimmt es solange aus der Tastaturreihenfolge; wer dennoch dorthin tabbt, macht es über :focus-within sichtbar. */ .startseite .kopf .menue{ opacity:0; visibility:hidden; transform:translateY(10px); transition:opacity .55s var(--aus), transform .7s cubic-bezier(.19,1,.22,1), visibility .55s; transition-delay:.18s; } .startseite .kopf.fest .menue, .startseite .kopf:focus-within .menue{ opacity:1; visibility:visible; transform:none } .startseite .kopf .menue a{ opacity:0; transform:translateY(8px); transition:opacity .5s var(--aus), transform .6s cubic-bezier(.19,1,.22,1); } .startseite .kopf.fest .menue a, .startseite .kopf:focus-within .menue a{ opacity:1; transform:none } .startseite .kopf .menue a:nth-child(1){ transition-delay:.22s } .startseite .kopf .menue a:nth-child(2){ transition-delay:.28s } .startseite .kopf .menue a:nth-child(3){ transition-delay:.34s } .startseite .kopf .menue a:nth-child(4){ transition-delay:.40s } .startseite .kopf .menue a:nth-child(5){ transition-delay:.46s } .startseite .kopf .menue a:nth-child(6){ transition-delay:.52s } .startseite .kopf .menue a:nth-child(7){ transition-delay:.58s } /* Der Satz rückt unter den Schriftzug, damit sich beide nicht überlagern. Sobald gescrollt wird, ist der Schriftzug ohnehin oben — dann darf der Satz zurück in die Mitte. */ .startseite .buehne-in{ padding-top:calc(var(--kopfhoehe,66px) + 26vh) } } /* Am Handy derselbe Weg, nur kürzer und weniger gross: Neben dem Burger ist kein Platz für einen dreifach vergrösserten Schriftzug. */ @media (max-width:900px){ .startseite .kopf .marke{ transform-origin:left center; transform:translate(calc(50vw - var(--rand) - var(--marke-weg-klein)), calc(42vh - var(--kopfhoehe,66px) / 2 - .55em)) scale(2.1); transition:transform .95s cubic-bezier(.19,1,.22,1); } .startseite .kopf.fest .marke{ transform:none } .startseite .kopf .marke img{ animation:marke-hebt 2.2s cubic-bezier(.19,1,.22,1) .45s backwards; } @keyframes marke-hebt{ from{ opacity:0; transform:translateY(28px) } to { opacity:1; transform:none } } .startseite .buehne-in{ padding-top:calc(var(--kopfhoehe,66px) + 24vh) } } /* ⚠️ Der Schriftzug ragt weit aus der Kopfzeile heraus. Ein `overflow:hidden` auf ihr würde ihn abschneiden — und ein `filter` oder `transform` auf ihr würde ihn an sie fesseln. Beides hier ausdrücklich ausgeschlossen. */ .kopf{ overflow:visible } /* Ohne Skript keine Klasse `.fest` — dann bliebe der Schriftzug für immer in der Bildmitte und das Menü unerreichbar. Deshalb setzt ein Einzeiler im Kopf sofort `hat-js`; ohne die Klasse gilt der normale Zustand. */ html:not(.hat-js) .startseite .kopf .marke{ transform:none } html:not(.hat-js) .startseite .kopf .marke img{ animation:none } html:not(.hat-js) .startseite .kopf .menue{ opacity:1; visibility:visible; transform:none } html:not(.hat-js) .startseite .kopf .menue a{ opacity:1; transform:none } html:not(.hat-js) .startseite .buehne-in{ padding-top:var(--kopfhoehe,66px) } @media not all{ .kopf .marke{ transition-duration:.7s } .kopf .marke img{ animation-duration:1.6s } .kopf .menue,.kopf .menue a{ transition-duration:.35s } } /* ═══ 16 · Textsatz: Luft zwischen den Rollen ════════════════════════════ Gemessen am 29.08.2026 im fertigen Entwurf: Überschrift → Fließtext: 0 px Stichpunkte → Knopf: 4 px Damit klebte alles aneinander, und David hat es zu Recht als zusammengequetscht bezeichnet. Der Maßstab kommt aus Karte R-004: Bei den gemessenen Spitzenhäusern trägt der Weißraum genauso viel wie die Schrift. Die Abstände wachsen hier mit der Schriftgröße, nicht mit dem Bildschirm — ein Titel in 62 px braucht mehr Luft unter sich als einer in 30 px. */ .band h2{ margin:0 0 clamp(22px, 0.52em, 46px); } .band .rubrik{ margin-bottom:clamp(14px, 1.6vw, 22px) } .band .fuehrung{ margin-top:0 } /* Die Aufzählung ist eine eigene Rolle und braucht eine eigene Zäsur. */ .band .beweise{ margin-top:clamp(28px, 3.2vw, 44px) } .band .beweise li + li{ margin-top:clamp(9px, 1vw, 14px) } /* Der Knopf schließt den Block ab und steht dafür frei. */ .band .knopf, .band .knopf--leise{ margin-top:clamp(30px, 3.6vw, 48px) } .band p:has(> .knopf){ margin-top:0 } /* Überschriften bleiben bei höchstens drei Zeilen lesbar. Bei 62 px und 19 Zeichen je Zeile heißt das rund 55 Zeichen — längere Titel werden gekürzt, nicht kleiner gesetzt. */ .band h2{ max-width:17ch } .geteilt h2{ max-width:15ch } /* Der Fließtext liegt bei 52 Zeichen je Zeile und damit im guten Bereich (45 bis 75). Nur die Zeilen dürfen etwas luftiger stehen. */ .band .fuehrung{ line-height:1.68 } /* ═══ 17 · Dezente Bewegung für Aufzählung und Knopf ═════════════════════ Die Stichpunkte kommen einzeln nach, während gescrollt wird — dieselbe Sprache wie bei den Überschriften, nur noch leiser: kein Weichzeichner, nur ein kurzer Weg. Der Knopf folgt zuletzt. ⛔ Preise, Tafeln und Öffnungszeiten bleiben unbewegt (Karte A-004). */ @supports (animation-timeline: view()) { .band .beweise li{ opacity:0; transform:translateY(9px); animation:punkt-herein linear both; animation-timeline:view(); animation-range:entry calc(8% + var(--p, 0) * 3%) cover calc(26% + var(--p, 0) * 2.4%); } .band .beweise li:nth-child(1){ --p:0 } .band .beweise li:nth-child(2){ --p:1 } .band .beweise li:nth-child(3){ --p:2 } .band .beweise li:nth-child(4){ --p:3 } .band .beweise li:nth-child(5){ --p:4 } .band .beweise li:nth-child(6){ --p:5 } } @keyframes punkt-herein{ to{ opacity:1; transform:none } } @supports not (animation-timeline: view()) { .band .beweise li{ opacity:1; transform:none } } /* Mehrere Absätze brauchen Luft zueinander, sonst ist der Klotz nur geteilt und nicht entzerrt. Gemessen an Janniks erstem Entwurf: dort tragen mehrere kurze Absätze den Text, bei uns war es einer pro Abschnitt (Schnitt 191 gegen 132 Zeichen). Jetzt liegen wir bei 163. */ .band .fuehrung + .fuehrung{ margin-top:clamp(14px, 1.5vw, 22px) } /* ═══ 18 · Bilder reagieren auf den Zeiger ═══════════════════════════════ Beim Überfahren zieht das Foto sanft heran und wird eine Spur klarer. Der Rahmen bleibt stehen, nur das Bild darin bewegt sich — dieselbe Sprache wie beim Wandern im Rahmen, nur ausgelöst statt gescrollt. ⚠️ Nur auf Geräten MIT Zeiger. Auf einem Handy gibt es kein Überfahren; dort bliebe der Effekt entweder aus oder er klebte nach dem Antippen fest, was schlechter aussieht als gar nichts. */ @media (hover:hover) { .kachel, .geteilt-bild{ overflow:hidden } .kachel img, .geteilt-bild img{ transition:transform .85s cubic-bezier(.19,1,.22,1), filter .5s var(--weich); } .kachel:hover img, .geteilt-bild:hover img{ transform:scale(1.055); filter:saturate(1.1) contrast(1.04); } /* Die Kachel bekommt zusätzlich einen leisen Schimmer an der Kante, damit man merkt, dass sie anfassbar ist. ⛔⛔ Gemessen 04.09.2026: Hier stand die transition-KURZFORM. Sie steht spaeter in der Datei als `.kachel.vorhang` und loeschte dort bei gleicher Spezifitaet den opacity-Uebergang. Folge: 30 Kacheln blieben auf Deckkraft 0 stehen, obwohl sie `.in` schon trugen — sichtbar leer im Bild. Dieselbe Falle wie im Kommentar bei Zeile 126, nur an der zweiten Stelle. Deshalb NUR die eine Eigenschaft ergaenzen, nie die Kurzform verwenden. */ .kachel{ transition-property:box-shadow; transition-duration:.5s; transition-timing-function:var(--weich) } /* Die Vorhang-Kachel behaelt ihre eigenen Uebergaenge samt Staffelung. */ .kachel.vorhang{ transition:opacity var(--t-lang) var(--aus), transform var(--t-lang) var(--aus), box-shadow var(--t-mittel) var(--weich); transition-delay:calc(var(--i,0) * 90ms); } .kachel:hover{ box-shadow:0 18px 44px -26px rgba(0,0,0,.75) } } /* ═══ 19 · Zahlen kommen von unten herauf ════════════════════════════════ Während die Zahl hochzählt, steigt sie zugleich an ihren Platz. Beides zusammen liest sich als eine Bewegung, nicht als zwei Effekte. */ .zahl b{ display:inline-block } @supports (animation-timeline: view()) { .zahl{ opacity:0; transform:translateY(20px); animation:zahl-herauf linear both; animation-timeline:view(); animation-range:entry 5% cover 21%; } .zahl:nth-child(2){ animation-range:entry 8% cover 24% } .zahl:nth-child(3){ animation-range:entry 11% cover 27% } .zahl:nth-child(4){ animation-range:entry 14% cover 30% } } @keyframes zahl-herauf{ to{ opacity:1; transform:none } } @supports not (animation-timeline: view()) { .zahl{ opacity:1; transform:none } } /* Am Handy stehen dieselben Überschriften in mehr Zeilen. Damit die letzte nicht zu spät kommt, wird die Staffelung dort enger. */ @media (max-width:700px){ @supports (animation-timeline: view()) { .zeile > i{ /* Am Handy weniger Weg — 62 px sind dort fast ein Drittel Bildhöhe. */ transform:translateY(38px); animation-range:entry calc(3% + var(--zl,0) * 1%) cover calc(42% + var(--zl,0) * .8%); } [data-block]{ transform:translateY(38px) } } } /* ═══════════════════════════════════════════════════════════════════════════ 30.08.2026 — Runde „hochwertiger" Anlass: Jannik hat stock.at als Vorbild geschickt. Zwei Dinge von dort sind übernommen: Bilder dürfen die volle Breite haben, und eine Seite braucht Stellen, an denen sie nichts erklärt, sondern nur zeigt. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Zimmerraster: Größe folgt dem Preis ────────────────────────────────── Vorher standen drei von sechs Kategorien in 7+5+5 Spalten — die dritte Kachel fiel allein in die zweite Reihe und sah aus wie ein Rest. Jetzt stehen alle sechs in einer Pyramide 1 / 2 / 3: die teuerste Kategorie groß, die günstigste klein. Keine Waise mehr, und die Reihenfolge erklärt sich von selbst. */ .kachel--drittel{ grid-column:span 4; min-height:clamp(230px,24vw,300px) } .kachel--schau{ min-height:clamp(300px,36vw,470px) } /* Die Schaukachel trägt mehr Bild, also darf ihre Beschriftung größer sein. */ .kachel--schau .kachel-text b{ font-size:clamp(1.15rem,1.9vw,1.65rem) } .kachel--schau .kachel-text span{ font-size:.66rem } /* ── Bildmoment: die volle Breite, ein Satz, sonst nichts ────────────────── Die Startseite war zehnmal „Kicker, Überschrift, Text, Aufzählung, Knopf". Das liest sich ordentlich und ermüdet trotzdem. Ein einziger Halt, an dem nur ein Bild und ein Satz stehen, gibt dem Rest seinen Wert zurück. Bewusst EINER — zwei wären schon wieder ein Muster. */ .bildmoment{ position:relative; overflow:clip; background:var(--dunkel); min-height:clamp(420px,72vh,760px); display:flex; align-items:flex-end; isolation:isolate; } .bildmoment img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transform:scale(1.06); z-index:-2; } /* Der Text steht unten links. Ein Verlauf von unten trägt ihn, ein zweiter von links fängt den Fall ab, dass das Foto genau dort hell ist — dieselbe Vorsichtsmaßnahme wie beim Aufmacher. */ .bildmoment::after{ content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(0deg, rgba(8,8,9,.88) 0%, rgba(8,8,9,.52) 26%, rgba(8,8,9,.14) 52%, rgba(8,8,9,.28) 100%), linear-gradient(90deg, rgba(8,8,9,.62) 0%, rgba(8,8,9,.2) 42%, rgba(8,8,9,0) 72%); } .bildmoment-in{ width:100%; max-width:var(--breite); margin-inline:auto; padding:clamp(30px,5vw,74px) var(--rand); } .bildmoment h2{ color:#fff; font-size:clamp(2.3rem,5.4vw,4.4rem); line-height:1.02; letter-spacing:-.03em; margin:0; } .bildmoment p{ color:rgba(255,255,255,.82); margin:clamp(12px,1.4vw,18px) 0 0; max-width:46ch; font-size:clamp(.95rem,1.1vw,1.06rem); } /* Ein sehr langsamer Zug ins Bild. Nur wenn Bewegung erlaubt ist. */ /* ⚠️ 17.09.2026 — hier stand `@media all`. Das heißt: Der Effekt läuft NUR, wenn im Betriebssystem keine reduzierte Bewegung eingestellt ist. David hat sie dauerhaft an und sah diese Effekte deshalb nie — während sie auf dem iPhone liefen. Genau der Unterschied, über den er sich gewundert hat. Ganz AUS bleibt dem Schalter unten rechts vorbehalten (`.bewegung-aus`), der schaltet diese Effekte weiterhin vollständig ab. */ @media (min-width:0px){ .bildmoment img{ transition:transform 2.4s var(--aus) } .bildmoment.in img{ transform:scale(1) } } @media not all{ .bildmoment img{ transform:scale(1) } } /* ── Handy: Regeln zuletzt, damit sie nicht überschrieben werden ────────── */ @media (max-width:860px){ .kachel--drittel{ grid-column:span 6; min-height:190px } } @media (max-width:560px){ .kachel--drittel,.kachel--halb{ grid-column:span 12; min-height:200px } .kachel--schau{ min-height:260px } .bildmoment{ min-height:clamp(380px,58vh,520px) } .bildmoment p{ max-width:none } } /* ── Die Fotos dürfen mehr Platz haben ──────────────────────────────────── Gemessen am 30.08.2026: In den Text-Bild-Bändern war das Foto 549 × 412 px bei 1240 px Inhaltsbreite — 44 % der Fläche für das, was ein Hotel eigentlich verkauft. ⚠️ Der erste Versuch verbreiterte die Bildspalte. Nachgemessen kostete das die Textspalte: 458 px bei 18 px Schrift sind nur noch 48 Zeichen je Zeile, deutlich unter dem, was sich angenehm liest. Deshalb wächst das Bild jetzt in die HÖHE statt in die Breite — gleiche Spalten, 13 % mehr Bildfläche, und hohe Bilder wirken ohnehin ruhiger als breite. */ .band .geteilt-bild{ aspect-ratio:4/3.4 } @media (max-width:860px){ /* Am Handy steht das Bild über dem Text und über die ganze Breite. Ein hohes Bild würde dort den halben Bildschirm füllen. */ .band .geteilt-bild{ aspect-ratio:4/3 } } /* GRUPPENFOTO DER GASTGEBER · 05.10.2026 (Nadia: „da ist meine Mutter abgeschnitten, die sollte da auch drauf sein") Die Familie steht über die ganze Breite des Fotos. Der hohe Rahmen oben zeigte davon nur die Mitte, die Mutter rechts fiel heraus. Dieses eine Bild bekommt deshalb einen breiten Rahmen und die breite Fassung des Fotos. ⛔ Das Wandern bleibt hier aus: es braucht ein Bild, das 18 % höher ist als der Rahmen, und genau diese Übergröße schneidet links und rechts ab. Der leise Zoom der Pro-Schicht bleibt, dafür ist an beiden Seiten Luft (gemessen: 112 px links, 120 px rechts bei 1800 px Bildbreite). */ .band .geteilt-bild.geteilt-bild--gruppe{ aspect-ratio:5/3 } .geteilt-bild.geteilt-bild--gruppe img{ height:100%; animation:none; object-position:50% 50% } .geteilt-bild.geteilt-bild--gruppe:hover img{ transform:none } /* Der stille Bildmoment schließt eine Seite ab, statt einen Halt in der Mitte zu setzen: etwas flacher, und die Zeile darunter darf ein Link sein. */ .bildmoment--still{ min-height:clamp(340px,52vh,540px) } .bildmoment--still h2{ font-size:clamp(1.9rem,4vw,3.2rem) } .bildmoment-in a{ color:#fff; text-decoration:underline; text-underline-offset:3px } .bildmoment-in a:hover{ color:var(--akzent-hell) } /* ── Typografische Skala: größer und mit mehr Abstand zwischen den Rängen ── Zweiter Grund für „wirkt nicht hochwertig": Die Überschriften waren zu brav. h2 hörte bei 53 px auf, während die Seite 1240 px breit ist — das liest sich wie ein Bericht, nicht wie ein Haus, das sich zeigt. EB Garamond hat außerdem eine kleinere x-Höhe als Georgia; bei gleicher Punktgröße wirkt sie kleiner. Beides zusammen heißt: deutlich hochsetzen. Der Abstand zwischen den Rängen wächst mit: Überschrift groß, Vorspann ruhig, Kleinzeug klein. Genau dieser Kontrast trägt eine Seite. */ .band h2, .bildmoment h2{ font-size:clamp(2.2rem, 5.2vw, 4.4rem); line-height:1.03; letter-spacing:-.026em; } .aufmacher-in h1{ font-size:clamp(2.5rem, 7.2vw, 5.6rem); letter-spacing:-.028em } .buehne h1, .titel h1{ letter-spacing:-.028em } /* Der Vorspann darf mitwachsen — sonst kippt das Verhältnis und die Überschrift steht allein da. */ .band > .mitte > .fuehrung, .geteilt .fuehrung{ font-size:clamp(1.02rem, 1.25vw, 1.16rem); line-height:1.6; } /* Feinheiten, die man einzeln nicht sieht und zusammen schon: echte Ligaturen, alte Ziffern in den Fließtexten (die harmonieren mit Kleinbuchstaben), und Zahlen in Tabellen auf gleiche Breite gestellt, damit die Preisspalten untereinander stehen. */ h1,h2,h3,.kachel-text b{ font-feature-settings:"liga" 1,"clig" 1,"kern" 1; text-rendering:optimizeLegibility; } .fuehrung, .beweise, p{ font-feature-settings:"kern" 1 } table td, table th, .zahl, .preis, [class*="preis"]{ font-variant-numeric:tabular-nums } /* Die große Zahl im Zahlenband ist jetzt Garamond — sie darf größer sein, ihre Ziffern sind schmaler als die von Georgia. */ .zahl b, .zahl > span:first-child{ font-size:clamp(2.6rem,4.4vw,3.9rem) } @media (max-width:560px){ .band h2, .bildmoment h2{ font-size:clamp(1.95rem,8.4vw,2.5rem) } .aufmacher-in h1{ font-size:clamp(2.1rem,9.5vw,2.9rem) } } /* ⚠️ Nachgemessen: Mit 70 px Überschrift brach „Das Wasser kommt vom Berg." in der 497 px schmalen Textspalte auf DREI Zeilen um, die mittlere nur ein Wort lang. Eine Überschrift in einer halben Spalte darf nicht so groß sein wie eine über die ganze Breite — das ist keine Einschränkung, das ist die Regel. `text-wrap:balance` hilft hier übrigens nicht: die Zeilenanimation zerlegt die Überschrift vorher in eigene Blöcke. */ .band .geteilt h2{ font-size:clamp(2rem, 3.5vw, 3.15rem) } .band .geteilt .fuehrung{ font-size:clamp(.99rem, 1.1vw, 1.06rem) } /* ⛔ Vierter Fall, in dem der Kern auf dunklem Grund kippt (30.08.2026). Der Sprunglink für Tastaturnutzer steht im Kern als `background:var(--tinte); color:#fff` — dort ist `--tinte` die dunkle SCHRIFTfarbe, weiß darauf ist also richtig. Hier ist `--tinte` die HELLE Schriftfarbe, und damit stand Weiß auf Fast-Weiß: 1,1:1, vollkommen unlesbar. Gefunden mit einer Kontrastmessung über alle 435 Textknoten der Seite, nicht mit dem Auge — der Link ist ja unsichtbar, bis jemand die Tabulatortaste drückt. */ .spring{ color:var(--papier) } /* ═══════════════════════════════════════════════════════════════════════════ GÄSTESTIMMEN — 30.08.2026, nach dem Vorbild von stock.at Dort tragen die Gästestimmen den mittleren Teil der Seite. Bei Schwarzenbach fehlten sie ganz, obwohl das Haus mit **4,8 bei 268 Google-Bewertungen** an der Spitze seines Umfelds liegt — besser als jedes Vier- und Fünfsternehaus in der Nachbarschaft. Diese Zahl war nirgends zu sehen. ⛔ Alle Zitate sind echt und wörtlich abgerufen. Nie welche erfinden, nie umformulieren. Der Wortlaut liegt im Vault. ═══════════════════════════════════════════════════════════════════════════ */ .stimmen-kopf{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:clamp(20px,3vw,44px); } /* Die Note steht rechts wie ein Siegel — sie ist das Argument, nicht Zierrat. */ .note{ text-align:right; line-height:1.35 } .note > b{ display:block; font-family:var(--schrift-titel); font-weight:400; font-size:clamp(3.2rem,6.5vw,5rem); line-height:.92; color:var(--akzent); letter-spacing:-.03em; } .note .sterne{ display:block; color:var(--akzent); font-size:1rem; letter-spacing:.16em; margin:6px 0 4px; } .note > span:last-child{ font-size:.86rem; color:var(--leise) } .note > span:last-child b{ color:var(--tinte-2); font-weight:600 } /* ── Durchlaufendes Bewertungsband (31.08.2026) ─────────────────────────── Jannik: „mehr Bewertungen, viel mehr, so durchgehend durchlaufend, dass man richtig sieht: richtig viele Bewertungen." Vier Karten in einem Raster sahen nach vier Bewertungen aus. Zwanzig in zwei gegenläufigen Bändern sehen nach zweihundertachtundsechzig aus — und genau die hat das Haus. Alle Zitate sind echt und wörtlich. ⛔ Das Band hält beim Überfahren an, sonst kann man nicht lesen. Und es steht still, wenn jemand „weniger Bewegung" eingestellt hat. */ .stimmen-reihe{ overflow:hidden; margin-top:clamp(20px,2.4vw,32px); /* Weiche Kanten links und rechts: das Band soll aus dem Nichts kommen und ins Nichts laufen, nicht an einer harten Linie abgeschnitten sein. */ -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); } .stimmen-spur{ display:flex; gap:clamp(14px,1.6vw,22px); width:max-content; animation:stimmen-links 88s linear infinite; } .stimmen-reihe--rechts .stimmen-spur{ animation-name:stimmen-rechts; animation-duration:104s } @keyframes stimmen-links { from{ transform:translateX(0) } to{ transform:translateX(-50%) } } @keyframes stimmen-rechts{ from{ transform:translateX(-50%) } to{ transform:translateX(0) } } .stimmen-reihe:hover .stimmen-spur, .stimmen-reihe:focus-within .stimmen-spur{ animation-play-state:paused } /* ⚠️ 17.09.2026 — hier stand `animation:none`. Zwei Fehler auf einmal: 1. Es schaltete das Laufband ganz ab, statt es zu verlangsamen. Das Foto-Laufband daneben wird bei „weniger Bewegung" nur langsamer (124 s statt 62 s) — hier war es einfach weg. 2. Es wirkte nur auf EINE Spur. `.stimmen-reihe--rechts .stimmen-spur` ist spezifischer und setzte `animation-name` zurück, also lief die rechte Spur weiter und die linke stand. Gemessen: stimmen-links 0, stimmen-rechts 1 — ein sichtbar schiefes Bild. Jetzt laufen beide, nur halb so schnell. */ @media not all{ .stimmen-spur{ animation-duration:176s } .stimmen-reihe--rechts .stimmen-spur{ animation-duration:208s } } .stimmen{ text-align:left } .stimme{ flex:none; width:clamp(270px,25vw,360px); position:relative; overflow:hidden; margin:0; display:flex; flex-direction:column; justify-content:space-between; padding:clamp(22px,2.4vw,30px); background:var(--papier-3); background:linear-gradient(180deg, color-mix(in srgb, var(--papier-3) 92%, transparent), var(--papier)); border:1px solid rgba(245,242,237,.11); border-radius:var(--radius); transition:transform .35s var(--weich), border-color .35s var(--weich); } .stimme:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--akzent) 40%, transparent) } .stimme::before{ content:"”"; position:absolute; top:0; right:clamp(12px,1.4vw,18px); display:flex; align-items:flex-end; height:clamp(46px,4.4vw,62px); font-family:var(--schrift-titel); font-size:clamp(3.4rem,5vw,4.6rem); line-height:1; color:var(--akzent); opacity:.14; pointer-events:none; } .stimme blockquote{ margin:0 0 auto; font-family:var(--schrift-titel); font-weight:400; font-size:clamp(.98rem,1.1vw,1.08rem); line-height:1.5; color:var(--tinte); } .stimme figcaption{ margin-top:clamp(16px,1.8vw,22px); padding-top:12px; border-top:1px solid var(--linie-fein); font-size:.72rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--tinte-2); } .stimme figcaption span{ display:block; margin-top:3px; font-weight:400; letter-spacing:.1em; color:var(--leise); } @media (max-width:560px){ .stimme{ width:78vw } .stimme::before{ font-size:3rem } } .stimmen-fuss{ margin-top:clamp(18px,2vw,26px); font-size:.78rem; color:var(--leise); } @media (max-width:640px){ .stimmen-kopf{ flex-direction:column; align-items:flex-start } .note{ text-align:left } .stimmen{ grid-template-columns:1fr } } /* ── Wegweiser mit zweizeiliger Wortmarke ───────────────────────────────── Von stock.at übernommen ist das PRINZIP: eine große, kleingeschriebene Marke aus zwei Zeilen, darunter eine kleine gesperrte Zeile, die sagt, wohin es geht. Die Wortwahl ist Schwarzenbachs eigene — die Seite erzählt ohnehin so („Um sieben wird aufgetragen"). Vorher führten nur einzelne Knöpfe mitten im Fließtext zu den Unterseiten; einen Überblick, was das Haus überhaupt zu bieten hat, gab es nicht. */ .wegweiser{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(12px,1.4vw,20px); margin-top:clamp(30px,3.8vw,52px); } .weg-kachel{ position:relative; display:block; overflow:hidden; border-radius:var(--radius); min-height:clamp(300px,26vw,380px); text-decoration:none; isolation:isolate; background:var(--papier-3); transition:transform var(--t-mittel) var(--weich), box-shadow var(--t-mittel) var(--weich); box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 18px 44px -28px rgba(0,0,0,.72); } .weg-kachel img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 1s var(--aus); } /* Der Verlauf trägt die Schrift auch über einem hellen Foto — dieselbe Vorsichtsmaßnahme wie beim Aufmacher, hier reicht einer von unten. */ .weg-kachel::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(9,8,8,.92) 0%, rgba(9,8,8,.55) 34%, rgba(9,8,8,.1) 66%, rgba(9,8,8,.3) 100%); } .weg-text{ position:absolute; inset:auto 0 0 0; z-index:2; padding:clamp(16px,1.8vw,24px); } .weg-text b{ display:block; font-family:var(--schrift-titel); font-weight:400; font-size:clamp(1.5rem,2.3vw,2.15rem); line-height:1.02; color:#fff; letter-spacing:-.02em; text-shadow:0 2px 18px rgba(0,0,0,.5); } /* Zweite Zeile derselben Marke. statt
, damit sie eigene Laufweite bekommen kann, ohne kursiv zu werden. */ .weg-text b i{ display:block; font-style:normal } .weg-text > span{ display:block; margin-top:9px; font-family:var(--schrift-text); font-size:.63rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase; color:var(--akzent-hell); } /* Der Strich wächst beim Überfahren — der einzige Hinweis, dass die Kachel ein Weg ist und kein Bild. */ .weg-text > span::after{ content:""; display:block; width:22px; height:1px; margin-top:8px; background:var(--akzent); transition:width var(--t-mittel) var(--aus); } .weg-kachel:hover{ transform:translateY(-4px); box-shadow:0 26px 50px -30px rgba(0,0,0,.7) } .weg-kachel:hover img{ transform:scale(1.06) } .weg-kachel:hover .weg-text > span::after{ width:58px } .weg-kachel:focus-visible{ outline:2px solid var(--akzent); outline-offset:3px } @media (max-width:1000px){ .wegweiser{ grid-template-columns:repeat(2,1fr) } } @media (max-width:560px){ .wegweiser{ grid-template-columns:1fr; gap:12px } .weg-kachel{ min-height:210px } } /* ═══════════════════════════════════════════════════════════════════════════ TIEFE — 30.08.2026 (Jannik: „bring die ganze Webseite mal ein bisschen mehr Tiefe rein") Die Seite war flach, weil alles in derselben Ebene lag: Bilder ohne Schatten, bündig im Raster, und beim Scrollen bewegt sich alles gleich schnell. Drei Mittel, vom sichersten zum auffälligsten. ═══════════════════════════════════════════════════════════════════════════ */ /* 1 · Schatten. Auf dunklem Grund kann ein Schatten nicht dunkler sein als der Grund — er muss aus einem sehr weichen, weit gestreuten Schwarz und einer hauchdünnen hellen Oberkante bestehen. Die helle Kante ist das Entscheidende: Sie liest sich als Lichtkante und hebt die Fläche an. */ .geteilt-bild, .kachel, .weg-kachel, .stimme, .bildmoment{ box-shadow: 0 1px 0 rgba(255,255,255,.07) inset, 0 18px 40px -24px rgba(0,0,0,.85), 0 4px 12px -8px rgba(0,0,0,.6); } /* Der Bildmoment über die volle Breite braucht keine Lichtkante, aber einen weichen Übergang nach oben und unten, damit er in der Seite „liegt". */ .bildmoment{ box-shadow:0 -30px 60px -40px rgba(0,0,0,.9), 0 30px 60px -40px rgba(0,0,0,.9); border-top:1px solid rgba(255,255,255,.06); border-bottom:1px solid rgba(255,255,255,.06); } /* 2 · Die Bänder bekommen einen kaum sichtbaren Verlauf statt einer Volltonfläche. Zwei benachbarte Bänder gleicher Farbe wirkten wie eine einzige Fläche; so entsteht eine leichte Wölbung. */ .band--hell, .band--papier{ position:relative } .band--hell::after, .band--papier::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: linear-gradient(180deg, rgba(255,255,255,.038) 0%, transparent 14%, transparent 86%, rgba(0,0,0,.12) 100%), radial-gradient(120% 80% at 50% 0%, rgba(255,255,255,.03), transparent 62%); } .band--dunkel{ position:relative } .band--dunkel::after{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: linear-gradient(180deg, rgba(255,255,255,.018) 0%, transparent 20%, transparent 82%, rgba(0,0,0,.22) 100%), radial-gradient(110% 70% at 50% 0%, rgba(197,130,151,.04), transparent 60%); } .band > .mitte{ position:relative; z-index:1 } /* 3 · Parallaxe: das Foto wandert beim Scrollen langsamer als der Text daneben. Das ist der stärkste Tiefenreiz überhaupt — echte Räume verhalten sich genau so. ⛔ Nur über `animation-timeline:view()`. Eine Scroll-Rechnung in JavaScript ruckelt und läuft in Hintergrund-Tabs nicht mit. */ /* ⚠️ 17.09.2026 — hier stand `@media all`. Das heißt: Der Effekt läuft NUR, wenn im Betriebssystem keine reduzierte Bewegung eingestellt ist. David hat sie dauerhaft an und sah diese Effekte deshalb nie — während sie auf dem iPhone liefen. Genau der Unterschied, über den er sich gewundert hat. Ganz AUS bleibt dem Schalter unten rechts vorbehalten (`.bewegung-aus`), der schaltet diese Effekte weiterhin vollständig ab. */ @media (min-width:0px){ @supports (animation-timeline: view()){ .geteilt-bild img{ animation:tiefe-wandern linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; /* etwas größer, damit das Wandern keine Blöße am Rand zeigt */ height:118%; position:relative; } @keyframes tiefe-wandern{ from{ transform:translateY(-7%) } to{ transform:translateY(7%) } } } } /* ═══════════════════════════════════════════════════════════════════════════ MEHR SCROLL-EFFEKTE — 30.08.2026 (Jannik: „ein paar mehr Scroll-Effekte") Alle über `animation-timeline`, also vom Browser selbst gerechnet: kein JavaScript im Scroll-Pfad, kein Ruckeln, und in Hintergrund-Tabs kostet es nichts. Jeder Effekt ist unter `prefers-reduced-motion:no-preference` eingeschlossen — wer Bewegung abbestellt hat, bekommt die ruhige Seite. ⛔ WICHTIG: Diese Animationen BEWEGEN nur, sie blenden nicht ein. Das Sichtbarwerden macht bereits `.vorhang`/`.stufe` über den IntersectionObserver. Wuerden beide Systeme `opacity` steuern und die Zeitleiste liefe aus irgendeinem Grund nicht an, bliebe der Inhalt fuer immer unsichtbar — der klassische Weg, eine Seite lautlos zu zerstoeren. ═══════════════════════════════════════════════════════════════════════════ */ /* ⚠️ 17.09.2026 — hier stand `@media all`. Das heißt: Der Effekt läuft NUR, wenn im Betriebssystem keine reduzierte Bewegung eingestellt ist. David hat sie dauerhaft an und sah diese Effekte deshalb nie — während sie auf dem iPhone liefen. Genau der Unterschied, über den er sich gewundert hat. Ganz AUS bleibt dem Schalter unten rechts vorbehalten (`.bewegung-aus`), der schaltet diese Effekte weiterhin vollständig ab. */ @media (min-width:0px){ @supports (animation-timeline: view()){ /* 1 · (ENTFERNT, 30.08.2026) Hier lief eine Lesefortschritts-Linie am oberen Rand. Jannik sah sie als „doppelte Linie": Sie hing rosa über den hellen Laufband-Fotos, die Bildkante darunter leuchtete weiter, und ihr Ende bei 67 % Breite sah nach Renderfehler aus. Eine Zierde, die Fragen aufwirft, ist keine. */ /* 2 · Das Titelbild zieht sich beim Wegscrollen leicht zusammen und wird dunkler, statt einfach nach oben zu verschwinden. Weil die Bühne `sticky` ist, liegt sie ohnehin still — das gibt ihr einen Abgang. */ .buehne-video{ animation:titel-abgang linear both; animation-timeline:view(); animation-range:exit 0% exit 100%; } @keyframes titel-abgang{ from{ transform:scale(1); filter:brightness(1) } to { transform:scale(1.14); filter:brightness(.42) } } /* 3 · Kacheln steigen einzeln auf, leicht versetzt. Der Versatz kommt aus der Stellung im Raster, nicht aus einer Zeitkette — dadurch stimmt er auch, wenn das Raster am Handy umbricht. */ .raster > .kachel, .wegweiser > .weg-kachel, .stimmen > .stimme{ animation:kachel-auf linear both; animation-timeline:view(); animation-range:entry 2% cover 26%; } @keyframes kachel-auf{ from{ transform:translateY(34px) scale(.985) } to { transform:none } } .raster > .kachel:nth-child(2n){ animation-range:entry 5% cover 29% } .raster > .kachel:nth-child(3n){ animation-range:entry 8% cover 32% } .wegweiser > .weg-kachel:nth-child(2){ animation-range:entry 5% cover 29% } .wegweiser > .weg-kachel:nth-child(3){ animation-range:entry 8% cover 32% } .wegweiser > .weg-kachel:nth-child(4){ animation-range:entry 11% cover 35% } .stimmen > .stimme:nth-child(2){ animation-range:entry 5% cover 29% } .stimmen > .stimme:nth-child(3){ animation-range:entry 8% cover 32% } .stimmen > .stimme:nth-child(4){ animation-range:entry 11% cover 35% } /* 4 · Im Bildmoment wandern Bild und Text GEGENläufig. Der stärkste Tiefenreiz der Seite, weil zwei Ebenen sichtbar auseinanderlaufen. */ .bildmoment img{ animation:moment-bild linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; } @keyframes moment-bild{ from{ transform:scale(1.16) translateY(-3%) } to{ transform:scale(1.16) translateY(3%) } } .bildmoment-in{ animation:moment-text linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; } @keyframes moment-text{ from{ transform:translateY(46px) } to{ transform:translateY(-46px) } } /* 5 · Die Abschnittsnummer am Rand wandert mit dem Band mit — eine Kleinigkeit, die man nicht bewusst sieht und die den Eindruck erzeugt, dass die Seite aus Ebenen besteht. */ .band[data-nr]::before{ animation:nummer-mit linear both; animation-timeline:view(); animation-range:entry 0% exit 100%; } @keyframes nummer-mit{ from{ transform:translateY(28px) } to{ transform:translateY(-28px) } } /* 6 · Das Zahlenband: die Ziffern kommen einzeln von unten, während der Zähler läuft. Zählen allein wirkte flach. */ .zahlen > .zahl{ animation:zahl-auf linear both; animation-timeline:view(); animation-range:entry 4% cover 24%; } @keyframes zahl-auf{ from{ transform:translateY(26px) } to{ transform:none } } .zahlen > .zahl:nth-child(2){ animation-range:entry 8% cover 28% } .zahlen > .zahl:nth-child(3){ animation-range:entry 12% cover 32% } .zahlen > .zahl:nth-child(4){ animation-range:entry 16% cover 36% } } } /* Ohne Unterstützung — und für alle, die Bewegung abbestellt haben — muss jeder Inhalt trotzdem sichtbar sein. Das ist die Reißleine. */ @supports not (animation-timeline: view()){ .raster > .kachel, .wegweiser > .weg-kachel, .stimmen > .stimme, .zahlen > .zahl{ transform:none } } /* ═══════════════════════════════════════════════════════════════════════════ WORTMARKEN — 30.08.2026, das Kernstück von stock.at Jannik dreimal: „orientier dich mehr an diesem Stockhotel." Nachgemessen, was dort die Seite trägt: zweizeilige, KLEINGESCHRIEBENE Wortpaare in **110 bis 153 px** („herz / klopfen", „wohn / gefühl", „purer / genuss"), darunter eine kleine Zeile, die sagt, worum es geht. Bei uns waren die Abschnittsmarken eine 10-px-Kapitälchenzeile — ein Fünfzehntel davon. Das ist der sichtbarste Unterschied zwischen den beiden Seiten. Übernommen ist das PRINZIP und die Größe, nicht die Wortwahl: Die Marken hier sprechen Schwarzenbachs eigene Sprache („abends / um sieben"), die die Seite ohnehin benutzt. ═══════════════════════════════════════════════════════════════════════════ */ .wortmarke{ margin:0 0 clamp(22px,2.8vw,38px); line-height:1 } .wortmarke b{ display:block; font-family:var(--schrift-titel); font-weight:400; /* stock.at steht bei 110 px auf 1240 px Breite. Hier etwas darunter, weil EB Garamond eine kleinere x-Höhe hat als deren Juana und sonst die zweite Zeile in die Überschrift darunter läuft. */ font-size:clamp(2.6rem, 6.6vw, 5.4rem); line-height:.92; letter-spacing:-.035em; color:var(--tinte); } /* Zweite Zeile derselben Marke. statt
, damit sie eigenen Abstand bekommen kann, ohne kursiv zu werden. */ .wortmarke b i{ display:block; font-style:normal; color:var(--akzent) } /* Die kleine Zeile darunter ist das, was vorher die ganze Rubrik war. */ .wortmarke span{ /* ⚠️ Nachgemessen zu eng: Die Kleinzeile klebte zwischen Wortmarke und Überschrift und wirkte gequetscht. Sie braucht Luft nach oben UND ihre eigene Zone, sonst liest sie sich als Teil der Überschrift darunter. */ display:block; margin-top:clamp(16px,2vw,26px); font-family:var(--schrift-text); font-size:.62rem; font-weight:600; letter-spacing:.24em; text-transform:uppercase; color:var(--leise); } .wortmarke span::after{ content:""; display:block; width:34px; height:1px; margin-top:9px; background:var(--zier); } /* Der erzählende Satz darunter darf jetzt kleiner sein — die Wortmarke trägt den Abschnitt, er erklärt ihn. Zwei gleich große Zeilen übereinander wären ein Wettstreit. */ .band .wortmarke + h2, .band .wortmarke ~ h2{ font-size:clamp(1.6rem, 2.6vw, 2.3rem); margin-top:0 } .band .geteilt .wortmarke ~ h2{ font-size:clamp(1.45rem, 2.1vw, 1.95rem) } /* Auf dunklem Grund kehrt sich die Farbgebung um. */ .band--dunkel .wortmarke b{ color:#fff } .band--dunkel .wortmarke b i{ color:var(--akzent-hell) } @media (max-width:640px){ .wortmarke b{ font-size:clamp(2.2rem, 12vw, 3.1rem) } } /* ── Saunier-Anleitung (Wellness): vier nummerierte Schritte ────────────── Inhalt von der alten Website übernommen — dort eine ganze Textseite, hier verdichtet auf das, was ein Gast wirklich wissen will. */ .sauna-schritte{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(14px,1.8vw,24px); margin-top:clamp(28px,3.4vw,46px); } .schritt{ position:relative; padding:clamp(18px,2vw,26px); background:var(--papier); border:1px solid var(--linie); border-radius:var(--radius) } .schritt > b{ display:block; font-family:var(--schrift-titel); font-weight:400; font-size:clamp(2rem,3vw,2.8rem); line-height:1; color:var(--akzent); margin-bottom:10px; } .schritt h3{ font-size:1.02rem; margin:0 0 8px } .schritt p{ margin:0; font-size:.92rem; line-height:1.55; color:var(--tinte-2) } @media (max-width:960px){ .sauna-schritte{ grid-template-columns:repeat(2,1fr) } } @media (max-width:560px){ .sauna-schritte{ grid-template-columns:1fr } } /* Wortmarken in schmalen Textspalten (geteilt-Layout der Unterseiten): kleiner, sonst läuft „achtundvierzig" aus der 497-px-Spalte. Dieselbe Regel wie bei den Überschriften — Größe folgt dem verfügbaren Raum. */ .geteilt .wortmarke b{ font-size:clamp(2rem, 3.6vw, 3.2rem) } .geteilt .wortmarke{ margin-bottom:clamp(16px,2vw,26px) } /* ═══ 18 · Der ganze Textblock kommt als eine Einheit ═════════════════════ 31.08.2026, David: „Es soll der ganze Text mit Überschrift einfach von unten nach oben raufgemacht werden, wie bei dem anderen Beispiel." Vorbild loewenhof.it: dort bewegt sich `.text-container` als Ganzes, die Teile darin stehen still. Bei uns hatte jedes Stück seine eigene Zeitachse — Wortmarke, Rubrik, Überschrift, Absätze, Stichpunkte. Weil sie untereinander stehen, kommen sie bei `view()` zwangsläufig nacheinander an. ⛔ Diese Regeln stehen bewusst GANZ AM ENDE: Sie müssen die früheren Einzelanimationen überschreiben, und bei gleicher Stärke gewinnt die spätere Regel. */ @supports (animation-timeline: view()) { [data-textblock]{ /* ⚠️ 02.09.2026 — 62 → 88 → 100 px, in zwei Schritten am selben Tag. Die 62 px stammen aus der Zeit, als jede ZEILE einzeln flog; mehr hätte die Zeilen übereinandergeschoben. Seit dem 31.08. bewegt sich der ganze BLOCK als ein Stück — diese Grenze gilt hier also nicht mehr. 88 px war der vorsichtige Schritt, David wollte danach „noch ein bisschen stärker". 100 px ist exakt der Wert von loewenhof.it, das er selbst als Vorbild geschickt hatte. ⛔ Nicht weiter ohne Ansage: darüber schiebt sich der Block beim Hereinfliegen sichtbar über den Abschnitt darüber. */ opacity:0; transform:translateY(100px); /* ⛔ `ease` war hier falsch: Es legt 80 % des Weges in die erste Hälfte, also war der Text schon fast fertig, wenn er unten auftauchte (gemessen 0,79–0,93 Deckkraft bei 60 % Bildhöhe). Bei einer scroll-gesteuerten Animation macht der Scrollbalken die Kurve — `linear` folgt ihm ehrlich und bleibt sichtbar, solange man hinsieht. */ animation:block-ein linear both; animation-timeline:view(); /* ⚠️ 31.08.2026, David: „Ich sehe gar keine Textanimationen." Gemessen war der Grund nicht, dass sie nicht lief — sondern WANN: Stand die Oberkante des Blocks bei 60 % Bildhöhe, war die Animation schon zu 94–100 % durch. Bei 5 von 7 Blöcken sah man nichts. ⛔ `entry X%` ist bei hohen Blöcken die falsche Bezugsgröße: Die entry-Phase ist so lang wie das ELEMENT hoch ist (hier bis 707 px). Die Animation war abgelaufen, bevor der Block überhaupt im Bild war. `cover` allein ist bildschirmbezogen und für jede Blockhöhe gleich: `cover 50%` heißt immer „Blockmitte in Bildmitte". Also läuft die Bewegung von kurz nach dem Auftauchen bis kurz vor der Lesemitte. */ animation-range:cover 8% cover 52%; } /* Alles darin steht still — die Bewegung macht der Block. */ [data-textblock] .zeile > i, [data-textblock] [data-block], [data-textblock] .beweise li, [data-textblock] .stufe, [data-textblock] .wortmarke{ animation:none !important; opacity:1 !important; transform:none !important; } } /* Ohne Scroll-Zeitachse (Safari): derselbe Block, über die Klasse. */ @supports not (animation-timeline: view()) { [data-textblock]{ opacity:0; transform:translateY(62px); transition:opacity 1.5s var(--aus), transform 1.5s var(--aus); } [data-textblock].text-an{ opacity:1; transform:none } [data-textblock] .zeile > i, [data-textblock] [data-block], [data-textblock] .beweise li{ transition:none !important; opacity:1 !important; transform:none !important; } } /* ⛔ Nicht abschalten, nur kürzen — David hat „weniger Bewegung" dauerhaft an. ⚠️ 02.09.2026 — 34 → 52 → 68 px. Das ist die Zahl, die David tatsächlich SIEHT: Er ist der einzige Beteiligte mit dieser Einstellung, und alle fünf Runden „ich sehe keine Textanimation" gingen gegen die 34-px-Fassung, während gemessen wurde, was mit 62 px passiert. „Reduziert" darf leise heißen, aber nicht unsichtbar. 68 von 100 px sind rund ein Drittel weniger Weg — die Einstellung wirkt weiterhin, nur nicht mehr bis zur Unmerklichkeit. */ @media not all{ [data-textblock]{ transform:translateY(68px) } } .bewegung-aus [data-textblock]{ transform:translateY(68px) } @media (max-width:700px){ [data-textblock]{ transform:translateY(38px) } } /* ── Nachjustierung für Newsreader (31.08.2026) ────────────────────────── Newsreader hat eine deutlich größere x-Höhe als EB Garamond: bei gleicher Punktgröße wirkt sie größer und füllt die Zeile stärker. Die Skala geht deshalb einen Schritt zurück, sonst drücken die Überschriften den Rest weg. Gemessen, nicht geschätzt: „das haus / am waldrand" braucht bei 5,4rem in Newsreader dieselbe Fläche wie bei 5,9rem in Garamond. */ .wortmarke b{ font-size:clamp(2.4rem, 6vw, 4.9rem); letter-spacing:-.03em } .band h2, .bildmoment h2{ font-size:clamp(2.05rem, 4.8vw, 4rem) } .aufmacher-in h1{ font-size:clamp(2.35rem, 6.6vw, 5.1rem) } .band .geteilt h2{ font-size:clamp(1.85rem, 3.2vw, 2.9rem) } .geteilt .wortmarke b{ font-size:clamp(1.85rem, 3.3vw, 2.95rem) } /* ── Ausgleich fuer die gewachsene Logo-Datei (31.08.2026) ──────────────── Mit den Sternen ist das Bild 26 % hoeher, sein Mittelpunkt liegt tiefer — in der Bildmitte rutschte der Schriftzug in die Buchungsleiste. ⚠️ Beim ersten Versuch habe ich die ganze Regel neu geschrieben und dabei `transform-origin:left center` und den Waagrecht-Wert (-230 %) vergessen: der Schriftzug stand daraufhin rechts der Mitte. Deshalb hier NUR die Senkrechte angefasst, alles andere wie im Original. */ /* ═══════════════════════════════════════════════════════════════════════════ WEGWEISER UND GÄSTESTIMMEN — Feinschliff 31.08.2026 Jannik hat beide Bereiche als „noch nicht hochwertig" markiert. Nachgesehen, woran es liegt — und beides waren dieselben zwei Ursachen: zu wenig Halt für die Schrift auf hellem Grund, und Kästen, die ihre Höhe nicht füllen. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Wegweiser ──────────────────────────────────────────────────────────── */ /* 1 · Höher. Bei 380 px waren die Kacheln fast quadratisch und wirkten wie Vorschaubilder; ein Weg ins Haus darf ein Portal sein, kein Icon. */ .weg-kachel{ min-height:clamp(340px,32vw,480px) } /* 2 · Der Verlauf trug die Schrift nicht. Auf dem Wellness-Bild steht der helle Himmel genau dort, wo „baden ohne chlor" liegt — Weiß auf Weiß. Jetzt drei Lagen: ein satter Fuß, eine Abdunklung über die ganze Fläche und ein warmer Hauch, der die Fotos zusammenbindet. */ .weg-kachel::after{ background: linear-gradient(0deg, rgba(9,7,7,.94) 0%, rgba(9,7,7,.72) 22%, rgba(9,7,7,.28) 48%, rgba(9,7,7,.08) 70%, rgba(9,7,7,.34) 100%), linear-gradient(0deg, rgba(95,31,48,.16), rgba(95,31,48,0) 55%); } /* 3 · Die Schrift bekommt zusätzlich einen eigenen Schatten — ein Verlauf allein kann einen Sonnenfleck im Foto nicht abfangen. */ .weg-text b{ font-size:clamp(1.6rem,2.5vw,2.35rem); text-shadow:0 2px 6px rgba(0,0,0,.7), 0 6px 30px rgba(0,0,0,.5); } .weg-text > span{ color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.8); font-size:.64rem; letter-spacing:.22em; } .weg-text > span::after{ background:var(--akzent-hell); width:26px; height:1.5px } .weg-kachel:hover .weg-text > span::after{ width:64px } /* 4 · Beim Überfahren hebt sich die Kachel und das Bild wird heller — bisher passierte nur eine Verschiebung, die man kaum bemerkte. */ .weg-kachel{ transition:transform .45s var(--weich), box-shadow .45s var(--weich) } .weg-kachel img{ transition:transform 1.1s var(--aus), filter .5s var(--weich) } .weg-kachel:hover{ transform:translateY(-7px) } .weg-kachel:hover img{ transform:scale(1.07); filter:brightness(1.12) saturate(1.06) } /* ── Gästestimmen ───────────────────────────────────────────────────────── */ /* 1 · Die Karten waren unten leer, weil die Zitate verschieden lang sind und das Zitat den Rest nach oben drückte. Jetzt steht die Signatur immer am Fuß und der Leerraum verteilt sich um das Zitat herum. */ .stimme{ justify-content:space-between; padding:clamp(24px,2.6vw,34px); background:var(--papier-3); background:linear-gradient(180deg, color-mix(in srgb, var(--papier-3) 92%, transparent), var(--papier)); border-color:rgba(245,242,237,.11); } .stimme blockquote{ flex:0 1 auto; margin-bottom:auto } /* 2 · Das Anführungszeichen war ein blasser Fleck. Jetzt größer, tiefer im Hintergrund und aus dem Textfluss heraus — Zierde, nicht Konkurrenz. */ /* ⚠️ Erst ragte das Zeichen oben aus der Karte: `line-height:.7` zieht die Zeile zusammen, aber der Glyph selbst sitzt darüber hinaus. Mit einem festen Kasten und Ausrichtung nach unten bleibt es sicher drinnen. */ .stimme::before{ position:absolute; top:0; right:clamp(14px,1.6vw,22px); display:flex; align-items:flex-end; height:clamp(52px,5vw,74px); font-size:clamp(4rem,6vw,6rem); line-height:1; color:var(--akzent); opacity:.14; margin:0; pointer-events:none; } .stimme{ position:relative; overflow:hidden } /* 3 · Beim Überfahren tritt die Karte hervor — sie ist der Beleg für das Versprechen darüber und darf sich anfassen lassen. */ .stimme{ transition:transform .35s var(--weich), border-color .35s var(--weich) } .stimme:hover{ transform:translateY(-4px); border-color:color-mix(in srgb, var(--akzent) 40%, transparent) } /* 4 · Die Note als Siegel: der Kreisbogen gibt ihr Gewicht. */ .note{ position:relative } .note > b{ font-size:clamp(3.4rem,6.8vw,5.2rem) } .note .sterne{ font-size:1.05rem; letter-spacing:.2em } @media (max-width:560px){ .weg-kachel{ min-height:250px } .stimme::before{ font-size:3.4rem } } /* ═══ 19 · Saunagang als kleines Schauspiel (02.09.2026) ══════════════════ Vier Strichmännchen, je eines pro Schritt: duschen, schwitzen, abkühlen, ruhen. Reines SVG + CSS, kein JavaScript, kein Bild — zusammen unter 3 KB. ⛔ Die Figuren sind Beiwerk, kein Inhalt: `aria-hidden`, damit der Screenreader die Schritt-Texte vorliest statt leerer Grafiken. ⛔ Animiert wird NUR `transform` und `opacity` — beides läuft auf der Grafikkarte. `stroke-dashoffset` wäre hübscher, zwingt den Browser aber bei jedem Bild zum Neuzeichnen der Pfade. */ .saunafilm{ display:block; width:100%; max-width:150px; height:auto; margin:0 0 clamp(10px,1.4vw,16px); overflow:visible; } .saunafilm .strich{ fill:none; stroke:var(--akzent); stroke-width:2.6; stroke-linecap:round; stroke-linejoin:round; } .saunafilm .duenn{ stroke-width:1.8; opacity:.75 } .saunafilm .fest{ stroke:var(--leise); opacity:.55 } /* ⭐ EFFEKTE LAUFEN IMMER (05.09.2026, David — Korrektur zur ersten Fassung): „Die Effekte sollen immer sein, nicht nur wenn man drauffährt. Beim Drüberfahren soll aber eine Bildanimation erscheinen, dass es ein bisschen heraussticht — wie bei den anderen Bildern." Zuerst hatte ich die Figuren bis zum Hover geparkt. Jetzt laufen die Filmchen (Tropfen, Guss, Zittern, Atmen, Dampf) DAUERHAFT: sie sind direkt an den Elementen zugewiesen (`.film1 .t1{ animation:… infinite }`), also genügt es, sie nicht mehr zu pausieren — kein Parken, kein Hover-Gate. Läuft auch bei reduzierter Bewegung, weil David die Bewegung ausdrücklich immer will. Nur der seiteneigene Schalter „Bewegung aus" hält sie an: */ .bewegung-aus .saunafilm *{ animation:none !important } /* Beim Drüberfahren tritt die Karte hervor — derselbe „Bildanimation"-Griff wie bei den anderen Karten: Anheben, Akzentrahmen, und die Figur zoomt leicht heran. Das ist der Zusatz OBEN auf die Dauerbewegung. */ .sauna-schritte .schritt{ transition:transform var(--t-mittel) var(--aus), border-color var(--t-mittel) var(--weich), box-shadow var(--t-mittel) var(--weich); } .sauna-schritte .schritt .saunafilm{ transition:transform var(--t-mittel) var(--aus), filter var(--t-mittel) var(--weich); } @media (hover:hover){ .sauna-schritte .schritt:hover{ transform:translateY(-6px); border-color:rgba(197,130,151,.5); box-shadow:0 1px 0 rgba(255,255,255,.06) inset, 0 26px 56px -32px rgba(0,0,0,.8), 0 0 0 1px rgba(197,130,151,.16); } .sauna-schritte .schritt:hover .saunafilm{ transform:scale(1.09); filter:brightness(1.08) saturate(1.06); } } /* 1 · Tropfen fallen aus der Brause, versetzt */ @keyframes tropfen{ 0% { transform:translateY(-6px); opacity:0 } 25% { opacity:.9 } 100% { transform:translateY(16px); opacity:0 } } .film1 .t1{ animation:tropfen 1.5s linear infinite } .film1 .t2{ animation:tropfen 1.5s linear .35s infinite } .film1 .t3{ animation:tropfen 1.5s linear .7s infinite } /* Der Arm wischt langsam über den Kopf, der Körper wippt leicht unter dem Wasser */ @keyframes wischen{ 0%,100%{ transform:rotate(0) } 50%{ transform:rotate(-13deg) } } .film1 .arm-r{ animation:wischen 3s ease-in-out infinite; transform-origin:46px 46px } @keyframes duschen{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(1.4px) } } .film1 .koerper{ animation:duschen 2.4s ease-in-out infinite } /* 2 · Hitzewellen steigen auf, der Körper atmet */ @keyframes steigen{ 0% { transform:translateY(8px) scaleY(.85); opacity:0 } 30% { opacity:.8 } 100% { transform:translateY(-12px) scaleY(1.1); opacity:0 } } .film2 .w1{ animation:steigen 2.8s ease-in-out infinite } .film2 .w2{ animation:steigen 2.8s ease-in-out .9s infinite } @keyframes atmen{ 0%,100%{ transform:scaleY(1) } 50%{ transform:scaleY(1.035) } } .film2 .atmen{ animation:atmen 3.6s ease-in-out infinite; transform-origin:40px 72px } /* 3 · Der Guss wandert von unten nach oben — genau die Regel des Schrittes */ @keyframes guss{ 0% { opacity:0; transform:translateY(6px) } 20% { opacity:.95 } 60% { opacity:.95 } 100% { opacity:0; transform:translateY(-4px) } } .film3 .g1{ animation:guss 2.7s ease-in-out infinite } .film3 .g2{ animation:guss 2.7s ease-in-out .45s infinite } .film3 .g3{ animation:guss 2.7s ease-in-out .9s infinite } /* Beim kalten Abschrecken fröstelt die Figur — kurzes, feines Zittern */ @keyframes zittern{ 0%,100%{ transform:translateX(0) } 20%{ transform:translateX(-.9px) } 60%{ transform:translateX(.9px) } } .film3 .koerper{ animation:zittern .5s ease-in-out infinite } /* 4 · Ruhen: der Brustkorb hebt sich, aus dem Becher steigt Dampf */ @keyframes ruhen{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-1.6px) } } .film4 .ruhen{ animation:ruhen 4.2s ease-in-out infinite } @keyframes dampf{ 0% { opacity:0; transform:translateY(4px) } 35% { opacity:.85 } 100% { opacity:0; transform:translateY(-9px) } } .film4 .d1{ animation:dampf 3.1s ease-in-out infinite } .film4 .d2{ animation:dampf 3.1s ease-in-out 1.1s infinite } /* ⭐ KEIN Abschalten mehr bei reduzierter Bewegung. Früher stand hier `animation:none !important` — genau das hat David die Filmchen tot erscheinen lassen (er hat „Bewegung reduzieren" an). Da die Figuren jetzt im Grundzustand ohnehin still stehen (Animation auf 0 % geparkt) und sich NUR beim Drüberfahren bewegen, ist das unbedenklich: es läuft erst auf seine Handlung hin, nicht von selbst. */ /* ═══ 20 · Häufige Fragen (03.09.2026) ═══════════════════════════════════ Als
/ gebaut, nicht mit JavaScript: aufklappbar ohne eine Zeile Skript, von Haus aus mit der Tastatur bedienbar, und Suchmaschinen lesen den Antworttext auch im zugeklappten Zustand. */ .faq{ border-top:1px solid var(--linie-fein) } .faq-punkt{ border-bottom:1px solid var(--linie-fein); background:none; } .faq-punkt > summary{ display:flex; align-items:center; gap:14px; padding:clamp(15px,1.7vw,20px) 0; cursor:pointer; list-style:none; font-family:var(--schrift-titel); font-weight:400; font-size:clamp(1.02rem,1.5vw,1.22rem); line-height:1.35; color:var(--tinte); transition:color var(--t-mittel) var(--weich); } .faq-punkt > summary::-webkit-details-marker{ display:none } /* Das Zeichen rechts: ein Strich, der beim Aufklappen zum Kreuz kippt. Rein aus CSS, damit es keine Schriftart braucht, die auf Windows fehlt. */ .faq-punkt > summary::after{ content:""; margin-left:auto; flex:0 0 14px; width:14px; height:14px; position:relative; background: linear-gradient(var(--akzent),var(--akzent)) center/14px 1.5px no-repeat, linear-gradient(var(--akzent),var(--akzent)) center/1.5px 14px no-repeat; transition:transform var(--t-mittel) var(--weich), opacity var(--t-mittel) var(--weich); } .faq-punkt[open] > summary::after{ transform:rotate(135deg) } @media (hover:hover){ .faq-punkt > summary:hover{ color:var(--akzent) } } .faq-punkt > summary:focus-visible{ outline:2px solid var(--akzent); outline-offset:3px; border-radius:4px; } .faq-antwort{ padding:0 0 clamp(16px,1.9vw,22px); max-width:54ch } .faq-antwort p{ margin:0; color:var(--tinte-2); font-size:.97rem; line-height:1.66 } .faq-antwort a{ color:var(--akzent); text-underline-offset:3px } /* Beim Aufklappen sanft einblenden — nur die Antwort, nicht die Zeile, sonst springt die Liste. Bei abgeschalteter Bewegung entfällt es. */ /* ⚠️ 17.09.2026 — hier stand `@media all`. Das heißt: Der Effekt läuft NUR, wenn im Betriebssystem keine reduzierte Bewegung eingestellt ist. David hat sie dauerhaft an und sah diese Effekte deshalb nie — während sie auf dem iPhone liefen. Genau der Unterschied, über den er sich gewundert hat. Ganz AUS bleibt dem Schalter unten rechts vorbehalten (`.bewegung-aus`), der schaltet diese Effekte weiterhin vollständig ab. */ @media (min-width:0px){ .faq-punkt[open] .faq-antwort{ animation:faq-auf .34s var(--aus) } @keyframes faq-auf{ from{ opacity:0; transform:translateY(-5px) } } } /* ═══ 21 · Feinschliff (03.09.2026) ═══════════════════════════════════════ Gemessen an der Live-Seite, nicht nach Gefühl: elf Absätze liefen über 85 Zeichen je Zeile, der längste über 145. Lesbar sind 60 bis 75 — darüber verliert das Auge beim Zeilensprung die Spur. */ .preis-hinweis, .hinweis, .stimmen-fuss, .band > .mitte > .fuehrung, .band > .mitte > p:not(.wortmarke):not(.rubrik){ max-width:56ch; /* ≈ 74 echte Zeichen, siehe die ch-Notiz weiter unten */ } /* Im geteilten Layout steht der Text ohnehin in einer schmalen Spalte — dort würde die Begrenzung nichts tun und nur Regeln verdoppeln. */ .geteilt .preis-hinweis, .geteilt .hinweis{ max-width:none } /* Der Abbinder unter den Stimmen ist Beiwerk: mittig, nicht linksbündig über die ganze Breite gezogen. */ .stimmen-fuss{ margin-inline:auto; text-align:center } /* ── Weiche Naht zwischen den Bändern ───────────────────────────────────── Zwischen zwei Bändern stand bisher eine harte Kante. Ein schmaler Verlauf in der Farbe des FOLGENDEN Bandes lässt sie ineinanderlaufen — sichtbar genug, dass es weicher wirkt, unsichtbar genug, dass niemand es benennt. */ /* ⛔⛔ NICHT ueber `::before` bauen: Die grosse Kennziffer im Band benutzt dasselbe Pseudoelement (kern.css Zeile 124). Ein zweites `::before` ueberschreibt sie und die Nummern 02 bis 12 verschwinden lautlos — gemessen am 03.09.2026. Deshalb `::after`, das ist hier frei. */ .band{ position:relative } .band + .band::after{ content:""; position:absolute; left:0; right:0; top:0; height:clamp(60px,7vw,110px); pointer-events:none; z-index:0; background:linear-gradient(to bottom, rgba(0,0,0,.22), transparent); } .band > .mitte{ position:relative; z-index:1 } /* ── Der Anstrich am Absatzanfang ───────────────────────────────────────── Ein feiner Strich links vor dem ersten Absatz eines Bandes. Das ist die Art Detail, die man nicht bemerkt, aber vermisst: Er gibt dem Text einen Anfang, statt ihn im Raum beginnen zu lassen. */ /* ⛔ NICHT `:first-of-type` nehmen: Vor der `.fuehrung` stehen andere

-Elemente (Wortmarke, Rubrik), damit trifft die Regel nur dort, wo die Führung zufällig der erste Absatz ist — gemessen: null Treffer. `.fuehrung + .fuehrung` schliesst Folgeabsätze aus, das reicht. */ .band > .mitte > .fuehrung{ position:relative } .band > .mitte > .fuehrung::before{ content:""; position:absolute; left:-22px; top:.62em; width:12px; height:1px; background:var(--zier); opacity:.45; } /* Nur der ERSTE Absatz bekommt den Strich — bei jedem sähe es aus wie eine Aufzählung, die keine ist. */ .band > .mitte > .fuehrung + .fuehrung::before{ display:none } @media (max-width:900px){ .band > .mitte > .fuehrung::before{ display:none } } /* ── Text markieren ─────────────────────────────────────────────────────── Wer etwas kopiert (eine Adresse, einen Preis), soll die Hausfarbe sehen, nicht das Browser-Blau. Kostet zwei Zeilen, wirkt sofort durchdacht. */ ::selection{ background:var(--wein); color:#fff } ::-moz-selection{ background:var(--wein); color:#fff } /* Zahlen in Tabellen: `tabular-nums` war bereits gesetzt (nachgemessen am 03.09.2026, greift auf der Zimmerseite). Hier nur noch die grossen Kennzahlen und die Note nachgezogen, die es noch nicht hatten. */ .zahl-gross, .note b{ font-variant-numeric:tabular-nums } /* ── Bindestrich-Trennung für lange Wörter ──────────────────────────────── „König-Laurin-Suite" und „Panoramafenster" sprengen schmale Spalten am Handy. Trennung nur dort, wo es eng wird. */ @media (max-width:620px){ .band h2, .band h3, .zimmerblock h3{ hyphens:auto; -webkit-hyphens:auto } } /* ═══ 22 · 360°-Rundgänge (03.09.2026) ═══════════════════════════════════ Das Fenster, in dem die Google-Touren laufen, und die Knöpfe, die es öffnen. Ein echtes

: bringt Fokusfalle, Escape und Abdunklung von Haus aus mit — nichts davon muss nachgebaut werden. */ .rundgang{ border:0; padding:0; margin:auto; width:min(96vw, 1200px); max-width:none; max-height:92vh; background:var(--papier-3); color:var(--tinte); border-radius:calc(var(--radius) * 2); box-shadow:0 40px 90px -30px rgba(0,0,0,.9); overflow:hidden; } .rundgang::backdrop{ background:rgba(8,8,10,.86); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); } .rundgang-kopf{ display:flex; align-items:center; gap:14px; padding:14px 18px; border-bottom:1px solid var(--linie-fein); } .rundgang-titel{ font-family:var(--schrift-titel); font-size:1.15rem; color:var(--tinte) } .rundgang-zu{ margin-left:auto; width:40px; height:40px; border-radius:50%; border:1px solid var(--linie); background:none; color:var(--tinte); font-size:1.5rem; line-height:1; cursor:pointer; transition:border-color var(--t-mittel) var(--weich), color var(--t-mittel) var(--weich); } @media (hover:hover){ .rundgang-zu:hover{ border-color:var(--akzent); color:var(--akzent) } } .rundgang-zu:focus-visible{ outline:2px solid var(--akzent); outline-offset:3px } .rundgang-buehne{ aspect-ratio:16/9; max-height:70vh; background:#000 } .rundgang-buehne iframe{ width:100%; height:100%; border:0; display:block } .rundgang-hinweis{ margin:0; padding:10px 18px 14px; font-size:.78rem; color:var(--leise) } /* Solange das Fenster offen ist, scrollt die Seite dahinter nicht mit. */ .rundgang-offen{ overflow:hidden } /* ⚠️ 17.09.2026 — hier stand `@media all`. Das heißt: Der Effekt läuft NUR, wenn im Betriebssystem keine reduzierte Bewegung eingestellt ist. David hat sie dauerhaft an und sah diese Effekte deshalb nie — während sie auf dem iPhone liefen. Genau der Unterschied, über den er sich gewundert hat. Ganz AUS bleibt dem Schalter unten rechts vorbehalten (`.bewegung-aus`), der schaltet diese Effekte weiterhin vollständig ab. */ @media (min-width:0px){ .rundgang[open]{ animation:rundgang-auf .32s var(--aus) } @keyframes rundgang-auf{ from{ opacity:0; transform:translateY(12px) scale(.985) } } } /* Der Knopf neben „Diese Kategorie anfragen": ein kleines 360°-Siegel vor dem Text, damit man ihn vom Anfrage-Knopf unterscheidet. */ .rundgang-knopf{ display:inline-flex; align-items:center; gap:9px } .rundgang-knopf > i{ font:600 .64rem/1 var(--schrift-text); letter-spacing:.08em; font-style:normal; padding:4px 7px; border:1px solid currentColor; border-radius:999px; opacity:.8; } /* Die Galerie auf der Startseite: Kacheln sind hier