/* ========================================================================= 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 ------------------------------------------------- Der dunkle Modus gilt nur, wenn er ausdrücklich gewählt wurde: [data-theme="dark"] setzt der Umschalter im (partials/theme-switch), und der läuft ausschließlich, wenn die Webseite den Dunkelmodus freigeschaltet hat (tenants.dark_mode). Bewusst keine @media (prefers-color-scheme: dark)-Regel mehr: eine Webseite ohne freigeschalteten Umschalter ist eine helle Webseite und soll das auch dann bleiben, wenn das Betriebssystem des Besuchers auf dunkel steht — sonst zeigt sie Systemfarben, die niemand für sie gewählt hat. Damit verhält sich pixelprompt wie das Basis-Theme (site.css). Der Block setzt 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); } /* ---- 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 { /* Abschaltbar je Webseite (tenants.header_sticky, siehe ThemeTokens). Ohne die Variable bleibt es beim bisherigen Verhalten des Themes. */ position: var(--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 erste Zeile eine deckende Fläche. Hat die Webseite unter Darstellung einen Header-Hintergrund gesetzt (ThemeTokens --color-header-bg), gilt der deckend und ohne Mischung: eine von Hand eingetragene Farbe soll genau so stehen, wie sie eingetragen wurde, und nicht um 18 % aufgehellt. */ background: var(--color-header-bg, var(--color-bg)); background: var(--color-header-bg, color-mix(in srgb, var(--color-bg) 82%, transparent)); backdrop-filter: blur(12px); /* Schriftfarbe der Kopfzeile, ebenfalls je Webseite. Ohne Eintrag erbt die Kopfzeile wie bisher und die Regeln darunter greifen. */ color: var(--color-header-ink, inherit); } .site-header__inner { display: flex; align-items: center; gap: var(--space-5); min-height: var(--header-height); } /* Die Marke steht in beiden Leisten — partials/footer wiederholt sie im Fußbereich. Die Tinte kommt deshalb von der Leiste und nicht von der Klasse, sonst färbt die Header-Schriftfarbe auch den Schriftzug unten. */ .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 { /* Feste --logo-height gewinnt (auf height + max-height, damit ein kleines Logo hochskaliert), sonst deckelt --logo-scale. Siehe site.css / ThemeTokens. */ height: var(--logo-height, auto); max-height: var(--logo-height, calc(2.25rem * var(--logo-scale, 1))); width: auto; } .site-header .brand { color: var(--color-header-ink, var(--color-heading)); } .site-footer .brand { color: var(--color-footer-ink, var(--color-heading)); } .brand__name { color: inherit; } /* --- 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-header-ink, var(--color-text-muted)); font-size: var(--text-sm); font-weight: 500; text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); } /* Unterstreichung zusätzlich zum Farbwechsel: hat die Webseite eine eigene Header-Schriftfarbe gesetzt, sind Ruhe- und Hoverfarbe dieselbe, und der Farbwechsel allein wäre nicht mehr zu sehen. */ .main-nav a:hover, .main-nav a[aria-current="page"] { color: var(--color-header-ink, var(--color-heading)); } .main-nav a:hover { text-decoration: underline; } .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); } .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-header-ink, 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); /* Dieselbe Fläche wie die Kopfzeile: das Menü klappt aus ihr heraus und soll nicht als weißer Kasten davor stehen. */ background: var(--color-header-bg, 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); } /* ---- Schriftfarbe je Bereich ---------------------------------------------- Optional: im CMS je Bereich gewaehlt ("Schriftfarbe im Aufmacher", "... ueber dem Beitragsstrom", "... der Seitenspalte"). Der Wert kommt als --block-ink am Bereichselement an, die Klasse pp-inked daneben. Gefaerbt werden Ueberschrift, Text und Verweise des Bereichs — nicht die Beitragskacheln, nicht die Schaltflaechen. Jede Regel steht eine Stufe spezifischer als die, die sie ueberschreibt. */ .pp-inked, .pp-inked h1, .pp-inked h2, .pp-inked h3, .pp-inked p, .pp-inked li, .pp-inked .hero__inner, .pp-inked .hero__title, .pp-inked .hero__meta, .pp-inked .page__intro, .pp-inked .page__intro a, .pp-inked .side-card__heading, .pp-inked .side-card__text, .pp-inked .side-card__note, .pp-inked .side-card__name, .pp-inked .side-card__role, .pp-inked .side-card__link, .pp-inked .pill, .pp-inked .rank-list a, .pp-inked .rank-list li::before { color: var(--block-ink); } /* ---- Aufmacher ---------------------------------------------------------- Regel für dieses Stylesheet: eine Blockklasse setzt nie #ffffff fest. Helle Schrift gehört an die dunkle Fläche, nicht an das Element darauf. Die Fläche setzt --surface-ink, die Elemente darüber lesen color: var(--surface-ink, ). Der Grund: dieselben Blockklassen kommen aus mehreren Vorlagen. Die dunkle Bildkachel .hero__card gibt es nur in »pixelprompt-startseite«; die Basis-Vorlage »Startseite« — und jede Vorlage, die später dazukommt — gibt denselben Aufmacher schlicht auf hellem Grund aus. Ein festes #ffffff an .hero__title stellte dort weiße Schrift auf weißen Grund. Custom Properties vererben, deshalb reicht die Kachel den Wert nach unten durch, ohne dass die Regeln der Kinder spezifischer werden — die Schriftfarbe je Bereich (.pp-inked, eine Stufe darüber) sticht weiterhin. Ohne dunkle Fläche ist --surface-ink nicht gesetzt und es greifen die Farben aus der Darstellung (--color-heading / --color-text). ------------------------------------------------------------------------- */ .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; /* Die Kachel ist die dunkle Fläche — hier steht die helle Schrift. */ --surface-ink: #ffffff; --surface-ink-muted: rgba(255, 255, 255, 0.82); } .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 { color: var(--surface-ink, var(--color-text)); /* Gilt nur für den schlichten Aufmacher; die Kachel unten setzt padding als Kurzschreibweise neu und hebt es damit auf. */ padding-bottom: var(--space-12); } /* Schmale Spalte und Innenabstand gehören zur Kachel, nicht zur Klasse: im schlichten Aufmacher sitzt .hero__inner am .container und würde sonst auf 44rem zusammenschnurren. */ .hero__card .hero__inner { position: relative; max-width: 44rem; padding: var(--space-8) var(--space-6); } @media (min-width: 48rem) { .hero__card .hero__inner { padding: var(--space-12) var(--space-10); } } .hero__title { margin: var(--space-4) 0 var(--space-3); color: var(--surface-ink, var(--color-heading)); 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: var(--surface-ink-muted, var(--color-text-muted)); font-size: var(--text-sm); } .hero__actions { margin: 0; } /* --- Schlichter Aufmacher --- Text, Unterzeile und Bild nebeneinander — so gibt die Basis-Vorlage »Startseite« den Aufmacher aus, und darauf setzt jede weitere Vorlage auf, die keine eigene Bildkachel mitbringt. Ohne diese Regeln stünde das Bild als voller Block unter dem Text. */ .hero__text { max-width: var(--measure); } .hero__lead { color: var(--surface-ink-muted, var(--color-text-muted)); font-size: var(--text-lg); } .hero__media img { border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } @media (min-width: 52rem) { .hero--with-media .hero__inner { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-10); align-items: center; } } /* ---- 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); } /* Die generischen Vorlagen »seite« und »startseite« fallen in diesem Theme auf die Basis-Blades zurück — die bringen keine Seitenspalte mit. Ohne sie wirkte die 42-rem-Lesespalte (--measure) verloren links im breiten Container, rechts die Leerfläche, wo im Blog-Layout (pixelprompt-startseite, .blog-layout) die Seitenspalte sitzt. Im .page-Kontext nutzt der Inhalt deshalb die volle Kartenbreite, von links nach rechts. Das Blog-Layout und die Beitragsansicht sind nicht betroffen — die haben kein .page um sich. Der schlichte Aufmacher, den es nur in diesen Vorlagen gibt, bleibt als Lesespalte, aber mittig statt links. */ .page .page__header, .page .prose { max-width: none; } .hero__text { margin-inline: auto; } .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); } /* Überschriften im Fließtext in derselben Stufung wie die Blocküberschriften (h2 > h3 > h4), damit ein h2 aus dem Rich-Text und ein h2-Block gleich groß wirken. */ .prose h2 { font-size: var(--text-2xl); } .prose h3 { font-size: var(--text-xl); } .prose h4 { font-size: var(--text-lg); } .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 ------------------------------------------------------ */ /* Der obere und untere Abstand liegt am Raster, nicht am Beitrag allein — so beginnen die Textspalte und die Verzeichnisspalte auf derselben Höhe, unabhängig davon, wie hoch die Kopfleiste dieser Webseite gerät und ob das Verzeichnis klebt. (Früher trug .post den Abstand und ein ausgetüftelter Versatz sollte die Oberkanten zusammenziehen — das ging nur auf, solange die Kopfleiste exakt --header-height hoch war.) */ .post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-10); align-items: start; padding-block: var(--space-12) var(--space-24); } @media (min-width: 64rem) { .post-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 20rem); gap: var(--space-12); } } .post-aside { min-width: 0; } @media (min-width: 64rem) { .post-aside { position: sticky; top: calc(var(--header-height) + var(--space-6)); } /* Webseiteneinstellung «Inhaltsverzeichnis klebt beim Scrollen» aus: die Spalte läuft mit dem Text mit. Siehe tenants.toc_sticky. */ .post-layout--toc-flow .post-aside { position: static; top: auto; } } .post-hero { position: relative; display: flex; align-items: flex-end; /* Vorher 20rem. Das war auf dem breiten Desktop ein flacher Streifen, auf dem das Farbband mit dem Titel den groessten Teil einnahm und vom eigentlichen Foto kaum etwas uebrig blieb. */ min-height: 26rem; 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; /* .post-hero__media ist eine
: ohne margin:0 schieben die UA-Vorgaben (margin: 1em 40px) das Bild nach rechts unten, und in der Lücke oben/links scheint der Verlauf von .post-hero durch. */ margin: 0; width: 100%; height: 100%; display: block; object-fit: cover; } .post-hero__overlay { position: relative; width: 100%; /* Weniger Luft ueber der Kategoriezeile — der Verlauf braucht Hoehe fuer die Lesbarkeit, aber nicht so viel, dass er das halbe Bild verdeckt. */ padding: var(--space-10) var(--space-8) var(--space-8); background: linear-gradient(to top, rgba(8, 10, 18, 0.92) 0%, rgba(8, 10, 18, 0.55) 55%, transparent 100%); 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; } /* Der Kategorielink steht im Bild-Kopf auf dem dunklen Verlauf und muss hell sein — ohne diese Regel greift a { color: var(--color-primary-text) } und die Hausfarbe des Kunden verschwindet im Foto. Ohne Titelbild (--plain) steht die Zeile auf dem Seitengrund, dort bleibt die Hausfarbe. */ .post-hero__overlay a { color: #ffffff; opacity: 0.85; text-decoration: none; } .post-hero__overlay a:hover { opacity: 1; text-decoration: underline; } .post-hero--plain .post-hero__overlay a { color: var(--color-primary-text); opacity: 1; } .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 { /* flex und gap, sonst kleben Datum, Autor und Lesezeit aneinander - site.css laedt dieses Theme nicht. */ display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0 0 var(--space-8); color: var(--color-text-muted); font-size: var(--text-sm); } .post__meta > * + *::before { content: "\00b7"; margin-right: var(--space-3); } /* --- Inhaltsverzeichnis --- */ .toc { /* Kein Padding oben: die Ueberschrift soll auf derselben Hoehe beginnen wie das Beitragsbild, nicht durch den Innenabstand tiefer ansetzen. */ padding: 0 var(--space-4) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-soft); } .toc__heading { margin: 0 0 var(--space-2); font-size: var(--text-sm); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; } .toc__list { margin: 0; padding: 0; list-style: none; } /* Unterpunkte: eingerückt, kleiner und blasser, damit die oberste Ebene auf einen Blick als Gliederung lesbar bleibt. Der Einzug sitzt an der verschachtelten Liste bzw. am
, das sie in der pixelprompt- Fassung umschließt (partials/toc-items). */ .toc__list .toc__list, .toc__group .toc__list { margin: 0.1rem 0 0.3rem; padding-left: var(--space-3); border-left: 1px solid var(--color-border); } .toc__item > a, .toc__summary > a { display: block; padding: 0.15rem 0 0.15rem var(--space-3); border-left: 2px solid transparent; color: var(--color-text); font-size: var(--text-sm); line-height: 1.35; text-decoration: none; } .toc__list .toc__list .toc__item > a, .toc__group .toc__list .toc__item > a, .toc__group .toc__list .toc__summary > a { padding-left: var(--space-2); color: var(--color-text-muted); font-size: var(--text-xs); } .toc__item > a:hover, .toc__summary > a:hover, .toc__item.is-current > a { border-left-color: var(--color-primary-text); color: var(--color-heading); } /* Eine Überschrift mit Unterpunkten: das trägt links das Aufklapp-Dreieck, der Verweis daneben springt weiter zum Abschnitt. */ .toc__summary { display: flex; align-items: baseline; gap: 0.35rem; list-style: none; cursor: pointer; } .toc__summary::-webkit-details-marker { display: none; } .toc__summary::before { content: ""; flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid currentColor; border-top: 4px solid transparent; border-bottom: 4px solid transparent; opacity: 0.55; transform: translateY(0.05rem); transition: transform 150ms var(--ease-standard); } .toc__group[open] > .toc__summary::before { transform: translateY(0.05rem) rotate(90deg); } .toc__summary > a { padding-left: 0; } /* --- 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__photo { flex: 0 0 auto; width: 3rem; height: 3rem; margin: 0; border-radius: 50%; object-fit: cover; background: var(--color-bg-soft); } .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); /* Es ist ein