/* ========================================================================= Pixel & Prompt — Stylesheet des Kundenthemes Zweites Kundenprojekt, und das erste mit einem Blog als Startseite. Aufbau wie bei den anderen Themes: eine statische Datei je Tenant, kein Build-Schritt, keine fremden Server. Zwei Dinge unterscheiden diese Datei von den bisherigen: 1. **Zwei Modi.** Jede Farbe steht als Token und wird im Dunkelmodus ersetzt, nicht überall einzeln umgeschaltet. Welcher Modus gilt, entscheidet data-theme am — gesetzt vom Umschalter — und ohne ihn die Systemeinstellung des Besuchers. 2. **Vollständigkeit.** Das Theme überschreibt nur Gerüst, Kopf, Fuß und Startseite; Rechtstexte, Kontaktseite, Kategorien und Beiträge kommen weiter aus dem Basis-Theme. Deren Bausteine müssen deshalb hier genauso gestaltet sein — sonst stünden mitten im Auftritt ungestylte Formulare. Schriften ausdrücklich systemeigen: keine Datei, die geladen werden muss, keine IP-Übertragung an Dritte, nichts, was in der Datenschutzerklärung stehen müsste. ========================================================================= */ /* ---- Tokens: heller Modus ---------------------------------------------- --color-primary, --color-secondary und --color-accent werden vom Panel überschrieben: ThemeTokens schreibt sie als :root-Block in den , also nach dieser Datei. Was hier steht, ist die Vorbelegung. ------------------------------------------------------------------------ */ :root { color-scheme: light; --color-primary: #5b53e0; --color-secondary: #0f1220; --color-accent: #14b8a6; --color-primary-contrast: #ffffff; /* Die Hausfarbe als **Schriftfarbe**. Getrennt von --color-primary, weil eine für weißen Grund gewählte Farbe auf dunklem Grund zu dunkel ist. Auf gefüllten Flächen bleibt die Farbe des Kunden unverändert; nur wo sie als Text oder Linie auf dem Seitengrund steht, wird sie im dunklen Modus aufgehellt. Ein eigenes Token und nicht die Hausfarbe selbst: eine Eigenschaft, die sich über var() auf sich selbst bezieht, ist ein Zyklus — CSS wirft den Wert dann vollständig weg. */ --color-primary-text: var(--color-primary); --color-bg: #ffffff; --color-bg-soft: #f5f6fb; --color-bg-raised: #ffffff; --color-border: #e3e5ef; --color-border-strong: #ccd0e0; --color-heading: #0f1220; --color-text: #2a2e42; --color-text-muted: #63697f; /* Das Basis-Theme spricht die abgesetzte Textfarbe unter einem zweiten Namen an. Beides zeigt auf dieselbe Farbe, damit keine Stelle ohne Wert dasteht. */ --color-text-secondary: var(--color-text-muted); --font-heading: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.375rem; --text-2xl: 1.75rem; --text-3xl: 2.25rem; --text-4xl: 3rem; --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-10: 2.5rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-pill: 999px; --shadow-sm: 0 1px 2px rgba(15, 18, 32, 0.06), 0 4px 12px rgba(15, 18, 32, 0.05); --shadow-md: 0 8px 24px rgba(15, 18, 32, 0.09); --shadow-lg: 0 18px 48px rgba(15, 18, 32, 0.14); /* Der Verlauf des Auftritts. Er liegt hinter dem Aufmacher, wenn kein Beitragsbild hinterlegt ist, und in den Kacheln ohne Foto. */ --gradient-brand: linear-gradient(135deg, #6366f1 0%, #22d3ee 45%, #a855f7 100%); --measure: 42rem; --header-height: 4.5rem; --duration-fast: 150ms; --ease-standard: cubic-bezier(0.2, 0, 0.2, 1); } /* ---- Tokens: dunkler Modus --------------------------------------------- Zweimal derselbe Block, und das mit Absicht: - [data-theme="dark"] gilt, wenn der Besucher den Umschalter benutzt hat. - Der Medienblock gilt, solange er das nicht getan hat und sein System dunkel eingestellt ist. :not([data-theme="light"]) sorgt dafür, dass eine ausdrückliche Wahl «hell» stärker ist als die Systemeinstellung. Beide setzen nur Flächen, Linien und Schrift. Die Hausfarbe bleibt die des Kunden — sie kommt aus dem Panel und wird hier nicht überschrieben; nur ihr Kontrast auf dunklem Grund wird angehoben. ------------------------------------------------------------------------ */ :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0b0d14; --color-bg-soft: #12151f; --color-bg-raised: #161a26; --color-border: #262b3a; --color-border-strong: #39405a; --color-heading: #f2f4fa; --color-text: #d3d7e4; --color-text-muted: #949bb3; --color-primary-text: color-mix(in srgb, var(--color-primary) 62%, #ffffff); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.65); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #0b0d14; --color-bg-soft: #12151f; --color-bg-raised: #161a26; --color-border: #262b3a; --color-border-strong: #39405a; --color-heading: #f2f4fa; --color-text: #d3d7e4; --color-text-muted: #949bb3; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.55); --shadow-lg: 0 18px 48px rgba(0, 0, 0, 0.65); } } /* ---- Grundlagen --------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; /* Ankersprünge landen sonst unter der festen Kopfleiste. */ scroll-padding-top: calc(var(--header-height) + var(--space-4)); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } 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; /* Der Wechsel zwischen den Modi ist ein Zustandswechsel, kein Effekt. Ohne diesen Übergang springt die Seite hart um, was auf großen Flächen unangenehm blitzt. */ transition: background-color 200ms var(--ease-standard), color 200ms var(--ease-standard); } @media (prefers-reduced-motion: reduce) { body { transition: none; } } h1, h2, h3, h4, h5, h6 { margin: 0 0 var(--space-4); color: var(--color-heading); font-family: var(--font-heading); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } h4 { font-size: var(--text-lg); } p { margin: 0 0 var(--space-4); } a { color: var(--color-primary-text); text-decoration-thickness: 1px; text-underline-offset: 0.15em; } a:hover { color: color-mix(in srgb, var(--color-primary-text) 75%, var(--color-heading)); } :focus-visible { outline: 2px solid var(--color-primary-text); outline-offset: 2px; border-radius: 3px; } img, picture, svg, video { max-width: 100%; } img { height: auto; } code, pre, kbd { font-family: var(--font-mono); font-size: 0.9em; } hr { height: 1px; margin: var(--space-12) 0; border: 0; background: var(--color-border); } table { width: 100%; border-collapse: collapse; } th, td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; } /* ---- Hilfsbausteine ----------------------------------------------------- */ .container { width: min(76rem, 100% - 2 * var(--space-5)); margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: var(--space-4); top: -4rem; z-index: 100; padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-primary-contrast); text-decoration: none; transition: top var(--duration-fast) var(--ease-standard); } .skip-link:focus { top: var(--space-4); color: var(--color-primary-contrast); } .eyebrow { margin: 0 0 var(--space-2); color: var(--color-primary-text); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .empty { padding: var(--space-8); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-md); color: var(--color-text-muted); text-align: center; } /* ---- Schaltflächen ------------------------------------------------------ */ .button, .btn--lg, .button--lg { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border: 1px solid transparent; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .button--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-primary-contrast); } .button--primary:hover { background: color-mix(in srgb, var(--color-primary) 85%, #000); color: var(--color-primary-contrast); transform: translateY(-1px); } .button--quiet, .button--ghost { border-color: var(--color-border-strong); background: transparent; color: var(--color-heading); } .button--quiet:hover, .button--ghost:hover { border-color: var(--color-primary-text); color: var(--color-primary-text); } /* Auf Bildern und Verläufen: heller Grund, dunkle Schrift — die Hausfarbe verschwindet dort je nach Foto. */ .button--light { background: #ffffff; border-color: #ffffff; color: #0f1220; } .button--light:hover { background: rgba(255, 255, 255, 0.88); color: #0f1220; transform: translateY(-1px); } @media (prefers-reduced-motion: reduce) { .button:hover, .button--primary:hover, .button--light:hover { transform: none; } } /* ---- Pillen und Listen -------------------------------------------------- */ .pill { display: inline-flex; align-items: center; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg-soft); color: var(--color-text-muted); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.02em; text-decoration: none; white-space: nowrap; } a.pill:hover { border-color: var(--color-primary-text); color: var(--color-primary-text); } /* Über einem Foto steht die Pille für sich, ohne Rahmen und ohne die Flächenfarbe der Seite — beides ginge im Bild unter. */ .pill--on-media { border-color: rgba(255, 255, 255, 0.35); background: rgba(12, 14, 22, 0.55); color: #ffffff; backdrop-filter: blur(6px); } a.pill--on-media:hover { background: rgba(12, 14, 22, 0.75); border-color: rgba(255, 255, 255, 0.6); color: #ffffff; } .pill-list { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; } .pill-list--wide { margin-bottom: var(--space-8); } .rank-list { margin: 0; padding: 0; list-style: none; counter-reset: rang; } .rank-list li { display: flex; gap: var(--space-3); padding: var(--space-3) 0; counter-increment: rang; font-size: var(--text-sm); line-height: 1.45; } .rank-list li + li { border-top: 1px solid var(--color-border); } .rank-list li::before { content: counter(rang); flex: 0 0 1.5rem; color: var(--color-primary-text); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 700; } .rank-list a { color: var(--color-heading); font-weight: 600; text-decoration: none; } .rank-list a:hover { color: var(--color-primary-text); } /* ---- Kopfbereich -------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--color-border); /* Halbdurchsichtig mit Weichzeichner: der Inhalt scheint beim Scrollen durch, ohne dass der Text darüber unlesbar wird. Browser ohne backdrop-filter bekommen über die zweite Zeile eine deckende Fläche. */ background: var(--color-bg); background: color-mix(in srgb, var(--color-bg) 82%, transparent); backdrop-filter: blur(12px); } .site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-height); } .brand { display: inline-flex; align-items: center; gap: var(--space-3); color: var(--color-heading); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; } .brand__mark { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: var(--radius-sm); background: var(--gradient-brand); color: #ffffff; } .brand__mark svg { width: 1.125rem; height: 1.125rem; } .brand__logo { max-height: 2.25rem; width: auto; } .brand__name { color: var(--color-heading); } /* --- Navigation --- */ .main-nav { flex: 1 1 auto; } .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; } .main-nav a { color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-heading); } .main-nav a[aria-current="page"] { font-weight: 600; } .site-header__actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } /* --- Suche --- */ .site-search { position: relative; display: flex; align-items: center; } .site-search__icon { position: absolute; left: var(--space-3); display: grid; place-items: center; color: var(--color-text-muted); pointer-events: none; } .site-search__icon svg { width: 1rem; height: 1rem; } .site-search input { width: 12rem; padding: var(--space-2) var(--space-4) var(--space-2) var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-bg-soft); color: var(--color-text); font: inherit; font-size: var(--text-sm); transition: width var(--duration-fast) var(--ease-standard), border-color var(--duration-fast) var(--ease-standard); } .site-search input::placeholder { color: var(--color-text-muted); } .site-search input:focus-visible { width: 15rem; border-color: var(--color-primary-text); outline: none; } /* Das Kreuzchen mancher Browser sitzt sonst über dem gerundeten Rand. */ .site-search input::-webkit-search-cancel-button { margin-right: var(--space-1); } @media (max-width: 47.999rem) { .site-search input { width: 8.5rem; } .site-search input:focus-visible { width: 11rem; } } /* --- Umschalter hell/dunkel --- Ein Kippschalter, kein Knopf mit wechselndem Symbol: der Zustand ist am Stand des Knubbels ablesbar, ohne dass man das Symbol deuten muss. Beide Zeichen stehen fest im Gleis, gezeigt wird immer das des anderen Modus — also das, wohin der Klick führt. */ .theme-toggle { display: inline-flex; align-items: center; padding: 0; border: 0; background: none; cursor: pointer; } .theme-toggle__track { position: relative; display: block; width: 3.25rem; height: 1.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-pill); background: var(--color-bg-soft); transition: background-color var(--duration-fast) var(--ease-standard); } .theme-toggle__knob { position: absolute; top: 0.1875rem; left: 0.1875rem; display: block; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--gradient-brand); box-shadow: var(--shadow-sm); transition: transform 200ms var(--ease-standard); } :root[data-theme="dark"] .theme-toggle__knob { transform: translateX(1.5rem); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle__knob { transform: translateX(1.5rem); } } .theme-toggle:focus-visible .theme-toggle__track { outline: 2px solid var(--color-primary-text); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .theme-toggle__knob { transition: none; } } /* --- Aufklappknopf für schmale Bildschirme --- */ .nav-toggle { display: none; place-items: center; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-heading); cursor: pointer; } .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 (max-width: 63.999rem) { .nav-toggle { display: grid; } .main-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; padding: var(--space-4) var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border); background: var(--color-bg); box-shadow: var(--shadow-md); } .site-header[data-nav-open="true"] .main-nav { display: block; } .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; } .main-nav__list > li + li { border-top: 1px solid var(--color-border); } .main-nav a { display: block; padding: var(--space-3) 0; font-size: var(--text-base); } .site-header__inner { position: relative; } } /* ---- Aufklappmenü aus dem CMS -------------------------------------------
/ statt eines Skripts — siehe partials/menu im Basis-Theme. Diese Datei nimmt nur das voreingestellte Dreieck weg und legt die Unterliste ab Tablet als Flyout über den Inhalt. ------------------------------------------------------------------------- */ .menu__item { position: relative; margin: 0; padding: 0; } .menu__summary { display: inline-flex; align-items: center; gap: 0.35em; cursor: pointer; list-style: none; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 500; } .menu__summary::-webkit-details-marker { display: none; } .menu__summary:hover, .menu__dropdown[open] > .menu__summary { color: var(--color-heading); } .menu__chevron svg { display: block; width: 0.9em; height: 0.9em; transition: transform var(--duration-fast) var(--ease-standard); } .menu__dropdown[open] .menu__chevron svg { transform: rotate(180deg); } .menu__children { margin: 0; padding: 0; list-style: none; } .menu__children a { display: block; padding: var(--space-2) 0; color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; } .menu__children a:hover { color: var(--color-heading); } @media (min-width: 64rem) { .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); background: var(--color-bg-raised); box-shadow: var(--shadow-lg); } /* Der Weg von der Beschriftung zur Liste führt über eine Lücke. Ohne diese Brücke klappt das Menü zu, sobald der Zeiger sie überquert. */ .menu__dropdown[open] > .menu__children::before { content: ""; position: absolute; inset: calc(-1 * var(--space-3)) 0 100% 0; } .menu__children a { white-space: nowrap; } } .mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .mobile-nav__list .menu__children { padding-left: var(--space-4); border-left: 2px solid var(--color-border); } /* ---- Aufmacher ---------------------------------------------------------- */ .hero { padding-top: var(--space-10); } .hero__card { position: relative; display: flex; align-items: flex-end; min-height: min(26rem, 70vh); overflow: hidden; border-radius: var(--radius-lg); background: var(--gradient-brand); isolation: isolate; } .hero__backdrop { position: absolute; inset: 0; z-index: -1; } .hero__backdrop picture, .hero__image { display: block; width: 100%; height: 100%; object-fit: cover; } /* Der Verlauf über dem Foto ist keine Verzierung, sondern die Bedingung dafür, dass weiße Schrift auf jedem Bild lesbar bleibt. */ .hero__card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to top, rgba(8, 10, 18, 0.88) 0%, rgba(8, 10, 18, 0.55) 45%, rgba(8, 10, 18, 0.15) 100% ); } .hero__inner { position: relative; max-width: 44rem; padding: var(--space-8) var(--space-6) var(--space-8); color: #ffffff; } @media (min-width: 48rem) { .hero__inner { padding: var(--space-12) var(--space-10); } } .hero__title { margin: var(--space-4) 0 var(--space-3); color: #ffffff; font-size: clamp(1.75rem, 1.1rem + 2.6vw, var(--text-4xl)); line-height: 1.1; } .hero__title a { color: inherit; text-decoration: none; } .hero__title a:hover { color: inherit; text-decoration: underline; } .hero__meta { margin: 0 0 var(--space-6); color: rgba(255, 255, 255, 0.82); font-size: var(--text-sm); } .hero__actions { margin: 0; } /* ---- Blog-Aufteilung 70/30 ---------------------------------------------- Erst ab 64rem nebeneinander. Darunter braucht schon eine einzelne Karte die volle Breite — eine zweite Spalte daneben ergäbe zwei zu schmale. ------------------------------------------------------------------------- */ .blog-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-12); padding-block: var(--space-12) var(--space-24); align-items: start; } @media (min-width: 64rem) { .blog-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 3fr); gap: var(--space-16); } } .blog-layout__main { min-width: 0; } /* ---- Beitragsstrom ------------------------------------------------------ */ .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .post-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-raised); transition: border-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); } .post-card:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-md); transform: translateY(-2px); } .post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg-soft); } .post-card__media picture { display: block; height: 100%; } .post-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-standard); } .post-card:hover .post-card__image { transform: scale(1.04); } /* Ohne Bild füllt der Verlauf die Fläche. Eine halb leere Karte zwischen bebilderten fiele stärker auf als eine ohne Foto. */ .post-card__blank { display: block; width: 100%; height: 100%; background: var(--gradient-brand); opacity: 0.85; } .post-card__body { display: flex; flex: 1 1 auto; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-5); } .post-card__title { margin: 0; font-size: var(--text-lg); line-height: 1.3; } .post-card__title a { color: var(--color-heading); text-decoration: none; } .post-card__title a:hover { color: var(--color-primary-text); } .post-card__teaser { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); /* Zwei Sätze sind zwei Sätze — sind es im gepflegten Vorspann mehr, bricht die Karte nach drei Zeilen ab, statt die Reihe zu sprengen. */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card__meta { margin: 0; color: var(--color-text-muted); font-size: var(--text-xs); } .post-card__more { margin: auto 0 0; padding-top: var(--space-2); } .post-card__more a { font-size: var(--text-sm); font-weight: 600; text-decoration: none; } .post-card__more a:hover { text-decoration: underline; } @media (prefers-reduced-motion: reduce) { .post-card, .post-card__image { transition: none; } .post-card:hover { transform: none; } .post-card:hover .post-card__image { transform: none; } } /* ---- Seitenspalte ------------------------------------------------------- */ .sidebar { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; } @media (min-width: 64rem) { /* Läuft mit, bleibt aber unter der Kopfleiste stehen. Ohne die Höhenbegrenzung wäre eine lange Spalte auf niedrigen Fenstern nicht vollständig erreichbar. */ .sidebar { position: sticky; top: calc(var(--header-height) + var(--space-6)); max-height: calc(100vh - var(--header-height) - var(--space-10)); overflow-y: auto; scrollbar-width: thin; } } .side-card { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-raised); } .side-card__heading { margin: 0 0 var(--space-4); font-size: var(--text-base); font-weight: 700; letter-spacing: 0; } .side-card__text { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); } .side-card__note { margin: var(--space-3) 0 0; color: var(--color-text-muted); font-size: var(--text-xs); } .side-card--author { text-align: center; } .side-card__portrait { width: 5rem; height: 5rem; margin-bottom: var(--space-3); border-radius: 50%; object-fit: cover; } .side-card__name { margin: 0; color: var(--color-heading); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; } .side-card__role { margin: 0 0 var(--space-3); color: var(--color-primary-text); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .side-card__link { font-size: var(--text-sm); font-weight: 600; } .side-card--newsletter { border-color: transparent; background: linear-gradient(var(--color-bg-raised), var(--color-bg-raised)) padding-box, var(--gradient-brand) border-box; border: 1px solid transparent; } .subscribe { display: flex; flex-direction: column; gap: var(--space-2); } .subscribe input { width: 100%; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; font-size: var(--text-sm); } .subscribe input:focus-visible { border-color: var(--color-primary); outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 30%, transparent); } .subscribe .button { width: 100%; } /* ---- Blätterstrecke ----------------------------------------------------- */ .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, .pagination__gap { 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; } a.pagination__page:hover, a.pagination__step:hover { border-color: var(--color-primary-text); color: var(--color-primary-text); } .pagination__page.is-current { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast); font-weight: 600; } .pagination__gap { border-color: transparent; } span.pagination__step { opacity: 0.4; } /* ---- Einzelseiten aus dem Basis-Theme ----------------------------------- */ .page { padding-block: var(--space-16) var(--space-24); } .page__header { max-width: var(--measure); margin-bottom: var(--space-8); } .page__header h1 { margin-bottom: var(--space-3); } .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); } .prose blockquote { margin: var(--space-8) 0; padding: var(--space-2) 0 var(--space-2) var(--space-6); border-left: 3px solid var(--color-primary-text); color: var(--color-text-muted); font-size: var(--text-lg); } .prose img { border-radius: var(--radius-md); } .prose code { padding: 0.15em 0.4em; border-radius: 4px; background: var(--color-bg-soft); } .prose pre { padding: var(--space-5); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); } .prose pre code { padding: 0; background: none; } /* ---- Abschnitte --------------------------------------------------------- */ .section { padding-block: var(--space-16); } .section--highlighted, .section--highlights { background: var(--color-bg-soft); } .section__inner, .section__body { max-width: var(--measure); } .section-intro { max-width: var(--measure); margin-bottom: var(--space-8); } /* ---- Bildkacheln -------------------------------------------------------- */ .tile-section { margin-bottom: var(--space-12); } .tile-section__heading { margin: 0 0 var(--space-6); font-size: var(--text-2xl); } .tile-grid { display: grid; 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); text-decoration: none; isolation: isolate; } .media-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-standard); } .media-card:hover .media-card__image { transform: scale(1.04); } .media-card--blank { background: var(--gradient-brand); } .media-card__band { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-8) var(--space-5) var(--space-5); background: linear-gradient(to top, rgba(8, 10, 18, 0.9), transparent); color: #ffffff; } .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; } .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, .media-card:hover .media-card__image { transition: none; transform: none; } } /* ---- Beitragsseite ------------------------------------------------------ */ .post { padding-block: var(--space-12) var(--space-24); } .post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; } @media (min-width: 64rem) { .post-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 17rem); gap: var(--space-16); } } .post-aside { min-width: 0; } @media (min-width: 64rem) { .post-aside { position: sticky; top: calc(var(--header-height) + var(--space-6)); } } .post-hero { position: relative; display: flex; align-items: flex-end; min-height: 20rem; margin-bottom: var(--space-10); overflow: hidden; border-radius: var(--radius-lg); background: var(--gradient-brand); } .post-hero--plain { min-height: 0; background: none; } .post-hero__media, .post-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .post-hero__overlay { position: relative; width: 100%; padding: var(--space-12) var(--space-8) var(--space-8); background: linear-gradient(to top, rgba(8, 10, 18, 0.9), transparent); color: #ffffff; } .post-hero--plain .post-hero__overlay { padding: 0; background: none; color: inherit; } .post-hero__category { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .post-hero__title { margin: 0; color: inherit; font-size: clamp(1.75rem, 1.2rem + 2vw, var(--text-3xl)); } .post-hero--plain .post-hero__title { color: var(--color-heading); } .post__lead { max-width: var(--measure); color: var(--color-text-muted); font-size: var(--text-lg); } .post__meta { margin: 0 0 var(--space-8); color: var(--color-text-muted); font-size: var(--text-sm); } /* --- Inhaltsverzeichnis --- */ .toc { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); } .toc__heading { margin: 0 0 var(--space-3); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .toc__list { margin: 0; padding: 0; list-style: none; } .toc__item a { display: block; padding: var(--space-2) 0; border-left: 2px solid transparent; padding-left: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; } .toc__item a:hover, .toc__item.is-current a { border-left-color: var(--color-primary-text); color: var(--color-heading); } /* --- Autorenzeile und verwandte Beiträge --- */ .post-author { display: flex; gap: var(--space-4); margin-top: var(--space-12); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); } .post-author__monogram { display: grid; place-items: center; flex: 0 0 auto; width: 3rem; height: 3rem; border-radius: 50%; background: var(--gradient-brand); color: #ffffff; font-weight: 700; } .post-author__body { min-width: 0; } .post-author__name { margin: 0; color: var(--color-heading); font-weight: 700; } .post-author__role { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); } .post-author__text { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); } .post-related { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--color-border); } .post-related__heading { margin-bottom: var(--space-6); font-size: var(--text-xl); } .post-related__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-6); } .teaser { margin: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-raised); } .teaser__category { margin: 0 0 var(--space-2); color: var(--color-primary-text); font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .teaser__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); } .teaser__title a, .teaser__link { color: var(--color-heading); text-decoration: none; } .teaser__title a:hover, .teaser__link:hover { color: var(--color-primary-text); } .teaser__text { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); } /* ---- Blockarten --------------------------------------------------------- */ .block-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); align-items: center; margin-bottom: var(--space-12); } @media (min-width: 48rem) { .block-media { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .block-media__image img { width: 100%; border-radius: var(--radius-md); } .block-media__text > :first-child { margin-top: 0; } .feature-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: var(--space-4); margin-bottom: var(--space-12); } .feature-box { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); } .feature-box__value { display: block; color: var(--color-heading); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; line-height: 1.1; } .feature-box__label { display: block; margin-top: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); } .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: var(--space-4); margin: 0 0 var(--space-12); padding: 0; list-style: none; } .gallery__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-md); } .hours { margin: 0 0 var(--space-12); } .hours dt { color: var(--color-text-muted); font-size: var(--text-sm); } .hours dd { margin: 0 0 var(--space-3); color: var(--color-heading); font-weight: 600; } .accordion { margin-bottom: var(--space-12); } .faq-item, .accordion details { border-bottom: 1px solid var(--color-border); } .faq-item summary, .accordion summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; cursor: pointer; color: var(--color-heading); font-weight: 600; list-style: none; } .faq-item summary::-webkit-details-marker, .accordion summary::-webkit-details-marker { display: none; } .faq-item summary::after, .accordion summary::after { content: "+"; flex: 0 0 auto; color: var(--color-primary-text); font-size: var(--text-xl); line-height: 1; } .faq-item[open] summary::after, .accordion details[open] summary::after { content: "–"; } .faq-item > p, .faq-item > div, .accordion details > p { margin-top: 0; padding-bottom: var(--space-4); color: var(--color-text-muted); } .link-list { margin: 0 0 var(--space-8); padding: 0; list-style: none; } .link-list li + li { border-top: 1px solid var(--color-border); } .link-list a { display: block; padding: var(--space-3) 0; text-decoration: none; } .card-grid, .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--space-6); } .grid--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); } .card, .content-card { padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-raised); } .card--minimal { border: 0; padding: 0; background: none; } .content-card__heading { margin-bottom: var(--space-3); font-size: var(--text-lg); } .content-card__body > :last-child { margin-bottom: 0; } .cta-panel { padding: var(--space-10); border-radius: var(--radius-lg); background: var(--gradient-brand); color: #ffffff; text-align: center; } .cta-panel h2, .cta-panel__text { color: #ffffff; } /* --- Branchenliste --- */ .address-list { margin-bottom: var(--space-12); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); } .address-list__price-block { display: flex; align-items: baseline; gap: var(--space-3); margin-bottom: var(--space-4); } .address-list__price { color: var(--color-heading); font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; } .address-list__price-label, .address-list__location, .address-list__formats, .address-list__counts { color: var(--color-text-muted); font-size: var(--text-sm); } .address-list__samples { width: 100%; margin: var(--space-4) 0; font-size: var(--text-sm); } .address-list__more { color: var(--color-text-muted); font-size: var(--text-sm); } .address-list__image img { width: 100%; border-radius: var(--radius-md); } .address-list__order, .address-list__form { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; } /* ---- 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; white-space: pre-line; } .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-heading); 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: var(--color-bg); 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 { border-color: var(--color-primary); outline: 2px solid var(--color-primary-text); outline-offset: 1px; } /* 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: color-mix(in srgb, var(--color-primary) 12%, var(--color-bg)); } .lead-form__errors { margin-bottom: var(--space-6); padding: var(--space-4) var(--space-6); border: 1px solid #dc2626; border-radius: var(--radius-md); background: color-mix(in srgb, #dc2626 10%, var(--color-bg)); 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__extra { margin-top: var(--space-8); } .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: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg-raised); 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; } .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-heading); } .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-soft); color: var(--color-primary-text); } .invite__avatar--blank svg { width: 1.5rem; height: 1.5rem; } .invite__identity { min-width: 0; } .invite__name { margin: 0; color: var(--color-heading); 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%; } .invite--stacked { bottom: calc(3.5rem + var(--space-4) + var(--space-3)); } @media (min-width: 40rem) { .invite--stacked { bottom: var(--space-6); } } @media (prefers-reduced-motion: reduce) { .invite { transition: none; transform: none; } } /* ---- WhatsApp-Chat ------------------------------------------------------ Bewusst nicht in den Hausfarben und nicht in den Modi-Tokens: WhatsApp erkennt man an Grün und an der Sprechblase, bevor man ein Wort gelesen hat. Ein Knopf in der Hausfarbe verlöre genau diese Erkennbarkeit — deshalb stehen die Farben hier fest, hell wie dunkel. ------------------------------------------------------------------------- */ .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; 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; } .wa__launcher:hover { background: var(--wa-green-dark); color: #fff; } .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); 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; } .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; 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__body { padding: var(--space-5) var(--space-4) var(--space-2); } .wa__bubble { margin: 0; padding: var(--space-3) var(--space-4); 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; } .wa__cta:hover { background: var(--wa-green-dark); color: #fff; } @media (prefers-reduced-motion: reduce) { .wa__panel { transition: none; transform: none; } } @media (max-width: 39.999rem) { body:has(.wa.is-open) .invite { opacity: 0; pointer-events: none; } } /* ---- Cookie-Hinweis ----------------------------------------------------- Wird nur ausgeliefert, wenn eine Webseite GA4 einsetzt. Dieser Auftritt zählt cookiefrei — der Kasten steht hier trotzdem gestaltet, damit ein späterer Wechsel keinen ungestylten Balken erzeugt. ------------------------------------------------------------------------- */ .cookie-consent { position: fixed; z-index: 80; inset: auto var(--space-4) var(--space-4); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-raised); box-shadow: var(--shadow-lg); font-size: var(--text-sm); } /* ---- Fußbereich --------------------------------------------------------- */ .site-footer { margin-top: var(--space-16); padding-block: var(--space-12); border-top: 1px solid var(--color-border); background: var(--color-bg-soft); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-8); } .site-footer__brand { flex: 1 1 16rem; } .site-footer__brand p { margin: var(--space-2) 0 0; color: var(--color-text-muted); font-size: var(--text-sm); } .site-footer__legal-nav, .site-footer__social { display: flex; flex-wrap: wrap; gap: var(--space-4); } .site-footer__legal-nav a, .site-footer__social a { color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; } .site-footer__legal-nav a:hover, .site-footer__social a:hover { color: var(--color-heading); } .site-footer__note { flex: 1 1 100%; margin: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: var(--text-xs); } /* ---- Bildblock, Bildposition, Einbettungen ------------------------------ Nachgereicht zu den Blockarten aus config/templates/beitrag.php: «Nur Bild», die vier Bildpositionen von «Text mit Bild» sowie die Zwei-Klick-Flaechen fuer Video und Karte. ------------------------------------------------------------------------ */ /* Bild ueber oder unter dem Text: einspaltig, damit das Bild die volle Breite bekommt. Die Reihenfolge im Markup ist Text, dann Bild — fuer «darueber» dreht das CSS sie um. */ .block-media--stacked { grid-template-columns: minmax(0, 1fr); } @media (min-width: 48rem) { .block-media--stacked { grid-template-columns: minmax(0, 1fr); } } .block-media--above .block-media__image { order: -1; } .block-media__caption, .block-image__caption { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; } /* Reiner Bildblock */ .block-image { margin: 0; } .block-image img { width: 100%; height: auto; border-radius: var(--radius-md); } /* Breiter als der Text: die Lesebreite gilt fuer Fliesstext, nicht fuer ein Bild. Der negative Aussenabstand bleibt innerhalb des Containers, weil er nur die Differenz zur Lesebreite ausgleicht. */ @media (min-width: 64rem) { .block-image--wide { margin-inline: calc(var(--space-8) * -1); } .block-image--full { margin-inline: calc(var(--space-16) * -1); } } /* Zwei-Klick-Flaeche fuer Video und Karte */ .embed { margin: 0; } .embed__frame { position: relative; /* Feste Bildkante: ohne sie springt der Seiteninhalt in dem Moment, in dem das iframe entsteht. */ aspect-ratio: 16 / 9; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-muted); } .embed--map .embed__frame { aspect-ratio: 4 / 3; } .embed__consent { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); width: 100%; height: 100%; margin: 0; padding: var(--space-6); border: 0; background: none; color: var(--color-text); font: inherit; text-align: center; cursor: pointer; } .embed__consent:hover .embed__action, .embed__consent:focus-visible .embed__action { background: var(--color-primary); color: var(--color-primary-contrast); } .embed__heading { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; } .embed__note { max-width: 46ch; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; } .embed__action { margin-top: var(--space-2); padding: var(--space-2) var(--space-4); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); font-size: var(--text-sm); font-weight: 600; } /* Die beiden Sinnbilder sind gezeichnet und keine Datei: ein Bild vom Anbieter zu laden waere genau die Uebertragung, die hier verhindert wird — und eine eigene Datei waere ein weiterer Abruf fuer zwei Formen. */ .embed__play { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-primary); } .embed__play::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-40%, -50%); border-style: solid; border-width: 0.65rem 0 0.65rem 1.05rem; border-color: transparent transparent transparent var(--color-primary-contrast); } .embed__pin { width: 2.25rem; height: 2.25rem; border: 3px solid var(--color-primary); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); } .embed__iframe { display: block; width: 100%; height: 100%; border: 0; } .embed__fallback { margin: var(--space-2) 0 0; font-size: var(--text-sm); } .embed__caption { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }