/* =========================================================================== Lillys — aufsetzendes Stylesheet Wird nach site.css geladen (siehe themes/base/partials/head.blade.php) und ändert nur, was ein Restaurant anders braucht. Alles Übrige — Blockarten, Formulare, Rechtstexte, Beiträge — bleibt das des Basis-Themes und wird hier nicht ein zweites Mal gepflegt. Die Haltung dahinter: eine Restaurantseite verkauft über Bilder und über einen einzigen Knopf. Deshalb grosse Flächen, warme Töne, viel Kontrast zwischen hellen und dunklen Abschnitten — und genau eine Farbe, die sonst nirgends vorkommt: das Gold der Schaltfläche «Tisch reservieren». Kundenfarben kommen aus der Datenbank und stehen als Variablen im (siehe App\Support\ThemeTokens). Hier steht nur, was das Theme selbst festlegt. ACHTUNG bei Abständen: die Skala in site.css kennt 1, 2, 3, 4, 6, 8, 12, 16 und 24 — kein --space-5. Eine Regel mit einer nicht vorhandenen Variablen wirft der Browser stillschweigend weg. =========================================================================== */ :root { --color-bg: #ffffff; --color-bg-muted: #faf5ec; --color-border: #e6ddcd; --color-text: #33231a; --color-text-muted: #6f5c4e; --radius-sm: 6px; --radius-md: 14px; --radius-lg: 24px; /* Höhe der festen Kopfzeile. Steht als Variable, weil main, Aufmacher und Sprungmarken sich alle daran ausrichten müssen — an drei Stellen dieselbe Zahl zu pflegen geht einmal gut. */ --ll-header-h: 4.75rem; --ll-dark: #24150e; --ll-dark-soft: #352116; --ll-cream: #f5ede0; --ll-gold: var(--color-primary); --ll-shadow-card: 0 18px 40px rgba(36, 21, 14, 0.16); --ll-shadow-soft: 0 8px 24px rgba(36, 21, 14, 0.1); } .ll-body { background: var(--color-bg); color: var(--color-text); } /* Der Kopfbereich liegt fest über allem. Damit der Inhalt nicht darunter verschwindet, bekommt main seine Höhe als Polster — und der Aufmacher holt es sich als negativen Aussenabstand zurück, weil sein Bild bis unter die Kopfzeile reichen soll. */ .ll-body main { padding-top: var(--ll-header-h); } .ll-body h1, .ll-body h2, .ll-body h3 { font-family: var(--font-heading); letter-spacing: -0.01em; } /* ---- Schaltflächen -------------------------------------------------------- Die eine Farbe, die sonst nirgends vorkommt. «Gefüllt» ist ausschliesslich für die Handlung, um die es auf der ganzen Seite geht — sobald drei Knöpfe nebeneinander gefüllt sind, fällt keiner mehr auf. --------------------------------------------------------------------------- */ .ll-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border: 2px solid transparent; border-radius: 999px; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; } .ll-button--solid { background: var(--ll-gold); border-color: var(--ll-gold); color: var(--ll-dark); box-shadow: 0 6px 18px rgba(36, 21, 14, 0.22); } .ll-button--solid:hover, .ll-button--solid:focus-visible { background: #ffffff; border-color: #ffffff; color: var(--ll-dark); transform: translateY(-2px); } .ll-button--outline { background: transparent; border-color: currentColor; color: #ffffff; } .ll-button--outline:hover, .ll-button--outline:focus-visible { background: #ffffff; border-color: #ffffff; color: var(--ll-dark); transform: translateY(-2px); } .ll-button--ghost { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.35); color: #ffffff; } .ll-button--ghost:hover, .ll-button--ghost:focus-visible { background: rgba(255, 255, 255, 0.18); border-color: #ffffff; } .ll-button--lg { padding: var(--space-4) var(--space-8); font-size: var(--text-lg); } .ll-button--block { width: 100%; } .ll-button__icon { width: 1.1em; height: 1.1em; } /* Auf hellem Grund braucht «umrandet» eine dunkle Schrift — sonst steht Weiss auf Weiss. Gilt für die Schaltfläche unter der Speisekarte. */ .ll-menucta .ll-button--outline, .ll-visit .ll-button--outline { color: var(--ll-dark); } /* ---- Kopfbereich ---------------------------------------------------------- */ .ll-header { position: fixed; top: 0; right: 0; left: 0; z-index: 60; background: var(--ll-dark); border-bottom: 1px solid rgba(255, 255, 255, 0.08); transition: background-color 0.25s ease, border-color 0.25s ease; } /* Nur auf der Startseite und nur mit JavaScript — siehe restaurant.js. */ .ll-header--float { background: linear-gradient(to bottom, rgba(20, 11, 7, 0.65), rgba(20, 11, 7, 0)); border-bottom-color: transparent; } .ll-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: var(--ll-header-h); } .ll-brand { display: inline-flex; flex-direction: column; color: #ffffff; text-decoration: none; line-height: 1.1; } .ll-brand__logo { max-height: 3rem; width: auto; } .ll-brand__name { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; letter-spacing: 0.02em; } .ll-nav__list { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .ll-nav__list a, .ll-nav__list .menu__summary { color: rgba(255, 255, 255, 0.88); font-size: var(--text-base); font-weight: 600; text-decoration: none; white-space: nowrap; } .ll-nav__list a:hover, .ll-nav__list a:focus-visible, .ll-nav__list a[aria-current="page"] { color: var(--ll-gold); } .ll-nav__extra { display: none; } .ll-header__actions { display: flex; align-items: center; gap: var(--space-4); } .ll-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); color: #ffffff; font-weight: 600; text-decoration: none; white-space: nowrap; } .ll-header__phone-icon { width: 1.15rem; height: 1.15rem; color: var(--ll-gold); } .ll-nav-toggle { display: none; width: 2.75rem; height: 2.75rem; align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: var(--radius-sm); cursor: pointer; } .ll-nav-toggle__bars, .ll-nav-toggle__bars::before, .ll-nav-toggle__bars::after { display: block; width: 1.25rem; height: 2px; background: #ffffff; content: ""; } .ll-nav-toggle__bars::before { transform: translateY(-6px); } .ll-nav-toggle__bars::after { transform: translateY(4px); } /* ---- Aufmacher ------------------------------------------------------------ */ .ll-hero { position: relative; display: flex; align-items: center; justify-content: center; min-height: min(46rem, 92vh); margin-top: calc(var(--ll-header-h) * -1); padding: calc(var(--ll-header-h) + var(--space-16)) 0 var(--space-16); background: var(--ll-dark); overflow: hidden; text-align: center; } .ll-hero__media { position: absolute; inset: 0; } .ll-hero__media picture, .ll-hero__media img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Der Schleier über dem Bild. Als eigenes Element und nicht als Deckkraft am Bild: das Bild soll seine Farben behalten, dunkler werden soll nur, was zwischen ihm und der Schrift liegt. */ .ll-hero__media::after { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(20, 11, 7, 0.72) 0%, rgba(20, 11, 7, 0.55) 45%, rgba(20, 11, 7, 0.82) 100% ); content: ""; } .ll-hero__inner { position: relative; max-width: 54rem; } .ll-hero__kicker { margin: 0 0 var(--space-4); color: var(--ll-gold); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; } .ll-hero__heading { margin: 0; color: #ffffff; font-size: clamp(2.25rem, 6vw, 4rem); font-weight: 800; line-height: 1.08; text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45); } .ll-hero__text { max-width: 40rem; margin: var(--space-6) auto 0; color: rgba(255, 255, 255, 0.9); font-size: var(--text-lg); line-height: 1.6; } .ll-hero__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); margin-top: var(--space-8); } /* Die Marke, an der restaurant.js umschaltet. Sie stellt nichts dar und darf deshalb auch keinen Platz belegen. */ .ll-scrollmarke { position: absolute; bottom: 0; left: 0; width: 1px; height: 1px; } /* ---- Kopf einer Unterseite ------------------------------------------------ */ .ll-pagehead, .ll-menuhead { padding: var(--space-16) 0 var(--space-12); background: var(--ll-dark); color: #ffffff; text-align: center; } .ll-pagehead__heading, .ll-menuhead__heading { margin: 0; color: #ffffff; font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; } .ll-pagehead__lead, .ll-menuhead__lead { max-width: 42rem; margin: var(--space-4) auto 0; color: rgba(255, 255, 255, 0.82); font-size: var(--text-lg); line-height: 1.6; } /* ---- Über uns ------------------------------------------------------------- */ .ll-about { padding: var(--space-24) 0; background: var(--color-bg); } .ll-about__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-16); } .ll-about__heading { margin: 0 0 var(--space-6); color: var(--ll-dark); font-size: clamp(1.75rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.15; } .ll-about__text .prose { color: var(--color-text-muted); font-size: var(--text-base); line-height: 1.75; } .ll-about__media picture, .ll-about__image { display: block; width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--ll-shadow-card); } /* ---- Empfehlungen des Hauses ---------------------------------------------- */ .ll-dishes { position: relative; padding: var(--space-24) 0; background: var(--ll-dark); overflow: hidden; } .ll-dishes__media { position: absolute; inset: 0; } .ll-dishes__media picture, .ll-dishes__backdrop { display: block; width: 100%; height: 100%; object-fit: cover; } .ll-dishes__media::after { position: absolute; inset: 0; background: rgba(20, 11, 7, 0.82); content: ""; } .ll-dishes__inner { position: relative; text-align: center; } .ll-dishes__heading { margin: 0; color: #ffffff; font-size: clamp(1.85rem, 4vw, 2.75rem); font-weight: 800; } .ll-dishes__text { max-width: 38rem; margin: var(--space-4) auto 0; color: rgba(255, 255, 255, 0.78); line-height: 1.6; } .ll-dishcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-6); margin: var(--space-12) 0 0; padding: 0; list-style: none; text-align: left; } .ll-dishcard { display: flex; flex-direction: column; background: #ffffff; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--ll-shadow-card); transition: transform 0.18s ease; } .ll-dishcard:hover { transform: translateY(-6px); } .ll-dishcard__media picture, .ll-dishcard__image { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .ll-dishcard__body { padding: var(--space-6); } .ll-dishcard__name { margin: 0; color: var(--ll-dark); font-size: var(--text-xl); font-weight: 800; line-height: 1.2; } .ll-dishcard__original { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); font-style: italic; } .ll-dishcard__text { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; } .ll-dishcard__price { margin: var(--space-4) 0 0; color: var(--ll-dark); font-weight: 800; } .ll-dishes__more { margin: var(--space-12) 0 0; } /* ---- So finden Sie uns ---------------------------------------------------- */ .ll-visit { padding: var(--space-24) 0; background: var(--color-bg); text-align: center; } .ll-visit__heading { margin: 0; color: var(--ll-dark); font-size: clamp(1.85rem, 4vw, 2.75rem); font-weight: 800; } .ll-visit__text { max-width: 38rem; margin: var(--space-4) auto 0; color: var(--color-text-muted); line-height: 1.6; } .ll-visit__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: var(--space-16); margin-top: var(--space-12); text-align: left; } .ll-visit__list { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; } .ll-visit__item { display: flex; align-items: flex-start; gap: var(--space-4); } .ll-visit__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 3rem; height: 3rem; background: var(--ll-cream); border-radius: 999px; color: var(--ll-dark); } .ll-visit__icon svg { width: 1.4rem; height: 1.4rem; } .ll-visit__label { margin: 0; color: var(--ll-dark); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; } .ll-visit__value { margin: var(--space-1) 0 0; color: var(--color-text-muted); line-height: 1.6; } .ll-visit__value a { color: inherit; } .ll-visit__map .embed, .ll-visit__map .embed__frame { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--ll-shadow-card); } /* ---- Freie Blöcke auf der Startseite -------------------------------------- */ .ll-blocks { padding-top: var(--space-16); padding-bottom: var(--space-16); } /* ---- Speisekarte ---------------------------------------------------------- */ .ll-jump { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-8); } .ll-jump__link { padding: var(--space-2) var(--space-4); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; color: #ffffff; font-size: var(--text-sm); font-weight: 600; text-decoration: none; } .ll-jump__link:hover, .ll-jump__link:focus-visible { background: var(--ll-gold); border-color: var(--ll-gold); color: var(--ll-dark); } .ll-menu { max-width: 56rem; padding-top: var(--space-16); padding-bottom: var(--space-24); } .ll-section { /* Damit ein Sprung aus der Leiste nicht unter der festen Kopfzeile landet. */ scroll-margin-top: calc(var(--ll-header-h) + var(--space-4)); } .ll-section + .ll-section { margin-top: var(--space-16); } .ll-section__head { margin-bottom: var(--space-8); padding-bottom: var(--space-4); border-bottom: 2px solid var(--ll-cream); } .ll-section__heading { margin: 0; color: var(--ll-dark); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; } .ll-section__subtitle { margin: var(--space-1) 0 0; color: var(--ll-gold); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .ll-section__text { margin: var(--space-3) 0 0; color: var(--color-text-muted); line-height: 1.65; } .ll-section__note { margin-top: var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); font-style: italic; } .ll-dishlist { display: grid; gap: var(--space-8); margin: 0; padding: 0; list-style: none; } .ll-dish { display: flex; gap: var(--space-6); } .ll-dish__media { flex: 0 0 auto; } .ll-dish__media picture, .ll-dish__image { display: block; width: 6.5rem; height: 6.5rem; border-radius: var(--radius-md); object-fit: cover; } .ll-dish__body { flex: 1 1 auto; min-width: 0; } /* Name links, Preis rechts, dazwischen die Punktlinie — wie auf der gedruckten Karte. Der Strich ist ein flexibles Element und keine Zeichenkette: er füllt genau den Platz, der übrig bleibt, und bricht nicht an der falschen Stelle um. */ .ll-dish__line { display: flex; align-items: baseline; gap: var(--space-3); margin: 0; } .ll-dish__name { color: var(--ll-dark); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 800; } .ll-dish__number { display: inline-block; min-width: 2.1rem; color: var(--ll-gold); } .ll-dish__spice { margin-left: var(--space-2); color: #c0392b; font-size: var(--text-lg); letter-spacing: 0.1em; } .ll-dish__dots { flex: 1 1 auto; min-width: var(--space-6); height: 0; border-bottom: 2px dotted var(--color-border); transform: translateY(-0.25em); } .ll-dish__price { color: var(--ll-dark); font-family: var(--font-heading); font-weight: 800; white-space: nowrap; } .ll-dish__original { margin: var(--space-1) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); font-style: italic; } .ll-dish__text { margin: var(--space-2) 0 0; max-width: var(--measure); color: var(--color-text-muted); line-height: 1.6; } .ll-dish__variants { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-3) 0 0; padding: 0; list-style: none; } .ll-dish__variants li { display: inline-flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-sm); } .ll-dish__variant-label { color: var(--color-text-muted); } .ll-dish__variant-price { color: var(--ll-dark); font-weight: 700; } .ll-dish__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-3) 0 0; } .ll-tag { padding: 0.15rem var(--space-3); background: var(--ll-cream); border-radius: 999px; color: var(--ll-dark); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .ll-dish__declaration { color: var(--color-text-muted); font-size: 0.75rem; } .ll-menu__empty { padding: var(--space-16) 0; color: var(--color-text-muted); text-align: center; } .ll-legend { margin-top: var(--space-16); padding: var(--space-6); background: var(--color-bg-muted); border-radius: var(--radius-md); } .ll-legend__heading { margin: 0 0 var(--space-2); color: var(--ll-dark); font-size: var(--text-base); font-weight: 800; } .ll-legend__text { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.65; } .ll-menucta { margin-top: var(--space-16); padding: var(--space-12) var(--space-6); background: var(--ll-cream); border-radius: var(--radius-lg); text-align: center; } .ll-menucta__text { margin: 0 0 var(--space-6); color: var(--ll-dark); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; } /* ---- Reservierung --------------------------------------------------------- */ .ll-reserve { display: grid; grid-template-columns: 1fr 1.25fr; gap: var(--space-12); align-items: start; margin-bottom: var(--space-16); padding: var(--space-12); background: var(--ll-cream); border-radius: var(--radius-lg); scroll-margin-top: calc(var(--ll-header-h) + var(--space-4)); } .ll-reserve__heading { margin: 0; color: var(--ll-dark); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; } .ll-reserve__text { margin: var(--space-4) 0 0; color: var(--color-text-muted); line-height: 1.65; } .ll-reserve__form { padding: var(--space-8); background: #ffffff; border-radius: var(--radius-md); box-shadow: var(--ll-shadow-soft); } .ll-reserve__success, .ll-reserve__errors, .ll-dialog__success, .ll-dialog__errors { margin: 0 0 var(--space-4); padding: var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.6; } .ll-reserve__success, .ll-dialog__success { background: #edf7ed; border: 1px solid #bcdfbc; color: #1f5c22; } .ll-reserve__errors, .ll-dialog__errors { background: #fdecea; border: 1px solid #f2b8b2; color: #8b1c12; } .ll-reserve__errors ul, .ll-dialog__errors ul { margin: var(--space-2) 0 0; padding-left: var(--space-6); } /* ---- Reservierungsformular ------------------------------------------------ */ .ll-resform__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } .ll-resform__row--three { grid-template-columns: 1fr 1fr 1fr; } .ll-resform__field { margin-bottom: var(--space-4); } .ll-resform__field label { display: block; margin-bottom: var(--space-1); color: var(--ll-dark); font-size: var(--text-sm); font-weight: 700; } .ll-resform__field input, .ll-resform__field select, .ll-resform__field textarea { width: 100%; padding: var(--space-3); background: #ffffff; border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); font: inherit; } .ll-resform__field input:focus-visible, .ll-resform__field select:focus-visible, .ll-resform__field textarea:focus-visible { border-color: var(--ll-gold); outline: 2px solid var(--ll-gold); outline-offset: 1px; } .ll-resform__consent { display: flex; gap: var(--space-3); margin: var(--space-4) 0; font-size: var(--text-sm); line-height: 1.5; } .ll-resform__consent input { flex: 0 0 auto; margin-top: 0.2em; } .ll-resform__note { margin: var(--space-4) 0 0; color: var(--color-text-muted); font-size: 0.8rem; line-height: 1.55; } /* Der Honigtopf. Vor Auge, Tastatur und Vorleseprogramm versteckt — aber nicht mit display:none, das füllen manche Bots absichtlich aus. */ .ll-resform__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ---- Reservierungsfenster ------------------------------------------------- */ .ll-dialog { width: min(34rem, calc(100vw - var(--space-8))); max-height: calc(100vh - var(--space-12)); padding: 0; background: #ffffff; border: 0; border-radius: var(--radius-lg); box-shadow: var(--ll-shadow-card); color: var(--color-text); } .ll-dialog::backdrop { background: rgba(20, 11, 7, 0.72); } .ll-dialog__inner { position: relative; padding: var(--space-8); } .ll-dialog__dismiss { position: absolute; top: var(--space-4); right: var(--space-4); margin: 0; } .ll-dialog__close { width: 2.25rem; height: 2.25rem; background: var(--ll-cream); border: 0; border-radius: 999px; color: var(--ll-dark); font-size: 1.35rem; line-height: 1; cursor: pointer; } .ll-dialog__close:hover, .ll-dialog__close:focus-visible { background: var(--ll-gold); } .ll-dialog__title { margin: 0 var(--space-12) 0 0; color: var(--ll-dark); font-size: var(--text-2xl); font-weight: 800; } .ll-dialog__lead { margin: var(--space-3) 0 var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; } /* ---- Reservierungsband über dem Fuss --------------------------------------- */ .ll-band { padding: var(--space-16) 0; background: var(--ll-dark-soft); color: #ffffff; } .ll-band__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-8); } .ll-band__heading { margin: 0; font-family: var(--font-heading); font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; } .ll-band__note { margin: var(--space-2) 0 0; color: rgba(255, 255, 255, 0.75); } .ll-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin: 0; } /* ---- Fussbereich ---------------------------------------------------------- */ .ll-footer { padding: var(--space-16) 0 var(--space-8); background: var(--ll-dark); color: rgba(255, 255, 255, 0.78); } .ll-footer__columns { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-12); } .ll-footer__logo { max-height: 3.5rem; width: auto; } .ll-footer__brand { margin: 0; color: #ffffff; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 800; } .ll-footer__heading { margin: 0 0 var(--space-4); color: #ffffff; font-family: var(--font-heading); font-size: var(--text-base); font-weight: 800; letter-spacing: 0.06em; } .ll-footer__text { margin: var(--space-4) 0 0; font-size: var(--text-sm); line-height: 1.7; } .ll-footer__address { font-size: var(--text-sm); font-style: normal; line-height: 1.7; } .ll-footer__links { display: grid; gap: var(--space-2); } .ll-footer a { color: rgba(255, 255, 255, 0.8); text-decoration: none; } .ll-footer a:hover, .ll-footer a:focus-visible { color: var(--ll-gold); text-decoration: underline; } .ll-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); margin-top: var(--space-12); padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: var(--text-sm); } .ll-footer__copy { margin: 0; } .ll-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-6); } /* ---- Bloecke auf den Unterseiten ------------------------------------------- Das Basis-Theme setzt jeden Block in eine Karte mit farbigem Kopfband. Das ist auf einer Leistungsseite richtig — hier nicht: bei einem Restaurant soll die Seite ruhig sein und das Essen laut. Deshalb keine Rahmen, keine Farbbalken, dafuer Luft zwischen den Abschnitten und zentrierte Ueberschriften wie in den festen Abschnitten der Startseite. --------------------------------------------------------------------------- */ .ll-body .content-card { margin-bottom: var(--space-24); border: 0; border-radius: 0; background: transparent; overflow: visible; } .ll-body .content-card__heading { margin: 0 0 var(--space-8); padding: 0; background: transparent; color: var(--ll-dark); font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 800; text-align: center; scroll-margin-top: calc(var(--ll-header-h) + var(--space-4)); } /* Volle Breite, damit Galerie, Kacheln und Team das Raster ausnutzen. Die Lesebreite gilt weiter — aber nur fuer Fliesstext. */ .ll-body .content-card__body { max-width: none; padding: 0; } /* Nur Listen **ohne** Klasse: die kommen aus dem Fliesstext und wollen die Lesebreite. Galerie, Kartenraster, Symbolkacheln und Team sind ebenfalls