/* ========================================================================== Hotel Pension Gerono — Stylesheet Richtung: Nachtquartier. Tiefes Havelblau als Grund, warmes Lampenlicht als einziger Akzent — ein Haus, in dem abends Licht brennt. Slab-Serif für die Bodenständigkeit einer Pension, Mono für Preise und Zeiten. ========================================================================== */ @font-face { font-family: 'Zilla Slab'; src: url('schrift/zilla-slab-600.woff2') format('woff2'); font-weight: 600; font-display: swap; } @font-face { font-family: 'Zilla Slab'; src: url('schrift/zilla-slab-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Karla'; src: url('schrift/karla-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Karla'; src: url('schrift/karla-500.woff2') format('woff2'); font-weight: 500; font-display: swap; } @font-face { font-family: 'Karla'; src: url('schrift/karla-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } @font-face { font-family: 'Space Mono'; src: url('schrift/space-mono-400.woff2') format('woff2'); font-weight: 400; font-display: swap; } @font-face { font-family: 'Space Mono'; src: url('schrift/space-mono-700.woff2') format('woff2'); font-weight: 700; font-display: swap; } :root { --nacht: #15202B; /* Grund: tiefes Havelblau */ --nacht-hell: #1E2C39; /* Karten */ --tag: #F1F0EA; /* Schrift auf Nacht */ --tag-mit: #A7B3BF; /* Sekundärschrift auf Nacht */ --lampe: #E9B45E; /* warmes Lampenlicht — einziger Akzent */ --lampe-tief: #7A5411; /* Akzentschrift auf hellem Grund */ --hell: #F1F0EA; /* helle Abschnitte */ --hell-mit: #55606B; /* Sekundärschrift auf hell */ --linie: #31404E; --linie-hell: #CFCEC6; --display: 'Zilla Slab', Georgia, serif; --text: 'Karla', system-ui, sans-serif; --mono: 'Space Mono', ui-monospace, monospace; --rand: clamp(20px, 5vw, 56px); --breite: 1160px; --luft: clamp(56px, 8vw, 104px); /* Eine einzige Hervorhebungsfarbe. Sie kippt mit dem Untergrund, nicht mit dem Baustein — dadurch liegen alle betonten Worte, Zahlen und Etiketten auf derselben Ebene statt jede Sektion ihre eigene Mischung zu fahren. */ --hebung: var(--lampe); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--nacht); color: var(--tag); font-family: var(--text); font-size: 1.0625rem; line-height: 1.68; overflow-x: clip; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; } :focus-visible { outline: 3px solid var(--lampe); outline-offset: 3px; } .hell :focus-visible { outline-color: var(--lampe-tief); } [id] { scroll-margin-top: 86px; } .springlink { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lampe); color: var(--nacht); padding: 10px 18px; text-decoration: none; font-family: var(--mono); font-size: .8125rem; transition: top .16s; } .springlink:focus { top: 12px; } /* --- Typografie ----------------------------------------------------------- */ h1, h2, h3 { font-family: var(--display); font-weight: 700; line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .5em; text-wrap: balance; } h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); } h2 { font-size: clamp(1.75rem, 4vw, 2.7rem); } h3 { font-size: clamp(1.15rem, 2.2vw, 1.4rem); font-weight: 600; } p { margin: 0 0 1.1em; } p:last-child { margin-bottom: 0; } /* Umbrüche. Überschriften auf gleich lange Zeilen ziehen, Absätze ohne einzelnes Schlusswort setzen. Deutsche Komposita (Übernachtungspreis, Frühstücksraum) trennen — sonst sprengen sie auf 320px die Zeile; die Trennung greift nur, weil gesetzt ist. Überschriften, Marke und Kennzahlen bleiben ungetrennt, dort wäre ein Trennstrich ein Fehler. */ p, li, dd, figcaption { text-wrap: pretty; } p, li, dd, figcaption, .prosa, .vorspann { hyphens: auto; -webkit-hyphens: auto; hyphenate-limit-chars: 9 4 4; } h1, h2, h3, .bar__marke, .fuss__marke, .grossruf, .rechner__summe b, .daten dd, .tafel dd, .mass, .held__kicker { hyphens: manual; -webkit-hyphens: manual; } :is(h1, h2, h3, p, li, dd) { overflow-wrap: break-word; } .prosa { max-width: 64ch; } .vorspann { font-size: clamp(1.1rem, 2vw, 1.3rem); line-height: 1.55; max-width: 50ch; } .leise { color: var(--tag-mit); } .hell .leise { color: var(--hell-mit); } /* ========================================================================== Hervorhebung — eine Ebene Vier Stufen, mehr gibt es nicht. Jede Stufe hat genau eine Ausprägung; welcher Baustein sie trägt, ändert nichts an Farbe, Schnitt oder Schrift. 1 Rubrik Mono 400 · .8125rem · +.08em · VERSAL · Akzent 2 Datenwert Mono 700 · Akzent · Ziffern auf gleicher Breite 3 Betonung Textschrift 700 · Akzent (im Fließtext, kein Schriftwechsel) 4 Kennzahl Display · groß · Tag/Nacht (die Größe trägt, nicht die Farbe) ========================================================================== */ .hell { --hebung: var(--lampe-tief); } /* Weiße Karten im hellen Abschnitt: gleicher Akzent, aber nie der helle */ .hell .stapel li, .hell .karte__hinweis { --hebung: var(--lampe-tief); } /* 1 Rubrik */ .mass, .held__kicker, .fuss__titel, .daten dt, .rechner__feld label { font-family: var(--mono); font-size: .8125rem; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; hyphens: manual; } .mass, .held__kicker { color: var(--hebung); } /* 2 Datenwert */ .wege b, .schritte .nr, .tafel dd, .daten dd b, .karte__hinweis p b { font-family: var(--mono); font-weight: 700; color: var(--hebung); font-variant-numeric: tabular-nums; letter-spacing: 0; } /* 3 Betonung im Fließtext */ .prosa b, .vorspann b, .stapel p b, .rechner__hinweis b, .tafel .zusatz b { font-weight: 700; color: var(--hebung); } /* --- Aufbau ---------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); } .band { padding-block: var(--luft); } .band--schmal { padding-block: clamp(40px, 5.5vw, 72px); } .hell { background: var(--hell); color: var(--nacht); } /* --- Kopfzeile ------------------------------------------------------------- */ .bar { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--nacht) 96%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); } .bar__reihe { display: flex; align-items: center; gap: 14px; min-height: 62px; } .bar__marke { display: flex; align-items: baseline; gap: 8px; margin-right: auto; text-decoration: none; white-space: nowrap; padding: 9px 0; font-family: var(--display); font-weight: 700; font-size: 1.2rem; } .bar__marke b { color: var(--lampe); font-weight: 700; } .bar__marke span { font-family: var(--mono); font-size: .6875rem; letter-spacing: .08em; text-transform: uppercase; color: var(--tag-mit); } .bar__menue { display: none; gap: 22px; } .bar__menue a { text-decoration: none; font-size: .9375rem; padding: 4px 0; border-bottom: 2px solid transparent; } .bar__menue a:hover { border-bottom-color: var(--lampe); } .bar__tel { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; text-decoration: none; font-family: var(--mono); font-size: .875rem; background: var(--lampe); color: var(--nacht); padding: 10px 16px; min-height: 44px; border-radius: 3px; font-weight: 700; } .bar__tel:hover { background: var(--tag); } .bar__tel-nr { display: none; } .bar__knopf { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; cursor: pointer; border-radius: 3px; background: transparent; border: 1px solid var(--tag-mit); color: inherit; } .bar__knopf svg { width: 20px; height: 20px; } .bar__klapp { display: none; border-top: 1px solid var(--linie); padding: 14px 0 18px; } .bar__klapp.ist-offen { display: block; } .bar__klapp a { display: block; padding: 12px 0; text-decoration: none; border-bottom: 1px solid var(--linie); font-size: 1.0625rem; } .bar__klapp a:last-child { border-bottom: 0; } @media (max-width: 439px) { .bar__marke span { display: none; } .bar__reihe { gap: 8px; } } /* Sehr schmale Geräte: Rufknopf nur als Icon — sonst drängt er den Hamburger aus der Zeile. Der Überlauf wäre durch overflow-x unsichtbar, das Menü aber unerreichbar. */ @media (max-width: 429px) { .bar__reihe { gap: 8px; } .bar__tel { padding: 10px 12px; } .bar__tel-wort { display: none; } .bar__marke { font-size: 1.05rem; } } @media (min-width: 1000px) { .bar__menue { display: flex; } .bar__knopf { display: none; } .bar__klapp { display: none !important; } .bar__tel-wort { display: none; } .bar__tel-nr { display: inline; } } /* --- Held ------------------------------------------------------------------ */ .held { padding-block: clamp(44px, 7vw, 88px) clamp(36px, 5vw, 60px); } .held__kicker { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 20px; } .held h1 { margin-bottom: .4em; max-width: 16ch; } .held__aktion { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 13px 24px; max-width: 100%; border-radius: 3px; background: var(--lampe); color: var(--nacht); border: 1px solid var(--lampe); text-decoration: none; font-weight: 700; font-size: 1rem; transition: background .16s, color .16s, border-color .16s; } .knopf:hover { background: var(--tag); border-color: var(--tag); } .knopf--klar { background: transparent; color: var(--tag); border-color: #4A5A68; } .knopf--klar:hover { background: var(--tag); color: var(--nacht); border-color: var(--tag); } .hell .knopf { background: var(--nacht); color: var(--tag); border-color: var(--nacht); } .hell .knopf:hover { background: var(--lampe-tief); border-color: var(--lampe-tief); } .hell .knopf--klar { background: transparent; color: var(--nacht); border-color: var(--nacht); } .hell .knopf--klar:hover { background: var(--nacht); color: var(--tag); } /* --- Signatur: der Nachtrechner ------------------------------------------- */ .rechner { border: 1px solid var(--linie); border-radius: 6px; background: var(--nacht-hell); padding: clamp(18px, 3vw, 26px); } .rechner__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 18px; } .rechner__kopf h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 1.9rem); } .rechner__zeile { display: grid; gap: 10px 16px; margin-bottom: 16px; grid-template-columns: 1fr; } @media (min-width: 560px) { .rechner__zeile { grid-template-columns: 1fr 1fr; } } .rechner__feld label { display: block; color: var(--tag-mit); margin-bottom: 6px; } .rechner__wahl { display: flex; gap: 8px; flex-wrap: wrap; } .rechner__tab { font-family: var(--text); font-size: .9375rem; font-weight: 700; padding: 11px 16px; min-height: 44px; cursor: pointer; border-radius: 3px; background: transparent; color: var(--tag-mit); border: 1px solid var(--linie); } .rechner__tab:hover { border-color: var(--tag-mit); color: var(--tag); } .rechner__tab.ist-an { background: var(--lampe); color: var(--nacht); border-color: var(--lampe); } .rechner__zahl { display: flex; align-items: center; gap: 0; } .rechner__zahl button { width: 46px; height: 46px; cursor: pointer; font-size: 1.3rem; background: transparent; border: 1px solid var(--linie); color: var(--tag); } .rechner__zahl button:first-child { border-radius: 3px 0 0 3px; } .rechner__zahl button:last-child { border-radius: 0 3px 3px 0; } .rechner__zahl output { min-width: 78px; height: 46px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 1.05rem; font-weight: 700; border-block: 1px solid var(--linie); } .rechner__summe { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; padding-top: 16px; border-top: 2px solid var(--lampe); } .rechner__summe b { font-family: var(--display); font-weight: 700; font-size: clamp(2rem, 6vw, 3rem); line-height: 1; } .rechner__aufschluss { font-family: var(--mono); font-size: .8125rem; color: var(--tag-mit); } .rechner__hinweis { font-size: .875rem; color: var(--tag-mit); margin-top: 14px; } /* --- Preistafel ------------------------------------------------------------- */ .tafel { margin: 0; } .tafel > div { display: grid; grid-template-columns: 1fr auto; gap: 4px 18px; padding: 15px 0; border-top: 1px solid var(--linie-hell); align-items: baseline; } .tafel > div:last-child { border-bottom: 1px solid var(--linie-hell); } .tafel dt { font-family: var(--display); font-weight: 600; font-size: 1.1rem; } .tafel dd { margin: 0; font-size: 1.05rem; white-space: nowrap; } .tafel .zusatz { grid-column: 1 / -1; font-size: .9375rem; color: var(--hell-mit); margin: 0; } /* --- Karten / Listen -------------------------------------------------------- */ .stapel { display: grid; gap: 18px; grid-template-columns: 1fr; margin: 0; padding: 0; list-style: none; } @media (min-width: 680px) { .stapel { grid-template-columns: 1fr 1fr; } } @media (min-width: 1020px) { .stapel--drei { grid-template-columns: repeat(3, 1fr); } } .stapel li { border: 1px solid var(--linie); border-radius: 6px; background: var(--nacht-hell); padding: 20px; min-width: 0; } .hell .stapel li { border-color: var(--linie-hell); background: #FFFFFF; } .stapel h3 { margin-bottom: .4em; } .stapel p { font-size: .9375rem; color: var(--tag-mit); margin: 0; } .hell .stapel p { color: var(--hell-mit); } .schritte { list-style: none; margin: 0; padding: 0; counter-reset: s; display: grid; gap: 2px; } .schritte li { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 14px; padding: 18px 0; border-top: 1px solid var(--linie-hell); align-items: baseline; } .schritte li:last-child { border-bottom: 1px solid var(--linie-hell); } .schritte h3 { margin: 0; } .schritte p { grid-column: 2; margin: 5px 0 0; font-size: .9375rem; color: var(--hell-mit); max-width: 56ch; } /* --- Wege ------------------------------------------------------------------- */ .wege { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; } .wege li { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linie); align-items: baseline; } .wege li:last-child { border-bottom: 0; } .wege b { white-space: nowrap; } /* --- Daten ------------------------------------------------------------------ */ .daten { margin: 0; } .daten > div { display: grid; grid-template-columns: minmax(110px, 150px) minmax(0, 1fr); gap: 4px 18px; padding: 13px 0; border-top: 1px solid var(--linie); align-items: baseline; } .daten > div:last-child { border-bottom: 1px solid var(--linie); } .daten dt { color: var(--tag-mit); } .daten dd { margin: 0; overflow-wrap: anywhere; } .daten dd a { display: inline-block; padding: 4px 0; } .hell .daten > div { border-color: var(--linie-hell); } .hell .daten dt { color: var(--hell-mit); } .grossruf { display: inline-block; text-decoration: none; padding: 7px 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 5vw, 2.6rem); line-height: 1.1; overflow-wrap: anywhere; } .grossruf:hover { color: var(--lampe); } .hell .grossruf:hover { color: var(--lampe-tief); } /* --- Zwei Spalten: beide beginnen auf einer Höhe --------------------------- align-items:start setzt nur die Kästen bündig. Die erste Textzeile rutschte trotzdem ab, weil rechts eine Liste steht, deren erste Zeile ein eigenes Polster und eine Trennlinie mitbringt (bis 26px Versatz). Beides fällt für das erste Element einer Spalte weg — dann startet rechter Text auf der Grundlinie der Rubrik links. */ .paar { display: grid; gap: clamp(28px, 4vw, 48px); align-items: start; } @media (min-width: 900px) { .paar { grid-template-columns: minmax(0,5fr) minmax(0,7fr); } } .paar > * > :first-child { margin-block-start: 0; } .paar > :is(.schritte, .wege, .tafel, .daten), .paar > * > :is(.schritte, .wege, .tafel, .daten):first-child { margin-block-start: 0; } .paar > :is(.schritte, .wege, .tafel, .daten) > :first-child, .paar > * > :is(.schritte, .wege, .tafel, .daten):first-child > :first-child { padding-top: 0; border-top: 0; } /* --- Karte ------------------------------------------------------------------ */ .karte { border: 1px solid var(--linie); border-radius: 6px; background: var(--nacht-hell); aspect-ratio: 4/3; display: grid; overflow: hidden; } .hell .karte { border-color: var(--linie-hell); background: #FFF; } .karte iframe { width: 100%; height: 100%; border: 0; display: block; } .karte__hinweis { align-self: center; padding: clamp(20px, 4vw, 32px); } .karte__hinweis p { margin: 0 0 12px; max-width: 42ch; font-size: .9375rem; } .karte__hinweis p:last-child { margin-bottom: 0; } /* Der Route-Link im Kartenkasten ist Fließtext — ohne eigenes Polster ist er nur 17px hoch und damit unter der Antippgröße (WCAG 2.5.8: 24px). */ .karte__hinweis a { display: inline-block; padding: 5px 0; } /* --- Fußzeile ---------------------------------------------------------------- */ .fuss { background: var(--nacht-hell); color: var(--tag); border-top: 1px solid var(--linie); padding-block: clamp(40px, 6vw, 68px) 26px; } .fuss__raster { display: grid; gap: 30px; } @media (min-width: 780px) { .fuss__raster { grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; } } .fuss__marke { font-family: var(--display); font-weight: 700; font-size: 1.4rem; margin: 0 0 10px; } .fuss__marke b { color: var(--lampe); } .fuss__titel { color: var(--tag-mit); margin: 0 0 12px; } .fuss__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .9375rem; } .fuss__liste a { text-decoration: none; display: inline-block; padding: 6px 0; } .fuss__liste a:hover { text-decoration: underline; text-underline-offset: 3px; } .fuss .leise { color: var(--tag-mit); } .fuss__unten { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 36px; padding-top: 20px; border-top: 1px solid var(--linie); font-size: .8125rem; color: var(--tag-mit); } .fuss__unten a { color: var(--tag-mit); display: inline-block; padding: 6px 0; } /* Startzustände setzt NUR JS (Editor-Sicherheit) */