/* ========================================================================= Malerbetrieb Nordlicht — Stylesheet des Kundenthemes Erstes Kundenprojekt im System. Aufbau wie bei der Agenturseite: eine Datei für diesen Tenant, statisch ausgeliefert, kein Build-Schritt. Was der Kunde selbst umstellen kann — Farben, Schriften, Kachelgröße — kommt als CSS-Variable aus dem und überschreibt die Werte hier oben. Bildsprache: hell, viel Weißraum, ruhige Petrolfarbe, Serifen in den Überschriften. Ein Malerbetrieb verkauft Sorgfalt und ein sauberes Ergebnis — dazu passt kein greller Auftritt. Schriften ausdrücklich systemeigen. Georgia liegt auf praktisch jedem Gerät, sieht in Überschriften ruhig aus und muss von keinem fremden Server geladen werden. Damit gibt es keine IP-Übertragung an Dritte, keinen Ladeverzug und nichts, was in der Datenschutzerklärung stehen müsste. ========================================================================= */ /* ---- Tokens ------------------------------------------------------------ */ :root { --color-primary: #1a6473; --color-primary-dark: #14505c; --color-primary-contrast: #ffffff; --color-ink: #12303f; --color-bg: #ffffff; --color-bg-soft: #f3f8fa; --color-bg-tint: #e4eff3; --color-border: #dde7eb; --color-text: #2b3d47; --color-text-muted: #61757f; --font-heading: Georgia, "Iowan Old Style", "Times New Roman", serif; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --text-xs: 0.8125rem; --text-sm: 0.9375rem; --text-base: 1.0625rem; --text-lg: 1.1875rem; --text-xl: 1.5rem; --text-2xl: 2rem; --text-3xl: 2.5rem; --text-4xl: 3.25rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.25rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px; --shadow-sm: 0 1px 3px rgba(18, 48, 63, 0.06); --shadow-md: 0 12px 32px rgba(18, 48, 63, 0.08); --shadow-lg: 0 24px 60px rgba(18, 48, 63, 0.12); --container: 78rem; --measure: 40rem; --header-height: 5rem; --tile-min: 19rem; } /* ---- Grundlagen -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0 0 var(--space-4); color: var(--color-ink); font-family: var(--font-heading); font-weight: 700; line-height: 1.15; } h1 { font-size: clamp(2.25rem, 1.4rem + 3.4vw, var(--text-4xl)); letter-spacing: -0.015em; } h2 { font-size: clamp(1.75rem, 1.2rem + 2vw, var(--text-3xl)); letter-spacing: -0.01em; } h3 { font-size: var(--text-xl); } p { margin: 0 0 var(--space-4); } a { color: var(--color-primary); } img { max-width: 100%; height: auto; } /* waehlt nur das Bildformat aus und soll im Layout nicht mitreden. Ohne das loest ein height: 100% am gegen den Wrapper auf statt gegen die Kachel darum — die Medienkarte verlaere damit ihr Seitenverhaeltnis. */ picture { display: contents; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); } .section { padding-block: var(--space-24); } .section--soft { background: var(--color-bg-soft); } .section--tinted { background: linear-gradient(180deg, var(--color-bg-soft), var(--color-bg)); } .eyebrow { display: block; margin-bottom: var(--space-3); color: var(--color-primary); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; } .section-intro { max-width: 34rem; margin-bottom: var(--space-12); } .section-intro p { margin: 0; color: var(--color-text-muted); font-size: var(--text-lg); } .skip-link { position: absolute; left: -9999px; } .skip-link:focus { left: var(--space-4); top: var(--space-4); z-index: 100; padding: var(--space-3) var(--space-4); background: var(--color-primary); color: #fff; border-radius: var(--radius-sm); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; } /* ---- Schaltflächen ----------------------------------------------------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.9375rem 2rem; min-height: 3.25rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 180ms ease, border-color 180ms ease, transform 180ms ease; } .button--primary { background: var(--color-primary); color: var(--color-primary-contrast); } .button--primary:hover { background: var(--color-primary-dark); } .button--ghost { border-color: var(--color-border); background: var(--color-bg); color: var(--color-ink); } .button--ghost:hover { border-color: var(--color-primary); color: var(--color-primary); } .button--light { background: #fff; color: var(--color-primary); } .button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* ---- Kopfbereich ------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--color-border); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-8); min-height: var(--header-height); } /* Die Marke bricht nicht um, sondern wird notfalls gekürzt. Ohne nowrap rutschte «Malerbetrieb Nordlicht» in zwei Zeilen, sobald das Menü breiter wurde, und der ganze Kopf stand danach schief. Ohne min-width: 0 wiederum schob sie auf dem Telefon die Schaltflächen aus dem Bild — ein Flex-Kind schrumpft standardmäßig nicht unter seinen Inhalt. */ .brand { display: inline-flex; align-items: center; min-width: 0; gap: var(--space-3); color: var(--color-ink); font-family: var(--font-heading); font-size: var(--text-base); font-weight: 700; line-height: 1.2; text-decoration: none; } .brand__name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } @media (min-width: 30rem) { .brand { font-size: var(--text-lg); } } .brand__mark { display: grid; flex-shrink: 0; place-items: center; width: 2.25rem; height: 2.25rem; border: 2px solid var(--color-primary); border-radius: 50%; color: var(--color-primary); font-size: var(--text-base); } /* Grosse Ausfuehrung fuer die Bildflaeche im Ueber-uns-Abschnitt, wo das Zeichen das Bild ersetzt und nicht die Kopfzeile beschriftet. Eigener Modifikator und keine Regel an .split__visual: die Groesse ist hier eine Entscheidung an der Stelle, nicht eine Folge des Behaelters. */ .brand__mark--xl { width: 6rem; height: 6rem; font-size: var(--text-3xl); } /* Das Menü steht mittig und nimmt den Platz, der zwischen Marke und Schaltflächen übrig bleibt. margin-inline: auto statt space-between am Elternteil: so bleibt es auch dann in der Mitte, wenn die Rufnummer fehlt. */ .main-nav { display: none; flex-wrap: wrap; gap: var(--space-6); margin-inline: auto; } .main-nav__phone { display: none; } @media (min-width: 64rem) { .main-nav { display: flex; } } /* ---- Aufklappmenü ------------------------------------------------------ Unterhalb von 64rem liegt das Menü als Tafel unter dem Kopfbereich. Der Kopf ist sticky und damit ein positioniertes Element — die Tafel richtet sich deshalb an ihm aus, ohne dass er eine eigene position braucht. ------------------------------------------------------------------------ */ .nav-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-ink); cursor: pointer; } .nav-toggle:hover { border-color: var(--color-primary); color: var(--color-primary); } /* Drei Striche aus einem Element: der mittlere ist der Rahmen, die beiden äußeren sind ::before und ::after. */ .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.125rem; height: 2px; border-radius: 2px; background: currentColor; } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } @media (min-width: 64rem) { .nav-toggle { display: none; } } @media (max-width: 63.9375rem) { .site-header[data-nav-open="true"] .main-nav { display: flex; position: absolute; inset: 100% 0 auto 0; flex-direction: column; gap: 0; margin: 0; padding: var(--space-2) var(--space-5) var(--space-5); border-bottom: 1px solid var(--color-border); background: var(--color-bg); box-shadow: var(--shadow-md); } .site-header[data-nav-open="true"] .main-nav a { padding-block: var(--space-3); border-bottom: 1px solid var(--color-border); font-size: var(--text-base); } .site-header[data-nav-open="true"] .main-nav a:last-child { border-bottom: 0; } /* Der Unterstrich der aktuellen Seite säße in der Tafel unter dem Text und liefe mit der Trennlinie zusammen. */ .site-header[data-nav-open="true"] .main-nav a[aria-current="page"]::after { content: none; } .site-header[data-nav-open="true"] .main-nav__phone { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); color: var(--color-primary); font-weight: 600; } } .main-nav a { position: relative; padding-block: var(--space-2); color: var(--color-text); font-size: var(--text-sm); font-weight: 500; white-space: nowrap; text-decoration: none; } .main-nav a[aria-current="page"], .main-nav a:hover { color: var(--color-primary); } .main-nav a[aria-current="page"]::after { content: ""; position: absolute; inset: auto 0 0 0; height: 2px; background: var(--color-primary); } .site-header__actions { display: flex; flex-shrink: 0; align-items: center; gap: var(--space-5); } /* Auf dem Telefon bleibt vom Anruf nur das Hörersymbol übrig — dort ist er der wahrscheinlichste erste Schritt und soll einen Fingertipp entfernt sein, ohne die halbe Kopfzeile zu belegen. nowrap, weil «0381 4098120» sonst am Leerzeichen umbricht und die Rufnummer als zwei untereinanderstehende Zahlenblöcke erscheint — die liest niemand mehr als eine Nummer. */ .site-header__phone { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 2.75rem; padding-inline: var(--space-2); color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; white-space: nowrap; text-decoration: none; } .site-header__phone:hover { color: var(--color-primary); } .site-header__phone-number { display: none; } @media (min-width: 52rem) { .site-header__phone-number { display: inline; } } /* Die Schaltfläche tritt auf Schmalbild ab: neben Marke, Anruf und Menü ist für «Angebot anfordern» kein Platz, und im Aufmacher steht sie ohnehin direkt darunter. */ .site-header__cta { display: none; padding: 0.625rem 1.25rem; min-height: 2.625rem; font-size: var(--text-sm); white-space: nowrap; } @media (min-width: 48rem) { .site-header__cta { display: inline-flex; } } /* ---- Aufmacher --------------------------------------------------------- */ .hero { position: relative; overflow: hidden; padding-block: var(--space-24); background: linear-gradient(170deg, var(--color-bg-tint), var(--color-bg) 62%); } /* Zwei weiche Farbkreise im Hintergrund. Rein dekorativ, deshalb per Pseudoelement und nicht als Bild — kein zusätzlicher Netzabruf. */ .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; pointer-events: none; } .hero::before { width: 30rem; height: 30rem; top: -12rem; right: -8rem; background: radial-gradient(circle, rgba(26, 100, 115, 0.09), transparent 70%); } .hero::after { width: 22rem; height: 22rem; bottom: -10rem; left: -6rem; background: radial-gradient(circle, rgba(214, 132, 92, 0.12), transparent 70%); } .hero__inner { position: relative; z-index: 1; max-width: 44rem; } .hero h1 { margin-bottom: var(--space-6); text-wrap: balance; } .hero h1 span { color: var(--color-primary); } .hero__lead { max-width: 34rem; margin-bottom: var(--space-8); color: var(--color-text-muted); font-size: var(--text-lg); } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); } /* ---- Kennzahlenband ---------------------------------------------------- */ .stats { background: var(--color-ink); color: #fff; padding-block: var(--space-12); } .stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: var(--space-8); text-align: center; } .stat__value { display: block; margin-bottom: var(--space-1); font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1; } .stat__label { color: rgba(255, 255, 255, 0.72); font-size: var(--text-sm); } /* ---- Karten ------------------------------------------------------------ */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--tile-min), 1fr)); gap: var(--space-6); } /* margin: 0, weil die Karte auch als
auftritt — dort gibt der Browser von sich aus einen Aussenabstand mit und zieht das Raster auseinander. */ .card { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); transition: box-shadow 200ms ease, transform 200ms ease; } .card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); } .card__icon { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: var(--space-2); border-radius: var(--radius-md); background: var(--color-bg-tint); color: var(--color-primary); font-size: var(--text-xl); } .card h3 { margin: 0; } /* Nur der Aussenabstand, den der Browser mitbringt. Farbe und Schriftgrad bleiben wie im Fliesstext: das Zitat ist die Aussage der Karte und nicht ihre Nebenzeile. */ .card blockquote { margin: 0; } .card p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); } .card__link { margin-top: auto; padding-top: var(--space-3); color: var(--color-primary); font-size: var(--text-sm); font-weight: 600; text-decoration: none; } .card__link:hover { text-decoration: underline; } /* Die Zeile unter dem Namen — Ort, Rolle oder Projekt. Steht in der Bildunterschrift neben einem und braucht deshalb display: block, damit sie eine eigene Zeile bekommt. */ .card__note { display: block; color: var(--color-text-muted); font-size: var(--text-sm); } /* Ruhigere Variante ohne Rahmen — für Vorteile und Ablauf, wo die Karte nur gruppiert und nicht klickbar ist. */ .card--flat { border: 0; background: var(--color-bg-soft); } .card--flat:hover { transform: none; box-shadow: none; } .card__step { display: block; margin-bottom: var(--space-2); color: var(--color-bg-tint); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; line-height: 1; } .card--flat .card__step { color: var(--color-primary); opacity: 0.35; } /* ---- Text mit Bildfläche ----------------------------------------------- */ .split { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: center; } @media (min-width: 62rem) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .split__visual { position: relative; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); background: linear-gradient(160deg, var(--color-bg-tint), var(--color-bg-soft)); display: grid; place-items: center; } .split__badge { position: absolute; left: var(--space-6); bottom: var(--space-6); padding: var(--space-4) var(--space-5); border-radius: var(--radius-md); background: #fff; box-shadow: var(--shadow-md); } .split__badge strong { display: block; color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-lg); } .split__badge span { color: var(--color-text-muted); font-size: var(--text-sm); } .check-list { margin: 0 0 var(--space-8); padding: 0; list-style: none; } .check-list li { position: relative; margin-bottom: var(--space-3); padding-left: var(--space-8); } .check-list li::before { content: ""; position: absolute; left: 0; top: 0.35em; width: 1.125rem; height: 1.125rem; border: 2px solid var(--color-primary); border-radius: 50%; } /* ---- Häufige Fragen ---------------------------------------------------- */ .faq { max-width: 48rem; } .faq__item { border-bottom: 1px solid var(--color-border); } .faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-5); color: var(--color-ink); font-family: var(--font-heading); font-size: var(--text-lg); cursor: pointer; list-style: none; } .faq__item summary::-webkit-details-marker { display: none; } .faq__item summary::after { content: "+"; flex: 0 0 auto; color: var(--color-primary); font-family: var(--font-body); font-size: var(--text-xl); line-height: 1; transition: transform 200ms ease; } .faq__item[open] summary::after { transform: rotate(45deg); } .faq__item summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .faq__item > p { margin: 0 0 var(--space-5); max-width: var(--measure); color: var(--color-text-muted); } /* ---- Abschluss --------------------------------------------------------- */ .cta-band { position: relative; overflow: hidden; padding: var(--space-16) var(--space-8); border-radius: var(--radius-lg); background: linear-gradient(135deg, var(--color-primary), var(--color-ink)); color: #fff; text-align: center; } .cta-band h2 { color: #fff; margin-bottom: var(--space-4); } .cta-band p { max-width: 36rem; margin-inline: auto; margin-bottom: var(--space-8); color: rgba(255, 255, 255, 0.85); } /* ---- Fußbereich -------------------------------------------------------- */ .site-footer { padding-block: var(--space-16) var(--space-8); background: var(--color-ink); color: rgba(255, 255, 255, 0.78); font-size: var(--text-sm); } .site-footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-8); margin-bottom: var(--space-12); } .site-footer h2 { margin-bottom: var(--space-4); color: #fff; font-size: var(--text-base); } .site-footer a { display: block; margin-bottom: var(--space-2); color: rgba(255, 255, 255, 0.78); text-decoration: none; } .site-footer a:hover { color: #fff; } .site-footer__brand .brand { color: #fff; margin-bottom: var(--space-4); } .site-footer__brand .brand__mark { border-color: rgba(255, 255, 255, 0.5); color: #fff; } .site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; padding-top: var(--space-6); border-top: 1px solid rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.55); } .site-footer__legal p { margin: 0; } /* ---- Einzelseiten ------------------------------------------------------ */ .page { padding-block: var(--space-16) var(--space-24); } .page__header { max-width: var(--measure); margin-bottom: var(--space-12); } .page__intro { color: var(--color-text-muted); font-size: var(--text-lg); } .page__image { margin: 0 0 var(--space-8); } .page__image img { width: 100%; border-radius: var(--radius-lg); } .prose { max-width: var(--measure); } .prose > :first-child { margin-top: 0; } .prose h2, .prose h3 { margin-top: var(--space-12); } .prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); } .prose li { margin-bottom: var(--space-2); } /* ---- Kontaktseite und Formular ----------------------------------------- */ .contact-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); align-items: start; } @media (min-width: 60rem) { .contact-layout { grid-template-columns: minmax(0, 20rem) minmax(0, 1fr); gap: var(--space-16); } } .contact-details h2, .contact-form h2 { font-size: var(--text-lg); } .contact-list { margin: 0 0 var(--space-8); } .contact-list__row + .contact-list__row { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .contact-list dt { color: var(--color-text-muted); font-size: var(--text-sm); } .contact-list dd { margin: var(--space-1) 0 0; } .contact-form__note { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); } .lead-form__form { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-soft); } .lead-form__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } @media (min-width: 40rem) { .lead-form__row { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .lead-form__field { display: flex; flex-direction: column; gap: var(--space-2); } .lead-form__field label { color: var(--color-ink); font-size: var(--text-sm); font-weight: 600; } .lead-form__field input, .lead-form__field select, .lead-form__field textarea { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: #fff; color: var(--color-text); font: inherit; } .lead-form__field textarea { min-height: 9rem; resize: vertical; } .lead-form__field input:focus-visible, .lead-form__field select:focus-visible, .lead-form__field textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); } /* Der Honigtopf. Nicht display:none — manche Bots überspringen genau das. */ .lead-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .lead-form__consent { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); line-height: 1.5; } .lead-form__consent input { margin-top: 0.2em; width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); } .lead-form__note { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); } .lead-form__success { padding: var(--space-6); border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-bg-tint); } .lead-form__errors { margin-bottom: var(--space-6); padding: var(--space-4) var(--space-6); border: 1px solid #b91c1c; border-radius: var(--radius-md); background: #fef2f2; font-size: var(--text-sm); } .lead-form__errors p { margin: 0 0 var(--space-2); } .lead-form__errors ul { margin: 0; padding-left: var(--space-6); } /* ---- Rechtstexte ------------------------------------------------------- */ .legal__body { max-width: 44rem; line-height: 1.75; } .legal__body h2 { margin: var(--space-12) 0 var(--space-3); font-size: var(--text-xl); } .legal__body h3 { margin: var(--space-8) 0 var(--space-2); font-size: var(--text-lg); } .legal__body ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); } .legal__updated { margin-top: var(--space-12); padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-sm); } /* ---- Kontakt-Einladung ------------------------------------------------- */ .invite { position: fixed; z-index: 60; inset: auto var(--space-4) var(--space-4) var(--space-4); max-width: 22rem; padding: var(--space-6); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(var(--space-4)); transition: opacity 260ms ease, transform 260ms ease; } @media (min-width: 40rem) { .invite { inset: auto var(--space-6) var(--space-6) auto; } } .invite.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .invite { transition: none; transform: none; } } .invite__close { position: absolute; top: var(--space-2); right: var(--space-2); display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); font-size: 1.25rem; cursor: pointer; } .invite__close:hover { background: var(--color-bg-soft); color: var(--color-ink); } .invite__person { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); padding-right: var(--space-8); } .invite__avatar { flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; } .invite__avatar--blank { display: grid; place-items: center; background: var(--color-bg-tint); color: var(--color-primary); } .invite__avatar--blank svg { width: 1.5rem; height: 1.5rem; } .invite__name { margin: 0; color: var(--color-ink); font-family: var(--font-heading); font-weight: 700; } .invite__role { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); } .invite__text { margin: 0 0 var(--space-5); color: var(--color-text-muted); } .invite__action { width: 100%; } /* ---- Blätterfunktion --------------------------------------------------- */ .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--space-2); margin-top: var(--space-12); font-size: var(--text-sm); } .pagination__pages { display: flex; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .pagination__page, .pagination__step { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; } .pagination__page.is-current { border-color: var(--color-primary); color: var(--color-primary); font-weight: 600; } span.pagination__step { opacity: 0.45; } /* ---- Bildkacheln ------------------------------------------------------- Für die Ratgeber-Übersicht, die Kategorieseiten und die Beitragsliste, die eine Standardseite an ihrem Ende zeigen kann. Aufbau wie im Basis-Theme, Farben und Rundungen aus den Tokens dieses Kunden — sonst stünden mitten im Nordlicht-Auftritt ungestylte Kacheln. ------------------------------------------------------------------------ */ .tile-section { margin-bottom: var(--space-16); } .tile-section__heading { margin: 0 0 var(--space-6); font-size: var(--text-2xl); } .tile-grid { display: grid; /* --tile-min kommt je Webseite aus dem und ist im Agentur-Panel auf kompakt, standard oder groß stellbar. */ grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 19rem), 1fr)); gap: var(--space-6); } .media-card { position: relative; display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-md); background: var(--color-bg-soft); box-shadow: var(--shadow-sm); text-decoration: none; isolation: isolate; } .media-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .media-card:hover .media-card__image { transform: scale(1.04); } /* Ohne Foto füllt sich die Kachel mit einem Verlauf. Eine halb leere Kachel zwischen bebilderten fiele stärker auf als eine ohne Bild. */ .media-card--blank { background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 28%, transparent), var(--color-bg-tint) ); } .media-card__band { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6); background: color-mix(in srgb, var(--color-primary) 88%, transparent); color: #fff; } .media-card__band::before { content: ""; position: absolute; inset: auto 0 100% 0; height: var(--space-12); background: linear-gradient( to top, color-mix(in srgb, var(--color-primary) 88%, transparent), transparent ); pointer-events: none; } .media-card__meta { font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.85; } .media-card__title { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; line-height: 1.25; text-wrap: balance; } /* ---- Beitragsliste auf einer Seite ------------------------------------- */ .post-section { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--color-border); } .post-section__more { margin: 0; } @media (prefers-reduced-motion: reduce) { .media-card__image { transition: none; } .media-card:hover .media-card__image { transform: none; } } /* ---- WhatsApp-Chat -------------------------------------------------------- Der gruene Knopf unten rechts und das Fenster, das er aufklappt. Bewusst nicht in den Tenant-Farben: WhatsApp erkennt man an Gruen und an dem Sprechblasen-Zeichen, bevor man ein Wort gelesen hat. Ein Knopf in der Hausfarbe des Kunden verliert genau diese Erkennbarkeit. Die Farben stehen deshalb fest und kommen nicht aus den Tokens. Ohne JavaScript ist der Knopf ein Link direkt nach WhatsApp und das Fenster bleibt weg — es traegt hidden und wird erst vom Skript aufgedeckt. --------------------------------------------------------------------------- */ .wa { --wa-green: #25d366; --wa-green-dark: #1da851; --wa-head: #1f2c34; --wa-paper: #ece5dd; --wa-bubble: #005c4b; position: fixed; z-index: 70; left: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } @media (min-width: 40rem) { .wa { left: var(--space-6); bottom: var(--space-6); } } .wa__launcher { display: grid; place-items: center; /* 3,5rem: gross genug fuer die Fingerkuppe, klein genug, um auf dem Telefon nicht ueber dem Inhalt zu stehen. */ width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--wa-green); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); text-decoration: none; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; } .wa__launcher:hover { background: var(--wa-green-dark); transform: translateY(-2px); } .wa__launcher:focus-visible { outline: 3px solid var(--wa-head); outline-offset: 3px; } .wa__launcher-icon svg { display: block; width: 1.875rem; height: 1.875rem; } .wa__panel { width: min(20rem, calc(100vw - 2 * var(--space-4))); overflow: hidden; border-radius: 0.875rem; background: var(--wa-paper); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); /* Anfangszustand. Die Klasse is-open auf dem Elternelement setzt beides zurueck. */ opacity: 0; transform: translateY(0.75rem) scale(0.98); transform-origin: bottom left; transition: opacity 200ms ease, transform 200ms ease; } .wa.is-open .wa__panel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .wa__launcher, .wa__panel { transition: none; transform: none; } .wa__launcher:hover { transform: none; } } .wa__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--wa-head); color: #fff; } .wa__avatar { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; } .wa__avatar--blank { display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: #fff; } .wa__avatar--blank svg { width: 1.25rem; height: 1.25rem; } .wa__identity { flex: 1 1 auto; min-width: 0; } .wa__name { margin: 0; overflow: hidden; color: #fff; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .wa__status { margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 0.75rem; line-height: 1.3; } .wa__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; /* Zwei Zentimeter Ziel, sonst trifft der Daumen daneben und schliesst stattdessen gar nichts. */ width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.75); font-size: 1.25rem; line-height: 1; cursor: pointer; } .wa__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .wa__close:focus-visible { outline: 2px solid var(--wa-green); outline-offset: -2px; } .wa__body { padding: var(--space-5) var(--space-4) var(--space-2); } .wa__bubble { margin: 0; padding: var(--space-3) var(--space-4); /* Eine eckige Ecke oben links statt einer angesetzten Spitze: dieselbe Lesart wie in WhatsApp, aber ohne zweites Element im Baum. */ border-radius: 0.75rem; border-top-left-radius: 0.125rem; background: var(--wa-bubble); color: #fff; font-size: 0.9375rem; line-height: 1.5; } .wa__time { float: right; margin: 0.4rem 0 0 var(--space-3); color: rgba(255, 255, 255, 0.6); font-size: 0.6875rem; } .wa__foot { padding: var(--space-3) var(--space-4) var(--space-4); } .wa__cta { display: block; padding: var(--space-3) var(--space-4); border-radius: 0.5rem; background: var(--wa-green); color: #fff; font-size: 0.9375rem; font-weight: 700; text-align: center; text-decoration: none; transition: background-color 160ms ease; } .wa__cta:hover { background: var(--wa-green-dark); color: #fff; } .wa__cta:focus-visible { outline: 2px solid var(--wa-head); outline-offset: 2px; } /* Der Chat sitzt links, die Kontakt-Einladung rechts — nebeneinander stoeren sie sich nicht. Nur auf schmalen Geraeten liegt die Einladung ueber die volle Breite am unteren Rand und damit auf dem Knopf. Dort rueckt sie um dessen Hoehe plus Abstand nach oben. */ .invite--stacked { bottom: calc(3.5rem + var(--space-4) + var(--space-3)); } @media (min-width: 40rem) { .invite--stacked { bottom: var(--space-6); } } /* Auf dem Telefon liegen beide ueber die volle Breite am unteren Rand. Steht das Chatfenster offen, tritt die Einladung so lange zurueck — zwei Karten uebereinander sind keine Auswahl, sondern ein Durcheinander. Browser ohne :has() zeigen weiterhin beide, was niemanden aussperrt. */ @media (max-width: 39.999rem) { body:has(.wa.is-open) .invite { opacity: 0; pointer-events: none; } } /* ---- Hauptnavigation aus dem CMS ------------------------------------------ Aufklappen ueber
/ statt ueber ein Skript: der Browser kann das von sich aus, mit Tastatur und mit Vorleseprogramm. Diese Datei nimmt dem Element nur das Dreieck und legt die Liste als Flyout darueber. Auf schmalen Geraeten bleibt es das, was
ohnehin ist — eine Liste, die aufklappt. Kein Flyout, kein Ueberlagern: dafuer ist kein Platz. --------------------------------------------------------------------------- */ .main-nav__list, .site-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .menu__item { position: relative; margin: 0; padding: 0; } .menu__item::before { content: none; } /* Der Aufklapppunkt. list-style und ::-webkit-details-marker nehmen das voreingestellte Dreieck weg — wir setzen ein eigenes. */ .menu__summary { display: inline-flex; align-items: center; gap: 0.35em; cursor: pointer; list-style: none; color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 500; transition: color var(--duration-fast, 150ms) var(--ease-standard, ease); } .menu__summary::-webkit-details-marker { display: none; } .menu__summary:hover, .menu__dropdown[open] > .menu__summary { color: var(--color-text); } .menu__summary:focus-visible { outline: 2px solid var(--color-accent, currentColor); outline-offset: 3px; border-radius: 2px; } .menu__chevron svg { display: block; width: 0.9em; height: 0.9em; transition: transform 160ms ease; } .menu__dropdown[open] .menu__chevron svg { transform: rotate(180deg); } .menu__children { margin: 0; padding: 0; list-style: none; } .menu__children li { margin: 0; padding: 0; } .menu__children li::before { content: none; } .menu__children a { display: block; padding: var(--space-2) 0; color: var(--color-text-secondary); font-size: var(--text-sm); } .menu__children a:hover { color: var(--color-text); } /* Ab Tablet legt sich die Unterliste als Flyout ueber den Inhalt. Darunter bleibt sie im Fluss und schiebt den Rest nach unten. */ @media (min-width: 48rem) { .menu__dropdown[open] > .menu__children { position: absolute; top: calc(100% + var(--space-3)); left: 0; z-index: 80; min-width: 14rem; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md, 0.5rem); background: var(--color-bg-raised, var(--color-bg, #fff)); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18)); } /* Der Weg von der Beschriftung zur Liste fuehrt ueber eine Luecke. Ohne diese Bruecke klappt das Menue zu, sobald der Zeiger sie ueberquert. */ .menu__dropdown[open] > .menu__children::before { content: ''; position: absolute; inset: calc(-1 * var(--space-3)) 0 100% 0; } .menu__children a { white-space: nowrap; } } /* Im Mobilmenue stehen die Unterpunkte eingerueckt unter ihrem Punkt. */ .mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); margin: 0; padding: 0; list-style: none; } .mobile-nav__list .menu__children { padding-left: var(--space-4); border-left: 2px solid var(--color-border); }