/* =========================================================================
   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 <head> 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-5: 1.25rem;
    --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);
}

/* Suchfeld im Kopf (nur wenn es Beiträge gibt, siehe header.blade.php) und
   auf der Ergebnisseite /suche. */
.site-search {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.site-search__input {
    border: 1px solid var(--color-border);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    font-size: var(--text-sm);
    background: var(--color-bg);
    color: var(--color-text);
    width: 11rem;
    max-width: 40vw;
}

.site-search__button {
    border: 0;
    background: transparent;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    padding: 0.4rem;
}

.search-form {
    display: flex;
    gap: 0.5rem;
    margin-block-start: var(--space-4);
    max-width: 32rem;
}

.search-form__input {
    flex: 1;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 0.6rem 0.9rem;
    font-size: var(--text-base);
    background: var(--color-bg);
    color: var(--color-text);
}

.search-form__button {
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-md);
    padding: 0.6rem 1.1rem;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    cursor: pointer;
    font-size: var(--text-sm);
}

.search-form__count {
    color: var(--color-text-muted);
    margin-block-end: var(--space-4);
}

/* ---- 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;
}

/* <picture> waehlt nur das Bildformat aus und soll im Layout nicht mitreden.
   Ohne das loest ein height: 100% am <img> 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;
    /* Je Webseite ueberschreibbar (ThemeTokens --color-heading); ohne
       Eintrag die Sekundaerfarbe wie bisher. */
    color: var(--color-heading, 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 {
    /* Klebt die Leiste beim Scrollen? Entscheidet die Webseite im CMS unter
       „Domain" (tenants.header_sticky, ausgegeben als --header-position von
       ThemeTokens). Ohne die Variable — Migration noch nicht durch — bleibt
       es beim bisherigen Verhalten dieses Stylesheets: mitscrollend.
       top und z-index sind bei position: static wirkungslos und duerfen
       deshalb unbedingt dastehen. */
    position: var(--header-position, static);
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--color-border);
    /* Hintergrund und Schriftfarbe der Kopfzeile sind je Webseite
       ueberschreibbar (ThemeTokens). Ohne Eintrag bleibt es beim hellen
       Grund und der bisherigen Textfarbe. */
    background: var(--color-header-bg, var(--color-bg));
    color: var(--color-header-ink, inherit);
}

.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-header-ink, var(--color-secondary));
}

.brand__logo {
    /* Grundhöhe 2.5rem. Je Webseite steuerbar über zwei Variablen aus dem
       <head> (siehe ThemeTokens): --logo-height ist eine feste Pixelhöhe und
       gewinnt, wenn gesetzt; sonst skaliert --logo-scale die Grundhöhe auf
       klein/mittel/groß. Fehlt beides, bleibt es bei 2.5rem.

       Feste Höhe steht auf height UND max-height: nur so wird ein zu kleines
       Logo hochskaliert statt bloß gedeckelt. Ohne --logo-height bleibt
       height auto — dann deckelt max-height wie bisher, ohne zu strecken. */
    height: var(--logo-height, auto);
    max-height: var(--logo-height, calc(2.5rem * var(--logo-scale, 1)));
    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-header-ink, var(--color-text-muted));
    font-size: var(--text-sm);
    text-decoration: none;
}

/* 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. */
.site-nav a:hover,
.site-nav a[aria-current="page"] {
    color: var(--color-header-ink, var(--color-secondary));
}

.site-nav a:hover {
    text-decoration: underline;
}

/* ---- Aufklappmenue fuer schmale Bildschirme ----------------------------
   Bedient von assets/js/nav-toggle.js (data-nav am <header>), dieselbe Datei
   wie in den aufsetzenden Themes. Ohne das standen die Menuepunkte auf dem
   Telefon als mehrzeilige Liste im Kopf und schoben den Inhalt nach unten.

   Das Menue bleibt im Fluss (flex-basis: 100% in der umbrechenden Kopfzeile)
   statt absolut unter der Leiste zu haengen: .site-header traegt
   position: var(--header-position, static), und bei static haette ein
   absolut gesetztes Menue am Viewport statt an der Kopfzeile geklebt. */

.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-text));
    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;
    }

    .site-nav {
        flex-basis: 100%;
        display: none;
        /* Ans Ende der umbrechenden Kopfzeile, unabhaengig davon, wo das
           <nav> im Markup steht: im Basis-Theme kommt es vor der Suche, bei
           fettyhelper vor dem «Einloggen»-Knopf. Ohne das klappte das Menue
           oberhalb der Schaltflaeche auf, die es gerade geoeffnet hat, und
           schob sie beim Oeffnen nach unten weg. */
        order: 1;
        /* Ein langes Menue auf einem kurzen Telefon soll scrollen und nicht
           die ganze Seite nach unten schieben. */
        max-height: 70vh;
        overflow-y: auto;
        padding-bottom: var(--space-2);
    }

    .site-header[data-nav-open="true"] .site-nav {
        display: block;
    }

    .site-nav ul {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-nav > ul > li + li {
        border-top: 1px solid var(--color-border);
    }

    .site-nav a {
        display: block;
        padding: var(--space-3) 0;
        font-size: var(--text-base);
    }
}

/* ---- 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);
}

/* Optionale Schriftfarbe einer Sektion (CMS-Feld "Schriftfarbe"): kommt als
   --block-ink am <section> an und faerbt Ueberschrift und Text. */
.section--inked,
.section--inked h2 {
    color: var(--block-ink);
}

.section--inked a {
    color: var(--block-ink);
}

/* ---- Einzelseite ------------------------------------------------------- */

.page {
    padding-block: var(--space-16);
}

.page__header {
    max-width: 62ch;
}

.page__intro {
    font-size: var(--text-lg);
    color: var(--color-text-muted);
}

/* Optionale Schriftfarbe der Seite (heading_text_color in standard.php) —
   dieselbe Mechanik wie bei den Blöcken, siehe InkStyles. */
.page__header--inked h1,
.page__header--inked .page__intro {
    color: var(--block-ink);
}

.page__image {
    margin-block: var(--space-8);
}

.page__image img {
    border-radius: var(--radius-md);
}

/* ---- Doku (/doku) -------------------------------------------------------

   Zweispaltiges Layout: Seitenleiste links, Inhalt rechts. Auf schmalen
   Bildschirmen untereinander — die Seitenleiste steckt dort in einem
   <details> (siehe partials/doku-sidebar.blade.php) und klappt zusammen. */

.doku {
    padding-block: var(--space-12);
}

/* Die Uebersicht unter /doku: ein Kachelraster, kein Inhaltsverzeichnis.
   Fuer die meisten Besucher ist das die erste Doku-Seite ueberhaupt — eine
   Aufzaehlung mit zwei Eintraegen sah dort aus wie eine Baustelle. */

.doku-overview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-6);
    margin: var(--space-8) 0 0;
    padding: 0;
    list-style: none;
}

.doku-overview__card {
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: color-mix(in srgb, var(--color-text) 3%, var(--color-bg));
    transition: border-color 160ms ease, transform 160ms ease;
}

.doku-overview__card:hover {
    border-color: color-mix(in srgb, var(--color-primary) 55%, var(--color-border));
    transform: translateY(-2px);
}

.doku-overview__title {
    margin: 0 0 var(--space-2);
    font-size: var(--text-lg);
    line-height: 1.3;
}

/* Die ganze Kachel ist anklickbar, ohne dass das Markup zum Link-Sumpf
   wird: der Verweis liegt auf der Ueberschrift, die Flaeche darum
   vergroessert ihn. Dieselbe Loesung wie beim Kartenraster in blocks.css.
   Die Unterseiten-Verweise liegen darueber und bleiben einzeln klickbar. */
.doku-overview__card {
    position: relative;
}

.doku-overview__title a {
    color: inherit;
    text-decoration: none;
}

.doku-overview__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}

.doku-overview__text {
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.6;
}

.doku-overview__pages {
    position: relative;
    z-index: 1;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin: var(--space-4) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--text-sm);
}

.doku-overview__pages a {
    color: var(--color-primary);
}

.doku__layout {
    display: grid;
    grid-template-columns: 16rem 1fr;
    gap: var(--space-12);
    align-items: start;
}

/* Der Blockrumpf steht sonst auf Lesebreite und mittig in seiner Karte
   (siehe .content-card__body) — richtig auf einer breiten Seite, falsch
   neben einer Seitenleiste: dort ist die Spalte schon schmal, und der Text
   ruecke zusaetzlich von beiden Seiten ein, waehrend die Ueberschrift
   darueber am linken Rand bleibt. In der Doku deshalb linksbuendig. */
.doku__layout .content-card__body {
    margin-inline: 0;
}

@media (max-width: 56rem) {
    .doku__layout {
        grid-template-columns: 1fr;
    }
}

.doku-sidebar {
    position: sticky;
    top: var(--space-6);
}

@media (max-width: 56rem) {
    .doku-sidebar {
        position: static;
    }
}

.doku-sidebar__tree,
.doku-sidebar__tree ul {
    margin: var(--space-2) 0 0;
    padding: 0;
    list-style: none;
}

.doku-sidebar__tree > li {
    margin-bottom: var(--space-2);
}

.doku-sidebar__tree a {
    display: block;
    padding: 0.3rem 0;
    color: var(--color-text-muted);
    text-decoration: none;
}

.doku-sidebar__tree > li > a {
    color: var(--color-text);
    font-weight: 700;
}

.doku-sidebar__tree ul {
    padding-left: var(--space-4);
    border-left: 1px solid var(--color-border);
}

.doku-sidebar__tree a[aria-current="page"] {
    color: var(--color-primary);
    font-weight: 700;
}

.doku-sidebar__toggle summary {
    cursor: pointer;
    font-weight: 700;
}

@media (min-width: 56.01rem) {
    .doku-sidebar__toggle summary {
        display: none;
    }
}

.doku__breadcrumb {
    margin-bottom: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.doku__breadcrumb a {
    color: inherit;
}

.doku__breadcrumb span[aria-hidden] {
    margin: 0 var(--space-2);
}

.doku__title {
    margin: 0 0 var(--space-8);
}

.doku__pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4);
    margin-top: var(--space-12);
}

.doku__pager-link {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
}

.doku__pager-link--next {
    grid-column: 2;
    text-align: right;
}

.doku__pager-label {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.doku__pager-title {
    font-weight: 700;
}

@media (max-width: 30rem) {
    .doku__pager {
        grid-template-columns: 1fr;
    }

    .doku__pager-link--next {
        grid-column: 1;
        text-align: left;
    }
}

.doku-overview__section {
    margin-bottom: var(--space-8);
}

.doku-overview__section ul {
    margin: var(--space-2) 0 0;
    padding-left: var(--space-6);
}

/* ---- 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);
    /* Fläche und Schrift der Fußzeile sind je Webseite überschreibbar
       (ThemeTokens). Ohne Eintrag bleibt es beim gedämpften Grund und der
       gedämpften Textfarbe. Die Verweise darin erben (color: inherit) und
       folgen damit von selbst. */
    background: var(--color-footer-bg, var(--color-bg-muted));
    color: var(--color-footer-ink, var(--color-text-muted));
    font-size: var(--text-sm);
}

.site-footer__inner,
.site-footer__stack {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.site-footer p {
    margin: 0;
}

/* Logo, Textabsatz und Spalten nebeneinander: links Logo und Text
   übereinander, rechts daneben die gepflegten Spalten. Auf schmalen
   Bildschirmen untereinander, in derselben Reihenfolge. */
.site-footer__top {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

@media (min-width: 48rem) {
    .site-footer__top {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-12);
    }
}

/* Logo immer über dem Text, nie daneben. */
.site-footer__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-3);
    flex: 0 0 auto;
}

@media (min-width: 48rem) {
    .site-footer__intro {
        max-width: 18rem;
    }
}

.site-footer__logo {
    max-height: 3rem;
    width: auto;
}

.site-footer__text {
    max-width: 60ch;
}

/* Die gepflegten Spalten. Die Zahl der Spalten nebeneinander kommt als
   Modifikatorklasse aus dem Blade (site-footer__columns--1/2/3) — die
   Content-Security-Policy lässt kein inline-style zu, und ein fester Wert
   im Stylesheet bleibt für alle Webseiten cachebar. */
.site-footer__columns {
    flex: 1 1 auto;
    display: grid;
    gap: var(--space-6) var(--space-8);
    grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
    .site-footer__columns--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .site-footer__columns--3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Etwas kräftiger als der übrige Fußzeilentext. Mit eigener
   Footer-Schriftfarbe gibt es diese Abstufung nicht mehr — dann trägt das
   Fettgewicht allein. */
.site-footer__column-title {
    margin-bottom: var(--space-2);
    font-weight: 700;
    color: var(--color-footer-ink, var(--color-text));
}

.site-footer__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__list a {
    color: inherit;
}

/* Die Schlusszeile: Jahr links, Pflichtangaben rechts — wie der Fußbereich
   vor den gepflegten Spalten aussah. */
.site-footer__bottom {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    justify-content: space-between;
}

.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;
    }

    /* Webseiteneinstellung «Inhaltsverzeichnis klebt beim Scrollen» aus:
       die Spalte läuft mit dem Text mit und beginnt damit auf Höhe des
       Beitragsbildes. Siehe tenants.toc_sticky. */
    .post-layout--toc-flow .post-aside {
        position: static;
        top: auto;
        max-height: none;
        overflow: visible;
    }
}

.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 {
        /* 16/9 statt 21/9: das breite Kinoformat wirkte auf dem Desktop wie
           ein flacher Streifen. Etwas mehr Hoehe gibt dem Titelbild Gewicht,
           ohne dass das Farbband mit dem Titel zu viel Platz frisst. */
        aspect-ratio: 16 / 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 <section>. Ohne dieses padding: 0 greift die
       allgemeine Regel fuer section und legt vier Leerzeilen ueber die
       Ueberschriftenleiste. */
    padding: 0;
    /* Mehr Luft zwischen den Bloecken: bei --space-8 standen die Karten so
       dicht, dass zwei aufeinanderfolgende Bloecke wie einer wirkten.
       --content-card-gap kommt je Webseite aus dem <head> (ThemeTokens);
       ohne Eintrag bleibt es bei --space-12. */
    margin-bottom: var(--content-card-gap, var(--space-12));
    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);
    /* Lesebreite fuer Fliesstext, aber mittig unter der vollbreiten
       Ueberschriftenleiste statt linksbuendig — sonst klebt der Text am
       linken Rand und rechts steht bis zu halbe Kartenbreite leer (auf der
       Startseite mit ihren Rubrik-Karten am deutlichsten). */
    max-width: 44rem;
    margin-inline: auto;
    color: var(--color-text);
    font-size: var(--text-lg);
    line-height: 1.75;
}

/* Ein Kartenraster traegt keinen Fliesstext und wirkte in 44rem
   eingezwaengt: sobald der Block ein card-grid enthaelt, nutzt der Rumpf die
   volle Kartenbreite und das Raster verteilt sich auf mehr Spalten statt in
   die Hoehe zu wachsen. Kein Breakpoint noetig — das Raster selbst
   (minmax(...)) faellt auf schmalen Fenstern von allein auf ein bis zwei
   Spalten zurueck. Dieselbe Loesung wie in webvanta.css fuers dortige
   Blocksystem. */
.content-card__body > .card-grid {
    max-width: none;
}

.content-card__body:has(.card-grid) {
    max-width: none;
}

.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;
}

/* ---- Schriftfarbe eines Blocks -------------------------------------------

   Optional: der Redakteur waehlt im CMS unter "Schriftfarbe" einen Hex-Wert.
   Er kommt als --block-ink am <section> an, die Klasse content-card--inked
   sitzt daneben. Gefaerbt werden Ueberschrift und Fliesstext; die farbige
   Flaeche einer Buehne und die Zahlen einer Kennzahlenreihe behalten ihre
   eigene Farbe.

   Der gefuellte Ueberschriftenbalken weicht dabei einer schlichten farbigen
   Ueberschrift: ein frei gewaehlter Ton auf der Primaerfarbe waere sonst
   haeufig unlesbar. */

.content-card--inked .content-card__heading {
    padding: var(--space-4) var(--space-6) 0;
    background: none;
    color: var(--block-ink);
}

.content-card--inked .content-card__body,
.content-card--inked .content-card__body p,
.content-card--inked .content-card__body li,
.content-card--inked .content-card__body h2,
.content-card--inked .content-card__body h3,
.content-card--inked .content-card__body h4,
.content-card--inked .content-card__body a {
    color: var(--block-ink);
}

.content-card--inked .content-card__body ul > li::before,
.content-card--inked .content-card__body ol > li::before {
    background: var(--block-ink);
    color: var(--block-ink);
}

.content-card--inked .content-card__body blockquote {
    border-left-color: var(--block-ink);
    color: var(--block-ink);
}

/* Im Editor gewählte Schriftfarbe für eine Textstelle. Der Editor legt sie als
   <span class="color" data-color="#…"> ab; der RichTextSanitizer ergänzt
   data-ink, und InkStyles setzt daraus --block-ink im Kopf-<style>. Ein
   style-Attribut wäre der einfachere Weg, aber die CSP verwirft es. */
.prose span[data-ink] {
    color: var(--block-ink);
}

/* ---- 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 {
    /* Kein Padding oben: die Ueberschrift "Auf einen Blick" soll auf derselben
       Hoehe beginnen wie das Beitragsbild, nicht durch den Innenabstand tiefer
       ansetzen. */
    padding: 0 var(--space-6) 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);
    /* Kleiner als eine Abschnittsueberschrift: das Verzeichnis ist eine
       Randspalte, seine Ueberschrift muss die Beitragsueberschriften nicht
       ueberbieten. Fettung und Schriftart tragen den Titelcharakter. */
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
}

.toc[open] .toc__heading {
    margin-bottom: var(--space-3);
}

@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__photo {
    flex: 0 0 auto;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-bg-muted);
}

.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;
}

/* ---- Autorenseite (/author/{slug}) ------------------------------------- */

.author-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 68ch;
    margin-inline: auto;
    margin-bottom: var(--space-12);
}

.author-head__photo,
.author-head__monogram {
    width: 6rem;
    height: 6rem;
    margin: 0 0 var(--space-4);
    border-radius: 50%;
    object-fit: cover;
}

.author-head__monogram {
    display: grid;
    place-items: center;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-family: var(--font-heading);
    font-size: var(--text-2xl);
    font-weight: 700;
}

.author-head__role {
    margin: 0;
    color: var(--color-text-muted);
}

.author-head__count {
    margin-top: var(--space-4);
    color: var(--color-text-muted);
    font-weight: 600;
}

/* ---- 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 <head> (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);
}

.button__icon {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto;
}

/* Eine Schaltflaeche im Fliesstext ist kein Textverweis: ohne diese beiden
   Zeilen faerbt die Regel fuer Verweise im Blockabschnitt die Beschriftung
   in die Primaerfarbe — und damit in die Farbe des Untergrunds. */
.prose .button--primary {
    color: var(--color-primary-contrast);
}

.prose .button--quiet {
    color: var(--color-secondary);
}

/* ---- 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);
}

/* ---- 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 <details>/<summary> 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 <details> 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.
   ------------------------------------------------------------------------ */

/* .block-media--stacked, .block-image--wide und .block-image--full stehen
   in blocks.css, nicht mehr hier — siehe deren Kopf. */

/* 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;
}

/* Nur fuer Vorleseprogramme */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* ---- Gezeichneter Platzhalter fuer Artikel ohne Bild --------------------- */

.product-placeholder {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    padding: 12%;
}

.product-placeholder svg {
    width: 100%;
    height: 100%;
    max-height: 14rem;
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.45;
}

/* ---- Warenkorb, Kasse und Bestellbestaetigung ---------------------------- */

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    margin-bottom: var(--space-16);
}

@media (min-width: 64rem) {
    .cart-layout {
        grid-template-columns: minmax(0, 1fr) 22rem;
    }
}

.cart-summary,
.checkout__summary {
    position: sticky;
    top: var(--space-6);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}

.cart-summary__heading {
    margin: 0 0 var(--space-4);
    font-size: var(--text-lg);
}

.cart-summary__list {
    margin: 0 0 var(--space-4);
}

.cart-summary__list > div {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
}

.cart-summary__list dt,
.cart-summary__list dd {
    margin: 0;
}

.cart-summary__list dt {
    color: var(--color-text-muted);
}

.cart-summary__total {
    margin-top: var(--space-2);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-lg);
    font-weight: 700;
}

.cart-summary__total dt {
    color: var(--color-text);
}

.cart-summary__note,
.cart-summary__hint,
.checkout__legal {
    margin: 0 0 var(--space-4);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.55;
}

.cart-summary__checkout,
.checkout__submit {
    display: block;
    width: 100%;
    padding: var(--space-4);
    border: 0;
    border-radius: 999px;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font: inherit;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.cart-summary__secondary,
.checkout__back {
    margin: var(--space-4) 0 0;
    text-align: center;
    font-size: var(--text-sm);
}

/* Kasse */

.checkout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
    margin-bottom: var(--space-16);
}

@media (min-width: 64rem) {
    .checkout {
        grid-template-columns: minmax(0, 1fr) 24rem;
    }
}

.checkout__section {
    margin-bottom: var(--space-12);
}

.checkout__section h2 {
    margin: 0 0 var(--space-5);
    font-size: var(--text-xl);
}

.checkout__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-4) var(--space-6);
}

.checkout__field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin: 0;
}

.checkout__field--wide {
    grid-column: 1 / -1;
}

.checkout__field label {
    font-size: var(--text-sm);
    font-weight: 600;
}

.checkout__field input,
.checkout__field select,
.checkout__field textarea {
    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;
}

.checkout__field input:focus-visible,
.checkout__field select:focus-visible,
.checkout__field textarea:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

.checkout__hint {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.checkout__toggle {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
}

.checkout__payments {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.checkout__payments li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.checkout__payments li:has(input:checked) {
    border-color: var(--color-primary);
    background: var(--color-bg-soft);
}

.checkout__payments label {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    cursor: pointer;
}

.checkout__payment-name {
    font-weight: 700;
}

.checkout__payment-text {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.checkout__items {
    margin: 0 0 var(--space-5);
    padding: 0 0 var(--space-4);
    border-bottom: 1px solid var(--color-border);
    list-style: none;
}

.checkout__items li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-2) 0;
    font-size: var(--text-sm);
}

.checkout__item-sku {
    display: block;
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.checkout__item-price {
    white-space: nowrap;
}

.checkout__consent {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    margin: 0 0 var(--space-5);
    font-size: var(--text-sm);
    line-height: 1.55;
}

/* Der Honigtopf: fuer Menschen unsichtbar, fuer einfache Bots verlockend.
   Nicht display:none — manche Bots ueberspringen genau das. */
.checkout__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Bestellbestaetigung */

.order-done {
    max-width: 44rem;
    margin: 0 auto var(--space-12);
    text-align: center;
}

.order-done__badge {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0 auto var(--space-5);
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-primary-contrast);
    font-size: 1.75rem;
    font-weight: 700;
}

.order-done__lead {
    font-size: var(--text-lg);
    line-height: 1.6;
    color: var(--color-text-muted);
}

.order-done__number {
    margin-top: var(--space-4);
}

.order-done__actions {
    margin-top: var(--space-8);
    text-align: center;
}

.order-table {
    width: 100%;
    border-collapse: collapse;
}

.order-table th,
.order-table td {
    padding: var(--space-3) var(--space-2);
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.order-table td:last-child,
.order-table th:not(:first-child) {
    text-align: right;
}

.order-table__sku {
    display: block;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: 400;
}

.order-table__total {
    font-weight: 700;
}

.order-table__tax td {
    border: 0;
    padding-top: 0;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: right;
}

/* Bankverbindung bei Vorkasse: Bezeichnung links, Wert daneben — eine IBAN
   rechtsbündig liest sich schlecht ab. */
.order-table--bank th {
    width: 1%;
    white-space: nowrap;
    color: var(--color-text-muted);
    font-weight: 400;
}

.order-table--bank td:last-child {
    text-align: left;
    font-variant-numeric: tabular-nums;
}

.order-addresses {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--space-6);
}

.order-addresses h3 {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.order-addresses p {
    margin: 0;
    line-height: 1.7;
}

/* Die vier Farbtoene (.showcase--soft/--primary/--accent/--plain) und
   .stat-row stehen in blocks.css, nicht mehr hier — siehe deren Kopf. */

/* ---- Speisekarte (Modul «Restaurant») ----------------------------------
   Die Fassung des Grunddesigns. Lily's bringt in lillys.css ihre eigene mit
   (Klassen ll-*); diese hier greift für jedes andere Theme. Aufbau wie auf
   der gedruckten Karte: Name links, Preis rechts, Punktlinie dazwischen. */

.menu-card__jump {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-block: var(--space-6) var(--space-8);
}

.menu-card__jump a {
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: var(--text-sm);
    text-decoration: none;
    color: var(--color-text);
}

.menu-card__jump a:hover {
    border-color: var(--color-primary);
}

.menu-card__section {
    margin-top: var(--space-12);
    scroll-margin-top: calc(var(--header-height) + var(--space-4));
}

.menu-card__section-head {
    max-width: var(--measure);
    margin-bottom: var(--space-4);
}

.menu-card__section-head h2 {
    margin: 0;
}

.menu-card__subtitle {
    margin: var(--space-1) 0 0;
    color: var(--color-text-muted);
    font-style: italic;
}

.menu-card__text {
    margin: var(--space-2) 0 0;
}

.menu-card__note,
.menu-card__empty {
    color: var(--color-text-muted);
    font-size: var(--text-sm);
}

.menu-card__empty {
    padding: var(--space-12) 0;
    text-align: center;
}

.menu-card__legend {
    margin-top: var(--space-12);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.menu-card__legend h2 {
    font-size: var(--text-base);
    margin: 0 0 var(--space-2);
}

.menu-card__cta {
    margin-top: var(--space-12);
    padding: var(--space-8);
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
    text-align: center;
}

.menu-card__cta p {
    margin: 0 0 var(--space-4);
    font-size: var(--text-lg);
}

.menu-dishes {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-dish {
    display: flex;
    gap: var(--space-4);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.menu-dish__media {
    flex: 0 0 5.5rem;
}

.menu-dish__image {
    width: 5.5rem;
    height: 5.5rem;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.menu-dish__body {
    flex: 1 1 auto;
    min-width: 0;
}

.menu-dish__line {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    margin: 0;
    font-weight: 600;
}

.menu-dish__number {
    margin-right: var(--space-1);
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

.menu-dish__spice {
    color: #c0392b;
    letter-spacing: 0.1em;
}

.menu-dish__dots {
    flex: 1 1 auto;
    min-width: var(--space-4);
    border-bottom: 1px dotted var(--color-border);
    transform: translateY(-0.3em);
}

.menu-dish__price {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.menu-dish__original,
.menu-dish__text,
.menu-dish__meta {
    margin: var(--space-1) 0 0;
}

.menu-dish__original {
    font-style: italic;
    color: var(--color-text-muted);
}

.menu-dish__variants {
    list-style: none;
    margin: var(--space-2) 0 0;
    padding: 0;
    max-width: 22rem;
}

.menu-dish__variants li {
    display: flex;
    justify-content: space-between;
    gap: var(--space-4);
}

.menu-dish__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
}

.menu-dish__tag {
    padding: 0 var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

/* Kleine Zeile über der Überschrift eines Blocks («Unsere Vision»). Feld
   «kicker» in App\Content\ContentBlocks, seit 01.10.2026. */
.content-card__kicker {
    margin: 0;
    padding: var(--space-4) var(--space-6) 0;
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

/* =========================================================================
   Modul «Artists & Portfolio»: Übersicht /artists und Profil /artists/{slug}
   (themes/base/artists/). Grundgestaltung; tattoostudio.css setzt darauf
   sein Aussehen. Seit 01.10.2026, Bauplan .claude/plans/tattoo-studio.md.
   ========================================================================= */

.button--outline {
    background: transparent;
    border-color: var(--color-primary);
    color: var(--color-text);
}

.button--outline:hover {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.artists-page__list,
.artist-profile__intro,
.artist-profile__portfolio {
    padding: var(--space-16) 0;
}

.artists-page__header,
.artist-profile__portfolio-header {
    margin-bottom: var(--space-12);
    text-align: center;
}

.artists-page__kicker,
.artist-profile__kicker {
    margin: 0 0 var(--space-2);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
}

.artists-page__heading {
    margin: 0;
}

.artist-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
    gap: var(--space-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.artist-list__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.artist-list__frame {
    display: block;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
}

.artist-list__frame picture {
    display: block;
    height: 100%;
}

.artist-list__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.artist-list__link:hover .artist-list__image,
.artist-list__link:focus-visible .artist-list__image {
    transform: scale(1.03);
}

.artist-list__placeholder,
.artist-profile__placeholder {
    display: grid;
    place-items: center;
    height: 100%;
    min-height: 16rem;
    font-family: var(--font-heading);
    font-size: 5rem;
    color: var(--color-text-muted);
}

.artist-list__name {
    font-family: var(--font-heading);
    font-size: 1.75rem;
}

.artist-list__role,
.artist-profile__role {
    margin: var(--space-1) 0 var(--space-3);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.artist-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.artist-tags__item {
    padding: var(--space-1) var(--space-2);
    border: 1px solid var(--color-border);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.artists-page__cta {
    padding: var(--space-16) 0;
    background: var(--color-bg-muted);
    text-align: center;
}

.artists-page__cta-inner {
    max-width: 44rem;
}

.artists-page__cta-text {
    color: var(--color-text-muted);
}

.artist-profile__grid {
    display: grid;
    gap: var(--space-12);
    align-items: center;
}

@media (min-width: 56rem) {
    .artist-profile__grid {
        grid-template-columns: 5fr 6fr;
    }
}

.artist-profile__photo {
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
}

.artist-profile__image {
    width: 100%;
    height: auto;
}

.artist-profile__name {
    margin: 0;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
}

.artist-profile__bio {
    margin: var(--space-6) 0;
    padding: 0;
    border: 0;
    color: var(--color-text-muted);
    font-style: italic;
}

.artist-profile__label {
    margin: 0 0 var(--space-2);
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.artist-profile__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    margin: var(--space-8) 0 0;
}

.artist-profile__gallery,
.artists-page .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
    gap: var(--space-4);
    margin: 0;
    padding: 0;
    list-style: none;
}

.artist-profile__gallery .gallery__link {
    display: block;
    overflow: hidden;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
}

.artist-profile__gallery picture,
.artist-profile__gallery img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.artist-profile__back {
    padding-bottom: var(--space-16);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.artist-profile__back a {
    color: inherit;
}