/* ========================================================================= Basis-Theme — Stylesheet der öffentlichen Seiten Eine Datei für alle Tenants. Was pro Kunde abweicht, sind ausschließlich die Variablen unter "Tokens": Farben und Schriften werden im neu gesetzt (siehe App\Support\ThemeTokens), diese Datei bleibt unverändert und damit über Tenant-Grenzen hinweg cachebar. Handgeschrieben, kein Build-Schritt. Wer hier etwas ändert, ändert es für jede Webseite — Abweichungen einzelner Kunden gehören in einen eigenen Theme-Ordner unter resources/views/themes/. ========================================================================= */ /* ---- Tokens ------------------------------------------------------------ */ :root { /* Farben, die der Tenant überschreiben darf */ --color-primary: #1a56db; --color-secondary: #111827; --color-accent: #0e7490; /* Farben des Themes selbst */ --color-primary-contrast: #ffffff; --color-bg: #ffffff; --color-bg-muted: #f5f6f8; --color-border: #e2e5ea; --color-text: #1a1d23; --color-text-muted: #596070; /* Schriften. Systemeigen — eingebundene Schriftdateien kommen mit den Medien, Google Fonts sind ausgeschlossen. */ --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-heading: var(--font-body); --text-sm: 0.875rem; --text-base: 1.0625rem; --text-lg: 1.1875rem; --text-xl: 1.5rem; --text-2xl: 1.875rem; --text-3xl: 2.375rem; --text-4xl: 3rem; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; --space-24: 6rem; --radius-sm: 4px; --radius-md: 10px; --radius-lg: 16px; /* Lesbreite des Fließtextes. Deutlich schmaler als der Container: über 75 Zeichen je Zeile verliert das Auge beim Umbruch die Zeile. */ --measure: 68ch; --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06); --shadow-md: 0 12px 32px rgba(16, 24, 40, 0.1); --container: 78rem; /* Höhe der Kopfzeile — die feste Seitenleiste und die Sprungmarken müssen darunter stehen bleiben. */ --header-height: 4.5rem; } :root[data-theme="dark"] { --color-bg: #0f172a; --color-bg-muted: #111827; --color-border: #334155; --color-text: #e2e8f0; --color-text-muted: #94a3b8; --color-secondary: #f8fafc; --color-bg-card: #14213d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.45); } .theme-toggle { border: 1px solid var(--color-border); background: transparent; color: var(--color-text); padding: 0.55rem 0.8rem; border-radius: 999px; font-size: 1rem; cursor: pointer; transition: background 160ms ease, color 160ms ease, transform 180ms ease; } .theme-toggle:hover, .theme-toggle:focus-visible { background: var(--color-bg-muted); transform: translateY(-1px); } /* ---- Grundlagen -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.65; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; height: auto; } /* waehlt nur das Bildformat aus und soll im Layout nicht mitreden. Ohne das loest ein height: 100% am gegen den Wrapper auf statt gegen die Kachel darum — die Medienkarte verlaere damit ihr Seitenverhaeltnis. */ picture { display: contents; } h1, h2, h3 { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-weight: 700; line-height: 1.15; letter-spacing: -0.015em; color: var(--color-secondary); } h1 { font-size: var(--text-3xl); } h2 { font-size: var(--text-2xl); } h3 { font-size: var(--text-xl); } p { margin: 0 0 var(--space-4); } a { color: var(--color-primary); text-underline-offset: 0.2em; } :focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: var(--radius-sm); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ---- Grundraster ------------------------------------------------------- */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--space-6); } /* Springt am Tastaturfokus ins Bild, sonst außerhalb des Sichtfelds. */ .skip-link { position: absolute; left: var(--space-4); top: -4rem; z-index: 10; padding: var(--space-2) var(--space-4); background: var(--color-secondary); color: #fff; border-radius: var(--radius-sm); text-decoration: none; transition: top 140ms ease; } .skip-link:focus { top: var(--space-4); } /* ---- Kopfbereich ------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--color-border); background: var(--color-bg); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-4); } .brand { display: inline-flex; align-items: center; text-decoration: none; color: var(--color-secondary); } .brand__logo { max-height: 2.5rem; width: auto; } .brand__name { font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; letter-spacing: -0.01em; } .site-nav ul { display: flex; flex-wrap: wrap; gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .site-nav a { color: var(--color-text-muted); font-size: var(--text-sm); text-decoration: none; } .site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--color-secondary); } /* ---- Aufmacher --------------------------------------------------------- */ .hero { padding-block: var(--space-16); border-bottom: 1px solid var(--color-border); } .hero__inner { display: grid; gap: var(--space-12); align-items: center; } .hero__title { font-size: var(--text-4xl); } .hero__lead { max-width: 46ch; font-size: var(--text-lg); color: var(--color-text-muted); } .hero__media img { border-radius: var(--radius-md); box-shadow: var(--shadow-md); } @media (min-width: 52rem) { .hero--with-media .hero__inner { grid-template-columns: 1fr 1fr; } } /* ---- Sektionen --------------------------------------------------------- */ .section { padding-block: var(--space-16); } .section + .section { border-top: 1px solid var(--color-border); } /* "Hervorheben" aus der Felddefinition: abgesetzter Hintergrund, keine zweite Farbe und kein Rahmen — sonst zerfällt die Seite in Kacheln. */ .section--highlighted { background: var(--color-bg-muted); } .section--highlighted + .section, .section + .section--highlighted { border-top: 0; } .section__inner { display: grid; gap: var(--space-8); align-items: center; } .section__body { max-width: 62ch; } @media (min-width: 52rem) { .section--left .section__inner, .section--right .section__inner { grid-template-columns: 1fr 1fr; } /* Im Quelltext steht der Text immer vor dem Bild — die Position wird hier umgestellt, damit Vorleseprogramme die gedachte Reihenfolge behalten. */ .section--left .section__media { order: -1; } } .section__media img { border-radius: var(--radius-md); } /* ---- Einzelseite ------------------------------------------------------- */ .page { padding-block: var(--space-16); } .page__header { max-width: 62ch; } .page__intro { font-size: var(--text-lg); color: var(--color-text-muted); } .page__image { margin-block: var(--space-8); } .page__image img { border-radius: var(--radius-md); } /* ---- Fließtext aus dem Editor ------------------------------------------ */ .prose { max-width: 68ch; } .prose > :first-child { margin-top: 0; } .prose h2, .prose h3, .prose h4, .prose h5 { scroll-margin-top: var(--space-6); } .prose h2, .prose h3 { margin-top: var(--space-8); } .prose ul, .prose ol { margin: 0 0 var(--space-4); padding-left: var(--space-6); } .prose li { margin-bottom: var(--space-2); } /* Die Auszeichnungen, die der Editor zusätzlich anbietet — jede hier, sonst bietet die Toolbar etwas an, das im Frontend aussieht wie gewöhnlicher Text. Siehe ContentSchema::RichTextToolbar. */ .prose .lead { color: var(--color-text); font-size: var(--text-lg); line-height: 1.6; } .prose small { display: inline-block; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; } .prose mark { padding: 0.1em 0.25em; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-accent) 22%, transparent); color: inherit; } .prose code { padding: 0.15em 0.4em; border-radius: var(--radius-sm); background: var(--color-bg-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9em; } .prose hr { height: 1px; margin: var(--space-8) 0; border: 0; background: var(--color-border); } /* Tabellen dürfen breiter sein als die Lesebreite des Fließtextes und scrollen auf schmalen Bildschirmen für sich allein — die ganze Seite waagerecht scrollen zu lassen wäre die schlechtere Lösung. */ .prose table { display: block; width: 100%; max-width: 100%; overflow-x: auto; margin: var(--space-6) 0; border-collapse: collapse; font-size: var(--text-sm); } .prose th, .prose td { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); text-align: left; vertical-align: top; } .prose th { background: var(--color-bg-muted); font-weight: 600; } .prose td > p:only-child, .prose th > p:only-child { margin: 0; } .prose blockquote { margin: var(--space-6) 0; padding-left: var(--space-6); border-left: 3px solid var(--color-accent); color: var(--color-text-muted); } /* ---- Schaltflächen ----------------------------------------------------- */ .button { /* inline-flex statt inline-block: mit min-height wuerde der Text sonst oben kleben, statt mittig zu sitzen. */ display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0.875rem 1.75rem; min-height: 3rem; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color 140ms ease, border-color 140ms ease; } .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); } .button--quiet { border-color: var(--color-border); color: var(--color-secondary); background: transparent; } .button--quiet:hover { border-color: var(--color-secondary); } /* ---- Fußbereich -------------------------------------------------------- */ .site-footer { margin-top: var(--space-24); padding-block: var(--space-8); border-top: 1px solid var(--color-border); background: var(--color-bg-muted); color: var(--color-text-muted); font-size: var(--text-sm); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between; } .site-footer p { margin: 0; } .site-footer__legal-nav { display: flex; flex-wrap: wrap; gap: var(--space-4); } .site-footer__legal-nav a { color: inherit; } /* ---- Beitragslayout ---------------------------------------------------- Zwei Spalten: Text links, Inhaltsverzeichnis rechts. Die Leiste bleibt beim Scrollen stehen, damit sie das hält, was ihr Name verspricht — ein Verzeichnis, das nach dem ersten Absatz aus dem Bild gescrollt ist, wird nie wieder benutzt. Unter 64rem untereinander, das Verzeichnis dann zugeklappt über dem Text. ------------------------------------------------------------------------ */ .post-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); padding-block: var(--space-12) var(--space-24); } @media (min-width: 64rem) { .post-layout { grid-template-columns: minmax(0, 1fr) 18rem; gap: var(--space-12); align-items: start; } } .post-aside { order: -1; } @media (min-width: 64rem) { .post-aside { order: 0; position: sticky; top: calc(var(--header-height) + var(--space-6)); /* Ein langes Verzeichnis darf nicht unten aus dem Fenster laufen — dann wären die letzten Abschnitte nicht erreichbar. */ max-height: calc(100vh - var(--header-height) - var(--space-12)); overflow-y: auto; overscroll-behavior: contain; } } .post-hero { position: relative; margin-bottom: var(--space-4); border-radius: var(--radius-md); overflow: hidden; isolation: isolate; } .post-hero__media { display: block; margin: 0; } .post-hero__media img { display: block; width: 100%; height: 100%; aspect-ratio: 16 / 9; object-fit: cover; } @media (min-width: 48rem) { .post-hero__media img { aspect-ratio: 21 / 9; } } /* ---- Farbiges Band im Titelbild ------------------------------------------- Ein Band in der Hausfarbe ueber dem unteren Bildrand, halbdurchsichtig, so dass das Foto darunter noch durchscheint. Darueber ein kurzer Verlauf in dieselbe Farbe: eine harte Oberkante quer durchs Bild wirkt wie ein Klebestreifen. Der Farbanteil ist bewusst hoch genug, dass weisse Schrift auf jedem Foto liest — auch auf hellem Himmel, der in genau diesem Bildbereich haeufig vorkommt. --------------------------------------------------------------------------- */ .post-hero__overlay { position: absolute; inset: auto 0 0 0; padding: var(--space-6) var(--space-8); background: color-mix(in srgb, var(--color-primary) 88%, transparent); color: #fff; } .post-hero__overlay::before { content: ""; position: absolute; inset: auto 0 100% 0; height: var(--space-16); background: linear-gradient( to top, color-mix(in srgb, var(--color-primary) 88%, transparent), transparent ); pointer-events: none; } .post-hero__category { display: inline-block; margin: 0 0 var(--space-1); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; } .post-hero__category a { color: #fff; opacity: 0.85; text-decoration: none; } .post-hero__category a:hover { opacity: 1; text-decoration: underline; } .post-hero__title { margin: 0; max-width: 30ch; color: #fff; font-family: var(--font-heading); font-size: clamp(1.375rem, 0.9rem + 1.9vw, var(--text-3xl)); line-height: 1.2; letter-spacing: -0.02em; text-wrap: balance; } /* Ohne Titelbild bleibt derselbe Aufbau, nur ohne Band und ohne Foto — sonst staende die Ueberschrift bei jedem zweiten Beitrag woanders. */ .post-hero--plain { border-radius: 0; } .post-hero--plain .post-hero__overlay { position: static; padding: 0; background: none; color: inherit; } .post-hero--plain .post-hero__overlay::before { display: none; } .post-hero--plain .post-hero__category a { color: var(--color-primary); opacity: 1; } .post-hero--plain .post-hero__title { color: var(--color-text); max-width: 22ch; font-size: clamp(2rem, 1.3rem + 2.8vw, var(--text-4xl)); } .post__meta { 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); } .post__lead { max-width: 40rem; margin: 0 0 var(--space-12); color: var(--color-text-muted); font-size: var(--text-lg); line-height: 1.6; text-wrap: pretty; } /* ---- Blockabschnitt ------------------------------------------------------- Farbige Leiste mit der Ueberschrift, darunter der Inhalt in einem Rahmen derselben Farbe — so wie im Vorbild. Der Rahmen bindet Leiste und Text zu einem Block zusammen; ohne ihn schwebt die Leiste ueber losem Text. --------------------------------------------------------------------------- */ .content-card { /* Die Karte ist ein
. Ohne dieses padding: 0 greift die allgemeine Regel fuer section und legt vier Leerzeilen ueber die Ueberschriftenleiste. */ padding: 0; margin-bottom: var(--space-8); border: 1px solid var(--color-primary); border-radius: var(--radius-md); background: var(--color-bg); overflow: hidden; } .content-card:last-child { margin-bottom: 0; } .content-card__heading { margin: 0; padding: var(--space-4) var(--space-6); background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; line-height: 1.3; letter-spacing: -0.015em; text-wrap: balance; scroll-margin-top: 120px; } .content-card__body { padding: var(--space-6); max-width: 44rem; color: var(--color-text); font-size: var(--text-lg); line-height: 1.75; } .content-card__body > :first-child { margin-top: 0; } .content-card__body > :last-child { margin-bottom: 0; } .content-card__body p { margin: 0 0 var(--space-6); } .content-card__body h2, .content-card__body h3, .content-card__body h4 { margin: var(--space-12) 0 var(--space-4); color: var(--color-primary); font-family: var(--font-heading); line-height: 1.3; letter-spacing: -0.015em; scroll-margin-top: 120px; } .content-card__body h2 { font-size: var(--text-2xl); } .content-card__body h3 { font-size: var(--text-xl); } .content-card__body h4 { font-size: var(--text-lg); } .content-card__body a { color: var(--color-primary); text-underline-offset: 0.2em; } .content-card__body ul, .content-card__body ol { margin: 0 0 var(--space-6); padding: 0; list-style: none; } .content-card__body li { position: relative; margin-bottom: var(--space-3); padding-left: var(--space-6); } .content-card__body ul > li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 7px; height: 7px; border-radius: 50%; background: var(--color-primary); } .content-card__body ol { counter-reset: schritt; } .content-card__body ol > li { counter-increment: schritt; } .content-card__body ol > li::before { content: counter(schritt) "."; position: absolute; left: 0; top: 0; color: var(--color-primary); font-variant-numeric: tabular-nums; font-weight: 700; } .content-card__body blockquote { margin: var(--space-8) 0; padding-left: var(--space-6); border-left: 2px solid var(--color-primary); color: var(--color-text-muted); } .content-card__body blockquote p:last-child { margin-bottom: 0; } /* Die Auszeichnungen, die der Editor zusaetzlich anbietet. Jede hier, sonst bietet die Toolbar etwas an, das im Frontend aussieht wie gewoehnlicher Text. Siehe App\Content\ContentSchema::RichTextToolbar. */ .content-card__body .lead { color: var(--color-text); font-size: var(--text-xl); line-height: 1.6; } .content-card__body small { display: inline-block; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; } .content-card__body mark { padding: 0.1em 0.3em; border-radius: var(--radius-sm); background: color-mix(in srgb, var(--color-primary) 22%, transparent); color: var(--color-text); } .content-card__body code { padding: 0.15em 0.4em; border-radius: var(--radius-sm); background: var(--color-bg-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.875em; } .content-card__body hr { height: 1px; margin: var(--space-12) 0; border: 0; background: var(--color-border); } /* Tabellen duerfen breiter sein als die Lesespalte und scrollen fuer sich allein — die ganze Seite waagerecht scrollen zu lassen waere schlechter. */ .content-card__body table { display: block; width: 100%; overflow-x: auto; margin: 0 0 var(--space-6); border-collapse: collapse; font-size: var(--text-sm); line-height: 1.6; } .content-card__body th, .content-card__body td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; } .content-card__body thead th { background: var(--color-bg-muted); color: var(--color-text); font-weight: 600; } .content-card__body td > p:only-child, .content-card__body th > p:only-child { margin: 0; } /* ---- Inhaltsverzeichnis ---------------------------------------------------- Aufgeraeumt wie im Vorbild: heller Kasten, Ueberschrift in der Hausfarbe, darunter eine schlichte Punktliste. Keine Kanten, keine Flaechen hinter den Eintraegen — die Leiste soll ruhig stehen, nicht mitscrollen und blinken. --------------------------------------------------------------------------- */ .toc { padding: var(--space-6); border-radius: var(--radius-md); background: var(--color-bg-muted); font-size: var(--text-sm); } .toc__heading { margin: 0; color: var(--color-primary); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; line-height: 1.3; cursor: pointer; } .toc[open] .toc__heading { margin-bottom: var(--space-4); } @media (min-width: 64rem) { /* Danebenstehend ist das Zuklappen sinnlos — der Pfeil waere ein Knopf, der Platz spart, wo keiner fehlt. */ .toc__heading { cursor: default; list-style: none; pointer-events: none; } .toc__heading::-webkit-details-marker { display: none; } } .toc__list { margin: 0; padding-left: var(--space-4); list-style: disc; } .toc__list .toc__list { margin: var(--space-1) 0 var(--space-2); list-style: circle; } .toc__item { margin-bottom: var(--space-2); color: var(--color-primary); } .toc__item > a { color: var(--color-text); line-height: 1.45; text-decoration: none; } .toc__item > a:hover { color: var(--color-primary); text-decoration: underline; } .toc__item > a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* Der Abschnitt, bei dem der Leser gerade ist — gesetzt von assets/js/toc.js. */ .toc__item > a.is-current { color: var(--color-primary); font-weight: 600; } /* ---- Block «Branchenliste» --------------------------------------------- Alles untereinander, über die volle Breite. Nebeneinander gestellt drängeln sich Bild, Aufzählung, Zählwerte und Preis auf je einem Drittel und keines der vier hat genug Platz — die Zählwert-Tabelle bricht dann in zwei Zeilen je Wert um. ------------------------------------------------------------------------ */ .address-list__offer:first-child { margin-top: 0; } .address-list__offer { display: flex; flex-direction: column; gap: var(--space-6); margin-top: var(--space-4); } .address-list__image { margin: 0; } .address-list__image img { width: 100%; height: auto; border-radius: var(--radius-md); } .address-list__counts { width: 100%; } .address-list__text > :first-child { margin-top: 0; } .address-list__text ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); } .address-list__text li { margin-bottom: var(--space-2); } .address-list__counts { width: 100%; margin-top: var(--space-4); border-collapse: collapse; font-size: var(--text-sm); } .address-list__counts caption { margin-bottom: var(--space-2); color: var(--color-text); font-weight: 600; text-align: left; } .address-list__counts th, .address-list__counts td { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); text-align: left; } .address-list__counts th { color: var(--color-text-muted); font-weight: 400; } .address-list__counts td { text-align: right; font-variant-numeric: tabular-nums; } .address-list__order { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4) var(--space-8); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-muted); } .address-list__price-block { flex: 0 0 auto; } .address-list__price-label { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); } .address-list__price { margin: var(--space-1) 0 0; } .address-list__price strong { font-size: var(--text-2xl); } .address-list__price span { margin-left: var(--space-1); color: var(--color-text-muted); font-size: var(--text-sm); } .address-list__form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-4); margin-left: auto; } .address-list__formats { margin: 0; padding: 0; border: 0; } .address-list__formats legend { padding: 0; margin-bottom: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); } .address-list__formats label { display: inline-flex; align-items: center; gap: var(--space-1); margin-right: var(--space-4); } .address-list__form .button { justify-content: center; } .address-list__samples { margin-top: var(--space-8); } .address-list__samples h3 { margin-bottom: var(--space-2); font-size: var(--text-lg); } .address-list__samples ul { margin: 0; padding-left: var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); } .address-list__more { width: 100%; margin-top: var(--space-8); border-collapse: collapse; font-size: var(--text-sm); } .address-list__more th, .address-list__more td { padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border); text-align: left; } .address-list__more thead th { color: var(--color-text-muted); font-weight: 400; } .address-list__more td:nth-child(2), .address-list__more td:nth-child(3), .address-list__more td:nth-child(4) { text-align: right; font-variant-numeric: tabular-nums; } .address-list__location { display: block; color: var(--color-text-muted); } /* ---- Autorenkasten ------------------------------------------------------ */ .post-author { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin-top: var(--space-16); padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-muted); } .post-author__monogram { flex: 0 0 auto; display: grid; place-items: center; width: 3.5rem; height: 3.5rem; margin: 0; border-radius: 50%; background: var(--color-primary); color: var(--color-primary-contrast); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; } .post-author__body { flex: 1 1 18rem; } .post-author__name { margin: 0 0 var(--space-2); font-weight: 700; } .post-author__role { display: block; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 400; } .post-author__text { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; } /* ---- Weiterführende Beiträge und Übersicht ------------------------------ Derselbe Kartensatz unter dem Beitrag wie auf /ratgeber und den Kategorieseiten — eine Übersicht ist nichts anderes als eine längere Reihe weiterführender Beiträge. ------------------------------------------------------------------------ */ .post-related { margin-top: var(--space-16); padding-top: var(--space-12); border-top: 1px solid var(--color-border); } .post-related__heading { margin: 0 0 var(--space-8); font-size: var(--text-2xl); } .post-related__grid, .post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .teaser { margin: 0; } .teaser__link, .post-card { display: flex; flex-direction: column; gap: var(--space-3); height: 100%; padding: var(--space-6); border: 1px solid var(--color-border); border-top: 2px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); color: inherit; text-decoration: none; transition: border-color 200ms ease, box-shadow 200ms ease; } .teaser__link:hover, .post-card:hover { border-top-color: var(--color-primary); box-shadow: var(--shadow-sm); } .teaser__link:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .teaser__category, .post-card__meta { margin: 0; color: var(--color-primary); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .teaser__title, .post-card h2 { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; line-height: 1.3; } .post-card h2 a { color: inherit; text-decoration: none; } .post-card h2 a:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } .teaser__text, .post-card p { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; } /* Schiebt die Schaltfläche an den unteren Rand, damit sie in einer Reihe ungleich hoher Karten auf einer Linie steht. */ .post-card .button { margin-top: auto; align-self: flex-start; } .post-grid + nav { margin-top: var(--space-12); } /* ---- Blätterfunktion ------------------------------------------------------ Eigene Ansicht unter resources/views/pagination/webvanta.blade.php — Laravels Voreinstellung ist eine Tailwind-Vorlage, und Tailwind gibt es in diesem Projekt nicht. --------------------------------------------------------------------------- */ .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; flex-wrap: wrap; align-items: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .pagination__page, .pagination__step { display: inline-flex; align-items: center; justify-content: center; min-width: 2.5rem; padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); color: var(--color-text); text-decoration: none; font-variant-numeric: tabular-nums; } a.pagination__page:hover, a.pagination__step:hover { border-color: var(--color-border-strong, var(--color-text-muted)); } .pagination__page:focus-visible, .pagination__step:focus-visible { outline: 2px solid var(--color-accent, var(--color-primary)); outline-offset: 2px; } /* Die aktuelle Seite ist kein Verweis — sie führt nirgendwohin. */ .pagination__page.is-current { border-color: var(--color-accent, var(--color-primary)); color: var(--color-accent, var(--color-primary)); font-weight: 600; } /* Zurück und Weiter am Anfang beziehungsweise Ende: sichtbar, aber erkennbar nicht anklickbar. Ausblenden würde die Reihe hin und her springen lassen. */ span.pagination__step { opacity: 0.45; } .pagination__gap { padding: 0 var(--space-1); color: var(--color-text-muted, var(--color-text-secondary)); } /* ---- Bildkacheln ---------------------------------------------------------- Kategorieuebersicht und Beitragsliste: ein Bild, darauf unten ein Band in der Hausfarbe mit dem Titel. Eine Kategorie und ein Beitrag sind fuer den Besucher dasselbe — ein Bild, unter dem etwas steht, das er anklicken kann. Deshalb dieselbe Kachel fuer beides. --------------------------------------------------------------------------- */ .tile-section { margin-bottom: var(--space-16); } .tile-section:last-child { margin-bottom: 0; } .tile-section__heading { margin: 0 0 var(--space-6); font-size: var(--text-2xl); } .tile-grid { display: grid; /* --tile-min kommt je Webseite aus dem (siehe ThemeTokens) und laesst sich im Agentur-Panel auf kompakt, standard oder gross stellen. 19rem ist der Rueckfall, wenn nichts eingestellt ist. */ grid-template-columns: repeat(auto-fill, minmax(var(--tile-min, 19rem), 1fr)); gap: var(--space-6); } .media-card { position: relative; display: block; /* 3:2 statt 4:3 — auf einer breiteren Kachel wirkt das hoehere Format gedrungen, und Querformat ist bei Fotos ohnehin der Normalfall. */ aspect-ratio: 3 / 2; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-muted); text-decoration: none; isolation: isolate; } .media-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 400ms ease; } .media-card:hover .media-card__image { transform: scale(1.04); } .media-card:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* Ohne Foto bleibt das Band stehen und die Flaeche bekommt einen Verlauf — eine halb leere Kachel zwischen bebilderten waere auffaelliger als eine ohne Foto. */ .media-card--blank { background: linear-gradient( 135deg, color-mix(in srgb, var(--color-primary) 30%, transparent), var(--color-bg-muted) ); } .media-card__band { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; /* Vorher 4px zwischen Kleinzeile und Titel und 16px zum unteren Rand — der Text klebte am Kachelboden. */ gap: var(--space-2); padding: var(--space-5) var(--space-5) var(--space-6); background: color-mix(in srgb, var(--color-primary) 85%, transparent); color: #fff; } .media-card__band::before { content: ""; position: absolute; inset: auto 0 100% 0; height: var(--space-12); background: linear-gradient( to top, color-mix(in srgb, var(--color-primary) 85%, transparent), transparent ); pointer-events: none; } .media-card__meta { font-size: var(--text-sm); 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-xl); font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; text-wrap: balance; } @media (prefers-reduced-motion: reduce) { .media-card__image { transition: none; } .media-card:hover .media-card__image { transform: none; } } /* ---- Kontaktseite und Formular ------------------------------------------ Zwei Spalten: links die Erreichbarkeit, rechts das Formular. Wer lieber anruft, findet die Nummer sofort, statt sich durch ein Formular zu arbeiten, das er gar nicht benutzen will. ------------------------------------------------------------------------ */ .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 { margin: 0 0 var(--space-4); font-size: var(--text-lg); } .contact-details h2 + .contact-list { margin-bottom: var(--space-8); } .contact-list { margin: 0; } .contact-list__row + .contact-list__row { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--color-border); } .contact-list dt { color: var(--color-text-muted); font-size: var(--text-sm); } .contact-list dd { margin: var(--space-1) 0 0; } .contact-list dd a { color: var(--color-primary); } .contact-form h2 { margin: 0 0 var(--space-6); font-size: var(--text-lg); } .contact-form__note { margin-top: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); } /* ---- Das Formular selbst ------------------------------------------------ */ .lead-form__form { display: flex; flex-direction: column; gap: var(--space-5); } .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 { 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; font-size: var(--text-base); } .lead-form__field textarea { resize: vertical; min-height: 9rem; } .lead-form__field input:focus-visible, .lead-form__field select:focus-visible, .lead-form__field textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); } /* Der Honigtopf. Nicht display:none — manche Bots überspringen genau das. Aus dem Bild geschoben, aus der Tastaturreihenfolge genommen und für Vorleseprogramme versteckt. */ .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; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; accent-color: var(--color-primary); } .lead-form__consent a { 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) 8%, transparent); } .lead-form__errors { margin-bottom: var(--space-6); padding: var(--space-4) var(--space-6); border: 1px solid #b91c1c; border-radius: var(--radius-md); background: color-mix(in srgb, #b91c1c 8%, transparent); 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); } /* ---- Blockarten im Beitrag ------------------------------------------------ Text mit Bild, Merkmale, Oeffnungszeiten, Galerie, Akkordeon. Jede Art hat ihr eigenes Partial unter themes/base/partials/blocks/ — das Markup ist fuer beide Themes dasselbe, das Aussehen nicht. --------------------------------------------------------------------------- */ /* Text mit Bild */ .block-media { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-items: start; } @media (min-width: 48rem) { .block-media { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: var(--space-8); } /* Nur die Spaltenfolge tauschen, nicht die Reihenfolge im Markup: der Text bleibt fuer Vorleseprogramme und ohne CSS immer zuerst. */ .block-media--reverse .block-media__text { order: 2; } .block-media--reverse .block-media__image { order: 1; } } .block-media__text > :first-child { margin-top: 0; } .block-media__text > :last-child { margin-bottom: 0; } .block-media__image { margin: 0; } .block-media__image img { width: 100%; height: auto; border-radius: var(--radius-md); } /* Merkmale */ .feature-boxes { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-4); margin: 0; } .feature-box { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg-muted); } .feature-box__label { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .feature-box__value { margin: 0; color: var(--color-text); font-family: var(--font-heading); font-size: var(--text-lg); font-weight: 700; line-height: 1.3; } /* Oeffnungszeiten */ .hours { display: table; width: 100%; margin: 0; border-collapse: collapse; } .hours th, .hours td { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: baseline; } .hours th { color: var(--color-text-muted); font-weight: 400; } .hours td { color: var(--color-text); font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; } .hours tr:last-child th, .hours tr:last-child td { border-bottom: 0; } /* Galerie */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; } .gallery__item { margin: 0; padding: 0; } .gallery__item::before { display: none; } .gallery__item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-sm); } /* Akkordeon — dieselben Aufklapper wie bei den haeufigen Fragen einer Inhaltsseite, damit ein Besucher sie nicht zweimal lernen muss. */ .accordion .faq-item { border-bottom: 1px solid var(--color-border); } .accordion .faq-item:first-child { border-top: 1px solid var(--color-border); } .accordion .faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4) 0; color: var(--color-text); font-family: var(--font-heading); font-weight: 600; cursor: pointer; list-style: none; } .accordion .faq-item summary::-webkit-details-marker { display: none; } .accordion .faq-item summary::after { content: "+"; flex: 0 0 auto; color: var(--color-primary); font-size: var(--text-xl); line-height: 1; transition: transform 200ms ease; } .accordion .faq-item[open] summary::after { transform: rotate(45deg); } .accordion .faq-item summary:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } .accordion .faq-item > p { margin: 0 0 var(--space-4); color: var(--color-text-muted); } /* Die Blockarten stehen im Fliesstext-Container und duerfen dessen Listenpunkte nicht erben. */ .prose .feature-boxes li, .prose .gallery li { margin: 0; padding-left: 0; } .prose .feature-boxes li::before, .prose .gallery li::before { content: none; } /* ---- Kontakt-Einladung ---------------------------------------------------- Die Karte, die nach einem Moment unten aufklappt. Bewusst kein Modal: sie dunkelt nichts ab, faengt keinen Fokus und liegt neben dem Inhalt statt davor. Wer sie schliesst, bekommt sie nicht wieder. Auf schmalen Geraeten sitzt sie am unteren Rand ueber die volle Breite — eine Karte, die dort in einer Ecke klebt, verdeckt genau den Daumenbereich. --------------------------------------------------------------------------- */ .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-md); background: var(--color-bg); box-shadow: var(--shadow-md); /* Anfangszustand. Die Klasse is-visible setzt beides zurueck. */ opacity: 0; transform: translateY(var(--space-4)); transition: opacity 260ms ease, transform 260ms ease; } @media (min-width: 40rem) { .invite { inset: auto var(--space-6) var(--space-6) auto; } } .invite.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .invite { transition: none; transform: none; } } .invite__close { position: absolute; top: var(--space-2); right: var(--space-2); display: inline-flex; align-items: center; justify-content: center; /* 2,5rem, damit der Knopf unter der Fingerkuppe sicher zu treffen ist. */ width: 2.5rem; height: 2.5rem; border: 0; border-radius: 50%; background: transparent; color: var(--color-text-muted); font-size: 1.25rem; line-height: 1; cursor: pointer; } .invite__close:hover { background: var(--color-bg-muted); color: var(--color-text); } .invite__close:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; } .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: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); } .invite__avatar--blank svg { width: 1.5rem; height: 1.5rem; } .invite__identity { min-width: 0; } .invite__name { margin: 0; color: var(--color-text); font-family: var(--font-heading); font-weight: 700; line-height: 1.25; } .invite__role { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.35; } .invite__text { margin: 0 0 var(--space-5); color: var(--color-text-muted); line-height: 1.55; } .invite__action { width: 100%; } /* ---- Handlungsaufforderungen ---------------------------------------------- Eine Schaltflaeche muss man als solche erkennen, bevor man sie liest. Drei Groessen und ein sichtbarer Fokusring — der fehlte bisher ganz, womit die Seite mit der Tastatur nicht bedienbar war. --------------------------------------------------------------------------- */ .button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; } /* Gross: die eine Aufforderung, auf die eine Seite hinauslaeuft. */ .btn--lg, .button--lg { min-height: 3.25rem; padding-inline: var(--space-8); font-size: var(--text-base); } /* Der Abschluss einer Seite. Eine Aufforderung, nicht drei nebeneinander — wer die Wahl hat, entscheidet sich haeufiger fuer nichts. */ .cta-panel { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-muted); } @media (min-width: 48rem) { .cta-panel { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-8); padding: var(--space-8) var(--space-12); } } .cta-panel__text { max-width: 40rem; } .cta-panel__text > :first-child { margin-top: 0; } .cta-panel__text > :last-child { margin-bottom: 0; } /* ---- Rechtstexte ---------------------------------------------------------- Impressum und Datenschutz. Schmale Lesespalte, klare Abstufung zwischen den Abschnitten — es sind Dokumente, keine Marketingseiten. Wer hier landet, sucht eine bestimmte Angabe und will sie schnell finden. --------------------------------------------------------------------------- */ .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 p { margin: 0 0 var(--space-4); } .legal__body ul { margin: 0 0 var(--space-4); padding-left: var(--space-6); } .legal__body li { margin-bottom: var(--space-2); } .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); } /* ---- WhatsApp-Chat -------------------------------------------------------- Der gruene Knopf unten rechts und das Fenster, das er aufklappt. Bewusst nicht in den Tenant-Farben: WhatsApp erkennt man an Gruen und an dem Sprechblasen-Zeichen, bevor man ein Wort gelesen hat. Ein Knopf in der Hausfarbe des Kunden verliert genau diese Erkennbarkeit. Die Farben stehen deshalb fest und kommen nicht aus den Tokens. Ohne JavaScript ist der Knopf ein Link direkt nach WhatsApp und das Fenster bleibt weg — es traegt hidden und wird erst vom Skript aufgedeckt. --------------------------------------------------------------------------- */ .wa { --wa-green: #25d366; --wa-green-dark: #1da851; --wa-head: #1f2c34; --wa-paper: #ece5dd; --wa-bubble: #005c4b; position: fixed; z-index: 70; left: var(--space-4); bottom: var(--space-4); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); } @media (min-width: 40rem) { .wa { left: var(--space-6); bottom: var(--space-6); } } .wa__launcher { display: grid; place-items: center; /* 3,5rem: gross genug fuer die Fingerkuppe, klein genug, um auf dem Telefon nicht ueber dem Inhalt zu stehen. */ width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--wa-green); color: #fff; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22); text-decoration: none; cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; } .wa__launcher:hover { background: var(--wa-green-dark); transform: translateY(-2px); } .wa__launcher:focus-visible { outline: 3px solid var(--wa-head); outline-offset: 3px; } .wa__launcher-icon svg { display: block; width: 1.875rem; height: 1.875rem; } .wa__panel { width: min(20rem, calc(100vw - 2 * var(--space-4))); overflow: hidden; border-radius: 0.875rem; background: var(--wa-paper); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); /* Anfangszustand. Die Klasse is-open auf dem Elternelement setzt beides zurueck. */ opacity: 0; transform: translateY(0.75rem) scale(0.98); transform-origin: bottom left; transition: opacity 200ms ease, transform 200ms ease; } .wa.is-open .wa__panel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .wa__launcher, .wa__panel { transition: none; transform: none; } .wa__launcher:hover { transform: none; } } .wa__head { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--wa-head); color: #fff; } .wa__avatar { flex: 0 0 auto; width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; } .wa__avatar--blank { display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: #fff; } .wa__avatar--blank svg { width: 1.25rem; height: 1.25rem; } .wa__identity { flex: 1 1 auto; min-width: 0; } .wa__name { margin: 0; overflow: hidden; color: #fff; font-size: 0.9375rem; font-weight: 700; line-height: 1.3; text-overflow: ellipsis; white-space: nowrap; } .wa__status { margin: 0; color: rgba(255, 255, 255, 0.68); font-size: 0.75rem; line-height: 1.3; } .wa__close { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; /* Zwei Zentimeter Ziel, sonst trifft der Daumen daneben und schliesst stattdessen gar nichts. */ width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: transparent; color: rgba(255, 255, 255, 0.75); font-size: 1.25rem; line-height: 1; cursor: pointer; } .wa__close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .wa__close:focus-visible { outline: 2px solid var(--wa-green); outline-offset: -2px; } .wa__body { padding: var(--space-5) var(--space-4) var(--space-2); } .wa__bubble { margin: 0; padding: var(--space-3) var(--space-4); /* Eine eckige Ecke oben links statt einer angesetzten Spitze: dieselbe Lesart wie in WhatsApp, aber ohne zweites Element im Baum. */ border-radius: 0.75rem; border-top-left-radius: 0.125rem; background: var(--wa-bubble); color: #fff; font-size: 0.9375rem; line-height: 1.5; } .wa__time { float: right; margin: 0.4rem 0 0 var(--space-3); color: rgba(255, 255, 255, 0.6); font-size: 0.6875rem; } .wa__foot { padding: var(--space-3) var(--space-4) var(--space-4); } .wa__cta { display: block; padding: var(--space-3) var(--space-4); border-radius: 0.5rem; background: var(--wa-green); color: #fff; font-size: 0.9375rem; font-weight: 700; text-align: center; text-decoration: none; transition: background-color 160ms ease; } .wa__cta:hover { background: var(--wa-green-dark); color: #fff; } .wa__cta:focus-visible { outline: 2px solid var(--wa-head); outline-offset: 2px; } /* Der Chat sitzt links, die Kontakt-Einladung rechts — nebeneinander stoeren sie sich nicht. Nur auf schmalen Geraeten liegt die Einladung ueber die volle Breite am unteren Rand und damit auf dem Knopf. Dort rueckt sie um dessen Hoehe plus Abstand nach oben. */ .invite--stacked { bottom: calc(3.5rem + var(--space-4) + var(--space-3)); } @media (min-width: 40rem) { .invite--stacked { bottom: var(--space-6); } } /* Auf dem Telefon liegen beide ueber die volle Breite am unteren Rand. Steht das Chatfenster offen, tritt die Einladung so lange zurueck — zwei Karten uebereinander sind keine Auswahl, sondern ein Durcheinander. Browser ohne :has() zeigen weiterhin beide, was niemanden aussperrt. */ @media (max-width: 39.999rem) { body:has(.wa.is-open) .invite { opacity: 0; pointer-events: none; } } /* ---- Hauptnavigation aus dem CMS ------------------------------------------ Aufklappen ueber
/ statt ueber ein Skript: der Browser kann das von sich aus, mit Tastatur und mit Vorleseprogramm. Diese Datei nimmt dem Element nur das Dreieck und legt die Liste als Flyout darueber. Auf schmalen Geraeten bleibt es das, was
ohnehin ist — eine Liste, die aufklappt. Kein Flyout, kein Ueberlagern: dafuer ist kein Platz. --------------------------------------------------------------------------- */ .main-nav__list, .site-nav__list { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .menu__item { position: relative; margin: 0; padding: 0; } .menu__item::before { content: none; } /* Der Aufklapppunkt. list-style und ::-webkit-details-marker nehmen das voreingestellte Dreieck weg — wir setzen ein eigenes. */ .menu__summary { display: inline-flex; align-items: center; gap: 0.35em; cursor: pointer; list-style: none; color: var(--color-text-secondary); font-size: var(--text-sm); font-weight: 500; transition: color var(--duration-fast, 150ms) var(--ease-standard, ease); } .menu__summary::-webkit-details-marker { display: none; } .menu__summary:hover, .menu__dropdown[open] > .menu__summary { color: var(--color-text); } .menu__summary:focus-visible { outline: 2px solid var(--color-accent, currentColor); outline-offset: 3px; border-radius: 2px; } .menu__chevron svg { display: block; width: 0.9em; height: 0.9em; transition: transform 160ms ease; } .menu__dropdown[open] .menu__chevron svg { transform: rotate(180deg); } .menu__children { margin: 0; padding: 0; list-style: none; } .menu__children li { margin: 0; padding: 0; } .menu__children li::before { content: none; } .menu__children a { display: block; padding: var(--space-2) 0; color: var(--color-text-secondary); font-size: var(--text-sm); } .menu__children a:hover { color: var(--color-text); } /* Ab Tablet legt sich die Unterliste als Flyout ueber den Inhalt. Darunter bleibt sie im Fluss und schiebt den Rest nach unten. */ @media (min-width: 48rem) { .menu__dropdown[open] > .menu__children { position: absolute; top: calc(100% + var(--space-3)); left: 0; z-index: 80; min-width: 14rem; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md, 0.5rem); background: var(--color-bg-raised, var(--color-bg, #fff)); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0, 0, 0, 0.18)); } /* Der Weg von der Beschriftung zur Liste fuehrt ueber eine Luecke. Ohne diese Bruecke klappt das Menue zu, sobald der Zeiger sie ueberquert. */ .menu__dropdown[open] > .menu__children::before { content: ''; position: absolute; inset: calc(-1 * var(--space-3)) 0 100% 0; } .menu__children a { white-space: nowrap; } } /* Im Mobilmenue stehen die Unterpunkte eingerueckt unter ihrem Punkt. */ .mobile-nav__list { display: flex; flex-direction: column; gap: var(--space-1, 0.25rem); margin: 0; padding: 0; list-style: none; } .mobile-nav__list .menu__children { padding-left: var(--space-4); border-left: 2px solid var(--color-border); } /* ---- 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); } /* ---- Katalog, Artikel und Anfragekorb ----------------------------------- Zum Modul «catalog». Steht in site.css und nicht in einer eigenen Datei: es gibt keinen Build-Schritt, und eine zweite Datei waere ein zweiter Abruf auf jeder Seite — auch auf denen ohne Katalog. ------------------------------------------------------------------------ */ .catalog-toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-6); } .catalog-search { flex: 1 1 22rem; } .catalog-search__label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); } .catalog-search__row { display: flex; gap: var(--space-2); } .catalog-search__input { flex: 1 1 auto; min-width: 0; 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; } .catalog-search__input:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; } .catalog-search__submit, .catalog-cart-link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-6); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); font-size: var(--text-base); font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; } .catalog-search__submit { background: var(--color-primary); color: var(--color-primary-contrast); } .catalog-cart-link { background: transparent; color: var(--color-primary); } .catalog-cart-link__count { display: inline-grid; place-items: center; min-width: 1.5rem; height: 1.5rem; padding: 0 0.35rem; border-radius: 999px; background: var(--color-primary); color: var(--color-primary-contrast); font-size: var(--text-sm); font-variant-numeric: tabular-nums; } .catalog-groups { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-8); } .catalog-groups__item { padding: var(--space-2) var(--space-4); border: 1px solid var(--color-border); border-radius: 999px; color: var(--color-text); font-size: var(--text-sm); text-decoration: none; } .catalog-groups__item--current { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-primary-contrast); } .catalog__result, .catalog__notice { margin: 0 0 var(--space-6); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); background: var(--color-bg-muted); font-size: var(--text-sm); } .catalog__empty { padding: var(--space-12) 0; color: var(--color-text-muted); text-align: center; } /* Kachelraster */ .catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: var(--space-6); margin: 0 0 var(--space-8); padding: 0; list-style: none; } .product-card { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); } .product-card__media { display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-bg-muted); } .product-card__media img, .product-card__placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } .product-card__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: var(--space-2); padding: var(--space-4); } .product-card__group { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); } .product-card__title { margin: 0; font-family: var(--font-heading); font-size: var(--text-lg); line-height: 1.35; } .product-card__link { color: inherit; text-decoration: none; } /* Die ganze Kachel anklickbar, ohne den Knopf darin zu verschlucken: die aufgespannte Flaeche liegt unter dem Formular, nicht darueber. */ .product-card__link::after { content: ""; position: absolute; inset: 0; } .product-card__form { position: relative; z-index: 1; margin-top: auto; } .product-card__summary { margin: 0; color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.55; } .product-card__price { margin: 0; font-weight: 700; } .product-card__button { width: 100%; padding: var(--space-2) var(--space-4); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: transparent; color: var(--color-primary); font: inherit; font-weight: 600; cursor: pointer; } .product-card__button:hover, .product-card__button:focus-visible { background: var(--color-primary); color: var(--color-primary-contrast); } /* Artikelseite */ .breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-6); font-size: var(--text-sm); color: var(--color-text-muted); } .product { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-8); margin-bottom: var(--space-12); } @media (min-width: 48rem) { .product { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .product__media img, .product__placeholder { display: block; width: 100%; height: auto; border-radius: var(--radius-md); background: var(--color-bg-muted); } .product__placeholder { aspect-ratio: 4 / 3; } .product__gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: var(--space-2); margin: var(--space-2) 0 0; padding: 0; list-style: none; } .product__gallery img { width: 100%; height: auto; border-radius: var(--radius-sm); } .product__group { margin: 0 0 var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); } .product__title { margin: 0 0 var(--space-2); font-size: var(--text-2xl); line-height: 1.2; } .product__sku { margin: 0 0 var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); } .product__summary { margin: 0 0 var(--space-4); font-size: var(--text-lg); line-height: 1.6; } .product__price { margin: 0 0 var(--space-2); font-size: var(--text-xl); font-weight: 700; } .product__price-note { margin: 0 0 var(--space-6); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.5; } .product__form { display: flex; flex-wrap: wrap; align-items: end; gap: var(--space-3); } .product__quantity-label { width: 100%; font-size: var(--text-sm); font-weight: 600; color: var(--color-text-muted); } .product__quantity { width: 6rem; padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; } .product__button { padding: var(--space-3) var(--space-6); border: 1px solid var(--color-primary); border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-primary-contrast); font: inherit; font-weight: 600; cursor: pointer; } .product-specs { width: 100%; border-collapse: collapse; } .product-specs th, .product-specs td { padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; } .product-specs th { width: 40%; color: var(--color-text-muted); font-weight: 600; } .catalog-related { margin-top: var(--space-12); } /* Anfragekorb */ .cart { width: 100%; margin-bottom: var(--space-6); border-collapse: collapse; } .cart th, .cart td { padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; } .cart thead th { font-size: var(--text-sm); color: var(--color-text-muted); } .cart__product a { color: inherit; } .cart__sku { display: block; color: var(--color-text-muted); font-size: var(--text-sm); font-weight: 400; } .cart__quantity-form { display: flex; gap: var(--space-2); } .cart__quantity input { width: 5rem; padding: var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text); font: inherit; } .cart__quantity button, .cart__remove button { padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: transparent; color: var(--color-text); font: inherit; font-size: var(--text-sm); cursor: pointer; } .cart tfoot th, .cart tfoot td { font-weight: 700; } .cart__note { margin-bottom: var(--space-12); color: var(--color-text-muted); font-size: var(--text-sm); line-height: 1.6; } /* Kartenraster des Blocksystems */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); gap: var(--space-6); margin: 0; padding: 0; list-style: none; } .card-grid__item { position: relative; padding: var(--space-6); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg); } .card-grid__image { width: 100%; height: auto; margin-bottom: var(--space-4); border-radius: var(--radius-sm); } .card-grid__title { margin: 0 0 var(--space-2); font-size: var(--text-lg); line-height: 1.35; } .card-grid__link { color: inherit; text-decoration: none; } .card-grid__link::after { content: ""; position: absolute; inset: 0; } .card-grid__text { margin: 0; color: var(--color-text-muted); line-height: 1.6; } .card-grid__more { margin: var(--space-3) 0 0; color: var(--color-primary); font-size: var(--text-sm); font-weight: 600; } /* Nur fuer Vorleseprogramme */ .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }