/* ─────────────────────────────────────────
   Yana Thai Massage – style.css
───────────────────────────────────────── */

:root {
    --primary: #7e00fc;
    --primary-dark: #5a00b8;
    --gold: #c9a84c;
    --dark: #1a1a1a;
    --light: #f9f5f0;
    --white: #ffffff;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Lato', sans-serif;
    color: var(--dark);
    background-color: var(--white);
}

/* ─── FOMANTIC OVERRIDES ─── */
.ui.menu {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: 0 2px 20px rgba(0,0,0,0.08) !important;
    background: rgba(255,255,255,0.97) !important;
    backdrop-filter: blur(10px);
    position: fixed !important;
    top: 0;
    width: 100%;
    z-index: 1000;
    margin: 0 !important;
    padding: 4px 24px !important;
}
.ui.menu::before {
    content: '' !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 6px !important;
    background: var(--gold) !important;
    z-index: 9999 !important;
    display: block !important;
    overflow: hidden !important;
}
.ui.menu .gold-shimmer {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 8px;
    z-index: 10000;
    overflow: hidden;
    pointer-events: none;
}
.ui.menu .gold-shimmer::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, #f5e6a3, #fff8dc, #f5e6a3, transparent);
    animation: goldShimmer 16s ease-in-out infinite;
}
@keyframes goldShimmer {
    0%   { left: -60%; }
    50%  { left: 100%; }
    100% { left: -60%; }
}

/* ─── GOLD ORNAMENT DIVIDER BETWEEN SECTIONS ─── */
.gold-divider {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    z-index: 10;
    margin-top: -20px;
    margin-bottom: -20px;
}
.gold-divider::before,
.gold-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gold-divider svg {
    width: 360px;
    height: auto;
    margin: 0 12px;
    filter: drop-shadow(0 1px 2px rgba(201,168,76,0.3));
}

.ui.menu .item {
    font-family: 'Lato', sans-serif !important;
    font-size: 0.9rem !important;
    color: var(--dark) !important;
    letter-spacing: 0.3px;
}

.ui.menu .item:hover {
    color: var(--primary) !important;
    background: transparent !important;
}

.nav-logo {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.2rem !important;
    color: var(--primary) !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.nav-logo-img {
    height: 42px;
    width: 42px;
    object-fit: contain;
    border-radius: 8px;
    flex-shrink: 0;
}

.nav-logo span {
    color: var(--gold);
}

.ui.menu .ui.button.nav-contact-btn {
    background: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    padding: 8px 18px !important;
    margin-left: 8px;
    transition: all .2s;
}
.ui.menu .ui.button.nav-contact-btn:hover {
    background: var(--primary) !important;
    color: #fff !important;
}
.ui.menu .ui.button.nav-cta {
    background: var(--primary) !important;
    color: var(--white) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    padding: 10px 22px !important;
    margin-left: 8px;
}

.ui.menu .ui.button.nav-cta:hover {
    background: var(--primary-dark) !important;
}


.ui.menu .ui.button.nav-cta-repeat {
    background: #fff !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.85rem !important;
    padding: 8px 16px !important;
    margin-left: 8px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.15s;
}
.ui.menu .ui.button.nav-cta-repeat:hover {
    background: var(--primary) !important;
    color: #fff !important;
}

.nav-wa-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 50px;
    background: #25D366;
    color: #fff !important;
    margin-left: 4px;
    transition: opacity 0.2s, transform 0.2s;
    text-decoration: none;
    font-weight: 700;
    font-size: .85rem;
}
.nav-wa-text {
    display: inline;
}
.nav-wa-btn:hover {
    opacity: 0.85;
    transform: scale(1.05);
}

/* ── Language Switcher ── */
.lang-switcher {
    display: flex;
    gap: 4px;
    padding: 0 8px !important;
}
.lang-btn {
    display: inline-block;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-light);
    text-decoration: none;
    letter-spacing: 0.04em;
    transition: background 0.2s, color 0.2s;
}
.lang-btn:hover {
    background: rgba(126,0,252,0.1);
    color: var(--primary);
}
.lang-btn.active {
    background: var(--primary);
    color: #fff;
}

/* ─── HERO ─── */
.hero {
    min-height: 100vh;
    background:
        radial-gradient(ellipse at 80% 5%,  rgba(201,168,76,0.22) 0%, transparent 42%),
        radial-gradient(ellipse at 10% 95%, rgba(201,168,76,0.10) 0%, transparent 40%),
        radial-gradient(ellipse at 50% 50%, rgba(126,0,252,0.30) 0%, transparent 65%),
        linear-gradient(150deg, rgba(6,0,16,0.60) 0%, rgba(26,0,64,0.60) 30%, rgba(61,0,128,0.60) 62%, rgba(126,0,252,0.60) 100%),
        url('images/hero-bg.jpg') center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

    /* ── Die Rechnung für die Gesichter unten (.hero-team) ──
       Sie steht HIER und nicht dort, weil zwei Dinge daraus folgen: wie gross
       die Bilder werden UND wieviel Luft die Hero unten braucht. Der Streifen
       liegt absolut; ohne passenden Abstand liefe er in die Überschrift, und
       bei zwei Reihen ist er fast doppelt so hoch.

       `--n`, `--pro` und `--zeilen` setzt index.php am <section>. Die Vorgaben
       hier greifen, wenn gar keine Gesichter da sind. */
    --n: 0;
    --pro: 1;
    --zeilen: 0;
    --gap: clamp(8px, 1.1vw, 16px);
    --padx: clamp(14px, 1.6vw, 22px);
    --pady: clamp(9px, 1vw, 14px);
    /* Was einem Gesicht bleibt, wenn `--pro` sich eine Zeile teilen und die
       Zeile 86 % der Breite nicht überschreiten soll. */
    --platz: calc((86vw - (var(--pro) - 1) * var(--gap) - var(--padx) * 2 - 2px) / var(--pro));
    /* Am Bildschirm UND an der Anzahl: die kleinere der beiden gewinnt. */
    --face: clamp(36px, min(6.2vw, var(--platz)), 76px);
    /* Wie hoch der Streifen dadurch wird — Zeilen, Zwischenraum, Rand. */
    --streifen: calc(var(--zeilen) * var(--face)
                     + max(0px, (var(--zeilen) - 1) * var(--gap))
                     + var(--pady) * 2 + 2px);

    padding: 120px 20px calc(60px + var(--streifen) + 44px);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.025'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

/* Animated orbs */
.hero-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    will-change: transform;
}
.hero-orb-1 {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(201,168,76,0.28), transparent 68%);
    top: -160px; right: -120px;
    animation: orbFloat 14s ease-in-out infinite;
}
.hero-orb-2 {
    width: 360px; height: 360px;
    background: radial-gradient(circle, rgba(200,80,255,0.20), transparent 68%);
    bottom: -100px; left: -80px;
    animation: orbFloat 10s ease-in-out infinite reverse;
}
.hero-orb-3 {
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(126,0,252,0.40), transparent 68%);
    top: 38%; left: 12%;
    animation: orbFloat 8s ease-in-out infinite;
    animation-delay: -3s;
}
@keyframes orbFloat {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33%       { transform: translate(40px, -55px) scale(1.06); }
    66%       { transform: translate(-25px, 35px) scale(0.94); }
}

.hero-content {
    position: relative;
    z-index: 1;
    max-width: 720px;
}

.hero-badge {
    display: inline-block;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.3);
    color: var(--white);
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 8px 22px;
    border-radius: 50px;
    margin-bottom: 28px;
}

.hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(2.4rem, 6vw, 4.5rem);
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 20px;
}

.hero h1 span {
    color: var(--gold);
}

.hero p {
    font-size: 1.1rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.75;
    margin-bottom: 40px;
    font-weight: 300;
}

/* ─── HERO: die Gesichter ──────────────────────────────────────────────────
   Ganz unten in der Hero stehen die Therapeutinnen — nur die Fotos, ohne
   Namen. Der Name steckt in `alt` und `title`: vorgelesen wird er, sichtbar
   ist er nicht.

   Warum ein Streifen aus Milchglas darunter: die Hero ist ein Foto, und runde
   Bilder direkt darauf verlieren ihre Kante. Der Streifen fasst sie zu einer
   Gruppe zusammen und hebt sie vom Hintergrund ab, ohne ihn zuzudecken.

   Die ganze Reihe ist ein Link auf den Team-Abschnitt. Fünf Gesichter ohne
   Namen machen neugierig — dann soll ein Antippen auch dorthin führen, wo die
   Namen stehen. */
.hero-team {
    /* `--face`, `--gap`, `--padx`, `--pady` und `--pro` kommen von .hero. Dort
       stehen sie, weil aus denselben Zahlen auch der Abstand nach unten folgt:
       bei zwei Reihen ist der Streifen fast doppelt so hoch, und die Hero muss
       davon wissen. */
    position: absolute;
    left: 50%;
    bottom: 40px;
    transform: translateX(-50%);
    z-index: 2;
    display: flex;
    align-items: center;
    gap: var(--gap);
    padding: var(--pady) var(--padx);
    /* Die Breite fasst GENAU eine Reihe. Danach bricht die Flexbox von selbst
       um — es braucht kein Trennelement zwischen den Bildern, und beide Reihen
       stehen mittig, auch wenn die untere kürzer ist. */
    box-sizing: border-box;
    width: calc(var(--pro) * var(--face) + (var(--pro) - 1) * var(--gap)
                + var(--padx) * 2 + 2px);
    border-radius: 60px;
    background: rgba(255,255,255,0.08);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.16);
    box-shadow: 0 12px 44px rgba(0,0,0,0.30);
    text-decoration: none;
    /* Die ausdrückliche Breite oben ist auch aus einem zweiten Grund nötig:
       mit `left:50%` steht einem absolut gesetzten Kasten sonst nur der Platz
       von dort bis zum rechten Rand zu — die HALBE Hero-Breite. Bei 768 px
       waren das 384, die Reihe brauchte 428, und sie brach um, während links
       daneben alles frei war. */
    max-width: calc(100% - 32px);
    flex-wrap: wrap;
    justify-content: center;
    row-gap: var(--gap);
}

.hero-team-face {
    width: var(--face);
    height: var(--face);
    flex: none;
    border-radius: 50%;
    /* Alle Fotos sind quadratisch — `cover` schneidet also nichts weg. */
    object-fit: cover;
    display: block;
    border: 2px solid rgba(255,255,255,0.60);
    box-shadow: 0 6px 18px rgba(0,0,0,0.35);
    transition: transform .28s cubic-bezier(.32,.72,0,1),
                border-color .28s ease,
                opacity .28s ease;
    /* Eines nach dem anderen herein — `--i` steht am Element. */
    animation: heroFaceFall 1.85s cubic-bezier(.4,0,.6,1) backwards;
    animation-delay: calc(var(--i, 0) * 140ms + 350ms);
}

/* ── Fallen, rollen, ausrollen ────────────────────────────────────────────
   Der Ball fällt von oben links herein, prallt auf, rollt an seinen Platz und
   hüpft zweimal flacher aus.

   DREI DINGE, DIE ES ERST NACH GEWICHT AUSSEHEN LASSEN

   Das Stauchen beim Aufprall. Ohne `scale(1.14, .8)` sieht ein fallender Kreis
   aus wie ein Bild, das nach unten geschoben wird. Das kurze Breitwerden ist
   der ganze Unterschied — und es klingt mit jedem Aufprall ab, wie die
   Sprunghöhe.

   Das Mitdrehen. Ein Kreis rollt nur, wenn er sich dreht; sonst RUTSCHT er.
   Deshalb läuft `rotate` mit dem waagerechten Weg zusammen.

   Und die Drehung endet auf 0°, nicht irgendwo. Eine volle Umdrehung, keine
   krumme Zahl — sonst stünde am Ende jedes Porträt schief, und das fällt bei
   Gesichtern sofort auf.

   Das kleine `translateY` bei jedem Stauchen hält die Unterkante an Ort und
   Stelle: gestaucht wird sonst um die Mitte, und der Ball sähe aus, als hebe
   er beim Aufprall ab. */
@keyframes heroFaceFall {
      0% { opacity: 0; transform: translate(-150px, -440px) rotate(-360deg); }
      8% { opacity: 1; }
     26% { transform: translate(-120px, 0)    rotate(-250deg); }   /* Aufprall */
     30% { transform: translate(-104px, 7px)  rotate(-230deg) scale(1.14, .80); }
     44% { transform: translate(-64px, -52px) rotate(-150deg); }   /* Sprung */
     58% { transform: translate(-30px, 0)     rotate(-70deg); }    /* Aufprall */
     61% { transform: translate(-22px, 5px)   rotate(-56deg) scale(1.09, .88); }
     73% { transform: translate(-8px, -22px)  rotate(-24deg); }    /* Sprung */
     85% { transform: translate(0, 0)         rotate(0deg); }      /* Aufprall */
     88% { transform: translate(0, 3px)       rotate(0deg) scale(1.05, .94); }
     95% { transform: translate(0, -6px)      rotate(0deg); }      /* letzter Hüpfer */
    100% { transform: translate(0, 0)         rotate(0deg) scale(1, 1); }
}

/* Wer auf eines zeigt, meint dieses — die anderen treten zurück. Ohne das
   passiert beim Überfahren nichts Erkennbares, weil die Bilder klein sind. */
.hero-team:hover .hero-team-face { opacity: .5; }
.hero-team .hero-team-face:hover {
    opacity: 1;
    transform: translateY(-8px) scale(1.09);
    border-color: var(--gold);
    box-shadow: 0 12px 28px rgba(0,0,0,.45), 0 0 0 4px rgba(201,168,76,.22);
}

@media (max-width: 640px) {
    /* Grösse und Abstände rechnet die Formel oben — hier bleibt nur, was sie
       nicht wissen kann: wie weit die Reihe vom unteren Rand wegsteht. */
    .hero { padding-bottom: 124px; }
    .hero-team { bottom: 24px; }
    .hero-team-face { border-width: 1.5px; }
}

.hero-buttons {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

.ui.button.btn-primary {
    background: var(--gold) !important;
    color: var(--dark) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 14px 36px !important;
    transition: transform 0.3s, box-shadow 0.3s !important;
}

.ui.button.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201,168,76,0.4) !important;
}

.ui.button.btn-secondary {
    background: transparent !important;
    color: var(--white) !important;
    border-radius: 50px !important;
    border: 1px solid rgba(255,255,255,0.5) !important;
    font-size: 0.95rem !important;
    padding: 14px 36px !important;
}

.ui.button.btn-secondary:hover {
    background: rgba(255,255,255,0.1) !important;
}

/* ─── SECTION COMMONS ─── */
.section-label {
    font-size: 0.75rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--primary);
    font-weight: 700;
    margin-bottom: 10px;
}

.section-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.8rem, 3vw, 2.8rem);
    line-height: 1.25;
    color: var(--dark);
    margin-bottom: 20px;
}

.section-header {
    text-align: center;
    margin-bottom: 56px;
}

/* ─── AKTUELLES ───────────────────────────────────────────────────────────
   Aushänge aus dem madmin. Eine einzelne Meldung steht quer — Bild links,
   Text rechts —, mehrere stehen als Karten nebeneinander. Der Abschnitt hält
   sich bewusst zurück: er sitzt zwischen zwei kräftigen Blöcken und soll
   ihnen nicht die Aufmerksamkeit nehmen. */
.news {
    padding: 80px 40px;
    background: linear-gradient(180deg, #fdfbf6 0%, #fff 100%);
}
.news-inner { max-width: 1100px; margin: 0 auto; }
/* Ohne den grossen Titel darüber trägt das kleine Wort den Abschnitt allein —
   dann darf es etwas mehr Luft nach unten haben als sonst. */
.news .section-header { margin-bottom: 30px; }
.news .section-label  { margin-bottom: 0; }
.news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 26px;
}
/* Jede Karte trägt ihre Farbe als Satz von Variablen; die Regeln darunter
   greifen nur darauf zu. Eine neue Farbe ist damit sechs Zeilen, nicht sechs
   neue Regeln — und der Name kommt aus dem madmin, nie ein freier Wert. */
.news-card {
    --nk-rahmen:  rgba(201, 168, 76, .3);
    --nk-rand-an: rgba(201, 168, 76, .7);
    --nk-flaeche: #fff;
    --nk-titel:   var(--dark);
    --nk-logo-a:  #fdf8ec;
    --nk-logo-b:  #f3e8cd;
    --nk-btn-a:   #e6c86e;
    --nk-btn-b:   #a9862c;
    --nk-btn-txt: #362808;
    --nk-schatten: 40, 28, 8;

    display: flex; flex-direction: column; overflow: hidden;
    background: var(--nk-flaeche);
    border: 1px solid var(--nk-rahmen);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(var(--nk-schatten), .07);
    transition: transform .2s ease, box-shadow .25s ease, border-color .2s ease;
}
.news-card:hover {
    transform: translateY(-3px);
    border-color: var(--nk-rand-an);
    box-shadow: 0 18px 44px rgba(var(--nk-schatten), .13);
}
.news-farbe-jade {
    --nk-rahmen: rgba(47,107,71,.28);  --nk-rand-an: rgba(47,107,71,.6);
    --nk-flaeche: linear-gradient(170deg, #fbfefc 0%, #eef7f1 100%);
    --nk-titel: #1f4d33;  --nk-logo-a: #edf6f0; --nk-logo-b: #d9ebe0;
    --nk-btn-a: #5ba278; --nk-btn-b: #2f6b47; --nk-btn-txt: #fff;
    --nk-schatten: 14, 46, 30;
}
.news-farbe-flieder {
    --nk-rahmen: rgba(126,0,252,.2);   --nk-rand-an: rgba(126,0,252,.5);
    --nk-flaeche: linear-gradient(170deg, #fdfbff 0%, #f4ecff 100%);
    --nk-titel: #3d1a63;  --nk-logo-a: #f6efff; --nk-logo-b: #e7d9fb;
    --nk-btn-a: #9b4dff; --nk-btn-b: #7e00fc; --nk-btn-txt: #fff;
    --nk-schatten: 40, 10, 70;
}
.news-farbe-rose {
    --nk-rahmen: rgba(214,51,132,.22);  --nk-rand-an: rgba(214,51,132,.55);
    --nk-flaeche: linear-gradient(170deg, #fffbfd 0%, #fdeef5 100%);
    --nk-titel: #7a1f4d;  --nk-logo-a: #fdf0f6; --nk-logo-b: #f8dbe8;
    --nk-btn-a: #e8629f; --nk-btn-b: #d63384; --nk-btn-txt: #fff;
    --nk-schatten: 70, 14, 42;
}
.news-farbe-himmel {
    --nk-rahmen: rgba(0,122,255,.2);   --nk-rand-an: rgba(0,122,255,.5);
    --nk-flaeche: linear-gradient(170deg, #fbfdff 0%, #eaf3fe 100%);
    --nk-titel: #14406e;  --nk-logo-a: #edf5ff; --nk-logo-b: #d7e7fa;
    --nk-btn-a: #3f9bff; --nk-btn-b: #0a6ed1; --nk-btn-txt: #fff;
    --nk-schatten: 10, 36, 70;
}
.news-farbe-terrakotta {
    --nk-rahmen: rgba(192,86,33,.24);  --nk-rand-an: rgba(192,86,33,.6);
    --nk-flaeche: linear-gradient(170deg, #fffcfa 0%, #fdf0e8 100%);
    --nk-titel: #7a3417;  --nk-logo-a: #fdf1e9; --nk-logo-b: #f6ddcc;
    --nk-btn-a: #e08a52; --nk-btn-b: #c05621; --nk-btn-txt: #fff;
    --nk-schatten: 70, 32, 12;
}
.news-bild {
    height: 190px; background: var(--nk-logo-b);
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.news-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Ohne eigenes Bild steht das Logo darin, statt die Fläche zu füllen —
   ein beschnittenes Logo sieht nach Fehler aus, nicht nach Absicht. */
.news-bild-logo { background: linear-gradient(140deg, var(--nk-logo-a), var(--nk-logo-b)); }
.news-bild-logo img {
    width: auto; height: auto; max-width: 72%; max-height: 68%;
    object-fit: contain; filter: drop-shadow(0 3px 10px rgba(0,0,0,.12));
}
.news-body { padding: 24px 24px 26px; display: flex; flex-direction: column; flex: 1; }
.news-titel {
    /* Playfair kennt keine thailändischen Zeichen; steht dort Thai, springt der
       Browser auf eine Systemschrift. Damit die Zeile trotzdem als Überschrift
       liest, trägt sie das Gewicht selbst — nicht nur die Schriftart. */
    font-family: 'Playfair Display', 'Noto Serif Thai', serif;
    font-size: 1.35rem; font-weight: 700; line-height: 1.35;
    color: var(--nk-titel); margin: 0 0 12px;
}
/* Reichlich Zeilenabstand: eine Meldung kann in jeder Sprache stehen, und
   thailändische Schrift trägt Zeichen über und unter der Zeile — bei 1.65
   berühren sie sich. */
.news-text { font-size: .95rem; line-height: 1.8; color: #5b5040; }
.news-text + .news-text { margin-top: .6em; }
.news-btn {
    align-self: flex-start; margin-top: 18px;
    padding: 11px 26px; border-radius: 50px;
    background: linear-gradient(135deg, var(--nk-btn-a) 0%, var(--nk-btn-b) 100%);
    color: var(--nk-btn-txt); font-size: .88rem; font-weight: 700; letter-spacing: .02em;
    text-decoration: none;
    box-shadow: 0 6px 16px rgba(var(--nk-schatten), .3), inset 0 1px 0 rgba(255,255,255,.35);
    transition: transform .12s ease, filter .18s ease;
}
.news-btn:hover  { transform: translateY(-1px); filter: brightness(1.05); }
.news-btn:active { transform: translateY(0) scale(.98); }
/* Steht nur eine Meldung da, wirkt eine schmale Karte verloren. */
@media (min-width: 760px) {
    .news-grid-einzeln { grid-template-columns: 1fr; }
    .news-grid-einzeln .news-card { flex-direction: row; align-items: stretch; }
    .news-grid-einzeln .news-bild { height: auto; width: 320px; flex-shrink: 0; }
    .news-grid-einzeln .news-body { justify-content: center; padding: 34px 38px; }
    .news-grid-einzeln .news-titel { font-size: 1.6rem; }
    /* Über die ganze Kartenbreite zu lesen ermüdet — der Satz bricht früher um. */
    .news-grid-einzeln .news-text  { max-width: 62ch; }
}
@media (max-width: 640px) {
    .news { padding: 60px 20px; }
    .news-bild { height: 170px; }
}

/* ─── ÜBER UNS ─── */
.about {
    padding: 100px 40px;
    background:
        radial-gradient(ellipse at 5%  50%, rgba(201,168,76,0.07)  0%, transparent 50%),
        radial-gradient(ellipse at 95% 50%, rgba(126,0,252,0.06)   0%, transparent 50%),
        linear-gradient(160deg, #fdf9f5 0%, #f5ecfb 100%);
    position: relative;
}
.about::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><text x='10' y='90' font-size='72'>🪷</text><text x='110' y='190' font-size='72'>🪷</text></svg>");
    background-repeat: repeat;
    background-size: 200px 200px;
}
.about::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(126,0,252,0.045) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

.about-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.about-text p {
    font-size: 1rem;
    line-height: 1.8;
    color: #555;
    margin-bottom: 14px;
}

.about-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 32px;
}

.stat-box {
    background: var(--white);
    border-radius: 16px;
    padding: 22px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}

.stat-box .number {
    font-family: 'Playfair Display', serif;
    font-size: 2rem;
    color: var(--primary);
    font-weight: 700;
}

.stat-box .label {
    font-size: 0.82rem;
    color: #777;
    margin-top: 4px;
}

.about-visual {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    border-radius: 24px;
    padding: 48px 40px;
    color: var(--white);
    text-align: center;
}

.about-visual .lotus {
    font-size: 5rem;
    margin-bottom: 22px;
    display: block;
}

.about-visual h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.6rem;
    margin-bottom: 14px;
}

.about-visual p {
    font-size: 0.95rem;
    line-height: 1.75;
    opacity: 0.9;
}

/* ─── LEISTUNGEN ─── */
.services {
    padding: 100px 40px;
    background:
        radial-gradient(ellipse at 50%  0%,  rgba(126,0,252,0.22) 0%, transparent 55%),
        radial-gradient(ellipse at 20% 100%, rgba(201,168,76,0.08) 0%, transparent 45%),
        linear-gradient(180deg, rgba(8,0,15,0.02) 0%, rgba(8,0,15,0.05) 100%),
        url('images/Massage_bg.jpg') center / cover no-repeat fixed;
    position: relative;
}
.services .section-label { color: var(--gold) !important; }
.services .section-title { color: #fff !important; }

.services-inner {
    max-width: 1100px;
    margin: 0 auto;
}

/* Fomantic card overrides */
.ui.cards.services-grid {
    margin-top: 0 !important;
    gap: 24px !important;
    justify-content: center !important;
}

.ui.cards.services-grid > .card {
    border-radius: 24px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(126,0,252,0.08) !important;
    border: 1px solid rgba(126,0,252,0.12) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: transform 0.35s cubic-bezier(.22,.68,0,1.2), box-shadow 0.35s, border-color 0.35s, background 0.35s !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Goldener Glanz-Streifen oben */
.ui.cards.services-grid > .card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(201,168,76,0.6), transparent);
    opacity: 0;
    transition: opacity 0.35s;
}
.ui.cards.services-grid > .card:hover::before {
    opacity: 1;
}

.ui.cards.services-grid > .card:hover {
    transform: translateY(-10px) scale(1.02) !important;
    background: linear-gradient(145deg, #f5f0ff 0%, #fff8e7 100%) !important;
    box-shadow: 0 24px 64px rgba(126,0,252,0.18), 0 4px 16px rgba(0,0,0,0.08) !important;
    border-color: rgba(201,168,76,0.5) !important;
}

.ui.cards.services-grid > .card .content {
    padding: 36px 30px 28px !important;
}

.ui.cards.services-grid .card .content {
    background: transparent !important;
}

/* Icon mit Hintergrund-Pill */
.ui.cards.services-grid .service-icon {
    font-size: 2.2rem;
    margin-bottom: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: linear-gradient(135deg, rgba(126,0,252,0.2), rgba(201,168,76,0.1));
    border-radius: 16px;
    border: 1px solid rgba(201,168,76,0.2);
    box-shadow: 0 4px 16px rgba(126,0,252,0.15);
    transition: transform 0.3s, box-shadow 0.3s;
}
.ui.cards.services-grid > .card:hover .service-icon {
    transform: scale(1.1) rotate(-4deg);
    box-shadow: 0 8px 24px rgba(126,0,252,0.3);
}

.ui.cards.services-grid .card .header {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.2rem !important;
    font-weight: 700 !important;
    color: #1a0a2e !important;
    margin-bottom: 10px !important;
    line-height: 1.3 !important;
}

.ui.cards.services-grid .card .description {
    font-size: 0.88rem !important;
    color: #6b5a7a !important;
    line-height: 1.75 !important;
}

.svc-more-link {
    margin-top: 18px;
    font-size: 0.78rem;
    color: #7e00fc;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    transition: color 0.2s, letter-spacing 0.2s;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.ui.cards.services-grid > .card:hover .svc-more-link {
    color: var(--gold);
    letter-spacing: 2px;
}

/* Gutschein-Section Hintergrundbild */
.gutschein-bg-cover {
    background-image: url('/images/valentinstag-hintergrund-mit-farbverlauf.avif');
    background-size: cover;
    background-position: center;
    z-index: 0;
}

/* Gutschein-Karte Highlight */
.ui.cards.services-grid > .card.gutschein-card {
    background: linear-gradient(145deg, #fffdf0 0%, #fdf5ff 100%) !important;
    border-color: rgba(201,168,76,0.4) !important;
}
.ui.cards.services-grid > .card.gutschein-card:hover {
    background: linear-gradient(145deg, #fff8d6 0%, #f8ecff 100%) !important;
    border-color: rgba(201,168,76,0.7) !important;
}

/* Service Modal scrollbarer Content */
#svcModal > .content {
    max-height: 65vh;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Service Modal Layout */
.svc-modal-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.svc-modal-img {
    width: 100%;
    max-height: 260px;
    object-fit: cover;
    border-radius: 12px;
}
.svc-modal-desc {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.8);
    line-height: 1.75;
    margin: 0;
}

/* Service Modal Preistabelle */
.svc-price-table.ui.table {
    background: rgba(255,255,255,0.05) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}
.svc-price-table.ui.table thead th {
    background: rgba(126,0,252,0.25) !important;
    color: var(--gold) !important;
    border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.svc-price-table.ui.table tbody td {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.85) !important;
}

/* ─── QUOTE STRIP ─── */
.quote-strip {
    padding: 90px 40px;
    background:
        radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.14) 0%, transparent 65%),
        linear-gradient(135deg, #0d001a 0%, #1a0045 50%, #0d001a 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}
.quote-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.07;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><text x='10' y='90' font-size='72'>🪷</text><text x='110' y='190' font-size='72'>🪷</text></svg>");
    background-repeat: repeat;
    background-size: 200px 200px;
}
.quote-strip::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.025) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}
.quote-inner {
    position: relative;
    z-index: 1;
    max-width: 780px;
    margin: 0 auto;
}
.quote-inner .qs-lotus {
    font-size: 2.8rem;
    display: block;
    margin-bottom: 28px;
    filter: drop-shadow(0 0 24px rgba(201,168,76,0.65));
    animation: lotusGlow 4s ease-in-out infinite alternate;
}
@keyframes lotusGlow {
    from { filter: drop-shadow(0 0 16px rgba(201,168,76,0.5)); }
    to   { filter: drop-shadow(0 0 36px rgba(201,168,76,0.9)); }
}
.quote-inner blockquote {
    font-family: 'Playfair Display', serif;
    font-size: clamp(1.25rem, 2.5vw, 1.85rem);
    color: #fff;
    line-height: 1.65;
    font-style: italic;
    margin: 0 0 22px;
    letter-spacing: 0.02em;
}
.quote-inner cite {
    font-size: 0.78rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--gold);
    font-style: normal;
}

/* ─── PREISE ─── */
.pricing {
    padding: 100px 40px;
    background:
        radial-gradient(ellipse at 95% 5%, rgba(126,0,252,0.05) 0%, transparent 50%),
        linear-gradient(160deg, #f8f5ff 0%, #fdf9f4 100%);
}

.pricing-inner {
    max-width: 900px;
    margin: 0 auto;
}

.pricing-block {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 40px rgba(0,0,0,0.07);
    margin-bottom: 28px;
}

.pricing-block-header {
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
    color: var(--white);
    padding: 22px 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.pricing-block-header h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
}

/* Fomantic table overrides */
.pricing-block .ui.table {
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.pricing-block .ui.table thead th {
    background: #f8f5ff !important;
    color: #999 !important;
    font-size: 0.78rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    border: none !important;
    padding: 14px 24px !important;
}

.pricing-block .ui.table tbody td {
    border-top: 1px solid #f2f2f2 !important;
    padding: 16px 24px !important;
    color: var(--dark);
}

.pricing-block .ui.table .price-cell {
    font-weight: 700;
    color: var(--primary);
    font-size: 1rem;
}

/* Price-Button */
.price-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    padding: 6px 14px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(126,0,252,.08), rgba(126,0,252,.04));
    border: 1.5px solid rgba(126,0,252,.2);
    color: var(--primary);
    font-weight: 700;
    font-size: .95rem;
    text-decoration: none;
    transition: all .25s ease;
    cursor: pointer;
    position: relative;
}
.price-btn .price-label {
    transition: opacity .2s ease;
}
.price-btn .price-book {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    font-weight: 800;
    font-size: .85rem;
    letter-spacing: .03em;
    transition: opacity .2s ease;
}
.price-btn:hover,
.price-btn:focus {
    background: linear-gradient(135deg, var(--primary), #5a00b8);
    border-color: var(--primary);
    color: #fff;
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(126,0,252,.35);
}
.price-btn:hover .price-label,
.price-btn:focus .price-label {
    opacity: 0;
}
.price-btn:hover .price-book,
.price-btn:focus .price-book {
    opacity: 1;
    color: #fff;
}
.price-btn:active {
    transform: scale(0.97);
}

/* Mobile: Tap statt Hover */
@media (hover: none) {
    .price-btn {
        -webkit-tap-highlight-color: transparent;
    }
    .price-btn .price-book { display: none; }
    .price-btn:active {
        background: linear-gradient(135deg, var(--primary), #5a00b8);
        border-color: var(--primary);
        color: #fff;
        transform: scale(0.97);
    }
}

.pricing-note {
    text-align: center;
    font-size: 0.85rem;
    color: #999;
    margin-top: 8px;
}

/* Hinweis auf eine anstehende Preisänderung. Steht unter der Überschrift und
   über den Karten — also dort, wo man die Liste zu lesen beginnt, nicht als
   Fußnote darunter. Gold statt Rot: das ist eine Auskunft, keine Warnung. */
.pricing-soon {
    display: inline-block;
    margin: -8px 0 4px;
    padding: 9px 20px;
    border: 1px solid rgba(201, 168, 76, 0.45);
    border-radius: 999px;
    background: rgba(201, 168, 76, 0.10);
    color: #7a6222;
    font-size: 0.88rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 600px) {
    .pricing-soon {
        font-size: 0.82rem;
        padding: 8px 15px;
    }
}

/* ─── GALERIE ─── */
.gallery {
    padding: 100px 40px;
    background:
        radial-gradient(ellipse at 50% 0%, rgba(126,0,252,0.18) 0%, transparent 55%),
        #08000f;
}
.gallery .section-label { color: var(--gold) !important; }
.gallery .section-title { color: #fff !important; }

.gallery-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-grid {
    display: flex;
    gap: 10px;
}

.gallery-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.gallery-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    flex-shrink: 0;
}

.gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 10px;
}

/* Der Hover-Zoom sitzt jetzt am RAHMEN, nicht am Bild.
   Grund: das Bild bekommt darunter eine eigene, dauerhafte Bewegung — und
   eine laufende Animation ueberschreibt jedes `transform` aus einer
   Hover-Regel. Zwei Ebenen, zwei Bewegungen, kein Streit. */
.gallery-item {
    transition: transform 0.4s ease;
}
.gallery-item:hover {
    transform: scale(1.04);
}

/* ── Ken Burns: das Bild wandert langsam ───────────────────────────────────
   24 Sekunden fuer knapp fuenf Prozent Weg — das nimmt niemand als Bewegung
   wahr, es laesst die Wand nur atmen. Wer hinsieht, merkt, dass sich etwas
   tut; wer liest, wird nicht gestoert.

   Nur ab 900 px: auf dem Telefon liegen die Bilder klein und dicht, dort
   waere dieselbe Bewegung Unruhe statt Leben. Ausserdem laufen CSS-
   Animationen auch ausserhalb des Bildes weiter — auf einem Geraet mit
   knappem Akku ist das der falsche Handel.

   Unter „Bewegung reduzieren" faellt es weg (siehe der Block weiter oben). */
@media (min-width: 900px) {
    .gallery-item img {
        animation: kenBurns 24s ease-in-out infinite alternate;
        will-change: transform;
    }
    /* Gegenlaeufig, damit nicht alle Bilder im Gleichschritt wandern —
       das faellt sofort als Animation auf und wirkt billig. */
    .gallery-item:nth-child(even) img { animation-direction: alternate-reverse; }
    .gallery-item:nth-child(3n)  img { animation-duration: 31s; }
    .gallery-item:nth-child(4n)  img { animation-duration: 27s; }
}

@keyframes kenBurns {
    from { transform: scale(1)    translate3d(0, 0, 0); }
    to   { transform: scale(1.05) translate3d(-1.2%, -0.8%, 0); }
}


.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(52, 199, 89, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-overlay .icon {
    font-size: 2rem;
    color: var(--white);
}

/* Lightbox */
#lightboxModal .image.content {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

@media (max-width: 600px) {
    .gallery {
        padding: 70px 20px;
    }

    .gallery-item:nth-child(5n+1) {
        grid-column: span 2;
    }
}

/* ─── TEAM ─── */
.team {
    padding: 100px 40px;
    background:
        radial-gradient(ellipse at 90%  0%, rgba(201,168,76,0.09) 0%, transparent 50%),
        radial-gradient(ellipse at 10% 100%, rgba(126,0,252,0.06) 0%, transparent 50%),
        linear-gradient(160deg, #fff9f2 0%, #fce6f0 45%, #f3eaff 100%);
    position: relative;
}
.team::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(201,168,76,0.07) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
}

.team-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 28px;
    margin-top: 56px;
}
.team-grid .team-card {
    flex: 0 0 auto;
    width: 200px;
}

.team-card {
    text-align: center;
}

.team-avatar {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), var(--gold));
    margin: 0 auto 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.2rem;
    color: var(--white);
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

.team-avatar-img {
    width: 110px;
    height: 110px;
    min-width: 110px;
    min-height: 110px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    margin: 0 auto 16px;
    display: block;
    border: 3px solid var(--primary);
}

.team-card h4 {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    margin-bottom: 5px;
    color: var(--dark);
}

.team-card p {
    font-size: 0.82rem;
    color: #999;
}

.team-card {
    cursor: pointer;
    transition: transform 0.25s, opacity 0.2s;
}
.team-card.loading-card {
    opacity: 0.5;
    pointer-events: none;
}
.team-card:hover {
    transform: translateY(-4px);
}
.team-card-hint {
    display: block;
    margin-top: 8px;
    font-size: 0.75rem;
    color: var(--primary);
    letter-spacing: 0.5px;
    opacity: 0;
    transition: opacity 0.2s;
}
.team-card:hover .team-card-hint {
    opacity: 1;
}

/* ─── TEAM MEMBER MODAL ─── */
.tm-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 3000;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}
.tm-overlay.open {
    display: flex;
}
.tm-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><text x='10' y='90' font-size='72'>🪷</text><text x='110' y='190' font-size='72'>🪷</text></svg>");
    background-repeat: repeat;
    background-size: 500px 500px;
    z-index: 0;
}
.tm-card {
    position: relative;
    z-index: 1;
    background: linear-gradient(160deg, #f8f5ff 0%, #fdf9f4 100%);
    border-radius: 24px;
    width: 100%;
    max-width: 480px;
    max-height: 92vh;
    overflow-y: auto;
    box-shadow: 0 30px 90px rgba(126,0,252,0.35);
    border: 1px solid rgba(126,0,252,0.15);
    display: flex;
    flex-direction: column;
}
/* Hero: großes Foto mit Fade + Avatar-Overlay */
.tm-hero {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 3;
    max-height: 420px;
    overflow: hidden;
    border-radius: 24px 24px 0 0;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark));
}
.tm-hero-photo {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    transform: scale(1.02);
    transition: transform 0.6s ease;
}
.tm-overlay.open .tm-hero-photo { transform: scale(1); }
.tm-hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
                rgba(0,0,0,0.15) 0%,
                rgba(0,0,0,0)   30%,
                rgba(0,0,0,0)   55%,
                rgba(0,0,0,0.72) 100%);
    pointer-events: none;
}
.tm-hero-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: flex-end;
    gap: 16px;
    padding: 22px 22px 20px;
    z-index: 2;
}
.tm-hero-avatar {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    border: 3px solid #fff;
    box-shadow: 0 6px 20px rgba(0,0,0,0.35);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tm-hero-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}
.tm-hero-text {
    flex: 1;
    min-width: 0;
    color: #fff;
    text-shadow: 0 2px 10px rgba(0,0,0,0.55);
    padding-bottom: 4px;
}
.tm-role {
    display: inline-block;
    background: rgba(126,0,252,0.85);
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.4px;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 6px;
    text-shadow: none;
    backdrop-filter: blur(4px);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
.tm-name {
    font-family: 'Playfair Display', serif;
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.1;
    color: #fff;
}
/* Floating Close-Button (top-right) */
.tm-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.45);
    border: none;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(6px);
    transition: background 0.2s, transform 0.2s;
    padding: 0;
}
.tm-close:hover {
    background: rgba(0,0,0,0.7);
    transform: scale(1.06);
}
.tm-body {
    flex: 1;
}
.tm-info {
    padding: 22px 26px 8px;
    font-family: 'Lato', sans-serif;
    font-size: 0.95rem;
    color: var(--dark);
    line-height: 1.9;
}
/* Mobile: kompakter */
@media (max-width: 480px) {
    .tm-hero { aspect-ratio: 1 / 1; max-height: 380px; }
    .tm-hero-avatar { width: 72px; height: 72px; }
    .tm-name { font-size: 1.5rem; }
}
.tm-zert-section {
    padding: 4px 24px 20px;
}
.tm-zert-label {
    font-family: 'Lato', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--primary);
    margin-bottom: 12px;
    text-align: center;
}
.tm-zert-grid {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}
.tm-zert-grid img {
    width: 130px;
    height: 90px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(126,0,252,0.3);
    cursor: pointer;
    transition: transform 0.2s;
}
.tm-zert-grid img:hover {
    transform: scale(1.04);
}

/* Zertifikat Lightbox */
.zert-lightbox {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.zert-lightbox img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 14px;
    box-shadow: 0 16px 60px rgba(0,0,0,0.6);
    display: block;
}
.zert-lightbox .tm-close {
    position: absolute;
    top: -14px;
    right: -14px;
    background: #fff;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.25);
    color: #333;
}
.tm-footer {
    padding: 14px 24px 18px;
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid rgba(126,0,252,0.2);
    position: sticky;
    bottom: 0;
    background: linear-gradient(160deg, #f8f5ff 0%, #fdf9f4 100%);
    border-radius: 0 0 22px 22px;
}
.tm-ok-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: 11px 36px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: 'Lato', sans-serif;
    transition: opacity 0.2s;
}
.tm-ok-btn:hover { opacity: 0.88; }

/* ─── KONTAKT ─── */
.contact {
    padding: 100px 40px;
    background: linear-gradient(135deg, #1a0033 0%, #3d0080 100%);
    color: var(--white);
}

.contact-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.contact .section-label {
    color: var(--gold);
}

.contact .section-title {
    color: var(--white);
}

.contact-info {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.contact-item-icon {
    font-size: 1.3rem;
    width: 42px;
    height: 42px;
    background: rgba(255,255,255,0.1);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-item-text strong {
    display: block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--gold);
    margin-bottom: 3px;
}

.contact-item-text span,
.contact-item-text a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    font-size: 0.93rem;
}

.contact-item-text a:hover {
    color: var(--gold);
}

/* Standort-Öffnungszeiten */
.oz-list {
    margin-top: 2px;
}
.oz-row {
    font-size: 0.88rem;
    color: rgba(255,255,255,0.85);
    line-height: 1.55;
}
.contact-item-text .oz-day {
    display: inline-block;
    min-width: 72px;
    font-weight: 600;
    color: rgba(255,255,255,0.95);
    margin-right: 14px;
}
.contact-item-text .oz-time {
    font-variant-numeric: tabular-nums;
    color: rgba(255,255,255,0.78);
}

/* Fomantic form overrides for dark background */
@property --gold-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
.contact-form-wrap {
    background: rgba(255,255,255,0.07);
    border-radius: 24px;
    padding: 40px;
    position: relative;
    isolation: isolate;
    max-width: 760px;
    margin: 48px auto 0;
}
.contact-form-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 24px;
    padding: 4px;
    background: conic-gradient(
        from var(--gold-angle),
        var(--gold),
        #f5e6a3,
        #fff8dc,
        #f5e6a3,
        var(--gold),
        #b8923a,
        var(--gold)
    );
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: goldAngle 6s linear infinite;
    pointer-events: none;
    z-index: 0;
}
@keyframes goldAngle {
    to { --gold-angle: 360deg; }
}
.contact-form-wrap > * {
    position: relative;
    z-index: 1;
}

.contact-form-wrap h3 {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    color: var(--white);
    margin-bottom: 28px;
}

.contact-form-wrap .ui.form .field > label {
    color: rgba(255,255,255,0.6) !important;
    font-size: 0.75rem !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.contact-form-wrap .ui.form input,
.contact-form-wrap .ui.form textarea,
.contact-form-wrap .ui.form select,
.contact-form-wrap .ui.form .ui.selection.dropdown {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 10px !important;
    color: var(--white) !important;
    font-family: 'Lato', sans-serif !important;
}

.contact-form-wrap .ui.form input::placeholder,
.contact-form-wrap .ui.form textarea::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

.contact-form-wrap .ui.form input:focus,
.contact-form-wrap .ui.form textarea:focus {
    border-color: var(--gold) !important;
    background: rgba(255,255,255,0.13) !important;
}

/* Pflichtfeld-Fehler */
.contact-form-wrap .ui.form .field.error > input,
.contact-form-wrap .ui.form .field.error > textarea {
    border-color: #ef4444 !important;
    background: rgba(239,68,68,0.12) !important;
}
.contact-form-wrap .ui.form .field.error > label {
    color: #fca5a5 !important;
}

.contact-form-wrap .ui.form input[readonly] {
    background: rgba(255,255,255,0.1) !important;
    color: var(--white) !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.contact-form-wrap .ui.selection.dropdown .menu {
    background: #3d0080 !important;
    border-color: rgba(255,255,255,0.2) !important;
}

.contact-form-wrap .ui.selection.dropdown .menu .item {
    color: rgba(255,255,255,0.85) !important;
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}
.contact-form-wrap .ui.selection.dropdown .menu .item .item-price {
    font-size: 0.82rem;
    color: var(--gold);
    font-weight: 600;
    white-space: nowrap;
    margin-left: 12px;
    flex-shrink: 0;
}

.contact-form-wrap .ui.selection.dropdown .menu .item:hover {
    background: rgba(255,255,255,0.1) !important;
}

.contact-form-wrap .ui.selection.dropdown > .text {
    color: rgba(255,255,255,0.85) !important;
}

.contact-form-wrap .ui.selection.dropdown > .default.text {
    color: rgba(255,255,255,0.35) !important;
}

.contact-form-wrap .ui.selection.dropdown > .dropdown.icon {
    color: rgba(255,255,255,0.5) !important;
}

/* Aktiv/Hover-Zustand Dropdown */
.contact-form-wrap .ui.active.selection.dropdown,
.contact-form-wrap .ui.selection.dropdown:hover {
    background: rgba(255,255,255,0.1) !important;
    border-color: rgba(255,255,255,0.35) !important;
}

/* Uhrzeit-Dropdown (terminZeitDropdown) */
.contact-form-wrap .ui.form .ui.calendar .ui.input input {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.2) !important;
    border-radius: 10px !important;
    color: var(--white) !important;
    opacity: 1 !important;
    cursor: pointer !important;
}

.contact-form-wrap .ui.form .ui.calendar .ui.input input::placeholder {
    color: rgba(255,255,255,0.35) !important;
}

.form-btn-row {
    display: flex;
    gap: 10px;
    margin-top: 6px;
}

.contact-form-wrap .ui.button.submit-btn {
    background: var(--gold) !important;
    color: var(--dark) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 14px !important;
    flex: 1;
    transition: opacity 0.3s, transform 0.3s !important;
}

.contact-form-wrap .ui.button.submit-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.contact-form-wrap .ui.button.wa-btn {
    background: #25D366 !important;
    color: #fff !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.95rem !important;
    padding: 14px 20px !important;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: opacity 0.3s, transform 0.3s !important;
}

.contact-form-wrap .ui.button.wa-btn:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

@media (max-width: 500px) {
    .form-btn-row { flex-direction: column; }
}

/* ─── MAP INFO ─── */
/* ─── STANDORT-CARDS (Kontakt) ─── */
.contact-standort-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(212,175,55,0.02));
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 18px;
    padding: 22px 20px 20px;
    margin-bottom: 16px;
    position: relative;
    transition: border-color .3s, transform .3s;
}
.contact-standort-card:hover {
    border-color: rgba(212,175,55,0.4);
}
.contact-standort-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent);
}
.contact-standort-head {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}
.contact-standort-image {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    background-color: rgba(212,175,55,0.12);
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    border: 1px solid rgba(212,175,55,0.25);
}
.contact-standort-name {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.3px;
    line-height: 1.1;
    margin: 0;
}
.contact-standort-card .contact-info {
    margin-top: 0;
    gap: 14px;
}
.contact-standort-card .contact-item-icon {
    width: 36px;
    height: 36px;
    font-size: 1.1rem;
    background: rgba(212,175,55,0.1);
}

/* Globale Info (Öffnungszeiten, Parken, WhatsApp) — außerhalb der Standort-Cards */
.contact-global-info {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px dashed rgba(255,255,255,0.12);
}

/* ─── MAP-CARDS (pro Standort) ─── */
.map-card {
    max-width: 1100px;
    margin: 56px auto 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(212,175,55,0.22);
    box-shadow: 0 12px 48px rgba(0,0,0,0.35);
    background: rgba(255,255,255,0.02);
    backdrop-filter: blur(10px);
}
.map-card + .map-card {
    margin-top: 36px;
}
.map-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(212,175,55,0.15);
    background: linear-gradient(135deg, rgba(212,175,55,0.06), rgba(0,0,0,0));
}
.map-card-image {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background-size: cover;
    background-position: center;
    background-color: rgba(212,175,55,0.12);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    border: 1px solid rgba(212,175,55,0.3);
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.map-card-text { flex: 1; min-width: 0; }
.map-card-title {
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--gold);
    line-height: 1.2;
    margin: 0 0 2px;
}
.map-card-addr {
    font-size: 0.86rem;
    color: rgba(255,255,255,0.75);
    line-height: 1.5;
    margin: 0;
}
.map-card-addr a {
    color: rgba(255,255,255,0.85);
    text-decoration: none;
    border-bottom: 1px dashed rgba(255,255,255,0.3);
    transition: color .2s, border-color .2s;
}
.map-card-addr a:hover {
    color: var(--gold);
    border-color: var(--gold);
}
.map-card-anreise,
.map-card-info {
    padding: 14px 22px;
    font-size: 0.84rem;
    color: rgba(255,255,255,0.7);
    line-height: 1.65;
    background: rgba(0,0,0,0.15);
}
.map-card-anreise strong,
.map-card-info strong { color: rgba(255,255,255,0.9); }
.map-card-meta {
    display: grid;
    grid-template-columns: 1fr;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.map-card-meta:has(.map-card-info + .map-card-anreise),
.map-card-meta:has(.map-card-anreise + .map-card-info) {
    grid-template-columns: 1fr 1fr;
}
.map-card-meta > .map-card-info + .map-card-anreise,
.map-card-meta > .map-card-anreise + .map-card-info {
    border-left: 1px solid rgba(255,255,255,0.06);
}
@media (max-width: 900px) {
    .map-card-meta { grid-template-columns: 1fr !important; }
    .map-card-meta > * + * {
        border-left: none !important;
        border-top: 1px solid rgba(255,255,255,0.06);
    }
}
.map-card-iframe {
    display: block;
    width: 100%;
    height: 360px;
    border: 0;
    filter: invert(0.85) hue-rotate(180deg) saturate(0.9) brightness(0.85);
}

/* Standort-Zeile: links Info-Karte, rechts Karte (Desktop) */
.standort-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: stretch;
    margin-bottom: 40px;
}
.standort-row > .contact-standort-card { margin: 0; }
.standort-map {
    background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(212,175,55,0.02));
    border: 1px solid rgba(212,175,55,0.18);
    border-radius: 18px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color .3s, transform .3s;
}
.standort-map:hover {
    border-color: rgba(212,175,55,0.4);
}
.standort-map::before {
    content: "";
    position: absolute;
    top: 0;
    left: 22px;
    right: 22px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.5), transparent);
    z-index: 1;
}
.standort-map .map-card-iframe {
    flex: 1;
    min-height: 360px;
    height: auto;
}
@media (max-width: 900px) {
    .standort-row {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 28px;
    }
    .standort-map .map-card-iframe { min-height: 280px; }
}

@media (max-width: 640px) {
    .contact-standort-card { padding: 18px 16px 16px; }
    .contact-standort-image { width: 48px; height: 48px; border-radius: 12px; }
    .contact-standort-name { font-size: 1.2rem; }
    .map-card-header { padding: 14px 16px; }
    .map-card-image { width: 40px; height: 40px; }
    .map-card-title { font-size: 1.1rem; }
}

.map-info {
    max-width: 1100px;
    margin: 48px auto 0;
    padding: 0 4px;
}
.map-address {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--gold);
    letter-spacing: 0.5px;
    margin-bottom: 6px;
}
.map-parking {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.65);
    line-height: 1.6;
    margin: 0;
}
.map-parking strong {
    color: rgba(255,255,255,0.85);
}

/* ─── MAP ─── */
.map-wrap {
    max-width: 1100px;
    margin: 56px auto 0;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 8px 40px rgba(0,0,0,0.4);
}

.map-wrap iframe {
    display: block;
    width: 100%;
    height: 360px;
    filter: invert(0.85) hue-rotate(180deg) saturate(0.9) brightness(0.85);
}

/* ─── GUTSCHEIN CARD ─── */
.gutschein-card .btn-voucher {
    background: linear-gradient(135deg, var(--gold), #e8c05a) !important;
    color: var(--dark) !important;
    border-radius: 50px !important;
    font-weight: 700 !important;
    font-size: 0.88rem !important;
    padding: 10px 22px !important;
    border: none !important;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s !important;
}
.gutschein-card .btn-voucher:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201,168,76,0.45) !important;
}

/* ─── SUCCESS MESSAGE ─── */
.ui.positive.message {
    display: none;
    border-radius: 12px !important;
    margin-bottom: 20px !important;
}

/* ─── FOOTER ─── */
footer {
    background: #0d0020;
    color: rgba(255,255,255,0.45);
    text-align: center;
    padding: 30px 40px;
    font-size: 0.85rem;
}

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

footer a:hover {
    text-decoration: underline;
}

/* ─── SCROLL TO TOP ─── */
#scrollTop {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    font-size: 1rem;
    background: var(--primary);
    color: var(--white);
    border: none;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(126,0,252,0.35);
    z-index: 999;
    transition: background 0.3s, transform 0.3s;
}

#scrollTop:hover {
    background: var(--primary-dark);
    transform: translateX(-50%) translateY(-2px);
}

/* ─── MOBILE MENU ─── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 10px;
    margin-left: auto;
    transition: transform .2s;
}
.hamburger:hover { transform: scale(1.08); }
.hamburger span {
    display: block;
    width: 22px;
    height: 2.5px;
    background: linear-gradient(90deg, var(--primary), var(--gold));
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}
.hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

#mobileMenu {
    display: none;
    flex-direction: column;
    position: fixed;
    top: 57px;
    left: 0;
    right: 0;
    background: rgba(255,255,255,0.98);
    backdrop-filter: blur(10px);
    z-index: 999;
    padding: 16px 24px 24px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
    border-top: 1px solid rgba(0,0,0,0.06);
}
#mobileMenu.active {
    display: flex;
}
#mobileMenu a {
    padding: 12px 0;
    font-size: 1rem;
    font-family: 'Lato', sans-serif;
    font-weight: 600;
    color: var(--dark);
    text-decoration: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    transition: color 0.2s;
}
#mobileMenu a:hover {
    color: var(--primary);
}
/* Mobile-Menü CTA-Buttons — gleicher Look wie die regulären Menü-Items
   (plain text-Link mit dünner Trennlinie unten), nur das WhatsApp-Item
   bekommt sein Marken-Grün. */
#mobileMenu .mobile-contact-btn,
#mobileMenu .mobile-cta,
#mobileMenu .mobile-wa-cta {
    margin-top: 0;
    padding: 12px 0 !important;
    background: transparent !important;
    color: var(--dark) !important;
    border: none !important;
    border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    border-radius: 0 !important;
    font-weight: 600 !important;
    font-size: 1rem;
    text-align: left;
    text-decoration: none;
    display: block;
}
#mobileMenu .mobile-wa-cta {
    color: #25D366 !important;
}
#mobileMenu .mobile-wa-cta svg {
    margin-right: 4px;
    vertical-align: -3px;
}
#mobileMenu .mobile-lang {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    justify-content: center;
}
#mobileMenu .mobile-lang .lang-btn {
    padding: 8px 16px;
    font-size: .9rem;
}

/* ─── RESPONSIVE ─── */
@media (max-width: 900px) {
    .about-inner,
    .contact-inner {
        grid-template-columns: 1fr;
        gap: 48px;
    }
}

@media (max-width: 900px) {
    #desktopMenu {
        display: none !important;
    }
    .hamburger {
        display: flex !important;
    }
}

@media (max-width: 600px) {
    .ui.menu {
        padding: 4px 12px !important;
    }

    .about,
    .services,
    .pricing,
    .team,
    .contact {
        padding: 70px 20px;
    }

    .contact-form-wrap {
        padding: 28px 20px;
    }
}

/* ─── MODAL ─── */
.ui.modal {
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(126, 0, 252, 0.25) !important;
    font-family: 'Lato', sans-serif !important;
    border: 1px solid rgba(126, 0, 252, 0.15) !important;
    overflow: hidden;
}

.ui.modal > .header {
    font-family: 'Playfair Display', serif !important;
    font-size: 1.25rem !important;
    color: #fff !important;
    border-bottom: none !important;
    padding: 20px 24px !important;
    background: linear-gradient(135deg, var(--primary), var(--primary-dark)) !important;
}

.ui.modal > .content {
    font-family: 'Lato', sans-serif !important;
    color: var(--dark) !important;
    background: radial-gradient(ellipse at 95% 5%, rgba(126, 0, 252, 0.05) 0%, transparent 50%), linear-gradient(160deg, #f8f5ff 0%, #fdf9f4 100%) !important;
    padding: 24px !important;
}

.ui.modal > .actions {
    background: #f7f0ff !important;
    border-top: 1px solid rgba(126, 0, 252, 0.12) !important;
    padding: 14px 20px !important;
}

.ui.modal > .actions .ui.button {
    border-radius: 8px !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 600 !important;
    background: transparent !important;
    color: var(--primary) !important;
    border: 2px solid var(--primary) !important;
    box-shadow: none !important;
}

.ui.modal > .actions .ui.button:hover {
    background: rgba(126, 0, 252, 0.08) !important;
}

.ui.modal > .actions .ui.primary.button,
.ui.modal > .actions .ui.approve.button {
    background: var(--primary) !important;
    color: #fff !important;
}

.ui.modal > .actions .ui.primary.button:hover,
.ui.modal > .actions .ui.approve.button:hover {
    background: var(--primary-dark) !important;
}

.ui.dimmer {
    background: rgba(26, 26, 26, 0.72) !important;
    backdrop-filter: blur(4px);
}
.ui.dimmer::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.1;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><text x='10' y='90' font-size='72'>🪷</text><text x='110' y='190' font-size='72'>🪷</text></svg>");
    background-repeat: repeat;
    background-size: 500px 500px;
    z-index: 0;
}

/* ─── TOAST ─── */
.ui.toast-container {
    z-index: 9999 !important;
}

.ui.toast-container .toast-box {
    border-radius: 14px !important;
    box-shadow: 0 8px 32px rgba(126, 0, 252, 0.15) !important;
    font-family: 'Lato', sans-serif !important;
    font-size: 0.95rem !important;
    backdrop-filter: blur(8px);
    border: none !important;
    padding: 14px 18px !important;
    min-width: 260px;
}

.ui.toast-container .toast-box > .ui.toast {
    border-radius: 12px !important;
    font-family: 'Lato', sans-serif !important;
    font-weight: 600;
    letter-spacing: 0.2px;
}

/* Standard / Info */
.ui.toast-container .toast-box > .ui.toast:not(.success):not(.error):not(.warning) {
    background: var(--primary) !important;
    color: #fff !important;
}

/* Erfolg */
.ui.toast-container .toast-box > .ui.toast.success {
    background: linear-gradient(135deg, #2d9e6b, #1f7a52) !important;
    color: #fff !important;
}

/* Fehler */
.ui.toast-container .toast-box > .ui.toast.error {
    background: linear-gradient(135deg, #c0392b, #962d22) !important;
    color: #fff !important;
}

/* Warnung */
.ui.toast-container .toast-box > .ui.toast.warning {
    background: linear-gradient(135deg, var(--gold), #a07a2a) !important;
    color: #fff !important;
}

.ui.toast-container .toast-box .ui.toast .content .message {
    color: #fff !important;
    font-weight: 500;
}

.ui.toast-container .toast-box .ui.toast .ui.progress .bar {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* ── Bewertungen ─────────────────────────────────────────────────────────── */
.reviews { padding: 80px 0; background: var(--light); }
.reviews-inner { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

.rev-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 40px;
}
@media (max-width: 1100px) {
    .rev-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .rev-grid { grid-template-columns: 1fr; }
}

/* Bewertungs-Pager */
.rev-pager {
    display: flex; align-items: center; justify-content: center; gap: 16px;
    margin-top: 28px;
}
.rev-pager-btn {
    width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.12); background: #fff;
    font-size: 22px; line-height: 1; color: var(--primary);
    cursor: pointer; transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.rev-pager-btn:hover:not(:disabled) { background: var(--primary); color: #fff; border-color: var(--primary); }
.rev-pager-btn:disabled { opacity: .35; cursor: default; box-shadow: none; }
.rev-pager-info { font-size: 0.92rem; color: #666; min-width: 56px; text-align: center; font-variant-numeric: tabular-nums; }
.rev-card {
    background: #fff;
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    display: flex;
    flex-direction: column;
    gap: 12px;
    /* Die Bewertungskarten waren die einzige Kachelgruppe der Seite ohne
       Reaktion auf den Mauszeiger — .news-card, .team-card und .gallery-item
       heben sich alle an. Das war keine Entscheidung, sondern eine Luecke. */
    transition: transform .22s ease, box-shadow .22s ease;
}
.rev-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.10);
}

/* ── Durchschnitt der Bewertungen ──────────────────────────────────────────
   Eine echte Zahl aus der Datenbank, kein Zierrat: sie zaehlt beim Scrollen
   hoch und steht dann still. Die Sterne darueber fuellen sich mit ihr. */
.rev-avg {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: -6px 0 26px;
}
.rev-avg-zahl {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;   /* springt beim Hochzaehlen nicht */
}
.rev-avg-sterne { font-size: 1.15rem; letter-spacing: 2px; }
.rev-avg-sterne .star { color: #ddd; }
.rev-avg-sterne .star.filled { color: var(--gold); }
.rev-avg-text { font-size: .82rem; color: #999; }
.rev-stars { font-size: 1.2rem; }
.rev-stars .star { color: #ddd; }
.rev-stars .star.filled { color: var(--gold); }
.rev-text { color: #444; font-size: 0.92rem; line-height: 1.65; flex: 1; }
.rev-author { display: flex; justify-content: space-between; align-items: center; margin-top: auto; }
.rev-name { font-weight: 700; font-size: 0.85rem; color: var(--primary); }
.rev-date { font-size: 0.75rem; color: #aaa; }
.rev-empty { text-align: center; color: #aaa; margin-top: 40px; }

/* Antwort vom Betrieb */
.rev-reply {
    display: flex; gap: 10px; align-items: flex-start;
    margin-top: 14px; padding: 12px 14px;
    background: rgba(126, 0, 252, 0.06);
    border-left: 3px solid var(--primary, #7e00fc);
    border-radius: 10px;
}
.rev-reply-avatar {
    flex: 0 0 auto; width: 36px; height: 36px;
    border-radius: 50%; overflow: hidden;
    background: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.rev-reply-avatar img { width: 100%; height: 100%; object-fit: cover; }
.rev-reply-avatar span { font-weight: 700; color: var(--primary, #7e00fc); font-size: 15px; }
.rev-reply-body { flex: 1; min-width: 0; }
.rev-reply-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 4px; }
.rev-reply-name { font-weight: 700; font-size: 0.82rem; color: var(--primary, #7e00fc); }
.rev-reply-date { font-size: 0.72rem; color: #aaa; }
.rev-reply-text { margin: 0; color: #444; font-size: 0.85rem; line-height: 1.55; white-space: pre-wrap; }

.rev-form-wrap { margin-top: 48px; text-align: center; }
.rev-toggle-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.rev-toggle-btn:hover { background: var(--primary-dark); }

.rev-form {
    max-width: 520px;
    margin: 24px auto 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.rev-star-pick { font-size: 2rem; cursor: pointer; text-align: center; margin-bottom: 4px; }
.rev-pick-star { color: #ddd; transition: color 0.1s; }
.rev-pick-star.active { color: var(--gold); }
.rev-form input, .rev-form textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    font-size: 0.92rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    resize: vertical;
}
.rev-form input:focus, .rev-form textarea:focus { border-color: var(--primary); }
.rev-submit {
    align-self: flex-end;
    background: var(--primary);
    color: #fff;
    border: none;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.rev-submit:hover { background: var(--primary-dark); }
.rev-thanks { color: #059669; font-weight: 600; text-align: center; margin-top: 8px; }

/* ─── THAI INTRO ─── */
.thai-intro {
    position: relative;
    background: url('images/bg_thai_green.jpg') center / cover no-repeat;
    padding: 64px 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.thai-intro-flower-deko {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 170px;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.15));
}
.thai-intro-flower-deko img {
    width: 100%;
    height: auto;
}
.thai-intro-card {
    background: rgba(255,255,255,0.93);
    border-radius: 28px;
    box-shadow: 0 8px 48px rgba(0,0,0,0.14);
    display: flex;
    align-items: center;
    gap: 44px;
    padding: 48px 52px 48px 44px;
    max-width: 1020px;
    width: 100%;
    position: relative;
    z-index: 1;
    overflow: hidden;
}
.thai-intro-portrait-wrap {
    flex-shrink: 0;
}
.thai-intro-portrait-wrap {
    position: relative;
}
.thai-intro-portrait-wrap::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    border-radius: 50%;
    background: conic-gradient(
        transparent 0deg,
        transparent 80deg,
        rgba(201,168,76,0.5) 120deg,
        rgba(245,230,163,0.8) 180deg,
        rgba(201,168,76,0.5) 240deg,
        transparent 280deg,
        transparent 360deg
    );
    animation: goldRotate 6s linear infinite;
    z-index: 0;
}
.thai-intro-portrait {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    overflow: hidden;
    border: 5px solid var(--gold);
    box-shadow: 0 6px 28px rgba(0,0,0,0.2);
    position: relative;
    z-index: 1;
}
@keyframes goldRotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.thai-intro-portrait img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}
.thai-intro-content {
    flex: 1;
}
.thai-intro-title {
    font-family: 'Dancing Script', cursive;
    font-size: 2.1rem;
    font-weight: 700;
    color: #d63384;
    margin-bottom: 14px;
    line-height: 1.3;
}
.thai-intro-bold {
    font-weight: 700;
    font-size: 1rem;
    color: var(--dark);
    margin-bottom: 12px;
}
.thai-intro-text {
    font-size: 0.95rem;
    line-height: 1.75;
    color: #444;
    margin-bottom: 10px;
}
.thai-intro-text:last-child {
    margin-bottom: 0;
}
@media (max-width: 820px) {
    .thai-intro-card {
        flex-direction: column;
        padding: 32px 28px;
        gap: 28px;
        text-align: center;
    }
    .thai-intro-portrait {
        width: 160px;
        height: 160px;
    }
    .thai-intro-title {
        font-size: 1.65rem;
    }
    .thai-intro-flower-deko {
        width: 110px;
    }
}

/* ── Anlass-Deko im Gutschein-Bereich ─────────────────────────────────────
   Schwebende Symbole hinter der Gutschein-Karte, passend zum Anlass:
   Herzen vor dem Valentinstag, Schneeflocken vor Weihnachten und so weiter.
   Gesteuert wird sie in index.php ueber die Klasse .anlass-<name> am
   <section>; laeuft gerade kein Anlass, gibt es die Ebene gar nicht erst.

   Bewegt werden ausschliesslich transform und opacity — beides erledigt die
   Grafikkarte. Etwas wie top oder margin zu animieren wuerde bei jedem Bild
   das ganze Seitenlayout neu berechnen lassen und auf dem Handy ruckeln.

   Die Werte je Symbol (Startpunkt, Dauer, Groesse, Drift) stehen als
   CSS-Variablen direkt am Element — so kommt die Vielfalt aus PHP, und das
   Stylesheet bleibt eine einzige Regel statt fuenfzehn.
   ───────────────────────────────────────────────────────────────────────── */
.anlass-deko {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;   /* nie einen Klick auf die Karte abfangen */
    z-index: 1;
}
.anlass-deko span {
    position: absolute;
    left: var(--x);
    display: block;
    line-height: 1;
    font-size: var(--gr);
    opacity: 0;
    will-change: transform, opacity;
    animation-name: anlass-schweben;
    animation-duration: var(--dauer);
    animation-delay: var(--start);
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
/* Die Flugweite --weg steht am Element als reine Laenge; die Richtung gibt
   erst --vz dazu. Sonst braeuchte jedes Symbol zwei Werte, und ein falsches
   Vorzeichen liesse den Schnee nach oben fallen — aus dem Bild heraus, ohne
   dass man saehe, woran es liegt. */
/* Von unten nach oben — Herzen, Funken, Blueten im Fruehling. */
.anlass-deko.auf span { bottom: -60px; --vz: -1; }
/* Von oben nach unten — Schnee, fallende Blaetter und Blueten. */
.anlass-deko.ab  span { top: -60px;    --vz:  1; }

@keyframes anlass-schweben {
      0% { transform: translate3d(0, 0, 0) rotate(0deg); opacity: 0; }
     12% { opacity: var(--deckung); }
     88% { opacity: var(--deckung); }
    100% { transform: translate3d(var(--drift), calc(var(--weg) * var(--vz)), 0) rotate(var(--dreh)); opacity: 0; }
}

/* Wer im Betriebssystem „Bewegung reduzieren" eingeschaltet hat, bekommt
   keine. Das ist keine Feinheit: Fuer Menschen mit Gleichgewichts- oder
   Migraeneempfindlichkeit sind dauernd wandernde Objekte im Blickfeld ein
   echtes Problem — und der Text darunter bleibt ohne sie vollstaendig lesbar. */
@media (prefers-reduced-motion: reduce) {
    .anlass-deko { display: none; }
    /* Die Gesichter erscheinen dann einfach, statt hereinzufliegen. */
    .hero-team-face { animation: none; }

    /* Bis zum 12.09.2026 endete der Block hier — und deckte damit zwei von
       neun Bewegungen ab. Die schwebenden Orbs im Hero, der rotierende
       Goldrand an Portrait und Kontaktformular, das Leuchten am Lotus und
       der Glanz im Menue liefen weiter. Wer „Bewegung reduzieren"
       einschaltet, tut das nicht aus Geschmack: dauernd wandernde Objekte im
       Blickfeld sind bei Migraene oder Gleichgewichtsstoerungen ein echtes
       Problem. Eine halbe Abschaltung nuetzt da nichts.

       Pauschal statt Stueck fuer Stueck: so faellt auch jede kuenftige
       Animation von selbst darunter. Eine vergessene Zeile waere sonst
       genau bei den Menschen sichtbar, die sie am wenigsten vertragen. */
    .hero-orb,
    .thai-intro-portrait-wrap::before,
    .contact-form-wrap::before,
    .quote-inner .qs-lotus,
    .ui.menu .gold-shimmer::after,
    .gallery-item img {
        animation: none !important;
    }

    /* Scroll-Animationen (AOS): Inhalte sind sofort da, statt einzuschweben.
       `aos-animate` setzt die Endwerte — hier werden sie unbedingt erzwungen,
       damit nichts unsichtbar haengenbleibt, falls das Skript gar nicht erst
       laeuft. */
    [data-aos] {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
    }

    /* Uebergaenge beim Zeigen bleiben erlaubt (ein Hover darf sich weich
       anfuehlen), aber nichts darf sich mehr von selbst bewegen. */
    .frei-heute-zeit,
    .rev-card,
    .rev-stars-avg {
        animation: none !important;
    }
}

/* ── Freie Zeiten im Hero ──────────────────────────────────────────────────
   Die einzige Angabe auf der Startseite, die aus dem laufenden Betrieb kommt.
   Deshalb zurueckhaltend gestaltet: Glas statt Farbe, damit sie nicht mit dem
   Buchen-Knopf konkurriert, sondern zu ihm hinfuehrt.

   `hidden` haelt den Block bis zur Antwort aus dem Bild — er soll nicht leer
   dastehen und dann hineinspringen. */
.frei-heute[hidden] { display: none; }

.frei-heute {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 22px;
    animation: freiIn .5s ease both;
}

.frei-heute-label {
    font-size: .92rem;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    letter-spacing: .2px;
}

.frei-heute-zeiten { display: flex; flex-wrap: wrap; gap: 8px; }

.frei-heute-zeit {
    display: inline-block;
    padding: 7px 16px;
    background: rgba(255, 255, 255, .14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 50px;
    color: #fff;
    font-size: .9rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    transition: background .2s, transform .15s, border-color .2s;
    animation: freiIn .45s ease both;
}

.frei-heute-zeit:hover,
.frei-heute-zeit:focus-visible {
    background: rgba(255, 255, 255, .3);
    border-color: rgba(255, 255, 255, .45);
    transform: translateY(-2px);
    color: #fff;
}

@keyframes freiIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

@media (max-width: 560px) {
    .frei-heute { gap: 8px; margin-top: 18px; }
    .frei-heute-label { width: 100%; }
}