
/* OutdoorGenuss XXL – Vorschalt-Overlay, bewusst getrennt vom bestehenden Layout. */

#og-entry { display:none; position:fixed; inset:0;  z-index: 2147483647 !important; grid-template-columns:1fr 1fr; background:#686D6E; color:#fff; isolation:isolate; }
html.og-entry-pending, html.og-entry-pending body { overflow:hidden !important; }
html.og-entry-pending #og-entry { display:grid; }
#og-entry, #og-entry * { box-sizing:border-box; }

#og-entry .og-entry__pane { min-width:0; position:relative; background-size:cover; background-position:center; display:flex; align-items:center; justify-content:center; text-align:center; padding:125px 35px 90px; }
#og-entry .og-entry__pane::before { content:""; position:absolute; inset:0; background:rgba(15,25,36,.49); pointer-events:none; }

#og-entry .og-entry__pane--kitchen { background-image:url('../_assets/deckseite/outdoorgenuss_xxl_designkuechen.jpg'); }
#og-entry .og-entry__pane--shop { background-image:url('../_assets/deckseite/outdoorgenuss_xxl_hofats.jpg'); }

/* Rahmen: obere Hälfte grau, untere Hälfte dunkelblau, ohne Mittellinie. */
#og-entry .og-entry__frame {
    position:absolute;
    pointer-events:none;
    inset:9% 5.3%;
    z-index:2;
    border:3px solid;
    border-image-source:linear-gradient(
        to bottom,
        #686D6E 0%,
        #686D6E 50%,
        #1A3553 50%,
        #1A3553 100%
    );
    border-image-slice:1;
}

#og-entry .og-entry__brand { position:absolute; z-index:5; top:0; left:50%; transform:translateX(-50%); background:#fff; width:200px; padding:0; border-radius:0 0 5px 5px; text-align:center; }
#og-entry .og-entry__brand img { display:block; width:100%; height:auto; }
#og-entry .og-entry__content { position:relative; z-index:3; width:100%; max-width:510px; display:flex; align-items:center; flex-direction:column; margin-top:50px; }
#og-entry .og-entry__heading { color:#fff; font-family:'Orbitron',sans-serif; font-size:38px; line-height:1.25; text-transform:uppercase; font-weight:700; margin:0 0 16px; text-shadow:0 1px 6px rgba(0,0,0,.18); }
#og-entry .og-entry__claim { font-family:cursive; font-style:italic; font-size:clamp(19px,1.65vw,32px); line-height:1.25; margin:0 0 34px; transform:rotate(-5deg); }
#og-entry .og-entry__logo-hofats { width:110px; max-width:60%; height:auto; display:block; margin:0 0 4px; }
#og-entry .og-entry__description { font-family:'Rubik',sans-serif; font-size:24px; line-height:1.45; margin:14px 0 57px; max-width:340px; color:#fff; }

/* Die originale .button bleibt zuständig für Button-Design und :hover. */
#og-entry a.button { position:relative; z-index:4; width:auto; max-width:100%; white-space:normal; margin:0; text-decoration:none; }
#og-entry a.button:focus-visible { outline:3px solid #fff; outline-offset:4px; }

@media (max-width:900px) {
    #og-entry .og-entry__pane { padding:110px 24px 70px; }
    #og-entry .og-entry__frame { inset:8% 4%; }
    #og-entry .og-entry__heading { font-size:clamp(23px,3.1vw,32px); }
    #og-entry .og-entry__claim { font-size:21px; }
    #og-entry .og-entry__brand { width:135px; }
    #og-entry a.button { font-size:14px !important; line-height:20px; }
}

@media (max-width:639px) {
    #og-entry { grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
    #og-entry .og-entry__pane { min-height:0; padding:62px 24px 22px; }
    #og-entry .og-entry__pane--kitchen { background-position:center 53%; }
    #og-entry .og-entry__pane--shop { background-position:center 45%; padding-top:20px; }

    #og-entry .og-entry__frame { inset:4% 5%; border-width:2px; }

    #og-entry .og-entry__brand { width:90px; padding:4px 5px 5px; }
    #og-entry .og-entry__content { margin-top:10px; }
    #og-entry .og-entry__heading { font-size:clamp(19px,5.2vw,26px); line-height:1.18; margin-bottom:8px; }
    #og-entry .og-entry__claim { font-size:clamp(17px,4.6vw,23px); margin:1px 0 17px; }
    #og-entry .og-entry__logo-hofats { width:88px; margin:0; }
    #og-entry .og-entry__description { font-size:13px; line-height:1.25; margin:5px 0 13px; max-width:260px; }
    #og-entry a.button { font-size:12px !important; line-height:17px; padding:7px 35px 7px 10px; background-size:17px auto; background-position:right 9px center; }
}

@media (max-width:639px) and (max-height:620px) {
    #og-entry { overflow-y:auto; grid-template-rows:minmax(295px,1fr) minmax(270px,1fr); }
}

@media (prefers-reduced-motion:reduce) {
    #og-entry *, #og-entry *::before, #og-entry *::after { transition:none !important; }
}