/* =========================================================================
   webvanta.de — Design System
   Premium Tech / SaaS aesthetic. Mostly black/white/grey; blue-violet used
   only as a targeted accent (buttons, links, highlighted states) — never as
   a flat background wash. Deliberately restrained: no glassmorphism, no
   oversized glows, no uniform pill-rounded cards everywhere (see the
   anti-AI-look pass in the project brief, section 12).

   Fonts: system-ui stack for now (no external font request — keeps the CSP
   at default-src 'self' and avoids a third-party request hurting Core Web
   Vitals). Swap for self-hosted Inter/Manrope variable fonts (woff2,
   preloaded) once brand font files are supplied; do not add a Google Fonts
   <link> — that reintroduces the exact perf/privacy cost this stack avoids.
   ========================================================================= */

/* ---- 1. Tokens ---------------------------------------------------------- */
:root {
    /* Color */
    --color-bg: #050507;
    --color-bg-raised: #0b0b0f;
    --color-bg-raised-2: #0f0f14;
    --color-border: #1e1e24;
    --color-border-strong: #2a2a32;
    --color-text: #f5f5f7;
    --color-text-secondary: #9a9aa3;
    --color-accent: #2f80ff;
    --color-accent-2: #7c3aed;
    --color-success: #34d399;
    --color-error: #ff6b6b;

    /* Typography */
    --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-display: "Manrope", var(--font-sans);

    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-base: 1rem;
    --text-lg: 1.125rem;
    --text-xl: 1.375rem;
    --text-2xl: 1.75rem;
    --text-3xl: 2.25rem;
    --text-4xl: 3rem;
    --text-5xl: 3.75rem;

    --leading-tight: 1.1;
    --leading-snug: 1.3;
    --leading-normal: 1.6;

    --tracking-wide: 0.06em;

    /* Spacing (4px base scale) */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-6: 1.5rem;
    --space-8: 2rem;
    --space-12: 3rem;
    --space-16: 4rem;
    --space-24: 6rem;
    --space-32: 8rem;

    /* Radii — intentionally small/sharp, not the generic "everything is a
       rounded pill" look. Cards read as panels, not bubbles. */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    /* Shadow — used sparingly, only on interactive elevation, never as a
       decorative background glow. */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35);

    /* Motion */
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 140ms;
    --duration-base: 220ms;

    --container-width: 1400px;
}

/* ---- 2. Reset & base ----------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
}

img,
svg {
    max-width: 100%;
    display: block;
}

/* <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,
h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: var(--leading-tight);
    margin: 0 0 var(--space-4);
    letter-spacing: -0.01em;
}

h1 {
    font-size: var(--text-5xl);
}

h2 {
    font-size: var(--text-3xl);
}

h3 {
    font-size: var(--text-xl);
}

p {
    margin: 0 0 var(--space-4);
}

a {
    color: var(--color-accent);
    text-decoration: none;
}

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }
}

/* ---- 3. Layout ------------------------------------------------------------ */
.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 var(--space-6);
}

section {
    padding: var(--space-16) 0;
}

@media (min-width: 64rem) {
    section {
        padding: var(--space-24) 0 var(--space-16);
    }
}

section[id] {
    scroll-margin-top: 96px;
}

/* ---- 4. Components --------------------------------------------------------- */

/* Eyebrow: uppercase label with letter-spacing, used above section headings */
.eyebrow {
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.section-header {
    max-width: 46rem;
    margin-bottom: var(--space-12);
}

.section-header .lead {
    margin-top: var(--space-3);
    max-width: none;
}

/* Ab Tabletbreite nebeneinander: die Ueberschrift traegt die linke Spalte,
   der Vorspann die rechte. Das nutzt die Breite, die sonst leer bliebe, und
   macht den Kopf zugleich flacher — beides zahlt auf «kompakter» ein. */
@media (min-width: 60rem) {
    .section-header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: var(--space-4) var(--space-12);
        align-items: end;
        max-width: none;
    }

    .section-header .eyebrow {
        grid-column: 1;
        margin-bottom: 0;
    }

    .section-header h2 {
        grid-column: 1;
        margin: 0;
    }

    .section-header .lead {
        grid-column: 2;
        grid-row: 1 / span 2;
        align-self: end;
        margin-top: 0;
    }

    /* Ohne Vorspann darf die Ueberschrift nicht auf die halbe Breite
       eingesperrt bleiben. */
    .section-header:not(:has(.lead)) {
        display: block;
        max-width: 46rem;
    }
}

.lead {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    max-width: 640px;
}

/* Buttons */
.btn,
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);

    /* Vorher 0.75rem/1.375rem bei 15px Schrift — der Text beruehrte die
       Kante fast. Die Faustregel: waagerecht rund das Doppelte der
       Schriftgroesse, senkrecht etwa das Anderthalbfache. */
    padding: 0.875rem 1.75rem;
    min-height: 3rem;

    border: 1px solid transparent;
    border-radius: var(--radius-md);

    font-size: var(--text-base);
    font-weight: 600;

    /* Ohne eigene Zeilenhoehe erbt der Knopf die 1.6 des Koerpertextes. Der
       Textblock wird dadurch hoeher als noetig und draengt gegen das
       Innenmass. */
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;

    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

/* In der Kopfzeile eine Nummer kleiner: dort steht der Knopf neben der
   Navigation und soll die Zeile nicht auseinanderziehen. */
.site-header__cta {
    padding: 0.6875rem 1.375rem;
    min-height: 2.625rem;
    font-size: var(--text-sm);
}

.btn--primary,
.button--primary {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    color: #fff;
}

.btn--primary:hover,
.button--primary:hover {
    transform: translateY(-1px);
}

.btn--secondary,
.button--quiet {
    background: transparent;
    border-color: var(--color-border-strong);
    color: var(--color-text);
}

.btn--secondary:hover,
.button--quiet:hover {
    border-color: var(--color-accent);
}

/* Badge */
.badge {
    display: inline-block;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    margin-bottom: var(--space-3);
}

/* Card */
.card {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    transition: border-color var(--duration-base) var(--ease-standard);
}

.card:hover {
    border-color: var(--color-border-strong);
}

.card--featured:hover {
    border-color: var(--color-accent);
}

.card--featured {
    border-color: var(--color-accent);
    background: var(--color-bg-raised-2);
}

.card ul {
    margin: var(--space-4) 0 var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.card ul li {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    padding-left: var(--space-4);
    position: relative;
}

.card ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-accent);
}

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

/* Drei Karten in einer Reihe von 1400px waeren je 450px breit — darin steht
   eine Kurzbeschreibung als drei kurze Zeilen mit viel Rand. Ab vier Karten
   je Reihe traegt die Breite tatsaechlich Inhalt. */
@media (min-width: 75rem) {
    .card-grid {
        grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    }
}

.price {
    font-size: var(--text-2xl);
    font-family: var(--font-display);
    font-weight: 700;
}

/* Header — transparent over the hero, gains a blurred/translucent
   background as soon as the page scrolls (toggled via IntersectionObserver
   in header.js, not a scroll listener). */
.scroll-sentinel {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;
    background: transparent;
    border-bottom: 1px solid transparent;
    transition: background-color var(--duration-base) var(--ease-standard),
        border-color var(--duration-base) var(--ease-standard);
}

.site-header--scrolled {
    background: rgba(5, 5, 7, 0.72);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom-color: var(--color-border);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    padding: var(--space-4) 0;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Mobile nav toggle (hamburger) — hidden on desktop where .main-nav shows */
.nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
    content: "";
    display: block;
    width: 18px;
    height: 2px;
    background: var(--color-text);
    transition: transform var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}

.nav-toggle__bars::before {
    transform: translateY(-6px);
}

.nav-toggle__bars::after {
    transform: translateY(4px);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
    background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
    transform: translateY(0) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
    transform: translateY(-2px) rotate(-45deg);
}

/* Mobile nav — fullscreen overlay */
.mobile-nav {
    position: fixed;
    inset: 0;
    z-index: 100;
    visibility: hidden;
}

.mobile-nav--open {
    visibility: visible;
}

.mobile-nav__backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    border: 0;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--duration-base) var(--ease-standard);
}

.mobile-nav--open .mobile-nav__backdrop {
    opacity: 1;
}

.mobile-nav__panel {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: min(360px, 100%);
    background: var(--color-bg-raised);
    border-left: 1px solid var(--color-border);
    padding: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    transform: translateX(100%);
    transition: transform var(--duration-base) var(--ease-standard);
    overflow-y: auto;
}

.mobile-nav--open .mobile-nav__panel {
    transform: translateX(0);
}

.mobile-nav__panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}

.mobile-nav__panel a {
    padding: var(--space-3) 0;
    color: var(--color-text);
    font-size: var(--text-lg);
    border-bottom: 1px solid var(--color-border);
}

.mobile-nav__panel .btn {
    margin-top: var(--space-4);
    align-self: flex-start;
    border-bottom: none;
}

.nav-close {
    width: 36px;
    height: 36px;
    background: transparent;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: var(--text-xl);
    line-height: 1;
    cursor: pointer;
}

body.nav-open {
    overflow: hidden;
}

.logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-weight: 800;
    font-size: var(--text-lg);
    text-decoration: none;
    color: var(--color-text);
}

.logo__mark {
    width: 24px;
    height: 24px;
    border-radius: 6px;
}

.logo__dot {
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.main-nav {
    display: flex;
    gap: var(--space-6);
    flex-wrap: wrap;
}

.main-nav a {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    font-weight: 500;
    transition: color var(--duration-fast) var(--ease-standard);
}

.main-nav a:hover {
    color: var(--color-text);
}

/* Hero */
.hero {
    padding-top: var(--space-32);
}

.hero h1 {
    font-size: clamp(2.4rem, 5vw, var(--text-5xl));
}

.hero__actions {
    display: flex;
    gap: var(--space-4);
    margin-top: var(--space-8);
}

/* Forms */
form label {
    display: block;
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
    font-weight: 600;
    font-size: var(--text-sm);
}

form input,
form select,
form textarea {
    width: 100%;
    padding: 0.7rem 0.85rem;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-family: inherit;
    font-size: var(--text-base);
    transition: border-color var(--duration-fast) var(--ease-standard);
}

form input:focus,
form select:focus,
form textarea:focus {
    border-color: var(--color-accent);
}

form .checkbox {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-weight: 400;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

form .checkbox input {
    width: auto;
    margin-top: 3px;
}

.field-error {
    color: var(--color-error);
    font-size: var(--text-sm);
    margin-top: var(--space-1);
}

.alert {
    padding: var(--space-4);
    border-radius: var(--radius-md);
}

.alert--success {
    background: rgba(47, 128, 255, 0.12);
    border: 1px solid var(--color-accent);
}

.alert--error {
    background: rgba(255, 107, 107, 0.1);
    border: 1px solid var(--color-error);
}

blockquote {
    margin: 0;
    padding-left: var(--space-6);
    border-left: 2px solid var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    color: var(--color-text);
    max-width: 720px;
}

/* Service-page content blocks */
.content-block {
    padding: var(--space-12) 0;
    border-top: 1px solid var(--color-border);
}

/* Zwei Spalten: links die Ueberschrift, rechts der Inhalt.

   Der Grund ist die Lesbarkeit. Ueber die volle Breite von 1400px waeren das
   Zeilen mit rund 180 Zeichen — bei denen findet das Auge beim Umbruch den
   naechsten Zeilenanfang nicht wieder. Die Ueberschrift links fuellt die
   Breite, die dadurch frei wird, statt sie leer zu lassen. */

.content-block__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-4);
}

@media (min-width: 62rem) {
    .content-block__inner {
        grid-template-columns: minmax(0, 16rem) minmax(0, 1fr);
        gap: var(--space-12);
        align-items: start;
    }
}

.content-block__head h2 {
    margin: 0;
    font-size: var(--text-2xl);
    line-height: var(--leading-snug);
    text-wrap: balance;
}

.content-block__body {
    /* Lesebreite. Karten- und Projektraster duerfen darueber hinaus, sie
       tragen keinen Fliesstext. */
    max-width: 46rem;
}

.content-block__body > .card-grid,
.content-block__body > .related-links {
    max-width: none;
}

@media (min-width: 62rem) {
    .content-block__body:has(> .card-grid),
    .content-block__body:has(> .project-card),
    .content-block__body:has(> .lead-form) {
        max-width: none;
    }
}

/* Fliesstext aus dem Editor. Ohne diese Regeln stehen Absaetze und
   Aufzaehlungen im Browser-Standard, waehrend der Rest der Seite ein
   eigenes Raster hat. */

.rich {
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: 1.75;
}

.rich > :first-child {
    margin-top: 0;
}

.rich > :last-child {
    margin-bottom: 0;
}

.rich p {
    margin: 0 0 var(--space-6);
}

.rich h3,
.rich h4 {
    margin: var(--space-8) 0 var(--space-3);
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-xl);
}

.rich a {
    color: var(--color-accent);
    text-underline-offset: 0.2em;
}

.rich ul,
.rich ol {
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.rich li {
    position: relative;
    margin-bottom: var(--space-3);
    padding-left: var(--space-6);
}

.rich ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-accent);
}

.rich ol {
    counter-reset: schritt;
}

.rich ol > li {
    counter-increment: schritt;
}

.rich ol > li::before {
    content: counter(schritt) ".";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.rich + .check-list,
.rich + .card-grid,
.rich + .related-links,
.rich + .lead-form {
    margin-top: var(--space-8);
}

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

.check-list li {
    padding-left: var(--space-6);
    position: relative;
    margin-bottom: var(--space-3);
    color: var(--color-text-secondary);
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}

.content-block__followup {
    margin-top: var(--space-6);
}

.related-links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
}

.related-links a {
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text);
}

.related-links a:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

@media (max-width: 720px) {
    .content-block__grid {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }
}

/* Breadcrumbs */
.breadcrumbs {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-bottom: var(--space-4);
}

/* FAQ (native <details>) */
.faq-item {
    border-bottom: 1px solid var(--color-border);
}

.faq-item:first-child {
    border-top: 1px solid var(--color-border);
}

.faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

/* Ein Zeichen statt eines Bildes: das Pluszeichen dreht sich beim Aufklappen
   zum Minus. Kein zusaetzlicher Netzabruf fuer ein Symbol. */
.faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--color-accent);
    font-size: var(--text-xl);
    line-height: 1;
    transition: transform var(--duration-base) var(--ease-standard);
}

.faq-item[open] summary::after {
    transform: rotate(45deg);
}

.faq-item summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.faq-item > p {
    margin: 0 0 var(--space-4);
    max-width: 46rem;
    color: var(--color-text-secondary);
    line-height: var(--leading-normal);
}

.page-faq details {
    border-top: 1px solid var(--color-border);
    padding: var(--space-4) 0;
}

.page-faq summary {
    cursor: pointer;
    font-weight: 600;
}

.page-faq p {
    color: var(--color-text-secondary);
    margin-top: var(--space-3);
    margin-bottom: 0;
}

/* Footer */
.site-footer {
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-24);
    padding: var(--space-16) 0 var(--space-6);
}

.site-footer__inner {
    display: grid;
    grid-template-columns: 2fr repeat(3, 1fr);
    gap: var(--space-8);
}

.site-footer h2 {
    font-family: var(--font-sans);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-4);
}

.site-footer nav {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.site-footer a {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

.site-footer a:hover {
    color: var(--color-text);
}

.site-footer__legal {
    margin-top: var(--space-8);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
}

/* Blog */
.blog-post__content {
    max-width: 720px;
}

.blog-related ul {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* Browser mockup — abstract, no photography (see components/browser-mockup.php) */
.browser-mockup {
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.browser-mockup__bar {
    display: flex;
    gap: 6px;
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.browser-mockup__bar span {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-border-strong);
}

.browser-mockup__body {
    padding: var(--space-6);
}

.browser-mockup__nav {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}

.browser-mockup__logo-dot {
    width: 14px;
    height: 14px;
    border-radius: var(--radius-sm);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    margin-right: var(--space-2);
}

.browser-mockup__nav-line {
    width: 34px;
    height: 6px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
}

.browser-mockup__title-line {
    display: block;
    height: 12px;
    border-radius: var(--radius-pill);
    background: var(--color-border-strong);
    margin-bottom: var(--space-3);
}

.browser-mockup__title-line--lg {
    width: 70%;
}

.browser-mockup__title-line--md {
    width: 45%;
}

.browser-mockup__cta {
    display: block;
    width: 88px;
    height: 22px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    margin-top: var(--space-4);
}

.browser-mockup__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-3);
    margin-top: var(--space-8);
}

.browser-mockup__cards span {
    height: 44px;
    border-radius: var(--radius-md);
    background: var(--color-bg-raised-2);
    border: 1px solid var(--color-border);
}

.browser-mockup__cards--dense {
    grid-template-columns: repeat(4, 1fr);
    margin-top: var(--space-3);
}

.browser-mockup__cards--dense span {
    height: 20px;
}

/* "old" variant: cluttered, muted, no accent — represents the outdated site
   in the before/after comparison */
.browser-mockup--old .browser-mockup__logo-dot,
.browser-mockup--old .browser-mockup__cta {
    background: var(--color-border-strong);
}

.browser-mockup--old .browser-mockup__body {
    opacity: 0.7;
}

/* Hero */
.hero__grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: var(--space-16);
    align-items: center;
}

.hero__visual {
    position: relative;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero__badge {
    position: absolute;
    background: var(--color-bg-raised);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    padding: var(--space-3) var(--space-4);
    box-shadow: var(--shadow-md);
    animation: float 5s ease-in-out infinite;
}

.hero__badge-label {
    display: block;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

.hero__badge-value {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    color: var(--color-success);
}

.hero__badge--seo {
    top: -12px;
    right: -12px;
}

.hero__badge--perf {
    bottom: 24px;
    left: -20px;
    animation-delay: 1.5s;
}

/* Trust bar */
.trust-bar {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
}

.trust-bar__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-6);
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
}

/* Numeral grid — borderless alternative to .card-grid, used to break up
   repeated bordered-card sections down the page (see anti-AI-look pass) */
.numeral-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-8);
}

.numeral-item__num {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-3xl);
    font-weight: 800;
    color: var(--color-border-strong);
    margin-bottom: var(--space-3);
}

.numeral-item p {
    color: var(--color-text-secondary);
}

/* Complete showcase */
.complete__panel {
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg);
    background: linear-gradient(180deg, rgba(47, 128, 255, 0.08), transparent 60%);
    padding: var(--space-16);
}

.complete__text {
    max-width: 640px;
}

.complete__features {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-3);
    margin: var(--space-8) 0;
}

.complete__features li {
    padding-left: var(--space-6);
    position: relative;
}

.complete__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.5em;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
}

/* Before / after slider */
.before-after__frame {
    position: relative;
    max-width: 720px;
    margin: 0 auto;
    aspect-ratio: 16 / 11;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.before-after__layer {
    position: absolute;
    inset: 0;
}

.before-after__layer .browser-mockup {
    height: 100%;
    border: none;
    border-radius: 0;
}

.before-after__layer--before {
    clip-path: inset(0 50% 0 0);
}

/* Mit echten Bildschirmfotos statt der gezeichneten Attrappen.

   object-fit: cover und object-position: top, damit beide Aufnahmen denselben
   Ausschnitt zeigen — sonst verschiebt sich der Inhalt beim Ziehen und der
   Vergleich vergleicht die falschen Stellen.

   Das feste Seitenverhaeltnis des Rahmens weicht dabei einem freieren: ein
   Bildschirmfoto einer Startseite ist hochkant, 16/11 schnitte den halben
   Inhalt ab. */
.before-after__frame--images {
    aspect-ratio: 16 / 10;
}

.before-after__layer img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.before-after__handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background: var(--color-accent);
    pointer-events: none;
    transform: translateX(-1px);
}

.before-after__handle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-accent);
    transform: translate(-50%, -50%);
}

.before-after__range {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: ew-resize;
    appearance: none;
    -webkit-appearance: none;
}

.before-after__range::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 36px;
    height: 36px;
}

.before-after__tag {
    position: absolute;
    top: var(--space-4);
    z-index: 2;
    font-size: var(--text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-wide);
    background: rgba(5, 5, 7, 0.7);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-pill);
    pointer-events: none;
}

.before-after__tag--before {
    left: var(--space-4);
}

.before-after__tag--after {
    right: var(--space-4);
}

.before-after__note {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin-top: var(--space-4);
}

/* Referenzen */
/* Referenzkarten bekommen mehr Breite als die uebrigen Karten. Darin steht
   ein Fliesstext von zwei bis drei Saetzen; in einer 15rem-Spalte wird der zu
   einer schmalen Saeule von fuenfzehn Zeilen. Bei 20rem sind es sieben. */
@media (min-width: 75rem) {
    .card-grid:has(.project-card) {
        grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
    }
}

.project-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}

/* Feste Bildflaeche. Ohne sie ist die Attrappe hoeher als ein echter
   Screenshot — in einer Reihe beginnen die Ueberschriften dann auf
   unterschiedlicher Hoehe, und die Karte mit der Attrappe zieht die ganze
   Reihe in die Laenge. Was unten nicht mehr hineinpasst, wird abgeschnitten;
   der interessante Teil einer Startseite steht ohnehin oben. */
.project-card__preview {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 10;
    background: var(--color-bg-raised);
}

.project-card__preview > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.project-card__preview .browser-mockup {
    border: none;
    border-radius: 0;
    height: 100%;
    transition: transform var(--duration-base) var(--ease-standard);
}

.project-card:hover .browser-mockup {
    transform: scale(1.03);
}

.project-card__badge {
    position: absolute;
    top: var(--space-3);
    right: var(--space-3);
    margin: 0;
}

.project-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: var(--space-4) var(--space-6) var(--space-6);
}

/* Eine Stufe kleiner als die uebrigen h3. «Malerbetrieb Nordlicht» braucht
   in --text-xl zwei Zeilen, in --text-lg eine. */
.project-card__body h3 {
    font-size: var(--text-lg);
    margin-bottom: var(--space-2);
}

.project-card__body > p {
    margin-bottom: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.6;
}

/* Branche und Verweis nebeneinander. margin-top: auto haelt die Zeile am
   unteren Rand, damit sie in einer Reihe ungleich langer Texte auf gleicher
   Hoehe steht. */
.project-card__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--space-2) var(--space-4);
    margin-top: auto;
    padding-top: var(--space-4);
}

.project-card__meta {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

.project-card__link {
    margin: 0;
    font-size: var(--text-sm);
    font-weight: 600;
}

.referenzen__cta {
    margin-top: var(--space-8);
}

/* Process timeline */
.process-timeline {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-6);
    list-style: none;
}

.process-timeline li {
    position: relative;
    padding-top: var(--space-8);
    border-top: 2px solid var(--color-border);
}

.process-timeline__num {
    position: absolute;
    top: -14px;
    left: 0;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: var(--text-sm);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.process-timeline p {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

/* SEO / why-webvanta CTA spacing */
.seo-section__cta {
    margin-top: var(--space-8);
}

/* Testimonials */
.testimonial-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-8);
    background: var(--color-bg-raised);
}

.testimonial-card__quote {
    font-size: var(--text-lg);
}

.testimonial-card__author {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    margin: 0;
}

.testimonial-card--placeholder {
    border-style: dashed;
    background: transparent;
}

.testimonial-card--placeholder .testimonial-card__quote {
    color: var(--color-text-secondary);
    font-size: var(--text-base);
    font-style: italic;
}

/* CTA final */
.cta-final {
    text-align: center;
}

.cta-final__lead {
    margin: 0 auto var(--space-8);
}

.cta-final .btn {
    margin-top: 0;
}

/* ---- 5. Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
    .main-nav {
        display: none;
    }

    .site-header__cta {
        display: none;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .site-footer__inner {
        grid-template-columns: 1fr 1fr;
    }

    .hero__grid {
        grid-template-columns: 1fr;
    }

    .hero__visual {
        order: -1;
    }

    .process-timeline {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .process-timeline li {
        padding-top: 0;
        padding-left: var(--space-8);
        border-top: none;
        border-left: 2px solid var(--color-border);
    }

    .process-timeline__num {
        top: 0;
        left: -14px;
    }

    .complete__panel {
        padding: var(--space-8);
    }

    .trust-bar__list {
        justify-content: flex-start;
    }
}

@media (max-width: 540px) {
    .site-footer__inner {
        grid-template-columns: 1fr;
    }

    .hero__actions {
        flex-direction: column;
        align-items: flex-start;
    }

    .hero__badge {
        display: none;
    }
}

/* =========================================================================
   Ergänzungen gegenüber legacy/

   Alles oberhalb dieser Linie ist die unveränderte Vorgängerdatei, damit sich
   der Umzug nachvollziehen lässt. Was hier steht, ist im neuen System
   dazugekommen.
   ========================================================================= */

/* ---- Logo als Bilddatei ------------------------------------------------
   Statt Symbol plus Schriftzug im Markup wird dieselbe Datei eingebunden,
   die auch die Panels verwenden. Die alten Regeln .logo__mark und .logo__dot
   bleiben ungenutzt stehen — sie greifen nur, wenn das Markup sie mitbringt. */

.logo__image {
    display: block;
    height: 1.75rem;
    width: auto;
}

@media (max-width: 540px) {
    .logo__image {
        height: 1.5rem;
    }
}

/* ---- Kontaktstreifen am rechten Rand -----------------------------------
   Erscheint, sobald die Seite den Aufmacher verlässt. Ohne JavaScript bleibt
   er dauerhaft sichtbar — die Klasse blendet ihn nur weich ein. */

.contact-rail {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    z-index: 40;

    display: flex;
    flex-direction: column;
    gap: 1px;

    border: 1px solid var(--color-border);
    border-right: 0;
    border-radius: var(--radius-md) 0 0 var(--radius-md);
    overflow: hidden;
    background: var(--color-border);

    box-shadow: var(--shadow-md);
}

/* Nur wenn JavaScript den Streifen übernimmt, startet er ausgeblendet. */
.js .contact-rail {
    opacity: 0;
    visibility: hidden;
    transform: translate(0.75rem, -50%);
    transition:
        opacity var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard),
        visibility var(--duration-base) var(--ease-standard);
}

.js .contact-rail--visible {
    opacity: 1;
    visibility: visible;
    transform: translate(0, -50%);
}

.contact-rail__item {
    display: flex;
    align-items: center;
    gap: var(--space-2);

    padding: var(--space-3);
    background: var(--color-bg-raised);
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1;

    transition:
        background-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.contact-rail__item:hover,
.contact-rail__item:focus-visible {
    background: var(--color-bg-raised-2);
    color: var(--color-text);
}

.contact-rail__item--primary {
    color: var(--color-text);
}

.contact-rail__item--primary:hover,
.contact-rail__item--primary:focus-visible {
    background: var(--color-accent);
    color: #fff;
}

.contact-rail__icon svg {
    display: block;
    width: 18px;
    height: 18px;
}

/* Die Beschriftung ist zusammengeklappt und fährt beim Überfahren aus. So
   bleibt der Streifen schmal, ohne zur reinen Symbolleiste zu werden. */
.contact-rail__label {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition:
        max-width var(--duration-base) var(--ease-standard),
        opacity var(--duration-fast) var(--ease-standard);
}

.contact-rail:hover .contact-rail__label,
.contact-rail__item:focus-visible .contact-rail__label {
    max-width: 7rem;
    opacity: 1;
}

/* Auf schmalen Geräten würde der Streifen den Inhalt überdecken. Dort ist die
   Schaltfläche in der Kopfzeile der Weg zum Kontakt. */
@media (max-width: 720px) {
    .contact-rail {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .js .contact-rail,
    .contact-rail__label {
        transition: none;
    }
}

/* ---- Heller Modus -------------------------------------------------------
   Die Tokens oben sind der dunkle Modus und bleiben die Vorgabe — ohne
   JavaScript sieht die Seite aus wie bisher. Das Skript im <head> setzt
   data-theme, bevor gezeichnet wird; ein Umschalten ohne Aufblitzen der
   falschen Farben gibt es anders nicht.

   Gespeichert wird die Entscheidung im localStorage. Das ist keine
   Einwilligung nach TTDSG: der Wert dient allein der vom Besucher selbst
   ausgelösten Darstellung und verlässt das Gerät nicht. */

:root[data-theme="light"] {
    --color-bg: #ffffff;
    --color-bg-raised: #f7f8fa;
    --color-bg-raised-2: #eef0f4;
    --color-border: #e2e5ea;
    --color-border-strong: #cbd2dc;
    --color-text: #101318;
    --color-text-secondary: #5a6270;

    /* Beide Akzente eine Spur dunkler: auf Weiß fehlt dem Blau des dunklen
       Modus der Kontrast für Fließtext-Verweise. */
    --color-accent: #1a4fd6;
    --color-accent-2: #6d28d9;
    --color-success: #047857;
    --color-error: #b91c1c;

    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06);
    --shadow-md: 0 12px 32px rgba(16, 24, 40, 0.12);
}

/* Drei Flächen im Stylesheet des Vorgängers halten die dunkle Farbe fest
   verdrahtet — sie müssen über ein Token laufen, sonst bleiben sie im hellen
   Modus schwarz. Hier neu deklariert statt oben geändert, damit der
   übernommene Teil unangetastet bleibt. */

:root {
    --color-bg-translucent: rgba(5, 5, 7, 0.72);
}

:root[data-theme="light"] {
    --color-bg-translucent: rgba(255, 255, 255, 0.78);
}

.site-header--scrolled,
.before-after__tag {
    background: var(--color-bg-translucent);
}

/* ---- Umschalter für die Farbwelt ---------------------------------------
   Drei Zustände nebeneinander wie im Panel: hell, dunkel, System. Ohne
   JavaScript ausgeblendet — es gäbe nichts umzuschalten. */

.theme-switcher {
    display: none;
}

.js .theme-switcher {
    display: inline-flex;
    align-items: center;
    gap: 2px;

    padding: 3px;

    /* Vorher eine 1px-Kante ohne Fuellung: auf dunklem Grund war die Gruppe
       praktisch unsichtbar, und drei graue Symbole daneben lasen sich als
       Zierrat statt als Bedienelement. Jetzt eine abgesetzte Flaeche mit
       kraeftigerer Kante — sie soll als Schalter erkennbar sein, bevor man
       hinsieht. */
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: var(--color-bg-raised);
}

.theme-switcher__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Vorher 1,75rem. Das ist unter der Fingerkuppe eines Erwachsenen und
       war auch mit der Maus schwer zu treffen. */
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;

    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--color-text-secondary);
    cursor: pointer;

    transition:
        background-color var(--duration-fast) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard);
}

.theme-switcher__btn {
    border-radius: var(--radius-pill);
}

.theme-switcher__btn:hover {
    background: var(--color-bg-raised-2);
    color: var(--color-text);
}

/* Der gewählte Zustand muss sich deutlich abheben. Vorher unterschied ihn
   nur eine kaum hellere Fläche — man sah dem Umschalter nicht an, dass er
   überhaupt etwas tut. */
.theme-switcher__btn[aria-pressed="true"] {
    background: color-mix(in srgb, var(--color-accent) 20%, transparent);
    color: var(--color-accent);
}

.theme-switcher__btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.theme-switcher__btn svg {
    width: 18px;
    height: 18px;
}

/* Früher stand hier, auf schmalen Geräten genüge der Systemmodus. Das war
   eine Annahme über den Besucher: gerade am Telefon liest man abends im
   Dunkeln und will umschalten. Statt ihn auszublenden, wandert er dort in
   das Menü, wo Platz für Beschriftungen ist. */
@media (max-width: 640px) {
    .js .site-header__actions .theme-switcher {
        display: none;
    }
}

.mobile-nav__theme {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-top: var(--space-6);
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
}

.mobile-nav__theme-label {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

@media (min-width: 641px) {
    .mobile-nav__theme {
        display: none;
    }
}

/* ---- Logo je Modus ------------------------------------------------------
   Zwei Bilddateien, dieselben wie in den Panels: die Wortmarke ist einmal
   weiß und einmal dunkel. Beide stehen im Markup, sichtbar ist immer eine. */

.logo__image--light {
    display: none;
}

:root[data-theme="light"] .logo__image--light {
    display: block;
}

:root[data-theme="light"] .logo__image--dark {
    display: none;
}

/* ---- Kontaktformular ----------------------------------------------------
   Eingabefelder gab es im Vorgängerprojekt nur auf der Kontaktseite; deren
   Regeln sind hier zusammengefasst und auf die Tokens umgestellt, damit sie
   im hellen Modus mitgehen. */

.lead-form {
    max-width: 46rem;
}

.lead-form__form {
    display: grid;
    gap: var(--space-4);
}

.lead-form__row {
    display: grid;
    gap: var(--space-4);
}

@media (min-width: 40rem) {
    .lead-form__row {
        grid-template-columns: 1fr 1fr;
    }
}

.lead-form__field {
    display: grid;
    gap: var(--space-2);
}

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

.lead-form input[type="text"],
.lead-form input[type="email"],
.lead-form input[type="tel"],
.lead-form select,
.lead-form textarea {
    width: 100%;
    padding: var(--space-3);

    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-bg-raised);
    color: var(--color-text);

    font-family: inherit;
    font-size: var(--text-base);
    line-height: 1.5;

    transition: border-color var(--duration-fast) var(--ease-standard);
}

.lead-form textarea {
    resize: vertical;
    min-height: 8rem;
}

.lead-form input:focus,
.lead-form select:focus,
.lead-form textarea:focus {
    border-color: var(--color-accent);
}

.lead-form__consent {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3);
    align-items: start;

    font-size: var(--text-sm);
    color: var(--color-text-secondary);
}

.lead-form__consent input {
    margin-top: 0.2em;
    width: 1rem;
    height: 1rem;
    accent-color: var(--color-accent);
}

.lead-form__note {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--color-text-secondary);
}

.lead-form button {
    justify-self: start;
    border: 0;
    cursor: pointer;
    font-family: inherit;
}

/* Der Honigtopf. Nicht display:none — manche Bots überspringen genau das.
   Aus dem Sichtfeld geschoben, aber technisch vorhanden. */
.lead-form__trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.lead-form__success {
    padding: var(--space-4);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-success) 10%, transparent);
    color: var(--color-text);
}

.lead-form__errors {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-error) 10%, transparent);
}

.lead-form__errors p {
    margin: 0 0 var(--space-2);
}

.lead-form__errors ul {
    margin: 0;
    padding-left: var(--space-6);
    font-size: var(--text-sm);
}

/* ---- Beiträge -------------------------------------------------------------

   Redaktioneller Teil der Agenturseite. Aufbau wie im Basis-Theme — zwei
   Spalten, feste Verzeichnisleiste rechts, je Block ein Abschnitt —, das
   Aussehen aber das dieser Seite: abgestufte dunkle Flächen, 1px-Kanten,
   Manrope in den Überschriften, Akzent sparsam.

   Bewusst hier und nicht in site.css: webvanta.de lädt nur dieses Stylesheet.
   Die Blade-Dateien sind für beide Themes dieselben, das Aussehen ist es nicht.

   Zwei Regeln aus dem Kopf dieser Datei gelten auch hier: Radien klein
   halten — Flächen sollen wie Paneele wirken, nicht wie Blasen. Und Schatten
   nur dort, wo etwas wirklich über der Fläche liegt, nie als Dekoration.

   ## Lesetypografie

   Fließtext ist hier kein Beiwerk, sondern der Zweck der Seite. Er steht
   deshalb in --color-text und nicht im gedämpften Grau, das sonst
   Nebenangaben trägt, eine Spur größer als der Rest der Seite und mit
   weiterem Zeilenabstand. Grauer 1rem-Text auf dunklem Grund über zwanzig
   Absätze ist der Hauptgrund, warum ein Blog billig aussieht.
   --------------------------------------------------------------------------- */

.post-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-12);
    padding: var(--space-16) 0 var(--space-24);
}

@media (min-width: 64rem) {
    .post-layout {
        grid-template-columns: minmax(0, 1fr) 17rem;
        gap: var(--space-16);
        align-items: start;
    }
}

.post-aside {
    order: -1;
}

@media (min-width: 64rem) {
    .post-aside {
        order: 0;
        position: sticky;

        /* Die Kopfzeile bleibt beim Scrollen sichtbar und ist rund 96px
           hoch — derselbe Wert wie bei section[id] weiter oben. */
        top: calc(96px + var(--space-6));
        max-height: calc(100vh - 96px - var(--space-12));
        overflow-y: auto;
        overscroll-behavior: contain;
    }
}

.post-hero {
    position: relative;
    margin-bottom: var(--space-4);
    border-radius: var(--radius-lg);
    overflow: hidden;
    isolation: isolate;
}

.post-hero__media {
    display: block;
    margin: 0;
}

.post-hero__media img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

@media (min-width: 48rem) {
    .post-hero__media img {
        aspect-ratio: 21 / 9;
    }
}

/* ---- Farbiges Band im Titelbild -------------------------------------------

   Ein Band in der Hausfarbe ueber dem unteren Bildrand, halbdurchsichtig, so
   dass das Foto darunter noch durchscheint. Darueber ein kurzer Verlauf in
   dieselbe Farbe: eine harte Oberkante quer durchs Bild wirkt wie ein
   Klebestreifen.

   Der Farbanteil ist bewusst hoch genug, dass weisse Schrift auf jedem Foto
   liest — auch auf hellem Himmel, der in genau diesem Bildbereich haeufig
   vorkommt.
   --------------------------------------------------------------------------- */

.post-hero__overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: var(--space-6) var(--space-8);
    background: color-mix(in srgb, var(--color-accent) 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-accent) 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: var(--tracking-wide);
    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-display);
    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-accent);
    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-secondary);
    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-secondary);
    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;
    margin-bottom: var(--space-8);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
    overflow: hidden;
}

.content-card:last-child {
    margin-bottom: 0;
}

.content-card__heading {
    margin: 0;
    padding: var(--space-4) var(--space-6);
    background: var(--color-accent);
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.015em;
    text-wrap: balance;
    scroll-margin-top: 120px;
}

.content-card__body {
    padding: var(--space-6);
    max-width: 44rem;
    color: var(--color-text);
    font-size: var(--text-lg);
    line-height: 1.75;
}

.content-card__body > :first-child {
    margin-top: 0;
}

.content-card__body > :last-child {
    margin-bottom: 0;
}

.content-card__body p {
    margin: 0 0 var(--space-6);
}

.content-card__body h2,
.content-card__body h3,
.content-card__body h4 {
    margin: var(--space-12) 0 var(--space-4);
    color: var(--color-accent);
    font-family: var(--font-display);
    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-accent);
    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-accent);
}

.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-accent);
    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-accent);
    color: var(--color-text-secondary);
}

.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-secondary);
    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-accent) 22%, transparent);
    color: var(--color-text);
}

.content-card__body code {
    padding: 0.15em 0.4em;
    border-radius: var(--radius-sm);
    background: var(--color-bg-raised-2);
    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-raised-2);
    color: var(--color-text);
    font-weight: 600;
}

.content-card__body td > p:only-child,
.content-card__body th > p:only-child {
    margin: 0;
}

/* ---- Inhaltsverzeichnis ----------------------------------------------------

   Aufgeraeumt wie im Vorbild: heller Kasten, Ueberschrift in der Hausfarbe,
   darunter eine schlichte Punktliste. Keine Kanten, keine Flaechen hinter den
   Eintraegen — die Leiste soll ruhig stehen, nicht mitscrollen und blinken.
   --------------------------------------------------------------------------- */

.toc {
    padding: var(--space-6);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised-2);
    font-size: var(--text-sm);
}

.toc__heading {
    margin: 0;
    color: var(--color-accent);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 700;
    line-height: 1.3;
    cursor: pointer;
}

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

@media (min-width: 64rem) {
    /* Danebenstehend ist das Zuklappen sinnlos — der Pfeil waere ein Knopf,
       der Platz spart, wo keiner fehlt. */
    .toc__heading {
        cursor: default;
        list-style: none;
        pointer-events: none;
    }

    .toc__heading::-webkit-details-marker {
        display: none;
    }
}

.toc__list {
    margin: 0;
    padding-left: var(--space-4);
    list-style: disc;
}

.toc__list .toc__list {
    margin: var(--space-1) 0 var(--space-2);
    list-style: circle;
}

.toc__item {
    margin-bottom: var(--space-2);
    color: var(--color-accent);
}

.toc__item > a {
    color: var(--color-text);
    line-height: 1.45;
    text-decoration: none;
}

.toc__item > a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.toc__item > a:focus-visible {
    outline: 2px solid var(--color-accent);
    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-accent);
    font-weight: 600;
}

/* ---- Autorenkasten --------------------------------------------------------- */

.post-author {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-6);
    margin-top: var(--space-16);
    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
}

.post-author__monogram {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
    color: #fff;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.post-author__body {
    flex: 1 1 18rem;
}

.post-author__name {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-weight: 700;
}

.post-author__role {
    display: block;
    color: var(--color-text-secondary);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    font-weight: 400;
}

.post-author__text {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ---- Weiterführende Beiträge ------------------------------------------------

   Karten ohne Bild: das Beitragsbild steckt in der JSON-Spalte des jeweiligen
   Templates und heißt dort nicht überall gleich. Bis die Medienverwaltung
   steht, tragen Kategorie, Titel und Anrisstext die Karte — mit einer
   Akzentkante oben, damit die Reihe nicht wie drei leere Kästen wirkt.
   --------------------------------------------------------------------------- */

.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 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
    gap: var(--space-6);
    margin: 0;
    padding: 0;
    list-style: none;
}

.teaser {
    margin: 0;
}

.teaser__link {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    height: 100%;
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
    color: inherit;
    text-decoration: none;
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard);
}

.teaser__link:hover {
    border-color: var(--color-border-strong);
    border-top-color: var(--color-accent);
    background: var(--color-bg-raised-2);
}

.teaser__link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.teaser__category {
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.teaser__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: var(--leading-snug);
    letter-spacing: -0.01em;
    text-wrap: balance;
}

.teaser__text {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

/* ---- Übersicht und Kategorieseite ------------------------------------------

   /ratgeber und /ratgeber/kategorie/{slug}. Derselbe Kartensatz wie unter
   dem Beitrag — eine Übersicht ist nichts anderes als eine längere Reihe
   weiterführender Beiträge.
   --------------------------------------------------------------------------- */

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

.page__header {
    max-width: 40rem;
    margin-bottom: var(--space-12);
}

.page__header h1 {
    margin: 0;
    font-size: clamp(2.125rem, 1.3rem + 3vw, var(--text-4xl));
    letter-spacing: -0.025em;
}

.page__header .prose {
    margin-top: var(--space-4);
    color: var(--color-text-secondary);
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
}

.post-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
    gap: var(--space-6);
}

.post-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-top: 2px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
    transition:
        border-color var(--duration-base) var(--ease-standard),
        background-color var(--duration-base) var(--ease-standard);
}

.post-card:hover {
    border-color: var(--color-border-strong);
    border-top-color: var(--color-accent);
    background: var(--color-bg-raised-2);
}

.post-card__meta {
    margin: 0;
    color: var(--color-accent);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
}

.post-card h2 {
    margin: 0;
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    text-wrap: balance;
}

.post-card h2 a {
    color: inherit;
    text-decoration: none;
}

.post-card h2 a:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
}

.post-card p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
}

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

/* Blätterwerk unter der Übersicht. */
.post-grid + nav {
    margin-top: var(--space-12);
}

/* Ein automatisch gesetzter interner Verweis. Hebt sich vom gewöhnlichen Link
   ab, weil er nicht vom Redakteur an dieser Stelle gemeint war, sondern aus
   dem Schlagwort eines anderen Beitrags stammt. */

.internal-link {
    text-decoration-thickness: 2px;
    text-underline-offset: 0.2em;
}

/* ---- 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-lg);
    overflow: hidden;
    background: var(--color-bg-raised-2);
    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-accent);
    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-accent) 30%, transparent),
        var(--color-bg-raised-2)
    );
}

.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-accent) 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-accent) 85%, transparent),
        transparent
    );
    pointer-events: none;
}

.media-card__meta {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    opacity: 0.85;
}

.media-card__title {
    font-family: var(--font-display);
    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;
    }
}

/* ---- Blockarten im Beitrag ------------------------------------------------

   Text mit Bild, Merkmale, Oeffnungszeiten, Galerie, Akkordeon. Jede Art hat
   ihr eigenes Partial unter themes/base/partials/blocks/ — das Markup ist fuer
   beide Themes dasselbe, das Aussehen nicht.
   --------------------------------------------------------------------------- */

/* Text mit Bild */

.block-media {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-6);
    align-items: start;
}

@media (min-width: 48rem) {
    .block-media {
        grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
        gap: var(--space-8);
    }

    /* Nur die Spaltenfolge tauschen, nicht die Reihenfolge im Markup: der
       Text bleibt fuer Vorleseprogramme und ohne CSS immer zuerst. */
    .block-media--reverse .block-media__text {
        order: 2;
    }

    .block-media--reverse .block-media__image {
        order: 1;
    }
}

.block-media__text > :first-child {
    margin-top: 0;
}

.block-media__text > :last-child {
    margin-bottom: 0;
}

.block-media__image {
    margin: 0;
}

.block-media__image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
}

/* Merkmale */

.feature-boxes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-4);
    margin: 0;
}

.feature-box {
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg-raised-2);
}

.feature-box__label {
    margin: 0 0 var(--space-2);
    color: var(--color-text-secondary);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.feature-box__value {
    margin: 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: 700;
    line-height: 1.3;
}

/* Oeffnungszeiten */

.hours {
    display: table;
    width: 100%;
    margin: 0;
    border-collapse: collapse;
}

.hours th,
.hours td {
    padding: var(--space-3) 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: baseline;
}

.hours th {
    color: var(--color-text-secondary);
    font-weight: 400;
}

.hours td {
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    text-align: right;
    white-space: nowrap;
}

.hours tr:last-child th,
.hours tr:last-child td {
    border-bottom: 0;
}

/* Galerie */

.gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.gallery__item {
    margin: 0;
    padding: 0;
}

.gallery__item::before {
    display: none;
}

.gallery__item img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Akkordeon — dieselben Aufklapper wie bei den haeufigen Fragen einer
   Inhaltsseite, damit ein Besucher sie nicht zweimal lernen muss. */

.accordion .faq-item {
    border-bottom: 1px solid var(--color-border);
}

.accordion .faq-item:first-child {
    border-top: 1px solid var(--color-border);
}

.accordion .faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

.accordion .faq-item summary::-webkit-details-marker {
    display: none;
}

.accordion .faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    color: var(--color-accent);
    font-size: var(--text-xl);
    line-height: 1;
    transition: transform 200ms ease;
}

.accordion .faq-item[open] summary::after {
    transform: rotate(45deg);
}

.accordion .faq-item summary:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.accordion .faq-item > p {
    margin: 0 0 var(--space-4);
    color: var(--color-text-secondary);
}

/* Die Blockarten stehen im Fliesstext-Container und duerfen dessen
   Listenpunkte nicht erben. */

.prose .feature-boxes li,
.prose .gallery li {
    margin: 0;
    padding-left: 0;
}

.prose .feature-boxes li::before,
.prose .gallery li::before {
    content: none;
}

/* ---- Kontakt-Einladung ----------------------------------------------------

   Die Karte, die nach einem Moment unten aufklappt. Bewusst kein Modal: sie
   dunkelt nichts ab, faengt keinen Fokus und liegt neben dem Inhalt statt
   davor. Wer sie schliesst, bekommt sie nicht wieder.

   Auf schmalen Geraeten sitzt sie am unteren Rand ueber die volle Breite —
   eine Karte, die dort in einer Ecke klebt, verdeckt genau den Daumenbereich.
   --------------------------------------------------------------------------- */

.invite {
    position: fixed;
    z-index: 60;
    inset: auto var(--space-4) var(--space-4) var(--space-4);

    max-width: 22rem;
    padding: var(--space-6);

    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised);
    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-secondary);
    font-size: 1.25rem;
    line-height: 1;
    cursor: pointer;
}

.invite__close:hover {
    background: var(--color-bg-raised-2);
    color: var(--color-text);
}

.invite__close:focus-visible {
    outline: 2px solid var(--color-accent);
    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-accent) 14%, transparent);
    color: var(--color-accent);
}

.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-display);
    font-weight: 700;
    line-height: 1.25;
}

.invite__role {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
    line-height: 1.35;
}

.invite__text {
    margin: 0 0 var(--space-5);
    color: var(--color-text-secondary);
    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.
   --------------------------------------------------------------------------- */

.btn:focus-visible,
.button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Gross: die eine Aufforderung, auf die eine Seite hinauslaeuft. */
.btn--lg,
.button--lg {
    min-height: 3.25rem;
    padding-inline: var(--space-8);
    font-size: var(--text-base);
}

/* Der Abschluss einer Seite. Eine Aufforderung, nicht drei nebeneinander —
   wer die Wahl hat, entscheidet sich haeufiger fuer nichts. */
.cta-panel {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-4);

    padding: var(--space-8);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg-raised-2);
}

@media (min-width: 48rem) {
    .cta-panel {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: var(--space-8);
        padding: var(--space-8) var(--space-12);
    }
}

.cta-panel__text {
    max-width: 40rem;
}

.cta-panel__text > :first-child {
    margin-top: 0;
}

.cta-panel__text > :last-child {
    margin-bottom: 0;
}

/* ---- Farbwelt im Fussbereich ----------------------------------------------

   Derselbe Schalter ein zweites Mal. Nicht aus Verlegenheit, sondern weil
   genau dort danach gesucht wird, sobald er in der Kopfzeile nicht sofort
   auffaellt. header.js spricht alle .theme-switcher__btn an, beide Gruppen
   bleiben deshalb von selbst im Gleichschritt.
   --------------------------------------------------------------------------- */

.site-footer__theme {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.site-footer__theme-label {
    color: var(--color-text-secondary);
    font-size: var(--text-sm);
}

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

/* Bild ueber oder unter dem Text: einspaltig, damit das Bild die volle
   Breite bekommt. Die Reihenfolge im Markup ist Text, dann Bild — fuer
   «darueber» dreht das CSS sie um. */
.block-media--stacked {
    grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
    .block-media--stacked {
        grid-template-columns: minmax(0, 1fr);
    }
}

.block-media--above .block-media__image {
    order: -1;
}

.block-media__caption,
.block-image__caption {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

/* Reiner Bildblock */

.block-image {
    margin: 0;
}

.block-image img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* Breiter als der Text: die Lesebreite gilt fuer Fliesstext, nicht fuer ein
   Bild. Der negative Aussenabstand bleibt innerhalb des Containers, weil er
   nur die Differenz zur Lesebreite ausgleicht. */
@media (min-width: 64rem) {
    .block-image--wide {
        margin-inline: calc(var(--space-8) * -1);
    }

    .block-image--full {
        margin-inline: calc(var(--space-16) * -1);
    }
}

/* Zwei-Klick-Flaeche fuer Video und Karte */

.embed {
    margin: 0;
}

.embed__frame {
    position: relative;
    /* Feste Bildkante: ohne sie springt der Seiteninhalt in dem Moment, in
       dem das iframe entsteht. */
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-muted);
}

.embed--map .embed__frame {
    aspect-ratio: 4 / 3;
}

.embed__consent {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--space-6);
    border: 0;
    background: none;
    color: var(--color-text);
    font: inherit;
    text-align: center;
    cursor: pointer;
}

.embed__consent:hover .embed__action,
.embed__consent:focus-visible .embed__action {
    background: var(--color-primary);
    color: var(--color-primary-contrast);
}

.embed__heading {
    font-family: var(--font-heading);
    font-size: var(--text-lg);
    font-weight: 600;
    line-height: 1.3;
}

.embed__note {
    max-width: 46ch;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    line-height: 1.5;
}

.embed__action {
    margin-top: var(--space-2);
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-primary);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* Die beiden Sinnbilder sind gezeichnet und keine Datei: ein Bild vom
   Anbieter zu laden waere genau die Uebertragung, die hier verhindert wird —
   und eine eigene Datei waere ein weiterer Abruf fuer zwei Formen. */
.embed__play {
    position: relative;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: var(--color-primary);
}

.embed__play::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%, -50%);
    border-style: solid;
    border-width: 0.65rem 0 0.65rem 1.05rem;
    border-color: transparent transparent transparent var(--color-primary-contrast);
}

.embed__pin {
    width: 2.25rem;
    height: 2.25rem;
    border: 3px solid var(--color-primary);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
}

.embed__iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.embed__fallback {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
}

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

/* ---- Referenz als Geraeteensemble ---------------------------------------

   Monitor, Tablet und Telefon auf farbigem Grund — die Darstellung, in der
   eine Agentur ihre Arbeiten zeigt. Alle Rahmen sind gezeichnet: keine
   zusaetzliche Datei, kein Abruf, und im Dunkelmodus stimmt es weiterhin.

   Die Flaeche ist absolut positioniert aufgebaut und nicht als Raster: die
   Geraete ueberlappen sich, und genau die Ueberlappung macht den Eindruck.
   ------------------------------------------------------------------------ */

.device-stage {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        radial-gradient(60% 80% at 75% 15%, rgb(47 128 255 / 0.35), transparent 70%),
        linear-gradient(160deg, var(--color-bg-raised), var(--color-bg));
}

/* Ohne Bild traegt der Monitor die abstrakte Attrappe. Dann darf der Grund
   ruhiger sein — sonst konkurrieren zwei Platzhalter miteinander. */
.device-stage--empty {
    background: linear-gradient(160deg, var(--color-bg-raised), var(--color-bg));
}

.device-stage__screen {
    overflow: hidden;
    width: 100%;
    height: 100%;
    background: var(--color-bg);
}

.device-stage__screen > img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.device-stage .browser-mockup {
    height: 100%;
    border: none;
    border-radius: 0;
}

/* Monitor: rechts oben, der groesste Anteil der Flaeche. */
.device-stage__desktop {
    position: absolute;
    top: 8%;
    right: 4%;
    width: 68%;
    aspect-ratio: 16 / 10;
    padding: 0.5%;
    border-radius: 0.5rem;
    background: #d8dce3;
    box-shadow: 0 18px 36px rgb(0 0 0 / 0.28);
}

.device-stage__desktop .device-stage__screen {
    border-radius: 0.25rem;
}

/* Der Fuss des Monitors: zwei Formen aus einem Element — der Hals ueber die
   Breite des Elements, der Teller ueber seinen Schatten. */
.device-stage__stand {
    position: absolute;
    bottom: -8%;
    left: 50%;
    width: 12%;
    height: 8%;
    transform: translateX(-50%);
    background: #d8dce3;
    box-shadow: 0 0.6rem 0 -0.15rem #c3c8d1;
}

/* Tablet: links, halb hinter dem Telefon. */
.device-stage__tablet {
    position: absolute;
    bottom: 6%;
    left: 3%;
    width: 30%;
    aspect-ratio: 3 / 4;
    padding: 0.6%;
    border-radius: 0.55rem;
    background: #cfd4dc;
    box-shadow: 0 14px 28px rgb(0 0 0 / 0.26);
}

.device-stage__tablet .device-stage__screen {
    border-radius: 0.3rem;
}

/* Der Ausschnitt des Tablets zeigt die Mitte der Seite, nicht wieder den
   Kopfbereich — sonst sieht es aus wie eine geschrumpfte Kopie. */
.device-stage__tablet .device-stage__screen > img {
    object-position: center 35%;
}

/* Telefon: ganz vorn, angeschnitten. */
.device-stage__phone {
    position: absolute;
    bottom: 2%;
    left: 20%;
    width: 15%;
    aspect-ratio: 9 / 19;
    padding: 0.8%;
    border-radius: 0.7rem;
    background: #23272f;
    box-shadow: 0 12px 24px rgb(0 0 0 / 0.34);
}

.device-stage__phone .device-stage__screen {
    border-radius: 0.45rem;
}

.device-stage__phone .device-stage__screen > img {
    object-position: center 20%;
}

/* Beschriftung wie auf einem Portfolioblatt: unten links, auf einem
   Balken, damit sie auf jedem Bilduntergrund lesbar bleibt. */
.device-stage__caption {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0;
    padding: var(--space-2) var(--space-4);
    background: var(--color-bg-raised);
    color: var(--color-text);
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.01em;
}

/* Die ganze Buehne hebt sich beim Ueberfahren leicht — dieselbe Regung, die
   die Attrappe vorher allein hatte. */
.project-card .device-stage {
    transition: transform var(--duration-base) var(--ease-standard);
}

.project-card:hover .device-stage {
    transform: scale(1.02);
}

/* Auf schmalen Karten wird das Telefon zur Stoerung: drei Geraete auf
   16 rem Breite sind kein Ensemble mehr, sondern ein Gedraenge. */
@media (max-width: 30rem) {
    .device-stage__phone {
        display: none;
    }

    .device-stage__tablet {
        width: 26%;
    }
}