/* apvento: Ergaenzungen zum Framer-Klon (framer.css). Framer-JS laeuft nicht, deshalb hier per CSS/Alpine. */

/* Seitenwurzel: Framer setzt feste Breakpoint-Breiten (1200/768/520px), Inline-Style war width:auto */
.framer-1XztR.apv-page {
    width: auto;
    min-height: 100vh;
    /* Original: height min-content + overflow hidden. Bei kurzem Inhalt plus groesseren Textabstaenden
       (WCAG 1.4.12) wurde unten abgeschnitten. Hoehe frei, seitlich weiter kappen (Framer-Varianten ragen raus). */
    height: auto;
    overflow: visible;
    overflow-x: clip;
}

/* Inhaltsbereich zwischen Header und Footer (Wurzel ist Flex-Spalte, zentriert).
   Volle Breite per Utility am Element (tms:w-full), damit das Critical-CSS jeder Seite
   tms:-Utilities enthaelt und der CMS-Escape-Gate den Backslash-Pfad pruefen kann. */
.apv-page > .apv-content {
    order: 2;
}

/* Footer-Variante ist display:contents, die Ordnung haengt am Container darin */
.apv-page .framer-x1syo4-container {
    order: 3;
}

/* Mobil/Tablet-Menue: geschlossen unsichtbar und nicht fokussierbar, offen sichtbar */
.framer-KeiDT.framer-v-1djzze8 .framer-15f32ao-container,
.framer-KeiDT.framer-v-vng4dj .framer-15f32ao-container {
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
}

.apv-menu-open .framer-KeiDT .framer-15f32ao-container {
    visibility: visible;
    opacity: 1 !important; /* Inline-Style opacity:0 aus dem Klon */
    pointer-events: auto;
}

/* Burger -> X */
.framer-X8JzX .framer-apruap,
.framer-X8JzX .framer-s2gb4m,
.framer-X8JzX .framer-1tc4pgu {
    transition: transform 0.2s ease, top 0.2s ease, bottom 0.2s ease, opacity 0.2s ease;
}

.apv-menu-open .framer-X8JzX .framer-s2gb4m {
    top: calc(50% - 1px);
    transform: rotate(45deg) !important;
}

.apv-menu-open .framer-X8JzX .framer-apruap {
    bottom: calc(50% - 1px);
    transform: rotate(-45deg) !important;
}

.apv-menu-open .framer-X8JzX .framer-1tc4pgu {
    opacity: 0 !important;
}

/* Phone: Logo ist im Original 348px breit und schiebt den Burger aus dem Bild (auch live auf apvento.de).
   Schmaler, damit das Menue erreichbar ist. */
.framer-KeiDT.framer-v-1djzze8 .framer-w9ciro {
    width: 180px;
    height: auto;
}

/* Header liegt ueber dem Inhalt (Desktop fixed, Tablet/Phone absolute): Inhalt darunter beginnen.
   Hoehen gemessen (1440/1000/390px). Der Hero zieht sich per --apv-header-h unter den Header (Verlauf wie live). */
.apv-page {
    --apv-header-h: 153px;
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .apv-page {
        --apv-header-h: 145px;
    }
}

@media (max-width: 767.98px) {
    .apv-page {
        --apv-header-h: 86px;
    }
}

.apv-page > .apv-content {
    padding-top: var(--apv-header-h);
}

/* Desktop-Header ist fixed (153px): Ankerspruenge und Fokus nicht darunter verstecken (WCAG 2.4.11) */
@media (min-width: 1200px) {
    html {
        scroll-padding-top: 170px;
    }
}

/* WCAG 1.4.3 (a11y-Gate AA): Orange #faa21b auf Weiss = 2,04:1.
   - aktiver Menuepunkt: Text dunkel, orange Unterstreichung als Markierung (live: oranger Text)
   - "Kontakt"-Button: dunkler Text auf Orange = 6,55:1 (live: weiss) */
.framer-KeiDT a[aria-current='page'] p.framer-text {
    text-decoration: underline;
    text-decoration-color: #faa21b;
    text-decoration-thickness: 3px;
    text-underline-offset: 8px;
}

.framer-KeiDT .framer-QqIn1 p.framer-text {
    --framer-text-color: #302f29 !important; /* Inline-Style aus dem Klon */
    transition: color 0.4s linear 0.02s;
}

/* Hover wie live (Framer-Button, Variante "hover"): Hintergrund #302f29, Schrift weiss, 0.4s linear nach 0.02s.
   Live schaltet das Framer-JS, das im Klon fehlt (OT-9391). */
.framer-KeiDT .framer-QqIn1 {
    transition: background-color 0.4s linear 0.02s;
}

.framer-KeiDT .framer-QqIn1:hover {
    background-color: #302f29 !important; /* Inline-Style aus dem Klon */
}

.framer-KeiDT .framer-QqIn1:hover p.framer-text {
    --framer-text-color: #fff !important;
}

/* WCAG 1.4.12: Footer-Spalten haben im Original eine feste Hoehe (349px, overflow hidden), bei groesseren
   Abstaenden wird Text abgeschnitten. Auf dem Phone bricht die Social-Spalte dadurch auch live aus dem Bild. */
.framer-nlHX8 .framer-uh7v6i {
    height: auto;
    min-height: 349px;
}