/**
 * HayMe Core
 * Zentrales Layout- und Popup-Grundsystem
 *
 * Version: 2.1.0
 * Author: Werbeagentur Haypix
 *
 * Verantwortlich für:
 * - zentrale Variablen
 * - Grundreset und Typografie
 * - App-Shell und App-Frame
 * - Profil-Grundstruktur
 * - Popup-Grundsystem
 *
 * Nicht verantwortlich für:
 * - Hero-Design
 * - App-Buttons
 * - Forminator-Detaildesign
 * - Module und Social Media
 */


/* =========================================================
   01. ZENTRALE VARIABLEN
   ========================================================= */

:root {
    /* Markenfarben */
    --hayme-red: #c72528;
    --hayme-red-light: #ef3940;
    --hayme-red-dark: #a9181d;

    /* Hintergründe */
    --hayme-page-background: #020203;
    --hayme-frame-background-start: #09090a;
    --hayme-frame-background-middle: #050506;
    --hayme-frame-background-end: #020203;

    --hayme-surface: #171719;
    --hayme-surface-light: #202022;
    --hayme-surface-hover: #252527;

    /* Text */
    --hayme-text: #ffffff;
    --hayme-text-soft: rgba(255, 255, 255, 0.78);
    --hayme-text-muted: rgba(255, 255, 255, 0.56);
    --hayme-muted: #c8c8c8;

    /* Konturen */
    --hayme-border: rgba(255, 255, 255, 0.14);
    --hayme-border-light: rgba(255, 255, 255, 0.20);
    --hayme-border-accent: rgba(199, 37, 40, 0.48);

    /* Rundungen */
    --hayme-radius-small: 12px;
    --hayme-radius-medium: 18px;
    --hayme-radius-large: 24px;
    --hayme-radius-round: 999px;

    /* App-Layout */
    --hayme-app-width: 100%;
    --hayme-content-padding: 28px;
    --hayme-content-padding-mobile: 18px;
    --hayme-section-gap: 28px;

    /* Schatten */
    --hayme-shadow-app:
        0 34px 90px rgba(0, 0, 0, 0.72),
        0 0 80px rgba(199, 37, 40, 0.04);

    --hayme-shadow-card:
        0 18px 50px rgba(0, 0, 0, 0.40);

    /* Animationen */
    --hayme-transition-fast: 180ms ease;
    --hayme-transition-normal: 280ms ease;
    --hayme-transition-slow: 420ms ease;

    /* Typografie */
    --hayme-font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Arial,
        sans-serif;
}


/* =========================================================
   02. DOKUMENT UND GRUNDRESET
   ========================================================= */

html {
    width: 100%;
    min-width: 0;
    min-height: 100%;

    margin: 0;
    padding: 0;

    background: var(--hayme-page-background);
}


body.hayme-app-page {
    width: 100%;
    min-width: 0;
    min-height: 100vh;

    margin: 0 !important;
    padding: 0 !important;

    overflow-x: hidden;

    background:
        radial-gradient(
            ellipse 70% 40% at 50% 0%,
            rgba(199, 37, 40, 0.045) 0%,
            transparent 68%
        ),
        var(--hayme-page-background) !important;

    color: var(--hayme-text);

    font-family: var(--hayme-font-family);
}


body.hayme-app-page *,
body.hayme-app-page *::before,
body.hayme-app-page *::after {
    box-sizing: border-box;
}


body.hayme-app-page button,
body.hayme-app-page input,
body.hayme-app-page select,
body.hayme-app-page textarea {
    font-family: var(--hayme-font-family);
}


body.hayme-app-page h1,
body.hayme-app-page h2,
body.hayme-app-page h3,
body.hayme-app-page h4,
body.hayme-app-page h5,
body.hayme-app-page h6,
body.hayme-app-page p {
    font-family: var(--hayme-font-family);

    overflow-wrap: break-word;
}


body.hayme-app-page img,
body.hayme-app-page svg {
    max-width: 100%;
}


body.hayme-app-page a {
    color: inherit;
}


body.hayme-app-page #wpadminbar {
    position: fixed;
}


/* =========================================================
   03. WORDPRESS- UND THE7-WRAPPER NEUTRALISIEREN
   ========================================================= */

body.hayme-app-page #page,
body.hayme-app-page #main,
body.hayme-app-page .wf-wrap,
body.hayme-app-page .wf-container-main,
body.hayme-app-page .content,
body.hayme-app-page .entry-content {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   04. APP-SHELL
   Äußerer Bildschirmbereich
   ========================================================= */

body.hayme-app-page .hayme-app-shell {
    position: relative;

    display: flex;
    align-items: flex-start;
    justify-content: center;

    width: 100%;
    min-width: 0;
    min-height: 100vh;

    margin: 0;
    padding: 36px 20px 64px;
}


/* =========================================================
   05. APP-FRAME
   Sichtbare HayMe-App-Fläche
   ========================================================= */

body.hayme-app-page .hayme-app-frame,
body.hayme-app-page .hayme-app-shell > #hayme-app {
    position: relative;
    isolation: isolate;

    display: block;

    width: min(100%, var(--hayme-app-width));
    max-width: var(--hayme-app-width);
    min-width: 0;

    /* Wichtig: Desktop nicht künstlich verlängern */
    min-height: 0;

    margin: 0 auto;
    padding: 0;

    overflow: hidden;

    border: 1px solid rgba(255, 255, 255, 0.055);
    border-radius: 24px;

    background:
        linear-gradient(
            180deg,
            var(--hayme-frame-background-start) 0%,
            var(--hayme-frame-background-middle) 44%,
            var(--hayme-frame-background-end) 100%
        );

    box-shadow:
        0 34px 90px rgba(0, 0, 0, 0.72),
        0 0 80px rgba(199, 37, 40, 0.04);
}


body.hayme-app-page .hayme-app {
    width: 100%;
    min-width: 0;
}


/* =========================================================
   06. PROFIL-GRUNDSTRUKTUR
   ========================================================= */

body.hayme-app-page .hayme-profile {
    position: relative;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: none;
    min-width: 0;
    min-height: 100%;

    margin: 0;
    padding: 0;

    overflow: hidden;

    background: transparent;

    color: var(--hayme-text);
}


/*
 * Kompatibilität mit der bisherigen Profilstruktur:
 *
 * <main class="hayme-profile">
 *     <div class="hayme-profile__inner">
 *         Hero
 *         Buttons
 *         Module
 *     </div>
 * </main>
 */

/* =========================================================
   07. PROFIL-INHALT
   Buttons, Module und Social Media
   ========================================================= */

body.hayme-app-page .hayme-profile__content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 980px;
    min-width: 0;

    gap: 28px;

    margin: 0 auto;

    padding:
        0
        var(--hayme-content-padding)
        48px;
}


/* =========================================================
   07. PROFIL-INHALT
   Buttons, Module und Social Media
   ========================================================= */

body.hayme-app-page .hayme-profile__content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;

    width: 100%;
    min-width: 0;

    gap: 28px;

    margin: 0;
    padding:
        0
        var(--hayme-content-padding)
        48px;
}


/* =========================================================
   07. HERO-CONTAINER
   Nur Layout – Design befindet sich in hero.css
   ========================================================= */

body.hayme-app-page .hayme-profile__hero {
    position: relative;
    z-index: 1;

    width: 100%;
    max-width: none;
    min-width: 0;

    margin: 0;
    padding: 0;
}


body.hayme-app-page .hayme-profile__hero > *,
body.hayme-app-page .hayme-profile__inner > .hayme-profile-hero {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   08. PROFIL-INHALT
   Für die neue modulare Profilstruktur
   ========================================================= */

body.hayme-app-page .hayme-profile__content {
    position: relative;
    z-index: 3;

    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: none;
    min-width: 0;

    gap: var(--hayme-section-gap);

    margin: 0;
    padding:
        0
        var(--hayme-content-padding)
        48px;
}


/* =========================================================
   09. PROFIL-SEKTIONEN
   ========================================================= */

body.hayme-app-page .hayme-profile__section {
    width: 100%;
    max-width: none;
    min-width: 0;

    margin: 0;
    padding: 0;
}


body.hayme-app-page .hayme-profile__section:empty {
    display: none;
}


/* =========================================================
   10. AKTIONS- UND BUTTON-BEREICH
   Nur Layout – kein Button-Design
   ========================================================= */

body.hayme-app-page .hayme-action-section,
body.hayme-app-page .hayme-buttons,
body.hayme-app-page .hayme-button-wrapper {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/*
 * Alte Profilstruktur:
 * Buttons erhalten kontrollierten Seitenabstand,
 * ohne den Hero einzurücken.
 */

body.hayme-app-page
.hayme-profile__inner > .hayme-action-section,

body.hayme-app-page
.hayme-profile__inner > .hayme-buttons {
    width: auto !important;

    margin-left: var(--hayme-content-padding) !important;
    margin-right: var(--hayme-content-padding) !important;
}


/*
 * Neue Profilstruktur:
 * Padding wird bereits von .hayme-profile__content erzeugt.
 */

body.hayme-app-page
.hayme-profile__content
.hayme-action-section,

body.hayme-app-page
.hayme-profile__content
.hayme-buttons {
    width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
}


/* =========================================================
   11. PROFIL-FOOTER
   Nur Layout – Footer-Design später separat
   ========================================================= */

body.hayme-app-page .hayme-profile__footer {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: none;
    min-width: 0;

    margin-top: auto;
    padding:
        0
        var(--hayme-content-padding)
        32px;
}


/* =========================================================
   12. POPUP-GRUNDSTRUKTUR
   Bleibt vorerst im Core, damit nichts ausfällt
   ========================================================= */

.hayme-popup {
    display: none;

    position: fixed;
    inset: 0;

    z-index: 999999;

    opacity: 0;
    visibility: hidden;

    transition:
        opacity 350ms ease,
        visibility 350ms ease;
}


.hayme-popup[aria-hidden="false"] {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px;
}


.hayme-popup.is-open {
    opacity: 1;
    visibility: visible;
}


/* =========================================================
   13. POPUP-OVERLAY
   ========================================================= */

.hayme-popup-overlay {
    position: absolute;
    inset: 0;

    background: rgba(0, 0, 0, 0.78);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* =========================================================
   14. POPUP-CONTAINER
   ========================================================= */

.hayme-popup-container {
    position: relative;
    z-index: 2;

    width: min(920px, calc(100% - 40px));
    max-height: 90vh;

    padding: 30px;

    overflow-y: auto;
    overscroll-behavior: contain;

    border: 2px solid rgba(255, 255, 255, 0.75);
    border-radius: 22px;

    background: #111111;

    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.65);

    opacity: 0;

    transform:
        translateY(30px)
        scale(0.96);

    transition:
        transform 350ms ease,
        opacity 350ms ease,
        box-shadow 350ms ease;
}


.hayme-popup.is-open .hayme-popup-container {
    opacity: 1;

    transform:
        translateY(0)
        scale(1);
}


/* =========================================================
   15. POPUP-SCHLIESSEN
   ========================================================= */

.hayme-popup-close {
    position: absolute;

    top: 14px;
    right: 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 35px;
    height: 35px;

    padding: 0;

    border: 2px solid rgba(255, 255, 255, 0.65);
    border-radius: 50%;

    background: rgba(255, 255, 255, 0.06);

    color: #ffffff;

    font-size: 24px;
    font-weight: 400;
    line-height: 1;

    cursor: pointer;

    appearance: none;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;

    transition:
        background var(--hayme-transition-fast),
        border-color var(--hayme-transition-fast),
        transform 120ms ease;
}


.hayme-popup-close:active {
    border-color: var(--hayme-red);

    background: var(--hayme-red);

    transform: scale(0.92);
}


.hayme-popup-close:focus-visible {
    outline: none;

    box-shadow:
        0 0 0 3px rgba(199, 37, 40, 0.28);
}


/* =========================================================
   16. POPUP-HEADER
   ========================================================= */

.hayme-popup-header {
    margin: 0 0 18px;
    padding: 0;

    text-align: left;
}


.hayme-popup-icon {
    display: none;
}


.hayme-popup-header h2 {
    margin: 0 0 8px;
    padding: 0;

    color: #ffffff;

    font-family: var(--hayme-font-family);
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;

    text-align: left;
}


.hayme-popup-header p {
    max-width: none;

    margin: 0;
    padding: 0;

    color: var(--hayme-muted);

    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;

    text-align: left;
}


/* =========================================================
   17. POPUP-SICHERHEIT
   ========================================================= */

.hayme-popup-security {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;

    width: 100%;

    gap: 10px;

    margin: 16px 0 24px;
    padding: 0;

    background: transparent;

    color: #9f9f9f;

    font-size: 13px;
    line-height: 1.5;

    text-align: left;
}


.hayme-popup-lock {
    flex: 0 0 auto;

    margin-top: 2px;

    color: #d7a64b;

    font-size: 14px;
    line-height: 1;
}


.hayme-popup-security-text {
    display: block;
    flex: 1;

    margin: 0;

    color: #9f9f9f;
}


/* =========================================================
   18. POPUP-FORMULAR-GRUNDLAGE
   Details liegen in hayme-forminator.css
   ========================================================= */

.hayme-popup-form {
    margin: 0;
    padding: 0;
}


.hayme-popup-container input,
.hayme-popup-container select,
.hayme-popup-container textarea {
    border-radius: 8px !important;
}


/* =========================================================
   19. KONTAKTDATEN-POPUP
   ========================================================= */

#hayme-contact-popup .hayme-popup-header {
    margin: 0 0 18px !important;
    padding: 0 !important;

    text-align: left !important;
}


#hayme-contact-popup .hayme-popup-icon {
    display: none !important;

    width: 0 !important;
    height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    border: 0 !important;

    background: none !important;
}


#hayme-contact-popup .hayme-popup-header h2 {
    margin: 0 0 8px !important;

    color: #ffffff !important;

    font-family: var(--hayme-font-family) !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;

    text-align: left !important;
    text-transform: none !important;
}


#hayme-contact-popup .hayme-popup-header p {
    margin: 0 !important;

    color: var(--hayme-muted) !important;

    font-family: var(--hayme-font-family) !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;

    text-align: left !important;
    text-transform: none !important;
}


#hayme-contact-popup .hayme-popup-security {
    margin: 16px 0 24px !important;
}


#hayme-contact-popup .hayme-popup-form {
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   20. TABLET
   ========================================================= */

@media screen and (max-width: 1024px) {

    body.hayme-app-page .hayme-app-shell {
        padding:
            24px
            18px
            50px;
    }

}


/* =========================================================
   21. SMARTPHONE
   ========================================================= */

@media screen and (max-width: 767px) {

    body.hayme-app-page .hayme-app-shell {
        min-height: 100svh;

        padding: 0;
    }


    body.hayme-app-page .hayme-app-frame,
    body.hayme-app-page .hayme-app-shell > #hayme-app {
        max-width: none;
        min-height: 100svh;

        border: 0;
        border-radius: 0;

        box-shadow: none;
    }


    body.hayme-app-page .hayme-profile__content {
        gap: 22px;

        padding:
            0
            var(--hayme-content-padding-mobile)
            calc(42px + env(safe-area-inset-bottom));
    }


    body.hayme-app-page
    .hayme-profile__inner > .hayme-action-section,

    body.hayme-app-page
    .hayme-profile__inner > .hayme-buttons {
        margin-left:
            var(--hayme-content-padding-mobile) !important;

        margin-right:
            var(--hayme-content-padding-mobile) !important;
    }


    body.hayme-app-page .hayme-profile__footer {
        padding:
            0
            var(--hayme-content-padding-mobile)
            calc(26px + env(safe-area-inset-bottom));
    }


    .hayme-popup[aria-hidden="false"] {
        padding: 2px;
    }


    .hayme-popup-container {
        width: calc(100% - 4px);
        max-width: none;
        max-height: 85vh;

        margin: 2px;
        padding: 30px 20px 24px;

        border-radius: 20px;
    }


    .hayme-popup-close {
        top: 12px;
        right: 12px;

        width: 35px;
        height: 35px;

        font-size: 23px;
    }


    .hayme-popup-header h2,
    #hayme-contact-popup .hayme-popup-header h2 {
        font-size: 23px !important;
    }

}


/* =========================================================
   22. SEHR KLEINE SMARTPHONES
   ========================================================= */

@media screen and (max-width: 380px) {

    body.hayme-app-page .hayme-profile__content,
    body.hayme-app-page .hayme-profile__footer {
        padding-left: 14px;
        padding-right: 14px;
    }


    body.hayme-app-page
    .hayme-profile__inner > .hayme-action-section,

    body.hayme-app-page
    .hayme-profile__inner > .hayme-buttons {
        margin-left: 14px !important;
        margin-right: 14px !important;
    }


    .hayme-popup-container {
        padding:
            28px
            16px
            22px;
    }

}


/* =========================================================
   23. REDUZIERTE BEWEGUNGEN
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hayme-popup,
    .hayme-popup-container,
    .hayme-popup-close {
        transition: none !important;
    }

}

/* ==========================================
   Responsive App-Breite
   ========================================== */

/* Smartphone */
@media (max-width: 767px) {
    :root {
        --hayme-app-width: 100%;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1199px) {
    :root {
        --hayme-app-width: 900px;
    }
}

/* Desktop */
@media (min-width: 1200px) {
    :root {
        --hayme-app-width: min(96vw, 1600px);
    }
}