01 · Überblick
Zurückhaltung als Luxussignal
Für dieses Konzept habe ich mir ein Hotel vorgestellt, das 1927 eröffnet und nie Werbung gemacht hat. Jede Konvention der modernen Hotel-Website — das klebende Buchungswidget, der Dringlichkeitsbanner, das automatisch startende Video über dem Falz — arbeitet gegen diese Prämisse. Also leiht sich die Seite vom einen Medium, dem das Haus längst vertraut: dem eigenen gedruckten Briefpapier. Alles sitzt auf einer zentrierten Achse. Gold erscheint nur als Haarlinie oder als Raute. Nichts zählt herunter.
Das Ergebnis ist die symmetrischste Seite der Reihe — und bewusst das Gegenteil des Ember-&-Oak-Broadsheets: Wo jene Seite Folionummern in eine linke Marginalspalte hängt und asymmetrische Spalten fährt, legt diese alles auf die Mittellinie und lässt den Raum die Arbeit machen.
02 · Die Idee
Einundvierzig Zimmer, keine Dringlichkeit
Die Zeile, die ich für die Marke geschrieben habe — eine leise Adresse in einem lauten Jahrhundert —, hat das gesamte Briefing gesetzt. Drei Entscheidungen folgten daraus, und jede weitere Wahl auf der Seite liegt stromabwärts davon.
Gold ist eine Haarlinie
Der Akzent füllt nie eine Fläche. Er zieht Linien, er unterstreicht, er markiert eine Raute zwischen den Takten — und das ist alles.
Alles zentriert
Symmetrie liest sich als Fassung. Nur die Paare aus Herausforderung und Lösung brechen die Achse — und nur, weil ein Vergleich zwei Spalten braucht.
Langsamer als der Rest
Reveals laufen in 1.1 Sekunden, der hoteleigenen --reveal-time — spürbar langsamer als jede andere Seite hier.
03 · Ziele
Was die Site tragen musste
Acht Takte, eine Stimme
Intro, Zimmer, Ausstattung, Geschichte, Galerie, Gästestimmen, Angebote und eine Anfrage — jede eine Sektion mit eigener, ausgezeichneter Überschrift.
Eine Galerie, die von selbst läuft
Dreizehn Bildtafeln, die auf einem Timer überblenden — und pausieren, sobald ein Zeiger oder der Tastaturfokus sie betritt.
Eine Anfrage, kein Checkout
Sieben Felder — Anreise, Abreise, Gäste, Zimmer, Name, E-Mail, Nachricht — inline validiert und in einer Live-Region bestätigt.
Ein Menü, aus dem nichts entkommt
Das mobile Panel hält den Fokus, solange es offen ist, und gibt ihn beim Schließen an den Auslöser zurück.
04 · Bauablauf
Das Haus im Bauablauf
Palette vor Layout
Vierzehn Custom Properties, die Hälfte davon Gold in verschiedenen Alphas. Anthrazit, Elfenbein, Gold, Bronze, Schiefer — nichts anderes durfte hinein.
Das zentrierte Raster
Eine einzige Satzspalte, zentriert im Container, mit Bildtafeln, die breiter ausbrechen dürfen. Keine Seitenleisten, keine Asymmetrie.
Das Ornament
Ein gedrehtes Quadrat zwischen zwei Haarlinien-Verläufen, gezeichnet in CSS. Es trennt jede Sektion und ist die einzige Dekoration der Seite.
Der Galerie-Timer
Eine Überblendung im Intervall, mit Rautenpunkten für die Position — pausiert bei
mouseenterundfocusin, damit sie nie gegen den Besucher kämpft.Das Anfrageformular
Zuletzt gebaut, damit es Schrift und Abstände erbt, statt eigene aufzuzwingen.
05 · Architektur
Drei Dateien
├── index.html 27.4 KB — 8 Sektionen, 13 Bildtafeln
├── styles.css 33.6 KB — 14 Custom Properties, 5 Media Queries
└── script.js 15.2 KB — 450 Zeilen: Header · Menü · Reveals · Galerie · Formular
Der Stack
- Semantisches HTML
- CSS Grid
- Custom properties
- IntersectionObserver
- setInterval
- Cormorant Garamond
- Jost
Barrierefreiheit
- Fokusfalle
- aria-modal
- aria-live
- Pause bei Fokus
- Escape zum Schließen
- Fokus-Rückgabe
06 · Was sich gewehrt hat
Was sich gewehrt hat
Eine automatisch weiterschaltende Galerie ist feindselig gegenüber allen, die im eigenen Tempo lesen, und bricht die Tastaturbedienung aktiv: Der Fokus landet auf einer Folie, die dann davongleitet.
Der Timer pausiert bei mouseenter und focusin und läuft erst beim passenden Verlassen weiter. Wer in die Galerie tabbt, hält sie sofort an — das Verhalten, das Tastaturnutzer erwarten und fast nie bekommen.
Gold auf Anthrazit ist schön und häufig unzulässig: #C7A867 auf #101314 besteht, aber die Bronze an seiner Seite fällt bei Textgröße durch.
Bronze wurde zum rein dekorativen Token degradiert — Linien, Ränder und Hover-Zustände —, und Schiefer übernahm als lesbare Sekundärfarbe. Die Palette behielt ihre Spannweite, ohne unlesbaren Text auszuliefern.
Ein bildschirmfüllendes mobiles Menü ist der Ort, an dem der Fokus entkommt: Wer weit genug tabbt, ist in der Seite dahinter — unsichtbar.
Das Panel führt Tab in beide Richtungen im Kreis zwischen seinem ersten und letzten fokussierbaren Element und gibt den Fokus beim Schließen an den Burger zurück.
Zentrierte Layouts zerfallen bei langen Zeilen — ein zentrierter Absatz mit 90 Zeichen Breite ist unlesbar, egal wie elegant die Schrift ist.
Die Satzbreite ist auf 60 Zeichen begrenzt und mit margin-inline: auto zentriert — die Achse hält, während die Zeilenlänge angenehm bleibt.
07 · Was bleibt
Die Teile, die bleiben dürfen
Das Haus im Lauf der Jahre
Eine Zeitleiste der Hausgeschichte, die sich wie ein gedrucktes Verzeichnis liest, nicht wie eine Infografik — Jahreszahlen, je eine Zeile, keine Icons.
Rautenpunkte
Positionsmarker der Galerie, um 45 Grad gedreht, passend zur Wortbildmarke. Vier Zeilen CSS, kein Bild.
Gästestimmen
Referenzen als zentrierte Pull-Quotes mit dem Zimmernamen darunter — entliehen aus der Hierarchie des hoteleigenen Briefpapiers.
Eine Buchungsanfrage
Sieben Felder, die fragen, was ein Concierge fragen würde — bestätigt in einer höflichen Live-Region statt in einem Modal.
08 · Live starten
Hier ausprobieren
Der echte Build, eingebettet und lauffähig. Er lädt erst auf Abruf — nichts wird geholt, bevor Sie es anfordern.
Live-Vorschau überspringen
Der echte Build, direkt in der Seite. Die Live-Vorschau ist eine eingebettete Seite; mit Escape verlassen Sie sie.
Im Vollbild öffnen ↗
