/* =========================================================
   custom.css – Thai-Massage Monthatong (lampertheim.biz)
   Template: Mednic / Helix Ultimate + SP Page Builder 6
   Pfad: /templates/mednic/css/custom.css

   Inhalt
   0) Schrift Plus Jakarta Sans (lokal, ohne Google)
   1) Buttons: keine automatische Großschreibung
   2) KI-Kennzeichnung (EU AI Act, Art. 50)
      2a) Startseiten-Slider
      2b) Seitentitel der Unterseiten
      2c) Deko-Rahmen geben ::before frei
      2d) Bild-Addon mit Klasse ki-label / ki-bearbeitet / ki-wasserzeichen
      2e) Leistungs-Karten
      2f) Lightbox
      2g) Team-Seite (Menüpunkt 359)
      2h) Section/Zeile mit Klasse ki-label / ki-bearbeitet
      2i) Badge für eigenes HTML
      2j) Blog-Beiträge (Joomla-Artikel)
      2k) Blog-Teaser im Page Builder (Artikel-Addon)
   3) Cookie-Banner auf dem Handy
   ========================================================= */


/* ---------------------------------------------------------
   0) Schrift Plus Jakarta Sans – lokal vom eigenen Server
   Die Datei liegt bereits im Font Book des Page Builders.
   Es ist eine variable Schrift: eine Datei (27 KB) enthält
   alle Stärken von 200 bis 800. Der "latin"-Teil reicht für
   Deutsch inkl. ä ö ü ß €.
   Wichtig: In Helix (Template Options → Typography) bei Body
   und Heading 1 die Schrift auf Arial stellen und bei
   H2–H4 das Häkchen entfernen, sonst lädt Helix weiter
   Google Fonts (blockiert die CSP ohnehin).
   !important ist nötig, weil Helix seine Schriftangaben
   nach der custom.css in die Seite schreibt.
   --------------------------------------------------------- */
/* @font-face steht als <style> in Helix → Custom Code → Before </head>,
   weil die Helix-CSS-Komprimierung den Pfad hier verbiegt.
   Hier nur die Zuweisung der Schrift. */
body,
h1, h2, h3, h4, h5, h6,
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span,
.sp-megamenu-parent .sp-dropdown li.sp-menu-item > a,
.menu.nav-pills > li > a,
.offcanvas-menu,
.sppb-btn,
.btn,
input, select, textarea, button {
    font-family: 'Plus Jakarta Sans', Arial, sans-serif !important;
}


/* ---------------------------------------------------------
   1) Buttons: keine automatische Großschreibung
   Das Template-CSS setzt text-transform: capitalize auf alle
   Buttons. Dadurch wird aus "Online buchen" automatisch
   "Online Buchen". Hier wird das abgeschaltet, damit der
   Text so erscheint, wie er im Button-Feld steht.
   --------------------------------------------------------- */
body .sppb-btn,
body .btn,
body .sppb-sp-slider-button {
    text-transform: none !important;
}


/* =========================================================
   2) KI-Kennzeichnung (EU AI Act, Art. 50)
   Einheitlich: kleines Label "KI generiert" bzw.
   "KI bearbeitet" unten links im Bild.

   Klassen für Bild-Addons und Sections:
   ki-label          → "KI generiert"
   ki-bearbeitet     → "KI bearbeitet"
   ki-wasserzeichen  → weißes PNG-Wasserzeichen oben rechts
   Die Klasse muss auch auf der Handy-Kopie eines Bildes stehen.
   ========================================================= */
/* ---------------------------------------------------------
   2g) Dynamic-Content-Bilder (z. B. Team-Übersicht)
   Klasse ki-bearbeitet oder ki-label am Bild eintragen.
   Unabhängig von der Menü-ID.
   --------------------------------------------------------- */
.sppb-dynamic-content-image-wrapper.ki-bearbeitet,
.sppb-dynamic-content-image-wrapper.ki-label {
    position: relative !important;
}

.sppb-dynamic-content-image-wrapper.ki-bearbeitet::before,
.sppb-dynamic-content-image-wrapper.ki-label::before {
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    right: auto !important;
    z-index: 30 !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.72) !important;
    border-radius: 3px !important;
    pointer-events: none !important;
}

.sppb-dynamic-content-image-wrapper.ki-bearbeitet::before {
    content: "KI bearbeitet" !important;
}

.sppb-dynamic-content-image-wrapper.ki-label::before {
    content: "KI generiert" !important;
}

/* Lightbox auf der Team-Seite (Menüpunkt 364) */
.itemid-364 .mfp-figure::before {
    content: "KI bearbeitet";
}

@media (max-width: 767px) {
    .sppb-dynamic-content-image-wrapper.ki-bearbeitet::before,
    .sppb-dynamic-content-image-wrapper.ki-label::before {
        left: 6px !important;
        bottom: 6px !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
    }
}
/* ---------------------------------------------------------
   2a) Startseiten-Slider
   ::after = Wasserzeichen oben rechts
   ::before = Label "KI generiert" unten links
   --------------------------------------------------------- */
.hero-slider .sp-item::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 25px !important;
    right: 0 !important;
    bottom: auto !important;
    left: auto !important;
    width: 900px !important;
    height: 300px !important;
    background-image: url("../../../images/wasserzeichen_weiss.png") !important;
    background-repeat: no-repeat !important;
    background-position: right center !important;
    background-size: contain !important;
    opacity: 0.75 !important;
    z-index: 999999 !important;
    pointer-events: none !important;
}

.hero-slider .sp-item::before {
    content: "KI generiert" !important;
    display: block !important;
    position: absolute !important;
    left: 16px !important;
    bottom: 24px !important;
    top: auto !important;
    right: auto !important;
    z-index: 1000000 !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.72) !important;
    border-radius: 3px !important;
    pointer-events: none !important;
}

/* ---------------------------------------------------------
   2b) Seitentitel der Unterseiten (Helix-Seitentitel mit Bild)
   ::before = Label unten links, ::after = Wasserzeichen oben rechts
   --------------------------------------------------------- */
.sp-page-title {
    position: relative;
}

.sp-page-title::before {
    content: "KI generiert";
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 20;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    color: #fff;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 3px;
    pointer-events: none;
}

.sp-page-title::after {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 20;
    width: 38%;
    max-width: 320px;
    height: 42%;
    background-image: url("../../../images/wasserzeichen_weiss.png");
    background-repeat: no-repeat;
    background-position: right top;
    background-size: contain;
    opacity: 0.75;
    pointer-events: none;
}

/* ---------------------------------------------------------
   2c) Deko-Rahmen des Templates belegen ::before.
   Damit dort kein falsches Label erscheint, werden sie
   ausgeblendet.
   --------------------------------------------------------- */
.border-test-left::before,
.border-center::before,
.border-top::before {
    display: none !important;
    content: none !important;
}

/* ---------------------------------------------------------
   2d) Bild-Addon mit Klasse (im Addon unter Erweitert →
   CSS-Klasse eintragen)
   --------------------------------------------------------- */
.sppb-addon-single-image.ki-label .sppb-addon-single-image-container,
.sppb-addon-wrapper.ki-label .sppb-addon-single-image .sppb-addon-single-image-container,
.sppb-addon-single-image.ki-bearbeitet .sppb-addon-single-image-container,
.sppb-addon-wrapper.ki-bearbeitet .sppb-addon-single-image .sppb-addon-single-image-container,
.sppb-addon-single-image.ki-wasserzeichen .sppb-addon-single-image-container,
.sppb-addon-wrapper.ki-wasserzeichen .sppb-addon-single-image .sppb-addon-single-image-container {
    position: relative;
}

/* Gemeinsames Aussehen der Text-Labels */
.sppb-addon-single-image.ki-label .sppb-addon-single-image-container::after,
.sppb-addon-wrapper.ki-label .sppb-addon-single-image .sppb-addon-single-image-container::after,
.sppb-addon-single-image.ki-bearbeitet .sppb-addon-single-image-container::after,
.sppb-addon-wrapper.ki-bearbeitet .sppb-addon-single-image .sppb-addon-single-image-container::after {
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: 40 !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    background-image: none !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

/* Text je nach Klasse */
.sppb-addon-single-image.ki-label .sppb-addon-single-image-container::after,
.sppb-addon-wrapper.ki-label .sppb-addon-single-image .sppb-addon-single-image-container::after {
    content: "KI generiert" !important;
}

.sppb-addon-single-image.ki-bearbeitet .sppb-addon-single-image-container::after,
.sppb-addon-wrapper.ki-bearbeitet .sppb-addon-single-image .sppb-addon-single-image-container::after {
    content: "KI bearbeitet" !important;
}

/* Wasserzeichen statt Text-Label */
.sppb-addon-single-image.ki-wasserzeichen .sppb-addon-single-image-container::after,
.sppb-addon-wrapper.ki-wasserzeichen .sppb-addon-single-image .sppb-addon-single-image-container::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    width: 42% !important;
    max-width: 280px !important;
    height: 28% !important;
    z-index: 30 !important;
    padding: 0 !important;
    background-color: transparent !important;
    background-image: url("../../../images/wasserzeichen_weiss.png") !important;
    background-repeat: no-repeat !important;
    background-position: right top !important;
    background-size: contain !important;
    opacity: 0.75 !important;
    pointer-events: none !important;
}

/* Handy: Label etwas kleiner, bleibt unten links
   (vorher stand hier top: 6px – dadurch rutschte das Label
   auf dem Handy nach oben links) */
@media (max-width: 767px) {
    .sppb-addon-single-image.ki-label .sppb-addon-single-image-container::after,
    .sppb-addon-wrapper.ki-label .sppb-addon-single-image .sppb-addon-single-image-container::after,
    .sppb-addon-single-image.ki-bearbeitet .sppb-addon-single-image-container::after,
    .sppb-addon-wrapper.ki-bearbeitet .sppb-addon-single-image .sppb-addon-single-image-container::after {
        left: 6px !important;
        bottom: 6px !important;
        top: auto !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
    }
}

/* ---------------------------------------------------------
   2e) Leistungs-Karten (Dynamic Content, .services-list)
   Das Template nutzt ::after für den Hover-Verlauf,
   daher sitzt das Label auf ::before.
   --------------------------------------------------------- */
.services-list .sppb-dynamic-content-collection__item .service-img {
    position: relative;
}

.services-list .sppb-dynamic-content-collection__item .service-img::before {
    content: "KI generiert";
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 30;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.2;
    color: #fff;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 3px;
    pointer-events: none;
}

/* ---------------------------------------------------------
   2f) Lightbox (Magnific Popup)
   ::after ist der Schatten, daher Label auf ::before.
   --------------------------------------------------------- */
.mfp-figure {
    position: relative;
}

.mfp-figure::before {
    content: "ki-bearbeitet";
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 20;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    color: #fff;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 3px;
    pointer-events: none;
}

/* ---------------------------------------------------------
   2g) Team-Seite (Menüpunkt 359): Fotos sind KI-bearbeitet
   --------------------------------------------------------- */
.itemid-359 .sppb-dynamic-content-image-wrapper {
    position: relative;
}

.itemid-359 .sppb-dynamic-content-image-wrapper::before {
    content: "KI bearbeitet";
    position: absolute;
    left: 8px;
    bottom: 8px;
    z-index: 30;
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.2;
    color: #fff;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 3px;
    pointer-events: none;
}

.itemid-359 .mfp-figure::before {
    content: "KI bearbeitet";
}

/* ---------------------------------------------------------
   2h) Section oder Zeile mit KI-Hintergrundbild
   Klasse ki-label oder ki-bearbeitet an der Section/Zeile
   eintragen.
   --------------------------------------------------------- */
section.ki-label,
.sppb-section.ki-label,
.sppb-row.ki-label,
.sppb-row-container.ki-label,
section.ki-bearbeitet,
.sppb-section.ki-bearbeitet,
.sppb-row.ki-bearbeitet,
.sppb-row-container.ki-bearbeitet {
    position: relative !important;
}

section.ki-label::after,
.sppb-section.ki-label::after,
.sppb-row.ki-label::after,
.sppb-row-container.ki-label::after,
section.ki-bearbeitet::after,
.sppb-section.ki-bearbeitet::after,
.sppb-row.ki-bearbeitet::after,
.sppb-row-container.ki-bearbeitet::after {
    display: block !important;
    position: absolute !important;
    left: 16px !important;
    bottom: 16px !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: 1000001 !important;
    padding: 4px 10px !important;
    font-size: 12px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background: rgba(0, 0, 0, 0.72) !important;
    background-image: none !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    pointer-events: none !important;
}

section.ki-label::after,
.sppb-section.ki-label::after,
.sppb-row.ki-label::after,
.sppb-row-container.ki-label::after {
    content: "KI generiert" !important;
}

section.ki-bearbeitet::after,
.sppb-section.ki-bearbeitet::after,
.sppb-row.ki-bearbeitet::after,
.sppb-row-container.ki-bearbeitet::after {
    content: "KI bearbeitet" !important;
}

/* ---------------------------------------------------------
   2i) Badge für eigenes HTML
   Beispiel: <span class="ki-badge">KI bearbeitet</span>
   --------------------------------------------------------- */
.ki-badge {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 10px;
    font-size: 12px;
    line-height: 1.2;
    color: #fff;
    background: rgba(0, 0, 0, 0.72);
    border-radius: 3px;
}

/* ---------------------------------------------------------
   2j) Blog-Beiträge (Joomla-Artikel)
   Einleitungsbild in der Blogliste und großes Beitragsbild
   bekommen automatisch ein Label, ohne Klasse.
   Bilder im Beitragstext: Klasse ki-label am Bild-Addon (2d).
   --------------------------------------------------------- */
.article-intro-image,
.article-full-image {
    position: relative;
}

.article-intro-image::before,
.article-full-image::before {
    content: "KI generiert" !important;
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: 40 !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    background-image: none !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    .article-intro-image::before,
    .article-full-image::before {
        left: 6px !important;
        bottom: 6px !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
    }
}

/* ---------------------------------------------------------
   2k) Blog-Teaser im Page Builder (Artikel-Addon, z. B. auf
   der Startseite) – jedes Teaserbild automatisch
   --------------------------------------------------------- */
.sppb-addon-articles .sppb-article-img-wrap {
    position: relative;
    display: block;
}

.sppb-addon-articles .sppb-article-img-wrap::before {
    content: "KI generiert" !important;
    display: block !important;
    position: absolute !important;
    left: 8px !important;
    bottom: 8px !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
    height: auto !important;
    z-index: 40 !important;
    padding: 3px 8px !important;
    font-size: 11px !important;
    line-height: 1.2 !important;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.85) !important;
    background-image: none !important;
    border-radius: 3px !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: none !important;
}

@media (max-width: 767px) {
    .sppb-addon-articles .sppb-article-img-wrap::before {
        left: 6px !important;
        bottom: 6px !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
    }
}
/* 2g-2) Team-Detailseiten: Label oben rechts,
   weil unten die Infoleiste über dem Bild liegt */
.view-dynamic .sppb-dynamic-content-image-wrapper.ki-bearbeitet::before,
.view-dynamic .sppb-dynamic-content-image-wrapper.ki-label::before {
    top: 90px !important;
    bottom: auto !important;
    left: auto !important;
    right: 16px !important;
}

@media (max-width: 767px) {
    .view-dynamic .sppb-dynamic-content-image-wrapper.ki-bearbeitet::before,
    .view-dynamic .sppb-dynamic-content-image-wrapper.ki-label::before {
        top: 70px !important;
        right: 8px !important;
    }
}

/* ---------------------------------------------------------
   3) Cookie-Banner (reDim) auf dem Handy
   Statt bildschirmfüllend als Karte unten, max. 70 % Höhe,
   Inhalt scrollbar.
   --------------------------------------------------------- */
@media (max-width: 767px) {
    #redim-cookiehint-modal {
        top: auto !important;
        bottom: 12px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        height: auto !important;
        max-height: 70vh !important;
        margin: 0 !important;
        overflow: hidden !important;
    }

    #redim-cookiehint {
        max-height: 70vh !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
        padding: 14px 14px 12px !important;
        box-sizing: border-box;
    }

    #redim-cookiehint .redim-cc-headline {
        font-size: 16px !important;
        line-height: 1.3 !important;
        margin: 0 !important;
    }

    #redim-cookiehint .redim-cc-content p {
        font-size: 13px !important;
        line-height: 1.4 !important;
        margin: 8px 0 10px !important;
    }

    #redim-cookiehint .redim-cc-btn {
        min-height: 42px;
        margin-bottom: 8px !important;
        padding: 8px 12px !important;
        font-size: 14px !important;
    }
}