/* ============================================================ NONNA'S CREW — LANDINGPAGES ------------------------------------------------------------ Für die Themenseiten (Catering im Münsterland, Hochzeit, Firmenfeier, Buffet). Sie stehen nicht in der Hauptnavigation, sind aber über den Fußbereich der Startseite erreichbar. WARUM EIGENES CSS UND NICHT main.css main.css setzt an vielen Stellen voraus, dass main.js läuft: Reveal-Animationen, der gepinnte Scrollablauf, die Galerie- Matrix. Ohne JavaScript blieben Teile unsichtbar. Diese Seiten sollen aber gerade das Gegenteil sein — statisches HTML, das ohne eine Zeile JavaScript vollständig lesbar ist, für Besucher wie für Crawler. Also: dieselben Tokens (Farben, Schriften, Abstände) aus tokens.css, aber ein eigenes, ruhiges Layout. Die Marke bleibt erkennbar, die Mechanik bleibt weg. ============================================================ */ body:has(.seite) { margin: 0; background: var(--paper); color: var(--text); font-family: var(--font-body); line-height: var(--lead-body); font-size: var(--size-body); } .seite { max-width: 760px; margin: 0 auto; padding: var(--s-24) var(--gutter) var(--s-96); } /* ---------- Kopf ---------- */ .seite__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-16); padding-bottom: var(--s-24); border-bottom: var(--min-line) solid var(--ink); } .seite__logo { font-family: var(--font-logo); font-weight: 400; font-size: 1.5rem; letter-spacing: .02em; color: var(--ink); text-decoration: none; } .seite__zurueck { margin-left: auto; display: inline-flex; align-items: center; min-height: var(--tap); font-size: var(--size-label); font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--ink); text-decoration: none; } .seite__zurueck:hover { box-shadow: 0 var(--min-line) 0 0 var(--ink); } /* ---------- Überschriften ---------- */ /* Die kleine Zeile über der H1 — dieselbe Rolle wie der Eyebrow im Hero der Startseite: sie trägt die Einordnung, damit die Überschrift selbst kurz bleiben darf. */ .seite__kicker { margin: var(--s-48) 0 var(--s-8); font-family: var(--font-accent); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-claim); text-transform: uppercase; color: var(--text-quiet); } .seite h1 { margin: 0 0 var(--s-24); font-family: var(--font-display); font-weight: 400; /* Feste Ober- und Untergrenze statt var(--size-display): der Token wächst in tokens.css mit dem Breakpoint mit, und „Hochzeitscatering" lief damit bei 1280px über den Rand hinaus — 76 px in Climate Crisis sind für ein Wort mit 17 Buchstaben zu viel für 760 px Spaltenbreite. Dazu Silbentrennung: Deutsche Komposita sind lang, und die Display-Schrift ist breit. `hyphens: auto` braucht das lang="de" am , das steht dort. */ font-size: clamp(1.6rem, 5.2vw, 2.8rem); line-height: var(--lead-display); color: var(--ink); text-wrap: balance; overflow-wrap: break-word; hyphens: auto; } .seite h2 { margin: var(--s-48) 0 var(--s-12); font-family: var(--font-accent); font-weight: 700; font-size: var(--size-h3); color: var(--ink); line-height: 1.25; } .seite h3 { margin: var(--s-24) 0 var(--s-8); font-size: var(--size-body); font-weight: 700; color: var(--ink); } .seite p { margin: 0 0 var(--s-16); } .seite__lead { font-size: var(--size-lead); color: var(--text); margin-bottom: var(--s-24); } /* ---------- Listen ---------- */ .seite ul { margin: 0 0 var(--s-16); padding-left: 1.15em; } .seite li { margin-bottom: var(--s-8); } /* Zahlen-Zeilen (Preise, Anfahrt): Bezeichnung links, Wert rechts, verbunden durch eine feine Linie. Liest sich wie eine Karte und nicht wie eine Tabelle. */ .seite__daten { list-style: none; margin: 0 0 var(--s-24); padding: 0; } .seite__daten li { display: flex; gap: var(--s-12); align-items: baseline; padding: var(--s-8) 0; border-bottom: 1px solid rgb(var(--grey-rgb) / .16); } .seite__daten b { font-weight: 700; color: var(--ink); margin-left: auto; white-space: nowrap; } /* ---------- Hinweiskasten ---------- */ .seite__kasten { margin: var(--s-32) 0; padding: var(--s-24); background: var(--ink); color: var(--paper); border-radius: 2px; } .seite__kasten h2 { margin-top: 0; color: var(--paper); } .seite__kasten p:last-child { margin-bottom: 0; } .seite__kasten a { color: var(--paper); } /* ---------- Aktionen ---------- */ .seite__aktionen { display: flex; flex-wrap: wrap; gap: var(--s-12); margin: var(--s-32) 0; } .seite__btn { display: inline-flex; align-items: center; justify-content: center; min-height: var(--tap); padding: 0 var(--s-24); font-family: var(--font-body); font-weight: 700; font-size: var(--size-label); letter-spacing: var(--track-label); text-transform: uppercase; text-decoration: none; border: var(--min-line) solid var(--rosso); background: var(--rosso); color: var(--paper); } .seite__btn--leer { background: transparent; color: var(--ink); border-color: var(--ink); } .seite__btn:hover { filter: brightness(1.08); } /* ---------- Verwandte Seiten ---------- */ /* Interne Verlinkung: jede Themenseite zeigt auf die anderen. Das ist der Weg, auf dem Google die Seiten überhaupt findet und einordnet — eine Seite ohne eingehenden Link bekommt praktisch kein Gewicht. */ .seite__weiter { margin-top: var(--s-64); padding-top: var(--s-24); border-top: var(--min-line) solid var(--ink); } .seite__weiter ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-12); } .seite__weiter a { display: inline-block; padding: var(--s-8) var(--s-12); border: 1px solid rgb(var(--grey-rgb) / .3); color: var(--ink); text-decoration: none; font-size: var(--size-small); } .seite__weiter a:hover { border-color: var(--ink); } /* ---------- Fuß ---------- */ .seite__fuss { margin-top: var(--s-48); padding-top: var(--s-24); border-top: 1px solid rgb(var(--grey-rgb) / .2); font-size: var(--size-small); color: var(--text-quiet); display: flex; flex-wrap: wrap; gap: var(--s-12); } .seite__fuss a { color: inherit; } .seite a { color: var(--ink); text-underline-offset: 3px; }