/* ============================
   MOBILE & TABLET ANSICHT
   Alles unter 1250px Breite
   ============================ */

@media (max-width: 1250px) {

  /* --- Grund-Layout: statt horizontal → vertikal --- */

  html,
  body {
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;

  }

  .horizontal-wrapper {
    display: block;
    height: auto;
    overflow-x: hidden;
    overflow-y: visible;
    scroll-snap-type: none;
    margin-top: 80px; /* Abstand unter dem Header */
  }

  .panel {
    width: 100%;
    height: auto;
    min-height: 100vh;
    scroll-snap-align: none;
    padding: 4rem 1.5rem 5rem;
    box-sizing: border-box;
    justify-content: center;
    align-items: center;
    margin-top: 1vh;
  }


  /* ============================
     PANEL 1 – Intro-Video
     ============================ */

  .panel-1 {
    padding-top: 2rem;
  }

  .hero-box {
    width: 90vw;
    max-width: 640px;
    aspect-ratio: 16/9;
    margin: 0 auto 3rem;
    flex-direction: column;
    gap: 20px;
  }

  .gold-box {
    width: 100%;
    aspect-ratio: 16/9;
  }


  /* ============================
     PANEL 2 – Bild + Glasbox
     ============================ */

  .panel-2 {
    padding-top: 2rem;
  }

  .content-wrapper {
    width: 90vw;
    max-width: 700px;
    grid-template-columns: 1fr;
    gap: 2.2rem;
  }

  .image-column {
    order: 1;
    text-align: center;
    position: relative !important;
    z-index: 0 !important;
  }

  .image-column img {
    max-width: 920px;
    margin: 0 auto;
    transform: none !important;
  }




  .glass-column {
    order: 2;
    width: 100%;
  }

  .glass-box {
    padding: 2rem 1.6rem 2.4rem;
    text-align: center;
  }

  .glass-box h2,
  .glass-box p {
    margin-left: 0;
    text-align: center;
  }

  .glass-box h2 {
    font-size: clamp(1.25rem, 1.2vw + 0.9rem, 1.8rem);

  }

  .glass-box p {
    font-size: 1.05rem;
  }

  .btn-row {
    flex-direction: column;
    margin: 2.2rem auto 0.5rem;
    width: 100%;
  }

  .btn-gallery {
    width: 100%;
    justify-content: center;
  }


  /* ============================
     Mini-Marlena Position
     ============================ */

  #marlena {
    transform: scale(1.0);
    left: 52%;
    top: 63%;
  }


  /* ============================
     PANEL 3 – Galerie
     ============================ */

  .gallery-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
    width: 90vw;
    margin-top: 2rem;
  }

  .gallery-box {
    margin-bottom: 2rem;
    transform: none !important;
  }

  .gallery-heading h2 {
    font-size: 2.2rem;
    margin-bottom: 2rem;
  }

  .tap-hint {
    display: block !important;
  }
}



/* bis hier hin schön */



@media (max-width: 1250px) {

  /* Footer darf wachsen und nicht überlaufen */
  .site-footer {
    height: auto !important;
    padding: 2rem 1rem !important;
  }

  .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.5rem !important;
  }

  /* Obere Fußzeile: 2 Reihen nebeneinander – aber lesbar */
  .footer-row--top {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.4rem !important;
  }

  /* Einzelne Datenpunkte */
  .footer-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 0.8rem !important;
  }

  .footer-item--socials {
    grid-column: span 2 !important; /* Social icons über volle Breite */
    justify-content: center !important;
  }

  /* Untere Fußzeile */
  .footer-row--bottom {
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
  }

  .footer-links a {
    display: inline-block !important;
    margin: 0 0.5rem !important;
  }

}







/* ========= Footer noch schmaler (<=1250px) ========= */
@media (max-width: 1250px) {
  .site-footer {
    --footer-pad-y: 10px;        /* vorher 18 -> kompakter */
    padding: var(--footer-pad-y) 12px !important;
  }

  .footer-inner      { gap: 8px !important; }
  .footer-row        { margin-bottom: 8px !important; }
  .footer-item       { margin-bottom: 6px !important; }

  .fi-icon           { width: 16px !important; height: 16px !important; }
  .fi-label          { font-size: 0.9rem !important; line-height: 1.15 !important; }
  .fi-value, .footer-links a, .footer-copy small {
    font-size: 0.88rem !important; line-height: 1.2 !important;
  }
}

/* ========= sehr schmal (<=700px) ========= */
@media (max-width: 700px) {
  .site-footer       { --footer-pad-y: 8px; padding: var(--footer-pad-y) 10px !important; }
  .footer-inner      { gap: 6px !important; }
  .footer-row        { margin-bottom: 6px !important; }
  .footer-item       { margin-bottom: 4px !important; }

  .fi-icon           { width: 15px !important; height: 15px !important; }
  .fi-label          { font-size: 0.88rem !important; }
  .fi-value, .footer-links a, .footer-copy small {
    font-size: 0.86rem !important;
  }
}

/* ========= ultra-eng (<=420px) ========= */
@media (max-width: 420px) {
  .site-footer       { --footer-pad-y: 6px; padding: var(--footer-pad-y) 8px !important; }
  .footer-inner      { gap: 4px !important; }
  .footer-row        { margin-bottom: 4px !important; }
  .footer-item       { margin-bottom: 3px !important; }

  .fi-icon           { width: 14px !important; height: 14px !important; }
  .fi-label          { font-size: 0.86rem !important; }
  .fi-value, .footer-links a, .footer-copy small {
    font-size: 0.84rem !important;
  }
}

/* Footer wird erst am Ende "fix" – per sticky (mobile) */
@media (max-width: 1250px) {
  .site-footer {
    position: sticky;
    position: -webkit-sticky; /* iOS */
    bottom: 0;
    z-index: 9999;
  }

  /* Sicherheit: kein Clipping durch Container */
  html, body, .horizontal-wrapper {
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }
}

@media (max-width: 1250px) {
  .horizontal-wrapper { margin-top: 0 !important; }
  /* Optional: wenn dir der Start dann zu dicht ist, hauchdünn nachpolstern: */
  .panel-1 { padding-top: 2rem !important; } /* Wert nach Geschmack anpassen */
}

@media (max-width: 1250px) {
  .site-footer address.fi-value {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

@media (max-width: 1250px) {
  .site-footer .fi-value[href^="tel:"],
  .site-footer .fi-value[role="link"] {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

@media (max-width: 1250px) {
  /* Optik: erkennbar klickbar */
  .site-footer a.fi-value[href^="mailto:"],
  .site-footer .fi-value[role="link"][data-mailto] {
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

/* Footer-Icons größer (nur mobil) */
@media (max-width: 1250px) {
  .footer-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px !important;            /* etwas Luft zwischen Icon & Text */
  }
  .fi-icon {
    width: 26px !important;
    height: 26px !important;
    flex-shrink: 0 !important;       /* verhindert Zusammendrücken */
    display: inline-block !important;
  }
}

/* sehr schmale Geräte: etwas kompakter, aber größer als vorher */
@media (max-width: 420px) {
  .fi-icon {
    width: 26px !important;
    height: 26px !important;
  }
}

/* Footer: klares WhatsApp-Icon (nur mobil) */
@media (max-width: 1250px) {
  /* altes WA-SVG im Footer ausblenden */
  .footer-item--socials a[aria-label="WhatsApp"] .fi-icon {
    display: none !important;
  }
}

/* WhatsApp: grüner Kreis mit weißem Logo */
@media (max-width:1250px){
  .footer-item--socials[aria-label="WhatsApp"]::before{
    content:"";
    display:inline-block; width:24px; height:24px;
    background-repeat:no-repeat; background-position:center; background-size:contain;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%2325D366'/%3E%3Cpath fill='%23fff' d='M19.6 17.5c-.2-.1-1.2-.6-1.4-.7s-.3-.1-.5.1-.6.7-.7.8-.3.2-.6.1-1.2-.4-2.3-1.3-1.7-1.9-1.9-2.2 0-.5.1-.6.2-.3.3-.4.1-.2.2-.4 0-.3 0-.4-.5-1.2-.7-1.6-.4-.4-.5-.4h-.4c-.2 0-.5.1-.7.3s-.9.8-.9 2 1 2.3 1.1 2.4 2 3 4.8 4.2c.7.3 1.2.4 1.6.5.7.2 1.1.1 1.5.1.5-.1 1.4-.6 1.6-1.1.2-.5.2-.9.1-1.0s-.2-.2-.4-.3z'/%3E%3C/svg%3E");
    vertical-align:middle;
    margin-right:8px;
  }
}


/* Instagram: farbiger Verlauf – kompaktes Icon */
@media (max-width:1250px){
  .footer-item--socials[aria-label="Instagram"]::before{
    content:"";
    display:inline-block; width:24px; height:24px;
    background-repeat:no-repeat; background-position:center; background-size:contain;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f58529'/%3E%3Cstop offset='0.25' stop-color='%23feda77'/%3E%3Cstop offset='0.5' stop-color='%23dd2a7b'/%3E%3Cstop offset='0.75' stop-color='%238134af'/%3E%3Cstop offset='1' stop-color='%23515bd4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='32' y='32' width='448' height='448' rx='96' fill='url(%23g)'/%3E%3Ccircle cx='352' cy='160' r='32' fill='%23fff'/%3E%3Ccircle cx='256' cy='256' r='96' fill='none' stroke='%23fff' stroke-width='40'/%3E%3Crect x='128' y='128' width='256' height='256' rx='76' fill='none' stroke='%23fff' stroke-width='40'/%3E%3C/svg%3E");
    vertical-align:middle;
    margin-right:8px;
  }
}


/* Mobile: schlanke Zahlungszeile im Footer */
@media (max-width: 1250px) {
  .footer-payments {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px 10px !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 0.9rem !important;
    opacity: 0.95;
  }
  .footer-payments .fp-label {
    font-weight: 600 !important;
  }
  .footer-payments .fp-more {
    text-decoration: underline;
    text-underline-offset: 2px;
  }
}

@media (max-width: 1250px) {
  /* Parallax hinter dem Inhalt fixieren */
  #parallax {
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    display: block !important;
    overflow: hidden !important;
  }
  #parallax .layer {
    position: absolute !important;
    left: 0; right: 0; top: 0;
    width: 100vw; height: 150vh;   /* etwas größer gegen Ränder */
    background-repeat: no-repeat;
    background-size: cover;
    will-change: transform;
    transform: translate3d(0,0,0); /* initial */
  }
  /* Inhalt über dem Parallax */
  .horizontal-wrapper { position: relative !important; z-index: 1 !important; }
}



@media (max-width: 1250px) {
  .ruby-header{
    padding-top: max(env(safe-area-inset-top), 0px) !important;
  }
  .rh-nav{
    /* Menü unter dem Header inkl. Safe-Area starten */
    top: calc(100px + env(safe-area-inset-top)) !important;
  }
}


@media (max-width: 1250px) {
  .footer-payments{ align-items: center !important; }
  .footer-payments .fp-icons{ display: inline-flex; gap: 8px; margin-right: 6px; }
  .footer-payments .ic{ width: 16px; height: 16px; display: inline-block; background: no-repeat center/contain; }

  /* Cash */
  .footer-payments .ic-cash{
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='6' width='20' height='12' rx='2' fill='%2394c973'/%3E%3Ccircle cx='12' cy='12' r='3' fill='%23ffffff'/%3E%3C/svg%3E");
  }

  /* Card */
  .footer-payments .ic-card{
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='5' width='20' height='14' rx='2' fill='%233498db'/%3E%3Crect x='2' y='8' width='20' height='3' fill='%23000000' opacity='.3'/%3E%3C/svg%3E");
  }

  /* Contactless / NFC */
  .footer-payments .ic-nfc{
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 12c0-3 2-5 5-5m0 10c-3 0-5-2-5-5m8-7c3 0 7 4 7 7s-4 7-7 7' fill='none' stroke='%23e67e22' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  }
}

/* MOBILE: farbige IG/WA-Icons als ::before auf den Links */
@media (max-width: 1250px) {
  /* Link selbst vorbereiten */
  .footer-item--socials a[aria-label="Instagram"],
  .footer-item--socials a[aria-label="WhatsApp"]{
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  /* alte Inline-SVGs im Link ausblenden */
  .footer-item--socials a[aria-label="Instagram"] svg,
  .footer-item--socials a[aria-label="WhatsApp"] svg{
    display: none !important;
  }

  /* WhatsApp */
  .footer-item--socials a[aria-label="WhatsApp"]::before{
    content:"";
    display:inline-block; width:24px; height:24px;
    background-repeat:no-repeat; background-position:center; background-size:contain;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Ccircle cx='16' cy='16' r='14' fill='%2325D366'/%3E%3Cpath fill='%23fff' d='M19.6 17.5c-.2-.1-1.2-.6-1.4-.7s-.3-.1-.5.1-.6.7-.7.8-.3.2-.6.1-1.2-.4-2.3-1.3-1.7-1.9-1.9-2.2 0-.5.1-.6.2-.3.3-.4.1-.2.2-.4 0-.3 0-.4-.5-1.2-.7-1.6-.4-.4-.5-.4h-.4c-.2 0-.5.1-.7.3s-.9.8-.9 2 1 2.3 1.1 2.4 2 3 4.8 4.2c.7.3 1.2.4 1.6.5.7.2 1.1.1 1.5.1.5-.1 1.4-.6 1.6-1.1.2-.5.2-.9.1-1.0s-.2-.2-.4-.3z'/%3E%3C/svg%3E");
    vertical-align: middle;
  }

  /* Instagram */
  .footer-item--socials a[aria-label="Instagram"]::before{
    content:"";
    display:inline-block; width:24px; height:24px;
    background-repeat:no-repeat; background-position:center; background-size:contain;
    background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23f58529'/%3E%3Cstop offset='0.25' stop-color='%23feda77'/%3E%3Cstop offset='0.5' stop-color='%23dd2a7b'/%3E%3Cstop offset='0.75' stop-color='%238134af'/%3E%3Cstop offset='1' stop-color='%23515bd4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='32' y='32' width='448' height='448' rx='96' fill='url(%23g)'/%3E%3Ccircle cx='352' cy='160' r='32' fill='%23fff'/%3E%3Ccircle cx='256' cy='256' r='96' fill='none' stroke='%23fff' stroke-width='40'/%3E%3Crect x='128' y='128' width='256' height='256' rx='76' fill='none' stroke='%23fff' stroke-width='40'/%3E%3C/svg%3E");
    vertical-align: middle;
  }
}

/* MOBILE: "Jetzt geöffnet" Badge im Header ausblenden */
@media (max-width: 1250px) {
  .ruby-header .open-badge,
  .ruby-header .geoeffnet-badge,
  .ruby-header .open-indicator,
  .ruby-header .is-open,
  .ruby-header [data-open],
  .ruby-header [data-status="open"] {
    display: none !important;
  }
}

@media (max-width: 1250px) {
  .panel-2 {
    position: relative !important;
  }

  /* Überschrift über dem gesamten Inhalt */
  .panel-2 .panel-title {
    position: absolute !important;
    top: 3.8rem !important;        /* etwas unter dem Header */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 85% !important;
    text-align: center !important;
    font-family: "Pacifico", cursive !important;
    font-size: 1.8rem !important;
    font-weight: 400 !important;
    color: #ffffff !important; /* Weiß mit Goldglow */
    text-shadow:
      0 0 6px rgba(209,182,98,0.8),
      0 0 14px rgba(209,182,98,0.5),
      0 0 24px rgba(209,182,98,0.3) !important;
    z-index: 20 !important;
    margin: 0 !important;
    padding:0rem 1rem !important;
  }

  /* Platz für die Überschrift schaffen */
  .panel-2 .content-wrapper {
    margin-top: 12rem !important;
  }
}

@media (max-width: 1250px) {
  /* Weiter-Button im Panel 1 komplett entfernen + Platz löschen */
  .panel-1 .continue-btn,
  .panel-1 .under-video {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media (max-width: 1250px) {
  /* globales Panel-Padding überschreiben */
  .panel {
    padding-bottom: 1rem !important; /* vorher 5rem */
  }

  /* Panel 1 minimal enger */
  .panel-1 {
    padding-bottom: 0.5rem !important;
  }

  /* Panel 2 darf noch dichter anschließen */
  .panel-2 {
    margin-top: -4rem !important;
    padding-top: 5.5rem !important;
  }
}



@media (max-width: 1250px) {
  /* Buttons in Panel 2 – schmaler & wirklich mittig */
  .panel-2 .btn-row {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 2rem auto 0;
    width: 100%;
    gap: 2rem;
  }

  .panel-2 .btn-gallery {
    width: 85%;              /* vorher 100% → schmaler, schöner */
    max-width: 320px;        /* feste Obergrenze */
    margin: 0 auto;
    text-align: center;
    justify-content: center;
  }

  /* Optional: leichter Goldrahmen betont */
  .panel-2 .btn-gallery.btn-primary {
    border-width: 1.6px;
    box-shadow:
      0 0 12px rgba(209,182,98,0.25),
      0 0 28px rgba(209,182,98,0.15);
  }
}

@media (max-width: 1250px) {
  /* Touch-Feedback für Buttons in der Goldbox */
  .panel-2 .btn-gallery:active {
    background: rgba(209,182,98,0.45);   /* etwas satteres Gold */
    color: #fff;                         /* heller Text beim Drücken */
    transform: scale(0.97);              /* leichtes Einsinken */
    box-shadow: 0 0 10px rgba(209,182,98,0.35);
    transition: none;                    /* sofortige Reaktion */
  }
}

@media (max-width: 1250px) {
  /* Panel 1 – responsive Schriftgröße für den Slogan */
  .panel-1-slogan {
    font-size: clamp(1.8rem, 6vw, 2.6rem); /* skaliert sanft mit Bildschirmbreite */
    line-height: 1.2;
    margin-top: 3rem;  /* etwas mehr Luft nach oben als Ausgleich */
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 1250px) {
  /* Panel 3 – "Zur Galerie"-Button */
  .panel-3 .btn-gallery {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 70%;              /* schmaler – statt volle Breite */
    max-width: 260px;        /* Obergrenze */
    margin: 1.8rem auto 0;   /* zentriert */
    padding: 0.7rem 1rem;
    font-size: 1rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.507);
    color: rgba(209,182,98,0.95);
    border: 1.3px solid rgba(255,255,255,0.15);
    transition: background 0.25s ease, transform 0.25s ease;
    text-align: center;
  }

  /* Touch Feedback */
  .panel-3 .btn-gallery:active {
    background: rgba(209,182,98,0.4);
    transform: scale(0.96);
  }
}



/* PANEL 3 – Pyramid-Layout (Mobile) */
@media (max-width: 1250px) {
  .panel-3 .gallery-grid {
    --boxW: clamp(220px, 42vw, 320px);
    display: grid;
    grid-template-columns: repeat(2, minmax(0, var(--boxW)));
    justify-content: center;      /* zentriert das Grid im Container */
    gap: 1.2rem 1.2rem;
    width: 100%;
  }

  .panel-3 .gallery-box {
    width: var(--boxW);
    padding-top: 150%;            /* 2:3 Verhältnis beibehalten */
    margin: 0;                    /* Pyramide kompakt */
    transform: none !important;   /* keine Schrägstellung auf Mobile */
  }

  /* Top: Box 1 zentriert über beiden Spalten (aber gleiche Breite) */
  .panel-3 .gallery-box:nth-child(1) {
    grid-column: 1 / -1;          /* über beide Spalten „stehen“ */
    justify-self: center;         /* …aber Breite bleibt var(--boxW) */
    z-index: 3;
  }

  /* Bottom: Box 2 links, Box 3 rechts */
  .panel-3 .gallery-box:nth-child(2) { grid-column: 1; z-index: 2; }
  .panel-3 .gallery-box:nth-child(3) { grid-column: 2; z-index: 2; }

  /* Tap-Flip Klasse (für Mobile per JS) */
  .panel-3 .gallery-box.flipped .image.front { opacity: 0; }
  .panel-3 .gallery-box.flipped .image.back  { opacity: 1; }
}

/* === PANEL 3 · Mobile-Pyramide (harte Overrides) === */
@media (max-width: 1250px) {
  /* Grid: 2 Spalten, zentriert */
  .panel-3 .gallery-content .gallery-grid {
    --boxW: clamp(220px, 42vw, 320px);
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, var(--boxW))) !important;
    justify-content: center !important;   /* zentriert das Grid */
    justify-items: center !important;      /* zentriert die Boxen in den Zellen */
    align-items: start !important;
    gap: 1.2rem 1.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Boxen: alle gleich groß, keine Rotation, kein extra Z-Index */
  .panel-3 .gallery-content .gallery-box {
    width: var(--boxW) !important;
    padding-top: 150% !important;          /* 2:3 Verhältnis */
    margin: 0 !important;
    transform: none !important;
    z-index: auto !important;
  }

  /* Bild 1 zentriert oben, gleiche Breite wie die anderen */
  .panel-3 .gallery-content .gallery-box:nth-child(1) {
    grid-column: 1 / -1 !important;        /* „über“ beide Spalten stehen */
    justify-self: center !important;        /* …aber nur var(--boxW) breit */
  }

  /* Bild 2 links, Bild 3 rechts unten */
  .panel-3 .gallery-content .gallery-box:nth-child(2) { grid-column: 1 !important; }
  .panel-3 .gallery-content .gallery-box:nth-child(3) { grid-column: 2 !important; }

  /* Flip-Logik für Tap (statt :hover vom Desktop) */
  .panel-3 .gallery-content .gallery-box .image.back { opacity: 0 !important; }
  .panel-3 .gallery-content .gallery-box.flipped .image.front { opacity: 0 !important; }
  .panel-3 .gallery-content .gallery-box.flipped .image.back  { opacity: 1 !important; }
  /* Desktop-Hover auf Mobile neutralisieren */
  .panel-3 .gallery-content .gallery-box:hover .image.back { opacity: 0 !important; }
}

/* === PANEL 3 · Mobile-Pyramide: Fix Größen, Ebenen & Flip === */
@media (max-width: 1250px) {
  /* Grid: 2 Spalten, Box 1 oben mittig, 2+3 unten */
  .panel-3 .gallery-grid {
    --boxW: clamp(220px, 42vw, 320px);
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, var(--boxW))) !important;
    grid-auto-rows: auto !important;
    justify-content: center !important;
    justify-items: center !important;
    align-items: start !important;
    gap: 1.2rem 1.2rem !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  /* Alle Boxen exakt gleich groß und ohne Rotationen/Z-Indices vom Desktop */
  .panel-3 .gallery-box {
    width: var(--boxW) !important;
    padding-top: 150% !important;     /* 2:3 Verhältnis */
    margin: 0 !important;
    transform: none !important;
    z-index: 1 !important;
    position: relative !important;
  }

  /* Pyramiden-Position erzwingen (verhindert "doppelte Höhe") */
  .panel-3 .gallery-box:nth-child(1) {
    grid-column: 1 / -1 !important;   /* oben mittig */
    grid-row: 1 !important;
    justify-self: center !important;
    z-index: 5 !important;             /* sicher vor 2+3 */
  }
  .panel-3 .gallery-box:nth-child(2) { grid-column: 1 !important; grid-row: 2 !important; }
  .panel-3 .gallery-box:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }

  /* Flip-Logik explizit (sonst sieht man die Glasbox, wenn beide opacities 0 wären) */
  .panel-3 .gallery-box .image.front { opacity: 1 !important; }
  .panel-3 .gallery-box .image.back  { opacity: 0 !important; }
  .panel-3 .gallery-box.flipped .image.front { opacity: 0 !important; }
  .panel-3 .gallery-box.flipped .image.back  { opacity: 1 !important; }

  /* Desktop-Hover neutralisieren (sonst „springt“ es ins Back-Image beim Überfahren) */
  .panel-3 .gallery-box:hover .image.back { opacity: 0 !important; }
}
/* === PANEL 3 · Mobile: Bild 1 weniger hoch === */
@media (max-width: 1250px) {
  /* Oberes Bild (Box 1) flacher machen */
  .panel-3 .gallery-grid > .gallery-box:nth-child(1) {
    padding-top: 76% !important; /* statt 150% → wirkt deutlich weniger „länglich“ */
  }

  /* Sicherheit: Inhalt sauber füllen */
  .panel-3 .gallery-grid > .gallery-box:nth-child(1) .image {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}
/* PANEL 3 · Mobile: Flip-States eindeutig */
@media (max-width: 1250px) {
  .panel-3 .gallery-box .image.front { opacity: 1 !important; }
  .panel-3 .gallery-box .image.back  { opacity: 0 !important; }

  /* Tap-Flip per Klasse */
  .panel-3 .gallery-box.flipped .image.front { opacity: 0 !important; }
  .panel-3 .gallery-box.flipped .image.back  { opacity: 1 !important; }

  /* Hover neutralisieren, ohne Flip zu zerstören */
  .panel-3 .gallery-box:hover .image.back { opacity: 0 !important; }
  .panel-3 .gallery-box.flipped:hover .image.back { opacity: 1 !important; }
}
@media (max-width: 1250px) {
  .panel-3 .gallery-box .image.front { opacity: 1 !important; }
  .panel-3 .gallery-box .image.back  { opacity: 0 !important; }
  .panel-3 .gallery-box.flipped .image.front { opacity: 0 !important; }
  .panel-3 .gallery-box.flipped .image.back  { opacity: 1 !important; }
  .panel-3 .gallery-box:hover .image.back { opacity: 0 !important; }
  .panel-3 .gallery-box.flipped:hover .image.back { opacity: 1 !important; }
}



/* ============================
   FOOTER · sauber & responsiv (nur <1250px)
   Vier Ecken oben · Socials mittig
   Gleichmäßig verteilte Unterzeile
   ============================ */
/* === MOBILE: Footer zuerst komplett sichtbar & simpel stapeln === */
@media (max-width:1250px){

  /* Keine Überläufe, volle Breite */
  .site-footer,
  .site-footer .footer-inner{
    width:100% !important;
    max-width:100% !important;
    overflow:visible !important;
    padding-left:7px !important;
    padding-right:16px !important;
  }

  /* Reihen neutralisieren: KEIN grid/flex-Layout erzwingen */
  .site-footer .footer-row--top,
  .site-footer .footer-row--bottom{
    display:block !important;      /* Blockfluss → alles sichtbar */
    padding-top:6px !important;
    padding-bottom:6px !important;
    border-top:none !important;
    margin-right: 10px !important;
    width: 100% !important;
  }

  /* Jedes Element volle Zeile, nichts quetschen/ausblenden */
  .site-footer .footer-row--top .footer-item,
  .site-footer .footer-row--bottom > *{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    width:80% !important;
    max-width:none !important;
    min-width:0 !important;
    margin:6px 0 !important;
    white-space:normal !important;         /* keine nowraps */
    overflow:visible !important;
    text-align:left !important;
  }

  /* Socials unter die 4 Kontakte, zentriert */
  .site-footer .footer-item--socials{
    justify-content:center !important;
    margin-top:8px !important;
  }
  .site-footer .footer-item--socials svg{
    display:block !important;      /* falls vorher via ::before gearbeitet wurde */
    width:24px !important;
    height:24px !important;
  }

  /* Rechtliches / Zahlungen / Copyright nicht verstecken */
  .site-footer .footer-links{
    display:flex !important;
    gap:12px !important;
    justify-content:center !important;
    flex-wrap:wrap !important;
    margin:6px 0 !important;
  }
  .site-footer .footer-payments{
    display:inline-flex !important;
    flex-wrap:wrap !important;
    gap:6px 8px !important;
    justify-content:center !important;
    margin:6px 0 !important;
  }
  .site-footer .footer-copy{
    display:block !important;
    text-align:center !important;
    margin:6px 0 !important;
  }

  /* Kleine Icons/Typo – aber lesbar */
  .site-footer .fi-icon{ width:20px !important; height:20px !important; }
  .site-footer .fi-label{ font-size:.9rem !important; }
  .site-footer .fi-value,
  .site-footer .footer-links a,
  .site-footer .footer-copy small{
    font-size:.92rem !important;
  }
}

  @media (max-width:1250px){
  .site-footer .footer-row--top .footer-item{
    margin-bottom:16px!important
  }
}

/* bis hier alles schön */ 

/* Secret Ritual Popup: mobil unter Header bleiben + nicht zu hoch werden */
@media (max-width:1250px){
  .ritual-popup{
    padding-top: 150px !important;
    z-index: 100000 !important;                 /* über dem Header (der hat 9999) */
    align-items: flex-start !important;         /* von oben einfliegen, nicht zentriert */
    
  
  }
  .ritual-popup .popup-content{
    width: min(70vw, 720px) !important;         /* schmal genug für kleine Screens */
    max-height: 67vh !important; /* nie vom Header verdeckt */
    height: auto !important;                    /* statt fixer Höhe */
    overflow: auto !important;                  /* Inhalt scrollbar machen */
    padding-top: 3.2rem !important;             /* Platz fürs X */
    
  }
  .ritual-popup .close-popup{
    position: sticky !important;                /* X bleibt oben sichtbar */
    top: 8px !important;
    right: 12px !important;
    z-index: 1 !important;
  }
}

/* ≤1250px – Parallax mobil mit vertikalen PNGs (Pfad relativ zur CSS) */
@media (max-width:1250px){
  /* Bühne hinter dem Inhalt, sichtbar */
  #parallax{
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
  }
  /* Layer füllen die Bühne */
  #parallax .layer{
    position: absolute !important;
    inset: 0 !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* >>> Pfade relativ zur CSS-Datei (../bilder/mobile/...) <<< */
  #parallax .layer-1{ background-image: url("bilder/mobile/1.webp") !important; }
  #parallax .layer-2{ background-image: url("bilder/mobile/2.webp") !important; }
  #parallax .layer-3{ background-image: url("bilder/mobile/3.webp") !important; }
  #parallax .layer-4{ background-image: url("bilder/mobile/4.webp") !important; }
  #parallax .layer-5{ background-image: url("bilder/mobile/5.webp") !important; }
}

/* ≤1250px — VARIANTE A: Layer-1 hart pinnen (kein Scroll/Transform) */
@media (max-width:1250px){
  body.page-mein-weg{ position: relative !important; z-index: 1 !important; }

  #parallax .layer-1{
    position: fixed !important;
    inset: 0 !important;

    /* Parallax-JS neutralisieren NUR für L1 */
    transform: none !important;
    translate: 0 0 !important;
    rotate: 0deg !important;
    scale: 1 !important;

    /* vertikales Bild */
    background-image: url("bilder/mobile/1.webp") !important;
    background-size: cover !important;
    background-position: center top !important;
    background-repeat: no-repeat !important;

    /* Viewport-sicher (gegen Safari/URL-Bar) */
    height: 120svh !important;
    min-height: 120svh !important;
  }
  @supports (height: 100dvh){
    #parallax .layer-1{
      height: 900px !important;
    }
  }
}

/* ≤1250px – Parallax: Layer 2–5 endlos nach unten, ohne Vergrößerung */
@media (max-width:1250px){
  /* Basis je Layer: deine Parallax-Transforms/Speed-Regeln bleiben bestehen */
  #parallax .layer-2,
  #parallax .layer-3,
  #parallax .layer-4,
  #parallax .layer-5{
    position: fixed !important;
    inset: 0 !important;
    overflow: visible !important;
    background-size: 100% auto !important;     /* volle Breite, keine Höhen-Skalierung */
    background-position: center top !important;
    will-change: transform;
    height: 260vh !important; 
    background-repeat: repeat-y !important;
    
  }

  /* Endlos-Kachel über Pseudo-Element (erbt Parallax-Transform vom Parent) */
  #parallax .layer-2::before,
  #parallax .layer-3::before,
  #parallax .layer-4::before,
  #parallax .layer-5::before{
    content: "" !important;
    position: absolute !important;
    left: 0 !important; right: 0 !important;
    top: -300vh !important;              /* weit oberhalb starten */
    height: 900vh !important;            /* groß genug für langen Scroll */
    pointer-events: none !important;
    z-index: 0 !important;

    background-image: inherit !important;
    background-repeat: repeat-y !important;
    background-size: 100% auto !important;     /* keine Vergrößerung */
    background-position: center top !important;
  }

  /* Feine Offsets gegen sichtbare Nähte (bei Bedarf) */
  #parallax .layer-3::before{ background-position: center 1px !important; }
  #parallax .layer-4::before{ background-position: center 1px !important; }
}

/* INDEX · Mobile (≤1250px) – Ruby-Glass wieder aktivieren */
@media (max-width:1250px){

  /* Parallax hinten, Inhalt davor (nur index.html) */
  #parallax{ z-index: 0 !important; }
  .horizontal-wrapper,
  main,
  .panel{
    position: relative !important;
    z-index: 1 !important;
  }

  /* Haupt-Glassboxen auf index.html (z.B. um Video/Sections) */
  .gold-box,
  .glass-box,
  .glass-card{
    /* halbtransparenter Hintergrund, damit Backdrop greift */
    background-color: rgba(255,255,255,0.12) !important;
    background-image: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02)) !important;
    background-clip: padding-box !important;

    /* Ruby-Glass-Look */
    backdrop-filter: blur(5px) saturate(120%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(120%) !important;

    border: 3px solid rgba(209,182,98,0.85) !important;
    border-radius: 14px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,0.26) !important;
  }

  /* Glas-CTAs/Buttons auf index (helles Glas, dezenter Rand) */
  .btn-cta,
  .ghost-btn,
  .btn-gallery{
    background: rgba(255,255,255,0.14) !important;
    border: 1px solid rgba(209,182,98,0.55) !important;
    backdrop-filter: blur(5px) saturate(110%) !important;
    -webkit-backdrop-filter: blur(5px) saturate(110%) !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
}

/* INDEX · Panel 3 – Anti-Overlap auf Mini-Phones */
@media (max-width:480px){
  /* Boxen kleiner skalieren, damit die Pyramide (1 oben, 2+3 unten) sauber passt */
  .panel-3 .gallery-content .gallery-grid{
    --boxW: clamp(140px, 36vw, 180px) !important;  /* vorher 220–320px → kleiner */
    gap: 0.9rem 0.9rem !important;                 /* etwas enger, verhindert Überlapp */
    justify-content: center !important;
    justify-items: center !important;
  }

  .panel-3 .gallery-content .gallery-box{
    width: var(--boxW) !important;
    padding-top: 150% !important;  /* 2:3 bleibt */
    box-sizing: border-box !important;
  }
  /* Pyramiden-Position beibehalten */
  .panel-3 .gallery-content .gallery-box:nth-child(1){
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
  }
  .panel-3 .gallery-content .gallery-box:nth-child(2){ grid-column: 1 !important; grid-row: 2 !important; }
  .panel-3 .gallery-content .gallery-box:nth-child(3){ grid-column: 2 !important; grid-row: 2 !important; }
}

/* Ultra-klein (Failsafe): wenn’s trotzdem drängt, minimal kleiner oder 1 Spalte */
@media (max-width:340px){
  .panel-3 .gallery-content .gallery-grid{ --boxW: clamp(128px, 34vw, 160px) !important; }
  /* Alternativ (wenn gewünscht): einspaltig
  .panel-3 .gallery-content .gallery-grid{ grid-template-columns: 1fr !important; }
  */
}

/* Failsafe sehr klein */
@media (max-width:360px){
  .panel-3 .gallery-content .gallery-grid{
    --boxW: clamp(120px, 32vw, 152px) !important;
    gap: 0.7rem !important;
  }}

/* Bis hier sehr gut */ 

#parallax .layer::before {
    background: none !important;
    content: none !important;
}


@media (max-width: 1250px){
.ritual-popup{
padding-top: 15%;

}

.ritual-popup .popup-content {
    padding: 0 !important;
    min-width: 90vw !important;
}

.popup-content h2 {
    font-size: 1.6rem;
    margin-bottom: 0.1rem;
    margin-top: 0rem;
}

.popup-content p {
    font-size: 1.2rem;
    line-height: 1.3;
}

.ritual-popup .close-popup {
    position: sticky !important;
    top: -40px !important;
    font-size: 3rem !important;
}

.ritual-popup .whatsapp-btn {
    margin-top: 0.1rem; 
    margin-bottom: 10px;
    padding: 0.9rem 1rem;
}  
}