/* ==========================================================================
   Design-Tokens

   Die Palette ist aus den Referenzbildern abgeleitet: das Anthrazit und die
   Silbertöne stammen aus dem Chromschriftzug, Orange und Gold aus der Flamme,
   das warme Greige aus Bildhintergrund und Staub. Chrom trägt die Fläche,
   die Flamme markiert ausschließlich Handlungen — deshalb steht Orange nie
   dekorativ, sondern immer dort, wo geklickt werden soll.
   ========================================================================== */

:root {
    --background: 213 14% 7%;
    --surface:    213 13% 10%;
    --card:       213 12% 12%;
    --elevated:   212 11% 16%;

    --foreground:       210 18% 96%;
    --muted-foreground: 212 10% 66%;
    --border:           212 11% 20%;
    --border-strong:    211 10% 30%;

    --primary:            29 96% 53%;
    --primary-foreground: 24 45% 8%;
    --gold:               42 94% 58%;
    --ember:              14 88% 47%;

    /* Heller Abschnitt: Sand aus dem Bildhintergrund, dazu ein warmes Dunkel. */
    --sand:        36 18% 85%;
    --sand-deep:   34 14% 75%;
    --sand-ink:    30 12% 14%;
    --sand-muted:  30 8% 36%;

    --radius:    0.75rem;
    --radius-lg: 1.25rem;

    /* Gebürstetes Chrom: harte Hell-Dunkel-Kante in der Mitte, weiche Ränder. */
    --chrome: linear-gradient(177deg,
        hsl(210 35% 99%) 0%,
        hsl(211 22% 86%) 22%,
        hsl(212 14% 46%) 48%,
        hsl(212 16% 66%) 53%,
        hsl(210 28% 97%) 78%,
        hsl(211 14% 72%) 100%);

    --flame: linear-gradient(100deg, hsl(var(--ember)) 0%, hsl(var(--primary)) 48%, hsl(var(--gold)) 100%);

    --glow-primary: 0 0 36px hsl(var(--primary) / 0.28);
    --glow-strong:  0 0 60px hsl(var(--primary) / 0.42);
    --shadow-card:  0 1px 2px hsl(213 30% 2% / 0.6), 0 12px 32px -12px hsl(213 30% 2% / 0.7);

    --navbar-height: 4rem;
}

/* ==========================================================================
   Basis
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
    border: 0 solid hsl(var(--border));
}

html {
    scroll-behavior: smooth;
    /* Anker landen sonst unter der fixierten Navbar. */
    scroll-padding-top: calc(var(--navbar-height) + 1rem);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    min-height: 100vh;
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sora', system-ui, sans-serif;
    margin: 0;
    line-height: 1.15;
    letter-spacing: -0.02em;
}

p {
    margin: 0;
}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

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

button {
    font: inherit;
    color: inherit;
    background: none;
    cursor: pointer;
    padding: 0;
}

input, select, textarea {
    font: inherit;
    color: inherit;
}

:focus-visible {
    outline: 2px solid hsl(var(--primary));
    outline-offset: 2px;
    border-radius: 4px;
}

/* ==========================================================================
   Layout-Hilfen
   ========================================================================== */

.container {
    width: 100%;
    margin-inline: auto;
    padding-inline: 1.25rem;
}

@media (min-width: 640px)  { .container { max-width: 640px; } }
@media (min-width: 768px)  { .container { max-width: 768px; } }
@media (min-width: 1024px) { .container { max-width: 1024px; } }
@media (min-width: 1280px) { .container { max-width: 1200px; } }

/* Chromschrift. Ohne Textschatten wirkt der Verlauf flach — der dunkle
   Schatten unter der Kante gibt der Schrift die Tiefe des Vorbilds. */
.text-chrome {
    background-image: var(--chrome);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 1px hsl(213 20% 3% / 0.55));
}

.text-flame,
.text-gradient {
    background-image: var(--flame);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.icon {
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
}

.icon--16 { width: 1rem;    height: 1rem; }
.icon--20 { width: 1.25rem; height: 1.25rem; }
.icon--24 { width: 1.5rem;  height: 1.5rem; }
.icon--32 { width: 2rem;    height: 2rem; }

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

/* ==========================================================================
   Marke
   ========================================================================== */

.brand {
    display: inline-flex;
    align-items: center;
    gap: 0.625rem;
}

/* Signet: das Detektiv-Motiv der Marke. Einfarbig statt mit Verlauf, damit es
   auch bei Faviconkantenlänge lesbar bleibt. */
.brand__logo {
    width: 2.375rem;
    height: 2.375rem;
    color: hsl(210 16% 90%);
    transition: color 0.2s ease;
}

.brand:hover .brand__logo { color: hsl(var(--primary)); }

.brand__name {
    font-family: 'Sora', system-ui, sans-serif;
    font-weight: 600;
    font-size: 1.125rem;
    letter-spacing: -0.01em;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.8125rem 1.5rem;
    border-radius: var(--radius);
    background-image: var(--flame);
    color: hsl(var(--primary-foreground));
    font-size: 0.9375rem;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 2px 16px hsl(var(--primary) / 0.28);
    transition: box-shadow 0.25s ease, transform 0.15s ease, opacity 0.2s ease;
}

.button:hover {
    box-shadow: var(--glow-strong);
    transform: translateY(-1px);
}

.button:active { transform: translateY(0); }

.button[disabled],
.button[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.button--ghost {
    background-image: none;
    background-color: transparent;
    border: 1px solid hsl(var(--border-strong));
    color: hsl(var(--foreground));
    box-shadow: none;
}

.button--ghost:hover {
    border-color: hsl(var(--primary) / 0.6);
    background-color: hsl(var(--primary) / 0.07);
    box-shadow: none;
}

.button--lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.button--block { width: 100%; }

/* ==========================================================================
   Badge
   ========================================================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4375rem 0.9375rem;
    border: 1px solid hsl(var(--border-strong));
    border-radius: 9999px;
    background-color: hsl(var(--elevated) / 0.7);
    font-size: 0.8125rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    color: hsl(var(--muted-foreground));
}

.badge__icon { color: hsl(var(--primary)); }

/* ==========================================================================
   Navbar
   ========================================================================== */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background-color: hsl(var(--background) / 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-bottom: 1px solid hsl(var(--border));
}

.navbar__bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    height: var(--navbar-height);
}

.navbar__links {
    display: none;
    align-items: center;
    gap: 1.75rem;
    margin-left: auto;
}

.navbar__links a,
.navbar__mobile a:not(.button) {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
}

.navbar__links a:hover,
.navbar__mobile a:not(.button):hover {
    color: hsl(var(--foreground));
}

.navbar__cta { display: none; }

.navbar__toggle {
    display: flex;
    align-items: center;
    color: hsl(var(--foreground));
}

.navbar__toggle-close { display: none; }

.navbar__toggle[aria-expanded="true"] .navbar__toggle-open  { display: none; }
.navbar__toggle[aria-expanded="true"] .navbar__toggle-close { display: block; }

.navbar__mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding-block: 1.25rem;
    border-top: 1px solid hsl(var(--border));
}

.navbar__mobile[hidden] { display: none; }

@media (min-width: 900px) {
    .navbar__links  { display: flex; }
    .navbar__cta    { display: inline-flex; }
    .navbar__toggle { display: none; }
    .navbar__mobile { display: none !important; }
}

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    padding-top: calc(var(--navbar-height) + 5rem);
    padding-bottom: 5.5rem;
    overflow: hidden;
}

/* Warmer Lichtkegel von oben — die Flamme des Vorbilds als Raumlicht. */
.hero__glow {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 50% at 50% 0%, hsl(var(--primary) / 0.16) 0%, transparent 65%),
        radial-gradient(ellipse 50% 40% at 80% 30%, hsl(var(--gold) / 0.07) 0%, transparent 70%);
}

.hero__orb {
    position: absolute;
    border-radius: 9999px;
    filter: blur(72px);
    animation: float 7s ease-in-out infinite;
}

.hero__orb--primary {
    top: 12%;
    left: 8%;
    width: 22rem;
    height: 22rem;
    background-color: hsl(var(--ember) / 0.09);
}

.hero__orb--accent {
    bottom: 8%;
    right: 6%;
    width: 18rem;
    height: 18rem;
    background-color: hsl(210 20% 70% / 0.05);
    animation-delay: -3.5s;
}

.hero__inner {
    position: relative;
    z-index: 10;
}

.hero__content {
    max-width: 54rem;
    margin-inline: auto;
    text-align: center;
}

.hero__title {
    font-size: clamp(2.25rem, 6.2vw, 4.25rem);
    font-weight: 700;
    margin-block: 2rem 1.5rem;
}

/* Ein Lichtreflex läuft einmal über die Chromschrift — derselbe Effekt, den
   poliertes Metall zeigt, wenn die Lichtquelle darüber wandert. Der Streifen
   ist ein zweiter Hintergrund-Layer über dem Grundverlauf, damit dieser stehen
   bleibt und nur das Licht sich bewegt. Danach ist Ruhe: eine Endlosschleife
   im Hero würde vom Lesen ablenken. */
.hero__title.text-chrome {
    background-image:
        linear-gradient(105deg,
            transparent 38%,
            hsl(213 22% 22% / 0.75) 45%,
            hsl(0 0% 100%) 50%,
            hsl(213 22% 28% / 0.5) 55%,
            transparent 62%),
        var(--chrome);
    background-size: 260% 100%, 100% 100%;
    background-repeat: no-repeat;
    animation: chrome-shine 2.6s cubic-bezier(0.45, 0.05, 0.3, 1) 0.55s both;
}

@keyframes chrome-shine {
    from { background-position: 180% 0, 0 0; }
    to   { background-position: -80% 0, 0 0; }
}

.hero__lead {
    font-size: clamp(1.0625rem, 2vw, 1.25rem);
    color: hsl(var(--muted-foreground));
    max-width: 44rem;
    margin-inline: auto;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 2.5rem;
}

.hero__note {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-top: 1.5rem;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

.hero__note li {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.hero__note .icon { color: hsl(var(--primary)); }

/* Kennzahlenleiste unter dem Hero */
.trustbar {
    position: relative;
    z-index: 10;
    padding-block: 2.25rem;
    border-block: 1px solid hsl(var(--border));
    background-color: hsl(var(--surface) / 0.6);
}

.trustbar__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1rem;
    text-align: center;
}

@media (min-width: 768px) {
    .trustbar__grid { grid-template-columns: repeat(4, 1fr); }
}

.trustbar__value {
    font-family: 'Sora', system-ui, sans-serif;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    line-height: 1;
}

.trustbar__label {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   Abschnitte
   ========================================================================== */

.section {
    position: relative;
    padding-block: clamp(4rem, 9vw, 7rem);
}

.section--surface { background-color: hsl(var(--surface)); }

/* Heller Abschnitt im Sandton der Vorlage — bricht die dunkle Seite auf. */
.section--sand {
    background-color: hsl(var(--sand));
    color: hsl(var(--sand-ink));
}

.section--sand .section-head p,
.section--sand .muted { color: hsl(var(--sand-muted)); }

.section-head {
    max-width: 44rem;
    margin-inline: auto;
    margin-bottom: 3.5rem;
    text-align: center;
}

.section-head .badge { margin-bottom: 1.25rem; }

.section-head h2 {
    font-size: clamp(1.75rem, 4vw, 2.75rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.section-head p {
    font-size: 1.0625rem;
    color: hsl(var(--muted-foreground));
}

.eyebrow {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: hsl(var(--primary));
}

/* ==========================================================================
   Ansatz: drei Wege im Vergleich
   ========================================================================== */

.compare {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 900px) {
    .compare { grid-template-columns: repeat(3, 1fr); }
}

.compare__item {
    display: flex;
    flex-direction: column;
    padding: 1.75rem;
    border: 1px solid hsl(var(--sand-deep));
    border-radius: var(--radius-lg);
    background-color: hsl(36 20% 91%);
}

/* Der mittlere Weg ist unser Angebot — er hebt sich als einziger ab. */
.compare__item--ours {
    border-color: hsl(var(--primary) / 0.55);
    background-color: hsl(213 14% 9%);
    color: hsl(var(--foreground));
    box-shadow: 0 18px 50px -20px hsl(var(--primary) / 0.5);
}

.compare__label {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.4375rem;
    padding: 0.3125rem 0.75rem;
    margin-bottom: 1.25rem;
    border-radius: 9999px;
    background-color: hsl(30 10% 82%);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--sand-muted));
}

.compare__item--ours .compare__label {
    background-image: var(--flame);
    color: hsl(var(--primary-foreground));
}

.compare__item h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 0.625rem;
}

.compare__item > p {
    font-size: 0.9375rem;
    color: hsl(var(--sand-muted));
    margin-bottom: 1.25rem;
}

.compare__item--ours > p { color: hsl(var(--muted-foreground)); }

.compare__points {
    display: grid;
    gap: 0.625rem;
    margin-top: auto;
    font-size: 0.875rem;
}

.compare__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.5625rem;
}

.compare__points .icon {
    margin-top: 0.1875rem;
    color: hsl(var(--sand-muted));
}

.compare__item--ours .compare__points .icon { color: hsl(var(--primary)); }

/* Arbeitsteilung als Balken. Die Breite der Segmente ist die Aussage — bei
   Done with you stehen zwei gleich grosse Haelften nebeneinander. */
.split {
    margin-bottom: 1.25rem;
}

.split__bar {
    display: flex;
    gap: 0.1875rem;
    height: 2.25rem;
}

.split__part {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.split__part--us {
    background-color: hsl(30 12% 74%);
    color: hsl(var(--sand-ink));
}

.split__part--you {
    background-color: hsl(32 14% 84%);
    color: hsl(var(--sand-muted));
}

/* In der hervorgehobenen Karte tragen die Haelften die Markenfarben: unsere
   Seite in der Flamme, die Kundenseite im Chrom. */
.compare__item--ours .split__part--us {
    background-image: var(--flame);
    color: hsl(var(--primary-foreground));
}

.compare__item--ours .split__part--you {
    background-image: var(--chrome);
    color: hsl(213 20% 14%);
}

/* Die Segmente decken sich beim Einblenden von außen nach innen auf. In der
   Done-with-you-Karte treffen sich dadurch zwei gleich große Hälften in der
   Mitte — die Aussage der Karte als Bewegung statt nur als Zahl. Getriggert
   wird über dieselbe is-visible-Klasse, die der Beobachter in main.js setzt. */
.reveal .split__part--us  { clip-path: inset(0 100% 0 0); }
.reveal .split__part--you { clip-path: inset(0 0 0 100%); }

.reveal.is-visible .split__part {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.8s cubic-bezier(0.22, 0.85, 0.24, 1);
    transition-delay: calc(var(--reveal-delay, 0s) + 0.3s);
}

/* Die hervorgehobene Karte läuft länger, damit das Zusammentreffen in der
   Mitte als eigener Moment wahrgenommen wird. */
.compare__item--ours.reveal.is-visible .split__part { transition-duration: 1.2s; }

/* Ohne JavaScript bleibt is-visible aus — dann müssen die Balken von Anfang
   an vollständig sein. */
.no-js .split__part { clip-path: inset(0 0 0 0); }

.split__legend {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--sand-muted));
}

.compare__item--ours .split__legend { color: hsl(var(--muted-foreground)); }

/* ==========================================================================
   Leistungskarten
   ========================================================================== */

.grid-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 700px)  { .grid-cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-cards { grid-template-columns: repeat(3, 1fr); } }

.card {
    position: relative;
    padding: 1.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    background-color: hsl(var(--card));
    box-shadow: var(--shadow-card);
    transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.card:hover {
    border-color: hsl(var(--primary) / 0.45);
    transform: translateY(-3px);
    box-shadow: var(--shadow-card), var(--glow-primary);
}

.card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    margin-bottom: 1.25rem;
    border: 1px solid hsl(var(--primary) / 0.28);
    border-radius: 0.875rem;
    background-color: hsl(var(--primary) / 0.11);
    color: hsl(var(--primary));
    transition: background-color 0.25s ease;
}

.card:hover .card__icon { background-color: hsl(var(--primary) / 0.2); }

.card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.card p {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
}

.card__meta {
    display: block;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid hsl(var(--border));
    font-size: 0.8125rem;
    color: hsl(var(--primary));
}

/* ==========================================================================
   Ablauf
   ========================================================================== */

.steps {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    counter-reset: step;
}

@media (min-width: 700px)  { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .steps { grid-template-columns: repeat(4, 1fr); } }

.step {
    position: relative;
    padding: 1.75rem 1.5rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    background-color: hsl(var(--card));
}

/* Verbindungslinie zwischen den Schritten, nur in der vierspaltigen Ansicht. */
@media (min-width: 1100px) {
    .step:not(:last-child)::after {
        content: '';
        position: absolute;
        top: 3.125rem;
        right: -1.3125rem;
        width: 1.375rem;
        height: 1px;
        background-image: linear-gradient(90deg, hsl(var(--primary) / 0.7), hsl(var(--primary) / 0.1));
    }
}

.step__number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-bottom: 1.125rem;
    border-radius: 0.75rem;
    background-color: hsl(var(--elevated));
    border: 1px solid hsl(var(--border-strong));
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 700;
    color: hsl(var(--primary));
}

.step h3 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.step p {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
}

.step__duration {
    display: inline-block;
    margin-top: 1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   Team
   ========================================================================== */

.team {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 640px)  { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1100px) { .team { grid-template-columns: repeat(4, 1fr); } }

.member {
    padding: 1.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    background-color: hsl(var(--card));
    transition: border-color 0.3s ease, transform 0.3s ease;
}

.member:hover {
    border-color: hsl(var(--primary) / 0.4);
    transform: translateY(-3px);
}

/* Initialen im Chromverlauf statt Portraits — bleibt konsistent, egal wer
   im Team wechselt. */
.member__avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 1.25rem;
    border-radius: 9999px;
    background-image: var(--chrome);
    color: hsl(213 20% 12%);
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    box-shadow: inset 0 -2px 6px hsl(213 20% 20% / 0.35);
}

.member h3 {
    font-size: 1.0625rem;
    font-weight: 600;
}

.member__role {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: hsl(var(--primary));
}

.member__text {
    margin-top: 0.875rem;
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
}

.member__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 1.125rem;
}

.member__tags li {
    padding: 0.25rem 0.625rem;
    border: 1px solid hsl(var(--border));
    border-radius: 9999px;
    background-color: hsl(var(--elevated));
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

.team__note {
    margin-top: 2.5rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid hsl(var(--border));
    border-left: 3px solid hsl(var(--primary));
    border-radius: var(--radius);
    background-color: hsl(var(--surface));
    font-size: 1rem;
    color: hsl(var(--muted-foreground));
}

/* Netzwerk hinter dem Kernteam — steht bewusst nach den vier Profilen, damit
   klar bleibt, wer die Arbeit macht und wer dazukommt. */
.community {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 1.25rem;
    padding: clamp(1.75rem, 4vw, 2.5rem);
    border: 1px solid hsl(var(--primary) / 0.28);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 70% 120% at 0% 0%, hsl(var(--primary) / 0.13) 0%, transparent 65%),
        hsl(var(--card));
}

@media (min-width: 900px) {
    .community { grid-template-columns: 1fr 1.15fr; align-items: start; }
}

.community__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.875rem;
    height: 2.875rem;
    margin-bottom: 1.125rem;
    border: 1px solid hsl(var(--primary) / 0.3);
    border-radius: 0.875rem;
    background-color: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
}

.community__intro h3 {
    font-size: clamp(1.25rem, 2.6vw, 1.625rem);
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.community__intro p {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
}

.community__points {
    display: grid;
    gap: 1.125rem;
}

.community__points li {
    display: flex;
    align-items: flex-start;
    gap: 0.875rem;
    padding-bottom: 1.125rem;
    border-bottom: 1px solid hsl(var(--border));
}

.community__points li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.community__points .icon {
    margin-top: 0.1875rem;
    color: hsl(var(--primary));
}

.community__points strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.community__points span {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   Merkmale mit Haken
   ========================================================================== */

.features {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.875rem;
}

@media (min-width: 640px) {
    .features { grid-template-columns: repeat(2, 1fr); }
}

.features li {
    display: flex;
    align-items: flex-start;
    gap: 0.6875rem;
    font-size: 0.9375rem;
}

.features__icon {
    margin-top: 0.1875rem;
    color: hsl(var(--primary));
}

/* ==========================================================================
   Fragen und Antworten
   ========================================================================== */

.faq {
    max-width: 46rem;
    margin-inline: auto;
    display: grid;
    gap: 0.75rem;
}

.faq__item {
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius);
    background-color: hsl(var(--card));
    overflow: hidden;
}

.faq__item[open] { border-color: hsl(var(--primary) / 0.4); }

.faq__item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.125rem 1.375rem;
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}

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

.faq__item summary .icon {
    color: hsl(var(--primary));
    transition: transform 0.25s ease;
}

.faq__item[open] summary .icon { transform: rotate(180deg); }

.faq__answer {
    padding: 0 1.375rem 1.375rem;
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
}

.faq__answer p + p { margin-top: 0.75rem; }

/* ==========================================================================
   Handlungsaufruf
   ========================================================================== */

.cta {
    position: relative;
    padding: clamp(2.5rem, 6vw, 4rem);
    border: 1px solid hsl(var(--primary) / 0.3);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(ellipse 80% 100% at 50% 0%, hsl(var(--primary) / 0.16) 0%, transparent 70%),
        hsl(var(--card));
    text-align: center;
    overflow: hidden;
}

.cta h2 {
    font-size: clamp(1.625rem, 3.6vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.cta p {
    max-width: 38rem;
    margin-inline: auto;
    color: hsl(var(--muted-foreground));
}

.cta__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 2rem;
}

/* ==========================================================================
   Terminbuchung
   ========================================================================== */

.booking {
    padding-top: calc(var(--navbar-height) + 3rem);
    padding-bottom: 5rem;
}

.booking__layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    align-items: start;
}

.booking__layout > *,
.booking__grid > * { min-width: 0; }

@media (min-width: 1000px) {
    .booking__layout { grid-template-columns: 20rem 1fr; }
}

/* Linke Spalte: worum es im Gespraech geht */
.booking__aside {
    padding: 1.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    background-color: hsl(var(--card));
}

@media (min-width: 1000px) {
    .booking__aside {
        position: sticky;
        top: calc(var(--navbar-height) + 1.5rem);
    }
}

.booking__aside h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.booking__aside > p {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
}

.booking__facts {
    display: grid;
    gap: 0.875rem;
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid hsl(var(--border));
    font-size: 0.9375rem;
}

.booking__facts li {
    display: flex;
    align-items: flex-start;
    gap: 0.6875rem;
}

.booking__facts .icon {
    margin-top: 0.125rem;
    color: hsl(var(--primary));
}

.booking__facts strong {
    display: block;
    font-weight: 600;
}

.booking__facts span {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* Rechte Spalte: Kalender, Zeiten, Formular */
.booking__panel {
    padding: 1.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    background-color: hsl(var(--card));
    box-shadow: var(--shadow-card);
}

.booking__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 760px) {
    .booking__grid { grid-template-columns: 1fr 13rem; }
}

/* Schritte oben im Panel */
.booking__steps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    margin-bottom: 1.75rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid hsl(var(--border));
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

.booking__steps li {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
}

.booking__steps b {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 9999px;
    border: 1px solid hsl(var(--border-strong));
    font-size: 0.75rem;
    font-weight: 600;
}

.booking__steps li[data-active] { color: hsl(var(--foreground)); }

.booking__steps li[data-active] b {
    background-image: var(--flame);
    border-color: transparent;
    color: hsl(var(--primary-foreground));
}

/* Kalender */
.calendar__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1.125rem;
}

.calendar__month {
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 1.0625rem;
    font-weight: 600;
}

.calendar__nav {
    display: flex;
    gap: 0.375rem;
}

.calendar__nav a,
.calendar__nav button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid hsl(var(--border-strong));
    border-radius: 0.5rem;
    color: hsl(var(--foreground));
    transition: border-color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.calendar__nav a:hover,
.calendar__nav button:not([disabled]):hover {
    border-color: hsl(var(--primary) / 0.6);
    background-color: hsl(var(--primary) / 0.08);
}

.calendar__nav [aria-disabled="true"],
.calendar__nav button[disabled] {
    opacity: 0.35;
    pointer-events: none;
}

.calendar__weekdays,
.calendar__days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0.375rem;
}

.calendar__weekdays {
    margin-bottom: 0.5rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: center;
    color: hsl(var(--muted-foreground));
}

.calendar__day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1875rem;
    aspect-ratio: 1;
    min-height: 2.75rem;
    border: 1px solid transparent;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    color: hsl(var(--muted-foreground) / 0.6);
}

/* Ein Punkt zeigt an, dass an diesem Tag noch Termine frei sind. */
.calendar__day::after {
    content: '';
    width: 0.25rem;
    height: 0.25rem;
    border-radius: 9999px;
    background-color: transparent;
}

.calendar__day--free {
    border-color: hsl(var(--border-strong));
    background-color: hsl(var(--elevated));
    color: hsl(var(--foreground));
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.15s ease;
}

.calendar__day--free::after { background-color: hsl(var(--primary)); }

.calendar__day--free:hover {
    border-color: hsl(var(--primary) / 0.7);
    background-color: hsl(var(--primary) / 0.12);
    transform: translateY(-1px);
}

.calendar__day--today {
    box-shadow: inset 0 0 0 1px hsl(var(--muted-foreground) / 0.5);
}

.calendar__day[aria-pressed="true"],
.calendar__day--selected {
    background-image: var(--flame);
    border-color: transparent;
    color: hsl(var(--primary-foreground));
    font-weight: 600;
}

.calendar__day[aria-pressed="true"]::after,
.calendar__day--selected::after {
    background-color: hsl(var(--primary-foreground) / 0.7);
}

@media (max-width: 520px) {
    .booking__panel,
    .booking__aside { padding: 1.25rem; }

    .calendar__weekdays,
    .calendar__days { gap: 0.25rem; }

    .calendar__day {
        min-height: 2.25rem;
        border-radius: 0.5rem;
        font-size: 0.875rem;
    }

    .slots__list { grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr)); }
}

.calendar__legend {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.125rem;
    font-size: 0.75rem;
    color: hsl(var(--muted-foreground));
}

.calendar__legend li {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
}

.calendar__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary));
}

.calendar__dot--none {
    background-color: transparent;
    border: 1px solid hsl(var(--border-strong));
}

/* Uhrzeiten */
.slots__head {
    font-family: 'Sora', system-ui, sans-serif;
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 0.875rem;
}

.slots__list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.5rem;
    max-height: 26rem;
    padding-right: 0.25rem;
    overflow-y: auto;
    scrollbar-width: thin;
}

@media (min-width: 760px) {
    .slots__list { grid-template-columns: 1fr; }
}

.slot {
    display: block;
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid hsl(var(--border-strong));
    border-radius: 0.5rem;
    background-color: hsl(var(--elevated));
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.slot:hover {
    border-color: hsl(var(--primary) / 0.7);
    background-color: hsl(var(--primary) / 0.12);
}

.slot[aria-pressed="true"],
.slot--selected {
    background-image: var(--flame);
    border-color: transparent;
    color: hsl(var(--primary-foreground));
    font-weight: 600;
}

.slots__empty {
    padding: 1rem;
    border: 1px dashed hsl(var(--border-strong));
    border-radius: 0.5rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
}

/* Formular */
.booking__form {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid hsl(var(--border));
}

.booking__chosen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.625rem;
    padding: 0.875rem 1.125rem;
    margin-bottom: 1.5rem;
    border: 1px solid hsl(var(--primary) / 0.35);
    border-radius: var(--radius);
    background-color: hsl(var(--primary) / 0.08);
    font-size: 0.9375rem;
}

.booking__chosen[hidden] { display: none; }

.booking__chosen .icon { color: hsl(var(--primary)); }

.booking__chosen strong { font-weight: 600; }

.booking__chosen button {
    margin-left: auto;
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    text-decoration: underline;
}

.booking__chosen button:hover { color: hsl(var(--foreground)); }

.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.125rem;
}

@media (min-width: 640px) {
    .form-grid { grid-template-columns: repeat(2, 1fr); }
    .form-field--wide { grid-column: 1 / -1; }
}

.form-field label {
    display: block;
    margin-bottom: 0.4375rem;
    font-size: 0.875rem;
    font-weight: 500;
}

.form-field .required { color: hsl(var(--primary)); }

.form-field input,
.form-field select,
.form-field textarea {
    width: 100%;
    padding: 0.6875rem 0.875rem;
    border: 1px solid hsl(var(--border-strong));
    border-radius: 0.5rem;
    background-color: hsl(var(--background));
    font-size: 0.9375rem;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-field textarea {
    min-height: 6.5rem;
    resize: vertical;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
    outline: none;
    border-color: hsl(var(--primary) / 0.8);
    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.15);
}

.form-field input::placeholder,
.form-field textarea::placeholder { color: hsl(var(--muted-foreground) / 0.7); }

.form-field--error input,
.form-field--error select,
.form-field--error textarea { border-color: hsl(var(--ember)); }

.form-error {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.8125rem;
    color: hsl(14 90% 65%);
}

.form-check {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.form-check input {
    width: 1.0625rem;
    height: 1.0625rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
    accent-color: hsl(var(--primary));
}

.form-check a {
    color: hsl(var(--primary));
    text-decoration: underline;
}

/* Honigtopf gegen Bots — für Menschen unsichtbar, für Skripte ein Feld. */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-top: 1.75rem;
}

.form-actions .muted {
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
}

.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.6875rem;
    padding: 0.9375rem 1.125rem;
    margin-bottom: 1.5rem;
    border: 1px solid hsl(var(--ember) / 0.45);
    border-radius: var(--radius);
    background-color: hsl(var(--ember) / 0.1);
    font-size: 0.9375rem;
}

.alert .icon {
    margin-top: 0.125rem;
    color: hsl(14 90% 62%);
}

.is-busy { opacity: 0.6; pointer-events: none; }

/* ==========================================================================
   Bestätigung
   ========================================================================== */

.confirm {
    display: flex;
    align-items: center;
    min-height: 70vh;
    padding-top: calc(var(--navbar-height) + 4rem);
    padding-bottom: 5rem;
}

.confirm__inner {
    max-width: 38rem;
    margin-inline: auto;
    text-align: center;
}

.confirm__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.75rem;
    border-radius: 9999px;
    background-image: var(--flame);
    color: hsl(var(--primary-foreground));
    box-shadow: var(--glow-primary);
}

.confirm h1 {
    font-size: clamp(1.875rem, 4vw, 2.5rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.confirm > .container > .confirm__inner > p {
    color: hsl(var(--muted-foreground));
}

.confirm__card {
    margin-top: 2rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid hsl(var(--border));
    border-radius: var(--radius-lg);
    background-color: hsl(var(--card));
    text-align: left;
}

.confirm__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding-block: 0.75rem;
    font-size: 0.9375rem;
}

.confirm__row + .confirm__row { border-top: 1px solid hsl(var(--border)); }

.confirm__row dt { color: hsl(var(--muted-foreground)); }

.confirm__row dd {
    margin: 0;
    font-weight: 500;
    text-align: right;
}

.confirm__note {
    margin-top: 1.5rem;
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.confirm__note a { color: hsl(var(--primary)); }

.confirm__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 2rem;
}

/* ==========================================================================
   Rechtliche Seiten
   ========================================================================== */

.legal {
    padding-top: calc(var(--navbar-height) + 3rem);
    padding-bottom: 4rem;
}

.legal__inner {
    max-width: 48rem;
    margin-inline: auto;
}

.legal h1 {
    font-size: clamp(1.875rem, 4vw, 2.25rem);
    font-weight: 700;
    margin-bottom: 2rem;
}

.prose section + section { margin-top: 2rem; }

.prose h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.prose h3 {
    font-size: 1.0625rem;
    font-weight: 500;
    margin-bottom: 0.75rem;
}

.prose h3:not(:first-of-type) { margin-top: 1.5rem; }

.prose p { color: hsl(var(--muted-foreground)); }

.prose p + p { margin-top: 1rem; }

.prose a { color: hsl(var(--primary)); }

.prose a:hover { text-decoration: underline; }

.prose ul {
    list-style: disc outside;
    padding-left: 1.25rem;
    color: hsl(var(--muted-foreground));
    margin-top: 1rem;
}

.prose li + li { margin-top: 0.5rem; }

.prose ul + p { margin-top: 1rem; }

/* ==========================================================================
   404 und Danke
   ========================================================================== */

.notfound {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
}

.notfound__inner {
    text-align: center;
    padding-inline: 1rem;
}

.notfound h1 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.notfound p {
    font-size: 1.25rem;
    color: hsl(var(--muted-foreground));
    margin-bottom: 1.5rem;
}

.thanks {
    display: flex;
    align-items: center;
    min-height: 70vh;
    padding-top: calc(var(--navbar-height) + 4rem);
    padding-bottom: 4rem;
}

.thanks__inner {
    max-width: 40rem;
    margin-inline: auto;
    text-align: center;
}

.thanks__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: 9999px;
    background-color: hsl(var(--primary) / 0.12);
    color: hsl(var(--primary));
}

.thanks h1 {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    margin-bottom: 1rem;
}

.thanks p {
    color: hsl(var(--muted-foreground));
    margin-bottom: 2rem;
}

.thanks__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.footer {
    background-color: hsl(var(--surface));
    border-top: 1px solid hsl(var(--border));
    padding-block: 3.5rem;
}

.footer__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .footer__grid  { grid-template-columns: repeat(4, 1fr); }
    .footer__intro { grid-column: span 2; }
}

.footer__intro .brand { margin-bottom: 1rem; }

.footer__intro p {
    font-size: 0.9375rem;
    color: hsl(var(--muted-foreground));
    max-width: 28rem;
}

.footer h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.footer li + li { margin-top: 0.5rem; }

.footer__grid li a {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

.footer__grid li a:hover { color: hsl(var(--primary)); }

.footer__bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 1.5rem;
    margin-top: 2.5rem;
    padding-top: 2rem;
    border-top: 1px solid hsl(var(--border));
    text-align: center;
}

.footer__bottom p {
    font-size: 0.875rem;
    color: hsl(var(--muted-foreground));
}

/* ==========================================================================
   Popup mit dem Buchungskalender
   ========================================================================== */

.modal {
    width: min(100vw - 2rem, 64rem);
    height: min(100vh - 2rem, 52rem);
    height: min(100dvh - 2rem, 52rem);
    max-width: none;
    max-height: none;
    padding: 0;
    border: 1px solid hsl(var(--border-strong));
    border-radius: var(--radius-lg);
    background-color: hsl(var(--card));
    color: hsl(var(--foreground));
    box-shadow: var(--shadow-card), var(--glow-primary);
    overflow: hidden;
}

/* Nur im offenen Zustand ein Flex-Container — ein display auf .modal selbst
   würde den geschlossenen Dialog sichtbar machen. */
.modal[open] {
    display: flex;
    flex-direction: column;
    animation: modal-in 0.25s ease-out;
}

.modal::backdrop {
    background-color: hsl(213 30% 2% / 0.7);
    backdrop-filter: blur(6px);
}

@keyframes modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.985); }
    to   { opacity: 1; transform: none; }
}

.modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.875rem 1rem 0.875rem 1.25rem;
    border-bottom: 1px solid hsl(var(--border));
}

.modal__title {
    font-size: 1.0625rem;
    font-weight: 600;
}

.modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid hsl(var(--border-strong));
    border-radius: var(--radius);
    color: hsl(var(--muted-foreground));
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.modal__close:hover {
    color: hsl(var(--foreground));
    border-color: hsl(var(--primary) / 0.6);
    background-color: hsl(var(--primary) / 0.07);
}

/* Der Kalender bringt seinen eigenen hellen Hintergrund mit. */
.modal__body {
    position: relative;
    flex: 1;
    min-height: 0;
    background-color: hsl(0 0% 100%);
}

.modal__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--sand-muted));
    font-size: 0.9375rem;
}

.modal__body.is-loaded .modal__loading { display: none; }

.modal__frame {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.modal__foot {
    padding: 0.625rem 1.25rem;
    border-top: 1px solid hsl(var(--border));
    font-size: 0.8125rem;
    color: hsl(var(--muted-foreground));
    text-align: center;
}

.modal__foot a { color: hsl(var(--primary)); }

.modal__foot a:hover { text-decoration: underline; }

/* Solange das Popup offen ist, scrollt die Seite dahinter nicht mit. */
html.is-modal-open { overflow: hidden; }

@media (max-width: 640px) {
    .modal {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }
}

/* ==========================================================================
   Animationen
   ========================================================================== */

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

@keyframes fade-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.fade-in {
    opacity: 0;
    animation: fade-in 0.6s ease-out forwards;
}

.fade-in--delay-1 { animation-delay: 0.1s; }
.fade-in--delay-2 { animation-delay: 0.2s; }
.fade-in--delay-3 { animation-delay: 0.3s; }

/* Wird per IntersectionObserver ausgelöst, sobald das Element sichtbar ist. */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--reveal-delay, 0s);
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staffelung für Markup ohne Schleife; in Schleifen setzt PHP --reveal-delay. */
.reveal-delay-1 { --reveal-delay: 0.1s; }
.reveal-delay-2 { --reveal-delay: 0.2s; }
.reveal-delay-3 { --reveal-delay: 0.3s; }
.reveal-delay-4 { --reveal-delay: 0.4s; }
.reveal-delay-5 { --reveal-delay: 0.5s; }
.reveal-delay-6 { --reveal-delay: 0.6s; }

/* Ohne JS dürfen die Elemente nicht unsichtbar bleiben. */
.no-js .reveal {
    opacity: 1;
    transform: none;
}

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

    .hero__orb,
    .fade-in {
        animation: none;
    }

    .fade-in { opacity: 1; }
    .modal[open] { animation: none; }

    /* Kein Verschieben — das Einblenden bleibt, weil eine reine
       Deckkraft-Änderung keine Bewegungsempfindlichkeit auslöst. */
    .reveal,
    .reveal.is-visible {
        transform: none;
    }

    .reveal {
        transition: opacity 0.5s ease-out;
        transition-delay: var(--reveal-delay, 0s);
    }

    .card:hover,
    .member:hover,
    .button:hover,
    .calendar__day--free:hover { transform: none; }

    /* Der Lichtreflex und die aufziehenden Balken sind Zierde — ohne sie
       stehen Schrift und Balken einfach fertig da. */
    .hero__title.text-chrome {
        animation: none;
        background-image: var(--chrome);
        background-size: auto;
    }

    .split__part,
    .reveal .split__part--us,
    .reveal .split__part--you {
        clip-path: inset(0 0 0 0);
        transition: none;
    }
}