/* =========================================================================== Digitale Rezeption – Hotel Christof Eigene Komponenten-Styles. Ergänzt Tailwind (assets/js/tailwind.js). Farbwelt an christof.it angelehnt: Weinrot #9b204e / #c62649, Azur #93bdd5. =========================================================================== */ /* --------------------------------------------------------------------------- Farbschema Alle Farben laufen über diese Variablen. Der Dunkelmodus überschreibt weiter unten dieselben Namen – dadurch bleibt der restliche Stylesheet unverändert gültig. Umgeschaltet wird über . Gesetzt wird das Attribut serverseitig aus dem Cookie und zusätzlich vor dem ersten Zeichnen durch ein kleines Skript im (siehe index.php) – deshalb flackert nichts beim Laden. --------------------------------------------------------------------------- */ :root { color-scheme: light; --brand-700: #9b204e; /* Grundton – Flächen, Icons */ --brand-800: #881c44; --brand-600: #c62649; /* Akzent – Verläufe, Hover */ --brand-100: #fbe8ef; /* zarte Fläche hinter Icons */ --brand-text: #9b204e; /* Markenfarbe auf hellem Grund */ --azure-300: #93bdd5; --azure-200: #d1e5f0; --ink-900: #2e2523; /* Haupttext */ --ink-700: #544b49; /* Fließtext */ --ink-500: #7d7573; /* Nebentext */ --ink-200: #e4e0df; /* Linien, Rahmen */ --ink-50: #faf9f9; /* Seitenhintergrund */ --surface: #fff; /* Karten, Eingabefelder, Kacheln */ --surface-2: #f2f0ef; /* leicht abgesetzte Fläche */ --shadow-rgb: 26, 20, 19; --shadow-strength: 1; --header-bg: rgba(255, 255, 255, .82); --controls-bg: rgba(250, 249, 249, .9); --toast-bg: #2e2523; --toast-fg: #fff; --header-h: 60px; --controls-h: 108px; --radius: 18px; } :root[data-theme="dark"] { color-scheme: dark; /* Marke aufhellen: #9b204e hat auf dunklem Grund zu wenig Kontrast */ --brand-700: #d3457b; --brand-800: #9b204e; --brand-600: #e46f9c; --brand-100: #3d1526; --brand-text: #f0a3c0; --azure-300: #93bdd5; --azure-200: #2b4354; --ink-900: #f4f1f0; --ink-700: #d5cecb; --ink-500: #a49b98; --ink-200: #3a302e; --ink-50: #171211; --surface: #211a19; --surface-2: #2b2321; --shadow-rgb: 0, 0, 0; --shadow-strength: 1.6; --header-bg: rgba(33, 26, 25, .82); --controls-bg: rgba(23, 18, 17, .9); --toast-bg: #f4f1f0; --toast-fg: #211a19; } /* --- Grundlagen (auch gültig, bevor Tailwind fertig ist -> kein Flackern) -- */ html { -webkit-text-size-adjust: 100%; /* "clip" statt "hidden": verhindert seitliches Scrollen, ohne position:sticky zu zerstören */ overflow-x: clip; } body { margin: 0; background: var(--ink-50); color: var(--ink-900); font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } img { max-width: 100%; height: auto; } :focus-visible { outline: 2px solid var(--brand-600); outline-offset: 3px; border-radius: 6px; } button { font: inherit; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: -100px; left: 12px; z-index: 100; padding: 10px 16px; border-radius: 10px; background: var(--brand-700); color: #fff; text-decoration: none; font-weight: 600; transition: top .2s; } .skip-link:focus { top: 12px; } /* ========================================================================= Kopfleiste ========================================================================= */ .site-header { background: var(--header-bg); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid transparent; transition: transform .32s cubic-bezier(.4,0,.2,1), background .3s, border-color .3s, box-shadow .3s; padding-top: env(safe-area-inset-top); } /* Über dem Titelbild transparent + heller Text */ .site-header.is-over-hero { background: linear-gradient(to bottom, rgba(var(--shadow-rgb), .42), rgba(var(--shadow-rgb), 0)); backdrop-filter: none; -webkit-backdrop-filter: none; } /* Markenzeile in der Kopfleiste (eigene Klassen statt Tailwind-Utilities, damit sie dem Farbschema folgen) */ .site-brand__name { display: block; font-size: 15px; line-height: 1.2; color: var(--ink-900); } .site-brand__sub { display: block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-text); } @media (min-width: 640px) { .site-brand__name { font-size: 16px; } } /* Über dem Titelbild ist der Grund immer dunkel -> heller Text in beiden Modi */ .site-header.is-over-hero .site-brand__name { color: #fff; } .site-header.is-over-hero .site-brand__sub { color: rgba(255,255,255,.72); } .site-header.is-over-hero .lang-switch, .site-header.is-over-hero .theme-switch, .site-header.is-over-hero .switcher__trigger { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.28); } .site-header.is-over-hero .lang-switch__item, .site-header.is-over-hero .theme-switch__btn, .site-header.is-over-hero .switcher__trigger { color: rgba(255,255,255,.9); } .site-header.is-over-hero .lang-switch__item.is-active, .site-header.is-over-hero .theme-switch__btn.is-active { background: #fff; color: var(--brand-800); } /* Das aufgeklappte Menü ist eine eigene Karte – dort gilt wieder die normale Farbgebung, auch wenn die Kopfleiste gerade über dem Bild liegt. */ .site-header.is-over-hero .switcher.is-open > .switcher__panel { background: var(--surface); border-color: var(--ink-200); } .site-header.is-over-hero .switcher.is-open > .switcher__panel .lang-switch__item, .site-header.is-over-hero .switcher.is-open > .switcher__panel .theme-switch__btn { color: var(--ink-700); } .site-header.is-over-hero .switcher.is-open > .switcher__panel .lang-switch__item.is-active, .site-header.is-over-hero .switcher.is-open > .switcher__panel .theme-switch__btn.is-active { background: var(--brand-100); color: var(--brand-text); } .site-header.is-stuck { border-bottom-color: var(--ink-200); box-shadow: 0 1px 0 rgba(var(--shadow-rgb), .04), 0 10px 30px -24px rgba(var(--shadow-rgb), .5); } .site-header.is-hidden { transform: translateY(-105%); } /* Sprachumschalter */ .lang-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(155, 32, 78, .07); border: 1px solid rgba(155, 32, 78, .12); } .lang-switch__item { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 28px; padding: 0 8px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--ink-700); text-decoration: none; transition: background .2s, color .2s, transform .15s; } .lang-switch__item:hover { color: var(--brand-700); } .lang-switch__item.is-active { background: var(--surface); color: var(--brand-700); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12); } /* --------------------------------------------------------------------------- Umschalter (Darstellung + Sprache) Bis 639 px: ein einzelnes Symbol, das ein kleines Menü aufklappt. Ab 640 px: die Optionen stehen wie gewohnt nebeneinander. Beides aus demselben Markup – umgeschaltet wird nur per CSS. --------------------------------------------------------------------------- */ .switcher { position: relative; } .switcher__trigger { display: none; place-items: center; width: 34px; height: 34px; padding: 0; cursor: pointer; border: 1px solid rgba(155, 32, 78, .12); border-radius: 999px; background: rgba(155, 32, 78, .07); color: var(--ink-700); transition: background .2s, color .2s, border-color .2s, transform .15s; -webkit-tap-highlight-color: transparent; } .switcher__trigger:active { transform: scale(.92); } .switcher__trigger svg { width: 17px; height: 17px; } /* Im Symbol steht immer das gerade gewählte Zeichen (Sonne/Halbmond/Mond). Gesteuert über data-theme-mode am – ganz ohne JavaScript. */ .switcher__icon { display: none; } .switcher__icon.is-fixed, :root[data-theme-mode="light"] .switcher__icon[data-theme-icon="light"], :root[data-theme-mode="auto"] .switcher__icon[data-theme-icon="auto"], :root[data-theme-mode="dark"] .switcher__icon[data-theme-icon="dark"] { display: grid; } .switcher__label { display: none; } @media (max-width: 639px) { .switcher__trigger { display: grid; } .switcher > .switcher__panel { position: absolute; top: calc(100% + 9px); right: 0; z-index: 60; display: flex; flex-direction: column; align-items: stretch; gap: 2px; min-width: 184px; padding: 6px; background: var(--surface); border: 1px solid var(--ink-200); border-radius: 15px; box-shadow: 0 10px 34px -12px rgba(var(--shadow-rgb), .55); opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.97); transform-origin: top right; transition: opacity .2s, transform .2s cubic-bezier(.34,1.3,.64,1), visibility .2s; } .switcher.is-open > .switcher__panel { opacity: 1; visibility: visible; transform: none; } .switcher.is-open .switcher__trigger { background: var(--brand-700); border-color: var(--brand-700); color: #fff; } /* Optionen im Menü: Symbol/Kürzel links, Beschriftung daneben */ .switcher__panel .theme-switch__btn, .switcher__panel .lang-switch__item { justify-content: flex-start; gap: 11px; width: 100%; min-width: 0; height: 40px; padding: 0 12px; border-radius: 10px; font-size: 14px; letter-spacing: 0; } .switcher__panel .theme-switch__btn svg { width: 17px; height: 17px; } .switcher__code { display: inline-grid; place-items: center; width: 17px; font-size: 11.5px; } .switcher__label { display: inline; font-weight: 500; } .switcher__panel .theme-switch__btn.is-active, .switcher__panel .lang-switch__item.is-active { background: var(--brand-100); color: var(--brand-text); box-shadow: none; } } /* Umschalter Hell / Automatisch / Dunkel */ .theme-switch { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(155, 32, 78, .07); border: 1px solid rgba(155, 32, 78, .12); } :root[data-theme="dark"] .theme-switch, :root[data-theme="dark"] .lang-switch { background: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .13); } .theme-switch__btn { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 28px; padding: 0; cursor: pointer; border: 0; border-radius: 999px; background: transparent; color: var(--ink-700); transition: background .2s, color .2s, transform .15s; -webkit-tap-highlight-color: transparent; } .theme-switch__btn:hover { color: var(--brand-text); } .theme-switch__btn:active { transform: scale(.9); } .theme-switch__btn.is-active { background: var(--surface); color: var(--brand-text); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .12); } .theme-switch__btn svg { width: 15px; height: 15px; } /* Farbwechsel sanft, aber nicht bei jedem Hover-Effekt mitziehen */ :root.theme-fade body, :root.theme-fade .site-header, :root.theme-fade .controls, :root.theme-fade .tile__btn, :root.theme-fade .quick-card, :root.theme-fade .chip, :root.theme-fade .search__input, :root.theme-fade .modal__panel { transition: background-color .28s ease, color .28s ease, border-color .28s ease; } /* ========================================================================= Titelbereich ========================================================================= */ /* Fester dunkler Grund: Das Titelbild liegt darauf und trägt hellen Text – das muss in beiden Farbschemata gleich bleiben. */ .hero { position: relative; overflow: hidden; background: #2e2523; } .hero__media { position: absolute; inset: 0; } .hero__media img { width: 100%; height: 100%; object-fit: cover; } .hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(var(--shadow-rgb), .86) 0%, rgba(var(--shadow-rgb), .45) 42%, rgba(var(--shadow-rgb), .18) 70%, rgba(var(--shadow-rgb), .35) 100%), radial-gradient(120% 70% at 15% 100%, rgba(155,32,78,.42), transparent 60%); } .hero__fade { position: absolute; inset-inline: 0; bottom: -1px; height: 90px; z-index: 5; background: linear-gradient(to bottom, transparent, var(--ink-50)); pointer-events: none; } .hero__kicker { margin: 0 0 14px; display: inline-flex; align-items: center; gap: 9px; align-self: flex-start; padding: 6px 14px 6px 12px; border-radius: 999px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.26); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); color: #fff; font-size: 11.5px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; } .hero__kicker::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--azure-300); box-shadow: 0 0 0 4px rgba(147,189,213,.25); } .hero__title { margin: 0; color: #fff; font-weight: 400; font-size: clamp(2.35rem, 8.5vw, 4.5rem); line-height: 1.03; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(0,0,0,.35); } .hero__text { margin: 18px 0 0; max-width: 46ch; color: rgba(255,255,255,.88); font-size: clamp(1rem, 2.4vw, 1.15rem); line-height: 1.65; } .hero__sign { margin: 20px 0 0; color: var(--azure-300); font-size: 1.05rem; font-style: italic; } /* ========================================================================= Auf einen Blick ========================================================================= */ .quick-grid { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 900px) { .quick-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } } .quick-card { display: flex; align-items: center; gap: 11px; height: 100%; padding: 13px 14px; border-radius: 15px; background: var(--surface); border: 1px solid var(--ink-200); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04), 0 14px 30px -22px rgba(var(--shadow-rgb), .55); color: inherit; text-decoration: none; transition: transform .2s cubic-bezier(.4,0,.2,1), box-shadow .2s, border-color .2s; } a.quick-card:hover { transform: translateY(-2px); border-color: rgba(155,32,78,.3); box-shadow: 0 10px 24px -14px rgba(155,32,78,.5); } a.quick-card:active { transform: translateY(0); } .quick-card__icon { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); color: #fff; } .quick-card__label { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-700); } .quick-card__value { display: block; margin-top: 2px; font-size: 13px; line-height: 1.35; color: var(--ink-700); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } /* ========================================================================= Steuerleiste (Suche + Umschalter + Sprungleiste) ========================================================================= */ .controls { top: 0; margin-top: 26px; background: var(--controls-bg); backdrop-filter: saturate(180%) blur(16px); -webkit-backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid transparent; transition: border-color .3s, box-shadow .3s, top .32s cubic-bezier(.4,0,.2,1); } .controls.is-stuck { border-bottom-color: var(--ink-200); box-shadow: 0 10px 30px -26px rgba(var(--shadow-rgb), .8); } body:not(.header-hidden) .controls { top: var(--header-h); } /* Suche */ .search { position: relative; flex: 1 1 auto; min-width: 0; } .search__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--ink-500); pointer-events: none; } .search__input { width: 100%; height: 46px; padding: 0 42px 0 42px; border-radius: 14px; border: 1px solid var(--ink-200); background: var(--surface); color: var(--ink-900); font-size: 16px; /* 16px verhindert iOS-Zoom */ box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04); transition: border-color .2s, box-shadow .2s; } .search__input::placeholder { color: var(--ink-500); } .search__input:focus { outline: none; border-color: var(--brand-600); box-shadow: 0 0 0 4px rgba(198,38,73,.12); } .search__input::-webkit-search-cancel-button { display: none; } .search__clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 50%; cursor: pointer; background: var(--ink-200); color: var(--ink-700); transition: background .2s, color .2s; } .search__clear:hover { background: var(--brand-700); color: #fff; } /* iPhone-artiger Umschalter */ .sort-toggle { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 5px 10px; height: 46px; border-radius: 14px; background: var(--surface); border: 1px solid var(--ink-200); box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .04); } .sort-toggle__label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--ink-500); transition: color .2s; user-select: none; } body[data-sort="grouped"] .sort-toggle__label[data-for="grouped"], body[data-sort="alpha"] .sort-toggle__label[data-for="alpha"] { color: var(--brand-700); } .switch { position: relative; flex: none; cursor: pointer; width: 48px; height: 28px; padding: 0; border: 0; border-radius: 999px; background: var(--ink-200); transition: background .28s cubic-bezier(.4,0,.2,1); -webkit-tap-highlight-color: transparent; } .switch[aria-checked="true"] { background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); } .switch__knob { position: absolute; top: 2px; left: 2px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.04); transition: transform .28s cubic-bezier(.4,0,.2,1), width .18s; } .switch[aria-checked="true"] .switch__knob { transform: translateX(20px); } .switch:active .switch__knob { width: 28px; } .switch[aria-checked="true"]:active .switch__knob { transform: translateX(16px); } /* Sprungleiste */ .jumpbar { position: relative; margin: 0 -16px; padding: 0 0 10px; } @media (min-width: 640px) { .jumpbar { margin: 0 -24px; } } .jumpbar__track { display: flex; gap: 7px; overflow-x: auto; overscroll-behavior-x: contain; padding: 2px 16px 4px; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x proximity; } @media (min-width: 640px) { .jumpbar__track { padding-inline: 24px; } } .jumpbar__track::-webkit-scrollbar { display: none; } .chip { flex: none; scroll-snap-align: start; display: inline-flex; align-items: center; justify-content: center; height: 30px; padding: 0 13px; border-radius: 999px; border: 1px solid var(--ink-200); background: var(--surface); color: var(--ink-700); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .18s, color .18s, border-color .18s, transform .15s; } .chip:hover { border-color: var(--brand-700); color: var(--brand-700); } .chip:active { transform: scale(.96); } .chip.is-current { background: var(--brand-700); border-color: var(--brand-700); color: #fff; } .chip--letter { width: 30px; padding: 0; font-weight: 700; } .chip.is-empty { opacity: .32; pointer-events: none; } .result-count { margin: 0; padding: 0 0 10px; font-size: 12.5px; color: var(--ink-500); } /* ========================================================================= Kacheln ========================================================================= */ .tiles { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } } @media (min-width: 1024px) { .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } } @media (min-width: 1400px) { .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } } /* Abschnittsüberschrift spannt sich über die ganze Reihe */ .section-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 11px; margin: 26px 0 2px; scroll-margin-top: calc(var(--header-h) + var(--controls-h) + 12px); font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, serif; font-size: clamp(1.3rem, 3.4vw, 1.75rem); font-weight: 400; line-height: 1.2; color: var(--ink-900); } .tiles > .section-head:first-of-type { margin-top: 6px; } .section-head::after { content: ""; flex: 1 1 auto; height: 1px; background: linear-gradient(to right, var(--ink-200), transparent); } .section-head__icon { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 11px; background: var(--brand-100); color: var(--brand-700); } .section-head__letter { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); color: #fff; font-size: 17px; font-weight: 700; font-family: inherit; } /* Kachel */ .tile { min-width: 0; } .tile[hidden] { display: none !important; } .tile__btn { display: flex; flex-direction: column; width: 100%; height: 100%; padding: 0; margin: 0; text-align: left; cursor: pointer; border: 1px solid var(--ink-200); border-radius: var(--radius); background: var(--surface); overflow: hidden; box-shadow: 0 1px 2px rgba(var(--shadow-rgb), .05), 0 8px 24px -18px rgba(var(--shadow-rgb), .6); transition: transform .28s cubic-bezier(.4,0,.2,1), box-shadow .28s, border-color .28s; -webkit-tap-highlight-color: transparent; } @media (hover: hover) { .tile__btn:hover { transform: translateY(-5px); border-color: rgba(155,32,78,.28); box-shadow: 0 10px 20px -10px rgba(var(--shadow-rgb), .16), 0 28px 50px -28px rgba(155,32,78,.6); } } .tile__btn:active { transform: translateY(-1px) scale(.99); } .tile__media { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: var(--ink-200); } .tile__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .55s cubic-bezier(.2,.6,.2,1), filter .35s; } @media (hover: hover) { .tile__btn:hover .tile__img { transform: scale(1.07); } } /* Platzhalter, solange kein Foto hinterlegt ist */ .tile__ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.9); background: linear-gradient(140deg, var(--brand-700), var(--brand-800) 55%, #5c1230); } .tile__ph::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 60% at 80% 10%, rgba(147,189,213,.35), transparent 60%); } .tile__ph[data-ph="active"], .tile__ph[data-ph="wellness"] { background: linear-gradient(140deg, #3d7fa3, #275a78 60%, #1c4157); } .tile__ph[data-ph="gusto"] { background: linear-gradient(140deg, #b8452f, #8d2f20 60%, #6b2317); } .tile__ph[data-ph="zimmer"] { background: linear-gradient(140deg, #6c6968, #4d403e 60%, #372c2a); } .tile__scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(var(--shadow-rgb), .45), transparent 55%); opacity: 0; transition: opacity .3s; } @media (hover: hover) { .tile__btn:hover .tile__scrim { opacity: 1; } } /* Klick-Hinweis */ .tile__cue { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; color: var(--brand-700); background: rgba(255,255,255,.94); box-shadow: 0 2px 10px rgba(var(--shadow-rgb), .25); opacity: 0; transform: scale(.6) rotate(-90deg); transition: opacity .28s cubic-bezier(.34,1.4,.64,1), transform .28s cubic-bezier(.34,1.4,.64,1); } @media (hover: hover) { .tile__btn:hover .tile__cue { opacity: 1; transform: scale(1) rotate(0); } } @media (hover: none) { .tile__cue { opacity: .95; transform: none; } } .tile__body { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; padding: 12px 13px 13px; } @media (min-width: 640px) { .tile__body { padding: 14px 16px 15px; } } .tile__title { font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, Cambria, serif; font-size: 15.5px; line-height: 1.28; color: var(--ink-900); transition: color .2s; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (min-width: 640px) { .tile__title { font-size: 17px; } } @media (hover: hover) { .tile__btn:hover .tile__title { color: var(--brand-700); } } .tile__more { margin-top: auto; display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; color: var(--brand-700); opacity: .55; transition: opacity .25s, gap .25s; } @media (hover: hover) { .tile__btn:hover .tile__more { opacity: 1; gap: 9px; } } /* Einblenden beim Scrollen */ .reveal { opacity: 0; transform: translateY(26px) scale(.985); } .reveal.is-in { opacity: 1; transform: none; transition: opacity .6s cubic-bezier(.2,.6,.2,1) var(--d, 0ms), transform .6s cubic-bezier(.2,.6,.2,1) var(--d, 0ms); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* Leerzustand */ .empty { padding: 70px 20px; text-align: center; } .empty__icon { display: grid; place-items: center; width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 20px; background: var(--brand-100); color: var(--brand-700); } .empty__title { margin: 0; font-family: ui-serif, "Iowan Old Style", Georgia, serif; font-size: 1.5rem; color: var(--ink-900); } .empty__text { margin: 8px auto 0; max-width: 36ch; color: var(--ink-500); font-size: 14.5px; line-height: 1.6; } /* ========================================================================= Buttons ========================================================================= */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 22px; border: 0; border-radius: 999px; cursor: pointer; background: linear-gradient(135deg, var(--brand-700), var(--brand-600)); color: #fff; font-size: 14.5px; font-weight: 600; text-decoration: none; box-shadow: 0 6px 18px -8px rgba(155,32,78,.8); transition: transform .18s, box-shadow .25s, filter .2s; } .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 12px 26px -10px rgba(155,32,78,.85); } .btn-primary:active { transform: translateY(0); } .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 44px; padding: 0 18px; cursor: pointer; border: 1px solid var(--ink-200); border-radius: 999px; background: var(--surface); color: var(--ink-700); font-size: 14.5px; font-weight: 600; transition: border-color .2s, color .2s, background .2s; } .btn-ghost:hover { border-color: var(--brand-700); color: var(--brand-700); background: var(--brand-100); } /* ========================================================================= Popup ========================================================================= */ .modal { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; } @media (min-width: 768px) { .modal { align-items: center; padding: 28px; } } .modal[hidden] { display: none; } .modal__backdrop { position: absolute; inset: 0; background: rgba(var(--shadow-rgb), .55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity .3s; } .modal.is-open .modal__backdrop { opacity: 1; } .modal__panel { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 720px; max-height: 92svh; background: var(--surface); border-radius: 26px 26px 0 0; box-shadow: 0 -10px 60px rgba(var(--shadow-rgb), .35); overflow: hidden; transform: translateY(100%); transition: transform .4s cubic-bezier(.32,.72,0,1); padding-bottom: env(safe-area-inset-bottom); } @media (min-width: 768px) { .modal__panel { max-height: 88vh; border-radius: 26px; transform: translateY(22px) scale(.97); opacity: 0; transition: transform .32s cubic-bezier(.2,.8,.2,1), opacity .28s; } } .modal.is-open .modal__panel { transform: none; opacity: 1; } .modal__panel.is-dragging { transition: none; } .modal__grab { display: flex; justify-content: center; padding: 9px 0 3px; cursor: grab; touch-action: none; } .modal__grab span { display: block; width: 40px; height: 4px; border-radius: 999px; background: var(--ink-200); } @media (min-width: 768px) { .modal__grab { display: none; } } .modal__close { position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.9); color: var(--ink-900); box-shadow: 0 2px 12px rgba(var(--shadow-rgb), .28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background .2s, color .2s, transform .2s; } .modal__close:hover { background: var(--brand-700); color: #fff; transform: rotate(90deg); } .modal__scroll { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } /* Galerie */ .modal__gallery { position: relative; margin: 0; background: var(--ink-200); } .modal__slides { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .modal__slides::-webkit-scrollbar { display: none; } .modal__slides img { flex: 0 0 100%; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; scroll-snap-align: center; display: block; } .modal__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.88); color: var(--ink-900); box-shadow: 0 2px 10px rgba(var(--shadow-rgb), .25); } .modal__nav--prev { left: 10px; } .modal__nav--next { right: 10px; } .modal__nav:hover { background: #fff; } .modal__dots { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; z-index: 2; } .modal__dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; cursor: pointer; background: rgba(255,255,255,.55); transition: width .25s, background .25s; } .modal__dots button.is-active { width: 20px; border-radius: 999px; background: #fff; } .modal__inner { padding: 22px 20px 26px; } @media (min-width: 768px) { .modal__inner { padding: 28px 34px 34px; } } .modal__eyebrow { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-700); } .modal__title { margin: 0 0 16px; font-weight: 400; line-height: 1.15; letter-spacing: -.01em; font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--ink-900); } .modal__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--ink-200); } /* Inhaltstext */ .prose-hotel { color: var(--ink-700); font-size: 15.5px; line-height: 1.72; } .prose-hotel > *:first-child { margin-top: 0; } .prose-hotel > *:last-child { margin-bottom: 0; } .prose-hotel p { margin: 0 0 1em; } .prose-hotel strong, .prose-hotel b { color: var(--ink-900); font-weight: 650; } .prose-hotel h3, .prose-hotel h4, .prose-hotel h5 { margin: 1.7em 0 .55em; font-family: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif; font-size: 1.14em; font-weight: 400; color: var(--ink-900); } .prose-hotel ul, .prose-hotel ol { margin: 0 0 1em; padding-left: 1.15em; } .prose-hotel li { margin: 0 0 .5em; padding-left: .2em; } .prose-hotel ul { list-style: none; padding-left: 0; } .prose-hotel ul > li { position: relative; padding-left: 1.5em; } .prose-hotel ul > li::before { content: ""; position: absolute; left: .3em; top: .72em; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-600); } .prose-hotel a { color: var(--brand-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px; } .prose-hotel a:hover { color: var(--brand-600); } .prose-hotel blockquote { margin: 1.4em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--azure-300); color: var(--ink-500); font-style: italic; } .prose-hotel hr { margin: 1.8em 0; border: 0; border-top: 1px solid var(--ink-200); } .prose-hotel table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .95em; } .prose-hotel th, .prose-hotel td { padding: .55em .7em; border-bottom: 1px solid var(--ink-200); text-align: left; } .prose-hotel th { color: var(--ink-900); font-weight: 650; } body.modal-open { overflow: hidden; } /* ========================================================================= Footer ========================================================================= */ .site-footer { position: relative; background: linear-gradient(150deg, var(--brand-800) 0%, var(--brand-700) 45%, #6d1637 100%); color: #fff; } .site-footer::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 60% at 100% 0%, rgba(147,189,213,.22), transparent 60%); } .site-footer > * { position: relative; } .footer-head { margin: 0 0 14px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.55); } .footer-link { display: inline-flex; align-items: center; gap: 9px; color: rgba(255,255,255,.88); font-size: 15px; text-decoration: none; transition: color .2s, gap .2s; } .footer-link:hover { color: #fff; gap: 12px; } .footer-link svg { flex: none; opacity: .65; } .footer-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; margin-top: 42px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.16); font-size: 12.5px; color: rgba(255,255,255,.6); } .footer-legal p { margin: 0; } .footer-legal__links { display: flex; flex-wrap: wrap; gap: 8px 20px; } .footer-legal__links a { color: rgba(255,255,255,.72); text-decoration: none; } .footer-legal__links a:hover { color: #fff; text-decoration: underline; } /* ========================================================================= Nach oben / Cookie-Icon / Toast ========================================================================= */ .to-top { position: fixed; right: 16px; z-index: 45; bottom: calc(16px + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; cursor: pointer; background: var(--surface); color: var(--brand-700); border: 1px solid var(--ink-200); box-shadow: 0 6px 22px -8px rgba(var(--shadow-rgb), .5); opacity: 0; transform: translateY(14px) scale(.9); transition: opacity .28s, transform .28s, background .2s, color .2s; } .to-top[hidden] { display: none; } .to-top.is-in { opacity: 1; transform: none; } .to-top:hover { background: var(--brand-700); color: #fff; } .cookie_img { position: fixed; left: 16px; z-index: 45; bottom: calc(16px + env(safe-area-inset-bottom)); } .cookie_img a { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; text-decoration: none; background: var(--surface); color: var(--brand-700); border: 1px solid var(--ink-200); box-shadow: 0 6px 22px -10px rgba(var(--shadow-rgb), .55); transition: background .2s, color .2s, transform .2s; } .cookie_img a:hover { background: var(--brand-700); color: #fff; transform: rotate(-12deg) scale(1.06); } /* Größe des Cookie-Symbols. Bewusst hier statt als Tailwind-Klasse im HTML, damit sie erhalten bleibt, falls Tailwind später entfällt. */ .cookie_img__icon { width: 1.7rem; height: 1.7rem; } .toast { position: fixed; left: 50%; z-index: 70; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); padding: 11px 20px; border-radius: 999px; background: var(--toast-bg); color: var(--toast-fg); font-size: 14px; font-weight: 500; box-shadow: 0 10px 34px -12px rgba(0,0,0,.7); opacity: 0; transition: opacity .25s, transform .25s; pointer-events: none; } .toast[hidden] { display: none; } .toast.is-in { opacity: 1; transform: translate(-50%, 0); } /* Cookie-Consent-Banner leicht an die Marke anpassen */ #cc-nb-okagree, .cc-nb-okagree { background-color: var(--brand-700) !important; } #cc-nb-reject, .cc-nb-reject { border-color: var(--brand-700) !important; }