/* Bangkok Thaimassage - eigene Ergaenzungen zum YOOtheme-Stil.
   Alles, was der Customizer abdeckt, gehoert NICHT hierher. */

/* --- Ueberschriften durchgehend in Anek Latin ---------------------------- */
/* h1-h3 und die Heading-Klassen setzt das Theme selbst. Hier kommen nur die
   Stellen dazu, die es auslaesst: h4-h6, Element- und Kartentitel, Logo. */
/* Das Theme setzt h4-h6 auf Montserrat in Grossbuchstaben. Ueberschriften
   sollen aber durchgehend in Anek Latin und in normaler Schreibweise stehen. */
h4, h5, h6, .uk-h4, .uk-h5, .uk-h6,
.el-title, .uk-card-title, .uk-logo, .uk-accordion-title {
    font-family: "Anek Latin", "Segoe UI", Roboto, sans-serif;
    text-transform: none;
    letter-spacing: 0;
}
h4, .uk-h4 { font-size: 1.4rem; line-height: 1.35; }
h5, .uk-h5 { font-size: 1.2rem; line-height: 1.35; }
h6, .uk-h6 { font-size: 1.05rem; line-height: 1.4; }

/* --- Sperrsatz fuer die kleine Zeile ueber den Ueberschriften ------------ */
.uk-letter-spacing {
    letter-spacing: 0.22em;
    font-size: 0.8rem;
    font-family: "Anek Latin", "Segoe UI", Roboto, sans-serif;
}

/* --- Rundes Siegel im Kopfbereich der Startseite ------------------------- */
.bk-kreis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 210px;
    height: 210px;
    border-radius: 50%;
    border: 1px solid rgba(216, 173, 85, 0.65);
    background: rgba(22, 11, 6, 0.35);
    backdrop-filter: blur(2px);
    color: #f7efe5;
    font-family: "Anek Latin", "Segoe UI", Roboto, sans-serif;
    font-size: 1.35rem;
    line-height: 1.45;
    text-align: center;
}
@media (max-width: 959px) { .bk-kreis { display: none; } }

/* --- Bewegung in den Kopfbereichen --------------------------------------- */
/* Das Hintergrundbild wandert beim Scrollen (uk-parallax, siehe Layout) und
   zoomt zusaetzlich ganz langsam - dadurch steht das Bild nie ganz still.
   uk-parallax veraendert die background-position, der Zoom die Skalierung;
   beides stoert sich nicht. */
@keyframes bk-atmen {
    from { transform: scale(1); }
    to   { transform: scale(1.09); }
}
.bk-bewegung .uk-background-cover {
    animation: bk-atmen 26s ease-in-out infinite alternate;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .bk-bewegung .uk-background-cover { animation: none; }
}

/* --- Bildausschnitt im Kopfbereich der Startseite ------------------------ */
/* Das Foto ist hochkant, der Abschnitt breit - "mittig" schneidet den Kopf ab,
   "oben" zeigt nur die Wand. 30 Prozent zeigt beide Gesichter. uk-parallax rechnet
   von diesem Startwert aus weiter, deshalb ohne !important. */
.bk-hero .uk-background-cover { background-position: 50% 30%; }

/* --- Kacheln: Rahmen im Goldverlauf wie bei den Preiskarten -------------- */
/* Der Rahmen ist die Karte selbst - das Bild sitzt in ihrer Polsterung, der
   Titel darunter auf dem Gold. Deshalb dort dunkle Schrift. */
.uk-card-overlay .el-image { border-radius: 2px; }
.uk-card-overlay {
    overflow: hidden;
    background-color: #d8ad55;
    background-image: linear-gradient(160deg, #e0c07c 0%, #c1913e 100%);
}
/* Die Rahmenstaerke ist die Polsterung der Karte (von Haus aus 20 Punkte).
   Oben und an den Seiten halb so breit, unten bleibt der Platz fuer den
   Massagenamen unveraendert. */
.uk-card-overlay.uk-card-body,
.uk-card-overlay.uk-card-small.uk-card-body { padding: 10px 10px 20px; }
.uk-card-overlay .el-title { position: relative; z-index: 1; color: #251305; }
/* Beim Zeigen bewegt sich nur das Bild in der Kachel - das Heranfahren macht
   YOOtheme selbst ueber image_transition. Die Kachel bleibt ruhig stehen.
   Fuer die Tastatur bleibt ein sichtbarer Rahmen, sonst waere nicht zu sehen,
   auf welcher Kachel man steht. */
a.uk-card-overlay:focus-visible { outline: 2px solid #251305; outline-offset: 2px; }

/* --- Preisliste: Dauer links, Preis rechts, feine Trennlinie ------------- */
/* Die Liste laeuft sonst ueber die ganze Spaltenbreite - dann steht der Preis
   weit weg von seiner Zeit. Auf den Massageseiten wird sie deshalb schmal
   gehalten und mittig gestellt; in den schmalen Preiskarten aendert die
   Obergrenze nichts. */
.bk-preisliste table {
    /* Zellen mit eigenen Rahmen statt zusammengefasster - nur so nehmen sie
       die runden Ecken der Aktionszeile an. Abstand bleibt bei null, die
       Tabelle sieht dadurch unveraendert aus. */
    border-collapse: separate;
    border-spacing: 0;
    margin-bottom: 0;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
}
.bk-preisliste table td {
    padding: .7rem 0;
    border-bottom: 1px solid rgba(216, 173, 85, 0.16);
    vertical-align: middle;
}
.bk-preisliste table tr:last-child td { border-bottom: 0; }
/* Preiskarte im Goldverlauf: dunkle Schrift, feine dunkle Trennlinien. */
.bk-goldkarte .el-title,
.bk-goldkarte h3, .bk-goldkarte h4, .bk-goldkarte .uk-panel { color: #251305; }
/* Der Massagename ist die Ueberschrift der Karte - kraeftiger und groesser. */
.bk-goldkarte h4 { font-size: 1.6rem; font-weight: 600; line-height: 1.25; }
.bk-goldkarte .uk-text-muted { color: rgba(37, 19, 5, 0.68) !important; }
.bk-goldkarte table td {
    border-bottom-color: rgba(37, 19, 5, 0.22);
    color: #251305;
}
.bk-goldkarte table td:last-child { color: #251305; font-weight: 600; }

.bk-preisliste table td:last-child {
    white-space: nowrap;
    width: 1%;
    padding-left: 1.5rem;
    color: #f7efe5;
}

/* --- Massageblock: halber Rahmen links und unten ------------------------- */
/* Ein Rahmen aus border-image endet stumpf. Deshalb liegt das goldene "L"
   als eigene Flaeche hinter dem Bild und wird beschnitten: die beiden Enden
   laufen im 45-Grad-Winkel spitz aus (die zweite und die vorletzte Ecke des
   Vielecks). Der Verlauf ist derselbe wie auf den Preiskarten. */
.bk-block-bild > div {
    position: relative;
    --bk-rahmen: 10px;
}
.bk-block-bild > div::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: calc(-1 * var(--bk-rahmen));
    bottom: calc(-1 * var(--bk-rahmen));
    background: linear-gradient(160deg, #e0c07c 0%, #c1913e 100%);
    clip-path: polygon(
        0 0,
        var(--bk-rahmen) var(--bk-rahmen),
        var(--bk-rahmen) calc(100% - var(--bk-rahmen)),
        calc(100% - var(--bk-rahmen)) calc(100% - var(--bk-rahmen)),
        100% 100%,
        0 100%);
}
.bk-block-bild picture { display: block; }
.bk-block-bild .el-image {
    display: block;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.45);
}
@media (max-width: 639px) {
    .bk-block-bild > div { --bk-rahmen: 6px; }
}

/* --- Signet als Wasserzeichen unter dem Text ----------------------------- */
/* Halb durchsichtig, damit es im Hintergrund bleibt und den Text nicht
   stoert. Auf schmalen Geraeten gibt es keinen freien Platz - dort weg. */
.bk-wasserzeichen { opacity: 0.15; pointer-events: none; }
.bk-wasserzeichen .el-image { max-width: 100%; height: auto; }
/* Das Wasserzeichen haengt am unteren Rand der Textspalte. Da die Spalten
   einer Reihe gleich hoch sind, schliesst es genau mit der Unterkante des
   Bildes daneben ab. Aus dem Textfluss ist es heraus - sonst wuerde es die
   Reihe hoeher machen und damit tiefer rutschen als das Bild. */
.bk-block-text { position: relative; }
.bk-block-text .bk-wasserzeichen {
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    /* Absolute Kinder messen ab der Innenkante der Polsterung - ohne diese
       Zeile stuende das Signet im Spaltenabstand und ragte nach links heraus. */
    padding-left: inherit;
    margin: 0;
}
@media (max-width: 959px) { .bk-wasserzeichen { display: none; } }

/* --- Abschnittsfarben ---------------------------------------------------- */
/* #251305 ist die dunkelste Flaeche der Seite. Tiefer geht es nur als
   Verlauf: bk-verlauf sinkt von diesem Grundton nach #150a02 ab. */
.bk-verlauf {
    background-image: linear-gradient(180deg, #251305 0%, #150a02 100%);
}

/* Helle Abschnitte im Goldton - Schrift dann im dunklen Grundton. Der
   Verlauf ist derselbe wie bei den Preiskarten, nur eine Spur ruhiger. */
.bk-gold {
    background-color: #c49644;
    background-image: linear-gradient(160deg, #d3a95a 0%, #b8883a 100%);
    color: #251305;
}
.bk-gold h1, .bk-gold h2, .bk-gold h3, .bk-gold h4, .bk-gold h5, .bk-gold h6,
.bk-gold .uk-h1, .bk-gold .uk-h2, .bk-gold .uk-h3, .bk-gold .uk-h4,
.bk-gold .el-title, .bk-gold p, .bk-gold li, .bk-gold strong,
.bk-gold .uk-text-lead, .bk-gold .uk-text-primary { color: #251305; }
/* Das Mutterthema setzt die gedaempfte Schrift mit !important - hier muss
   dieselbe Waffe her, sonst bleibt sie hell und verschwindet im Gold. */
.bk-gold .uk-text-muted,
.bk-gold svg .uk-text-muted { color: rgba(37, 19, 5, 0.75) !important; }
.bk-gold svg, .bk-gold .uk-icon { color: #251305; }
/* Haken und andere Symbole der Aufzaehlungen stehen sonst in Gold. */
.bk-gold .uk-list li, .bk-gold .el-content { color: #251305; }
.bk-gold .uk-text-primary { color: #251305; }
/* Ausgenommen die Pfeile in den Knoepfen: die stehen auf dunklem Grund und
   waeren sonst unsichtbar - der Knopf saehe dann unzentriert aus. */
.bk-gold .uk-button svg, .bk-gold .uk-button .uk-icon { color: inherit; }
/* Quer laufende Fassung: links deutlich heller, rechts deutlich tiefer -
   so ist der Verlauf ueber die volle Breite gut zu sehen. */
.bk-gold-quer {
    background-image: linear-gradient(90deg, #e8c176 0%, #a1712a 100%);
}

/* Die Diamanten aus dem Logo anstelle der Strichsymbole. */
.bk-diamant .el-image {
    width: auto;
    height: 51px;
    display: inline-block;
    filter: drop-shadow(0 4px 8px rgba(37, 19, 5, 0.28));
}

/* Der Hauptknopf ist selbst golden - auf Gold waere er unsichtbar. */
.bk-gold .uk-button-primary,
.bk-gold .uk-button-default {
    background-color: #251305;
    color: #f7efe5;
    border-color: transparent;
}
.bk-gold .uk-button-primary:hover,
.bk-gold .uk-button-default:hover { background-color: #3a2109; color: #fff; }

/* --- Festes Hintergrundbild, auch auf iOS ------------------------------- */
/* Safari auf iPhone und iPad ignoriert background-attachment: fixed. Statt
   dessen liegt hier eine im Blickfeld verankerte Ebene hinter dem Abschnitt.
   clip-path haelt sie in dessen Grenzen (overflow wuerde feste Elemente nicht
   beschneiden) und erzeugt dabei keinen eigenen Bezugsrahmen, die Ebene bleibt
   also am Blickfeld haengen. background-image: inherit uebernimmt genau das
   Bild, das UIkit erst nachtraeglich per uk-img einsetzt. */
.uk-background-fixed {
    position: relative;
    isolation: isolate;          /* haelt die Ebene ueber dem eigenen Grund */
    clip-path: inset(0);
    background-attachment: scroll;
}
.uk-background-fixed::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: inherit;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
/* Wer Bewegung im System abbestellt hat, bekommt ein ruhendes Bild. */
@media (prefers-reduced-motion: reduce) {
    .uk-background-fixed::before { position: absolute; }
}

/* --- Sprechblase in der Karte ------------------------------------------- */
/* Die Blase hat einen weissen Grund, die Schrift kam aber aus dem dunklen
   Abschnitt und war darauf kaum zu lesen. */
.leaflet-popup-content,
.leaflet-popup-content .el-title,
.leaflet-popup-content h4 { color: #251305; }
.leaflet-popup-content .el-meta,
.leaflet-popup-content .uk-text-meta {
    color: rgba(37, 19, 5, 0.75) !important;
    text-transform: none;
    letter-spacing: normal;
    font-size: 0.95rem;
}
.leaflet-popup-content-wrapper { border-radius: 6px; }

/* --- Aktionspreise ------------------------------------------------------- */
/* Die Aktionszeile steht direkt unter ihrer regulaeren Zeile. Der Preis
   darueber wird durchgestrichen - :has() greift auf die Zeile davor zu,
   dadurch braucht die Zeile selbst keine zweite Bedingung. */
/* Der Strich durch den alten Preis kommt nicht von text-decoration: Anek
   setzt die Linie tief, sie laege im unteren Drittel. Statt dessen liegt ein
   eigener Strich auf halber Hoehe - und der darf rot sein. */
.bk-preisliste tr:has(+ tr.bk-aktionszeile) .el-content {
    position: relative;
    display: inline-block;
    text-decoration: none;
    color: rgba(247, 239, 229, 0.55);
}
.bk-preisliste tr:has(+ tr.bk-aktionszeile) .el-content::after {
    content: "";
    position: absolute;
    left: -3px;
    right: -3px;
    top: 50%;
    border-top: 2px solid #d8402c;
}
/* Zwischen altem und neuem Preis keine Trennlinie - die beiden gehoeren
   zusammen. */
.bk-preisliste tr:has(+ tr.bk-aktionszeile) td { border-bottom: 0; }
.bk-goldkarte tr:has(+ tr.bk-aktionszeile) .el-content {
    color: rgba(37, 19, 5, 0.55);
}
/* Kraeftiges Orange aus dem Logo, dazu eine Spur groesser als die
   uebrigen Zeilen - der Aktionspreis soll als Erstes ins Auge fallen. */
.bk-preisliste tr.bk-aktionszeile .el-title,
.bk-preisliste tr.bk-aktionszeile .el-content {
    color: #ff8c3a;
    font-weight: 700;
}
.bk-preisliste tr.bk-aktionszeile .el-title { font-size: 1.05rem; }
.bk-preisliste tr.bk-aktionszeile .el-content { font-size: 1.3rem; }
/* Auf der goldenen Karte steht der Aktionspreis in Signalrot. Damit er den
   Anforderungen der WCAG genuegt, liegt die Pille auf einem warmen, hellen
   Grund: #d80000 auf #fff7ec ergibt 5,0:1 - ueber den geforderten 4,5:1 fuer
   normalen Text, erst recht fuer die fette Schrift hier. Auf dem Gold selbst
   waeren es nur 3,1:1 gewesen. */
.bk-goldkarte tr.bk-aktionszeile .el-title,
.bk-goldkarte tr.bk-aktionszeile .el-content { color: #d80000; }
.bk-goldkarte tr.bk-aktionszeile td {
    background: #fff7ec;
    border-top: 1px solid rgba(37, 19, 5, 0.45);
    border-bottom: 1px solid rgba(37, 19, 5, 0.45);
    padding-top: .55rem;
    padding-bottom: .55rem;
}
.bk-goldkarte tr.bk-aktionszeile td:first-child {
    border-left: 1px solid rgba(37, 19, 5, 0.45);
    border-radius: 999px 0 0 999px;
    padding-left: 14px;
}
.bk-goldkarte tr.bk-aktionszeile td:last-child {
    border-right: 1px solid rgba(37, 19, 5, 0.45);
    border-radius: 0 999px 999px 0;
    padding-right: 14px;
}
.bk-aktionsfussnote { color: rgba(224, 192, 124, 0.85); }
.bk-goldkarte .bk-aktionsfussnote { color: rgba(37, 19, 5, 0.75); }
/* Das Sternchen unter der Tabelle verweist auf die Aktionszeile. Wo es zu
   keiner Dauer einen Aktionspreis gibt - etwa bei der Ruecken-Intensiv-
   Massage - faellt diese Zeile weg, und die Fussnote verweist ins Leere.
   Dann bleibt sie verborgen. Auf der Preisuebersicht steht die Fussnote
   ausserhalb der Karten und ist davon nicht betroffen; dort gibt es immer
   mindestens eine Massage mit Aktionspreis. */
.bk-preisliste:not(:has(tr.bk-aktionszeile)) .bk-aktionsfussnote {
    display: none;
}

/* --- Telefonknopf auf der Terminseite ------------------------------------ */
/* Der Anruf ist hier die wichtigste Handlung - der Knopf darf deutlich
   groesser sein als die uebrigen. */
.bk-telefonknopf .uk-button {
    padding: 0 42px;
    height: 68px;
    line-height: 66px;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.04em;
}
.bk-telefonknopf .uk-button svg { width: 26px; height: 26px; }
@media (max-width: 639px) {
    .bk-telefonknopf .uk-button {
        padding: 0 26px;
        height: 60px;
        line-height: 58px;
        font-size: 1.15rem;
    }
}

/* --- Anklickbare Flaeche zum Routenplaner -------------------------------- */
.bk-routenpanel {
    /* inline-flex statt flex: die Flaeche ist nur so breit wie ihr Inhalt
       und laesst sich vom umgebenden Absatz mittig stellen. */
    display: inline-flex;
    max-width: 100%;
    text-align: left;
    align-items: center;
    gap: 18px;
    padding: 18px 24px;
    border-radius: 16px;
    border: 1px solid rgba(216, 173, 85, 0.35);
    background: rgba(224, 192, 124, 0.06);
    color: #f7efe5;
    text-decoration: none;
    transition: background-color .25s ease, border-color .25s ease,
                box-shadow .25s ease, transform .25s ease;
}
.bk-routenpanel:hover,
.bk-routenpanel:focus-visible {
    background: rgba(224, 192, 124, 0.16);
    border-color: rgba(224, 192, 124, 0.75);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
    transform: translateY(-2px);
    color: #f7efe5;
    text-decoration: none;
}
.bk-routenpanel-symbol { color: #e0c07c; flex: none; }
.bk-routenpanel-text { display: flex; flex-direction: column; flex: 1; }
.bk-routenpanel-text strong { font-size: 1.15rem; font-weight: 600; }
.bk-routenpanel-text span {
    font-size: .92rem;
    color: rgba(247, 239, 229, 0.7);
}
/* Der Pfeil rueckt beim Zeigen ein Stueck nach rechts. */
.bk-routenpanel-pfeil {
    color: #e0c07c;
    flex: none;
    transition: transform .25s ease;
}
.bk-routenpanel:hover .bk-routenpanel-pfeil { transform: translateX(5px); }
@media (max-width: 639px) {
    .bk-routenpanel { padding: 16px; gap: 12px; }
    .bk-routenpanel-text strong { font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
    .bk-routenpanel, .bk-routenpanel-pfeil { transition: none; }
    .bk-routenpanel:hover { transform: none; }
}

/* --- Buttons: vollstaendig abgerundet, halbkreisfoermige Enden ----------- */
.uk-button, .btn, button.uk-button, .uk-button-small, .uk-button-large {
    letter-spacing: 0.08em;
    border-radius: 999px;
    /* Keine Versalien - der normale Wortlaut bleibt stehen. */
    text-transform: none;
    /* Der Sperrsatz haengt hinter dem letzten Buchstaben als Luecke; ohne den
       Ausgleich stuende die Beschriftung sichtbar zu weit links. */
    text-indent: 0.08em;
}
.uk-search-input, .uk-form-controls .uk-input { border-radius: 999px; }

/* Auf hellem Text (Bildhintergrund) faerbt UIkit den Hauptbutton weiss.
   Die Vorlage zeigt ihn dort golden - der Customizer waere dafuer noetig,
   ist aber nur im Browser erreichbar. */
.uk-light .uk-button-primary,
.uk-section-secondary .uk-button-primary,
.uk-section-primary .uk-button-default {
    background-color: #d8ad55;
    color: #160b06;
    border-color: #d8ad55;
}
.uk-light .uk-button-primary:hover,
.uk-section-secondary .uk-button-primary:hover,
.uk-section-primary .uk-button-default:hover {
    background-color: #f0cd7a;
    color: #160b06;
}

/* --- "Termin buchen" in der Navigation als Knopf ------------------------- */
/* Der wichtigste Weg durch die Seite soll auch oben so aussehen wie unten in
   den Massageblocken: goldene Pille, dunkle Schrift, normale Schreibweise.
   Die Klasse item-1007 vergibt Joomla selbst anhand der Menuepunkt-Nummer;
   item-2007 ist der englische Zwilling "Book Appointment".
   Nur die Navigationsleiste ist gemeint - im mobilen Menue bleibt der Punkt
   eine Zeile wie die anderen. */
.uk-navbar-nav > li.item-1007,
.uk-navbar-nav > li.item-2007 {
    display: flex;
    align-items: center;
    margin-left: 14px;
}
.uk-navbar-nav > li.item-1007 > a,
.uk-navbar-nav > li.item-2007 > a {
    min-height: 0;
    height: 44px;
    padding: 0 26px;
    border-radius: 999px;
    background-color: #d8ad55;
    color: #251305;
    font-weight: 600;
    /* Die Leiste laeuft in Versalien - der Knopf bewusst nicht. */
    text-transform: none;
    letter-spacing: 0.04em;
    transition: background-color .2s ease, color .2s ease;
}
.uk-navbar-nav > li.item-1007 > a:hover,
.uk-navbar-nav > li.item-2007 > a:hover,
.uk-navbar-nav > li.item-1007 > a:focus,
.uk-navbar-nav > li.item-2007 > a:focus,
.uk-navbar-nav > li.item-1007.uk-active > a,
.uk-navbar-nav > li.item-2007.uk-active > a {
    background-color: #f0cd7a;
    color: #251305;
}
.uk-navbar-nav > li.item-1007 > a:focus-visible,
.uk-navbar-nav > li.item-2007 > a:focus-visible {
    outline: 2px solid #f7efe5;
    outline-offset: 2px;
}
/* Auf schmaleren Schirmen etwas knapper, damit die Leiste nicht umbricht. */
@media (max-width: 1199px) {
    .uk-navbar-nav > li.item-1007 > a,
    .uk-navbar-nav > li.item-2007 > a { padding: 0 18px; height: 40px; }
}

/* --- Sprachumschalter: Flaggen wie auf joombook.com ---------------------- */
/* Joomlas Sprachmodul (mod_languages) mit den mitgelieferten Flaggen. In der
   Leiste steht nur die jeweils andere Sprache (Modul 122), im mobilen Menue
   beide (Modul 123). Die Flaggen sind kleine GIFs (16x11) - deshalb nur
   massvoll vergroessert, sonst werden sie unscharf. */
.bk-sprachen .uk-subnav { margin: 0; gap: 0; }
.bk-sprachen .uk-subnav > * { padding-left: 0; }
.bk-sprachen a { display: inline-flex; align-items: center; padding: 6px; }
.bk-sprachen img {
    width: 24px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(247, 239, 229, 0.25);
    opacity: .85;
    transition: opacity .2s ease, transform .2s ease;
}
.bk-sprachen a:hover img,
.bk-sprachen .uk-active img { opacity: 1; transform: scale(1.08); }
.uk-navbar-item.bk-sprachen { padding: 0 8px; }
/* Im mobilen Menue etwas Abstand zu den Menuepunkten. */
.uk-offcanvas-bar .bk-sprachen { margin-top: 20px; }

/* --- Aktionsfenster und Aktionskasten ----------------------------------- */
/* Beide zeigen dasselbe: das Fenster beim Seitenaufruf (Erweiterung "more
   Modal") und der Kasten auf Start- und Preisseite. Damit sie sich nicht
   auseinanderentwickeln, gelten fuer beide dieselben Regeln.

   UIkit haengt ein Modal beim Oeffnen an das Ende der Seite - ueber die
   umgebende Sektion ist es also nicht erreichbar. Seine Kennung vergibt die
   Erweiterung auf jeder Seite neu (modal-0, modal-2, modal-10 ...), deshalb
   der gemeinsame Anfang der Kennung. Die Klasse bk-aktionsmodal wirkt
   zusaetzlich, falls die Erweiterung ihre Benennung einmal aendert. */
.bk-aktionsmodal .uk-modal-dialog,
[id^="modal-"] .uk-modal-dialog {
    max-width: 540px;
    border-radius: 20px;
    background-color: #d8ad55;
    background-image: linear-gradient(160deg, #e0c07c 0%, #c1913e 100%);
    color: #251305;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}
.bk-aktionsmodal .uk-modal-body,
[id^="modal-"] .uk-modal-body { padding: 42px 36px 38px; }
.bk-aktionskasten { max-width: 540px; margin-left: auto; margin-right: auto; }
/* Flaeche und Ecken sitzen eine Ebene tiefer - YOOtheme legt den Verlauf
   auf eine eigene Kachel innerhalb der Spalte. */
.bk-aktionskasten > .uk-tile {
    border-radius: 20px;
    padding: 42px 36px 38px;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55);
}

/* Das Kreuz zum Schliessen stand hell auf hellem Grund. */
.bk-aktionsmodal .uk-modal-close-default,
[id^="modal-"] .uk-modal-close-default { color: #251305; top: 14px; right: 14px; }
.bk-aktionsmodal .uk-modal-close-default:hover,
[id^="modal-"] .uk-modal-close-default:hover { color: #000; }

/* Ueberschrift, Trennlinie, Vorspann, Schlusszeile */
.bk-aktionsmodal .uk-heading-medium,
[id^="modal-"] .uk-heading-medium,
.bk-aktionskasten .uk-heading-medium {
    color: #251305;
    font-size: 2.2rem;
    line-height: 1.15;
    margin-bottom: 0;
}
.bk-aktionsmodal .uk-heading-divider,
[id^="modal-"] .uk-heading-divider,
.bk-aktionskasten .uk-heading-divider {
    border-bottom: 1px solid rgba(37, 19, 5, 0.35);
    padding-bottom: 0.5rem;
}
.bk-aktionsmodal .uk-text-lead,
[id^="modal-"] .uk-text-lead,
.bk-aktionskasten .uk-text-lead {
    color: rgba(37, 19, 5, 0.88);
    font-size: 1.1rem;
    line-height: 1.4;
}
.bk-aktionsmodal .uk-h2,
[id^="modal-"] .uk-h2,
.bk-aktionskasten .uk-h2 {
    color: #251305;
    font-size: 1.35rem;
    margin-bottom: 0;
}

/* Der Preis auf heller Pille - dieselbe Kombination wie in der Preistabelle:
   #d80000 auf #fff7ec ergibt 5,0:1 und erfuellt damit die WCAG-Vorgabe. */
.bk-aktionsmodal .uk-heading-xlarge,
[id^="modal-"] .uk-heading-xlarge,
.bk-aktionskasten .uk-heading-xlarge {
    width: fit-content;
    margin: 0.2rem auto 0.9rem;
    padding: 0.1em 0.45em;
    border-radius: 999px;
    background: #fff7ec;
    color: #d80000 !important;
    font-size: 3.6rem;
    line-height: 1.2;
    font-weight: 700;
}

/* Die Erweiterung stellt zusaetzlich einen Knopf "Open" in den Footer. Das
   Fenster oeffnet sich von selbst, der Knopf hat dort nichts zu suchen -
   und die Sektion darum soll den Footer nicht verlaengern: Sie ist leer,
   traegt aber die volle Polsterung eines Abschnitts.
   Angesprochen werden beide Schreibweisen - die Klasse der Erweiterung und
   die, die im Builder von Hand vergeben wurde. */
.moremodal.uk-section,
.bk-aktionsmodal.uk-section {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.moremodal > .uk-container > .uk-grid,
.bk-aktionsmodal > .uk-container > .uk-grid { margin-top: 0; }
.moremodal [uk-toggle].uk-button,
.bk-aktionsmodal [uk-toggle].uk-button { display: none; }
/* Der leere Rest der Sektion nimmt sonst noch die Hoehe des Knopfes ein. */
.moremodal > .uk-container > .uk-grid > * > .uk-text-left:empty,
.bk-aktionsmodal > .uk-container > .uk-grid > * > .uk-text-left { line-height: 0; }

@media (max-width: 639px) {
    .bk-aktionsmodal .uk-modal-body,
    [id^="modal-"] .uk-modal-body,
    .bk-aktionskasten > .uk-tile { padding: 30px 22px 26px; }
    .bk-aktionsmodal .uk-heading-medium,
    [id^="modal-"] .uk-heading-medium,
    .bk-aktionskasten .uk-heading-medium { font-size: 1.65rem; }
    .bk-aktionsmodal .uk-text-lead,
    [id^="modal-"] .uk-text-lead,
    .bk-aktionskasten .uk-text-lead { font-size: 1rem; }
    .bk-aktionsmodal .uk-heading-xlarge,
    [id^="modal-"] .uk-heading-xlarge,
    .bk-aktionskasten .uk-heading-xlarge { font-size: 2.6rem; }
    .bk-aktionsmodal .uk-h2,
    [id^="modal-"] .uk-h2,
    .bk-aktionskasten .uk-h2 { font-size: 1.15rem; }
}

/* --- Zweitrangiger Knopf: als Knopf erkennbar --------------------------- */
/* Ohne Flaeche und ohne Umriss sah "Mehr ueber uns" wie ein Stueck Text aus.
   Ein feiner goldener Rand genuegt - der Hauptknopf bleibt der gefuellte. */
.uk-button-default {
    border: 1px solid rgba(216, 173, 85, 0.55);
    transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
.uk-button-default:hover,
.uk-button-default:focus {
    border-color: #f0cd7a;
    background-color: rgba(216, 173, 85, 0.12);
}
/* In den goldenen Bereichen ist der Knopf gefuellt und dunkel - dort wuerde
   ein goldener Rand darauf verschwinden. */
.bk-gold .uk-button-default { border-color: transparent; }
.bk-gold .uk-button-default:hover { border-color: transparent; }

/* --- Galerie: Beschriftung als weicher Streifen am unteren Rand ---------- */
/* Ein Kasten ueber dem ganzen Bild verdeckt beim Zeigen genau das, was man
   sehen will. Statt dessen laeuft ein Verlauf vom unteren Rand aus etwa ein
   Drittel hoch und traegt dort die Bildunterschrift. */
.bk-galerie .uk-overlay {
    display: flex;
    align-items: flex-end;
    min-height: 33%;
    background: linear-gradient(0deg, rgba(37, 19, 5, 0.92) 0%,
                                rgba(37, 19, 5, 0.55) 62%,
                                rgba(37, 19, 5, 0) 100%);
}
.bk-galerie .el-title {
    margin: 0;
    color: #f7efe5;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* --- Bilderschau im Willkommensblock ------------------------------------ */
/* Dieselben runden Ecken wie beim Einzelbild vorher; die Punkte darunter
   sitzen auf dem Bild und brauchen deshalb einen leichten Schatten. */
.bk-bilderschau .uk-slideshow-items { border-radius: 6px; overflow: hidden; }
.bk-bilderschau .uk-dotnav > * > * {
    border-color: rgba(247, 239, 229, 0.8);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.bk-bilderschau .uk-dotnav > .uk-active > * {
    background-color: #e0c07c;
    border-color: #e0c07c;
}

/* --- Mobiles Menue: gut lesbar statt Kapitaelchen ------------------------ */
/* Die Grossschreibung und die gedaempfte Farbe kommen aus dem Customizer,
   der nur im Browser kompiliert - deshalb hier. */
#tm-dialog-mobile .uk-nav > li > a,
#tm-dialog .uk-nav > li > a {
    text-transform: none;
    letter-spacing: 0;
    font-family: "Anek Latin", "Segoe UI", Roboto, sans-serif;
    font-size: 1.35rem;
    font-weight: 600;
    line-height: 1.3;
    color: #f7efe5;
    padding-top: .55rem;
    padding-bottom: .55rem;
}
#tm-dialog-mobile .uk-nav-sub a,
#tm-dialog .uk-nav-sub a {
    text-transform: none;
    letter-spacing: 0;
    font-size: 1.05rem;
    font-weight: 400;
    line-height: 1.35;
    color: #e4d8ca;
    padding-top: .35rem;
    padding-bottom: .35rem;
}
#tm-dialog-mobile .uk-nav > li.uk-active > a,
#tm-dialog-mobile .uk-nav-sub li.uk-active > a { color: #d8ad55; }
#tm-dialog-mobile .uk-nav > li > a:hover,
#tm-dialog-mobile .uk-nav-sub a:hover { color: #f0cd7a; }
#tm-dialog-mobile .uk-offcanvas-bar { padding-top: 3.5rem; }

/* --- Lange Woerter umbrechen statt ueber den Rand schieben --------------- */
h1, h2, h3, h4, h5, h6,
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-h5, .uk-h6,
.uk-heading-small, .uk-heading-medium, .uk-heading-large,
.el-title, .uk-panel, .uk-card-title {
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
}
html, body { overflow-x: hidden; }

/* Auf schmalen Geraeten braucht der Inhalt etwas mehr Luft zum Rand. */
@media (max-width: 639px) {
    .uk-container { padding-left: 24px; padding-right: 24px; }
}

/* Auf kleinen Bildschirmen duerfen die grossen Ueberschriften nicht so
   gross bleiben - sonst passt ein Wort wie "Fussreflexzonenmassage" nicht. */
@media (max-width: 639px) {
    .uk-heading-large { font-size: 2.1rem; line-height: 1.15; }
    .uk-heading-medium { font-size: 1.85rem; line-height: 1.2; }
    .uk-heading-small { font-size: 1.65rem; line-height: 1.2; }
    h1, .uk-h1 { font-size: 1.75rem; line-height: 1.2; }
    h2, .uk-h2 { font-size: 1.55rem; line-height: 1.25; }
    .uk-text-lead { font-size: 1.05rem; }
}

/* --- Kopfbereich der Startseite auf kleinen Schirmen --------------------- */
/* Das Logo ist fuer das Hochformat viel zu gross und legt sich mitten auf die
   Szene. Auf Tablet und Telefon steht es deshalb halb so gross am oberen
   linken Rand - dort ist das Bild ohnehin abgedunkelt, und von der Massage
   bleibt deutlich mehr zu sehen. */
@media (max-width: 1199px) {
    .bk-hero-logo .el-image { max-width: 170px; }
}
@media (max-width: 959px) {
    .bk-hero-logo .el-image { max-width: 150px; }
    .bk-hero-logo .uk-text-center { text-align: left !important; }
    /* Der Inhalt sitzt sonst mittig im Bild - also genau auf dem Gesicht.
       uk-flex-middle liegt eine Ebene tiefer als die Klasse bk-hero. */
    .bk-hero .uk-flex-middle { align-items: flex-start; }
    .bk-hero .uk-flex-middle > .uk-container { padding-top: 40px; }
}

/* Ueberschriften, in denen kein Wort getrennt werden darf. */
.bk-ohne-trennung, .bk-ohne-trennung .uk-heading-medium,
.bk-ohne-trennung h1, .bk-ohne-trennung h2 { hyphens: manual; }

/* --- Massageblock: Bild steht im Quelltext immer zuerst ------------------ */
/* Auf schmalen Geraeten ergibt das ueberall denselben Ablauf: Ueberschrift,
   Anriss, Bild, Text, Knopf. Erst ab der mittleren Breite wandert das Bild
   bei jedem zweiten Block nach rechts - dafuer werden die Spalten getauscht. */
@media (min-width: 960px) {
    .bk-block-gedreht > div:first-child { order: 2; }
    .bk-block-gedreht > div:last-child { order: 1; }
}
/* Auf dem Tablet ist genug Platz fuer Bild und Text nebeneinander. Zwei
   Massagen nebeneinander waeren dagegen zu eng - jede braucht Ueberschrift,
   Beschreibung, Eckdaten und Knopf. */
@media (min-width: 768px) and (max-width: 959px) {
    .bk-block-reihe > div { width: 50%; }
    .bk-block-reihe > div > .uk-panel > .el-content { font-size: .95rem; }
}

/* Kontakt: auf dem Tablet stehen die drei Angaben nebeneinander statt
   untereinander - sonst bleibt die rechte Haelfte der Seite leer. */
@media (min-width: 768px) and (max-width: 959px) {
    .bk-kontaktraster > div { width: 33.333%; }
}

/* --- Footer auf dem Tablet: zwei Spalten statt einer Schlange ------------ */
/* Oben Marke und Adresse, darunter Oeffnungszeiten und Kontakt. Auf dem
   Schreibtisch bleibt die gewohnte Reihenfolge der vier Spalten. */
@media (min-width: 640px) and (max-width: 959px) {
    .bk-footer-raster > div:nth-child(2) { order: 3; }
    .bk-footer-raster > div:nth-child(3) { order: 4; }
    .bk-footer-raster > div:nth-child(4) { order: 2; }
}

/* --- Gedaempfter Text auf dunklem Grund: lesbar halten -------------------- */
/* Das Theme setzt uk-text-muted im dunklen Abschnitt auf weiss mit 40 %
   Deckung - auf #251305 sind das nur 3,8:1, WCAG AA verlangt fuer kleinen
   Text 4,5:1. Mit 60 % Deckung bleibt der Text zurueckgenommen und kommt
   auf 7,0:1. Betrifft die Copyright-Zeile und alle Muted-Texte im Footer. */
.uk-section-secondary:not(.uk-preserve-color) .uk-text-muted {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Kopfzeile: dezente Linie unter der Navigation */
.tm-header { border-bottom: 1px solid rgba(216, 173, 85, 0.18); }

/* --- Haeufige Fragen auf den Massageseiten ------------------------------- */
/* Fragen als eigene Zeile mit Luft davor, Antwort direkt darunter. Das Feld
   massage_faq liefert h3/p im Wechsel. */
.bk-faq .uk-panel > h3 {
    font-size: 1.05rem;
    margin-top: 1.75rem;
    margin-bottom: 0.35rem;
}
.bk-faq .uk-panel > h3:first-child { margin-top: 0; }
.bk-faq .uk-panel > .bk-faq-titel {
    text-align: center;
    margin-top: 0;
    margin-bottom: 2.5rem;
}
.bk-faq .uk-panel > .bk-faq-titel + h3 { margin-top: 0; }
.bk-faq .uk-panel > p { margin-top: 0; }

/* --- Kacheln "Unsere Massagen": zweite Zeile lesbar halten --------------- */
/* Das Theme gibt uk-text-meta hell, klein und gesperrt aus. Auf dem goldenen
   Kartenhintergrund ist das nicht lesbar. Die Zeile nimmt deshalb die
   Textfarbe der Karte und die normale Schreibweise. */
#tm-main .uk-card-overlay .el-meta.uk-text-meta {
    position: relative;
    z-index: 1;
    color: rgba(37, 19, 5, 0.85);
    font-size: 0.9375rem;
    line-height: 1.45;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 0.35rem;
    /* Platz fuer zwei Zeilen freihalten, damit die Kacheln gleich wirken */
    min-height: calc(2 * 1.45 * 0.9375rem);
}

/* Der Name der Massage traegt die Kachel - deutlicher als das Theme-h5.
   Nur im Seiteninhalt: Im Megamenue sind die Kacheln schmaler, dort wuerde die
   groessere halbfette Schrift zu viele Umbrueche erzeugen. */
#tm-main .uk-card-overlay .el-title {
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.25;
}

/* Bild mit festem Seitenverhaeltnis statt mitwachsend.
   Vorher teilten sich Bild und Text die Kachelhoehe (uk-flex-1): Wo die
   Zusatzzeile umbrach, wurde das Bild kleiner - die Kacheln sahen
   unterschiedlich aus. Jetzt bleibt das Bild bei 5:4, unabhaengig vom Text. */
#tm-main .uk-card-overlay .uk-inline-clip { flex: none; }
#tm-main .uk-card-overlay .el-image {
    flex: none;
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
}