/*
 * „Fell & Seife" — Design-Sprache des Demo-Salons Lockenpfote
 * (docs/M1-DEMO-KONZEPT.md, Abschn. 2). Eigenes schlankes CSS, Static SSR,
 * KEINE externen Requests: Fonts self-hosted (DSGVO), Bilder lokal.
 *
 * Personalisierung: --c-marke und --c-akzent werden zur Laufzeit aus dem
 * BusinessProfile per Inline-<style> überschrieben (BusinessLayout) — die übrigen
 * fünf Tokens bleiben Template-Default (Konzept 2.7/7).
 */

/* Typografie: Vollkorn (Display-Serif) + Figtree (Body-Grotesk), variable woff2,
   Subset latin, self-hosted — max. 4 Dateien, font-display: swap (Konzept 2.3). */
@font-face {
    font-family: "Vollkorn";
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url("fonts/vollkorn-latin-wght.woff2") format("woff2");
}

@font-face {
    font-family: "Vollkorn";
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url("fonts/vollkorn-italic-latin-wght.woff2") format("woff2");
}

@font-face {
    font-family: "Figtree";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("fonts/figtree-latin-wght.woff2") format("woff2");
}

/* Farbpalette „Fell & Seife" — die 7 Personalisierungs-Tokens (Konzept 2.2). */
:root {
    --c-grund: #FAF6EF;      /* Seitengrund „Seifenschaum" */
    --c-tinte: #2C2420;      /* Fließtext „Espresso" */
    --c-marke: #23554E;      /* Primärfarbe „Tannengrün" */
    --c-marke-tief: #17362F; /* Footer, Overlays, gedrückte Buttons */
    --c-akzent: #C88A3D;     /* „Honig": Locke, Fokus-Ring, große Ziffern */
    --c-flaeche: #EFE7D8;    /* Karten-/Sektionsgrund „Sand" */
    --c-linie: #E0D5C2;      /* Trennlinien, Rahmen */

    --font-display: "Vollkorn", Georgia, serif;
    --font-body: "Figtree", system-ui, sans-serif;
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 1.0625rem;
    line-height: 1.6;
    color: var(--c-tinte);
    background: var(--c-grund);
}

h1, h2, h3 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.15;
    color: var(--c-tinte);
    margin: 0 0 0.75rem;
}

h1 { font-size: clamp(2.1rem, 8vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 5vw, 2.2rem); }
h3 { font-size: 1.25rem; font-weight: 600; }

img {
    max-width: 100%;
    height: auto;
}

/* Einheitlicher Warmton-Look über gemischte Foto-Quellen (Konzept 2.4). */
.ws-photo {
    filter: saturate(0.92) sepia(0.06);
    border-radius: 20px;
    display: block;
}

a {
    color: var(--c-marke);
}

/* Sichtbarer Fokus-Ring auf allen Interaktiv-Elementen (Konzept 2.6). */
:focus-visible {
    outline: 3px solid var(--c-akzent);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Sanftes Fade-up beim Einscrollen — nur mit JS (html.js), einmalig, 300 ms. */
html.js .ws-reveal {
    opacity: 0;
    translate: 0 18px;
}

html.js .ws-reveal.is-in {
    opacity: 1;
    translate: 0 0;
    transition: opacity 300ms ease-out, translate 300ms ease-out;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    html.js .ws-reveal {
        opacity: 1;
        translate: 0 0;
        transition: none;
    }

    .ws-sticky-cta {
        transition: none !important;
    }
}

.ws-page {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.ws-main {
    flex: 1;
}

.ws-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* Kleines Uppercase-Label über den Sektions-Überschriften (Konzept 2.3). */
.ws-label {
    display: block;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--c-marke);
    margin-bottom: 0.5rem;
}

/* Signatur-Element „die Locke" (Konzept 2.5) — Farbe via currentColor. */
.ws-locke {
    color: var(--c-akzent);
    display: inline-block;
    vertical-align: middle;
    aspect-ratio: 2 / 1;
}

.ws-locke-sep {
    display: block;
    width: 72px;
    margin: 0 auto 1.5rem;
    color: var(--c-akzent);
    aspect-ratio: 2 / 1;
}

/* Header + Navigation */
.ws-header {
    background: var(--c-grund);
    border-bottom: 1px solid var(--c-linie);
}

.ws-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding-top: 0.85rem;
    padding-bottom: 0.85rem;
}

/* Der Buchen-Button im Kopf ist das wichtigste Element der Seite — er wird
   nie gestaucht oder abgeschnitten; stattdessen schrumpft die Wortmarke. */
.ws-header-inner .ws-btn {
    flex-shrink: 0;
}

.ws-brand {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    font-family: var(--font-display);
    font-weight: 700;
    /* Fluide Größe statt fix 1.35rem: auf schmalen Screens (320–430px) muss
       neben der Wortmarke der „Termin buchen"-Button vollständig Platz haben —
       vorher wurde er aus dem Viewport gedrängt (Bugfix, kein Redesign). */
    font-size: clamp(0.85rem, 4.05vw, 1.35rem);
    color: var(--c-marke);
    text-decoration: none;
    white-space: nowrap;
    /* Flex-Item darf schrumpfen; extrem lange Betriebsnamen kürzt der <span>
       unten per Ellipse, statt den Buchen-Button abzuschneiden. */
    min-width: 0;
}

.ws-brand > span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.ws-brand img {
    max-height: 44px;
    width: auto;
    align-self: center;
}

/* P2-124: Ein quadratisches oder hochkantes Logo (höchstens 3:2, entschieden in
   HeaderLogo) war bei 44 px unlesbar — es bekommt eine feste, größere Höhe. Fest
   statt max-height: Zusammen mit width/height am <img> steht der Platz schon vor dem
   Laden, die Kopfzeile springt nicht. Querformat-Logos bleiben bei der Regel oben.
   Am Handy 52 px: Logo + Buchen-Knopf passen bei 360 px Breite nebeneinander. */
.ws-brand img.ws-brand-logo-kompakt {
    height: 52px;
    max-height: none;
}

@media (min-width: 768px) {
    .ws-brand img.ws-brand-logo-kompakt {
        height: 64px;
    }
}

/* Larilou-Runde 2026-10-16 Nr. 6: „Kopfzeile beim Scrollen anheften“ (Schalter je Betrieb,
   Vorgabe aus). Erst ab 768 px — ab dort ist die Navigation sichtbar und die Buchen-Leiste
   unten verschwindet; der Buchen-Knopf steht dann ohnehin in der Kopfzeile. Am Handy fehlt
   der Platz, dort bleibt alles wie ohne Schalter. Kein JS: sticky klebt im .ws-page, das die
   ganze Seite trägt. z-index 20: über dem Inhalt (die Fade-up-Sektionen bilden mit translate
   eigene Stapel) und dem „Nach oben“-Knopf (11), unter dem Sprunglink (1000), der bei Fokus
   über der Kopfzeile erscheinen muss. scroll-padding-top: Die Ankersprünge der Navigation
   (#leistungen, #ueber-uns, #kontakt) landen sonst mit der Überschrift unter der Kopfzeile. */
@media (min-width: 768px) {
    .ws-header--angeheftet {
        position: sticky;
        top: 0;
        z-index: 20;
        box-shadow: 0 2px 10px rgb(23 54 47 / 0.08);
    }

    html:has(.ws-header--angeheftet) {
        scroll-padding-top: 6.5rem;
    }
}

.ws-brand .ws-locke {
    width: 1.5em;
    translate: -0.15em 0.1em;
    flex-shrink: 0;
}

/* Schmale Phones: die dekorative Locke weicht aus der Wortmarke (sie bleibt
   überall sonst auf der Seite sichtbar), damit Betriebsname + Buchen-Button
   ohne Kürzung nebeneinander passen. */
@media (max-width: 429px) {
    .ws-brand .ws-locke {
        display: none;
    }
}

/* Härtetest ≤ 359px: reicht der Platz trotz allem nicht für eine Zeile,
   rutscht der Button vollständig sichtbar in eine zweite Kopfzeile —
   abgeschnitten wird nie. */
@media (max-width: 359px) {
    .ws-header-inner {
        flex-wrap: wrap;
    }
}

/* Rundgang 2026-10-08 (P2-124): Ein Querformat-Logo neben dem langen Kopfknopf
   „Online-Buchung ab 01.01.2027" (P2-127) wurde am Handy auf etwa 56 × 14 px
   zusammengedrückt — der Knopf schrumpft nie (Regel oben), also gab das Logo nach.
   Mit einem Logo gilt deshalb umgekehrt: Das Logo behält seine Größe bis zur Hälfte
   der Kopfzeile, und der KNOPF darf schrumpfen — er bricht zentriert in zwei Zeilen
   um, abgeschnitten wird weiter nichts. Ein quadratisches Logo (52 px) ist schmal
   genug und bleibt, wie es ist. Ohne Logo (Wortmarke als Text) gilt unverändert die
   Regel oben: Dort kürzt die Ellipse den Namen. */
.ws-brand:has(> img) {
    flex-shrink: 0;
    max-width: 50%;
}

/* Engere Zeilen für den Umbruch, dafür etwas mehr Polster: Einzeilig bleibt der
   Knopf so hoch wie vorher (rund 42 px), zweizeilig wird er nicht klobig. */
.ws-header-inner:has(> .ws-brand > img) .ws-btn-klein {
    flex-shrink: 1;
    min-width: 0;
    text-align: center;
    line-height: 1.3;
    padding-block: 0.7rem;
}

/* ≤ 359 px rutscht der Knopf ohnehin in eine eigene Zeile (Regel oben) — dann darf
   das Logo die ganze Breite nutzen wie bisher. */
@media (max-width: 359px) {
    .ws-brand:has(> img) {
        max-width: 100%;
    }
}

/* Anker-Menü: mobil ausgeblendet (Konzept 3 — die Seite ist kurz genug). */
.ws-nav {
    display: none;
    gap: 1.5rem;
    align-items: center;
}

.ws-nav a {
    color: var(--c-tinte);
    text-decoration: none;
    font-weight: 500;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
}

.ws-nav a:hover {
    border-bottom-color: var(--c-akzent);
}

/* Kategorie im Menü am Rechner (W2-F20, docs/W2-WEBSEITE-INHALTE-PLAN.md E9b): details/summary ohne Skript — Maus,
   Finger und Tastatur (Eingabe/Leertaste) öffnen und schließen, den Zustand meldet der Browser. Die Liste liegt
   position: absolute unter dem Namen über dem Inhalt und verschiebt nichts. Ohne Kategorie steht nichts davon im HTML. */
.ws-nav-gruppe {
    position: relative;
}

.ws-nav-gruppe-knopf {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--c-tinte);
    font-weight: 500;
    padding: 0.25rem 0;
    border-bottom: 2px solid transparent;
    list-style: none;
    cursor: pointer;
}

.ws-nav-gruppe-knopf::-webkit-details-marker {
    display: none;
}

.ws-nav-gruppe-knopf::marker {
    content: "";
}

.ws-nav-gruppe-knopf:hover,
.ws-nav-gruppe[open] > .ws-nav-gruppe-knopf {
    border-bottom-color: var(--c-akzent);
}

.ws-nav-gruppe-pfeil {
    flex-shrink: 0;
    transition: transform 150ms ease;
}

.ws-nav-gruppe[open] .ws-nav-gruppe-pfeil {
    transform: rotate(180deg);
}

.ws-nav-gruppe-liste {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    z-index: 20;
    display: flex;
    flex-direction: column;
    min-width: 12rem;
    max-width: min(20rem, calc(100vw - 2rem));
    padding: 0.25rem 0;
    background: var(--c-grund);
    border: 1px solid var(--c-linie);
    border-radius: 0.5rem;
    box-shadow: 0 6px 12px rgb(23 54 47 / 0.08);
}

.ws-nav .ws-nav-gruppe-liste a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 1rem;
    border-bottom: 0;
    overflow-wrap: anywhere;
}

.ws-nav .ws-nav-gruppe-liste a:hover {
    background: var(--c-flaeche);
}

@media (prefers-reduced-motion: reduce) {
    .ws-nav-gruppe-pfeil {
        transition: none;
    }
}

/* Handy-Menü (W2-F2 (a), docs/W2-WEBSEITE-INHALTE-PLAN.md E9-2): nur bei Betrieben mit zusätzlichem Eintrag
   (Neuigkeiten, Info-Seiten im Menü) — ohne ihn steht es gar nicht im HTML, der Kopf bleibt am Handy wie heute.
   Ohne Skript: details/summary; Tastatur (Eingabe/Leertaste), Zustand und Fokus bringt der Browser mit. Die Liste
   legt sich unter die Kopfzeile über den Inhalt (position: absolute an .ws-header), damit die Zeile mit Logo und
   Buchen-Knopf nicht springt. Ab 768 px ausgeblendet — dort steht das Menü in der Kopfzeile (.ws-nav). */
.ws-menue {
    flex-shrink: 0;
}

.ws-menue-knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    min-width: 44px;
    padding: 0 0.85rem;
    border: 1px solid var(--c-linie);
    border-radius: 999px;
    color: var(--c-tinte);
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    list-style: none;
    cursor: pointer;
}

/* Das Dreieck des Browsers weicht dem eigenen Symbol (Safari kennt ::marker hier nicht). */
.ws-menue-knopf::-webkit-details-marker {
    display: none;
}

.ws-menue-knopf::marker {
    content: "";
}

.ws-menue[open] > .ws-menue-knopf {
    background: var(--c-marke);
    border-color: var(--c-marke);
    color: var(--c-grund);
}

.ws-menue-symbol {
    flex-shrink: 0;
}

/* Die Beschriftung wechselt mit dem Zustand (T2-46) — für Vorlesegeräte ist es der Name des Knopfs. Sichtbar steht
   geschlossen „Menü“, geöffnet nur das Symbol auf gefüllter Fläche: „Menü schließen“ bleibt unsichtbar, damit der Knopf
   beim Öffnen nicht breiter wird und Logo und Buchen-Knopf nicht verdrängt. */
.ws-menue-zu {
    display: none;
}

.ws-menue[open] .ws-menue-auf {
    display: none;
}

.ws-menue[open] .ws-menue-zu {
    display: inline;
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Schmale Phones: auch geschlossen nur das Symbol; „Menü“ bleibt für Vorlesegeräte (Name des Knopfs), damit Logo,
   Buchen-Knopf und Menü in eine Zeile passen. */
@media (max-width: 429px) {
    .ws-menue-knopf {
        padding: 0;
    }

    .ws-menue-auf {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.ws-menue-liste {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    display: flex;
    flex-direction: column;
    padding: 0.25rem 1rem 0.75rem;
    background: var(--c-grund);
    border-bottom: 1px solid var(--c-linie);
    box-shadow: 0 6px 12px rgb(23 54 47 / 0.08);
}

.ws-menue-liste a {
    display: flex;
    align-items: center;
    min-height: 44px;
    color: var(--c-tinte);
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px solid var(--c-linie);
    overflow-wrap: anywhere;
}

.ws-menue-liste a:last-child {
    border-bottom: 0;
}

/* Kategorie im Handy-Menü (W2-F20): der Name als Zwischenüberschrift, die Seiten darunter eingerückt — kein zweiter
   Aufklapper im Aufklapper. */
.ws-menue-gruppe {
    display: flex;
    flex-direction: column;
}

.ws-menue-gruppe-name {
    padding: 0.75rem 0 0.25rem;
    color: var(--c-tinte);
    font-size: 0.8125rem;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.ws-menue-liste .ws-menue-gruppe a {
    padding-left: 1rem;
}

.ws-menue-liste .ws-menue-gruppe a:last-child {
    border-bottom: 1px solid var(--c-linie);
}

.ws-menue-liste > .ws-menue-gruppe:last-child a:last-child {
    border-bottom: 0;
}

@media (max-width: 767.98px) {
    /* Bezugspunkt der Liste. Nur am Handy: Ab 768 px darf die angeheftete Kopfzeile sticky bleiben. */
    .ws-header:has(.ws-menue) {
        position: relative;
    }
}

@media (min-width: 768px) {
    .ws-menue {
        display: none;
    }
}

/* Reduzierter Kopf (/demo, /buchen): „Zurück zur Startseite" bricht auf sehr
   schmalen Screens kontrolliert zweizeilig um („Zurück zur / Startseite"),
   statt abgeschnitten zu werden oder Wort für Wort zu zerfallen. */
@media (max-width: 519px) {
    .ws-nav a {
        max-width: 5.6em;
    }
}

/* Buttons */
.ws-btn {
    display: inline-block;
    background: var(--c-marke);
    color: var(--c-grund);
    text-decoration: none;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1rem;
    padding: 0.8rem 1.6rem;
    border-radius: 999px;
    border: 0;
    cursor: pointer;
    transition: background 150ms ease;
}

.ws-btn:hover {
    background: var(--c-marke-tief);
}

.ws-btn:active {
    background: var(--c-marke-tief);
}

.ws-btn-klein {
    padding: 0.55rem 1.2rem;
    font-size: 0.9375rem;
}

/* Schmale Phones: etwas kompakteres Button-Polster, damit der Kopf-Button
   neben der Wortmarke in eine Zeile passt (Teil des Abschneide-Bugfixes). */
@media (max-width: 429px) {
    .ws-btn-klein {
        padding-inline: 0.9rem;
    }
}

.ws-link {
    color: var(--c-marke);
    font-weight: 600;
}

/* Hero (Konzept 3.1) */
.ws-hero {
    padding: 2rem 0 2.5rem;
}

.ws-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: center;
}

.ws-hero h1 {
    margin: 0 0 0.75rem;
}

.ws-hero-sub {
    font-size: 1.125rem;
    margin: 0 0 1.5rem;
    max-width: 34rem;
}

.ws-hero-cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem 1.25rem;
    margin-bottom: 0.9rem;
}

.ws-hero-vertrauen {
    font-size: 0.875rem;
    color: var(--c-marke);
    margin: 0;
}

/* Hero-Bild: asymmetrisch gerundete Ecke nimmt das Locken-Motiv auf (2.4). */
.ws-hero-bild {
    border-radius: 24px 96px 24px 24px;
    width: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 5;
    max-height: 560px;
}

/* Startbereich „Banner“ (docs/W1-WEBSEITE-POLITUR-PLAN.md A2-3). Am Handy (< 768 px) steht das eigene Startbild
   oben im Format 4 : 3 über die ganze Breite, der Text darunter auf dem Seitengrund in den normalen Farben. Ab
   768 px liegt der Text auf dem Bild (Regeln unten). Kein Skript. */
.ws-hero.ws-hero--banner {
    padding-top: 0;
}

.ws-hero--banner .ws-hero-bild {
    border-radius: 0;
    aspect-ratio: 4 / 3;
    max-height: none;
}

.ws-hero--banner .ws-hero-schicht {
    padding-top: 1.75rem;
}

@media (min-width: 768px) {
    /* Das Bild füllt den Startbereich (16 : 7, höchstens 70 % der Fensterhöhe); wird der Text höher, wächst der
       Bereich mit, und das Bild schneidet zu (object-fit aus .ws-hero-bild). */
    .ws-hero.ws-hero--banner {
        position: relative;
        padding: 0;
    }

    .ws-hero--banner .ws-hero-bild {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        aspect-ratio: auto;
    }

    /* Der FESTE Verlauf (A2-3, Risiko R-4): unten links am dunkelsten, oben rechts hell. Der Zwischenhalt bei
       50 % liegt auf der Diagonale von oben links nach unten rechts — die ganze untere linke Hälfte, in der der
       Text steht, ist damit mindestens zu 55 % abgedunkelt: Weiß hält dort auch auf einem rein weißen Foto
       4,7 : 1 (Wächter W1StartbereichRenderTests.Banner_VerlaufHaeltDenKontrast). */
    .ws-hero--banner .ws-hero-schicht {
        position: relative;
        display: flex;
        align-items: flex-end;
        box-sizing: border-box;
        min-height: min(43.75vw, 70vh);
        padding-block: 3.5rem;
        background: linear-gradient(to top right, rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.15));
        color: #fff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    }

    .ws-hero--banner .ws-hero-inner {
        width: 100%;
        grid-template-columns: minmax(0, 1fr);
    }

    .ws-hero--banner .ws-hero-inner > div {
        max-width: 36rem;
    }

    .ws-hero--banner h1,
    .ws-hero--banner .ws-hero-vertrauen,
    .ws-hero--banner .ws-link {
        color: #fff;
    }

    .ws-hero--banner .ws-btn {
        text-shadow: none;
    }
}

/* Startbereich „Nur Text“ (A2-4): mittig auf der Markenfarbe, Schrift im Seitengrund, der Knopf umgekehrt —
   genau das Farbpaar, das die Kontrastregel W9 schon mit 4,5 : 1 prüft. Der Fokus-Ring nimmt dasselbe Paar. */
.ws-hero--text {
    background: var(--c-marke);
    color: var(--c-grund);
    text-align: center;
}

.ws-hero--text h1,
.ws-hero--text .ws-hero-vertrauen,
.ws-hero--text .ws-link {
    color: var(--c-grund);
}

.ws-hero--text .ws-hero-inner {
    grid-template-columns: minmax(0, 1fr);
}

.ws-hero--text .ws-hero-sub {
    margin-inline: auto;
}

.ws-hero--text .ws-hero-cta {
    justify-content: center;
}

.ws-hero--text :focus-visible {
    outline-color: var(--c-grund);
}

/* Der umgekehrte Knopf (A2-4): Markenfarbe auf Seitengrund. Beim Darüberfahren bleibt das geprüfte Farbpaar,
   nur die Unterstreichung kommt dazu. */
.ws-btn--hell {
    background: var(--c-grund);
    color: var(--c-marke);
}

.ws-btn--hell:hover,
.ws-btn--hell:active {
    background: var(--c-grund);
    text-decoration: underline;
}

/* Sektionen: Wechselrhythmus Grund/Sand (Konzept 2.6).
   padding-block statt padding-Shorthand: /demo und /buchen kombinieren
   ws-shell + ws-section auf EINEM Element — der Shorthand hatte dort das
   horizontale Shell-Padding auf 0 überschrieben (Inhalt klebte am Rand). */
.ws-section {
    padding-block: 3rem 3.5rem;
    scroll-margin-top: 4.5rem;
}

.ws-section--sand {
    background: var(--c-flaeche);
}

.ws-intro {
    max-width: 40rem;
    margin: 0 0 2rem;
}

/* Leistungs-Karten (Konzept 3.2) */
.ws-services {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: 1fr;
}

/* Die Karten „Monatsbeitrag" (BUCHUNGSMODELL-PLAN §17 M-13): dieselbe Kartenform wie die Leistungen,
   darunter die Preisangabe T-M1 als ganzer Satz (kein Fettdruck — er ist lang) und der Link ins Konto. */
.ws-monatsbeitrag-titel {
    margin: 2rem 0 0.75rem;
}

.ws-monatsbeitrag-preis {
    overflow-wrap: anywhere;
}

.ws-monatsbeitraege .ws-monatsbeitrag p {
    margin: 0.4rem 0 0;
}

.ws-service-card {
    background: var(--c-grund);
    border: 1px solid var(--c-linie);
    border-radius: 20px;
    padding: 1.25rem 1.4rem;
    transition: translate 150ms ease, box-shadow 150ms ease;
}

.ws-service-card:hover {
    translate: 0 -2px;
    box-shadow: 0 6px 20px rgb(44 36 32 / 0.08);
}

.ws-service-card h3 {
    margin: 0 0 0.4rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

/* Die Locke als Aufzählungszeichen der Leistungsliste (Konzept 2.5). */
.ws-service-card h3 .ws-locke {
    flex: none;
    width: 1.3em;
    translate: 0 0.15em;
}

.ws-service-card p {
    margin: 0 0 0.75rem;
    font-size: 0.9375rem;
}

.ws-service-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin: 0;
}

.ws-service-meta .ws-dauer {
    font-size: 0.875rem;
    color: var(--c-marke);
}

.ws-service-meta .ws-preis {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.35rem;
    color: var(--c-marke);
    white-space: nowrap;
}

.ws-fineprint {
    font-size: 0.875rem;
    max-width: 40rem;
    margin: 0 0 1.5rem;
}

/* Foto-Band unter den Leistungen (Slots leistung-baden/-schneiden, Konzept 6). */
.ws-leistung-fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 0 0;
}

.ws-leistung-fotos img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

/* „So läuft Ihr Termin" (Konzept 3.3) */
.ws-ablauf {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 2rem;
    counter-reset: schritt;
}

.ws-ablauf li {
    counter-increment: schritt;
}

.ws-ablauf li::before {
    content: counter(schritt);
    display: block;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 2.6rem;
    line-height: 1;
    color: var(--c-akzent);
    margin-bottom: 0.4rem;
}

.ws-ablauf h3 {
    margin-bottom: 0.35rem;
}

.ws-ablauf p {
    margin: 0;
}

/* Über uns (Konzept 3.4) */
.ws-ueber {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
}

/* Rundgang 2026-10-08 Nr. 15 (Inhaber): Das Foto wird nie abgeschnitten, nur verkleinert.
   Kein fester Rahmen mit cover/contain — das Bild behält sein Seitenverhältnis, ist höchstens
   so breit wie die Spalte und höchstens 32rem (bzw. 70 % der Fensterhöhe) hoch und steht
   mittig. Rundung und Schatten (.ws-photo) sitzen so am Bild selbst, nie an leeren Balken. */
.ws-ueber-bild {
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: min(32rem, 70vh);
    justify-self: center;
}

.ws-zitat {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.4;
    color: var(--c-marke);
    border-left: 3px solid var(--c-akzent);
    margin: 1.5rem 0 0;
    padding: 0.25rem 0 0.25rem 1.1rem;
}

/* Galerie (Konzept 3.5) */
.ws-gallery {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ws-gallery figure {
    margin: 0;
    position: relative;
}

.ws-gallery img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.ws-gallery figcaption {
    position: absolute;
    left: 0.75rem;
    bottom: 0.75rem;
    background: var(--c-marke-tief);
    color: var(--c-grund);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
}

/* Bewertungs-Block (W1 B3): Karte mit zwei Links zu Google — keine Zahl, keine Sterne. Die
   frühere gestrichelte Platzhalter-Karte (.ws-bewertung-slot mit .ws-sterne) ist entfallen. */
.ws-bewertungen {
    border: 1px solid var(--c-linie);
    border-radius: 20px;
    background: var(--c-grund);
    padding: 2rem 1.5rem 1.25rem;
    text-align: center;
    max-width: 34rem;
    margin: 0 auto;
}

.ws-bewertungen p {
    margin: 0 0 1.25rem;
    font-weight: 500;
}

.ws-bewertungen .ws-fineprint {
    margin: 0;
    font-weight: 400;
}

.ws-bewertungen-knoepfe {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem 1rem;
}

/* Öffnungszeiten + Kontakt (Konzept 3.7) */
.ws-kontakt-grid {
    display: grid;
    gap: 2rem;
}

.ws-hours {
    margin: 0 0 1.5rem;
    display: grid;
    gap: 0.25rem;
    max-width: 26rem;
}

.ws-hours div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--c-linie);
}

.ws-hours dt {
    font-weight: 600;
}

.ws-hours dd {
    margin: 0;
}

.ws-contact address {
    font-style: normal;
    margin: 1.25rem 0 0;
    line-height: 1.7;
}

/* Anfahrts-Platzhalter: stilisierte Grafik statt Karten-Embed (DSGVO, 3.7). */
.ws-anfahrt {
    background: var(--c-flaeche);
    border: 1px solid var(--c-linie);
    border-radius: 20px;
    padding: 2.25rem 1.5rem;
    text-align: center;
}

.ws-anfahrt p {
    margin: 0.75rem 0 0;
    font-size: 0.9375rem;
}

/* Demo-Kennzeichnungs-Leiste: jede Seite, direkt über dem Footer, NICHT
   schließbar (Konzept 1.5) — dezent, aber klar lesbar. */
.ws-demo-leiste {
    background: var(--c-flaeche);
    border-top: 1px solid var(--c-linie);
    font-size: 0.875rem;
    padding: 0.85rem 0;
}

.ws-demo-leiste p {
    margin: 0;
}

/* Footer (Konzept 3.8) */
.ws-footer {
    background: var(--c-marke-tief);
    color: var(--c-grund);
    padding: 2.25rem 0 2rem;
    font-size: 0.9375rem;
}

.ws-footer a {
    color: var(--c-grund);
}

.ws-footer-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin: 1rem 0;
    padding: 0;
    list-style: none;
}

.ws-footer p {
    margin: 0.5rem 0;
}

/* „Vertrag widerrufen" (docs/R2-WIDERRUF-TERMINBUCHUNG-PLAN.md WR10, D-3): hervorgehoben und als eigener Eintrag
   getrennt von „Verträge hier kündigen" — § 356a BGB verlangt eine gut lesbare, hervorgehobene Schaltfläche. */
.ws-footer-widerruf a {
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

.ws-demo-badge {
    display: inline-block;
    background: var(--c-akzent);
    color: var(--c-marke-tief);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    margin-right: 0.5rem;
}

.ws-footer-plattform {
    border-top: 1px solid rgb(250 246 239 / 0.25);
    margin-top: 1.25rem;
    padding-top: 1rem;
    font-size: 0.875rem;
}

/* „Anmeldung für das Team" (docs/BRANCHE-BEISPIELE-TEAM-LOGIN-PLAN.md): dezent wie die
   Plattform-Zeile, aber ein volles Tippziel am Handy (mindestens 44 px, P2-75) — die
   Trainerin tippt ihn auf dem Platz, oft mit einer Hand. */
.ws-footer-team {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
}

.ws-footer-team a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 0.25rem;
    margin-left: -0.25rem;
}

/* Sticky Buchungs-Leiste (mobil, Konzept 2.6): Buchen ist IMMER einen Daumen
   entfernt. Mit JS erscheint sie nach dem Scroll am Hero vorbei; ohne JS ist
   sie dauerhaft sichtbar (Progressive Enhancement). */
.ws-sticky-cta {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 10;
    display: block;
    background: var(--c-marke);
    color: var(--c-grund);
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.0625rem;
    padding: 0.95rem 1rem calc(0.95rem + env(safe-area-inset-bottom));
    box-shadow: 0 -4px 16px rgb(23 54 47 / 0.25);
    transition: translate 250ms ease;
}

.ws-sticky-cta:active {
    background: var(--c-marke-tief);
}

html.js .ws-sticky-cta {
    translate: 0 110%;
}

html.js .ws-sticky-cta.is-visible {
    translate: 0 0;
}

/* Platz für die Leiste am Seitenende, damit sie den Footer nicht verdeckt. */
body:has(.ws-sticky-cta) .ws-footer {
    padding-bottom: 5.5rem;
}

/* Demo-/Impressums-Seite */
.ws-demo-seite,
.ws-recht-seite {
    max-width: 44rem;
}

/* Rechtsseiten (WS7): Impressum/Datenschutz — engere Überschriften, Adressblock
   ohne Kursivschrift (address ist semantisch, nicht typografisch gemeint). */
.ws-recht-seite h2 {
    margin-top: 2rem;
    font-size: 1.25rem;
}

.ws-recht-seite address {
    font-style: normal;
}

.ws-recht-seite ul {
    padding-left: 1.2rem;
}

/* Über uns: Qualifikationsliste (WS3, Sektions-Katalog Nr. 4 — W11). */
.ws-quali {
    margin: 1rem 0 0;
    padding-left: 1.2rem;
}

.ws-quali li {
    margin-bottom: 0.35rem;
}

/* Freitext-Absätze der Text-Sektionen Ablauf-Zusatz/Regeln/Gutschein (WS3). */
.ws-freitext {
    max-width: 44rem;
}

.ws-freitext p {
    margin: 0 0 1rem;
}

/* FAQ (WS3, Sektions-Katalog Nr. 9) — Definitionsliste wie .ws-hours,
   nur gestapelt statt zweispaltig. */
.ws-faq {
    margin: 0;
    display: grid;
    gap: 1.5rem;
    max-width: 44rem;
}

.ws-faq dt {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1.15rem;
    margin-bottom: 0.35rem;
}

.ws-faq dd {
    margin: 0;
}

/* Hinweis-Banner „Aktuelles" (WS3, Sektions-Katalog Nr. 11): Karte im
   Sand-Ton mit Akzent-Rahmen — Muster .ws-anfahrt. */
/* Volle Breite wie die übrigen Sektionen (Larilou-Runde 2026-10-16 Nr. 4: vorher 44rem, wirkte
   wie ein Fremdkörper). Die Sektion sitzt direkt unter dem Hero, deshalb oben weniger Abstand. */
.ws-hinweis {
    background: var(--c-flaeche);
    border: 1px solid var(--c-akzent);
    border-radius: 20px;
    padding: 1.5rem 1.5rem 1rem;
}

.ws-section--hinweis {
    padding-top: 0;
}

.ws-hinweis h2 {
    font-size: 1.35rem;
    margin-bottom: 0.5rem;
}

.ws-hinweis p {
    margin: 0 0 0.5rem;
}

/* Listen aus dem Editor (W2 F3-1, E3): derselbe Abstand wie ein Absatz, eingerückt wie die Listen der Rechtsseiten. */
.ws-hinweis ul,
.ws-hinweis ol {
    margin: 0 0 0.5rem;
    padding-left: 1.2rem;
}

/* Ankündigungen (W1 C3-3): bis zu drei Karten untereinander in derselben Sektion. Die Art bestimmt nur das Aussehen,
   über feste Klassen und die Farben der Seite — keine eigenen. „Hinweis“ ist die Karte von oben (das Banner von
   vorher); „Urlaub“ trägt Rahmen und Etikett in --c-marke-tief, „Aktion“ den Akzent-Rahmen mit einem Etikett auf der
   Akzent-Fläche. Das Etikett sagt die Art als Wort, die Farbe allein trägt keine Bedeutung. */
.ws-hinweis + .ws-hinweis {
    margin-top: 1rem;
}

.ws-hinweis--urlaub {
    border-color: var(--c-marke-tief);
}

.ws-hinweis--aktion {
    border-color: var(--c-akzent);
}

.ws-hinweis-art {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    margin-bottom: 0.5rem;
}

.ws-hinweis--urlaub .ws-hinweis-art {
    background: var(--c-marke-tief);
    color: var(--c-grund);
}

.ws-hinweis--aktion .ws-hinweis-art {
    background: var(--c-akzent);
    color: var(--c-marke-tief);
}

/* Doppelte Klasse: schlägt .ws-hinweis p (sonst bliebe der Abstand oben 0). */
.ws-hinweis .ws-hinweis-knopf {
    margin-top: 1rem;
}

/* Tablet/Desktop: großzügigere Version derselben Ordnung (Konzept 2.6). */
@media (min-width: 768px) {
    .ws-nav {
        display: flex;
    }

    .ws-hero {
        padding: 3.5rem 0 4rem;
    }

    .ws-hero-inner {
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
        gap: 3rem;
    }

    .ws-section {
        padding-block: 4.5rem 5rem;
    }

    .ws-services {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
    }

    .ws-ablauf {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 2.5rem;
    }

    .ws-ueber {
        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
        gap: 3rem;
    }

    .ws-gallery {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ws-kontakt-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }

    /* Sticky-Leiste ist ein Mobil-Muster — Desktop hat den Header-Button. */
    .ws-sticky-cta {
        display: none;
    }

    body:has(.ws-sticky-cta) .ws-footer {
        padding-bottom: 2rem;
    }
}

/* ---------------------------------------------------------------------------
   Sprunglink „Zum Inhalt springen" (Befund G-1, Audit 2026-09-20 — WCAG 2.4.1
   Bypass Blocks). Wer mit der Tastatur bedient, musste auf JEDER Seite erst durch
   Wortmarke, drei Navigationslinks und den Buchen-Knopf; auf der Buchungsstrecke
   wiederholt sich das bei jedem Schritt, weil jeder Schritt ein voller Seitenaufruf
   ist.

   Er ist NICHT display:none und nicht visibility:hidden — beides nähme ihn auch der
   Tastatur. Er steht mit fester Position außerhalb des Sichtfelds und springt bei
   Fokus hinein. Dieselbe Klasse trägt denselben Namen in platform.css und
   backend.css: EIN Muster über alle drei Designsprachen, damit es nicht dreimal
   neu erfunden wird.
   --------------------------------------------------------------------------- */
.ws-skip-link {
    position: absolute;
    top: -3rem;
    left: 0.75rem;
    z-index: 1000;
    padding: 0.6rem 1rem;
    border-radius: 0 0 6px 6px;
    background: var(--c-marke);
    color: #fff;
    font-weight: 600;
    text-decoration: none;
    transition: top 0.15s ease-in-out;
}

.ws-skip-link:focus {
    top: 0;
    outline: 3px solid var(--c-akzent);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   „Nach oben“ (Larilou-Runde 2026-10-16 Nr. 7): runder Knopf rechts unten, erst
   nach einer Bildschirmhöhe (html.js + is-visible); ohne JS immer da. Am Handy
   sitzt er über der Buchen-Leiste, ab 768 px steht sie nicht mehr im Weg.
   --------------------------------------------------------------------------- */
.ws-nach-oben {
    position: fixed;
    right: 1rem;
    bottom: calc(4.5rem + env(safe-area-inset-bottom));
    z-index: 11;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background: var(--c-grund);
    color: var(--c-marke);
    border: 1px solid var(--c-linie);
    box-shadow: 0 4px 14px rgb(23 54 47 / 0.18);
    transition: opacity 0.2s ease, translate 0.2s ease;
}

.ws-nach-oben:hover,
.ws-nach-oben:focus-visible {
    background: var(--c-marke);
    color: var(--c-grund);
}

.ws-nach-oben:focus-visible {
    outline: 3px solid var(--c-akzent);
    outline-offset: 2px;
}

html.js .ws-nach-oben {
    opacity: 0;
    translate: 0 0.75rem;
    pointer-events: none;
}

html.js .ws-nach-oben.is-visible {
    opacity: 1;
    translate: 0 0;
    pointer-events: auto;
}

@media (min-width: 768px) {
    .ws-nach-oben {
        right: 1.5rem;
        bottom: 1.5rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ws-nach-oben {
        transition: none;
    }
}

/*
 * W2 E4-3 — Bausteine der Seiten (docs/W2-WEBSEITE-INHALTE-PLAN.md BS-1, BS-15): Gestaltung nur aus den Tokens der
 * Seite, Klassen ws-bs-*. Zugeschnitten werden nur Titelbild (3 : 2) und Bildreihe (1 : 1) — beide tragen den
 * Fokuspunkt (FocusPlaces, Waechter W-9); "Bild mit Text" wird nie zugeschnitten. Am Handy steht alles untereinander.
 */
.ws-bs {
    max-width: 46rem;
}

.ws-bs > * + * {
    margin-top: 1.5rem;
}

.ws-bs-zwischen {
    margin: 2.25rem 0 0.75rem;
}

.ws-bs-text p,
.ws-bs-hinweis p {
    margin: 0 0 1rem;
}

.ws-bs-text ul,
.ws-bs-text ol,
.ws-bs-hinweis ul,
.ws-bs-hinweis ol {
    margin: 0 0 1rem;
    padding-left: 1.4rem;
}

.ws-bs-text a,
.ws-bs-hinweis a {
    color: var(--c-marke);
}

.ws-bs-bild-text {
    display: grid;
    gap: 1.25rem;
}

.ws-bs-bild-text-foto {
    margin: 0;
}

.ws-bs-bild-text-foto img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
}

.ws-bs-bildreihe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ws-bs-bildreihe a {
    display: block;
    border-radius: 12px;
}

.ws-bs-bildreihe img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 12px;
}

.ws-bs-zitat {
    margin: 2rem 0;
    padding: 0 0 0 1.25rem;
    border-left: 4px solid var(--c-akzent);
}

.ws-bs-zitat blockquote {
    margin: 0;
}

.ws-bs-zitat blockquote p {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-style: italic;
    line-height: 1.4;
}

.ws-bs-zitat figcaption {
    margin-top: 0.5rem;
    color: var(--c-marke);
    font-weight: 600;
}

.ws-bs-zitat figcaption::before {
    content: "— ";
}

.ws-bs-hinweis {
    background: var(--c-flaeche);
    border: 1px solid var(--c-akzent);
    border-radius: 16px;
    padding: 1.25rem 1.25rem 0.25rem;
}

.ws-bs-knopf {
    margin: 1.75rem 0;
}

.ws-bs-titelbild {
    margin: 0 0 2rem;
}

.ws-bs-titelbild img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 20px;
}

.ws-bs-brotkrumen {
    margin: 0 0 1rem;
    font-size: 0.95rem;
}

.ws-bs-brotkrumen ol {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ws-bs-brotkrumen li + li::before {
    content: "›";
    margin-right: 0.5rem;
    color: var(--c-marke);
}

.ws-bs-brotkrumen a {
    color: var(--c-marke);
}

.ws-bs-brotkrumen [aria-current="page"] {
    color: var(--c-tinte);
}

@media (min-width: 768px) {
    .ws-bs-bild-text {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        align-items: start;
    }

    .ws-bs-bild-text--rechts .ws-bs-bild-text-foto {
        order: 2;
    }

    .ws-bs-bildreihe--2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ws-bs-bildreihe--3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ws-bs-bildreihe--4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

/* W2 E4-5 (BS-8): die Ansicht einer Seite und der Satz der Vorschau. */
.ws-bs-seite {
    padding-top: 2rem;
}

.ws-bs-vorschau {
    margin: 0 0 1.25rem;
    padding: 0.75rem 1rem;
    border: 1px dashed var(--c-akzent);
    border-radius: 12px;
    background: var(--c-flaeche);
    font-weight: 600;
}

/*
 * W2 E5-1 — Neuigkeiten (docs/W2-WEBSEITE-INHALTE-PLAN.md FB-3, FB-4): Karten der Uebersicht /blog (dieselben im Block
 * "Neues" der Startseite), Datum, Buchen-Knopf und Rueckweg der Beitragsseite. Das Titelbild der Karte wird 3 : 2
 * zugeschnitten und traegt den Fokuspunkt (FocusPlaces, Waechter W-9). Am Handy eine Spalte.
 */
.ws-news-liste {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}

.ws-news-karte {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid var(--c-linie);
}

.ws-news-bild {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    border-radius: 16px;
    margin-bottom: 0.5rem;
}

.ws-news-titel {
    margin: 0;
    font-size: 1.35rem;
    line-height: 1.3;
}

.ws-news-datum {
    margin: 0;
    font-size: 0.9rem;
    color: var(--c-marke);
}

.ws-news-text {
    margin: 0;
}

.ws-news-mehr {
    align-self: flex-start;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    color: var(--c-marke);
    font-weight: 600;
}

.ws-news-blaettern {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    margin: 2rem 0 0;
}

.ws-bs-beitrag-datum {
    margin: -0.5rem 0 1.5rem;
    color: var(--c-marke);
}

.ws-bs-buchen {
    max-width: 46rem;
    margin: 2.5rem 0 0;
    padding: 1.25rem;
    border-radius: 16px;
    background: var(--c-flaeche);
}

.ws-bs-buchen p {
    margin: 0 0 1rem;
}

.ws-bs-buchen p:last-child {
    margin-bottom: 0;
}

.ws-bs-zurueck {
    margin: 2rem 0 0;
}

@media (min-width: 768px) {
    .ws-news-liste {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* W2 E5-2 (FB-5): der Link "Alle Neuigkeiten" unter den drei Karten des Blocks "Neues". */
.ws-news-alle {
    margin: 1.75rem 0 0;
}

/* W2 E8-2 (A3-5, A3-7): Kopf der Dienstleistungs-Seite aus dem Katalog und "Nächste Termine". */
.ws-bs-dienstleistung {
    max-width: 46rem;
    margin: 0 0 2rem;
}

.ws-bs-dienstleistung .ws-service-meta {
    justify-content: flex-start;
    margin: 0 0 1rem;
}

/* W2 E9a-3 (W2-F16): die Art des Leistungsorts unter Dauer und Preis, nie der Ort selbst. */
.ws-bs-leistungsort {
    margin: -0.5rem 0 1rem;
    color: var(--c-tinte);
}

.ws-bs-termine {
    max-width: 46rem;
    margin: 2.5rem 0 0;
}

.ws-bs-termine-liste {
    list-style: none;
    margin: 0 0 1rem;
    padding: 0;
}

.ws-bs-termine-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem 0.75rem;
    min-height: 44px;
    border-bottom: 1px solid var(--c-linie);
}

.ws-bs-termin-voll {
    font-size: 0.875rem;
    color: var(--c-marke);
}

/* W2 E8-3 (A3-4): "Mehr erfahren" an der Karte einer Dienstleistung mit eigener Seite, Tippziel 44 px. */
.ws-service-mehr {
    margin: 0.75rem 0 0;
}

.ws-service-mehr .ws-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
}

/*
 * Lesespalte der Unterseiten (Dennis 2026-10-21): Brotkrumen, Titel, Datum und Titelbild nutzen die volle Breite, der
 * Inhalt darunter steht als Spalte von 46rem MITTIG — der Text darin bleibt linksbündig. Steht am Ende der Datei,
 * damit kein späteres "margin: … 0" die Mitte wieder aufhebt. Am Handy ist die Seite schmaler als die Spalte.
 */
.ws-bs,
.ws-bs-dienstleistung,
.ws-bs-termine,
.ws-bs-buchen,
.ws-bs-zurueck {
    max-width: 46rem;
    margin-left: auto;
    margin-right: auto;
}