/* ========================================================================== Hotel Schloss Lehen — ein Stylesheet für die ganze Website. ========================================================================== Diese Datei wird in Duda einmal site-weit eingebunden (Site-wide HTML). Deshalb gelten zwei Regeln ohne Ausnahme: 1. Jeder Selektor hängt an .hsl-root. Es gibt keine Regel für body, html, a, img oder *. Was außerhalb unseres Wrappers steht, gehört dem Baukasten des Auftraggebers und wird nicht angefasst. 2. Kein Schriftname steht in einer Regel — nur var(--font-display) und var(--font-text). Die Namen stehen ausschließlich in den @font-face- Blöcken und in den beiden Tokens ganz unten in diesem Abschnitt. Farben laufen über die semantischen Aliase (--surface-*, --text-*, --accent, --line). Radius 0, keine Schatten. ========================================================================== */ /* --- Schriften, lokal --------------------------------------------------- Kein Google-Fonts-CDN mehr: Die Dateien liegen auf unserem Host. Damit sie von der Duda-Domain aus laden, braucht der Host für /assets/fonts/ den Header Access-Control-Allow-Origin: * — siehe .htaccess im Projekt. Fraunces: Anzeigeschrift für die großen Grade. Variabel, mit den Achsen opsz 9–144 und wght 100–900. SOFT und WONK sind beim Bauen auf 0 festgesetzt — wir verwenden sie nirgends, und ohne diese Festlegung käme die Datei mit ihren Vorgaben WONK 1 und wght 900 daher, also mit den schrägen Alternativformen in Schwarz. Glyphendeckung geprüft: ä ö ü Ä Ö Ü, ß, „ “ ‚ ‘, – —, alle Ziffern, €, die französischen Akzente und — anders als bei der Vorgängerschrift — auch der Mittelpunkt U+00B7. Lizenz: SIL Open Font License 1.1 (font/Fraunces/OFL.txt). Die Einbindung als Webfont ist damit ausdrücklich gedeckt; die offene Frage zur Webfont-Lizenz der Vorgängerschrift entfällt. Zeichenvorrat auf latin und latin-ext beschnitten: 349 kB TTF werden so zu 94 kB woff2, mit beiden Achsen unverändert stufenlos. Inter: variabel, Achse wght 100–900. Zwei Schnitte (latin, latin-ext) statt sieben Subsets — mehr braucht ein deutschsprachiges Haus nicht. */ @font-face{ font-family:"Fraunces"; src:url("../fonts/Fraunces.woff2") format("woff2-variations"), url("../fonts/Fraunces.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; } /* Kursiv ist bei Fraunces eine eigene Datei, keine Neigung des geraden Schnitts. Ohne sie fiele der Browser auf synthetischen Schrägstellung zurück — dieselbe Zeichnung, nur geschert. Das ist unten mit font-synthesis:none abgeschaltet, deshalb muss die Datei hier stehen. Gebraucht wird sie an genau einer Stelle: dem hervorgehobenen Wort in der Überschrift des Hero. Sie lädt trotzdem nur, wenn diese Stelle vorkommt — der Browser holt eine Schriftdatei erst, wenn ein Zeichen sie anfordert. */ @font-face{ font-family:"Fraunces"; src:url("../fonts/Fraunces-Italic.woff2") format("woff2-variations"), url("../fonts/Fraunces-Italic.woff2") format("woff2"); font-weight:100 900; font-style:italic; font-display:swap; } @font-face{ font-family:"Inter"; src:url("../fonts/Inter-latin.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA, U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193, U+2212,U+2215,U+FEFF,U+FFFD; } @font-face{ font-family:"Inter"; src:url("../fonts/Inter-latin-ext.woff2") format("woff2"); font-weight:100 900; font-style:normal; font-display:swap; unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF, U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020, U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; } .hsl-root{ --font-display:"Fraunces",Georgia,"Times New Roman",serif; --font-text:"Inter","Helvetica Neue",Arial,sans-serif; /* Keine gerechneten Schnitte. Fehlt eine Datei, soll das auffallen und nicht still durch eine Scherung oder eine Verfettung überdeckt werden — beides sieht bei einer Serifenschrift sofort falsch aus. */ font-synthesis:none; -webkit-font-synthesis:none; } .hsl-root{/* base palette */ --nachtblau:#0E1E33; --tiefblau:#081524; --elfenbein:#FFFDF8; --sand:#F7F1E4; --daemmerung:#A9B4C4; --bronze:#B3893C; --bronze-hell:#C9A25A; --bronze-deep:#8E6C2F; --bronze-dunkel:#8A692E; --sandpanel:#E4DCCE; /* semantic aliases */ --surface-base:var(--nachtblau); --surface-deep:var(--tiefblau); --surface-panel:var(--sandpanel); --text-body:var(--elfenbein); --text-secondary:var(--daemmerung); --text-on-panel:var(--nachtblau); --text-on-panel-secondary:#3A4A60; --accent:var(--bronze); --accent-light:var(--bronze-hell); --line:rgba(179,137,60,.32); --line-strong:var(--bronze); --on-accent:#FFFFFF; /* Schrift auf Horn — siehe Abschnitt F */ /* Zustände in Formularen. Beide sind auf Nachtblau und auf Elfenbein lesbar; getragen wird die Aussage aber vom Text, nicht von der Farbe. */ --fehler:#D98A6A; --erfolg:#8FB08A; --line-on-panel:rgba(14,30,51,.25); --image-scrim:linear-gradient(180deg,rgba(8,21,36,0) 0%,rgba(8,21,36,.35) 55%,rgba(8,21,36,.75) 100%); /* @kind other */ --image-placeholder:#152A45;} .hsl-root{--type-display-size:clamp(48px,7vw,96px); --type-display-lh:1.02; --type-display-ls:-0.02em; --type-h1-size:clamp(36px,5vw,64px); --type-h1-lh:1.06; --type-h2-size:clamp(28px,3.6vw,44px); --type-h2-lh:1.1; --type-h3-size:clamp(22px,2vw,26px); --type-h3-lh:1.2; --type-eyebrow-size:12px; --type-eyebrow-ls:0.22em; --type-body-size:17px; --type-body-lh:1.7; --type-small-size:14px; --type-small-lh:1.6; --type-button-size:13px; --type-button-ls:0.12em; --weight-regular:400; --weight-medium:500; /* Schrift auf Horn: fest, siehe Abschnitt F. */ --type-akzent-size:16px; --weight-akzent:600; --type-akzent-ls:0.02em;} .hsl-root .sl-display,.hsl-root .sl-h1,.hsl-root .sl-h2,.hsl-root .sl-h3{font-family:var(--font-display);font-weight:400;color:var(--text-body);margin:0} /* Keine automatische Silbentrennung in großen Graden — lange Wörter per
umbrechen oder eine Stufe kleiner setzen. */ .hsl-root .sl-display,.hsl-root .sl-h1{hyphens:none} /* Überschriften und Augenbrauen nie automatisch trennen (12.10.2026, „Her-zen“ auf dem Telefon). Nur wo ein ­ steht. Fließtext darf. */ .hsl-root :is(h1,h2,h3,.sl-display,.sl-h1,.sl-h2,.sl-h3,.sl-eyebrow){hyphens:manual} .hsl-root .sl-display{font-size:var(--type-display-size);line-height:var(--type-display-lh);letter-spacing:var(--type-display-ls)} .hsl-root .sl-h1{font-size:var(--type-h1-size);line-height:var(--type-h1-lh);letter-spacing:-0.015em} .hsl-root .sl-h2{font-size:var(--type-h2-size);line-height:var(--type-h2-lh);letter-spacing:-0.01em} .hsl-root .sl-h3{font-size:var(--type-h3-size);line-height:var(--type-h3-lh)} .hsl-root .sl-eyebrow{font-family:var(--font-text);font-weight:500;font-size:var(--type-eyebrow-size);letter-spacing:var(--type-eyebrow-ls);text-transform:uppercase;color:var(--accent);margin:0} .hsl-root .sl-body{font-family:var(--font-text);font-weight:400;font-size:var(--type-body-size);line-height:var(--type-body-lh);color:var(--text-body);margin:0;text-wrap:pretty} .hsl-root .sl-small{font-family:var(--font-text);font-weight:400;font-size:var(--type-small-size);line-height:var(--type-small-lh);color:var(--text-secondary);margin:0} /* --- Abstandsskala ------------------------------------------------------- Eine Grundeinheit, acht Stufen. Jede Stufe ist ein Vielfaches von 8 px; andere Werte gibt es für Abstände nicht. Die Stufen stehen als Rechnung da, damit die Herkunft sichtbar bleibt. 2xs 8 ×1 l 48 ×6 xs 16 ×2 xl 64 ×8 s 24 ×3 2xl 96 ×12 m 32 ×4 3xl 128 ×16 Senkrecht greifen nur drei Regeln auf diese Skala zu — siehe den Block „Vertikaler Rhythmus" am Ende der Datei. Die Regeln lesen nicht die Stufen direkt, sondern die drei Abstands-Tokens darunter; auf schmalen Schirmen wird nur das Token umgestellt, nie die Regel. */ .hsl-root{ --space-unit:8px; --space-2xs:calc(var(--space-unit) * 1); --space-xs:calc(var(--space-unit) * 2); --space-s:calc(var(--space-unit) * 3); --space-m:calc(var(--space-unit) * 4); --space-l:calc(var(--space-unit) * 6); --space-xl:calc(var(--space-unit) * 8); --space-2xl:calc(var(--space-unit) * 12); --space-3xl:calc(var(--space-unit) * 16); /* Die drei senkrechten Regeln. */ --abstand-sektion:var(--space-3xl); /* 1 — zwischen Sektionen */ --abstand-kopf:var(--space-xl); /* 2 — Sektionskopf → Inhalt, Block → Block */ --abstand-unter:var(--space-m); /* 3 — Unterüberschrift → Inhalt */ /* Satz innerhalb eines Textblocks — gehört zur Typografie, nicht zum Layout. */ --abstand-marke:var(--space-xs); /* Augenbraue → Überschrift */ --abstand-absatz:var(--space-s); /* Absatz → Absatz */ --container:1240px;--gutter:32px;--gutter-mobile:20px; --radius:0px;--border-hairline:1px; /* Vier Verhältnisse, jedes mit eigenem Wert. Kein Alias: Der Versuch, über --ratio-portrait pauschal aufs Querformat umzustellen, hat sämtliche Hochformate der Website mit beschnitten. Querformat steht nur dort, wo es ausdrücklich bestellt ist — die Klasse am Kader entscheidet, nicht das Token. */ --ratio-portrait:2/3; /* @kind other */ --ratio-landscape:16/9; /* @kind other */ --ratio-card:3/2; /* @kind other — Kacheln */ --ratio-wide:16/9; /* @kind other — Vollbreitblöcke */ /* AUSNAHME, bewusst: nur „Unser Haus" auf der Startseite. Links steht dort viel Text; ein Querformat reichte nicht an dessen Höhe heran. */ --ratio-square:1/1; /* @kind other — nur index.html #hsl-haus */} /* Sprungziele: Der Kopf klebt oben. Ohne diesen Rand läge ein Anker (zimmer.html#neubau, kontakt.html#hsl-formular …) unter dem Kopf. */ .hsl-root [id]{scroll-margin-top:calc(var(--header-h,132px) + var(--space-s))} /* Global element defaults. Dark ground, ivory text, bronze links. */ .hsl-root{background:var(--surface-base)} .hsl-root{margin:0;background:var(--surface-base);color:var(--text-body);font-family:var(--font-text);font-weight:400;font-size:var(--type-body-size);line-height:var(--type-body-lh);-webkit-font-smoothing:antialiased} /* --- Die Fläche um den Wrapper ------------------------------------------- Sichtbar war ein heller Rahmen rings um die Seite. Er kam nicht von einer Linie: bringt vom Browser 8px Rand mit, und seit der Reset nur noch innerhalb von .hsl-root gilt, wird der nicht mehr genullt. Der Wrapper trägt seine eigene Fläche, der 8px-Streifen daneben blieb in der Standardfarbe des Browsers stehen — in der dunklen Ansicht ein weißer Rahmen. Behoben mit :has(), und zwar genau so eng wie nötig: Die Regel greift nur, wenn unser Wrapper UNMITTELBARES Kind von ist — also wenn unsere Seite das ganze Dokument ist. In Duda steckt das Widget mehrere Ebenen tief in den Containern des Baukastens; dort trifft der Selektor nicht zu und wir fassen fremdes nicht an. Die Klasse .hsl-root selbst und die Bindung aller Selektoren an sie bleiben unverändert — sie ist die Voraussetzung für den Einbau und hat mit dem Rahmen nichts zu tun. */ body:has(> .hsl-root){margin:0;padding:0} /* Beim Überziehen am oberen oder unteren Rand (Gummiband unter macOS und iOS) schaut sonst dieselbe Standardfläche hervor. Der feste Untergrund liegt hinter allem und nimmt die Farbe aus demselben Token wie der Wrapper — keine zweite Stelle, an der eine Farbe gepflegt werden muss. */ .hsl-root::before{ content:"";position:fixed;inset:0;z-index:-1; background:var(--surface-base); pointer-events:none; } .hsl-root,.hsl-root *,.hsl-root *::before,.hsl-root *::after{box-sizing:border-box} .hsl-root a:where(:not(.ibe__einbau *)){color:var(--accent-light);text-decoration:none;border-bottom:1px solid var(--line);transition:border-color .3s ease,color .3s ease} .hsl-root a:where(:not(.ibe__einbau *)):hover{color:var(--elfenbein);border-color:var(--accent-light)} .hsl-root img:where(:not(.ibe__einbau *)){display:block;max-width:100%} .hsl-root ::selection{background:var(--bronze);color:#FFFFFF} /* ========================================================================== Hotel Schloss Lehen — Startseite, Layout und Themes. Farben ausschließlich über die semantischen Aliase (--surface-*, --text-*, --accent, --line). Die Palette aus tokens/colors.css bleibt unangetastet; die helle Theme belegt dieselben Aliase nur neu. Kein Schriftname in dieser Datei — nur var(--font-display)/var(--font-text). Radius 0, keine Schatten. ========================================================================== */ /* --- Themes ------------------------------------------------------------ */ /* Dunkel ist der Auslieferungszustand aus tokens/colors.css. Hier nur das, was dort nicht vorgesehen ist. */ .hsl-root{/* Der Header ist in beiden Themes dunkelblau. Er bekommt deshalb einen eigenen, festen Satz — wie der Text über Bildern. Alles im Header greift auf diese Werte zu, nicht auf die allgemeinen Aliase. Die Fläche ist deckend statt der 92 %, die das Designsystem vorsieht: Bei Transparenz schlägt durch, was gerade darunter liegt — in der hellen Theme Elfenbein, in der dunklen Nachtblau — und der Header wechselte sichtbar die Farbe. Deckend bleibt er in beiden Themes und über jeder Sektionsfläche exakt gleich. */ --header-surface:var(--nachtblau); --header-text:var(--elfenbein); --header-text-secondary:var(--daemmerung); --header-accent:var(--bronze); --header-accent-light:var(--bronze-hell); --header-line:rgba(179,137,60,.32); --scrim-text:var(--elfenbein); --scrim-text-secondary:var(--daemmerung); --scrim-accent:var(--bronze); --scrim-accent-light:var(--bronze-hell); --scrim-line:rgba(179,137,60,.32); /* Fläche der Buchungsleiste über dem Bild — folgt dem Scrim, nicht der Theme. */ --scrim-surface:rgba(8,21,36,.55); /* Der Heroinhalt steht jetzt mittig und füllt fast die volle Höhe. Ein nach oben auslaufender Verlauf träfe seinen oberen Rand nicht mehr, darum deckt das Scrim des Hero durchgehend — nirgends unter 0.66, dem gemessenen Bedarf des Motivs (0.615). --image-scrim bleibt unverändert und gilt weiter für die übrigen Bildblöcke. */ --scrim-hero:linear-gradient(to top, rgba(8,21,36,.90) 0, rgba(8,21,36,.76) 50%, rgba(8,21,36,.66) 100%);} /* Helle Theme — spiegelbildliche Belegung aus derselben Palette. Bronze wird abgedunkelt: #hsl-B3893C erreicht auf Elfenbein nur 3.15:1 und auf Sand 2.84:1 und ist für 12px-Eyebrows damit unbrauchbar. #8A692E ist derselbe Farbton (H 38.8°, S 0.50), nur dunkler (L 0.47 → 0.36), und erreicht 4.99:1 bzw. 4.51:1. */ .hsl-root[data-theme="light"]{--surface-base:var(--elfenbein); --surface-deep:var(--sand); --surface-panel:var(--nachtblau); --text-body:var(--nachtblau); --text-secondary:#3A4A60; /* = --text-on-panel-secondary aus colors.css */ --text-on-panel:var(--elfenbein); --text-on-panel-secondary:var(--daemmerung); --accent:var(--bronze-dunkel); --accent-light:#6E5531; --line:rgba(138,105,46,.42); --line-strong:var(--bronze-dunkel); --line-on-panel:rgba(255,253,248,.25); --on-accent:#FFFFFF; --fehler:#9E3B14; --erfolg:#3F6B39;} /* Das Sandpanel ist die einzige Fläche, die der Grundfläche entgegenläuft. Die Bronze dreht dort mit: auf hellem Panel die abgedunkelte, auf dunklem Panel die originale. */ .hsl-root .panel{--accent:var(--bronze-dunkel); --accent-light:#6E5531; --line:rgba(138,105,46,.42);} .hsl-root[data-theme="light"] .panel{--accent:var(--bronze); --accent-light:var(--bronze-hell); --line:rgba(179,137,60,.32);} /* Über Bildern bleibt das Scrim in beiden Themes dunkel — Text und Linien darauf folgen deshalb bewusst der dunklen Zuordnung. */ .hsl-root .frame__box,.hsl-root .hero,.hsl-root .viewport-block,.hsl-root .stimmen__bg{--text-body:var(--scrim-text); --text-secondary:var(--scrim-text-secondary); --accent:var(--scrim-accent); --accent-light:var(--scrim-accent-light); --line:var(--scrim-line);} /* --- Grundgerüst ------------------------------------------------------- */ .hsl-root{background:var(--surface-base);color:var(--text-body)} .hsl-root .container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)} /* Sektionen als Farbbänder: Grundfläche und „leise" Fläche im Wechsel. Die Abstände zwischen Sektionen regelt der Block „Vertikaler Rhythmus" am Ende der Datei. */ .hsl-root .section{background:var(--surface-base)} .hsl-root .section--quiet{background:var(--surface-deep)} .hsl-root .measure{max-width:58ch} /* Ungleiche Spalten — kein 3-up-Gleichmaß (Ausnahmen dokumentiert). */ .hsl-root .split{display:grid;gap:var(--space-2xl);align-items:start} .hsl-root .split--wide-left{grid-template-columns:1.15fr 1fr} .hsl-root .split--wide-right{grid-template-columns:1fr 1.15fr} .hsl-root .split--even{grid-template-columns:1fr 1fr} .hsl-root .split--center{align-items:center} .hsl-root .section-head--mitte{text-align:center;max-width:52ch;margin-inline:auto} /* tokens/elements.css setzt für a:hover fest Elfenbein — in der hellen Theme verschwindet die Linkfarbe damit auf hellem Grund. Hier auf den Alias umgestellt: dunkle Theme heller, helle Theme dunkler. */ .hsl-root a:where(:not(.ibe__einbau *)):hover{color:var(--text-body)} /* --- Hairline ---------------------------------------------------------- */ .hsl-root .rule{height:1px;width:100%;background:var(--line);border:0;margin:0} .hsl-root .rule--vertical{width:1px;height:auto;align-self:stretch} .hsl-root .rule--panel{background:var(--line-on-panel)} /* --- Buttons ----------------------------------------------------------- */ .hsl-root .btn{display:inline-flex;align-items:center;justify-content:center; font-family:var(--font-text);font-weight:var(--weight-medium); font-size:var(--type-button-size);letter-spacing:var(--type-button-ls); text-transform:uppercase;line-height:1; padding:16px 32px;border:var(--border-hairline) solid var(--accent); border-radius:var(--radius);background:transparent;color:var(--text-body); cursor:pointer;text-decoration:none;white-space:nowrap; transition:background .3s ease,border-color .3s ease,color .3s ease;} .hsl-root .btn:hover{background:color-mix(in srgb,var(--accent) 12%,transparent); border-color:var(--accent-light);color:var(--text-body)} .hsl-root .btn--compact{padding:14px 26px} .hsl-root .btn--dark{color:var(--text-on-panel)} /* .btn:hover setzt sonst --text-body — auf dem Panel wäre das die Panelfarbe selbst, die Schrift verschwände beim Überfahren. */ .hsl-root .btn--dark:hover{color:var(--text-on-panel)} /* --- Pfeil-Link -------------------------------------------------------- */ .hsl-root .arrow-link{display:inline-flex;align-items:baseline;gap:10px; font-family:var(--font-text);font-weight:var(--weight-medium); font-size:var(--type-small-size);color:var(--text-body); text-decoration:none;border-bottom:var(--border-hairline) solid var(--line); padding-bottom:4px;transition:border-color .3s ease,color .3s ease;} .hsl-root .arrow-link:hover{border-color:var(--accent-light)} .hsl-root .arrow-link span{color:var(--accent-light)} /* --- Bildplatzhalter --------------------------------------------------- */ .hsl-root .frame{margin:0} .hsl-root .frame__box{position:relative;background:var(--image-placeholder);overflow:hidden; border:var(--border-hairline) solid var(--line);} .hsl-root .frame--portrait .frame__box{aspect-ratio:var(--ratio-portrait)} /* Bildhinweis (Durchgang 6, f2): kleine Beschriftung auf einem Bild, etwa „KI-generiert". Noch nirgends eingesetzt. Gebrauch — als letztes Kind eines Behälters mit position:relative (.frame__box, .hero, .viewport-block, .stimmen__bg):
…

KI-generiert

Ecke wählbar: --oben (rechts oben statt rechts unten), --links. Der Text ist Teil des Inhalts und wird vorgelesen; deshalb kein aria-hidden. Kontrast Elfenbein auf Nachtblau 88 %: über 12 : 1. */ .hsl-root .hsl-bildhinweis{ position:absolute;right:var(--space-2xs);bottom:var(--space-2xs);z-index:2; margin:0;padding:3px 8px;max-width:calc(100% - 2 * var(--space-2xs)); background:rgba(14,30,51,.88);color:var(--elfenbein); font-family:var(--font-text);font-size:11px;font-weight:var(--weight-medium); line-height:1.4;letter-spacing:.06em; pointer-events:none; } .hsl-root .hsl-bildhinweis--oben{bottom:auto;top:var(--space-2xs)} .hsl-root .hsl-bildhinweis--links{right:auto;left:var(--space-2xs)} .hsl-root .frame--landscape .frame__box{aspect-ratio:var(--ratio-landscape)} .hsl-root .frame--card .frame__box{aspect-ratio:var(--ratio-card)} .hsl-root .frame--wide .frame__box{aspect-ratio:var(--ratio-wide)} .hsl-root .frame--3-2 .frame__box{aspect-ratio:var(--ratio-card)} .hsl-root .frame--square .frame__box{aspect-ratio:var(--ratio-square)} .hsl-root .frame__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; text-align:center;padding:var(--space-s);margin:0; font-family:var(--font-text);font-weight:var(--weight-medium); font-size:var(--type-eyebrow-size);letter-spacing:var(--type-eyebrow-ls); text-transform:uppercase;color:var(--accent);} .hsl-root .frame__scrim{position:absolute;inset:0;background:var(--image-scrim)} /* Fotos füllen ihren Rahmen vollständig; das Seitenverhältnis steckt im Container, deshalb entsteht beim Laden kein Springen. */ .hsl-root .frame__img,.hsl-root .media-img{position:absolute;inset:0;width:100%;height:100%;max-width:none; object-fit:cover;display:block;} /* --- Chips und Datenreihen --------------------------------------------- */ .hsl-root .chips{display:flex;flex-wrap:wrap;gap:var(--space-2xs);list-style:none;margin:0;padding:0} /* Tags tragen überall dieselbe Gegenfläche — auf dunklem Grund hell, auf hellem Grund elfenbein. Ohne Füllung verschwammen sie mit dem Fließtext. */ .hsl-root .chips li{border:var(--border-hairline) solid var(--line);padding:6px 14px; font-family:var(--font-text);font-size:var(--type-small-size); line-height:var(--type-small-lh); background:var(--surface-panel);color:var(--text-on-panel);} .hsl-root[data-theme="light"] .chips li{background:var(--surface-base);color:var(--text-body)} /* Anlässe als Beschriftung, nicht als Knopf (Familien- und Firmenfeiern, Durchgang 5, f1): kein Rahmen, keine Fläche, kein Überfahrzustand, Pfeilzeiger. Getrennt nur durch Abstand — ein Trennzeichen stünde nach dem Umbruch am Zeilenanfang. */ .hsl-root .chips.chips--text{gap:var(--space-2xs) var(--space-m)} .hsl-root .chips.chips--text li, .hsl-root[data-theme="light"] .chips.chips--text li{ border:0;background:none;padding:0;cursor:default; color:var(--text-secondary);font-size:var(--type-small-size); letter-spacing:.04em} .hsl-root .datalist{list-style:none;margin:0;padding:0; border-top:var(--border-hairline) solid var(--line)} .hsl-root .datalist li{padding:var(--space-xs) 0; border-bottom:var(--border-hairline) solid var(--line)} .hsl-root .figure-num{font-family:var(--font-display);font-weight:var(--weight-regular); font-size:40px;line-height:1.1;color:var(--text-body)} /* ========================================================================== 1 — Header, zweistufig, sticky ========================================================================== */ .hsl-root .site-header{/* Feste dunkle Zuordnung — der Header dreht nicht mit der Theme. */ --text-body:var(--header-text); --text-secondary:var(--header-text-secondary); --accent:var(--header-accent); --accent-light:var(--header-accent-light); --line:var(--header-line); position:sticky;top:0;z-index:20; background:var(--header-surface); border-bottom:var(--border-hairline) solid var(--line);} .hsl-root .header-meta{border-bottom:var(--border-hairline) solid var(--line)} .hsl-root .header-meta__inner{display:flex;align-items:center;gap:var(--space-s); min-height:44px;flex-wrap:wrap; font-family:var(--font-text);font-size:var(--type-small-size); color:var(--text-secondary);} .hsl-root .header-meta__inner a{border-bottom:0;color:var(--text-secondary)} .hsl-root .header-meta__inner a:hover{color:var(--text-body)} .hsl-root .header-service{margin-left:auto;display:flex;align-items:center;gap:var(--space-s)} .hsl-root .header-service a{border-bottom:var(--border-hairline) solid transparent;padding-bottom:2px; color:var(--text-secondary);transition:color .3s ease,border-color .3s ease;} .hsl-root .header-service a:hover{color:var(--text-body);border-bottom-color:var(--accent)} /* Themenschalter — seit 12.10.2026 nur im Fuß (.site-foot__theme). */ .hsl-root .theme-toggle{display:inline-flex;align-items:center;justify-content:center; width:34px;height:28px;padding:0;cursor:pointer; background:transparent;border:var(--border-hairline) solid var(--line); border-radius:var(--radius);color:var(--text-secondary); transition:color .3s ease,border-color .3s ease,background .3s ease;} .hsl-root .theme-toggle:hover{color:var(--text-body);border-color:var(--accent-light); background:color-mix(in srgb,var(--accent) 12%,transparent)} .hsl-root .theme-toggle svg{width:15px;height:15px;display:block} .hsl-root .theme-toggle .icon-sun{display:none} .hsl-root[data-theme="light"] .theme-toggle .icon-sun{display:block} .hsl-root[data-theme="light"] .theme-toggle .icon-moon{display:none} /* Hauptzeile — Logo, Menü und Button teilen eine Mittellinie. Dafür sind die Innenabstände der Menüpunkte oben und unten symmetrisch. */ .hsl-root .header-main__inner{display:flex;align-items:center;gap:var(--space-s);min-height:96px;} .hsl-root .brand{border-bottom:0;display:inline-flex;align-items:center;gap:14px;flex:0 0 auto} .hsl-root .brand__mark{height:52px;width:auto} .hsl-root .brand__wortmarke{height:13px;width:auto} .hsl-root .nav{display:flex;align-items:center;gap:var(--space-m);margin-left:auto} .hsl-root .nav a:not(.btn){font-family:var(--font-text);font-weight:var(--weight-medium); font-size:var(--type-button-size);letter-spacing:var(--type-button-ls); text-transform:uppercase;color:var(--text-secondary);text-decoration:none; border-top:var(--border-hairline) solid transparent; border-bottom:var(--border-hairline) solid transparent; padding-block:4px; transition:color .3s ease,border-color .3s ease;} .hsl-root .nav a:not(.btn):hover{color:var(--text-body);border-bottom-color:var(--accent)} .hsl-root .nav a:not(.btn)[aria-current]{color:var(--text-body);border-bottom-color:var(--accent)} .hsl-root .nav__service,.hsl-root .nav__start{display:none} .hsl-root .header-cta{flex:0 0 auto} .hsl-root .burger{display:none;margin-left:auto;background:transparent; border:var(--border-hairline) solid var(--accent);border-radius:var(--radius); width:48px;height:44px;cursor:pointer;padding:0; transition:border-color .3s ease,background .3s ease;} .hsl-root .burger:hover{border-color:var(--accent-light); background:color-mix(in srgb,var(--accent) 12%,transparent)} .hsl-root .burger span{display:block;width:20px;height:1px;background:var(--text-body);margin:4px auto} /* ========================================================================== 2 — Hero: genau eine Bildschirmhöhe, zwei gleichwertige Wege ========================================================================== */ .hsl-root .hero{position:relative;width:100%;overflow:hidden; background:var(--image-placeholder); height:calc(100vh - var(--header-h,132px)); height:calc(100svh - var(--header-h,132px)); min-height:560px; display:flex;flex-direction:column;justify-content:center;} .hsl-root .hero__label{position:absolute;inset:0 0 auto;display:flex;justify-content:center; padding:var(--space-l) var(--space-s);margin:0; font-family:var(--font-text);font-weight:var(--weight-medium); font-size:var(--type-eyebrow-size);letter-spacing:var(--type-eyebrow-ls); text-transform:uppercase;color:var(--accent);text-align:center;} .hsl-root .hero__scrim{position:absolute;inset:0;background:var(--scrim-hero)} .hsl-root .hero__inner{position:relative;z-index:2;width:100%;padding-block:var(--space-xl)} /* Kompakter Hero (Events, 12.10.2026): etwa 45 % der Bildschirmhöhe, damit der Rechner darunter ohne langes Scrollen ins Bild kommt. */ .hsl-root .hero--kompakt{height:calc((100vh - var(--header-h,132px)) * .45); height:calc((100svh - var(--header-h,132px)) * .45);min-height:300px;justify-content:flex-end} .hsl-root .hero--kompakt .hero__inner{padding-block:var(--space-l)} /* Das hervorgehobene Wort in der Heroüberschrift: echter Kursivschnitt und Akzentfarbe, so wie im Entwurf des Auftraggebers. Die Achsen erbt es von .sl-display — font-variation-settings vererbt sich, das Wort läuft also mit opsz 144 und wght 400 wie die Zeile darum. Ohne die geerbte Angabe käme die Kursivdatei mit ihrer Vorgabe wght 900 und das Wort stünde fett in der Zeile. Die Regel hängt am Hero und nicht an .sl-display: Kursiv in Überschriften ist hier ein einzelner Akzent, kein Satzmittel der Website. In den Überschriften der übrigen Seiten bleibt unverändert. Die Farbe ist die volle Akzentfarbe. Über dem Hero gilt die feste dunkle Zuordnung, --scrim-accent ist dort dieselbe Bronze. */ .hsl-root .hero__betont{ font-style:italic; color:var(--accent); } /* AUSNAHME, bewusst und befristet: Der Eyebrow steht hier in Elfenbein statt in Bronze. Grund ist allein das aktuelle Motiv hero-ensemble.jpg — der Himmel hinter der Zeile ist so hell, dass Bronze dort nicht sicher trägt. Gilt ausschließlich für den Hero; alle anderen Eyebrows, auch die über Bildern, bleiben bronzefarben. Bei einem Bildwechsel neu bewerten. */ .hsl-root .hero__eyebrow{color:var(--scrim-text)} .hsl-root .hero__content{display:flex;flex-direction:column;align-items:center;text-align:center} .hsl-root .hero__content .sl-display{max-width:24ch} /* Zwei gleichwertige Wege, durch einen Längsteiler getrennt. Beide Zellen gleich hoch, dadurch stehen die Buttons auf einer Höhe. */ .hsl-root .hero-wege{display:grid;grid-template-columns:1fr 1px 1fr;gap:var(--space-xl); align-items:stretch;width:100%;max-width:860px} .hsl-root .hero-weg{display:flex;flex-direction:column;align-items:center;gap:var(--space-s)} .hsl-root .hero-weg .sl-body{max-width:34ch} .hsl-root .hero-weg .btn{margin-top:auto} /* ========================================================================== 3 — Unser Haus ========================================================================== */ .hsl-root .kennzahlen{list-style:none;margin:0;padding:0} .hsl-root .kennzahlen li{display:flex;justify-content:space-between;align-items:baseline; gap:var(--space-s);padding-bottom:var(--space-s); border-bottom:var(--border-hairline) solid var(--line)} .hsl-root .kennzahlen li+li{margin-top:var(--space-m)} .hsl-root .kennzahlen__label{font-family:var(--font-text);font-size:var(--type-small-size); color:var(--text-body)} /* ========================================================================== 4 — Zimmer ========================================================================== */ .hsl-root .room+.room{margin-top:var(--space-l);padding-top:var(--space-l); border-top:var(--border-hairline) solid var(--line)} /* ========================================================================== 5 — Gastronomie: vollflächiger Block auf Bildschirmhöhe, wie der Hero ========================================================================== */ .hsl-root .viewport-block{position:relative;width:100%;overflow:hidden; background:var(--image-placeholder); height:calc(100vh - var(--header-h,132px)); height:calc(100svh - var(--header-h,132px)); min-height:480px; display:flex;align-items:flex-end;} .hsl-root .viewport-block__label{position:absolute;inset:0 0 auto;display:flex;justify-content:center; padding:var(--space-l) var(--space-s);margin:0; font-family:var(--font-text);font-weight:var(--weight-medium); font-size:var(--type-eyebrow-size);letter-spacing:var(--type-eyebrow-ls); text-transform:uppercase;color:var(--accent);text-align:center;} .hsl-root .viewport-block__scrim{position:absolute;inset:0;background:var(--image-scrim)} .hsl-root .viewport-block__inner{position:relative;z-index:2;width:100%; padding-bottom:var(--space-xl)} /* ========================================================================== 6 — Veranstaltungen, Wechselsatz ========================================================================== */ /* Bild und Textfläche stoßen ohne Zwischenraum aneinander und sind gleich hoch. Die Textfläche bekommt die zur Sektion gegenläufige Fläche, damit die Hälfte als geschlossener Block liest. Die Bildseite wechselt von Block zu Block. */ /* Gleich breite Hälften, Bild und Text ohne Zwischenraum — waagerecht bündig. Auch senkrecht stoßen die Blöcke ohne Lücke aneinander — erst dadurch liest sich der Wechsel als durchgehendes Schachbrett. Bewusst gleiche Spalten: hier weicht die Seite vom „ungleiche Spalten"- Grundsatz des Systems ab, damit der Schachbrettsatz aufgeht. */ .hsl-root .wechsel{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch} .hsl-root .wechsel+.wechsel{margin-top:0} .hsl-root .wechsel--right{grid-template-columns:1fr 1fr} .hsl-root .wechsel--right .wechsel__media{grid-column:2;grid-row:1} .hsl-root .wechsel--right .wechsel__body{grid-column:1;grid-row:1} /* Querformat 3:2. Die Reihenhöhe kommt aus der Texthälfte; das Bild füllt seine Hälfte über cover, damit kein leeres Feld entsteht. Breite und Höhe sind beide gesetzt — sonst leitete aspect-ratio die Breite aus der Höhe ab und der Block liefe seitlich aus dem Raster. Die Mindesthöhe hält das Bild davon ab, bei kurzem Text zu einem Streifen zu werden. */ .hsl-root .wechsel__media{margin:0;min-height:320px} .hsl-root .wechsel__media .frame__box{width:100%;height:100%;aspect-ratio:auto} .hsl-root .wechsel__body{background:var(--surface-deep);padding:var(--space-xl); display:flex;flex-direction:column;justify-content:center} .hsl-root .section--quiet .wechsel__body{background:var(--surface-base)} /* Wechselsatz mit hochformatigem Kader (Gastronomie). Sonst füllt der Kasten die Höhe der Textseite und nimmt jedes Verhältnis an — ein Querformat verlor dort bis zur Hälfte seiner Breite. Hier hält der Kader 2:3 und gibt die Zeilenhöhe vor; die Textseite füllt mit ihrer Sandfläche auf, beide Hälften bleiben gleich hoch. Das trägt, solange der 2:3-Kasten höher ist als der Text — gemessen ab 1180px. Darunter stünde der Text über, deshalb bricht der Satz dort einspaltig um. */ .hsl-root .wechsel--hoch .wechsel__media{min-height:0} .hsl-root .wechsel--hoch .wechsel__media .frame__box{width:100%;height:auto; aspect-ratio:var(--ratio-portrait)} /* ========================================================================== 7 — Räume: drei gleiche Querformate 3:2 nebeneinander (bewusstes, freigegebenes Abweichen von „keine gleichförmige Kartenreihe"). Alle drei Kader stehen im selben Format wie der Platzhalter der Alten Kelter — die Reihe ist einheitlich, keine Zelle wird gestreckt. ========================================================================== */ .hsl-root .raeume{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 var(--space-m)} .hsl-root .raum{display:flex;flex-direction:column} /* Die vier Ebenen — Bild, Fakten, Bestuhlung, Button — teilen sich über alle Spalten hinweg dieselben Zeilen. Damit fluchten Fakten und Buttons auch dann, wenn eine Fakten-Zeile umbricht oder eine Spalte weniger Bestuhlungen hat. Ohne Subgrid greift der Flex-Fallback darunter. */ @supports (grid-template-rows: subgrid){ .hsl-root .raeume{grid-template-rows:auto auto auto auto} .hsl-root .raum{display:grid;grid-row:span 4;grid-template-rows:subgrid;row-gap:0} /* Ohne die Bestuhlungszeile — so steht der Block auf der Startseite, seit die Kapazitäten nur noch im Rechner stehen. Drei Spuren statt vier, sonst bliebe unter jeder Karte eine leere Zeile. */ .hsl-root .raeume--ohne-bestuhlung{grid-template-rows:auto auto auto} .hsl-root .raeume--ohne-bestuhlung .raum{grid-row:span 3} } /* Der Überhang der Plakette braucht Platz, sonst stößt sie an die Faktenzeile. Der Abstand steht als Rand, nicht als Innenabstand — sonst verschöbe er den Bezugsrahmen der absolut gesetzten Plakette mit. */ .hsl-root .raum__media{position:relative} /* Überhang der Plakette (24) plus Luft (16) — oben am Folgeelement. */ /* Überhang der Plakette (24) plus Abstand der Augenbraue (16), oben am Folgeelement. Spezifischer als .raum__fakten{margin:0} — sonst lag die Faktenzeile unter dem Namensschild. */ .hsl-root .raum > .raum__media + *{margin-top:calc(var(--space-s) + var(--abstand-marke))} /* Die Plakette liegt außerhalb von .frame__box, damit sie der Theme folgt und nicht der dunklen Zuordnung über dem Bild. Sie ist nach unten und links über die Bildkante hinausgeschoben und deshalb deckend: Sie liegt zur Hälfte auf dem Foto, zur Hälfte auf der Sektionsfläche. */ .hsl-root .raum__plate{position:absolute;left:0;bottom:calc(-1 * var(--space-s)); background:var(--surface-deep); border:var(--border-hairline) solid var(--accent); padding:12px 18px;margin:0; font-family:var(--font-text);font-weight:var(--weight-medium); font-size:var(--type-small-size);line-height:1.35;color:var(--text-body);} .hsl-root .section--quiet .raum__plate{background:var(--surface-base)} /* Ebene 1 — drei Fakten, in allen Spalten dieselben, daher von selbst bündig. */ .hsl-root .raum__fakten{list-style:none;margin:0;padding:var(--space-xs) var(--space-xs) var(--space-xs) 0;align-content:start; display:flex;flex-wrap:wrap;gap:6px 12px; border-bottom:var(--border-hairline) solid var(--line)} .hsl-root .raum__fakten li{display:inline-flex;align-items:center;gap:6px; font-family:var(--font-text);font-size:var(--type-small-size); line-height:var(--type-small-lh);color:var(--text-secondary)} /* Ebene 2 — nur die tatsächlich vorhandenen Bestuhlungen, keine Platzhalter. Der Wrapper schneidet die führende Trennlinie jeder Zeile ab. */ .hsl-root .sitze-wrap{overflow:hidden;padding-top:var(--space-xs)} .hsl-root .sitze{list-style:none;margin:0 0 0 -1px;padding:0; display:flex;flex-wrap:wrap;row-gap:var(--space-xs)} .hsl-root .sitze li{display:inline-flex;align-items:center;gap:8px; padding:2px 14px;border-left:var(--border-hairline) solid var(--line)} .hsl-root .sitz__name{font-family:var(--font-text);font-size:var(--type-small-size); line-height:var(--type-small-lh);color:var(--text-secondary)} .hsl-root .sitz__zahl{font-family:var(--font-text);font-size:var(--type-body-size); line-height:1.2;color:var(--text-body)} /* Ebene 3 — Button unten, dadurch in allen Spalten auf einer Höhe. Er läuft über die volle Spaltenbreite und steht deutlich von der Bestuhlung ab, damit er als Handlung liest — ohne Füllung. */ .hsl-root .raum .btn{align-self:stretch;justify-self:stretch;width:100%; padding-block:18px;margin-top:var(--space-m)} /* Waagerecht ein Zwischenraum von 32px: Ohne ihn wuchsen die drei Kader zu einem Band zusammen. Die Plakette hängt nur nach unten über die Bildkante (bottom:-24px, left:0) und ragt nicht seitlich heraus — der Zwischenraum bleibt frei. */ .hsl-root .raum{padding-right:0} /* Icons: Strich in Hairline-Stärke. stroke-width erbt in den -Schatten- baum, deshalb je Größe so gewählt, dass 1px auf dem Schirm ankommt. */ .hsl-root .sprite{position:absolute;width:0;height:0;overflow:hidden} .hsl-root .icon{display:block;flex:none;fill:none;stroke:currentColor; stroke-linecap:round;stroke-linejoin:round} .hsl-root .icon--fakt{width:18px;height:18px;stroke-width:1.34;color:var(--text-secondary)} .hsl-root .icon--seat{width:22px;height:22px;stroke-width:1.09;color:var(--accent)} .hsl-root .icon--leistung{width:18px;height:18px;stroke-width:1.34;color:var(--accent)} /* ========================================================================== 8 — Arrangements: zwei gleich breite, gleich hohe Hälften ========================================================================== */ .hsl-root .arrangements{list-style:none;margin:0;padding:0} .hsl-root .arrangement{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-xl); align-items:stretch} /* Wie bei den Veranstaltungen: Die Texthälfte gibt die Höhe vor, das Bild füllt seine Hälfte. So bleibt der Block kompakt. */ /* Das Bild behält 2:3 und richtet sich nach der Höhe der Texthälfte: Die Breite folgt dem Verhältnis, nicht umgekehrt — deshalb wird nichts beschnitten. max-width verhindert, dass es die Hälfte sprengt. */ .hsl-root .arrangement__media{margin:0;min-height:360px;display:flex;justify-content:flex-end} .hsl-root .arrangement__media .frame__box{aspect-ratio:var(--ratio-portrait); height:100%;width:auto;max-width:100%} /* Vier Eckdaten nebeneinander brauchen eine ganze Containerbreite. In der halben Spalte eines Arrangements stehen sie zu zweit in zwei Zeilen — sonst bricht „Samstag, 17. Oktober 2026" auf vier Zeilen um. */ .hsl-root .arrangement__main .eckdaten{grid-template-columns:1fr 1fr; justify-content:start;gap:var(--space-s) var(--space-l)} .hsl-root .arrangement+.arrangement{margin-top:var(--space-xl);padding-top:var(--space-xl); border-top:var(--border-hairline) solid var(--line)} .hsl-root .arrangement__main{display:flex;flex-direction:column} /* Gleich hohe Zeilen im Leistungsverzeichnis. */ .hsl-root .leistungen{list-style:none;margin:0;padding:0; border-top:var(--border-hairline) solid var(--line)} .hsl-root .leistungen li{display:flex;align-items:center;gap:10px;min-height:34px; padding:2px var(--space-2xs);border-bottom:var(--border-hairline) solid var(--line); font-family:var(--font-text);font-size:var(--type-small-size); line-height:var(--type-small-lh);color:var(--text-body);} /* Programm mit Uhrzeit und Beschreibung (White Party): zweizeilig, das Zeichen steht an der ersten Zeile. */ .hsl-root .leistungen--ablauf li{align-items:flex-start;padding-block:10px} .hsl-root .leistungen--ablauf .icon{margin-top:2px} .hsl-root .leistungen--ablauf strong{font-weight:600;color:var(--text-body)} /* Eckdaten der Veranstaltung als eigene Tafel innerhalb der Texthälfte. */ .hsl-root .eckdaten{margin:0;padding:var(--space-s); border:var(--border-hairline) solid var(--line); display:grid;grid-template-columns:repeat(4,auto);gap:var(--space-xs) var(--space-m); justify-content:space-between} .hsl-root .eckdaten dt{font-family:var(--font-text);font-weight:var(--weight-medium); font-size:var(--type-eyebrow-size);letter-spacing:var(--type-eyebrow-ls); text-transform:uppercase;color:var(--accent);margin:0 0 2px} .hsl-root .eckdaten dd{margin:0;font-family:var(--font-text); font-size:var(--type-small-size);line-height:1.35;color:var(--text-body)} .hsl-root .arrangement__main .btn{align-self:flex-start} /* White Party, kompakt (11.10.2026): Mit dem langen Programmtext wurde das Hochformat so hoch wie die Textspalte und der Block höher als der Bildschirm. Jetzt: Foto ganz (2:3, nicht beschnitten), aber in der Höhe begrenzt — höchstens Bildschirmhöhe minus Kopf und Abstände, die Breite folgt dem Verhältnis. Links der Text kompakter: Programm in zwei Spalten, Eckdaten in einer Zeile, Schlusssatz neben dem Knopf. */ .hsl-root .arrangement--kompakt{grid-template-columns:minmax(0,1fr) auto;align-items:start; --abstand-unter:var(--space-xs);--abstand-marke:var(--space-2xs)} .hsl-root .arrangement--kompakt .arrangement__media{min-height:0;display:block} .hsl-root .arrangement--kompakt .arrangement__seite{display:flex;flex-direction:column;gap:var(--space-s);width:min-content} /* Fotohöhe: Bildschirmhöhe minus Kopf, Abstände der Sektion und Eckdaten darunter (~175 px) — zwischen 320 und 560 px. */ .hsl-root .arrangement--kompakt .arrangement__media .frame__box{aspect-ratio:2/3;width:auto;max-width:none; height:clamp(320px, calc(100vh - var(--header-h,132px) - 2 * var(--space-xl) - 175px), 560px); height:clamp(320px, calc(100svh - var(--header-h,132px) - 2 * var(--space-xl) - 175px), 560px)} .hsl-root .arrangement--kompakt .arrangement__seite .eckdaten{grid-template-columns:auto auto;min-width:300px} .hsl-root .arrangement--kompakt .leistungen--ablauf li{padding-block:5px} .hsl-root .arrangement--kompakt .eckdaten{gap:var(--space-2xs) var(--space-s);padding:var(--space-xs) var(--space-s)} .hsl-root .arrangement__schluss{justify-content:space-between} .hsl-root .arrangement__schluss p{margin:0} @media (min-width:1080px){ .hsl-root .arrangement--kompakt .leistungen--ablauf{display:grid;grid-template-columns:1fr 1fr;column-gap:var(--space-m)} } /* Weihnachten (12.10.2026): wie die White Party, aber mit Foto im Querformat 3:2 — rechts in voller Spaltenbreite, die Eckdaten darunter. Unterhalb 1080px untereinander (Regel weiter unten), Foto in voller Breite. */ .hsl-root .arrangement--quer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start; --abstand-unter:var(--space-s);--abstand-marke:var(--space-2xs)} .hsl-root .arrangement--quer .arrangement__seite{display:flex;flex-direction:column;gap:var(--space-s);min-width:0} .hsl-root .arrangement--quer .arrangement__media{min-height:0;display:block} .hsl-root .arrangement--quer .arrangement__media .frame__box{aspect-ratio:var(--ratio-card); height:auto;width:100%;max-width:none} .hsl-root .arrangement--quer .eckdaten{grid-template-columns:auto auto;justify-content:start; gap:var(--space-2xs) var(--space-l);padding:var(--space-xs) var(--space-s)} .hsl-root .arrangement--quer .leistungen--ablauf li{padding-block:8px} /* Telefon und Tablet: untereinander, das Foto ganz, aber nicht höher als etwa ein halber Bildschirm. */ @media (max-width:1079px){ .hsl-root .arrangement--quer{grid-template-columns:minmax(0,1fr)} .hsl-root .arrangement--kompakt{grid-template-columns:1fr} .hsl-root .arrangement--kompakt .arrangement__seite{width:auto} .hsl-root .arrangement--kompakt .arrangement__media .frame__box{height:min(55svh, 440px)} } /* ========================================================================== 9 — Stimmen unserer Gäste ========================================================================== */ .hsl-root .stimmen{position:relative} .hsl-root .stimmen__bg{position:relative;width:100%;overflow:hidden; background:var(--image-placeholder);aspect-ratio:var(--ratio-landscape); min-height:420px} .hsl-root .stimmen__bg-label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; margin:0;padding:var(--space-s);text-align:center; font-family:var(--font-text);font-weight:var(--weight-medium); font-size:var(--type-eyebrow-size);letter-spacing:var(--type-eyebrow-ls); text-transform:uppercase;color:var(--accent);} .hsl-root .stimmen__scrim{position:absolute;inset:0;background:var(--image-scrim)} /* Titel unten links im Bild — dort ist das Scrim am dichtesten. */ .hsl-root .stimmen__titel{position:absolute;left:0;right:0;bottom:0; padding-bottom:var(--space-xl);max-width:var(--container);margin:0 auto} .hsl-root .stimmen__titel .sl-h2{max-width:16ch} .hsl-root .stimmen__inner{position:absolute;inset:0;display:flex;padding-bottom:var(--space-xl); align-items:flex-end;justify-content:flex-end} .hsl-root .stimmen__panel{justify-self:end;align-self:end;max-width:420px;width:100%; background:var(--surface-base);border:var(--border-hairline) solid var(--accent); padding:var(--space-l);} .hsl-root .stimme+.stimme{margin-top:var(--space-m);padding-top:var(--space-m); border-top:var(--border-hairline) solid var(--line)} .hsl-root .stimme__wert{font-family:var(--font-display);font-weight:var(--weight-regular); font-size:var(--type-h1-size);line-height:1.06;color:var(--text-body);margin:0} /* ========================================================================== 10 — Bad Friedrichshall: Ausflugskarten ========================================================================== */ .hsl-root .ausflug-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-m)} .hsl-root .ausflug h3{margin-top:var(--space-s)} .hsl-root .ausflug p{margin-top:var(--space-xs)} /* ========================================================================== Fokus — die vorhandene 1px-Linie wird hell gesetzt, kein blauer Systemring ========================================================================== */ .hsl-root :focus-visible{outline:var(--border-hairline) solid var(--accent-light);outline-offset:3px} .hsl-root .btn:focus-visible,.hsl-root .burger:focus-visible,.hsl-root .theme-toggle:focus-visible{border-color:var(--accent-light);outline-offset:2px} .hsl-root .skip-link{position:absolute;left:-9999px;top:0;z-index:100; background:var(--surface-deep);color:var(--text-body);padding:16px 24px;border-bottom:0} /* Nur bei Tastaturbedienung sichtbar (:focus-visible), nicht nach einem Mausklick oder einem Fokus durch ein Skript. */ .hsl-root .skip-link:focus-visible{left:var(--gutter);top:var(--space-2xs)} /* ========================================================================== Responsiv — bis 360px ========================================================================== */ /* Unterhalb 1280px: Burger statt Navigation. Das Menü selbst steht im Abschnitt „M — Mobiles Menü" weiter unten. */ @media (max-width:1279px){ .hsl-root .header-cta{display:none} .hsl-root .burger{display:block} .hsl-root .header-service{display:none} } /* „Veranstaltung anfragen" misst 288px und wird nie umbrochen. Zwei Zellen nebeneinander brauchen deshalb mindestens 2x288 + Teiler + Abstände, also rund 780px Fensterbreite. Darunter stehen sie untereinander. */ @media (max-width:900px){ .hsl-root .hero-wege{grid-template-columns:1fr;gap:var(--space-m)} .hsl-root .hero-wege .rule--vertical{width:100%;height:1px} } /* Das White-Party-Bild behält 2:3 und richtet sich nach der Höhe der Texthälfte. Beides zusammen passt nur, solange Höhe x 2/3 noch in die halbe Spalte passt — unterhalb 1080px ist die Spalte dafür zu schmal, deshalb stehen die Hälften dort untereinander. */ @media (max-width:1079px){ .hsl-root .arrangement{grid-template-columns:1fr} .hsl-root .eckdaten{grid-template-columns:1fr 1fr;justify-content:start} .hsl-root .arrangement__media{justify-content:flex-start} .hsl-root .arrangement__media .frame__box{height:auto;width:100%;max-width:420px} } @media (max-width:980px){ .hsl-root .split{gap:var(--space-xl)} .hsl-root .split--wide-left,.hsl-root .split--wide-right,.hsl-root .split--even{grid-template-columns:1fr} .hsl-root .wechsel--right .wechsel__media,.hsl-root .wechsel--right .wechsel__body{grid-column:1;grid-row:auto} /* minmax(0,...) statt 1fr: Sonst zieht die Mindestbreite eines Inhalts — etwa ein Knopf, dessen Beschriftung nicht umbricht — die Spalte über den Container hinaus. */ .hsl-root .wechsel,.hsl-root .wechsel--right{grid-template-columns:minmax(0,1fr)} /* Auf schmalen Schirmen läuft der Knopf über die Spalte und darf umbrechen. */ .hsl-root .wechsel__body .btn{display:flex;width:100%;white-space:normal; text-align:center} .hsl-root .wechsel--right .wechsel__media,.hsl-root .wechsel--right .wechsel__body{grid-column:1;grid-row:auto} .hsl-root .wechsel__body{padding:var(--space-l)} .hsl-root .raeume{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-xl) var(--space-m)} .hsl-root .ausflug-grid{grid-template-columns:1fr 1fr} .hsl-root .stimmen__inner{position:static;display:block;padding-top:var(--space-m)} .hsl-root .stimmen__panel{max-width:none;margin:var(--space-m) 0 0} } @media (max-width:640px){ .hsl-root{--gutter:var(--gutter-mobile)} /* Button-Labels werden nie umbrochen; „Veranstaltung anfragen" misst mit 16/32 aber 288px und passt nicht in 320px Innenbreite. */ .hsl-root .btn{padding:16px 20px} .hsl-root .btn--compact{padding:14px 20px} .hsl-root .brand__mark{height:42px} .hsl-root .brand__wortmarke{height:11px} /* Unterhalb 640px trägt der Hero mehr Zeilen, als eine Bildschirmhöhe fasst (Inhalt ~690–711px gegenüber 606px bei 360x780). Die Bindung an die Bildschirmhöhe entfällt deshalb hier: Der Hero wächst mit dem Inhalt, nichts wird beschnitten. Ab 641px bleibt es bei „genau ein Bildschirm". */ .hsl-root .hero{height:auto;min-height:520px;padding-top:var(--space-xl)} .hsl-root .hero--kompakt{min-height:240px} /* Der Textblock reicht auf dieser Breite fast über die volle Herohöhe. Ein von unten auslaufender Verlauf träfe seinen oberen Rand nicht mehr, darum deckt das Scrim hier durchgehend. */ .hsl-root .hero__scrim{background:linear-gradient(to top, rgba(8,21,36,.92) 0, rgba(8,21,36,.82) 45%, rgba(8,21,36,.70) 100%)} /* Der Überhang der Plakette bliebe sonst im 20px-Seitenrand hängen. */ .hsl-root .raum__plate{left:0} .hsl-root .eckdaten{grid-template-columns:1fr} .hsl-root .raeume{grid-template-columns:1fr;gap:var(--space-xl) 0} .hsl-root .ausflug-grid{grid-template-columns:1fr} .hsl-root .ausflug .frame__box{max-width:280px} .hsl-root .eckdaten{padding:var(--space-s)} .hsl-root .stimmen__panel{padding:var(--space-m)} } /* Bewegung nur, wo sie gewollt ist. */ @media (prefers-reduced-motion:reduce){ .hsl-root,.hsl-root *,.hsl-root *::before,.hsl-root *::after{transition-duration:.01ms !important;animation-duration:.01ms !important} } /* ========================================================================== zimmer.html ========================================================================== */ /* --- Buchungsleiste: entfallen im Durchgang 7. An ihrer Stelle steht die Maske des Hauses bzw. deren Ersatz (Abschnitt „Buchungsmaske"). */ /* --- 93 Zimmer, zwei Welten ------------------------------------------- Unten sollen Text und Bild auf einer Linie enden. Das Bild behält sein Verhältnis 2:3 und wird nicht beschnitten; stattdessen füllt die Textspalte die Zeilenhöhe und schiebt die Kennzahlen mit einem automatischen Rand nach unten. Das trägt nur, solange die Spalte schmaler als das Bild hoch ist — darunter steht der Block einspaltig, und die Frage stellt sich nicht. */ .hsl-root #hsl-haus .split{align-items:stretch} .hsl-root #hsl-haus .frame{align-self:start} .hsl-root .welten__text{display:flex;flex-direction:column} /* Automatischer Rand statt fester Abstand: Der Rest der Zeilenhöhe fällt an die Lücke über den Kennzahlen, die Unterkante trifft das Bild genau. Der Innenabstand ist nur die Untergrenze dieser Lücke. */ .hsl-root .fluss > .welten__zahlen{margin-top:auto;padding-top:var(--space-s)} .hsl-root .welten__zahlen li+li{margin-top:var(--space-s)} @media (max-width:1279px){ .hsl-root #hsl-haus .split{grid-template-columns:1fr;align-items:start} .hsl-root .fluss > .welten__zahlen{margin-top:var(--abstand-unter);padding-top:0} .hsl-root #hsl-haus .frame{max-width:420px} } /* Der hochformatige Wechselsatz bricht früher um als der übrige — siehe die Begründung oben. Einspaltig wird der Kader in der Breite begrenzt, sonst geriete er bei 2:3 über anderthalb Bildschirmhöhen hoch. */ @media (max-width:1179px){ .hsl-root .wechsel--hoch,.hsl-root .wechsel--hoch.wechsel--right{grid-template-columns:minmax(0,1fr)} .hsl-root .wechsel--hoch .wechsel__media,.hsl-root .wechsel--hoch .wechsel__body{grid-column:1;grid-row:auto} .hsl-root .wechsel--hoch .wechsel__media{max-width:420px} } /* --- Zimmerkategorien: 3x3 --------------------------------------------- Freigegebenes Abweichen von „keine gleichförmige Kartenreihe". Über Subgrid teilen sich alle Karten dieselben Zeilen, damit Plaketten, Überschriften, Preiszeile und Buttons reihenweise fluchten. */ /* Waagerecht Abstand, senkrecht keiner: Der Zeilenabstand des Rasters würde sich sonst über Subgrid auch zwischen die inneren Zeilen der Karte legen und dort tote Fläche erzeugen. Der Abstand zwischen den Kartenreihen entsteht deshalb unten am Button. */ .hsl-root .zkarten{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--abstand-kopf) var(--space-m)} .hsl-root .zkarte{display:flex;flex-direction:column} /* Kategorien nach Ort: Schlossgebäude, Neubau, Apartment. Jede Gruppe ist ein Sprungziel der Startseite. Zwischen den Gruppen gilt Regel 2 (.stapel), Titel → Karten Regel 3 (.fluss). */ .hsl-root .zgruppe__titel{padding-bottom:var(--space-xs); border-bottom:var(--border-hairline) solid var(--line)} @supports (grid-template-rows: subgrid){ .hsl-root .zkarten{grid-template-rows:auto auto auto auto auto} .hsl-root .zkarte{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:0} } /* Die Plakette ragt nach unten und links über die Bildkante — deckend, damit sie auf Foto wie auf Sektionsfläche trägt. Der Rand darunter hält den Überhang von der Überschrift fern. */ .hsl-root .zkarte__media{position:relative} .hsl-root .zkarte__media + *{margin-top:calc(var(--space-s) + var(--space-xs))} .hsl-root .zkarte__plakette{position:absolute;left:-24px;bottom:-24px; background:var(--surface-base); border:var(--border-hairline) solid var(--accent); padding:10px 16px;margin:0; font-family:var(--font-text);font-weight:var(--weight-medium); font-size:var(--type-small-size);line-height:1.35;color:var(--text-body);} .hsl-root .zkarte__titel{padding-bottom:var(--space-xs)} /* Dicht an die Preiszeile heran: Die reservierte, vorerst leere Zeile soll keinen Krater zwischen Text und Button aufreißen. */ .hsl-root .zkarte__text{padding-bottom:0} /* Reservierte Zeile für den Preis: Die Höhe steht schon ohne Inhalt, damit „ab X € pro Nacht" später nichts verschiebt. */ /* Kein Zimmerpreis: Die Raten sind tagesabhängig und stehen nur im Buchungssystem. Die Zeile verweist dorthin. */ .hsl-root .zkarte__preis{margin:0;min-height:calc(var(--type-small-size) * var(--type-small-lh)); font-family:var(--font-text);font-size:var(--type-small-size); line-height:var(--type-small-lh);color:var(--text-body);} .hsl-root .zkarte .btn{align-self:stretch;justify-self:stretch;width:100%; padding-block:16px;margin-top:var(--space-xs)} /* „Jetzt Verfügbarkeit prüfen“ (seit 10.10.2026) ist für eine schmale Karte zu lang: Auf dem Telefon darf der Text umbrechen, statt die Karte über den Bildschirmrand zu schieben. */ .hsl-root .zkarte .btn{min-width:0;max-width:100%;white-space:normal;text-align:center;line-height:1.25} /* --- Ausstattung: zwei Spalten, fünf Zeilen --------------------------- Zehn Punkte gehen restlos in zwei Spalten auf. Spaltenweiser Fluss: 1–5 links, 6–10 rechts. Die fünf Zeilenspuren sind für beide Spalten dieselben, deshalb liegen die Haarstriche links und rechts exakt auf einer Höhe — ohne Subgrid, weil die Zeile selbst schon das Rasterfeld ist. Sprache wie die Bestuhlung im Block Räume auf der Startseite. */ .hsl-root .ausst-raster{list-style:none;margin:0;padding:0;display:grid; grid-template-columns:1fr 1fr;grid-template-rows:repeat(5,auto); grid-auto-flow:column} .hsl-root .ausst{display:flex;align-items:center;gap:12px;padding:11px 0; border-bottom:var(--border-hairline) solid var(--line)} /* Senkrechte Trennung: Der Strich hängt an der rechten Spalte, die Luft verteilt sich auf beide Seiten. */ .hsl-root .ausst:nth-child(n+6){border-left:var(--border-hairline) solid var(--line); padding-left:var(--space-m)} .hsl-root .ausst:nth-child(-n+5){padding-right:var(--space-m)} /* Unter der letzten Zeile jeder Spalte kein Strich. */ .hsl-root .ausst:nth-child(5),.hsl-root .ausst:nth-child(10){border-bottom:0} .hsl-root .ausst__titel{min-width:0;font-family:var(--font-text); font-size:var(--type-body-size);line-height:1.35;color:var(--text-body)} /* Der Zusatz ist keine Zierde: Im Altbau gibt es zum Beispiel keine Klimaanlage. Rechtsbündig, damit die Spalte als Tabelle liest. Punkte ohne Zusatz behalten die leere Hälfte — Zeile und Strich bleiben. */ .hsl-root .ausst__hinweis{margin:0 0 0 auto;padding-left:var(--space-s); text-align:right;color:var(--text-secondary)} .hsl-root .icon--ausst{flex:0 0 auto;width:32px;height:32px;stroke-width:0.75; color:var(--accent)} /* ====================================================================== VERANSTALTUNGEN UND HOCHZEITEN ====================================================================== */ /* --- Rechner ---------------------------------------------------------- */ /* minmax(0,...) überall dort, wo Zeilen mit fester rechter Hälfte stehen: Ohne die Null als Untergrenze zieht deren Mindestbreite die Spalte über den Container hinaus. */ .hsl-root .rechner{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--space-2xl);align-items:start} .hsl-root .rechner__eingabe{min-width:0} .hsl-root .feld{border:0;margin:0;padding:0;min-width:0} .hsl-root .feld + .feld{margin-top:var(--abstand-kopf)} .hsl-root .feld > legend{padding:0 0 var(--space-s);color:var(--accent)} .hsl-root .feld__hinweis{margin:var(--space-xs) 0 0;color:var(--accent)} /* Auswahl und Haken teilen eine Zeilenform: Marke links, Beschriftung daneben, Zusatz darunter in Dämmerung. Radios und Kästchen bleiben die des Systems — sichtbarer Fokus ohne eigenes Zutun. */ .hsl-root .wahl,.hsl-root .haken{display:grid;gap:0} .hsl-root .wahl label,.hsl-root .haken label{display:flex;align-items:flex-start;gap:12px; padding:11px 0;cursor:pointer; border-bottom:var(--border-hairline) solid var(--line)} .hsl-root .wahl label:last-child,.hsl-root .haken label:last-child{border-bottom:0} .hsl-root .wahl input,.hsl-root .haken input{margin:3px 0 0;accent-color:var(--accent);flex:0 0 auto} .hsl-root .wahl label > span,.hsl-root .haken label > span{display:block;min-width:0; font-family:var(--font-text);font-size:var(--type-body-size); line-height:1.35;color:var(--text-body)} .hsl-root .wahl__zusatz{display:block;margin-top:2px; font-size:var(--type-small-size);line-height:var(--type-small-lh); color:var(--text-secondary)} /* Schieberegler: Bahn als Haarstrich, Griff als Quadrat ohne Radius. */ .hsl-root .regler{display:flex;align-items:center;gap:var(--space-m)} .hsl-root .regler input[type="range"]{flex:1 1 auto;min-width:0;height:24px; -webkit-appearance:none;appearance:none;background:transparent} .hsl-root .regler input[type="range"]::-webkit-slider-runnable-track{height:1px;background:var(--line)} .hsl-root .regler input[type="range"]::-moz-range-track{height:1px;background:var(--line)} .hsl-root .regler input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none; width:14px;height:14px;margin-top:-6.5px;border-radius:0; background:var(--accent);cursor:pointer} .hsl-root .regler input[type="range"]::-moz-range-thumb{width:14px;height:14px; border:0;border-radius:0;background:var(--accent);cursor:pointer} .hsl-root .regler__wert{flex:0 0 auto;min-width:3ch;text-align:right; font-family:var(--font-display);font-size:var(--type-h3-size); line-height:1;color:var(--text-body)} /* Zähler: Beschriftung links, Minus/Wert/Plus rechts. */ .hsl-root .zaehler-gruppe{margin-top:var(--space-m)} .hsl-root .zaehler{display:flex;align-items:center;gap:12px;padding:11px 0; border-bottom:var(--border-hairline) solid var(--line)} .hsl-root .zaehler:last-child{border-bottom:0} .hsl-root .zaehler__name{flex:1 1 auto;min-width:0;font-family:var(--font-text); font-size:var(--type-body-size);line-height:1.35;color:var(--text-body)} .hsl-root .zaehler__zusatz{display:block;margin-top:2px;font-size:var(--type-small-size); line-height:var(--type-small-lh);color:var(--text-secondary)} .hsl-root .zaehler__steuer{flex:0 0 auto;display:flex;align-items:center;gap:2px} .hsl-root .zaehler__btn{width:34px;height:34px;padding:0; border:var(--border-hairline) solid var(--line);background:transparent; font-family:var(--font-text);font-size:var(--type-body-size); line-height:1;color:var(--text-body);cursor:pointer; transition:color 300ms ease,border-color 300ms ease} .hsl-root .zaehler__btn:hover{color:var(--accent);border-color:var(--accent)} .hsl-root .zaehler__wert{min-width:3ch;text-align:center;font-family:var(--font-text); font-size:var(--type-body-size);color:var(--text-body)} /* Was ein Pauschalpaket schon enthält. */ .hsl-root .enthalten{list-style:none;margin:var(--space-s) 0 0;padding:var(--space-s) 0 0; border-top:var(--border-hairline) solid var(--line)} .hsl-root .enthalten li{position:relative;padding-left:18px; font-family:var(--font-text);font-size:var(--type-small-size); line-height:var(--type-small-lh);color:var(--text-secondary)} .hsl-root .enthalten li::before{content:"";position:absolute;left:0;top:.7em; width:8px;height:1px;background:var(--accent)} /* --- Schritte ------------------------------------------------------------ Sechs Schritte als Reiterleiste. Der aktuelle trägt aria-current="step" und die Linie in der Akzentfarbe. Darunter Stand und laufende Summe — auf dem Telefon, wo die Zusammenstellung unter dem Formular steht, sieht man die Summe so trotzdem bei jedem Schritt. */ .hsl-root .schritte{border-bottom:var(--border-hairline) solid var(--line)} .hsl-root .schritte__liste{list-style:none;margin:0;padding:0; display:grid;grid-template-columns:repeat(6,minmax(0,1fr))} .hsl-root .schritte__knopf{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2xs); width:100%;padding:var(--space-xs) var(--space-2xs) var(--space-xs) 0; background:transparent;border:0;border-bottom:2px solid transparent;cursor:pointer; font-family:var(--font-text);font-size:var(--type-small-size);line-height:1.3; color:var(--text-secondary);text-align:left;transition:color .3s ease,border-color .3s ease} .hsl-root .schritte__knopf:hover{color:var(--text-body)} .hsl-root .schritte__knopf[aria-current="step"]{color:var(--text-body);border-bottom-color:var(--accent)} .hsl-root .schritte__nr{font-family:var(--font-display);font-size:var(--type-h3-size);line-height:1; font-variation-settings:"opsz" 48,"wght" 400,"SOFT" 0,"WONK" 0;color:var(--accent)} .hsl-root .schritte__stand{display:flex;justify-content:space-between;gap:var(--space-s);flex-wrap:wrap; margin:0;padding:var(--space-xs) 0;font-family:var(--font-text);font-size:var(--type-small-size); color:var(--text-secondary)} .hsl-root #hsl-schritt-summe{color:var(--text-body);font-weight:var(--weight-medium)} .hsl-root .schritt[hidden]{display:none} .hsl-root .schritt{margin-top:var(--abstand-unter)} .hsl-root .schritt__titel:focus{outline:none} .hsl-root .schritt__nav{display:flex;flex-wrap:wrap;gap:var(--space-xs) var(--space-s); padding-top:var(--space-m);border-top:var(--border-hairline) solid var(--line)} .hsl-root .schritt__weiter,.hsl-root #hsl-r-senden{margin-left:auto} .hsl-root .stapel--eng{--abstand-kopf:var(--space-l)} .hsl-root .feld__text{margin:0 0 var(--space-xs);color:var(--text-secondary)} .hsl-root .formular--rechner{margin:0} .hsl-root .wahl--reihe{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-m)} .hsl-root .wahl--reihe label{border-bottom:var(--border-hairline) solid var(--line)} .hsl-root .wahl label[hidden]{display:none} /* Eine Option je Zeile. Der Haarstrich sitzt an der Zeile, nicht am