/* ==========================================================================
   Life Vogue – seitenweite Ergänzungen (alle Seiten, eingebunden in include/link.php)
   Gehört zu js/site.js.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Handy: Kopfbild darf nicht breiter als der Bildschirm werden
   Das Kopfbild ist eine Tabelle (style.css: display:table/table-cell). Tabellen
   wachsen mit, wenn ein langes Wort („Wimpernverlängerung") nicht umbrechen
   kann – dadurch ragte das ganze Kopfbild rechts aus dem Bildschirm.
   Am Desktop bleibt alles unverändert.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .wt-bnr-inr,
    .wt-bnr-inr .container {
        width: 100%;
        table-layout: fixed;
    }

    .wt-bnr-inr-entry h1 {
        font-size: 32px;
        line-height: 38px;
        overflow-wrap: break-word;
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

@media (max-width: 400px) {
    .wt-bnr-inr-entry h1 {
        font-size: 26px;
        line-height: 32px;
    }
}

/* --------------------------------------------------------------------------
   2. Handy: verschachtelte Raster (angebot.php, schulung.php) nicht über den Rand
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .lv-row-flush {
        margin-left: 0;
        margin-right: 0;
    }
}

/* --------------------------------------------------------------------------
   3. Sanftes Einblenden beim Scrollen (wie Startseite)
   Greift nur, wenn js/site.js html.motion-on gesetzt hat.
   -------------------------------------------------------------------------- */
.motion-on [data-reveal]:not(.is-done) {
    opacity: 0;
    transform: translateY(30px);
}

.motion-on [data-reveal].is-visible:not(.is-done) {
    opacity: 1;
    transform: none;
    transition: opacity .8s ease-out, transform .8s cubic-bezier(.2, .65, .3, 1);
}

/* --------------------------------------------------------------------------
   3a. Herz-Puls und wachsende Trennlinien unter den Überschriften
   Gleiche Werte wie auf der Startseite (css/index-motion.css, Abschnitt 4).
   Die Linien wachsen von der Mitte nach außen, sobald die Überschrift einblendet.
   -------------------------------------------------------------------------- */
.motion-on .wt-separator.style-icon .fa-heart {
    animation: lv-heartbeat 2.4s ease-in-out infinite;
}

@keyframes lv-heartbeat {
    0%   { transform: scale(1); }
    14%  { transform: scale(1.18); }
    28%  { transform: scale(1); }
    42%  { transform: scale(1.12); }
    70%  { transform: scale(1); }
    100% { transform: scale(1); }
}

/* Übergang nur beim Wachsen – das Einklappen vor dem Einblenden geschieht sofort,
   sonst schrumpfen die Linien beim Laden sichtbar, bevor sie wachsen */
.motion-on [data-reveal].is-visible .wt-separator .separator-left,
.motion-on [data-reveal].is-visible .wt-separator .separator-right {
    transition: transform .9s cubic-bezier(.2, .65, .3, 1) .25s;
}

.motion-on [data-reveal] .wt-separator .separator-left {
    transform-origin: right center;
}

.motion-on [data-reveal] .wt-separator .separator-right {
    transform-origin: left center;
}

.motion-on [data-reveal]:not(.is-visible) .wt-separator .separator-left,
.motion-on [data-reveal]:not(.is-visible) .wt-separator .separator-right {
    transform: scaleX(0);
}

/* --------------------------------------------------------------------------
   4. Kopfbilder der Unterseiten: langsamer, leichter Zoom beim Öffnen
   Eine Kopie des Hintergrundbilds liegt als ::before darüber und wird skaliert.
   overflow + contain halten die Vergrößerung im Kopfbild – sonst würde die Seite
   am Handy um einige Pixel breiter (gemessen: 386 statt 375 px).
   -------------------------------------------------------------------------- */
.motion-on .wt-bnr-inr {
    position: relative;
    overflow: hidden;
    contain: paint;
}

.motion-on .wt-bnr-inr::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: inherit;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    transform-origin: center center;
}

.motion-on.lv-ready .wt-bnr-inr::before {
    animation: lv-kenburns 9s cubic-bezier(.25, .46, .45, .94) forwards;
}

@keyframes lv-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.06); }
}

/* --------------------------------------------------------------------------
   5. „Termin buchen" in der Menüleiste (Platz der Vorlage: .extra-nav)
   -------------------------------------------------------------------------- */
/* Abstand so gewählt, dass die Leiste ihre alte Höhe behält (60 px, Handy 59 px) –
   auch im fixierten Zustand nach dem Scrollen (.is-fixed) */
.header-botton .extra-nav,
.is-fixed .header-botton .extra-nav {
    padding: 10px 0;
}

.header-botton .extra-nav .lv-book-btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 20px;
    border-radius: 20px;
    background-color: #fff;
    color: #000;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.header-botton .extra-nav .lv-book-btn .fa {
    margin-right: 8px;
    font-size: 16px;
}

.header-botton .extra-nav .lv-book-btn:hover,
.header-botton .extra-nav .lv-book-btn:focus {
    background-color: #696969;
    color: #fff;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, .3);
}

.header-botton .extra-nav .lv-book-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* Tablet: hier ist die Leiste 59 px hoch */
@media (min-width: 768px) and (max-width: 991px) {
    .header-botton .extra-nav,
    .is-fixed .header-botton .extra-nav {
        padding: 9px 0 10px;
    }
}

@media (max-width: 767px) {
    .header-botton .extra-nav,
    .is-fixed .header-botton .extra-nav {
        padding: 12px 0 13px;
    }

    .header-botton .extra-nav .lv-book-btn {
        height: 34px;
        padding: 0 14px;
        font-size: 12px;
        letter-spacing: .5px;
    }
}

/* --------------------------------------------------------------------------
   6. Info-Kästen „Warum Life Vogue" (Qualifikationen, Über mich, Termin buchen)
   Statt der schwarzen Eckblöcke der Vorlage (style.css .animate_line:before/:after):
   Kasten hebt sich mit weichem Schatten, Symbol wird größer und schwarz,
   unten wächst eine schwarze Linie von der Mitte nach außen.
   Im Ruhezustand sieht alles aus wie bisher.
   -------------------------------------------------------------------------- */
.animate_line:before,
.animate_line:after {
    display: none;
}

@media (hover: hover) and (pointer: fine) {
    .animate_line:hover {
        z-index: 1;   /* Schatten liegt über den Nachbarkästen */
    }

    .animate_line .wt-icon-box-wraper {
        transition: transform .45s cubic-bezier(.2, .65, .3, 1), box-shadow .45s ease;
    }

    .animate_line:hover .wt-icon-box-wraper {
        transform: translateY(-8px);
        box-shadow: 0 22px 40px -14px rgba(0, 0, 0, .28);
    }

    .animate_line .wt-icon-box-wraper::before {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 3px;
        background-color: #000;
        transform: scaleX(0);
        transition: transform .45s cubic-bezier(.2, .65, .3, 1);
    }

    .animate_line:hover .wt-icon-box-wraper::before {
        transform: scaleX(1);
    }

    .animate_line .font-awesome .fa {
        transition: transform .45s cubic-bezier(.2, .65, .3, 1), color .3s ease;
    }

    .animate_line:hover .font-awesome .fa {
        transform: scale(1.15);
        color: #000;
    }
}

/* --------------------------------------------------------------------------
   7. Kontakt-Kästen (Kontakt, Haarentfernung): Telefon, E-Mail, Adresse
   Statt grauer Quadrate: schwarze Kreise mit hellem Ring, größeres Symbol.
   Beim Überfahren: Kasten mit Schatten und schwarzem Rand, Kreis wird weiß
   mit schwarzem Symbol. Größe und Abstände bleiben wie bisher (80 × 80 px).
   -------------------------------------------------------------------------- */
.bx-style-1 .wt-icon-box-sm.bg-gray-dark {
    background-color: #000;
    border-radius: 50%;
    box-shadow: 0 0 0 5px #f0f0f0;
    transition: background-color .35s ease, box-shadow .35s ease;
}

.bx-style-1 .wt-icon-box-sm.bg-gray-dark .icon-cell {
    transition: color .35s ease;
}

.bx-style-1 .wt-icon-box-sm.bg-gray-dark .fa {
    font-size: 28px;
    transition: transform .35s cubic-bezier(.2, .65, .3, 1);
}

.bx-style-1 .wt-icon-box-sm.bg-gray-dark .fa-mobile {
    font-size: 38px;   /* schmales Symbol, sonst wirkt es kleiner als die anderen */
}

.wt-icon-box-wraper.bx-style-1 {
    transition: border-color .35s ease, box-shadow .35s ease;
}

@media (hover: hover) and (pointer: fine) {
    .wt-icon-box-wraper.bx-style-1:hover {
        border-color: #000;
        box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .3);
    }

    .wt-icon-box-wraper.bx-style-1:hover .wt-icon-box-sm.bg-gray-dark {
        background-color: #fff;
        box-shadow: inset 0 0 0 2px #000, 0 0 0 5px #f0f0f0;
    }

    .wt-icon-box-wraper.bx-style-1:hover .wt-icon-box-sm.bg-gray-dark .icon-cell {
        color: #000;
    }

    .wt-icon-box-wraper.bx-style-1:hover .wt-icon-box-sm.bg-gray-dark .fa {
        transform: scale(1.12);
    }
}

/* --------------------------------------------------------------------------
   Bewegung reduzieren
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .motion-on.lv-ready .wt-bnr-inr::before,
    .header-botton .extra-nav .lv-book-btn {
        animation: none;
        transition: none;
    }

    .animate_line:hover .wt-icon-box-wraper,
    .animate_line:hover .font-awesome .fa {
        transform: none;
    }
}