/* ==========================================================================
   Lernas Tortenfactory — Editorial-Stylesheet
   Vorlage: ruhige Fläche in Creme, grosse weiche Serifenschrift (Fraunces),
   schmale Lesespalte, eine hervorgehobene Tabellenspalte. Fliesstext ist Lato.
   Das Stylesheet ist für alle Seiten gedacht. Startseitenspezifisches steckt
   in .tf-*-Klassen; es gibt keine globalen Element-Selektoren, die andere
   Seiten umstellen könnten.
   Schriften (Fraunces, Lato) liegen als eigene Dateien in public/fonts/ und
   werden oben per @font-face eingebunden — ohne Google und ohne Einwilligung.
   Bis sie geladen sind, greifen die Ersatzschriften Georgia bzw. system-ui.

   Aufbau der Datei:
     0  Eigene Schriften (@font-face)
     1  Grundwerte (Farben, Raster, Schriften)
     2  Grundfläche, Raster, Abschnitte, Typografie, Sprunglink
     3  Knöpfe und Textlinks
     4  Navigation
     5  Filmkorn (gemeinsame Hilfsklasse) und Horizont-Bogen
     6  Bühne: Streifen, Fenster, Intro, Titel, Hinweis
     7  Zeitachse beim Laden (.tf-motion)
     8  Unterzeile und Knöpfe auf der Kugel
     9  Meine Geschichte, Kennzahlen, Leistungen
     10 Preistabelle
     11 Galerie
     12 Kundenstimmen
     13 Häufige Fragen
     14 Kontakt (Abendrot) und Fuss
     15 Reduced Motion
     16 Schwebender Kontaktknopf
     17 Unterseiten (Preise, Galerie, Kontakt, Termin, Rückruf, Bewertungen)
   ========================================================================== */

/* --------------------------------------------------------------------------
   0  Eigene Schriften (public/fonts/, OFL-Lizenzen liegen daneben)
   Kein Abruf bei Google, keine Einwilligung nötig. Fraunces ist variabel
   (Gewicht 300–600, optische Grösse 9–144, Achsen SOFT und WONK). Bis die
   Datei geladen ist, greifen die Ersatzschriften aus den Tokens.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Fraunces";
    font-style: normal;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/fraunces-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Fraunces";
    font-style: italic;
    font-weight: 300 600;
    font-display: swap;
    src: url("../fonts/fraunces-italic-var.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/lato-400.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: "Lato";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/lato-700.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --------------------------------------------------------------------------
   1  Grundwerte
   -------------------------------------------------------------------------- */
:root {
    /* Farben — Morgenröte (Variante B) */
    --tf-bg: #FDF7F2;
    --tf-surface: #FBEDE7;
    --tf-ink: #4A2F2B;
    --tf-ink-soft: #7A615C;
    --tf-rule: #EED9D1;
    --tf-rose: #E3A9A2;
    --tf-rose-tint: #FBE3DE;
    --tf-link: #A4534D;
    --tf-dark: #4A2F2B;

    /* Raster */
    --tf-prose: 40rem;
    --tf-wide: 60rem;
    --tf-space: 7rem;
    --tf-pad: 1.5rem;

    /* Schriftfamilien mit Ersatz: Fraunces für Titel, Lato für alles andere */
    --tf-display: "Fraunces", Georgia, serif;
    --tf-sans: "Lato", system-ui, sans-serif;

    /* Bühne: Grund, Himmel, Kugel, Glühen (Morgenröte) */
    --tf-night: #FBEFE9;
    --tf-sky: linear-gradient(
        #FFF8F2 0%,
        #FCEDE6 24%,
        #F8DCD6 42%,
        #F4C6BC 54%,
        #F6B9A0 60%,
        #FAD7B0 64%,
        #FFF1DE 66%,
        #F3E3D8 72%
    );
    /* Abendrot: derselbe Himmel, oben etwas wärmer */
    --tf-sky-sunset: linear-gradient(
        #FCEDE6 0%,
        #FCEDE6 24%,
        #F8DCD6 42%,
        #F4C6BC 54%,
        #F6B9A0 60%,
        #FAD7B0 64%,
        #FFF1DE 66%,
        #F3E3D8 72%
    );
    --tf-sphere: radial-gradient(ellipse at 50% 0%, #FFFDFB 0%, #FBF3EE 10%, #F2E2D9 28%, #E9D3C8 45%);
    --tf-glow: 0 0 0 1.5px rgba(255, 255, 255, .95),
               0 -4px 14px rgba(255, 236, 214, .95),
               0 -20px 60px rgba(247, 180, 150, .55),
               0 -70px 160px rgba(236, 160, 160, .35);

    --tf-ease: cubic-bezier(.16, 1, .3, 1);
}

@media (max-width: 640px) {
    :root {
        --tf-space: 4rem;
        --tf-pad: 1.25rem;
    }
}

/* --------------------------------------------------------------------------
   2  Grundfläche, Raster, Abschnitte, Typografie
   -------------------------------------------------------------------------- */
.tf-page {
    margin: 0;
    background-color: var(--tf-bg);
    color: var(--tf-ink-soft);
    font-family: var(--tf-sans);
    font-size: 1.0625rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    /* Die Seitenstreifen der Bühne werden nach aussen geschoben: clip (nicht
       hidden) bricht position: sticky nicht. */
    overflow-x: clip;
}



.tf-wrap {
    width: 100%;
    max-width: var(--tf-wide);
    margin: 0 auto;
    padding-left: var(--tf-pad);
    padding-right: var(--tf-pad);
}

.tf-wrap--prose {
    max-width: var(--tf-prose);
}

.tf-section {
    padding-top: var(--tf-space);
    padding-bottom: var(--tf-space);
}

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

.tf-section--rule {
    border-top: 1px solid var(--tf-rule);
}

/* «Was ich für dich tun kann» und die Preistabelle bilden einen Block */
.tf-section--joined-top {
    padding-bottom: 2.5rem;
}

.tf-section--joined-bottom {
    padding-top: 2.5rem;
}

/* Fraunces überall weich: SOFT 100, WONK 0; die optische Grösse regelt der
   Browser. Kursive Akzentwörter bekommen WONK 1 (siehe .tf-h1 em/.tf-h2 em). */
.tf-h1,
.tf-h2,
.tf-h3,
.tf-lead,
.tf-stage__intro,
.tf-stage__sub,
.tf-pullquote,
.tf-metric__num,
.tf-faq summary,
.tf-table caption,
.tf-quote__text {
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 100, "WONK" 0;
}

.tf-h1 {
    margin: 0 0 1rem;
    font-family: var(--tf-display);
    font-weight: 400;
    font-size: clamp(3.1rem, 8.5vw, 7rem);
    line-height: 1.02;
    letter-spacing: -0.015em;
    color: var(--tf-ink);
}

.tf-h1 em {
    font-style: italic;
    font-variation-settings: "SOFT" 100, "WONK" 1;
}

.tf-h2 {
    margin: 0 0 1.25rem;
    font-family: var(--tf-display);
    font-weight: 400;
    font-size: clamp(2.1rem, 4.4vw, 3rem);
    line-height: 1.08;
    letter-spacing: -0.015em;
    color: var(--tf-ink);
}

.tf-h2 em {
    font-style: italic;
    color: var(--tf-link);
    font-variation-settings: "SOFT" 100, "WONK" 1;
}

.tf-h3 {
    margin: 0 0 0.5rem;
    font-family: var(--tf-display);
    font-weight: 500;
    font-size: 1.3125rem;
    line-height: 1.25;
}

.tf-lead {
    margin: 0 0 1.5rem;
    font-family: var(--tf-display);
    font-style: italic;
    font-weight: 350;
    font-size: clamp(1.45rem, 2.5vw, 1.85rem);
    line-height: 1.38;
    color: var(--tf-ink);
}

.tf-label {
    display: inline-block;
    font-family: var(--tf-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--tf-link);
}

.tf-prose {
    max-width: var(--tf-prose);
}

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

/* Sprunglink (nur bei Tastaturfokus sichtbar) */
.tf-skip {
    position: absolute;
    top: 0;
    left: -9999px;
    z-index: 200;
    padding: 0.75rem 1.25rem;
    background-color: var(--tf-surface);
    color: var(--tf-dark);
    font-family: var(--tf-sans);
    font-weight: 700;
    text-decoration: none;
}

.tf-skip:focus {
    left: 1rem;
    top: 1rem;
}

/* --------------------------------------------------------------------------
   3  Knöpfe und Textlinks
   -------------------------------------------------------------------------- */
.tf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.85rem 1.6rem;
    border: 1px solid transparent;
    border-radius: 9999px;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    font-style: normal;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}

.tf-btn--dark {
    background-color: var(--tf-dark);
    color: #fff;
}

.tf-btn--dark:hover {
    background-color: var(--tf-link);
}

/* Ring: durchsichtiger Knopf auf hellem Grund */
.tf-btn--ghost {
    background-color: transparent;
    color: var(--tf-ink);
    box-shadow: inset 0 0 0 1px rgba(74, 47, 43, .35);
}

.tf-btn--ghost:hover {
    box-shadow: inset 0 0 0 1px var(--tf-ink);
}

.tf-btn--outline {
    background-color: transparent;
    color: var(--tf-ink);
    border-color: var(--tf-rule);
}

.tf-btn--outline:hover {
    border-color: var(--tf-rose);
}

.tf-link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--tf-link);
    text-decoration: none;
}

.tf-link-arrow::after {
    content: "\2192";
    transition: transform 200ms ease;
}

.tf-link-arrow:hover {
    text-decoration: underline;
}

.tf-link-arrow:hover::after {
    transform: translateX(4px);
}

/* Fokusring: 2 px --tf-link, 3 px Abstand (schlägt die ältere Regel im Kopf
   von index.html, die für Mausklicks weiterhin gilt) */
.tf-page a:focus-visible,
.tf-page button:focus-visible,
.tf-page summary:focus-visible {
    outline: 2px solid var(--tf-link);
    outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   4  Navigation — über der Bühne durchsichtig und dunkel beschriftet, nach
   der Bühne eine helle Fläche mit feiner Linie unten
   -------------------------------------------------------------------------- */
.tf-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    color: var(--tf-ink);
    background-color: transparent;
}

.tf-nav--solid {
    background-color: rgba(253, 247, 242, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--tf-rule);
}

.tf-nav__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: var(--tf-wide);
    margin: 0 auto;
    padding: 0.85rem var(--tf-pad);
}

.tf-nav__brand {
    display: inline-flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

/* Markenname in Fraunces, wie in der Vorlage */
.tf-nav__brand-name {
    font-family: var(--tf-display);
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 1.1;
    letter-spacing: 0;
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 100, "WONK" 0;
}

.tf-nav__links {
    gap: 1.75rem;
    font-family: var(--tf-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.tf-nav__links a {
    color: inherit;
    text-decoration: none;
    opacity: 0.85;
}

.tf-nav__brand-name,
.tf-nav__links a,
.tf-nav__actions .tf-btn {
    white-space: nowrap;
}

/* Schmale Bildschirme: Termin-Knopf bleibt sichtbar, aber kompakt («Termin») */
@media (max-width: 479px) {
    .tf-nav__actions .tf-btn {
        min-height: 40px;
        padding: 0.4rem 0.9rem;
        font-size: 0.8125rem;
    }

    .tf-nav__cta-rest {
        display: none;
    }
}

@media (max-width: 359px) {
    .tf-nav__brand-name {
        font-size: 1rem;
    }
}

@media (max-width: 1180px) {
    .tf-nav__links {
        gap: 1.25rem;
        font-size: 0.75rem;
        letter-spacing: 0.06em;
    }
}

.tf-nav__links a:hover {
    opacity: 1;
}

.tf-nav__actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.tf-nav__burger {
    padding: 0.4rem;
    color: var(--tf-ink);
    background: none;
    border: 0;
    cursor: pointer;
}

.tf-mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: var(--tf-bg);
    padding: 0.5rem var(--tf-pad) 1.5rem;
}

.tf-mobile a {
    display: block;
    padding: 1rem 0.5rem;
    color: var(--tf-ink);
    font-family: var(--tf-sans);
    font-size: 1.0625rem;
    font-weight: 500;
    text-decoration: none;
    border-bottom: 1px solid var(--tf-rule);
}

.tf-mobile a:hover {
    color: var(--tf-link);
}

.tf-mobile .tf-mobile__cta {
    margin-top: 1rem;
    border-bottom: 0;
    text-align: center;
    background-color: var(--tf-dark);
    color: #fff;
    border-radius: 9999px;
    font-weight: 500;
}

.tf-mobile .tf-mobile__cta:hover {
    color: #fff;
    background-color: var(--tf-link);
}

/* --------------------------------------------------------------------------
   5  Filmkorn und Horizont-Bogen
   -------------------------------------------------------------------------- */

/* Gemeinsame Hilfsklasse für alle dunklen Flächen (Bühne, Kontakt, Fuss) */
.tf-grain {
    position: relative;
}

.tf-grain::before,
.tf-horizon::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 240px 240px;
    opacity: .05;
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Der Horizont: Himmel als Fläche, Kugel als ::after, Korn als ::before.
   Er ist immer so gross wie sein Bezugsrahmen — ein schmales Fenster
   schneidet nur aus, es staucht den Bogen nicht. */
.tf-horizon {
    position: absolute;
    inset: 0;
    overflow: hidden;
    isolation: isolate;
    background-image: var(--tf-sky);
}

.tf-horizon::after {
    content: "";
    position: absolute;
    top: 64%;
    left: 50%;
    z-index: 1;
    width: max(252vw, 1700px);
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translateX(-50%);
    background-image: var(--tf-sphere);
    box-shadow: var(--tf-glow);
}

@media (max-width: 767px) {
    .tf-horizon::after {
        width: max(330vw, 1300px);
    }
}

/* --------------------------------------------------------------------------
   6  Bühne
   -------------------------------------------------------------------------- */
.tf-stage {
    position: relative;
    height: 100vh;
    height: 100svh;
    background-color: var(--tf-night);
}

.tf-stage__sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
    background-color: var(--tf-night);
}

/* Heller Verlauf oben, damit die dunkle Navigation auch über hellen
   Torten-Fotos lesbar bleibt */
.tf-stage__sticky::after {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 22%;
    z-index: 5;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(253, 247, 242, .75), rgba(253, 247, 242, 0));
}

/* Seitenstreifen: Dekoration, ohne JS und ohne Bewegung ausgeblendet */
.tf-stage__panel {
    display: none;
}

.tf-stage__panel img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tf-stage__window {
    position: absolute;
    inset: 0;
}

/* Titelblock: Etikett, H1 und die Willkommenszeile stehen über dem Scheitel
   des Bogens. Die Unterkante liegt 1 rem über dem Scheitel; der Bogen hebt
   sich mit --tf-rise, deshalb wandert der Block mit. */
.tf-stage__title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(38% + 1rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--tf-pad);
    text-align: center;
}

.tf-stage__label {
    margin: 0 0 1.25rem;
    /* dunkler als --tf-link: auf dem Himmel sonst unter 4.5:1 */
    color: #8E423D;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

/* Willkommenszeile: sitzt direkt über dem Scheitel, in Fraunces kursiv */
.tf-stage__intro {
    /* bleibt im schmalen Startfenster (40vw), notfalls über zwei Zeilen */
    max-width: 38vw;
    margin: 1rem auto 0;
    font-family: var(--tf-display);
    font-style: italic;
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    line-height: 1.2;
    color: var(--tf-ink);
    text-align: center;
    visibility: hidden;
}

@media (max-width: 767px) {
    .tf-stage__intro {
        max-width: 52vw; /* Fenster ist 56vw breit */
    }
}

.tf-stage__h1 {
    margin: 0;
    letter-spacing: -0.015em;
    color: var(--tf-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.tf-stage__hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 2.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--tf-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--tf-ink-soft);
    opacity: 0;
    visibility: hidden;
}

.tf-stage__hint-line {
    width: 1px;
    height: 28px;
    background-image: linear-gradient(to bottom, rgba(122, 97, 92, .8), rgba(122, 97, 92, 0));
}

/* --------------------------------------------------------------------------
   7  Zeitachse beim Laden und Scroll-Abbildung (nur mit .tf-motion)
   -------------------------------------------------------------------------- */
.tf-motion .tf-stage {
    /* Scrollstrecke: 160svh bzw. 130svh bleiben zum Abspielen */
    height: 180svh;
    /* Startwerte = p = 0 */
    --tf-open: 0;
    --tf-push: 0;
    --tf-side: 1;
    --tf-intro: 1;
    --tf-hint: 1;
    --tf-rise: 0;
    --tf-title: 0;
    --tf-cta: 0;
    --tf-sidevw: 30vw;
}

@media (max-width: 767px) {
    .tf-motion .tf-stage {
        height: 170svh;
        --tf-sidevw: 22vw;
    }
}

.tf-motion .tf-stage__panel {
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    width: 30vw;
    overflow: hidden;
    opacity: var(--tf-side);
    will-change: transform, opacity;
}

.tf-motion .tf-stage__panel--left-top,
.tf-motion .tf-stage__panel--left-bottom {
    left: 0;
    transform: translateX(calc(var(--tf-push) * -30vw)) scale(calc(1 + var(--tf-push) * .06));
}

.tf-motion .tf-stage__panel--left-top {
    height: 50%;
    bottom: auto;
}

.tf-motion .tf-stage__panel--left-bottom {
    top: 50%;
}

.tf-motion .tf-stage__panel--right {
    right: 0;
    transform: translateX(calc(var(--tf-push) * 30vw)) scale(calc(1 + var(--tf-push) * .06));
}

.tf-motion .tf-stage__window {
    clip-path: inset(0 calc((1 - var(--tf-open)) * 30vw));
    will-change: clip-path;
}

.tf-motion .tf-stage__intro {
    visibility: visible;
    opacity: var(--tf-intro);
    transform: translateY(calc((1 - var(--tf-intro)) * -12px));
}

.tf-motion .tf-stage__hint {
    visibility: visible;
    opacity: var(--tf-hint);
}

.tf-motion .tf-stage__label,
.tf-motion .tf-stage__h1 {
    opacity: var(--tf-title);
    transform: translateY(calc((1 - var(--tf-title)) * 24px));
}

.tf-motion .tf-stage__h1 {
    letter-spacing: calc(var(--tf-title) * -0.015em);
}

/* Der Block aus Unterzeile und Knöpfen übernimmt die Einblendung des
   früheren Inhaltsverzeichnisses: Deckkraft und 16 px Aufstieg, zusammen. */
.tf-motion .tf-stage__cta {
    opacity: var(--tf-cta);
    transform: translateY(calc((1 - var(--tf-cta)) * 16px - var(--tf-rise) * 6svh));
}

.tf-motion .tf-horizon::after {
    /* Bezugspunkt ist der Scheitel: so hebt das Wachsen der Kugel die
       Horizontlinie nicht an, sie steigt nur um die 6svh. */
    transform-origin: 50% 0;
    transform: translateX(-50%) translateY(calc(var(--tf-rise) * -6svh)) scale(calc(1 + var(--tf-rise) * .08));
}

.tf-motion .tf-stage__title {
    /* Der Titelblock steigt mit der Horizontlinie: der Bogen bleibt zwischen
       Titel und Unterzeile, die Knöpfe liegen auf der Kugel. */
    transform: translateY(calc(var(--tf-rise) * -6svh));
}

@media (max-width: 767px) {
    .tf-motion .tf-stage__panel {
        width: 22vw;
    }

    .tf-motion .tf-stage__panel--left-top,
    .tf-motion .tf-stage__panel--left-bottom {
        transform: translateX(calc(var(--tf-push) * -22vw)) scale(calc(1 + var(--tf-push) * .06));
    }

    .tf-motion .tf-stage__panel--right {
        transform: translateX(calc(var(--tf-push) * 22vw)) scale(calc(1 + var(--tf-push) * .06));
    }

    .tf-motion .tf-stage__window {
        clip-path: inset(0 calc((1 - var(--tf-open)) * 22vw));
    }

    .tf-motion .tf-stage .tf-horizon::after {
        top: 62%;
    }
}

/* --- Zeitachse beim Laden (0 bis 2900 ms), Kurve --tf-ease ---------------- */
@keyframes tf-panel-in {
    from { clip-path: inset(100% 0 0 0); }
    to { clip-path: inset(0); }
}

@keyframes tf-window-in {
    from { clip-path: inset(0 var(--tf-sidevw) 100% var(--tf-sidevw)); }
    to { clip-path: inset(0 var(--tf-sidevw) 0 var(--tf-sidevw)); }
}

@keyframes tf-sky-in {
    from { opacity: .35; }
    to { opacity: 1; }
}

@keyframes tf-sunrise {
    from {
        transform: translateX(-50%) translateY(14svh);
        filter: brightness(0);
    }
    to {
        transform: translateX(-50%) translateY(0);
        filter: brightness(1);
    }
}

@keyframes tf-fade-up {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tf-intro-in {
    from {
        opacity: 0;
        transform: translateY(8px);
        filter: blur(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes tf-hint-line {
    0% {
        opacity: 0;
        transform: translateY(-14px) scaleY(.2);
    }
    40% {
        opacity: 1;
        transform: translateY(0) scaleY(1);
    }
    100% {
        opacity: 0;
        transform: translateY(12px) scaleY(1);
    }
}

.tf-motion .tf-stage__panel--left-top {
    animation: tf-panel-in 900ms var(--tf-ease) 100ms backwards;
}

.tf-motion .tf-stage__panel--left-bottom {
    animation: tf-panel-in 900ms var(--tf-ease) 220ms backwards;
}

.tf-motion .tf-stage__panel--right {
    animation: tf-panel-in 900ms var(--tf-ease) 340ms backwards;
}

.tf-motion .tf-stage__window {
    animation: tf-window-in 1100ms var(--tf-ease) backwards;
}

.tf-motion .tf-horizon {
    animation: tf-sky-in 1800ms cubic-bezier(.22, .61, .36, 1) 600ms backwards;
}

.tf-motion .tf-horizon::after {
    animation: tf-sunrise 1800ms cubic-bezier(.22, .61, .36, 1) 600ms backwards;
}

.tf-motion .tf-stage__intro {
    animation: tf-intro-in 800ms var(--tf-ease) 900ms backwards;
}

.tf-motion .tf-stage__hint {
    animation: tf-fade-up 600ms var(--tf-ease) 1500ms backwards;
}

.tf-motion .tf-stage__hint-line {
    animation: tf-hint-line 2400ms var(--tf-ease) 2900ms infinite;
}

/* Sobald gescrollt wurde, ruht die Linie */
.tf-stage--scrolled .tf-stage__hint-line {
    animation: none;
    opacity: 1;
    transform: none;
}

/* --------------------------------------------------------------------------
   8  Unterzeile und Knöpfe auf der Kugel (unter dem Bogen)
   -------------------------------------------------------------------------- */
.tf-stage__cta {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 4%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 var(--tf-pad);
    text-align: center;
}

.tf-stage__sub {
    max-width: 30rem;
    margin: 0;
    font-family: var(--tf-display);
    font-style: italic;
    font-weight: 350;
    font-size: clamp(1.125rem, 1.5vw, 1.25rem);
    line-height: 1.5;
    /* dunkler als --tf-ink-soft, damit die Zeile auf der Kugel klar liest */
    color: var(--tf-ink);
    color: color-mix(in srgb, var(--tf-ink-soft) 55%, var(--tf-ink));
}

.tf-stage__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 0.875rem;
    margin-top: 1.375rem;
}

/* --------------------------------------------------------------------------
   9  Meine Geschichte, Kennzahlen, Leistungen
   -------------------------------------------------------------------------- */
.tf-about {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 768px) {
    .tf-about {
        grid-template-columns: 18rem 1fr;
        gap: 4rem;
    }
}

/* Bogenform des Portraits, mit 12 px Abstand rundum von einer feinen
   Rosé-Linie in derselben Form eingefasst */
.tf-portrait-frame {
    position: relative;
    max-width: 18rem;
    margin: 0 auto;
}

.tf-portrait-frame::after {
    content: "";
    position: absolute;
    inset: -12px;
    border: 1px solid var(--tf-rose);
    border-radius: 9999px 9999px 0 0;
    pointer-events: none;
}

.tf-portrait-wrap {
    overflow: hidden;
    border-radius: 9999px 9999px 0 0;
    background-color: var(--tf-rose-tint);
}

.tf-portrait {
    display: block;
    width: 100%;
    max-width: 18rem;
    margin: 0 auto;
    border-radius: 9999px 9999px 0 0;
}

.tf-pullquote {
    margin: 2rem 0;
    padding: 0.25rem 0 0.25rem 1.25rem;
    border-left: 2px solid var(--tf-rose);
    font-family: var(--tf-display);
    font-size: 1.375rem;
    font-style: italic;
    line-height: 1.4;
    color: var(--tf-ink);
}

/* Kennzahlenzeile zwischen zwei feinen Linien */
.tf-metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.75rem 1.5rem;
    margin-top: 4rem;
    padding: 1.75rem 0;
    border-top: 1px solid var(--tf-rule);
    border-bottom: 1px solid var(--tf-rule);
    text-align: center;
}

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

.tf-metric__num {
    display: block;
    margin-bottom: 0.4rem;
    font-family: var(--tf-display);
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1;
    color: var(--tf-ink);
}

/* Leistungen: Absätze mit fettem Einstieg */
.tf-services {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .tf-services {
        grid-template-columns: repeat(3, 1fr);
        gap: 2.5rem;
    }
}

.tf-service {
    margin: 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--tf-rule);
}

.tf-service strong {
    font-weight: 700;
    color: var(--tf-ink);
}

/* Bilder decken sich auf (editorial.js setzt .is-revealed) */
.tf-motion [data-tf-reveal] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 1100ms var(--tf-ease);
}

.tf-motion [data-tf-reveal] img {
    transform: scale(1.08);
    transition: transform 1100ms var(--tf-ease);
}

.tf-motion [data-tf-reveal].is-revealed {
    clip-path: inset(0);
}

.tf-motion [data-tf-reveal].is-revealed img {
    transform: scale(1);
}

/* --------------------------------------------------------------------------
   10  Preistabelle
   -------------------------------------------------------------------------- */
.tf-tablewrap {
    overflow-x: auto;
    /* kein kurz aufblitzender Scrollbalken, während die Zeilen einblenden */
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1.75rem;
    background-color: #FFFFFF;
}

.tf-table {
    width: 100%;
    min-width: 34rem;
    border-collapse: collapse;
    background-color: #FFFFFF;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
}

.tf-table caption {
    padding: 0 0 1rem;
    text-align: left;
    font-family: var(--tf-display);
    font-size: 1.25rem;
    color: var(--tf-ink);
}

.tf-table th,
.tf-table td {
    padding: 0.85rem 1rem;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--tf-rule);
}

.tf-table thead th {
    font-family: var(--tf-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--tf-ink-soft);
}

.tf-table tbody th {
    font-weight: 500;
    color: var(--tf-ink);
}

/* Hervorgehobene Spalte: die Füllung wächst beim Erscheinen von unten */
.tf-table .is-featured {
    position: relative;
    z-index: 0;
    background-color: transparent;
    border-left: 1px solid var(--tf-rose);
    border-right: 1px solid var(--tf-rose);
}

.tf-table .is-featured::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-color: var(--tf-rose-tint);
    transform: scaleY(1);
    transform-origin: bottom;
}

.tf-motion .tf-table .is-featured::before {
    transform: scaleY(0);
    transition: transform 900ms var(--tf-ease);
}

.tf-motion .is-prices-in .tf-table .is-featured::before {
    transform: scaleY(1);
}

.tf-motion .tf-tablewrap--featured thead tr,
.tf-motion .tf-tablewrap--featured tbody tr {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 600ms var(--tf-ease), transform 600ms var(--tf-ease);
}

.tf-motion .tf-tablewrap--featured tbody tr {
    transition-delay: calc(var(--i, 0) * 60ms);
}

.tf-motion .is-prices-in .tf-tablewrap--featured thead tr,
.tf-motion .is-prices-in .tf-tablewrap--featured tbody tr {
    opacity: 1;
    transform: none;
}

.tf-table thead .is-featured {
    color: var(--tf-ink);
}

.tf-table__flag {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    /* dunkler als --tf-link: auf --tf-rose-tint sonst unter 4.5:1 */
    color: #8E423D;
}

.tf-cakes {
    max-width: var(--tf-prose);
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    color: var(--tf-ink-soft);
}

.tf-footnotes {
    max-width: var(--tf-prose);
    margin-top: 2.5rem;
    font-size: 0.9rem;
    color: var(--tf-ink-soft);
}

.tf-footnotes p {
    margin-bottom: 0.6rem;
}

.tf-footnotes__label {
    margin-right: 0.4rem;
    font-family: var(--tf-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.16em;
    color: var(--tf-ink);
}

.tf-price-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.25rem;
    margin-top: 2.5rem;
}

/* --------------------------------------------------------------------------
   11  Galerie mit Rhythmus: ein grosses Bild, vier kleinere
   -------------------------------------------------------------------------- */
.tf-gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2.5rem 0 2rem;
}

.tf-gallery__item {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.tf-gallery__item--lead {
    grid-column: 1 / -1;
}

.tf-gallery__media {
    overflow: hidden;
    background-color: var(--tf-rose-tint);
}

.tf-gallery__item--lead .tf-gallery__media {
    border-radius: 999px 999px 0 0;
}

.tf-gallery__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1200ms var(--tf-ease);
}

.tf-gallery__media:hover img {
    transform: scale(1.04);
}

.tf-gallery__item figcaption {
    padding-top: 0.9rem;
}

/* Hover auch nach dem Aufdecken (schlägt die Regel von .is-revealed) */
.tf-motion .tf-gallery__media.is-revealed:hover img {
    transform: scale(1.04);
}

.tf-gallery__item:not(.tf-gallery__item--lead) .tf-gallery__media {
    height: 10.5rem;
}

.tf-gallery__item--lead .tf-gallery__media {
    height: 22rem;
}

@media (min-width: 768px) {
    .tf-gallery {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 2rem 1.5rem;
    }

    .tf-gallery__item--lead {
        grid-column: auto;
        grid-row: 1 / span 2;
    }

    .tf-gallery__item--lead .tf-gallery__media {
        flex: 1 1 auto;
        height: auto;
        min-height: 22rem;
    }

    .tf-gallery__item:not(.tf-gallery__item--lead) .tf-gallery__media {
        height: 15rem;
    }
}

/* --------------------------------------------------------------------------
   12  Kundenstimmen: ein Ornament über dem Block, Zitate in Fraunces kursiv
   -------------------------------------------------------------------------- */
.ornament {
    display: block;
    width: 120px;
    height: 14px;
    margin: 2.5rem auto 0;
    color: var(--tf-rose);
}

.tf-quotes {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.5rem;
    margin-top: 2.5rem;
}

@media (min-width: 768px) {
    .tf-quotes {
        grid-template-columns: 1fr 1fr;
        gap: 3rem 4rem;
    }
}

.tf-quote {
    position: relative;
    margin: 0;
}

.tf-quote__mark {
    position: absolute;
    top: -2rem;
    left: -0.75rem;
    z-index: 0;
    font-family: var(--tf-display);
    font-size: 8rem;
    line-height: 1;
    color: var(--tf-rose);
    opacity: 0.35;
    pointer-events: none;
    user-select: none;
}

.tf-quote__text {
    position: relative;
    z-index: 1;
    margin: 0 0 1.25rem;
    font-family: var(--tf-display);
    font-size: clamp(1.5rem, 2.6vw, 2rem);
    font-style: italic;
    line-height: 1.35;
    color: var(--tf-ink);
}

.tf-quote__meta {
    font-family: var(--tf-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--tf-ink-soft);
}

/* --------------------------------------------------------------------------
   13  Häufige Fragen: nur feine Linien, Plus/Minus rechts
   -------------------------------------------------------------------------- */
.tf-faq {
    max-width: var(--tf-prose);
    margin-top: 2.5rem;
}

.tf-faq details {
    border-bottom: 1px solid var(--tf-rule);
}

.tf-faq details:first-of-type {
    border-top: 1px solid var(--tf-rule);
}

.tf-faq summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.25rem 0;
    list-style: none;
    cursor: pointer;
    font-family: var(--tf-display);
    font-size: 1.25rem;
    color: var(--tf-ink);
}

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

.tf-faq summary::after {
    flex: 0 0 auto;
    content: "+";
    font-family: var(--tf-sans);
    font-size: 1.25rem;
    color: var(--tf-link);
}

.tf-faq details[open] summary::after {
    content: "\2212";
}

.tf-faq details p {
    margin: 0 0 1.5rem;
    color: var(--tf-ink-soft);
}

/* --------------------------------------------------------------------------
   14  Kontakt (Abendrot: heller Horizont) und Fuss
   -------------------------------------------------------------------------- */
.tf-contact {
    position: relative;
    overflow: hidden;
    padding-bottom: calc(var(--tf-space) + 4rem);
    background-color: var(--tf-night);
    color: var(--tf-ink);
    text-align: center;
}

/* Am Handy steht der Text höher, damit er ganz im Himmel bleibt */
@media (max-width: 767px) {
    .tf-contact {
        padding-bottom: calc(var(--tf-space) + 8rem);
    }
}

/* Der Abschnitt trägt das Korn (gemeinsame Hilfsklasse), der Horizont darin
   braucht es deshalb nicht noch einmal. */
.tf-horizon--sunset::before {
    content: none;
}

.tf-horizon--sunset {
    background-image: var(--tf-sky-sunset);
}

/* Kugel und Glühen sind dieselben wie auf der Bühne, sie liegt nur tiefer */
.tf-horizon--sunset::after {
    top: 78%;
}

.tf-contact__inner {
    position: relative;
    z-index: 2;
}

.tf-contact .tf-h2 {
    color: var(--tf-ink);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.tf-contact p {
    color: var(--tf-ink);
}

.tf-contact__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    margin-top: 2rem;
}

/* Abendrot: die Kugel sinkt einmalig */
.tf-motion .tf-horizon--sunset::after {
    transform: translateX(-50%) translateY(-4%);
    transition: transform 1600ms var(--tf-ease);
}

.tf-motion .tf-contact.is-lit .tf-horizon--sunset::after {
    transform: translateX(-50%) translateY(0);
}

/* Fuss mit vier Spalten: dunkel, aber warm */
.tf-footer {
    background-color: var(--tf-dark);
    color: #F3E3DC;
    padding: 4rem 0 2rem;
    font-family: var(--tf-sans);
    font-size: 0.9rem;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

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

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

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

.tf-footer__col h2,
.tf-footer__col h3 {
    margin: 0 0 1rem;
    font-family: var(--tf-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.24em;
    color: var(--tf-rose);
}

.tf-footer__col a {
    display: block;
    margin-bottom: 0.55rem;
    color: #FBEDE7;
    text-decoration: none;
}

.tf-footer__col a:hover {
    color: #fff;
    text-decoration: underline;
}

.tf-footer__bottom {
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    text-align: center;
    font-size: 0.85rem;
    color: rgba(243, 227, 220, 0.78);
}

/* --------------------------------------------------------------------------
   15  Reduced Motion: ruhiger Endzustand, keine Zeitachse
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .tf-motion .tf-stage {
        height: 100vh;
        height: 100svh;
    }

    .tf-motion .tf-stage__panel {
        display: none;
    }

    .tf-motion .tf-stage__window {
        clip-path: none;
    }

    .tf-motion .tf-stage__intro,
    .tf-motion .tf-stage__hint {
        display: none;
    }

    .tf-motion [data-tf-reveal] {
        clip-path: none;
    }

    .tf-motion [data-tf-reveal] img {
        transform: none;
    }

    .tf-motion .tf-table .is-featured::before {
        transform: scaleY(1);
    }

    .tf-motion .tf-tablewrap--featured thead tr,
    .tf-motion .tf-tablewrap--featured tbody tr {
        opacity: 1;
        transform: none;
    }

    .tf-motion .tf-stage__label,
    .tf-motion .tf-stage__h1,
    .tf-motion .tf-stage__cta {
        opacity: 1;
        transform: none;
    }

    .tf-motion .tf-stage__title {
        transform: none;
    }

    .tf-motion .tf-stage__h1 {
        letter-spacing: -0.015em;
    }

    .tf-motion .tf-horizon::after {
        transform: translateX(-50%);
        animation: none;
    }

    .tf-motion .tf-horizon--sunset::after {
        transform: translateX(-50%);
    }

    .tf-motion .tf-stage__panel,
    .tf-motion .tf-stage__window,
    .tf-motion .tf-horizon,
    .tf-motion .tf-stage__intro,
    .tf-motion .tf-stage__hint,
    .tf-motion .tf-stage__hint-line {
        animation: none;
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   16  Schwebender Kontaktknopf (Startseite)
   Ein einziger, ruhiger Knopf: Kreis in --tf-dark, kein Grün, kein Pulsieren.
   Er liegt unter dem Cookie-Banner (10000) und über allem anderen.
   -------------------------------------------------------------------------- */
.tf-fab {
    position: fixed;
    right: 20px;
    bottom: calc(20px + env(safe-area-inset-bottom));
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background-color: var(--tf-dark);
    color: #fff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .14), 0 10px 28px rgba(46, 36, 34, .28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 300ms var(--tf-ease), transform 300ms var(--tf-ease),
                background-color 200ms ease, visibility 0s linear 300ms;
}

.tf-fab svg {
    display: block;
    width: 24px;
    height: 24px;
}

.tf-fab.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: opacity 300ms var(--tf-ease), transform 300ms var(--tf-ease),
                background-color 200ms ease, visibility 0s;
}

.tf-fab:hover {
    background-color: var(--tf-ink);
    transform: scale(1.05);
    transition: opacity 300ms var(--tf-ease), transform 200ms var(--tf-ease),
                background-color 200ms ease, visibility 0s linear 300ms;
}

/* Ohne Bewegung (kein .tf-motion am <html>, z. B. ohne JavaScript oder bei
   reduzierter Bewegung): der Knopf ist immer da, ohne Übergang. */
html:not(.tf-motion) .tf-fab {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
}

@media (max-width: 640px) {
    .tf-fab {
        right: 16px;
        bottom: calc(16px + env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {
    .tf-fab,
    .tf-fab.is-visible,
    .tf-fab:hover {
        transition: none;
    }
}

/* --------------------------------------------------------------------------
   17  Unterseiten (Preise, Galerie, Kontakt, Termin, Rückruf, Bewertungen)
   Gemeinsamer Rahmen und Seitenteile der Unterseiten. Die Startseite
   bleibt unberührt: alle Regeln hängen an eigenen Klassen (tf-pagehead,
   tf-breadcrumb, tf-filterbar, masonry-*, gallery-item*, lightbox, tf-form,
   tf-contactlines, tf-panel, tf-calendar, tf-slots, tf-stars) oder an
   Seitenkörpern wie .tf-page--contact.
   -------------------------------------------------------------------------- */

/* Höhe der festen Navigation (siehe 4). Seitenkopf und klebende Filterleiste
   richten sich danach aus; der Menü-Knopf macht die Leiste unter 1024 px
   etwas höher als der Termin-Knopf. */
:root {
    --tf-nav-h: 4.5rem;
}

/* --- Seitenkopf: die Morgenröte der Bühne als ruhiges Band -------------- */
.tf-pagehead {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(320px, 46vh, 440px);
    padding: calc(var(--tf-nav-h) + 1.5rem) var(--tf-pad) clamp(6.5rem, 15vh, 8rem);
    overflow: hidden;
    background-color: var(--tf-night);
    text-align: center;
}

/* Scheitel des Bogens bei 80 % der Kopfhöhe, statisch (keine Animation) */
/* Seitenkopf: Glühen und Scheitel auf 80 % der Kopfhöhe ausgerichtet,
   kleinere Kugel, damit der Bogen im flachen Band sichtbar bleibt */
.tf-horizon--page {
    /* --tf-rise setzt editorial.js nur auf der Bühne; ohne Wert fiele die
       Transform-Regel der Kugel weg und sie wäre nicht mehr zentriert */
    --tf-rise: 0;
    background-image: linear-gradient(
        to bottom,
        #FFF8F2 0%,
        #FCEDE6 30%,
        #F8DCD6 52%,
        #F4C6BC 66%,
        #F6B9A0 74%,
        #FAD7B0 78%,
        #FFF1DE 80%,
        #F3E3D8 88%
    );
}

.tf-horizon--page::after {
    top: 80%;
    width: max(150vw, 1100px);
}

/* Seitenkopf ist statisch: kein Sonnenaufgang */
.tf-motion .tf-horizon--page,
.tf-motion .tf-horizon--page::after {
    animation: none;
}

@media (max-width: 767px) {
    .tf-horizon--page::after {
        width: max(240vw, 900px);
    }
}

.tf-pagehead__inner {
    position: relative;
    z-index: 4;
}

.tf-pagehead .tf-label {
    /* dunkler als --tf-link: auf dem Himmel sonst unter 4.5:1 */
    color: #8E423D;
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.tf-pagehead__h1 {
    margin: 0.75rem 0 1rem;
    font-size: clamp(2.4rem, 5.5vw, 3.75rem);
    text-shadow: 0 1px 0 rgba(255, 255, 255, .6);
}

.tf-pagehead__lead {
    max-width: 34rem;
    margin: 0 auto;
    font-family: var(--tf-display);
    font-style: italic;
    font-weight: 350;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    line-height: 1.45;
    color: var(--tf-ink-soft);
    font-variation-settings: "SOFT" 100, "WONK" 0;
}

/* --- Brotkrumen (Galerie) ----------------------------------------------- */
.tf-breadcrumb {
    padding-top: 1.75rem;
    font-family: var(--tf-sans);
    font-size: 0.8125rem;
    color: var(--tf-ink-soft);
}

.tf-breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tf-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.tf-breadcrumb a:hover {
    color: var(--tf-link);
    text-decoration: underline;
}

.tf-breadcrumb__sep {
    color: var(--tf-rose);
}

.tf-breadcrumb [aria-current="page"] {
    color: var(--tf-ink);
}

/* --- Filterleiste (Galerie): klebt unter der Navigation ----------------- */
.tf-filterbar {
    position: sticky;
    top: var(--tf-nav-h);
    z-index: 50;
    background-color: rgba(253, 247, 242, .92);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--tf-rule);
}

.tf-filterbar__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.65rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.tf-filterbar .filter-btn {
    padding: 0.6rem 1.3rem;
    border: 0;
    border-radius: 9999px;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--tf-rose);
    color: var(--tf-ink);
    font-family: var(--tf-sans);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background-color 200ms ease, color 200ms ease, box-shadow 200ms ease;
}

.tf-filterbar .filter-btn:hover {
    box-shadow: inset 0 0 0 1px var(--tf-ink);
}

.tf-filterbar .filter-btn.active {
    background-color: var(--tf-dark);
    color: #fff;
    box-shadow: none;
}

/* Das Raster beginnt direkt unter der Leiste, nicht mit vollem Abschnittsabstand */
.tf-filterbar + .tf-section {
    padding-top: 2.5rem;
}

/* --- Galerie: CSS-Spalten, Beschriftung unter dem Bild ------------------ */
.masonry-grid {
    column-count: 2;
    column-gap: 1.25rem;
}

@media (min-width: 1024px) {
    .masonry-grid {
        column-count: 3;
    }
}

.masonry-item {
    break-inside: avoid;
    margin: 0 0 1.25rem;
}

.gallery-item {
    position: relative;
    display: block;
}

.gallery-item__media {
    overflow: hidden;
    background-color: var(--tf-rose-tint);
}

.gallery-item__media img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 1200ms var(--tf-ease);
}

.gallery-item__media:hover img {
    transform: scale(1.04);
}

/* Hover auch nach dem Aufdecken (schlägt die Regel von .is-revealed) */
.tf-motion .gallery-item__media.is-revealed:hover img {
    transform: scale(1.04);
}

.gallery-item figcaption {
    padding-top: 0.85rem;
}

.gallery-item figcaption .tf-label {
    display: block;
    margin-bottom: 0.35rem;
    letter-spacing: 0.18em;
}

.gallery-item__title {
    display: block;
    font-family: var(--tf-display);
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--tf-ink);
}

.gallery-item__desc {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--tf-sans);
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--tf-ink-soft);
}

/* Herz-Knopf der Merkliste (wishlist.js setzt ihn in die Bildecke) */
.gallery-item__media {
    position: relative;
}

.wishlist-btn {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--tf-rule);
    border-radius: 50%;
    background: rgba(253, 247, 242, 0.92);
    color: var(--tf-ink);
    cursor: pointer;
    transition: transform 160ms ease, color 160ms ease;
}

.wishlist-btn svg {
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.wishlist-btn:hover {
    color: var(--tf-link);
    transform: scale(1.06);
}

.wishlist-btn.is-active {
    color: var(--tf-link);
}

.wishlist-btn.is-active svg {
    fill: currentColor;
}

.wishlist-btn:focus-visible {
    outline: 2px solid var(--tf-link);
    outline-offset: 2px;
}

.tf-filterbar__merkliste {
    margin-left: auto;
    align-self: center;
    font-family: var(--tf-sans);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--tf-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* --- Lightbox ----------------------------------------------------------- */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: rgba(74, 47, 43, .94);
}

.lightbox.active {
    display: flex;
}

.lightbox img {
    max-width: min(92vw, 1200px);
    max-height: 82vh;
    object-fit: contain;
}

.lightbox__btn {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: var(--tf-bg);
    color: var(--tf-ink);
    cursor: pointer;
}

.lightbox__btn:hover {
    background-color: #fff;
}

.lightbox__btn svg {
    display: block;
    width: 20px;
    height: 20px;
}

.lightbox__btn--close {
    top: 1.5rem;
    right: 1.5rem;
}

.lightbox__btn--prev {
    top: 50%;
    left: 1.5rem;
    transform: translateY(-50%);
}

.lightbox__btn--next {
    top: 50%;
    right: 1.5rem;
    transform: translateY(-50%);
}

#lightbox-counter {
    position: absolute;
    left: 50%;
    bottom: 1.75rem;
    transform: translateX(-50%);
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    letter-spacing: 0.08em;
    color: #F3E3DC;
}

@media (max-width: 640px) {
    .lightbox__btn--close {
        top: 0.75rem;
        right: 0.75rem;
    }

    .lightbox__btn--prev {
        left: 0.5rem;
    }

    .lightbox__btn--next {
        right: 0.5rem;
    }
}

/* --- Formular (Kontakt) ------------------------------------------------- */
.tf-form {
    max-width: var(--tf-prose);
    margin: 0 auto;
    padding: 2.5rem;
    border: 1px solid var(--tf-rule);
    background-color: #FFFFFF;
}

@media (max-width: 640px) {
    .tf-form {
        padding: 1.25rem;
    }
}

.tf-field {
    margin-bottom: 1.5rem;
}

.tf-field:last-of-type {
    margin-bottom: 0;
}

.tf-field__label {
    display: block;
    margin-bottom: 0.5rem;
    font-family: var(--tf-sans);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tf-ink-soft);
}

.tf-field__req {
    color: var(--tf-link);
}

.tf-input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--tf-rule);
    border-radius: 10px;
    background-color: var(--tf-bg);
    color: var(--tf-ink);
    font-family: var(--tf-sans);
    font-size: 1rem;
    line-height: 1.4;
}

.tf-input:focus {
    border-color: var(--tf-rose);
    box-shadow: 0 0 0 3px rgba(227, 169, 162, .35);
    outline: none;
}

textarea.tf-input {
    resize: vertical;
}

/* Fehlerzustand: Klassen von FormValidation (ux.js) und der native Zustand
   nach einem Absendeversuch — beides in derselben Farbe, gut sichtbar. */
.tf-form .tf-input[aria-invalid="true"],
.tf-form .tf-input:user-invalid,
.tf-form .tf-input:not(:placeholder-shown):invalid {
    border-color: #A4534D;
    box-shadow: 0 0 0 3px rgba(164, 83, 77, .18);
}

.tf-form .field-error {
    margin: 0.45rem 0 0;
    font-family: var(--tf-sans);
    font-size: 0.8125rem;
    font-weight: 700;
    color: #A4534D;
}

.tf-field--check {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.tf-check {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.25rem;
    accent-color: var(--tf-link);
}

.tf-field--check .tf-field__label {
    margin-bottom: 0;
    text-transform: none;
    letter-spacing: 0.02em;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
}

.tf-field--check .tf-field__label a {
    color: var(--tf-link);
}

.tf-form__submit {
    width: 100%;
    margin-top: 1.75rem;
}

@media (min-width: 640px) {
    .tf-form__submit {
        width: auto;
        padding-left: 2.5rem;
        padding-right: 2.5rem;
    }
}

/* Rückmeldungen unter dem Formular */
.tf-note {
    max-width: var(--tf-prose);
    margin: 2rem auto 0;
    padding: 1.75rem 2rem;
    border: 1px solid var(--tf-rule);
    background-color: var(--tf-surface);
    text-align: center;
}

.tf-note__title {
    margin: 0 0 0.35rem;
    font-family: var(--tf-display);
    font-size: 1.25rem;
    line-height: 1.25;
    color: var(--tf-ink);
}

.tf-note p {
    margin: 0;
    color: var(--tf-ink-soft);
}

#formError {
    border-color: #A4534D;
    background-color: #FFFFFF;
    color: #A4534D;
}

#formError p {
    color: #A4534D;
}

/* --- Direktkontakt (Kontakt) -------------------------------------------- */
.tf-contactlines {
    margin: 2.5rem 0 0;
    padding: 0;
    list-style: none;
}

.tf-contactlines li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--tf-rule);
}

.tf-contactlines li:first-child {
    border-top: 1px solid var(--tf-rule);
}

.tf-contactlines__icon {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: var(--tf-rose);
}

.tf-contactlines a {
    color: var(--tf-ink);
    text-decoration: none;
}

.tf-contactlines a:hover {
    color: var(--tf-link);
    text-decoration: underline;
}

/* Die Kontaktseite ist der Kontakt: dort gibt es keinen schwebenden Knopf */
.tf-page--contact .tf-fab {
    display: none;
}

/* --- Aktuelle Seite in der Navigation (dezente Markierung) -------------- */
.tf-nav__links a[aria-current="page"],
.tf-mobile a[aria-current="page"] {
    opacity: 1;
    text-decoration: underline;
    text-decoration-color: var(--tf-rose);
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
}

/* --- Zeilenstaffelung der Tabelle ohne Inline-Stil ---------------------- */
/* Die Startseite setzt --i direkt am <tr>; hier dasselbe über die Position,
   damit die Unterseiten ohne style-Attribut auskommen. */
.tf-table tbody tr:nth-child(1) { --i: 0; }
.tf-table tbody tr:nth-child(2) { --i: 1; }
.tf-table tbody tr:nth-child(3) { --i: 2; }
.tf-table tbody tr:nth-child(4) { --i: 3; }
.tf-table tbody tr:nth-child(5) { --i: 4; }

/* --- Zusatzleistungen: Etikett über dem Text ---------------------------- */
.tf-services--notes .tf-label {
    display: block;
    margin-bottom: 0.6rem;
    letter-spacing: 0.16em;
}

.tf-services--notes p {
    margin: 0;
    color: var(--tf-ink-soft);
}

/* --- Meldungen aus Seitenskripten --------------------------------------- */
/* Ersetzen die Tailwind-Farben der Skripte (text-green-600, text-red-600,
   text-red-500, text-gray-500). Ruhig, Lato, ohne eigene display-Regel,
   damit `.hidden` aus tailwind.css weiter greift. */
.tf-msg {
    margin: 1.5rem 0 0;
    padding: 1rem 1.25rem;
    border: 1px solid transparent;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    text-align: center;
}

.tf-msg--ok {
    color: #4E6B4A;                 /* 5,3:1 auf #EEF3EA */
    background-color: #EEF3EA;
    border-color: rgba(78, 107, 74, .35);
}

.tf-msg--error {
    /* #A4534D ergäbe auf #FBE3DE nur 4,37:1 — eine Stufe dunkler, damit
       die vorgeschriebenen 4,5:1 eingehalten sind (4,65:1) */
    color: #9F4F49;
    background-color: #FBE3DE;
    border-color: rgba(164, 83, 77, .35);
}

.tf-msg--muted {
    color: var(--tf-ink-soft);      /* 5,7:1 auf Weiss */
    background-color: transparent;
    border-color: var(--tf-rule);
}

/* --- Termin: Kalender, Uhrzeiten, Panels -------------------------------- */
/* Weisse Flächen mit Rahmen --tf-rule, kein Schatten */
.tf-panel {
    padding: 2rem;
    border: 1px solid var(--tf-rule);
    background-color: #FFFFFF;
}

@media (max-width: 640px) {
    .tf-panel {
        padding: 1.25rem;
    }
}

/* Links der Seite (Hinweis) */
.tf-panel a,
.tf-note a {
    color: var(--tf-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.tf-panel a:hover,
.tf-note a:hover {
    color: var(--tf-ink);
}

/* Zweispaltig ab 1024 px: links Kalender, rechts Uhrzeit und Details */
.tf-booking {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .tf-booking {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2rem;
    }
}

.tf-booking__col {
    display: grid;
    gap: 1.5rem;
    align-content: start;
}

.tf-panel__label {
    display: block;
    margin-bottom: 0.4rem;
    letter-spacing: 0.24em;
}

.tf-panel__title {
    margin: 0 0 1.25rem;
    font-family: var(--tf-display);
    font-weight: 400;
    font-size: 1.75rem;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--tf-ink);
    font-optical-sizing: auto;
    font-variation-settings: "SOFT" 100, "WONK" 0;
}

/* Das Formular im Panel: Fläche und Rahmen kommen vom Panel */
.tf-panel .tf-form {
    max-width: none;
    margin: 0;
    padding: 0;
    border: 0;
    background-color: transparent;
}

/* Ruhige Zusammenfassung über dem Formular («Gewählt: …») */
.tf-booking__summary {
    margin: 0 0 1.5rem;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    color: var(--tf-ink);
}

.tf-booking__hint {
    margin-top: 3rem;
    text-align: left;
}

/* Monatswechsel: runde Knöpfe mit Ring */
.tf-calendar__nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.tf-calendar__navbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--tf-rose);
    color: var(--tf-ink);
    cursor: pointer;
    transition: box-shadow 200ms ease;
}

.tf-calendar__navbtn:hover {
    box-shadow: inset 0 0 0 1px var(--tf-ink);
}

.tf-calendar__navbtn svg {
    display: block;
    width: 18px;
    height: 18px;
}

.tf-calendar__month {
    font-family: var(--tf-display);
    font-size: 1.1875rem;
    line-height: 1.2;
    color: var(--tf-ink);
}

.tf-calendar__weekdays,
.tf-calendar {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 0.25rem;
}

.tf-calendar__weekdays {
    margin-bottom: 0.6rem;
}

.tf-calendar__weekdays > div {
    font-family: var(--tf-sans);
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--tf-ink-soft);
    text-align: center;
}

/* Tage: 44 px in Lato --tf-ink; an schmalen Rändern schrumpfen sie mit,
   damit das Raster nie waagrecht überläuft */
.calendar-day {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 50%;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    line-height: 1;
    color: var(--tf-ink);
    cursor: pointer;
    user-select: none;
    /* Knopf-Grundstil zurücksetzen */
    padding: 0;
    border: 0;
    background: transparent;
    transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.calendar-day:focus-visible {
    outline: 2px solid var(--tf-link);
    outline-offset: 2px;
}

/* Leere Zellen vor dem Monatsersten (das Skript setzt keine Klasse) */
.tf-calendar > div:empty {
    min-height: 44px;
}

.calendar-day:not(.disabled):hover {
    background-color: var(--tf-surface);
}

.calendar-day.today {
    box-shadow: inset 0 0 0 1px var(--tf-rose);
}

.calendar-day.selected {
    background-color: var(--tf-dark);
    color: #FFFFFF;
    box-shadow: none;
}

.calendar-day.disabled,
.calendar-day:disabled {
    color: var(--tf-ink-soft);
    opacity: 0.4;
    cursor: not-allowed;
}

/* Uhrzeiten: Pillen im Raster, am Handy zwei Spalten */
.tf-slots {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}

@media (min-width: 640px) {
    .tf-slots {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tf-slots > .tf-msg {
    grid-column: 1 / -1;
    margin-top: 0;
}

.time-slot {
    padding: 0.7rem 0.5rem;
    border: 0;
    border-radius: 9999px;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--tf-rule);
    color: var(--tf-ink);
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    line-height: 1;
    cursor: pointer;
    transition: box-shadow 200ms ease, background-color 200ms ease, color 200ms ease;
}

.time-slot:hover {
    box-shadow: inset 0 0 0 1px var(--tf-rose);
}

.time-slot.selected {
    background-color: var(--tf-dark);
    color: #FFFFFF;
    box-shadow: none;
}

/* Ausgegrauter Knopf, solange Datum und Uhrzeit fehlen (vorher
   `disabled:opacity-50` von Tailwind) */
.tf-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* --- Rückruf: Formular und Direktkontakt nebeneinander ------------------ */
.tf-callback {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .tf-callback {
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 4rem;
    }
}

.tf-callback__contact .tf-h2 {
    font-size: clamp(1.6rem, 2.6vw, 2rem);
}

.tf-callback__contact .tf-contactlines {
    margin-top: 1.5rem;
}

/* Zwei Felder nebeneinander (Wunschdatum und Wunschzeit) */
.tf-fieldrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 479px) {
    .tf-fieldrow {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Hinweis unter einem Feld */
.tf-field__hint {
    margin: 0.45rem 0 0;
    font-family: var(--tf-sans);
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--tf-ink-soft);
}

/* --- Bewertungen: Zitate wie auf der Startseite ------------------------- */
/* Die Liste ist .tf-quotes; eine Meldung darin nimmt die volle Breite ein */
.tf-quotes > .tf-msg {
    grid-column: 1 / -1;
    margin-top: 0;
}

/* Name und Sterne als Etikett (die Sterne darunter) */
.tf-quote__stars {
    display: block;
    margin-top: 0.4rem;
    letter-spacing: 0.2em;
    color: var(--tf-link);
}

.tf-quote__stars-empty {
    color: var(--tf-rule);
}

/* «Bewerte deinen Besuch» über dem Formular */
.tf-formtitle {
    margin-bottom: 2rem;
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    text-align: center;
}

/* Sterne-Auswahl: fünf grosse ★-Knöpfe, inaktiv --tf-rule, aktiv --tf-link */
.tf-stars {
    display: flex;
    gap: 0.35rem;
    margin-bottom: 0.25rem;
}

.tf-stars .star {
    padding: 0;
    border: 0;
    background-color: transparent;
    font-family: var(--tf-sans);
    font-size: 2rem;                /* 32 px */
    line-height: 1;
    color: var(--tf-rule);
    cursor: pointer;
    transition: color 150ms ease;
}

.tf-stars .star.active {
    color: var(--tf-link);
}

/* Hover-Vorschau: alle Sterne bis zum Zeiger in --tf-link, danach --tf-rule */
.tf-stars:hover .star {
    color: var(--tf-link);
}

.tf-stars .star:hover ~ .star {
    color: var(--tf-rule);
}

/* --- Ruhiges Band (Blog, Merkliste, Instagram) -------------------------- */
.tf-band {
    text-align: center;
}

.tf-band .tf-h2 {
    margin-bottom: 0.75rem;
}

.tf-band p {
    max-width: 34rem;
    margin: 0 auto 1.75rem;
    color: var(--tf-ink-soft);
}

/* --- Blog: Karten im Raster, erster Beitrag über die volle Breite ------- */
.tf-posts {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2.5rem 2rem;
}

@media (min-width: 768px) {
    .tf-posts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tf-post--featured {
        grid-column: 1 / -1;
    }
}

@media (min-width: 1024px) {
    .tf-post--featured {
        display: grid;
        grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
        gap: 2.5rem;
        align-items: center;
    }
}

.tf-post {
    display: flex;
    flex-direction: column;
    margin: 0;
}

.tf-post__media {
    overflow: hidden;
    background-color: var(--tf-rose-tint);
}

.tf-post__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform 1200ms var(--tf-ease);
}

.tf-post__media:hover img {
    transform: scale(1.04);
}

.tf-post--featured .tf-post__media img {
    aspect-ratio: 16 / 9;
}

.tf-post__body {
    padding-top: 1.1rem;
}

.tf-post__title {
    margin: 0.35rem 0 0.6rem;
    font-family: var(--tf-display);
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.2;
    letter-spacing: -0.01em;
    color: var(--tf-ink);
    font-variation-settings: "SOFT" 100, "WONK" 0;
}

.tf-post--featured .tf-post__title {
    font-size: clamp(1.9rem, 3.4vw, 2.5rem);
    letter-spacing: -0.015em;
}

.tf-post__teaser {
    margin: 0 0 1rem;
    font-family: var(--tf-sans);
    color: var(--tf-ink-soft);
}

.tf-post__link {
    display: inline-block;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--tf-link);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.tf-post__link:hover {
    color: var(--tf-ink);
}

/* --- Newsletter: Geburtstagsblock und Rückmeldungen --------------------- */
.tf-birthday {
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    border: 1px solid var(--tf-rule);
    background-color: var(--tf-bg);
}

.tf-birthday__title {
    margin: 0 0 0.4rem;
    font-family: var(--tf-display);
    font-weight: 500;
    font-size: 1.1875rem;
    line-height: 1.25;
    color: var(--tf-ink);
}

.tf-birthday__text {
    margin: 0 0 1.25rem;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--tf-ink-soft);
}

/* Rückmeldungen unter dem Formular: gleiche Breite wie das Formular */
.tf-form ~ .tf-msg {
    max-width: var(--tf-prose);
    margin-left: auto;
    margin-right: auto;
}

/* Etikett, Titel und Text in den drei Spalten («Was dich erwartet») */
.tf-service h3 {
    margin: 0 0 0.5rem;
    font-family: var(--tf-display);
    font-weight: 500;
    font-size: 1.1875rem;
    line-height: 1.25;
    color: var(--tf-ink);
}

.tf-service p {
    margin: 0;
    color: var(--tf-ink-soft);
}

/* --- Merkliste: von wishlist.js erzeugtes Markup ------------------------ */
/* Karten wie in der Galerie: weisse Fläche, feine Linie, kein Schatten.
   Die Kategorien und Knöpfe des Skripts werden hier ruhig eingefärbt. */
.tf-wishlist > .grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 2rem 1.25rem;
}

@media (min-width: 768px) {
    .tf-wishlist > .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .tf-wishlist > .grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.tf-wishlist .grid > div {
    border: 1px solid var(--tf-rule);
    border-radius: 0;
    background-color: #FFFFFF;
    box-shadow: none;
}

.tf-wishlist img {
    display: block;
    width: 100%;
    height: 12rem;
    object-fit: cover;
}

.tf-wishlist h3 {
    margin: 0 0 0.35rem;
    font-family: var(--tf-display);
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.25;
    color: var(--tf-ink);
}

.tf-wishlist .grid p {
    margin: 0 0 1rem;
    font-family: var(--tf-sans);
    font-size: 0.875rem;
    color: var(--tf-ink-soft);
}

.tf-wishlist .grid button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--tf-link);
    font-family: var(--tf-sans);
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.tf-wishlist .grid button:hover {
    color: var(--tf-ink);
}

/* Das Symbol von Font Awesome ist nicht geladen, «Entfernen» trägt allein */
.tf-wishlist .fas {
    display: none;
}

/* Teilen-Block: eigene Zeile mit feiner Linie über der ganzen Breite */
.tf-wishlist > .mt-12 {
    margin-top: 4rem;
    padding-top: 2.5rem;
    border-top: 1px solid var(--tf-rule);
    text-align: center;
}

.tf-wishlist .mt-12 h3 {
    margin: 0 0 1.5rem;
    font-family: var(--tf-display);
    font-weight: 400;
    font-size: 1.35rem;
    color: var(--tf-ink);
}

.tf-wishlist .mt-12 button {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 1.3rem;
    border: 0;
    border-radius: 9999px;
    background-color: transparent;
    box-shadow: inset 0 0 0 1px var(--tf-rose);
    color: var(--tf-ink);
    font-family: var(--tf-sans);
    font-size: 0.875rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: box-shadow 200ms ease, color 200ms ease;
}

.tf-wishlist .mt-12 button:hover {
    box-shadow: inset 0 0 0 1px var(--tf-ink);
}

.tf-wishlist .mt-12 button svg {
    width: 18px;
    height: 18px;
}

/* Leerer Zustand: ruhige Meldung wie .tf-msg--muted */
.tf-wishlist > .py-16 {
    padding: 3.5rem 1.5rem;
    border: 1px solid var(--tf-rule);
    color: var(--tf-ink-soft);
    text-align: center;
}

.tf-wishlist > .py-16 .text-6xl {
    display: none;
}

.tf-wishlist > .py-16 h2 {
    margin: 0 0 0.5rem;
    font-family: var(--tf-display);
    font-weight: 400;
    font-size: 1.5rem;
    color: var(--tf-ink);
}

.tf-wishlist > .py-16 p {
    margin: 0 0 1.5rem;
    color: var(--tf-ink-soft);
}

.tf-wishlist > .py-16 a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.6rem;
    border-radius: 9999px;
    background-color: var(--tf-dark);
    color: #FFFFFF;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    font-weight: 500;
    line-height: 1;
    text-decoration: none;
}

.tf-wishlist > .py-16 a:hover {
    background-color: var(--tf-link);
}

/* --- Instagram: quadratisches Bildraster -------------------------------- */
/* Lange Einzelwörter (Handle, «Datenschutzerklärung»): kleiner und notfalls
   trennbar, damit im flachen Band nichts über den Rand läuft */
.tf-pagehead__h1--handle,
.tf-pagehead__h1--long {
    font-size: clamp(1.7rem, 5.5vw, 3.75rem);
    overflow-wrap: break-word;
}

.tf-insta-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0;
}

.tf-insta-profile__text {
    margin: 2.5rem 0 1.5rem;
    font-family: var(--tf-display);
    font-style: italic;
    font-weight: 350;
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    line-height: 1.45;
    color: var(--tf-ink-soft);
    text-align: center;
}

.tf-insta-profile__action,
.tf-insta__action {
    text-align: center;
}

.tf-insta__lead {
    margin: 0 0 1.25rem;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    color: var(--tf-ink-soft);
    text-align: center;
}

.tf-insta {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

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

.tf-insta__item {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: var(--tf-rose-tint);
}

.tf-insta__item img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1200ms var(--tf-ease);
}

.tf-insta__item:hover img,
.tf-insta__item:focus-visible img {
    transform: scale(1.04);
}


.tf-insta__action {
    margin-top: 1.5rem;
}

.tf-insta__icon {
    width: 18px;
    height: 18px;
}

/* --- Rechtstexte (Impressum, Datenschutz, Cookies) ---------------------- */
.tf-legal {
    font-family: var(--tf-sans);
    color: var(--tf-ink-soft);
}

.tf-legal h2 {
    margin: 3rem 0 1rem;
    font-family: var(--tf-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.6vw, 1.9rem);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--tf-ink);
    font-variation-settings: "SOFT" 100, "WONK" 0;
}

.tf-legal h2:first-child {
    margin-top: 0;
}

.tf-legal h3 {
    margin: 2rem 0 0.6rem;
    font-family: var(--tf-display);
    font-weight: 500;
    font-size: 1.1875rem;
    line-height: 1.3;
    color: var(--tf-ink);
}

.tf-legal p {
    margin: 0 0 1.25rem;
}

.tf-legal ul {
    margin: 0 0 1.5rem;
    padding: 0;
    list-style: none;
}

.tf-legal li {
    position: relative;
    margin-bottom: 0.5rem;
    padding-left: 1.15rem;
}

.tf-legal li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.62em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--tf-rose);
}

.tf-legal strong {
    color: var(--tf-ink);
}

.tf-legal a {
    color: var(--tf-link);
}

.tf-legal__stand {
    margin-top: 3rem;
    font-size: 0.875rem;
    color: var(--tf-ink-soft);
}

/* Schalter der Cookie-Einstellungen: ruhige Kippschalter */
.tf-legal__switch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 0;
    border-top: 1px solid var(--tf-rule);
}

.tf-legal__switch h3 {
    margin: 0 0 0.2rem;
    font-size: 1.0625rem;
}

.tf-legal__switch p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.tf-legal__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 2.5rem;
}

.tf-switch {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    cursor: pointer;
}

.tf-switch__input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    opacity: 0;
}

.tf-switch__track {
    position: relative;
    display: block;
    width: 44px;
    height: 24px;
    border-radius: 9999px;
    background-color: #FFFFFF;
    box-shadow: inset 0 0 0 1px var(--tf-rule);
    transition: background-color 200ms ease, box-shadow 200ms ease;
}

.tf-switch__track::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--tf-ink-soft);
    opacity: 0.45;
    transition: transform 200ms ease, background-color 200ms ease, opacity 200ms ease;
}

.tf-switch__input:checked + .tf-switch__track {
    background-color: var(--tf-rose-tint);
    box-shadow: inset 0 0 0 1px var(--tf-rose);
}

.tf-switch__input:checked + .tf-switch__track::after {
    transform: translateX(20px);
    background-color: var(--tf-link);
    opacity: 1;
}

.tf-switch__input:focus-visible + .tf-switch__track {
    box-shadow: inset 0 0 0 1px var(--tf-rose), 0 0 0 3px rgba(227, 169, 162, .35);
}

.tf-switch__input:disabled + .tf-switch__track {
    opacity: 0.6;
    cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
    .tf-post__media img,
    .tf-insta__item img,
    .tf-switch__track,
    .tf-switch__track::after {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   Barrierefreiheit: Links im Fliesstext sind auch ohne Farbe erkennbar,
   scrollbare Tabellen zeigen den Tastaturfokus
   -------------------------------------------------------------------------- */
:where(.tf-page) p a:not([class]),
:where(.tf-page) li a:not([class]),
:where(.tf-page) label a:not([class]),
.tf-legal a:not([class]) {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.tf-tablewrap:focus-visible {
    outline: 2px solid var(--tf-link);
    outline-offset: 3px;
}

/* Blog: Beiträge aus dem Admin — gleiches Raster wie die Karten, feste
   Bildproportion gegen Springen beim Laden */
.tf-posts__dynamic {
    display: contents;
}

.tf-posts__dynamic > .tf-msg {
    grid-column: 1 / -1;
}

.tf-post__media {
    aspect-ratio: 16 / 10;
}

.tf-post__date {
    font-family: var(--tf-sans);
    font-size: 0.8125rem;
    color: var(--tf-ink-soft);
}

/* Artikelseite */
.tf-artikel {
    max-width: var(--tf-prose);
    margin: 0 auto;
}

/* Platz reservieren, bis der Beitrag geladen ist (kein Springen des Fusses) */
#artikel {
    min-height: 70vh;
}

/* Blog: Platz für die nachgeladenen Beiträge */
#blog-beitraege:empty,
.tf-posts:has(#blog-leer) {
    min-height: 0;
}

.tf-artikel__bild {
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    margin-bottom: 2rem;
}

.tf-artikel__inhalt img {
    max-width: 100%;
    height: auto;
    margin: 1.5rem 0;
}

.tf-artikel__zurueck {
    display: inline-block;
    margin-top: 2.5rem;
}

/* Merkliste-Seite (wishlist.js) */
.tf-wishlist__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1.5rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

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

@media (min-width: 1024px) {
    .tf-wishlist__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.tf-wishlist__card {
    border: 1px solid var(--tf-rule);
    background: #FFFFFF;
}

.tf-wishlist__card img {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
}

.tf-wishlist__body {
    padding: 1rem 1.25rem 1.25rem;
}

.tf-wishlist__name {
    margin: 0.25rem 0 0.75rem;
    font-family: var(--tf-display);
    font-weight: 400;
    font-size: 1.375rem;
    line-height: 1.2;
    color: var(--tf-ink);
    font-variation-settings: "SOFT" 100, "WONK" 0;
}

.tf-wishlist__aktion {
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    font-family: var(--tf-sans);
    font-weight: 700;
    color: var(--tf-link);
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.tf-wishlist__leer {
    max-width: var(--tf-prose);
    margin: 0 auto;
    padding: 2.5rem 1.5rem;
    border: 1px solid var(--tf-rule);
    text-align: center;
    color: var(--tf-ink-soft);
}

.tf-wishlist__leer-titel {
    font-family: var(--tf-display);
    font-size: 1.5rem;
    color: var(--tf-ink);
}

.tf-wishlist__hinweis {
    margin-bottom: 1.5rem;
}

.tf-wishlist__teilen {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--tf-rule);
}

.tf-wishlist__teilen-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Kurze Rückmeldung (Merkliste) */
.tf-toast {
    position: fixed;
    left: 50%;
    bottom: calc(1.5rem + env(safe-area-inset-bottom));
    z-index: 9600;
    max-width: min(90vw, 28rem);
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    background: var(--tf-dark);
    color: #FFFFFF;
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
    transform: translate(-50%, 1rem);
    opacity: 0;
    transition: opacity 200ms ease, transform 200ms ease;
}

.tf-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Galerie: unsichtbarer Knopf über dem Bild öffnet die Lightbox
   (das Herz liegt darüber und bleibt ein eigener Knopf) */
.gallery-item__open {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
}

.gallery-item__open:focus-visible {
    outline: 3px solid var(--tf-link);
    outline-offset: -3px;
}

/* --------------------------------------------------------------------------
   Feinschliff (Verbesserungsrunde Oktober 2026)
   -------------------------------------------------------------------------- */

/* Überschriften und kurze Texte ohne einzelne Wörter auf der letzten Zeile */
.tf-h2,
.tf-pagehead__h1,
.tf-pagehead__lead,
.tf-stage__title,
.tf-post__title,
.tf-quote__text {
    text-wrap: balance;
}

/* Weiche Ecken für Kästen, passend zu Knöpfen und Eingabefeldern */
.tf-panel,
.tf-note,
.tf-msg,
.tf-birthday,
.tf-wishlist__leer,
.tf-tablewrap {
    border-radius: 1rem;
}

/* Preistabellen: Kopf unten bündig, Hinweis «beliebt» lesbarer */
.tf-table caption {
    padding: 0 0.25rem 1rem;
}

.tf-table thead th {
    vertical-align: bottom;
}

.tf-table__flag {
    font-size: 0.75rem;
}

/* Am Handy: kompaktere Zellen und ein Schatten am rechten Rand, solange
   die Tabelle seitlich weiterscrollt */
@media (max-width: 639px) {
    .tf-table {
        min-width: 30rem;
        font-size: 0.875rem;
    }

    .tf-table th,
    .tf-table td {
        padding: 0.7rem 0.75rem;
    }

    .tf-table tbody th {
        width: 34%;
    }

    .tf-tablewrap {
        background:
            linear-gradient(to right, #FFFFFF 30%, rgba(255, 255, 255, 0)) left / 2rem 100% no-repeat local,
            linear-gradient(to left, #FFFFFF 30%, rgba(255, 255, 255, 0)) right / 2rem 100% no-repeat local,
            radial-gradient(farthest-side at 0 50%, rgba(74, 47, 43, .16), transparent) left / 0.75rem 100% no-repeat scroll,
            radial-gradient(farthest-side at 100% 50%, rgba(74, 47, 43, .16), transparent) right / 0.75rem 100% no-repeat scroll,
            #FFFFFF;
    }

    .tf-tablewrap .tf-table {
        background-color: transparent;
    }
}

/* Blog: Bild füllt seinen Rahmen, Hauptbeitrag im Breitformat */
.tf-post__media img {
    height: 100%;
    aspect-ratio: auto;
}

.tf-post--featured .tf-post__media {
    aspect-ratio: 16 / 9;
}

.tf-post--featured .tf-post__teaser {
    max-width: 40rem;
}

.tf-post__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    text-decoration: none;
}

.tf-post__link::after {
    content: "\2192";
    transition: transform 200ms ease;
}

.tf-post__link:hover {
    text-decoration: underline;
}

.tf-post__link:hover::after {
    transform: translateX(3px);
}

/* Kontakt: Termin als Hauptknopf auf eigener Zeile, darunter die zwei
   weiteren Wege nebeneinander */
.tf-contact__actions::after {
    content: "";
    order: 1;
    flex-basis: 100%;
    height: 0;
    margin-top: -0.5rem;
}

.tf-contact__actions > .tf-btn--ghost {
    order: 2;
}

/* Zitate: Anführungszeichen kleiner und ausserhalb des Textes */
.tf-quote__mark {
    top: -1.25rem;
    left: -0.5rem;
    font-size: 5.5rem;
    opacity: 0.3;
}

.tf-quote__text {
    font-size: clamp(1.35rem, 2.3vw, 1.75rem);
}

/* Fokus gut sichtbar: im dunklen Fuss hell, Eingabefelder kräftiger */
.tf-footer a:focus-visible {
    outline: 2px solid #FBEDE7;
    outline-offset: 3px;
    border-radius: 2px;
}

.tf-input:focus {
    border-color: var(--tf-link);
    box-shadow: 0 0 0 3px rgba(164, 83, 77, .28);
}

/* Fusslinks: grössere Tippfläche ohne sichtbaren Mehrabstand */
.tf-footer__col a {
    margin-bottom: 0.15rem;
    padding: 0.35rem 0;
}

/* Bänder (Blog, Merkliste, Instagram) und leere Zustände ruhig zentriert */
.tf-band .tf-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tf-wishlist__leer {
    padding: 3rem 1.5rem;
}

.tf-wishlist__leer .tf-btn {
    margin-top: 1.5rem;
}

/* Mobiles Menü hebt sich vom Inhalt ab */
.tf-mobile {
    border-top: 1px solid var(--tf-rule);
    box-shadow: 0 18px 30px -12px rgba(74, 47, 43, .22);
}

/* Artikel: Platz nur reservieren, solange der Beitrag lädt */
#artikel {
    min-height: 0;
}

#artikel[aria-busy="true"] {
    min-height: 70vh;
}

/* Kennzahlen: Zahl und Beschriftung auf gleicher Linie */
.tf-metrics > div {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Über mich: Portrait bleibt beim Lesen der Geschichte stehen */
@media (min-width: 768px) {
    .tf-about > :first-child {
        position: sticky;
        top: calc(var(--tf-nav-h) + 2rem);
    }
}

/* Bewertung abgeben: Sterne mit 44-px-Tippfläche */
.tf-stars .star {
    min-width: 44px;
    min-height: 44px;
}

/* Galerie am Handy: Merkliste-Link auf eigener Zeile, Filter gut tippbar */
@media (max-width: 639px) {
    .tf-filterbar .filter-btn {
        min-height: 44px;
    }

    .tf-filterbar__merkliste {
        flex-basis: 100%;
        margin-left: 0;
        padding: 0.5rem 0 0;
        text-align: center;
    }

    .tf-fab {
        width: 52px;
        height: 52px;
    }
}

/* Terminkalender: bleibt beim Ausfüllen des Formulars sichtbar */
@media (min-width: 1024px) {
    .tf-booking > .tf-panel:first-child {
        position: sticky;
        top: calc(var(--tf-nav-h) + 1.5rem);
        align-self: start;
    }
}

.tf-booking__hint {
    max-width: none;
}

/* Newsletter: Bestätigen/Abmelden aus dem Mail-Link */
#newsletterStatus form {
    margin-top: 1.25rem;
}

/* --------------------------------------------------------------------------
   Signatur: Etagentorte auf dem Scheitel des Bogens
   Ohne Bewegung (kein .tf-motion) steht sie fertig da; mit Bewegung baut
   editorial.js sie über --tf-cake (0…1) Stock für Stock auf.
   -------------------------------------------------------------------------- */
.tf-stage {
    --tf-cake-w: clamp(170px, 26svh, 270px);
}

@media (max-width: 767px) {
    .tf-stage {
        --tf-cake-w: clamp(130px, 19svh, 175px);
    }
}

.tf-stage__cake {
    position: absolute;
    left: 50%;
    bottom: calc(36% - var(--tf-cake-w) * 0.02);
    z-index: 2;
    width: var(--tf-cake-w);
    transform: translateX(-50%);
    pointer-events: none;
}

.tf-cake {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    filter: drop-shadow(0 10px 14px rgba(74, 47, 43, .14)) drop-shadow(0 2px 2px rgba(74, 47, 43, .08));
}

.tf-cake g,
.tf-cake path {
    transform-box: fill-box;
}

/* Titel steht über der Torte */
.tf-stage__title {
    bottom: calc(38% + 1rem + var(--tf-cake-w) * 0.78);
}

.tf-motion .tf-stage__title {
    bottom: calc(38% + 1rem);
    transform: translateY(calc(var(--tf-rise) * -6svh - var(--tf-lift) * var(--tf-lift-px, 0px)));
}

.tf-motion .tf-stage__cake {
    transform: translateX(-50%) translateY(calc(var(--tf-rise) * -6svh));
    --k1: clamp(0, calc(var(--tf-cake) / 0.28), 1);
    --k2: clamp(0, calc((var(--tf-cake) - 0.2) / 0.26), 1);
    --k3: clamp(0, calc((var(--tf-cake) - 0.4) / 0.24), 1);
    --kg: clamp(0, calc((var(--tf-cake) - 0.6) / 0.22), 1);
    --kb: clamp(0, calc((var(--tf-cake) - 0.78) / 0.22), 1);
}

/* Teller zuerst, dann setzt sich jeder Stock mit kurzem Weg (abbremsend) */
.tf-motion .tf-cake__teller {
    opacity: clamp(0, calc(var(--k1) * 3), 1);
}

.tf-motion .tf-cake__stock--1 {
    opacity: var(--k1);
    transform: translateY(calc((1 - var(--k1)) * (1 - var(--k1)) * -18px));
}

.tf-motion .tf-cake__stock--2 {
    opacity: var(--k2);
    transform: translateY(calc((1 - var(--k2)) * (1 - var(--k2)) * -18px));
}

.tf-motion .tf-cake__stock--3 {
    opacity: var(--k3);
    transform: translateY(calc((1 - var(--k3)) * (1 - var(--k3)) * -18px));
}

/* Glasur läuft von oben herunter, zum Schluss die Beeren */
.tf-motion .tf-cake__glasur {
    opacity: clamp(0, calc(var(--kg) * 4), 1);
    transform-origin: 50% 0;
    transform: scaleY(calc(0.2 + var(--kg) * 0.8));
}

.tf-motion .tf-cake__beeren {
    opacity: var(--kb);
    transform: translateY(calc((1 - var(--kb)) * (1 - var(--kb)) * -14px));
}



/* --------------------------------------------------------------------------
   Konditorei-Details: Spritzbeutel-Linie, Perlrand am Fuss, Streusel
   -------------------------------------------------------------------------- */
.tf-spritz-wort {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}

.tf-spritz {
    position: absolute;
    left: -3%;
    bottom: -0.16em;
    width: 106%;
    height: 0.34em;
    overflow: visible;
    pointer-events: none;
}

.tf-spritz path {
    fill: none;
    stroke: var(--tf-rose);
    stroke-width: 2.4;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    stroke-dasharray: 1;
    stroke-dashoffset: 0;
}

.tf-motion .tf-spritz-wort:not(.is-gezogen) .tf-spritz path {
    stroke-dashoffset: 1;
}

.tf-motion .tf-spritz path {
    transition: stroke-dashoffset 1200ms cubic-bezier(.65, 0, .35, 1) 150ms;
}

/* Fuss: feiner Perlrand aus Schokolade (wie die Perlen der Torte), ruhig */
.tf-footer {
    position: relative;
    border-top: 0;
}

.tf-footer::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -6px;
    height: 12px;
    background:
        radial-gradient(circle at 50% 50%, var(--tf-dark) 0 5.4px, transparent 6px) 0 0 / 13px 12px repeat-x;
    z-index: 4;
    pointer-events: none;
}

/* Merkliste: Herz hüpft, Streusel springen */
.wishlist-btn {
    overflow: visible;
}

.wishlist-btn.is-pop svg {
    animation: tf-herz-pop 320ms cubic-bezier(.3, 1.4, .5, 1);
}

@keyframes tf-herz-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.14); }
    100% { transform: scale(1); }
}

.tf-streusel {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 0;
    height: 0;
    pointer-events: none;
}

.tf-streusel i {
    position: absolute;
    left: -3px;
    top: -1px;
    width: 7px;
    height: 2.5px;
    border-radius: 2px;
    opacity: 0;
    animation: tf-streusel 560ms cubic-bezier(.2, .7, .3, 1) forwards;
}

@keyframes tf-streusel {
    0% { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.6); }
    70% { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--x), calc(var(--y) + 8px)) rotate(var(--r)) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .wishlist-btn.is-pop svg,
    .tf-streusel i {
        animation: none !important;
    }
}

/* Auf dem rosa Himmel der Seitenköpfe etwas kräftiger */
.tf-pagehead .tf-spritz path,
.tf-contact .tf-spritz path {
    stroke: #C47F78;
}

/* Einblenden beim Scrollen (nur mit Bewegung, siehe editorial.js) */
.tf-motion [data-tf-auf] {
    transition: opacity 450ms var(--tf-ease), transform 450ms var(--tf-ease);
}

.tf-motion [data-tf-auf]:not(.is-auf) {
    opacity: 0;
    transform: translateY(10px);
}

.tf-motion [data-tf-auf-gruppe] > * {
    transition: opacity 400ms var(--tf-ease), transform 400ms var(--tf-ease);
    transition-delay: calc(var(--i, 0) * 60ms);
}

.tf-motion [data-tf-auf-gruppe]:not(.is-auf) > * {
    opacity: 0;
    transform: translateY(10px);
}

/* frühere Hilfsklassen (animations.css) ohne eigene Wirkung */
.reveal,
.stagger-children > * {
    opacity: 1;
    transform: none;
}

/* Häufige Fragen: Plus dreht sich zum Kreuz, Antwort gleitet auf
   (in Browsern mit ::details-content; sonst springt sie wie bisher auf) */
.tf-faq summary::after {
    content: "+";
    display: inline-block;
    transition: transform 300ms var(--tf-ease);
}

.tf-faq details[open] summary::after {
    content: "+";
    transform: rotate(45deg);
}

.tf-faq summary:hover {
    color: var(--tf-link);
}

.tf-motion .tf-faq {
    interpolate-size: allow-keywords;
}

.tf-motion .tf-faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size 380ms var(--tf-ease), content-visibility 380ms allow-discrete;
}

.tf-motion .tf-faq details[open]::details-content {
    block-size: auto;
}

/* Häufige Fragen: auf breiten Bildschirmen zweispaltig (Titel links, Fragen rechts) */
.tf-faq__hilfe {
    margin: 0.75rem 0 0;
    color: var(--tf-ink-soft);
}

@media (min-width: 900px) {
    #faq .tf-wrap {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr);
        column-gap: clamp(3rem, 6vw, 6rem);
        align-items: start;
    }

    #faq .tf-label,
    #faq .tf-h2,
    #faq .tf-faq__hilfe {
        grid-column: 1;
    }

    #faq .tf-faq {
        grid-column: 2;
        grid-row: 1 / span 4;
        max-width: none;
        margin-top: 0;
        border-top: 1px solid var(--tf-rule);
    }
}

/* Fuss am Handy: zwei Spalten statt einer langen Liste */
@media (max-width: 767px) {
    .tf-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem 1.5rem;
    }
}

/* Handy (Hochformat): Fenster öffnet sich senkrecht. Oben ein breites Foto,
   unten zwei Fotos nebeneinander, statt schmaler Streifen links und rechts. */
@media (max-width: 767px) {
    .tf-motion .tf-stage {
        --tf-oben: 30svh;
        --tf-unten: 24svh;
    }

    .tf-motion .tf-stage__panel {
        width: auto;
    }

    .tf-motion .tf-stage__panel--right {
        top: 0;
        bottom: auto;
        left: 0;
        right: 0;
        height: var(--tf-oben);
        transform: translateY(calc(var(--tf-push) * -1 * var(--tf-oben)));
    }

    .tf-motion .tf-stage__panel--left-top,
    .tf-motion .tf-stage__panel--left-bottom {
        top: auto;
        bottom: 0;
        height: var(--tf-unten);
        transform: translateY(calc(var(--tf-push) * var(--tf-unten)));
    }

    .tf-motion .tf-stage__panel--left-top {
        left: 0;
        right: 50%;
    }

    .tf-motion .tf-stage__panel--left-bottom {
        left: 50%;
        right: 0;
        border-left: 3px solid var(--tf-night);
    }

    .tf-motion .tf-stage__window {
        clip-path: inset(calc((1 - var(--tf-open)) * var(--tf-oben)) 0 calc((1 - var(--tf-open)) * var(--tf-unten)) 0);
        animation-name: tf-window-in-hoch;
    }

    @keyframes tf-window-in-hoch {
        from { clip-path: inset(var(--tf-oben) 50% var(--tf-unten) 50%); }
        to { clip-path: inset(var(--tf-oben) 0 var(--tf-unten) 0); }
    }

    .tf-stage__intro {
        max-width: 82vw;
    }

    .tf-motion .tf-stage__hint {
        bottom: calc(var(--tf-unten) + 0.9rem);
    }
}

/* --------------------------------------------------------------------------
   Torten-Details auf den Unterseiten
   -------------------------------------------------------------------------- */
/* Danke-Meldungen nach dem Absenden: kleine Torte mit Kerze */
.tf-note:has(> .tf-note__title)::before,
.tf-leer::before {
    content: "";
    display: block;
    width: 56px;
    height: 56px;
    margin: 0 auto 0.75rem;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cellipse cx='32' cy='60' rx='24' ry='2.5' fill='%234A2F2B' opacity='.12'/%3E%3Crect x='8' y='55' width='48' height='4' rx='2' fill='%23E6D3CA'/%3E%3Crect x='12' y='40' width='40' height='16' rx='3' fill='%23FCEFE7' stroke='%23E2C5B9'/%3E%3Crect x='12' y='46' width='40' height='2.5' fill='%23E8B4AD'/%3E%3Crect x='18' y='28' width='28' height='13' rx='3' fill='%23F8D9D2' stroke='%23DDB0A6'/%3E%3Crect x='23' y='18' width='18' height='11' rx='2.5' fill='%23FCEFE7' stroke='%23E2C5B9'/%3E%3Cpath d='M23 21q0-3 3-3h12q3 0 3 3v2q-1.5 0-1.5 2a1.5 1.5 0 0 1-3 0v-1q-1 0-1.5 1.5v2a1.5 1.5 0 0 1-3 0v-3q-1 0-1.5 1a1.5 1.5 0 0 1-3 0v-1q-1 0-1.5 1.5Z' fill='%23B9534E'/%3E%3Crect x='31' y='9' width='2.5' height='9' rx='1' fill='%23fff' stroke='%23E8A0A6' stroke-width='.6'/%3E%3Cpath d='M32.2 2c2 2.6 2.6 4.4 0 6.4-2.6-2-2-3.8 0-6.4Z' fill='%23F7A84A'/%3E%3C/svg%3E") center / contain no-repeat;
}

.tf-motion .tf-note:not(.hidden):has(> .tf-note__title)::before {
    animation: tf-torte-pop 700ms cubic-bezier(.3, 1.5, .5, 1) both;
}

@keyframes tf-torte-pop {
    from { opacity: 0; transform: translateY(8px) scale(.7); }
    to { opacity: 1; transform: none; }
}

/* Preistabelle: Kirsche beim Hinweis «Beliebt» */
.tf-table__flag::before {
    content: "";
    display: inline-block;
    width: 1.15em;
    height: 1.15em;
    margin-right: 0.3em;
    vertical-align: -0.2em;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 9C6.5 5 8.5 2.5 12 1.5M11 9C10.5 6 11 3.5 12 1.5' fill='none' stroke='%236E8F55' stroke-width='1.2' stroke-linecap='round'/%3E%3Ccircle cx='5.5' cy='11' r='3.6' fill='%23B23A3A'/%3E%3Ccircle cx='11.2' cy='11.4' r='3.4' fill='%23A23040'/%3E%3Ccircle cx='4.4' cy='9.9' r='1' fill='%23fff' opacity='.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

@media (prefers-reduced-motion: reduce) {
    .tf-note::before {
        animation: none !important;
    }
}

/* 404: umgekippte Torte */
.tf-hoppla {
    display: block;
    width: min(100%, 360px);
    height: auto;
    margin: 0 auto 2.5rem;
}

.tf-motion .tf-hoppla__fall {
    transform-box: fill-box;
    transform-origin: 0% 100%;
    animation: tf-umkippen 1100ms cubic-bezier(.5, 0, .3, 1.3) 300ms both;
}

@keyframes tf-umkippen {
    from { transform: translate(-46px, -34px) rotate(-80deg); opacity: 0; }
    to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .tf-hoppla__fall {
        animation: none !important;
    }
}

/* Preise am Handy als Karten (aus der Tabelle erzeugt, siehe seite.js) */
.tf-pakete {
    display: none;
}

@media (max-width: 639px) {
    .tf-hat-pakete {
        display: none;
    }

    .tf-pakete {
        display: grid;
        gap: 0.9rem;
        margin: 0 0 2rem;
    }

    .tf-pakete__titel {
        margin: 0.5rem 0 0;
        font-family: var(--tf-display);
        font-size: 1.25rem;
        color: var(--tf-ink);
    }

    .tf-paket {
        padding: 1rem 1.1rem 0.6rem;
        border: 1px solid var(--tf-rule);
        border-radius: 1rem;
        background-color: #FFFFFF;
    }

    .tf-paket.is-featured {
        border-color: var(--tf-rose);
        background-color: var(--tf-rose-tint);
    }

    .tf-paket__titel {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: 0.5rem;
        margin: 0 0 0.6rem;
        font-family: var(--tf-display);
        font-size: 1.2rem;
        font-weight: 400;
        color: var(--tf-ink);
    }

    .tf-paket__titel .tf-table__flag {
        order: 2;
        display: inline-flex;
        align-items: center;
        margin: 0;
        font-family: var(--tf-sans);
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.12em;
    }

    .tf-paket dl {
        margin: 0;
    }

    .tf-paket dl > div {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
        padding: 0.45rem 0;
        border-top: 1px solid var(--tf-rule);
        font-family: var(--tf-sans);
        font-size: 0.9375rem;
    }

    .tf-paket dt {
        color: var(--tf-ink-soft);
    }

    .tf-paket dd {
        margin: 0;
        text-align: right;
        color: var(--tf-ink);
    }

    .tf-paket dd[data-preis] {
        font-weight: 700;
    }

    .tf-pakete__hinweis {
        margin: 0;
        font-family: var(--tf-sans);
        font-size: 0.875rem;
        color: var(--tf-ink-soft);
    }
}

/* Lightbox: Bild mit Titel, Beschreibung und Anfrage-Knopf */
.lightbox__bild {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    margin: 0;
    padding: 0 4rem;
}

.lightbox .lightbox__bild img {
    max-height: 68vh;
}

.lightbox__info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    text-align: center;
    color: #F3E3DC;
}

.lightbox__titel {
    font-family: var(--tf-display);
    font-size: 1.35rem;
    color: #FFFFFF;
}

.lightbox__desc {
    font-family: var(--tf-sans);
    font-size: 0.9375rem;
}

.lightbox__anfrage {
    margin-top: 0.5rem;
    background-color: var(--tf-bg);
    color: var(--tf-ink);
}

.lightbox__anfrage:hover {
    background-color: #FFFFFF;
    color: var(--tf-ink);
}

.lightbox #lightbox-counter {
    position: static;
    transform: none;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
}

@media (max-width: 640px) {
    .lightbox__bild {
        padding: 0 1rem;
    }

    .lightbox .lightbox__bild img {
        max-height: 56vh;
    }
}

/* Merkliste: Anfrage vor dem Teilen */
.tf-wishlist__anfrage {
    margin: 2.5rem 0 0;
    padding: 1.5rem;
    border: 1px solid var(--tf-rose);
    border-radius: 1rem;
    background-color: var(--tf-rose-tint);
    text-align: center;
}

.tf-wishlist__anfrage p {
    margin: 0.35rem 0 1rem;
    color: var(--tf-ink-soft);
}

/* Typografie: Formularbeschriftungen lesbar, lange Einleitungen aufrecht */
.tf-field__label {
    font-size: 0.9375rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tf-ink);
}

.tf-lead {
    font-style: normal;
    font-weight: 350;
    font-size: clamp(1.3rem, 2.1vw, 1.6rem);
}

.tf-stage__sub {
    font-style: normal;
}

.tf-nav__links {
    letter-spacing: 0.05em;
}

/* Funktionsseiten (Kontakt, Termin, Rückruf, Newsletter, Bewertungen):
   flacherer Seitenkopf, damit das Formular früher kommt */
.tf-pagehead--kompakt {
    min-height: clamp(220px, 30vh, 300px);
    padding-bottom: clamp(4.5rem, 10vh, 5.5rem);
}

.tf-pagehead--kompakt + .tf-section,
.tf-pagehead--kompakt + section {
    padding-top: clamp(2.5rem, 5vw, 4rem);
}

/* Startseite am Handy: kompakte Preiszeilen («Klein · Gäste · Richtpreis») */
@media (max-width: 639px) {
    #hero ~ main #preise .tf-pakete {
        gap: 0.5rem;
    }

    #hero ~ main #preise .tf-paket {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
        padding: 0.7rem 0.9rem;
    }

    #hero ~ main #preise .tf-paket__titel {
        flex: 1 1 auto;
        margin: 0;
        font-size: 1.05rem;
    }

    #hero ~ main #preise .tf-paket__titel .tf-table__flag {
        flex-basis: 100%;
        font-size: 0.6875rem;
    }

    #hero ~ main #preise .tf-paket dl {
        display: flex;
        gap: 1rem;
        flex: 0 0 auto;
    }

    #hero ~ main #preise .tf-paket dl > div {
        flex-direction: column;
        gap: 0;
        padding: 0;
        border-top: 0;
        font-size: 0.875rem;
    }

    #hero ~ main #preise .tf-paket dt {
        font-size: 0.75rem;
    }

    #hero ~ main #preise .tf-paket dd {
        text-align: left;
        white-space: nowrap;
    }
}

main:focus {
    outline: none;
}

/* Termin-Knopf: «Termin» und «buchen» ohne Lücke aus dem Abstand des Knopfs */
.tf-nav__actions .tf-btn {
    gap: 0;
}

/* Kontaktseite: Formular und direkte Wege nebeneinander (am Handy direkte Wege zuerst) */
.tf-kontakt {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.tf-kontakt__direkt {
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--tf-rule);
    border-radius: 1rem;
    background-color: var(--tf-surface);
}

.tf-kontakt__direkt .tf-h3 {
    margin: 0 0 0.75rem;
    font-size: 1.2rem;
}

.tf-kontakt__direkt .tf-contactlines {
    margin: 0;
}

@media (min-width: 900px) {
    .tf-kontakt {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
        gap: 2.5rem;
        align-items: start;
    }

    /* Reihenfolge wie im Quelltext: direkte Wege links, Formular rechts */
    .tf-kontakt__formular {
        grid-column: 2;
        grid-row: 1;
    }

    .tf-kontakt__direkt {
        grid-column: 1;
        grid-row: 1;
        position: sticky;
        top: calc(var(--tf-nav-h) + 1.5rem);
        padding: 1.75rem;
    }

    .tf-kontakt .tf-form {
        max-width: none;
    }
}

@media (max-width: 899px) {
    .tf-kontakt__direkt .tf-contactlines li {
        padding: 0.6rem 0;
    }
}

/* Leere Bewertungsliste: freundlicher Hinweis mit Weg zum Formular */
.tf-leer {
    max-width: var(--tf-prose);
    margin: 0 auto;
    padding: 2rem 1.5rem;
    border: 1px dashed var(--tf-rose);
    border-radius: 1rem;
    text-align: center;
    color: var(--tf-ink-soft);
}

.tf-leer__titel {
    margin: 0 0 0.35rem;
    font-family: var(--tf-display);
    font-size: 1.3rem;
    color: var(--tf-ink);
}

.tf-leer .tf-btn {
    margin-top: 1rem;
}

/* Erster Bildschirm: konkretes Angebot und Knopf von Anfang an (statt Begrüssung) */
.tf-stage__angebot {
    margin: 0;
    font-family: var(--tf-display);
    font-style: normal;
    font-size: clamp(1.25rem, 2.1vw, 1.7rem);
    line-height: 1.25;
    color: var(--tf-ink);
    text-wrap: balance;
}

.tf-stage__intro-cta {
    margin-top: 1.1rem;
    font-style: normal;
}

.tf-stage__intro {
    font-style: normal;
}

/* Kennzahlen: mit JavaScript erst zeigen, wenn sie belegt sind (kein Aufblitzen) */
.tf-js .tf-metrics > [data-kennzahl]:not(.is-belegt) {
    visibility: hidden;
}

.tf-metrics > [hidden] {
    display: none;
}

@media (min-width: 768px) {
    .tf-metrics[data-anzahl="1"] { grid-template-columns: 1fr; }
    .tf-metrics[data-anzahl="2"] { grid-template-columns: repeat(2, 1fr); }
    .tf-metrics[data-anzahl="3"] { grid-template-columns: repeat(3, 1fr); }
}

#stimmen .tf-quotes:has(> .tf-leer) {
    grid-template-columns: 1fr;
}

/* Beispielstimmen nicht aufblitzen lassen, bis die echten geladen sind */
.tf-js #stimmen .tf-quotes:not(.is-geladen) > .tf-quote {
    visibility: hidden;
}

/* Startseite: Galeriebilder als Links zur Galerie */
.tf-gallery__link {
    display: block;
    color: inherit;
    text-decoration: none;
}

.tf-gallery__link:focus-visible {
    outline: 3px solid var(--tf-link);
    outline-offset: 4px;
    border-radius: 4px;
}

.tf-gallery__link:hover .tf-label {
    color: var(--tf-link);
}

/* Adresse aus der Verwaltung (Zeilenumbrüche beibehalten) */
.tf-footer__adresse,
.tf-kontakt__adresse {
    margin: 0.75rem 0 0;
    white-space: pre-line;
}

.tf-footer__adresse {
    color: #FBEDE7;
}

/* Eingabefelder und Zeitknöpfe: Kontur deutlich sichtbar (mind. 3:1) */
.tf-input {
    border-color: #B99488;
}

.time-slot:not(.selected) {
    box-shadow: inset 0 0 0 1px #B99488;
}

.tf-calendar__navbtn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.tf-slots__retry {
    margin-left: 0.5rem;
    min-height: 36px;
    padding: 0.25rem 0.9rem;
}

/* Bewertung: Sterne als Auswahlfelder */
.tf-sterne-feld {
    margin: 0 0 1.25rem;
    padding: 0;
    border: 0;
}

.tf-sterne-feld legend {
    padding: 0;
}

.tf-stars input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

.tf-stars label.star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    color: var(--tf-link);
}

.tf-stars input:checked + label ~ label {
    color: #C9B3AA;
}

.tf-stars:hover label.star {
    color: var(--tf-link);
}

.tf-stars label.star:hover ~ label {
    color: #C9B3AA;
}

.tf-stars input:focus-visible + label {
    outline: 3px solid var(--tf-link);
    outline-offset: -4px;
    border-radius: 8px;
}

/* Konturen von Eingabefeldern und Zeitknöpfen: mindestens 3:1 */
.tf-input {
    border-color: #9E7A6E;
}

.time-slot:not(.selected) {
    box-shadow: inset 0 0 0 1px #9E7A6E;
}