/* ==========================================================================
   style.css – Öffentliche Website qigong-welver.de
   Markenlook (Navy #150D44), Stand 21.09.2026 (Überarbeitung "Atem")

   Leitidee: Qigong ist Fluss und Atem. Daraus ergeben sich drei Motive,
   die sich durch die ganze Seite ziehen (dazu die Textgestaltung in
   Abschnitt 10 und die Animationsregeln in Abschnitt 21):
   - Fluss:  Bänder gehen über eine ruhige, asymmetrische Welle ineinander
             über (keine Farbverläufe, keine harten Kanten).
   - Atem:   Im einzigen dunklen Band (Zitat) atmet ein warmes Licht in
             einem ruhigen 10-Sekunden-Rhythmus. Der nächste Kurstermin
             atmet im selben Takt.
   - Papier: Kurstermine erscheinen als Kalenderblatt, das beim Scrollen
             aufklappt.
   Animationen laufen mit GSAP (selbst gehostet, Ordner js/, siehe
   footer.php). Alle Bewegungen entfallen bei "Bewegung reduzieren".
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Schriften (selbst gehostet, DSGVO)
   Fünf vorhandene Dateien im Ordner schriften/. Lora 500 deckt zusätzlich
   Gewicht 400 ab, Lora 600 auch 700; Source Sans 600 deckt auch 700 ab.
   Lora 500italic deckt den kursiven Zitattext ab.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Lora';
    src: url('schriften/lora-v37-latin_latin-ext-500.woff2') format('woff2');
    font-weight: 400 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('schriften/lora-v37-latin_latin-ext-600.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Lora';
    src: url('schriften/lora-v37-latin_latin-ext-500italic.woff2') format('woff2');
    font-weight: 400 500;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('schriften/source-sans-3-v19-latin_latin-ext-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('schriften/source-sans-3-v19-latin_latin-ext-600.woff2') format('woff2');
    font-weight: 600 700;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Farben, Grundwerte und Bewegungskurven
   -------------------------------------------------------------------------- */
:root {
    --navy:      #150D44;   /* Markenfarbe, Kopfzeile, dunkle Bänder */
    --navy-hell: #241858;   /* Hover auf dunklen Flächen */
    --plum:      #2D0D16;   /* Fußzeile */
    --flame:     #FCAB14;   /* Buttons, Icons, Fokusrahmen */
    --ember:     #ED601E;   /* Textlinks, kleine Auszeichnungen */
    --ember-tief:#B8440F;   /* Ember auf hellem Grund mit genug Kontrast */
    --lilac:     #9E6D95;   /* sparsamer Zweitakzent */
    --sand:      #F4E9D8;   /* warmes Band */
    --paper:     #FBF9F5;   /* Grundfläche */
    --ink:       #17142A;   /* Fließtext */
    --muted:     #55506A;   /* Nebentext */
    --leise:     #767085;   /* vergangene Termine (Kontrast ca. 4,7:1) */
    --line:      #E3DACB;   /* Rahmen und Trennlinien */
    --schatten:      0 18px 40px -28px rgba(21, 13, 68, .40);
    --schatten-hoch: 0 26px 50px -30px rgba(21, 13, 68, .55);

    /* Abstände (auf dem Handy kleiner, siehe Abschnitt 23) */
    --band-abstand: 64px;                       /* Innenabstand oben/unten eines Bandes */
    --welle:        clamp(22px, 3.4vw, 46px);   /* Höhe der Wellenkante */

    /* Bewegungskurven: sanft auslaufend bzw. leicht federnd */
    --ease-sanft: cubic-bezier(.22, 1, .36, 1);
    --ease-feder: cubic-bezier(.34, 1.36, .64, 1);

    /* Wellenformen für die Bandübergänge (werden als Maske benutzt) */
    --welle-a: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V42C140 30 270 12 430 9C600 6 730 30 890 42C1040 53 1190 55 1310 43C1370 37 1415 28 1440 22V64Z'/%3E%3C/svg%3E");
    --welle-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64V20C170 30 340 50 540 50C740 50 880 20 1070 13C1230 8 1350 20 1440 32V64Z'/%3E%3C/svg%3E");

    /* Pinselstrich wie mit dem Tuschepinsel gezogen (Maske) */
    --pinsel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M3 12.5C22 8 48 5.6 80 5.2C112 4.8 150 6.4 178 8.2C188 8.9 195 9.4 197.5 10.7C194.5 12.9 184 13.5 172 13.7C140 14.3 105 13.4 72 14.4C45 15.1 22 15.6 6.5 15.3C3 15.2 1.6 13.9 3 12.5Z'/%3E%3C/svg%3E");

    /* Feine Papierkörnung, damit Flächen nicht steril wirken */
    --korn-auf-dunkel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23k%29'/%3E%3C/svg%3E");
    --korn-auf-hell: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23k%29'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 19px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
    text-wrap: balance;
}

p { margin: 0 0 16px; text-wrap: pretty; }

ul { margin: 0 0 18px; padding-left: 22px; }
li { margin-bottom: 8px; }

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

a { color: var(--ember); }
a:hover { color: #C24B12; }

:focus-visible {
    outline: 3px solid var(--flame);
    outline-offset: 3px;
    border-radius: 6px;
}

/* Nur für Screenreader lesbar, optisch unsichtbar */
.nur-screenreader {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* Kleine Liniensymbole (Uhr, Ort, Kalender, Euro) */
.symbol { flex: none; color: var(--ember); }

/* --------------------------------------------------------------------------
   3. Kopfzeile und Navigation
   Beim Scrollen wird die Kopfzeile leicht durchscheinend (Milchglas),
   der Seiteninhalt schimmert dahinter durch. Die Klasse "gescrollt"
   setzt footer.php.
   -------------------------------------------------------------------------- */
.seitenkopf {
    position: sticky;
    top: 0;
    z-index: 60;
    background: var(--navy);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 28px;
    transition: background-color .5s ease, box-shadow .5s ease;
    view-transition-name: kopfzeile;   /* bleibt beim Seitenwechsel stehen */
}
.seitenkopf.gescrollt {
    background: rgba(21, 13, 68, .84);
    -webkit-backdrop-filter: saturate(160%) blur(16px);
    backdrop-filter: saturate(160%) blur(16px);
    box-shadow: 0 1px 0 rgba(255, 255, 255, .06), 0 14px 30px -22px rgba(8, 4, 30, .8);
}

.marke {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: 19px;
    text-decoration: none;
}
.marke:hover { color: #fff; }
.marke img { width: 40px; height: 40px; border-radius: 50%; }

.hauptmenue { display: flex; gap: 6px; }

.hauptmenue a {
    position: relative;
    color: rgba(255, 255, 255, .9);
    text-decoration: none;
    font-size: 17px;
    font-weight: 600;
    padding: 10px 14px;
    border-radius: 8px;
    transition: background-color .25s ease, color .25s ease;
}
.hauptmenue a:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.hauptmenue a.aktiv { color: var(--flame); }

/* Kleiner Lichtpunkt unter dem aktiven Menüpunkt */
.hauptmenue a.aktiv::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 3px;
    width: 5px;
    height: 5px;
    margin-left: -2.5px;
    border-radius: 50%;
    background: var(--flame);
    box-shadow: 0 0 10px rgba(252, 171, 20, .8);
}

.menue-schalter {
    display: none;
    background: none;
    border: 1px solid rgba(255, 255, 255, .4);
    border-radius: 8px;
    color: #fff;
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 14px;
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease;
}
.menue-schalter[aria-expanded="true"] {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .7);
}

@media (max-width: 820px) {
    .seitenkopf { position: relative; flex-wrap: wrap; }
    .menue-schalter { display: block; }

    /* Menü klappt weich auf statt hart zu erscheinen */
    .hauptmenue {
        display: flex;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--navy);
        flex-direction: column;
        padding: 8px 16px 18px;
        border-radius: 0 0 22px 22px;
        box-shadow: 0 24px 40px -24px rgba(8, 4, 30, .9);
        visibility: hidden;
        opacity: 0;
        transform: translateY(-10px);
        transition: opacity .3s ease, transform .4s var(--ease-sanft), visibility 0s linear .4s;
    }
    .hauptmenue.offen {
        visibility: visible;
        opacity: 1;
        transform: none;
        transition: opacity .3s ease, transform .45s var(--ease-sanft), visibility 0s;
    }
    .hauptmenue a {
        font-size: 19px;
        padding: 14px;
        opacity: 0;
        transform: translateY(-6px);
        transition: opacity .3s ease, transform .45s var(--ease-sanft), background-color .25s ease;
    }
    .hauptmenue.offen a { opacity: 1; transform: none; }
    .hauptmenue.offen a:nth-child(2) { transition-delay: .04s; }
    .hauptmenue.offen a:nth-child(3) { transition-delay: .08s; }
    .hauptmenue.offen a:nth-child(4) { transition-delay: .12s; }
    .hauptmenue.offen a:nth-child(5) { transition-delay: .16s; }

    .hauptmenue a.aktiv::after { left: auto; right: 18px; bottom: 50%; margin: 0 0 -2.5px; }
}

/* --------------------------------------------------------------------------
   4. Inhaltsbreiten und Farbbänder
   Ein Band ist eine Fläche über die volle Breite; .innen zentriert darin
   den Inhalt. Klassische Unterseiten nutzen weiterhin einfach <main>.
   -------------------------------------------------------------------------- */
main {
    max-width: 820px;
    margin: 0 auto;
    padding: 56px 28px;
}

.band { position: relative; padding: var(--band-abstand) 0; }
.band-navy {
    background:
        var(--korn-auf-dunkel),
        radial-gradient(70% 120% at 80% 20%, rgba(237, 96, 30, .22), rgba(21, 13, 68, 0) 60%),
        var(--navy);
    color: #fff;
}
.band-plum  { background: var(--plum); color: #fff; }
.band-sand  { background: var(--korn-auf-hell), var(--sand); }
.band-paper { background: var(--paper); }

.band-navy h1, .band-navy h2, .band-navy h3, .band-navy h4,
.band-plum h1, .band-plum h2, .band-plum h3, .band-plum h4 { color: #fff; }
.band-navy p, .band-plum p { color: rgba(255, 255, 255, .86); }
.band-navy a:not(.knopf):not(.textlink),
.band-plum a:not(.knopf):not(.textlink) { color: var(--flame); }

.innen        { max-width: 900px; margin: 0 auto; padding: 0 28px; }
/* Schmale Textspalte: steht auf derselben linken Achse wie alle anderen
   Inhalte, statt als eigene Mittelspalte zu schwimmen */
.innen-schmal { max-width: 900px; margin: 0 auto; padding: 0 28px; }
.innen-schmal > * { max-width: 704px; }
.abstand-oben { margin-top: 80px; }

/* Nur oben/unten setzen – der seitliche Abstand kommt von .innen */
.seitenkopf-block { padding-top: 52px; padding-bottom: 72px; }
.seitenkopf-block h1 { font-size: clamp(32px, 4.6vw, 46px); }
.seitenkopf-block p  { font-size: 19.5px; max-width: 44ch; margin: 16px 0 0; }

.etikett { color: var(--ember-tief); font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.band-navy .etikett, .band-plum .etikett { color: var(--flame); }

h2 { font-size: clamp(26px, 3.6vw, 34px); margin-bottom: 20px; }
h3 { font-size: 23px; margin: 34px 0 10px; }
h4 { font-size: 20px; margin: 24px 0 8px; }

.band-navy .einleitung, .band-plum .einleitung { color: rgba(255, 255, 255, .86); }

/* --------------------------------------------------------------------------
   5. Wellenkanten zwischen den Bändern
   Jedes Band (außer dem ersten) legt eine flache Welle in seiner eigenen
   Farbe über die Unterkante des vorherigen Bandes. "+" heißt "direkt nach".
   Die Welle erbt Farbe und Körnung ihres Bandes (background: inherit).
   Zwei Formen im Wechsel, zusätzlich gespiegelt, damit es nicht
   schablonenhaft wirkt.
   -------------------------------------------------------------------------- */
.band-navy + .band::before,
.band + .band::before,
.band + .zitat::before,
.zitat + .seitenfuss::before,
.band + .seitenfuss::before,
main + .seitenfuss::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% - 1px);            /* 1 px Überlappung gegen Haarlinien */
    height: calc(var(--welle) + 1px);
    background: inherit;
    -webkit-mask: var(--welle-a) 0 0 / 100% 100% no-repeat;
    mask: var(--welle-a) 0 0 / 100% 100% no-repeat;
    pointer-events: none;
}
.band-paper::before           { transform: scaleX(-1); }
.zitat::before                { -webkit-mask-image: var(--welle-b); mask-image: var(--welle-b); }
.seitenfuss::before           { -webkit-mask-image: var(--welle-b); mask-image: var(--welle-b); transform: scaleX(-1); }

/* --------------------------------------------------------------------------
   6. Willkommensbereich und Seitenköpfe – der Auftakt jeder Seite
   Einmalige, gestaffelte Auftaktbewegung beim Laden: Die Hauptüberschrift
   steigt Zeile für Zeile aus einer unsichtbaren Kante auf (GSAP, footer.php),
   Etikett, Unterzeile (Satz für Satz) und Knöpfe folgen aus einer leichten
   Unschärfe, zuletzt öffnet sich das Portrait wie ein Vorhang.
   -------------------------------------------------------------------------- */
.willkommen {
    max-width: 900px;
    margin: 0 auto;
    padding: 56px 28px 76px;
    display: grid;
    grid-template-columns: 1.15fr .85fr;
    gap: 40px;
    align-items: center;
}
.willkommen h1 { color: #fff; font-size: clamp(36px, 5.4vw, 56px); line-height: 1.1; letter-spacing: -.01em; }
.willkommen p  { font-size: 19.5px; max-width: 34ch; margin: 18px 0 0; }

@media (max-width: 820px) {
    .willkommen { grid-template-columns: 1fr; gap: 28px; }
}

/* "translate" statt "transform" und nur rückwärts gefüllt: nach dem
   Auftakt ist das Element wieder frei für Hover-Effekte der Knöpfe */
@keyframes aufsteigen {
    from { opacity: 0; translate: 0 18px; filter: blur(6px); }
    to   { opacity: 1; translate: none;   filter: blur(0); }
}
@keyframes notfall-sichtbar { to { visibility: visible; } }

/* Hauptüberschrift: steigt per GSAP Zeile für Zeile auf (footer.php).
   Bis dahin unsichtbar; falls das Skript fehlt, erscheint sie spätestens
   nach 3 Sekunden trotzdem. */
html.bewegung .seitenkopf-block h1,
html.bewegung .willkommen h1 {
    visibility: hidden;
    animation: notfall-sichtbar 0s linear 3s forwards;
}

/* Unterzeile im Seitenkopf: ein Satz pro Zeile, nacheinander */
.seitenkopf-block .satz { display: block; }
.seitenkopf-block > p:has(.satz) { animation: none; }
.seitenkopf-block .satz { animation: aufsteigen .8s var(--ease-sanft) backwards; }
.seitenkopf-block .satz:nth-child(1) { animation-delay: .34s; }
.seitenkopf-block .satz:nth-child(2) { animation-delay: .48s; }
.seitenkopf-block .satz:nth-child(3) { animation-delay: .62s; }
.seitenkopf-block .satz:nth-child(4) { animation-delay: .76s; }
.willkommen > div > *,
.seitenkopf-block > * {
    animation: aufsteigen .8s var(--ease-sanft) backwards;
}
.willkommen > div > :nth-child(1), .seitenkopf-block > :nth-child(1) { animation-delay: .10s; }
.willkommen > div > :nth-child(2), .seitenkopf-block > :nth-child(2) { animation-delay: .22s; }
.willkommen > div > :nth-child(3), .seitenkopf-block > :nth-child(3) { animation-delay: .34s; }
.willkommen > div > :nth-child(4), .seitenkopf-block > :nth-child(4) { animation-delay: .46s; }
.willkommen > div > :nth-child(5), .seitenkopf-block > :nth-child(5) { animation-delay: .54s; }
.willkommen > div > :nth-child(6), .seitenkopf-block > :nth-child(6) { animation-delay: .62s; }

/* Portrait auf der Startseite: Vorhang öffnet sich von unten nach oben,
   das Bild setzt sich dabei ganz leicht (keine Hover-Bewegung) */
@keyframes vorhang-auf {
    from { clip-path: inset(100% 0 0 0 round 18px); }
    to   { clip-path: inset(0 0 0 0 round 18px); }
}
@keyframes bild-setzt-sich {
    from { transform: scale(1.14); }
    to   { transform: scale(1); }
}
.willkommen > .foto       { animation: vorhang-auf 1.2s var(--ease-sanft) .55s both; }
.willkommen > .foto img   { animation: bild-setzt-sich 1.8s var(--ease-sanft) .55s both; }
.willkommen > .bildplatz  { animation: aufsteigen .8s var(--ease-sanft) .55s backwards; }

/* --------------------------------------------------------------------------
   7. Bildbereiche
   Fester Rahmen, Bild füllt ihn aus (object-fit). Der Bildausschnitt
   (object-position) kommt pro Bild aus der Datenbank (admin-bilder.php).
   -------------------------------------------------------------------------- */
.foto { border-radius: 18px; overflow: hidden; background: var(--navy-hell); }
.foto img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.foto-hoch { aspect-ratio: 3 / 4; }
.foto-quer { aspect-ratio: 4 / 3; }
.foto-breit { aspect-ratio: 16 / 9; }

/* Bildausschnitt: bei Portraits oben ansetzen, damit der Kopf drin bleibt */
.foto-portrait img { object-position: center 22%; }

@media (max-width: 820px) {
    /* Hochformat bleibt Hochformat – ein 4:3-Ausschnitt schneidet Gesichter ab */
    .willkommen .foto-hoch,
    .willkommen > .bildplatz { max-width: 300px; margin: 0 auto; }
}

/* Platzhalter, solange kein Bild hochgeladen wurde */
.bildplatz {
    border: 2px dashed var(--line);
    border-radius: 18px;
    background: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #8C8699;
    font-size: 16.5px;
    padding: 20px;
    gap: 5px;
    min-height: 210px;
}
.bildplatz small { font-size: 13.5px; color: #A8A2B0; }
.band-navy .bildplatz, .band-plum .bildplatz {
    border-color: rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .06);
    color: rgba(255, 255, 255, .72);
}
.band-navy .bildplatz small, .band-plum .bildplatz small { color: rgba(255, 255, 255, .5); }

/* --------------------------------------------------------------------------
   8. Buttons und Links
   Rückmeldung auf Berührung: Knöpfe heben sich unter der Maus leicht an
   und geben beim Drücken spürbar nach.
   -------------------------------------------------------------------------- */
.knopf,
button[type="submit"],
main button {
    display: inline-block;
    padding: 16px 34px;
    border: 0;
    border-radius: 12px;
    background: var(--flame);
    color: #231603;
    font-family: inherit;
    font-size: 19px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    margin-top: 26px;
    transition: transform .3s var(--ease-sanft), box-shadow .3s ease, background-color .3s ease;
}
.knopf:hover,
button[type="submit"]:hover,
main button:hover { background: #FFBC3C; color: #231603; }

@media (hover: hover) {
    .knopf:hover,
    button[type="submit"]:hover,
    main button:hover {
        transform: translateY(-2px);
        box-shadow: 0 14px 26px -14px rgba(21, 13, 68, .55);
    }
}
.knopf:active,
button[type="submit"]:active,
main button:active {
    transform: translateY(0) scale(.975);
    box-shadow: none;
    transition-duration: .1s;
}

.knopf-dunkel { background: var(--navy); color: #fff; }
.knopf-dunkel:hover { background: var(--navy-hell); color: #fff; }

.textlink {
    display: inline-block;
    margin-top: 14px;
    padding: 6px 0;
    font-size: 17px;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
    transition: text-underline-offset .3s var(--ease-sanft), text-decoration-thickness .3s ease, color .3s ease;
}
.textlink:hover { text-underline-offset: 3px; text-decoration-thickness: 2px; }
.band-navy .textlink, .band-plum .textlink {
    color: #fff;
    text-decoration-color: var(--lilac);
}

/* --------------------------------------------------------------------------
   9. Zweispaltige Blöcke (Text + Bild, Text + Datenkarte)
   -------------------------------------------------------------------------- */
.zweispaltig,
.media-text,
.kurs-media {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 30px;
    align-items: center;
}
@media (max-width: 820px) {
    .zweispaltig, .media-text, .kurs-media { grid-template-columns: 1fr; }
}
.media-text img { border-radius: 18px; }

/* --------------------------------------------------------------------------
   10. Textgestaltung
   Texte werden gesetzt wie in einem guten Magazin – automatisch aus den
   Bausteinen, die Thorsten im Adminbereich pflegt. Er muss dafür nichts
   beachten, die Gestaltung ergibt sich aus der Reihenfolge der Blöcke:
   - Vorspann:    Der erste Absatz eines Textblocks steht größer in Lora.
   - Kernsatz:    Ein kurzer letzter Absatz wird zum Schlussgedanken
                  (erkennt footer.php automatisch, bis 90 Zeichen).
   - Pinselstrich: Unter jeder Zwischenüberschrift ein kurzer Strich wie
                  mit dem Tuschepinsel gezogen – ein leiser Verweis auf die
                  chinesische Tradition.
   - Erzählung:   Überschrift links (bleibt beim Lesen stehen), Text rechts,
                  auf Wunsch mit Initiale.
   - Stationen:   Abläufe als Weg mit Linie und Stationspunkten.
   - Merkmale:    Kachel-Listen ohne Überschrift werden zu einer ruhigen
                  Liste statt zu vielen Kästchen.
   -------------------------------------------------------------------------- */

/* Vorspann */
.textfluss > p:first-of-type,
.einleitung {
    font-family: 'Lora', Georgia, serif;
    font-weight: 500;
    font-size: clamp(21px, 2.3vw, 24px);
    line-height: 1.55;
    color: #2E2A45;
    margin-bottom: 26px;
}

/* Kernsatz */
.kernsatz {
    position: relative;
    margin-top: 34px;
    padding-top: 24px;
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: clamp(22px, 2.4vw, 26px);
    line-height: 1.45;
    color: var(--navy);
}
.kernsatz::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 60px;
    height: 9px;
    background: var(--flame);
    -webkit-mask: var(--pinsel) 0 0 / 100% 100% no-repeat;
    mask: var(--pinsel) 0 0 / 100% 100% no-repeat;
}

/* Pinselstrich unter Zwischenüberschriften */
.band h2::after {
    content: '';
    display: block;
    width: 112px;
    height: 12px;
    margin-top: 14px;
    background: linear-gradient(90deg, var(--ember), var(--flame));
    -webkit-mask: var(--pinsel) 0 0 / 100% 100% no-repeat;
    mask: var(--pinsel) 0 0 / 100% 100% no-repeat;
}
.kurskarte h2::after { content: none; }
/* Mit Bewegung: Der Strich wird von links nach rechts "gemalt",
   sobald die Überschrift erscheint (Klasse pinsel-an setzt footer.php) */
html.bewegung .band h2::after {
    clip-path: inset(0 100% 0 0);
    transition: clip-path .9s cubic-bezier(.65, 0, .35, 1) .3s;
}
html.bewegung .band h2.pinsel-an::after { clip-path: inset(0 0 0 0); }

/* Erzählung: Überschrift links, Text rechts (nur auf breiten Bildschirmen) */
@media (min-width: 900px) {
    .erzaehlung {
        display: grid;
        grid-template-columns: minmax(0, 250px) minmax(0, 1fr);
        column-gap: 64px;
        align-items: start;
    }
    .erzaehlung > * { grid-column: 2; max-width: 620px; }
    .erzaehlung > .etikett,
    .erzaehlung > h2,
    .erzaehlung > h3 {
        grid-column: 1;
        grid-row: 1 / span 40;
        align-self: start;
        margin-top: 0;
    }
    .erzaehlung > .etikett + h2,
    .erzaehlung > .etikett + h3 { margin-top: 32px; }
    /* Die Überschrift bleibt beim Lesen neben dem Text stehen */
    .erzaehlung > h2,
    .erzaehlung > h3 {
        position: sticky;
        top: 104px;
        margin-bottom: 0;
    }
    .erzaehlung > h2 { font-size: clamp(26px, 2.7vw, 31px); }
    .erzaehlung > h3 { font-size: 25px; line-height: 1.3; }
    .erzaehlung > .knopf { justify-self: start; }
}

/* Initiale: erster Buchstabe über drei Zeilen (nur bei .mit-initiale) */
.mit-initiale > p:first-of-type::first-letter {
    -webkit-initial-letter: 3;
    initial-letter: 3;
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    color: var(--ember-tief);
    margin-right: .14em;
}
@supports not ((initial-letter: 3) or (-webkit-initial-letter: 3)) {
    .mit-initiale > p:first-of-type::first-letter {
        float: left;
        font-size: 3.55em;
        line-height: .8;
        padding: .1em .1em 0 0;
    }
}

/* Stationen: der erste Absatz ist Vorspann, alle weiteren sind Stationen
   auf einem Weg. Die Füllung der Linie (--weg) steuert footer.php. */
.stationen > p:not(:first-of-type) {
    position: relative;
    margin-bottom: 0;
    padding: 0 0 28px 48px;
}
.stationen > p:not(:first-of-type)::before {
    content: '';
    position: absolute;
    left: 8px;
    top: 15px;
    bottom: -15px;
    width: 2px;
    background:
        linear-gradient(var(--flame), var(--ember)) top / 100% calc(var(--weg, 1) * 100%) no-repeat,
        var(--line);
}
.stationen > p:last-of-type::before { display: none; }
.stationen > p:not(:first-of-type)::after {
    content: '';
    position: absolute;
    left: 1px;
    top: 7px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--paper);
    border: 2px solid #CBBDA5;
    transition: border-color .4s ease, background-color .4s ease, box-shadow .6s ease;
}
.stationen > p.erreicht::after,
html:not(.bewegung) .stationen > p:not(:first-of-type)::after {
    border-color: var(--flame);
    background: var(--flame);
    box-shadow: 0 0 0 5px rgba(252, 171, 20, .18);
}

/* Merkmale: Kachel-Listen ohne Überschrift als ruhige Liste */
.kacheln:not(:has(h3)) { gap: 0 44px; }
.kacheln:not(:has(h3)) .kachel {
    position: relative;
    background: none;
    border: 0;
    border-top: 1px solid rgba(21, 13, 68, .13);
    border-radius: 0;
    padding: 18px 0 18px 32px;
}
.kacheln:not(:has(h3)) .kachel::before {
    content: '';
    position: absolute;
    left: 2px;
    top: 27px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, var(--flame), var(--ember));
}
.kacheln:not(:has(h3)) .kachel p { font-size: 18.5px; line-height: 1.5; color: var(--ink); }

/* Abschluss auf der Startseite: Frage links, Knopf rechts */
.abschluss {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px 48px;
    align-items: end;
}
.abschluss .einleitung { margin-bottom: 0; }
.abschluss .knopf { margin: 0 0 4px; }
@media (max-width: 820px) {
    .abschluss { grid-template-columns: 1fr; }
    .abschluss .knopf { margin-top: 22px; }
}

/* --------------------------------------------------------------------------
   11. Datenkarte (Massage, Kontakt, Anmeldung)
   -------------------------------------------------------------------------- */
.daten {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 4px 26px;
    box-shadow: var(--schatten);
}
.daten-zeile {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
}
.daten-zeile:last-child { border-bottom: none; }
.daten-zeile .bezeichnung { color: var(--muted); font-size: 16.5px; }
.daten-zeile .wert { font-weight: 600; font-size: 18.5px; text-align: right; }

/* --------------------------------------------------------------------------
   12. Kacheln
   -------------------------------------------------------------------------- */
.kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@media (max-width: 820px) { .kacheln { grid-template-columns: 1fr; } }

.kachel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 28px;
}
.kachel h3 { margin: 0 0 8px; font-size: 24px; }
.kachel p  { font-size: 17.5px; margin-bottom: 14px; }
.kachel p:last-child { margin-bottom: 0; }

.band-navy .kachel, .band-plum .kachel {
    background: rgba(255, 255, 255, .07);
    border-color: rgba(255, 255, 255, .16);
}

.kachel-symbol {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--flame);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

/* --------------------------------------------------------------------------
   13. Schritte
   -------------------------------------------------------------------------- */
.schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.schritte-zwei { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 820px) { .schritte, .schritte-zwei { grid-template-columns: 1fr; } }

.schritt {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: 24px;
}
.schritt .nummer {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--navy);
    color: var(--flame);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 12px;
}
.schritt h3 { font-size: 20px; margin: 0 0 6px; }
.schritt p  { color: var(--muted); font-size: 17px; margin: 0; }

/* --------------------------------------------------------------------------
   14. Zitat mit Atemlicht
   Das einzige dunkle Band im Inhalt. Hinter dem Zitat atmet ein warmes
   Licht: 5 Sekunden ein, 5 Sekunden aus – ein ruhiger Qigong-Atemzug.
   Das Licht bleibt immer innerhalb des Bandes.
   -------------------------------------------------------------------------- */
.zitat {
    position: relative;
    isolation: isolate;
    background: var(--korn-auf-dunkel), var(--navy);
    text-align: center;
    padding: calc(var(--band-abstand) + 24px) 28px;
}
.zitat::after {
    content: '';
    position: absolute;
    inset: 0;
    margin: auto;
    width: min(720px, 100%);
    height: 100%;
    background: radial-gradient(closest-side,
        rgba(252, 171, 20, .30),
        rgba(237, 96, 30, .16) 42%,
        rgba(158, 109, 149, .10) 68%,
        rgba(21, 13, 68, 0));
    z-index: -1;
    animation: atmen 10s ease-in-out infinite;
}
@keyframes atmen {
    0%, 100% { transform: scale(.66); opacity: .55; }
    50%      { transform: scale(1);   opacity: 1; }
}
.zitat p {
    font-family: 'Lora', Georgia, serif;
    font-style: italic;
    font-size: clamp(24px, 3.4vw, 32px);
    color: #fff;
    max-width: 22ch;
    margin: 0 auto;
    line-height: 1.5;
}

/* --------------------------------------------------------------------------
   15. Kalenderblatt
   Zeigt den (nächsten) Kurstermin wie ein Blatt vom Abreißkalender.
   Beim Einblenden klappt es von oben herunter und schwingt kurz nach.
   -------------------------------------------------------------------------- */
.kalenderblatt {
    flex: none;
    width: 104px;
    display: flex;
    flex-direction: column;
    text-align: center;
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px var(--line),
        0 2px 0 -1px #EFE6D6,
        0 4px 0 -2px #E6DBC8,
        0 16px 26px -18px rgba(21, 13, 68, .42);
    transform-origin: 50% 0;
}
.kb-tag {
    background: var(--navy);
    color: var(--flame);
    font-size: 13.5px;
    font-weight: 600;
    padding: 7px 4px 6px;
}
.kb-zahl {
    font-family: 'Lora', Georgia, serif;
    font-weight: 600;
    font-size: 46px;
    line-height: 1;
    color: var(--navy);
    padding-top: 12px;
}
.kb-monat {
    font-size: 15px;
    font-weight: 600;
    color: var(--muted);
    padding: 5px 4px 13px;
}

/* --------------------------------------------------------------------------
   16. Kurs-Vorschau (Startseite)
   -------------------------------------------------------------------------- */
.kurs-vorschau {
    display: grid;
    grid-template-columns: 1.35fr .65fr;
    gap: 30px;
    align-items: center;
    margin-top: 6px;
}
.kurs-vorschau-karte {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 30px;
    box-shadow: var(--schatten);
}
.kurs-kopfzeile { display: flex; gap: 24px; align-items: flex-start; }

.kurs-eckdaten { list-style: none; margin: 0; padding: 0; }
.kurs-eckdaten li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin: 0 0 10px;
    font-size: 18px;
    line-height: 1.45;
}
.kurs-eckdaten li:last-child { margin-bottom: 0; }
.kurs-eckdaten .symbol { margin-top: 2px; }
.kurs-eckdaten strong { font-weight: 600; }

.kurs-vorschau-karte .knopf { margin-top: 28px; }

/* Platzhalter in den bekannten Formaten, solange noch kein Foto da ist
   (Portrait auf der Startseite: Hochformat, Kursraum: Querformat) */
.willkommen > .bildplatz     { aspect-ratio: 3 / 4; min-height: 0; max-width: 340px; width: 100%; justify-self: center; }
.kurs-vorschau > .bildplatz  { aspect-ratio: 4 / 3; min-height: 0; }

@media (max-width: 820px) {
    .kurs-vorschau { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   17. Kurskarte (qigong.php)
   -------------------------------------------------------------------------- */
.kurskarte {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 28px;
    box-shadow: var(--schatten-hoch);
    overflow: hidden;
}
.kurskarte + .kurskarte { margin-top: 56px; }

/* Kopf: Kalenderblatt + Titel links, Bild rechts */
.kurskarte-oben {
    display: grid;
    grid-template-columns: 1fr 290px;
    gap: 34px;
    align-items: center;
    padding: 38px 38px 8px;
}
.kurskarte-kopf { display: flex; gap: 26px; align-items: flex-start; }
.kurskarte-kopf h2 { font-size: clamp(30px, 4vw, 40px); margin: 0 0 12px; }

.kurs-status {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    padding: 4px 13px 4px 10px;
    border-radius: 999px;
    background: #FDEFE4;
    color: var(--ember-tief);
    font-size: 15.5px;
    font-weight: 600;
}
.kurs-status::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ember);
}

.kurskarte-bild .foto,
.kurskarte-bild .bildplatz { border-radius: 18px; }
/* Platzhalter im selben 4:3-Format wie das spätere Foto */
.kurskarte-bild .bildplatz { aspect-ratio: 4 / 3; min-height: 0; background: var(--paper); }

.kurskarte-text { max-width: 64ch; margin: 26px 38px 0; }

/* Termine, nach Monaten in Spalten */
.kurs-termine {
    margin: 30px 38px 0;
    padding-top: 28px;
    border-top: 1px solid var(--line);
}
.kurs-termine-kopf {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px 20px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.kurs-termine-kopf h3 { margin: 0; font-size: 22px; }

.kurs-fortschritt { display: flex; align-items: center; gap: 12px; font-size: 15.5px; color: var(--muted); }
.fortschritt-spur {
    width: 150px;
    height: 6px;
    border-radius: 99px;
    background: var(--sand);
    overflow: hidden;
}
.fortschritt-balken {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--ember);
    transform-origin: left center;
    transform: scaleX(var(--anteil, 0));
}

.termin-monate {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 18px 30px;
}
.monat-name {
    font-size: 19px;
    margin: 0 0 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--line);
}
.termin-liste { list-style: none; margin: 0; padding: 0; }
.termin-liste li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 10px;
    margin: 0;
    padding: 7px 0;
}
/* Markierungspunkt vor jedem Termin */
.termin-liste li::before {
    content: '';
    flex: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 1.5px solid #CBBDA5;
    background: #fff;
}
.tl-wochentag { width: 24px; color: var(--muted); font-size: 16px; }
.tl-zahl { font-weight: 600; font-size: 19px; }
.tl-hinweis {
    flex-basis: 100%;
    padding-left: 20px;
    margin-top: -2px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ember-tief);
}

.termin-liste li.vorbei { color: var(--leise); }
.termin-liste li.vorbei .tl-wochentag { color: var(--leise); }
.termin-liste li.vorbei .tl-zahl { font-weight: 400; text-decoration: line-through; text-decoration-color: rgba(118, 112, 133, .6); }
.termin-liste li.vorbei::before { background: #CBBDA5; }

/* Der nächste Termin ist hinterlegt und sein Punkt atmet im selben
   Takt wie das Zitatlicht */
.termin-liste li.naechster {
    margin: 0 -10px;
    padding: 7px 10px;
    border-radius: 12px;
    background: #FDF1E1;
}
.termin-liste li.naechster::before {
    border-color: var(--flame);
    background: var(--flame);
    animation: atem-ring 10s ease-in-out infinite;
}
@keyframes atem-ring {
    0%, 100% { box-shadow: 0 0 0 0 rgba(252, 171, 20, .45); }
    50%      { box-shadow: 0 0 0 7px rgba(252, 171, 20, 0); }
}

/* Aktionsleiste unten in der Karte */
.kurskarte-aktion {
    margin-top: 34px;
    padding: 26px 38px;
    background: #FBF6EE;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.kurskarte-preis { margin: 0; color: var(--muted); font-size: 16.5px; line-height: 1.45; }
.kurskarte-preis strong {
    display: block;
    font-family: 'Lora', Georgia, serif;
    font-size: 27px;
    color: var(--ink);
}
.kurskarte-knoepfe { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.kurskarte-knoepfe .knopf,
.kurskarte-knoepfe .textlink { margin-top: 0; }

@media (max-width: 820px) {
    .kurskarte-oben { grid-template-columns: 1fr; gap: 26px; }
    .kurskarte-bild { order: -1; }   /* auf dem Handy Bild zuerst */
}

/* --------------------------------------------------------------------------
   18. Hinweise und Disclaimer
   Hinweise sind kein farbiger Kasten, sondern eine ruhige Notiz unter
   einer feinen Linie.
   -------------------------------------------------------------------------- */
.hinweis {
    margin: 32px 0;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    color: var(--muted);
}
.hinweis h3, .hinweis h4 { margin-top: 0; color: var(--ink); }
.hinweis p { font-size: 18px; }
.hinweis p:last-child { margin-bottom: 0; }

.disclaimer {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 22px 24px;
    color: var(--muted);
    font-size: 17px;
}
.disclaimer h4 { margin: 0 0 8px; font-size: 18px; color: var(--ink); }
.disclaimer p:last-child { margin-bottom: 0; }

.fehler {
    background: #FDECE6;
    border-left: 5px solid #C0392B;
    border-radius: 10px;
    padding: 16px 20px;
    color: #8E2B1F;
    font-weight: 600;
    margin-bottom: 20px;
}

/* --------------------------------------------------------------------------
   19. Formulare
   -------------------------------------------------------------------------- */
.formularkarte {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 22px;
    padding: 30px;
    box-shadow: var(--schatten);
}

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .form-row { grid-template-columns: 1fr; } }

.form-group { margin-bottom: 18px; }

label {
    display: block;
    font-weight: 600;
    font-size: 17px;
    margin-bottom: 6px;
}

input, select, textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: inherit;
    font-size: 18px;
    color: var(--ink);
    background: #FDFCFA;
    border: 1.5px solid var(--line);
    border-radius: 12px;
    transition: border-color .25s ease, box-shadow .3s ease, background-color .25s ease;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--flame);
    background: #fff;
    box-shadow: 0 0 0 4px rgba(252, 171, 20, .22);
    outline: none;
}
textarea { resize: vertical; }

.honeypot { position: absolute; left: -9999px; top: -9999px; }

/* --------------------------------------------------------------------------
   20. Fußzeile
   -------------------------------------------------------------------------- */
.seitenfuss {
    position: relative;
    background: var(--plum);
    padding: 44px 28px 40px;
    text-align: center;
    color: rgba(255, 255, 255, .82);
    font-size: 17px;
    line-height: 1.85;
}
.seitenfuss strong { color: #fff; font-family: 'Lora', Georgia, serif; font-size: 19px; }
.seitenfuss a { color: var(--flame); }
.seitenfuss .fusslinks { margin-top: 12px; font-size: 16px; }
.seitenfuss .fusslinks a { color: rgba(255, 255, 255, .8); margin: 0 10px; }

/* --------------------------------------------------------------------------
   21. Einblenden beim Scrollen
   Regeln aus Nutzerstudien (Nielsen Norman Group, "Scroll Fading 101"):
   - Fließtext wird nie versteckt: Niemand soll auf Text warten müssen.
   - Einblendungen bleiben kurz (unter 0,5 s pro Element) und laufen nur
     einmal.
   - Auf dem Handy keine Einblendungen von Kacheln und Schritten.
   Bewegung bekommen deshalb nur Überschriften und Zitat (per GSAP, siehe
   footer.php), Fotos und die Schmuckelemente der Kurskarte.
   Alle Ausgangszustände gelten nur mit html.bewegung (header.php):
   Ohne Skript oder mit "Bewegung reduzieren" ist alles sofort da.
   Die Klasse "sichtbar" setzt footer.php einmalig.
   -------------------------------------------------------------------------- */

/* Fotos im Inhalt: Vorhang von unten, das Bild setzt sich */
html.bewegung .einblenden .foto {
    clip-path: inset(12% 0 0 0 round 18px);
    transition: clip-path 1s var(--ease-sanft) .05s;
}
html.bewegung .einblenden .foto img {
    transform: scale(1.08);
    transition: transform 1.4s var(--ease-sanft) .05s;
}
html.bewegung .einblenden.sichtbar .foto { clip-path: inset(0 0 0 0 round 18px); }
html.bewegung .einblenden.sichtbar .foto img { transform: none; }

/* Kacheln und Schritte: nur auf breiten Bildschirmen, kurz nacheinander */
.kacheln > :nth-child(2), .schritte > :nth-child(2) { --j: 1; }
.kacheln > :nth-child(3), .schritte > :nth-child(3) { --j: 2; }
.kacheln > :nth-child(4), .schritte > :nth-child(4) { --j: 3; }
.kacheln > :nth-child(5), .schritte > :nth-child(5) { --j: 4; }
.kacheln > :nth-child(6), .schritte > :nth-child(6) { --j: 5; }
.kacheln > :nth-child(7), .schritte > :nth-child(7) { --j: 6; }
.kacheln > :nth-child(8), .schritte > :nth-child(8) { --j: 7; }

@media (min-width: 821px) {
    html.bewegung .einblenden .kacheln > *,
    html.bewegung .einblenden .schritte > * {
        opacity: 0;
        translate: 0 16px;
        transition:
            opacity .45s ease calc(var(--j, 0) * 70ms),
            translate .6s var(--ease-sanft) calc(var(--j, 0) * 70ms),
            transform .4s var(--ease-sanft),
            box-shadow .4s ease,
            border-color .4s ease;
    }
    html.bewegung .einblenden.sichtbar .kacheln > *,
    html.bewegung .einblenden.sichtbar .schritte > * {
        opacity: 1;
        translate: none;
    }

    /* Schritt-Nummern setzen federnd ein, kurz nach ihrer Karte */
    html.bewegung .einblenden .schritt .nummer {
        transform: scale(.4);
        opacity: 0;
        transition:
            transform .6s var(--ease-feder) calc(var(--j, 0) * 70ms + 200ms),
            opacity .25s ease calc(var(--j, 0) * 70ms + 200ms);
    }
    html.bewegung .einblenden.sichtbar .schritt .nummer { transform: none; opacity: 1; }
}

/* Karten mit Überschrift heben sich unter der Maus leicht an */
@media (hover: hover) {
    .kachel:has(h3) { transition: transform .4s var(--ease-sanft), box-shadow .4s ease, border-color .4s ease; }
    .kachel:has(h3):hover {
        transform: translateY(-4px);
        box-shadow: var(--schatten-hoch);
        border-color: #D6C8B0;
    }
}

/* Kalenderblatt klappt herunter und schwingt kurz nach */
html.bewegung .einblenden .kalenderblatt {
    opacity: 0;
    transform: perspective(700px) rotateX(-96deg);
    transition:
        transform 1s var(--ease-feder) .25s,
        opacity .2s linear .25s;
}
html.bewegung .einblenden.sichtbar .kalenderblatt {
    opacity: 1;
    transform: perspective(700px) rotateX(0deg);
}

/* Termine erscheinen kurz nacheinander (--n setzt qigong.php) */
html.bewegung .einblenden .termin-liste li {
    opacity: 0;
    translate: -6px 0;
    transition:
        opacity .4s ease calc(350ms + var(--n, 0) * 35ms),
        translate .5s var(--ease-sanft) calc(350ms + var(--n, 0) * 35ms);
}
html.bewegung .einblenden.sichtbar .termin-liste li { opacity: 1; translate: none; }

/* Fortschrittsbalken läuft auf seinen Stand */
html.bewegung .einblenden .fortschritt-balken {
    transform: scaleX(0);
    transition: transform 1.2s var(--ease-sanft) .5s;
}
html.bewegung .einblenden.sichtbar .fortschritt-balken { transform: scaleX(var(--anteil, 0)); }

/* --------------------------------------------------------------------------
   22. Seitenwechsel
   Beim Klick auf einen Link bleibt die Kopfzeile stehen, der Inhalt
   blendet weich über. Läuft in Safari (ab 18.2) und Chrome/Edge;
   andere Browser wechseln wie bisher ohne Übergang.
   -------------------------------------------------------------------------- */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: seite-aus .25s ease-in both; }
::view-transition-new(root) { animation: seite-ein .55s var(--ease-sanft) both; }
@keyframes seite-aus { to   { opacity: 0; } }
@keyframes seite-ein { from { opacity: 0; } }

/* --------------------------------------------------------------------------
   23. Vorschau-Banner
   Nur sichtbar, wenn ein eingeloggter Admin über admin-texte.php oder
   admin-bilder.php mit ?vorschau=1 einen ungespeicherten Entwurf ansieht.
   -------------------------------------------------------------------------- */
.vorschau-banner {
    background: var(--flame);
    color: var(--navy);
    text-align: center;
    font-weight: 600;
    font-size: 15px;
    padding: 8px 16px;
}

/* --------------------------------------------------------------------------
   24. Handyansicht – Abstände und Größen anpassen
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    :root { --band-abstand: 48px; }

    body { font-size: 18px; }

    .seitenkopf { padding: 10px 18px; }
    .marke { font-size: 17px; }
    .marke img { width: 36px; height: 36px; }

    main { padding: 40px 20px; }
    .innen, .innen-schmal { padding: 0 20px; }
    .willkommen { padding: 40px 20px 60px; gap: 24px; }
    .seitenkopf-block { padding-top: 36px; padding-bottom: 54px; }

    .kachel { padding: 22px; }
    .schritt { padding: 20px; }
    .daten { padding: 2px 20px; }
    .formularkarte { padding: 22px; }
    .disclaimer { padding: 18px 20px; }
    .zitat { padding-left: 20px; padding-right: 20px; }
    .seitenfuss { padding-left: 20px; padding-right: 20px; padding-bottom: 32px; }

    /* Deutsche Silbentrennung, damit lange Wörter wie
       "Meditationseinheiten" nicht aus der Zeile ragen */
    p, li {
        -webkit-hyphens: auto;
        hyphens: auto;
        hyphenate-limit-chars: 10 4 4;
    }
    .abstand-oben { margin-top: 56px; }
    .kacheln:not(:has(h3)) .kachel { padding: 15px 0 15px 30px; }
    .kacheln:not(:has(h3)) .kachel::before { top: 23px; }
    .stationen > p:not(:first-of-type) { padding-left: 40px; }

    /* Datenzeilen untereinander statt gequetscht nebeneinander */
    .daten-zeile { flex-direction: column; gap: 2px; padding: 14px 0; }
    .daten-zeile .wert { text-align: left; }

    /* Kalenderblatt etwas kleiner */
    .kalenderblatt { width: 84px; border-radius: 14px; }
    .kb-tag { font-size: 12.5px; }
    .kb-zahl { font-size: 38px; padding-top: 10px; }
    .kb-monat { font-size: 14px; padding-bottom: 11px; }

    /* Kurs-Vorschau (Startseite) */
    .kurs-vorschau-karte { padding: 22px; border-radius: 20px; }
    .kurs-kopfzeile { flex-direction: column; gap: 20px; }
    .kurs-eckdaten li { font-size: 17px; gap: 10px; }

    /* Kurskarte (Qigong-Seite) */
    .kurskarte { border-radius: 22px; }
    .kurskarte-oben { padding: 22px 22px 4px; }
    .kurskarte-kopf {
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "status status"
            "blatt  titel"
            "daten  daten";
        gap: 0 18px;
        align-items: center;
    }
    .kurskarte-titel { display: contents; }
    .kurskarte-kopf .kalenderblatt { grid-area: blatt; }
    .kurskarte-kopf .kurs-status   { grid-area: status; justify-self: start; margin-bottom: 16px; }
    .kurskarte-kopf h2             { grid-area: titel; margin: 0; }
    .kurskarte-kopf .kurs-eckdaten { grid-area: daten; margin-top: 18px; }
    .tl-hinweis { display: none; }   /* auf schmalen Spalten reicht die Hinterlegung */
    .kurs-status { font-size: 14.5px; }
    .kurskarte-text { margin: 22px 22px 0; }
    .kurs-termine { margin: 26px 22px 0; padding-top: 24px; }
    .termin-monate { grid-template-columns: repeat(auto-fit, minmax(86px, 1fr)); gap: 18px 14px; }
    .monat-name { font-size: 17px; }
    .tl-zahl { font-size: 18px; }
    .fortschritt-spur { width: 110px; }
    .kurskarte-aktion { padding: 22px; flex-direction: column; align-items: stretch; }
    .kurskarte-knoepfe { flex-direction: column; align-items: stretch; gap: 8px; text-align: center; }

    /* Knöpfe über die volle Breite – leichter zu treffen */
    .knopf, button[type="submit"], main button {
        display: block;
        width: 100%;
        text-align: center;
        padding: 17px 20px;
    }
    .textlink { margin-left: 0 !important; }
}

/* --------------------------------------------------------------------------
   25. Bewegung reduzieren
   Wer in den Systemeinstellungen "Bewegung reduzieren" aktiviert hat,
   bekommt alle Inhalte sofort und ohne Animation (header.php setzt dann
   die Klasse "bewegung" gar nicht erst). Das Atemlicht steht still,
   Seitenwechsel passieren ohne Überblendung.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        transition-delay: 0s !important;
    }
    .zitat::after { animation: none; transform: none; opacity: .8; }
    .termin-liste li.naechster::before { animation: none; }

    @view-transition { navigation: none; }
}