#rubyHeader > div > a.rh-whatsapp > span {
  color: rgb(255, 255, 255);
}


/* Referenziert: dein aktuelles globales HTML/CSS/JS */
/* Regeln: keine Experimente • nur exakt auf Anweisung • keine ungefragten Fixes/Änderungen */

/* ============ LOCAL FONTS ============ */
@font-face{
  font-family:"Lato";
  src:url("../fonts/Lato-Medium.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Lato";
  src:url("../fonts/Lato-Bold.ttf") format("truetype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}


@font-face{
  font-family:"Pacifico";
  src:url("../fonts/Pacifico-Regular.ttf") format("truetype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}



/* PARALLAX */
#parallax {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

#parallax .layer {
  position: absolute;
  inset: 0;
  background-size: cover;          /* füllt die Seite */
  background-position: center center; /* Startpunkt definieren */
  background-repeat: no-repeat;
}

/* LAYER 1 → FIX, kein Bewegen, kein Zoomen */
.layer-1 {
  background-image: url("../bilder/1.webp");
  background-size: contain;       /* zeigt das Bild komplett */
  background-position: center center;
  background-repeat: no-repeat;   /* kein tiles */
}

/* LAYER 2–5 → Bewegliche Tiefenschichten */
/* Deine Bilder */
.layer-2 { background-image: url("../bilder/2.webp"); }
.layer-3 { background-image: url("../bilder/3.webp"); }
.layer-4 { background-image: url("../bilder/4.webp"); }
.layer-5 { background-image: url("../bilder/5.webp"); }

#parallax .layer-2 { min-width: 110vw !important; }
#parallax .layer-3 { min-width: 120vw !important; }
#parallax .layer-4 { min-width: 130vw !important; }
#parallax .layer-5 { min-width: 140vw !important; }



/* --------- Ruby Header (links fixed) --------- */
:root {
  --ruby-tannengruen: #264b3d;    /* dein Tannengrün (anpassen) */
  --ruby-gold: rgba(209,182,98,0.95);
  --header-w:250px;               /* normale Breite */
  --header-w-shrunk: 150px;       /* geschrumpfte Breite */
  --header-transition: 280ms;
}

/* Basis */
.ruby-header {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: var(--header-w);
  z-index: 9999;
  display: flex;
  align-items: center;
  pointer-events: none; /* inner elements enable pointer-events */
  transition: width var(--header-transition) ease, opacity var(--header-transition) ease;
}

.nav-direct.nav-ueber {
  font-family: 'Lato';
}

.rh-nav a{
  font-family: 'Lato';
}

/* Sichtbare Innenschicht */
.ruby-header .rh-inner {
  pointer-events: auto;
  width: 100%;
  height: 100%;
  background: linear-gradient(180deg, var(--ruby-tannengruen), color-mix(in srgb, var(--ruby-tannengruen) 80%, black 10%));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 0;
  box-sizing: border-box;
  transition: transform var(--header-transition) ease, background var(--header-transition) ease;
  box-shadow: 2px 0 18px rgba(0,0,0,0.25);
}


@media (min-width: 1251px) and (max-height: 670px) {
.ruby-header .rh-inner {
  pointer-events: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0rem;
  padding: 0;
  box-sizing: border-box;
}

.rh-whatsapp {
  margin-top: 1rem !important;
}
}

@media (min-width: 1251px) and (max-height: 550px) {
.rh-whatsapp {
  margin-top: 0.1rem !important;
}
}

/* Logo */
.rh-logo img {
  display: block;
  width: 150px;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  margin-bottom: 0.2rem;
  transition: transform var(--header-transition) ease;
}

/* Navigation */
/* ---------- Menü: linksbündig, einheitliche Kante ---------- */

/* Parent-Container: volle Breite der Sidebar nutzen */
.rh-nav {
  width: 100%;
  display: block;
  padding: 0;
  margin: 0;
}

/* Liste: volle Breite, kein zentrieren */
.rh-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 100%;
  display: block;
}

/* Jeder Listeneintrag nimmt volle Breite ein */
.rh-nav ul > li {
  width: 100%;
  box-sizing: border-box;
}

/* Links und Toggle-Buttons: gleiche Darstellung, linksbündig */
.rh-nav > ul > li > a,
.rh-nav > ul > li > .submenu-toggle {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 0.6rem 2rem;    /* links/rechts-Padding — passt optisch zur Sidebar */
  text-align: left;        /* linksbündig */
  color: #fff;
  background: transparent;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
}

/* Optional: leichte Hover-Visuals */
.rh-nav > ul > li > a:hover,
.rh-nav > ul > li > .submenu-toggle:hover,
.rh-nav > ul > li > a:focus,
.rh-nav > ul > li > .submenu-toggle:focus {
  background: rgba(255,255,255,0.06);
  outline: none;
}

/* Submenu: genau unter dem Parent, gleiche Breite, mit kleinem Einzug */
.submenu {
  width: 100%;
  box-sizing: border-box;
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms ease, opacity 220ms ease;
  opacity: 0;
  margin: 0;
  padding: 0;
}

/* geöffnete Submenu-Ansicht */
.submenu.open {
  opacity: 1;
  max-height: 320px;
}

/* Submenu-Einträge: gleiche Breiten & Padding, mit Einzug */
.submenu li { width: 100%; box-sizing: border-box; }
.submenu a {
  display: block;
  padding: 0.55rem 1rem;
  padding-left: 1.6rem;   /* Einzug, damit Unterpunkte sichtbar sind */
  color: rgba(255,255,255,0.92);
  text-decoration: none;
  font-size: 0.9rem;
}

/* sorgt dafür, dass die Toggle-Button-Breite exakt mit Links übereinstimmt */
.submenu-toggle {
  background: transparent;
  border: none;
  cursor: pointer;
}

/* kleine optische Hilfen (optional) */
.rh-nav a,
.submenu-toggle { letter-spacing: 0.2px; }

/* WhatsApp Button (immer sichtbar in Header) */
.rh-whatsapp {
  display: inline-flex;
  gap: .5rem;
  font-family: 'Lato';
  align-items: center;
  justify-content: center;
  padding: .55rem .7rem;
  margin-bottom: 2rem;
  margin-top: 5rem;
  background: linear-gradient(90deg, var(--ruby-gold), rgba(209,182,98,0.7));
  color: #123; /* Icon uses currentColor -> will be dark */
  text-decoration: none;
  font-weight: 700;
  font-size: .88rem;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.06);
  white-space: nowrap;
}
/* WhatsApp Button — Hover / Focus / Active */
.rh-whatsapp {
  transition: transform 220ms cubic-bezier(.2,.9,.3,1),
              box-shadow 220ms cubic-bezier(.2,.9,.3,1),
              filter 220ms ease,
              background 220ms ease;
  will-change: transform, box-shadow, filter;
}

/* Iconfarbe über currentColor steuern (setzt already vorhandes color) */
.rh-whatsapp .wa-icon { color: white; }

/* Hover: kleiner „pop“, stärkerer Glanz + goldener Schein */
.rh-whatsapp:hover,
.rh-whatsapp:focus {
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 14px 34px rgba(32, 28, 20, 0.28),
              0 2px 8px rgba(209,182,98,0.18);
  filter: saturate(1.06) brightness(1.02);
  outline: none;
}

/* Active (gedrückt) — leicht zurückdrücken */
.rh-whatsapp:active {
  transform: translateY(-1px) scale(0.995);
  box-shadow: 0 8px 20px rgba(32,28,20,0.18);
}

/* Fokus-Ring für Tastaturnutzer (A11y) */
.rh-whatsapp:focus-visible {
  box-shadow: 0 10px 30px rgba(32, 28, 20, 0.22),
              0 0 0 4px rgba(209,182,98,0.12);
}

/* Wenn Header geschrumpft ist, zeigen wir trotzdem einen sichtbaren Hover-Effekt
   auch wenn der Text verborgen ist (span wird ausgeblendet, Icon bleibt) */
.ruby-header.shrunk .rh-whatsapp:hover,
.ruby-header.shrunk .rh-whatsapp:focus {
  transform: translateY(-3px) scale(1.06);
}

/* small label hidden when shrunk (we hide text) */
.ruby-header.shrunk .rh-whatsapp span { display: none; }
.ruby-header.shrunk .rh-logo img { transform: scale(.9); }

/* --- Logo Schrumpfung (sanft) --- */
.rh-logo img {
  width: 150px;                 /* Normalgröße (bisher) */
  height: auto;
  display: block;
  object-fit: contain;
  transition: width var(--header-transition) ease,
              transform var(--header-transition) ease,
              margin var(--header-transition) ease;
  transform-origin: center;
  margin-top: 4px;
}

/* Wenn der Header schrumpft */
.ruby-header.shrunk .rh-logo img {
  width: 80px;                  /* geschrumpfte Breite — anpassen nach Geschmack */
  transform: translateY(1px) scale(0.98); /* leichter optischer Ausgleich */
  margin-top: 3px;
}

/* Toggle button (for collapsing header on small screens) */
.rh-toggle {
  display: none; /* shown only on very small screens in responsive block below */
  margin-top: .6rem;
  background: transparent;
  border: none;
  color: #fff;
  font-size: 1.2rem;
  cursor: pointer;
}

/* Header behaviour classes changed by JS */
.ruby-header.scrolled { opacity: 0.9; }
.ruby-header.shrunk { width: var(--header-w-shrunk); }

/* Tooltip: erscheint nur wenn die Texte im Button verborgen sind (.shrunk) */
.rh-whatsapp { position: relative; }

/* Basis für das Pseudo-Tooltip (unsichtbar per default) */
.ruby-header.shrunk .rh-whatsapp::after {
  content: attr(data-tooltip);
  position: absolute;
  left: calc(100% + 12px);            /* rechts neben dem Button */
  top: 50%;
  transform: translateY(-50%);
  background: rgba(16, 13, 9, 0.92);
  color: #fff;
  padding: 8px 10px;
  border-radius: 10px;
  font-size: 0.88rem;
  white-space: nowrap;
  box-shadow: 0 8px 22px rgba(0,0,0,0.35);
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease, transform 200ms ease;
  z-index: 10000;
}

/* Pfeilchen */
.ruby-header.shrunk .rh-whatsapp::before {
  content: "";
  position: absolute;
  left: calc(100% + 4px);
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 10px;
  height: 10px;
  background: rgba(16, 13, 9, 0.92);
  border-radius: 2px;
  opacity: 0;
  transition: opacity 200ms ease;
  z-index: 9999;
}

/* sichtbar bei hover / focus (auch tastatur) */
.ruby-header.shrunk .rh-whatsapp:hover::after,
.ruby-header.shrunk .rh-whatsapp:focus::after,
.ruby-header.shrunk .rh-whatsapp:focus-visible::after,
.ruby-header.shrunk .rh-whatsapp:hover::before,
.ruby-header.shrunk .rh-whatsapp:focus::before,
.ruby-header.shrunk .rh-whatsapp:focus-visible::before {
  opacity: 1;
  transform: translateY(-50%) translateY(-2px); /* leichter Pop */
  pointer-events: auto;
}

/* ================= Footer Styles ================= */
:root {
  /* fallback values, falls du die Variablen noch nicht gesetzt hast */
  --footer-gold: #d1b662;
  --footer-gold-dark: #b89f4a;
  --footer-text: #09221b;   /* dunkles Tannengrün für guten Kontrast */
  --footer-height: 120px;
}

/* Fixierter Footer */
.site-footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, var(--footer-gold), var(--footer-gold-dark));
  color: var(--footer-text);
  box-shadow: 0 -8px 30px rgba(0,0,0,0.25);
  z-index: 9998;
  padding: 0.5rem 2.2rem;
  /* Höhe lässt JS anpassbar, fallback: */
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lato" !important;
}

/* Inner wrapper: Centered, responsive */
.footer-inner {
  width: min(1500px, 95%);
  display: flex;
  flex-direction: column;
  gap: .8rem;
}

/* Top row: contact items */
.footer-row--top {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

/* Einzelne Kontakt-Box */
.footer-item {
  display: flex;
  gap: 0.9rem;
  align-items: center;
  min-width: 160px;
  max-width: 32%;
  color: var(--footer-text);
}

.footer-item--socials { min-width: 120px; justify-content: flex-end; }

/* Icon */
.fi-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  color: rgba(0,0,0,0.08); /* subtle dark shadow under icon */
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.12));
}

/* Text blocks inside item */
.fi-label { font-size: .78rem; opacity: .9; font-weight: 700; }
.fi-value { font-size: .95rem; font-weight: 600; margin-top: .1rem; color: var(--footer-text); text-decoration: none; font-family: 'Lato' }

/* Links in Footer */
.site-footer a { color: var(--footer-text); text-decoration: underline; }
.site-footer a:hover { text-decoration: underline; }

/* Bottom row: legal links + copyright */
.footer-row--bottom {
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.12);
  padding-top: 0.1rem;
  padding-bottom: 2rem;
  margin-bottom: 1rem;
}

/* legal nav links */
.footer-links {
  display: flex;
  gap: 1.2rem;
  align-items: center;
}
.footer-links a { font-size: 0.88rem; opacity: 0.95; }

/* copyright */
.footer-copy { font-size: 0.85rem; opacity: 0.95; text-align: right; }

/* ----------------------------------
   HEADER – START groß, später klein
---------------------------------- */

/* Normale (große) Header-Breite – Panel 1 */
:root {
  --header-w: 250px;      /* groß */
  --header-w-shrunk: 150px;  /* klein */
  --header-transition: 280ms;
}

/* Basiszustand: groß */
.ruby-header {
  width: var(--header-w);
  transition: width var(--header-transition) ease,
              opacity var(--header-transition) ease;
}

/* Geschrumpft (Panel 2 und weiter) */
.ruby-header.shrunk {
  width: var(--header-w-shrunk);
}

/* Logo-Verhalten */
.ruby-header .rh-logo img {
  width: 190px;
  transition: width var(--header-transition) ease,
              transform var(--header-transition) ease;
}

/* Logo kleiner im Schrumpf-Modus */
.ruby-header.shrunk .rh-logo img {
  width: 80px;
  transform: translateY(1px) scale(0.98);
}
/* Mobile-CTA-Button komplett abschalten, falls vorhanden */
.mobile-cta-btn {
  display: none !important;
}

/* ===== DESKTOP FOOTER: Footer vollbreit, Inhalt zwischen Headerkante und rechtem Rand zentriert ===== */
@media (min-width: 1251px) {

  /* Footer als 2-Spalten-Grid: links „Platzhalter“ = Headerbreite, rechts der Inhaltsbereich */
  .site-footer {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: var(--header-w, 250px) 1fr !important;
    z-index: 9998 !important;
    /* bestehende Optik bleibt: Hintergrund, Schatten, Höhe etc. kommen aus deinen vorhandenen Regeln */
  }

  /* Wenn der Header schrumpft, reduziert sich nur die linke Grid-Spalte */
  .ruby-header.shrunk ~ .site-footer {
    grid-template-columns: var(--header-w-shrunk, 150px) 1fr !important;
  }

  /* Footer-Inhalt in die rechte Spalte und dort sauber zentrieren */
  .site-footer .footer-inner {
    grid-column: 2;
    box-sizing: border-box !important;
    width: 100%;
    max-width: 1600px;                 /* ← ggf. anpassen: Inhalt schmaler/breiter */
    margin: 0 auto;                    /* zentriert innerhalb des rechten Bereichs */
    padding: 10px 24px !important;     /* vertikales/horizontales Padding */
  }

  /* Nichts im Footer abschneiden */
  .site-footer,
  .site-footer .footer-inner,
  .site-footer .footer-row {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Damit die Panels nicht vom fixen Footer überdeckt werden */
  .horizontal-wrapper {
    padding-bottom: 60px !important; /* ggf. 60–100px feintunen, entspricht Footerhöhe + Luft */
    box-sizing: border-box !important;
  }
}

/* DESKTOP: Footer kompakter (gleiche Breite, Inhalt bleibt im rechten Bereich) */
@media (min-width: 1251px) {
  .site-footer        { 
    padding: 3px 15px !important; }     /* außen schlanker */

  .site-footer .footer-inner { 
    gap: 5rem !important; 
    padding: 3px 12px !important; }
    
  .footer-row--top    { 
    gap: 15rem !important;
  width: 5000px }

  .footer-row--bottom { 
    padding-top: 4px !important; 
    padding-bottom: 1px !important; }

  .fi-icon             { 
    width: 22px !important; 
    height: 22px !important; }

  /* Content nicht vom fixen Footer überdecken: Puffer kleiner setzen */
  .horizontal-wrapper { padding-bottom: 64px !important; }  /* ggf. 56–72px feintunen */
}

/* ===== DESKTOP: Footer-Icons größer ===== */
@media (min-width: 1251px) {
  :root{
    --footerIcon: 28px;   /* allgemeine Icons (Adresse, Öffnungszeiten, Mail, Telefon) */
    --socialIcon: 28px;   /* Instagram/WhatsApp unten rechts */
  }

  /* Kontakt-Icons links/rechts in den Items */
  .fi-icon{
    width: var(--footerIcon) !important;
    height: var(--footerIcon) !important;
    flex: 0 0 var(--footerIcon) !important;
  }

  /* Social-Icons im Footer (farbige SVGs) */
  .footer-item--socials svg{
    width: var(--socialIcon) !important;
    height: var(--socialIcon) !important;
    display: block !important;
  }

  /* Falls es eng wird: sauber umbrechen statt Höhe aufzublasen */
  .footer-row--top{
    flex-wrap: wrap !important;
    gap: 12px !important; /* leicht mehr Luft für größere Icons */
  }
}
/* ===== DESKTOP: Footer-Topreihe zwingend einzeilig + Socials mit rein ===== */
@media (min-width: 1251px) {
  /* etwas weniger Innenabstand = mehr Platz für die Reihe */
  .site-footer .footer-inner {
    padding-right: 12px !important;
  }

  /* Einzeilig anordnen, keine erzwungene 32%-Breite mehr */
  .footer-row--top {
    display: flex !important;
    flex-wrap: nowrap !important;     /* alles in eine Zeile */
    column-gap: 10px !important;      /* enger zusammenrücken */
    row-gap: 0 !important;
    align-items: center !important;
  }

  /* Items dürfen schrumpfen; 32%-Limit raus */
  .footer-item {
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;        /* darf schmaler werden */
    gap: 0.6rem !important;           /* etwas enger zwischen Icon/Text */
  }

  /* Social-Block in die gleiche Zeile, ans rechte Ende */
  .footer-item--socials {
    min-width: auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;     /* schiebt die Socials nach ganz rechts */
  }

  /* Kleines Typo-Tuning für Platz */
  .fi-label { font-size: 0.75rem !important; }
  .fi-value { font-size: 0.9rem !important; }
}

/* DESKTOP: maximale Breite des Footer-Inhalts steuern */
@media (min-width: 1251px) {
  :root { --footerMaxW: 1500px; } /* ← HIER Wert ändern (z.B. 960px, 1200px …) */

  .site-footer .footer-inner {
    /* hält sich an deine Headerkante links und den Außenrand rechts */
    max-width: min(var(--footerMaxW), calc(100vw - var(--header-w, 250px) - 24px)) !important;
    margin: 0 auto !important; /* im rechten Bereich zentriert */
  }
}

@media (min-width: 1251px) {
  :root{
    --socialIcon: 28px; /* hier größer/kleiner drehen: 24–32px sind üblich */
  }

  .footer-item--socials {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important; /* schiebt Socials nach rechts */
    min-width: auto !important;
  }
  .footer-item--socials svg {
    width: var(--socialIcon) !important;
    height: var(--socialIcon) !important;
    display: block;
  }
}

/* ===== DESKTOP: Footer wieder zweireihig (Top: Kontakt+Socials, Bottom: Rechtliches) ===== */
@media (min-width: 1251px) {
  /* Footer nicht als Grid erzwingen */
  .site-footer { display: block !important; }

  /* Zwei Reihen untereinander */
  .site-footer .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; /* Abstand zwischen Top/Bottom */
  }

  /* TOP-ROW: bleibt oben, darf innerhalb der Reihe umbrechen */
  .footer-row--top {
    display: flex !important;
    flex-wrap: nowrap !important;      /* wenn eng, bricht innerhalb der Top-Reihe um */
    align-items: center !important;
    column-gap: 120px !important;
    row-gap: 3px !important;
    width: 100% !important;
  }

  /* Items in der Top-Reihe dürfen schrumpfen */
  .footer-row--top .footer-item {
    flex: 0 1 auto !important;
    min-width: 200px;                 /* bei Bedarf 200–260px feintunen */
    max-width: none !important;
  }

  /* Socials bleiben in der Top-Reihe, ans rechte Ende der aktuellen Zeile */
  .footer-item--socials {
    margin-left: auto !important;
    justify-content: flex-end !important;
  }

  /* BOTTOM-ROW: immer neue Zeile darunter */
  .footer-row--bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 4px !important;
    margin-top: 3px !important;
  }
}
/* ===== DESKTOP: Footer-Inhalt rechts von der Headerkante ausrichten ===== */
@media (min-width: 1251px) {
  :root { --footerMaxW: 1800px; } /* bei Bedarf anpassen */

  /* Standard: Header normal breit */
  .site-footer .footer-inner {
    /* Inhalt darf nie unter dem Header liegen */
    padding-left: calc(var(--header-w, 100px) + 1px) !important; /* +8px Luft */
    padding-right: 5px !important;

    /* Zentriert im rechten Bereich, nicht breiter als der Platz rechts vom Header */
    max-width: min(var(--footerMaxW),
                   calc(100vw - var(--header-w, 100px) - 1px)) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Wenn der Header geschrumpft ist → Werte automatisch kleiner */
  .ruby-header.shrunk ~ .site-footer .footer-inner {
    padding-left: calc(var(--header-w-shrunk, 150px) + 8px) !important;
    max-width: min(var(--footerMaxW),
                   calc(100vw - var(--header-w-shrunk, 150px) - 24px)) !important;
  }
}

@media (min-width: 1251px) {
  /* schlanke Pills */
  :root{
    --payPadY: 1px;     /* Höhe ↓  (bei Bedarf 1–3px) */
    --payPadX: 8px;     /* Breite   */
    --payGap: 6px;      /* Abstand  */
  }

  .footer-row--bottom{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center !important;
    gap: 1px 10px !important;
  }
  .footer-row--bottom .footer-links{ justify-self: start; }
  .footer-row--bottom .footer-copy { justify-self: end; }

  .footer-payments.pay-badges{
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--payGap);
    line-height: 1;
    white-space: nowrap;
  }

  /* Basis-Badge (wie mobil, aber flacher) */
  .footer-payments .badge{
    display: inline-block;
    padding: var(--payPadY) var(--payPadX);
    border-radius: 999px;
    font-size: .78rem;            /* kleiner → weniger Höhe */
    font-weight: 700;
    color: #123;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(4px) saturate(110%);
    -webkit-backdrop-filter: blur(4px) saturate(110%);
    border: 1.2px solid rgba(209,182,98,0.7);
    box-shadow: none;            /* kein Extra-Schatten → flacher Look */
  }

  /* Dezentere Variante für Apple/Google Pay */
  .footer-payments .badge--quiet{
    font-weight: 600;
    background: rgba(255,255,255,0.12);
    border-color: rgba(209,182,98,0.45);
    opacity: .8;
  }
}

/* === DESKTOP: Footer garantiert zweireihig + Innen-Layouts fixen === */
@media (min-width:1251px){

  /* Footer nicht als Grid/Flex-Zeile missbrauchen */
  .site-footer{ display:block !important; }

  /* Zwei Reihen untereinander */
  .site-footer .footer-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    width:150% !important;
  }

  /* Reihen sind echte Blöcke (falls irgendwo display:contents steht) */
  .site-footer .footer-row{
    display:block !important;
    width:100% !important;
  }

  /* ----- Reihe 1 (fr-top): eine Linie, Socials ganz rechts ----- */
  .site-footer .fr-top{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    column-gap:100px !important;
    row-gap:1px !important;
    width:100% !important;
  }
  .site-footer .fr-top .footer-item{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    gap:0.8rem !important;
  }
  .site-footer .fr-top .footer-item--socials{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:20px !important;
    flex:0 0 auto !important;
  }

  /* ----- Reihe 2 (fr-bottom): 3-Spalten-Grid ----- */
  .site-footer .fr-bottom{
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important; /* Links | Zahlungen | Copy */
    align-items:center !important;
    gap:10px !important;
    width:100% !important;
  }
  .site-footer .fr-bottom .footer-links{ justify-self:start !important; }
  .site-footer .fr-bottom .footer-payments{
    justify-self:center !important;
    display:inline-flex !important;
    flex-wrap:nowrap !important;
    gap:16px !important;
    white-space:wrap !important;
  }
  .site-footer .fr-bottom .footer-copy{
    justify-self:end !important;
    white-space:nowrap !important;
    text-align:right !important;
  }

  /* Lange Texte in Reihe 1 nicht umbrechen lassen */
  .site-footer .fi-value{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:50vw; /* optional, Platzhüter */
  }
}

@media (min-width:1251px){
  footer.site-footer .footer-inner{
    max-width: 1800px !important;     /* ← DEIN Wert */
    width: calc(100vw - 200px) !important; /* 100vw minus Headerkante; feintunen */
    padding-left: 160px !important;
    padding-right: 0 !important;
  }
}


/* ===== DESKTOP FOOTER: Footer vollbreit, Inhalt zwischen Headerkante und rechtem Rand zentriert ===== */
@media (min-width: 1251px) {

  /* Footer als 2-Spalten-Grid: links „Platzhalter“ = Headerbreite, rechts der Inhaltsbereich */
  .site-footer {
    position: fixed !important;
    left: 0; right: 0; bottom: 0;
    width: 100% !important;
    display: grid !important;
    grid-template-columns: var(--header-w, 250px) 1fr !important;
    z-index: 9998 !important;
    /* bestehende Optik bleibt: Hintergrund, Schatten, Höhe etc. kommen aus deinen vorhandenen Regeln */
  }

  /* Wenn der Header schrumpft, reduziert sich nur die linke Grid-Spalte */
  .ruby-header.shrunk ~ .site-footer {
    grid-template-columns: var(--header-w-shrunk, 150px) 1fr !important;
  }

  /* Footer-Inhalt in die rechte Spalte und dort sauber zentrieren */
  .site-footer .footer-inner {
    grid-column: 2;
    box-sizing: border-box !important;
    width: 100%;
    max-width: 1600px;                 /* ← ggf. anpassen: Inhalt schmaler/breiter */
    margin: 0 auto;                    /* zentriert innerhalb des rechten Bereichs */
    padding: 10px 24px !important;     /* vertikales/horizontales Padding */
  }

  /* Nichts im Footer abschneiden */
  .site-footer,
  .site-footer .footer-inner,
  .site-footer .footer-row {
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Damit die Panels nicht vom fixen Footer überdeckt werden */
  .horizontal-wrapper {
    padding-bottom: 60px !important; /* ggf. 60–100px feintunen, entspricht Footerhöhe + Luft */
    box-sizing: border-box !important;
  }
}

/* DESKTOP: Footer kompakter (gleiche Breite, Inhalt bleibt im rechten Bereich) */
@media (min-width: 1251px) {
  .site-footer        { 
    padding: 3px 15px !important; }     /* außen schlanker */

  .site-footer .footer-inner { 
    gap: 5rem !important; 
    padding: 3px 12px !important; }
    
  .footer-row--top    { 
    gap: 15rem !important;
  width: 5000px }

  .footer-row--bottom { 
    padding-top: 4px !important; 
    padding-bottom: 1px !important; }

  .fi-icon            { 
    width: 22px !important; 
    height: 22px !important; }


  /* Content nicht vom fixen Footer überdecken: Puffer kleiner setzen */
  .horizontal-wrapper { padding-bottom: 64px !important; }  /* ggf. 56–72px feintunen */
}

/* ===== DESKTOP: Footer-Icons größer ===== */
@media (min-width: 1251px) {
  :root{
    --footerIcon: 28px;   /* allgemeine Icons (Adresse, Öffnungszeiten, Mail, Telefon) */
    --socialIcon: 28px;   /* Instagram/WhatsApp unten rechts */
  }

  /* Kontakt-Icons links/rechts in den Items */
  .fi-icon{
    width: var(--footerIcon) !important;
    height: var(--footerIcon) !important;
    flex: 0 0 var(--footerIcon) !important;
  }

  /* Social-Icons im Footer (farbige SVGs) */
  .footer-item--socials svg{
    width: var(--socialIcon) !important;
    height: var(--socialIcon) !important;
    display: block !important;
  }

  /* Falls es eng wird: sauber umbrechen statt Höhe aufzublasen */
  .footer-row--top{
    flex-wrap: wrap !important;
    gap: 12px !important; /* leicht mehr Luft für größere Icons */
  }
}
/* ===== DESKTOP: Footer-Topreihe zwingend einzeilig + Socials mit rein ===== */
@media (min-width: 1251px) {
  /* etwas weniger Innenabstand = mehr Platz für die Reihe */
  .site-footer .footer-inner {
    padding-right: 12px !important;
  }

  /* Einzeilig anordnen, keine erzwungene 32%-Breite mehr */
  .footer-row--top {
    display: flex !important;
    flex-wrap: nowrap !important;     /* alles in eine Zeile */
    column-gap: 10px !important;      /* enger zusammenrücken */
    row-gap: 0 !important;
    align-items: center !important;
  }

  /* Items dürfen schrumpfen; 32%-Limit raus */
  .footer-item {
    max-width: none !important;
    min-width: 0 !important;
    flex: 0 1 auto !important;        /* darf schmaler werden */
    gap: 0.6rem !important;           /* etwas enger zwischen Icon/Text */
  }

  /* Social-Block in die gleiche Zeile, ans rechte Ende */
  .footer-item--socials {
    min-width: auto !important;
    justify-content: flex-end !important;
    margin-left: auto !important;     /* schiebt die Socials nach ganz rechts */
  }

  /* Kleines Typo-Tuning für Platz */
  .fi-label { font-size: 0.75rem !important; }
  .fi-value { font-size: 0.9rem !important; }
}

/* DESKTOP: maximale Breite des Footer-Inhalts steuern */
@media (min-width: 1251px) {
  :root { --footerMaxW: 1500px; } /* ← HIER Wert ändern (z.B. 960px, 1200px …) */

  .site-footer .footer-inner {
    /* hält sich an deine Headerkante links und den Außenrand rechts */
    max-width: min(var(--footerMaxW), calc(100vw - var(--header-w, 250px) - 24px)) !important;
    margin: 0 auto !important; /* im rechten Bereich zentriert */
  }
}

@media (min-width: 1251px) {
  :root{
    --socialIcon: 28px; /* hier größer/kleiner drehen: 24–32px sind üblich */
  }

  .footer-item--socials {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin-left: auto !important; /* schiebt Socials nach rechts */
    min-width: auto !important;
  }
  .footer-item--socials svg {
    width: var(--socialIcon) !important;
    height: var(--socialIcon) !important;
    display: block;
  }
}

/* ===== DESKTOP: Footer wieder zweireihig (Top: Kontakt+Socials, Bottom: Rechtliches) ===== */
@media (min-width: 1251px) {
  /* Footer nicht als Grid erzwingen */
  .site-footer { display: block !important; }

  /* Zwei Reihen untereinander */
  .site-footer .footer-inner {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important; /* Abstand zwischen Top/Bottom */
  }

  /* TOP-ROW: bleibt oben, darf innerhalb der Reihe umbrechen */
  .footer-row--top {
    display: flex !important;
    flex-wrap: nowrap !important;      /* wenn eng, bricht innerhalb der Top-Reihe um */
    align-items: center !important;
    column-gap: 120px !important;
    row-gap: 3px !important;
    width: 100% !important;
  }

  /* Items in der Top-Reihe dürfen schrumpfen */
  .footer-row--top .footer-item {
    flex: 0 1 auto !important;
    min-width: 200px;                /* bei Bedarf 200–260px feintunen */
    max-width: none !important;
  }

  /* Socials bleiben in der Top-Reihe, ans rechte Ende der aktuellen Zeile */
  .footer-item--socials {
    margin-left: auto !important;
    justify-content: flex-end !important;
  }

  /* BOTTOM-ROW: immer neue Zeile darunter */
  .footer-row--bottom {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 4px !important;
    margin-top: 3px !important;
  }
}
/* ===== DESKTOP: Footer-Inhalt rechts von der Headerkante ausrichten ===== */
@media (min-width: 1251px) {
  :root { --footerMaxW: 1800px; } /* bei Bedarf anpassen */

  /* Standard: Header normal breit */
  .site-footer .footer-inner {
    /* Inhalt darf nie unter dem Header liegen */
    padding-left: calc(var(--header-w, 100px) + 1px) !important; /* +8px Luft */
    padding-right: 5px !important;

    /* Zentriert im rechten Bereich, nicht breiter als der Platz rechts vom Header */
    max-width: min(var(--footerMaxW),
                   calc(100vw - var(--header-w, 100px) - 1px)) !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
  }

  /* Wenn der Header geschrumpft ist → Werte automatisch kleiner */
  .ruby-header.shrunk ~ .site-footer .footer-inner {
    padding-left: calc(var(--header-w-shrunk, 150px) + 8px) !important;
    max-width: min(var(--footerMaxW),
                   calc(100vw - var(--header-w-shrunk, 150px) - 24px)) !important;
  }
}

@media (min-width: 1251px) {
  /* schlanke Pills */
  :root{
    --payPadY: 1px;     /* Höhe ↓  (bei Bedarf 1–3px) */
    --payPadX: 8px;     /* Breite   */
    --payGap: 6px;      /* Abstand  */
  }

  .footer-row--bottom{
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center !important;
    gap: 1px 10px !important;
  }
  .footer-row--bottom .footer-links{ justify-self: start; }
  .footer-row--bottom .footer-copy { justify-self: end; }

  .footer-payments.pay-badges{
    justify-self: center;
    display: inline-flex;
    align-items: center;
    gap: var(--payGap);
    line-height: 1;
    white-space: nowrap;
  }

  /* Basis-Badge (wie mobil, aber flacher) */
  .footer-payments .badge{
    display: inline-block;
    padding: var(--payPadY) var(--payPadX);
    border-radius: 999px;
    font-size: .78rem;           /* kleiner → weniger Höhe */
    font-weight: 700;
    color: #123;
    background: rgba(255,255,255,0.18);
    backdrop-filter: blur(4px) saturate(110%);
    -webkit-backdrop-filter: blur(4px) saturate(110%);
    border: 1.2px solid rgba(209,182,98,0.7);
    box-shadow: none;           /* kein Extra-Schatten → flacher Look */
  }

  /* Dezentere Variante für Apple/Google Pay */
  .footer-payments .badge--quiet{
    font-weight: 600;
    background: rgba(255,255,255,0.12);
    border-color: rgba(209,182,98,0.45);
    opacity: .8;
  }
}

/* === DESKTOP: Footer garantiert zweireihig + Innen-Layouts fixen === */
@media (min-width:1251px){

  /* Footer nicht als Grid/Flex-Zeile missbrauchen */
  .site-footer{ display:block !important; }

  /* Zwei Reihen untereinander */
  .site-footer .footer-inner{
    display:flex !important;
    flex-direction:column !important;
    gap:6px !important;
    width:150% !important;
  }

  /* Reihen sind echte Blöcke (falls irgendwo display:contents steht) */
  .site-footer .footer-row{
    display:block !important;
    width:100% !important;
  }

  /* ----- Reihe 1 (fr-top): eine Linie, Socials ganz rechts ----- */
  .site-footer .fr-top{
    display:flex !important;
    align-items:center !important;
    flex-wrap:wrap !important;
    column-gap:100px !important;
    row-gap:1px !important;
    width:100% !important;
  }
  .site-footer .fr-top .footer-item{
    flex:0 1 auto !important;
    min-width:0 !important;
    max-width:none !important;
    gap:0.8rem !important;
  }
  .site-footer .fr-top .footer-item--socials{
    margin-left:auto !important;
    display:flex !important;
    align-items:center !important;
    gap:20px !important;
    flex:0 0 auto !important;
  }

  /* ----- Reihe 2 (fr-bottom): 3-Spalten-Grid ----- */
  .site-footer .fr-bottom{
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important; /* Links | Zahlungen | Copy */
    align-items:center !important;
    gap: 25px !important;
    width:100% !important;
  }
  .site-footer .fr-bottom .footer-links{ justify-self:start !important; }
  .site-footer .fr-bottom .footer-payments{
    justify-self:center !important;
    display:inline-flex !important;
    flex-wrap:nowrap !important;
    gap:16px !important;
    white-space:wrap !important;
  }
  .site-footer .fr-bottom .footer-copy{
    justify-self:end !important;
    white-space:nowrap !important;
    text-align:right !important;
  }

  /* Lange Texte in Reihe 1 nicht umbrechen lassen */
  .site-footer .fi-value{
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    max-width:50vw; /* optional, Platzhüter */
    font-family: 'Lato', bold;
  }
}


@media (min-width:1251px){
  footer.site-footer .footer-inner{
    max-width: 1800px !important;     /* ← DEIN Wert */
    width: calc(100vw - 200px) !important; /* 100vw minus Headerkante; feintunen */
    padding-left: 160px !important;
    padding-right: 0 !important;
  }
}


/* -------------------------------------------- */ 
/* --------- MOBILE HEADER UND FOOTER --------- */
/* -------------------------------------------- */ 

@media (max-width: 1250px) {
  /* ============================
     HEADER MOBILE (optional)
     ============================ */

  .ruby-header {
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
  }

  .ruby-header .rh-inner {
    flex-direction: row;
    justify-content: space-between;
    padding: 1rem 1.2rem;
  }

  .rh-nav ul {
    display: none;
  }

  .rh-toggle {
    display: block;
  }
}

/* ============================================
   ALLES AUSSER DESKTOP (max-width: 1250px)
   Header darf NICHT schrumpfen
   ============================================ */
@media (max-width: 1250px) {

  /* Schrumpfen komplett ausschalten */
  .ruby-header.shrunk {
    width: var(--header-w) !important;  /* normale Breite */
    opacity: 1 !important;              /* keine Transparenz */
  }

  /* Logo wieder auf volle Größe */
  .ruby-header.shrunk .rh-logo img {
    width: 150px !important;
    transform: none !important;
    margin-top: 4px !important;
  }

  /* WhatsApp-Text wird nicht versteckt */
  .ruby-header.shrunk .rh-whatsapp span {
    display: inline !important;
  }

  /* Keine Verschiebungen nach innen */
  .ruby-header.shrunk .rh-inner {
    transform: none !important;
  }
}


/* ================================
   ALLES AUSSER DESKTOP (<1250px)
   Header darf NIE schrumpfen
   ================================ */
@media (max-width: 1250px) {

  /* Schrumpf-Klasse neutralisieren */
  .ruby-header {
    width: var(--header-w) !important;
    opacity: 1 !important;
  }

  .ruby-header.shrunk {
    width: var(--header-w) !important;
    opacity: 1 !important;
  }


  /* WhatsApp-Button nicht schrumpfen */
  .ruby-header .rh-whatsapp span {
    display: inline !important;
  }
}

/* =====================================================
   MOBIL/TABLET (unter 1250px)
   Desktop-Header wird zum horizontalen mobilen Header
   ===================================================== */
@media (max-width: 1250px) {

  /* Sidebar-Layout komplett deaktivieren */
  .ruby-header {
    all: unset !important;
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 150px !important;
    background: rgba(11, 46, 36, 0.92) !important;
    backdrop-filter: blur(6px);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 2rem !important;
    box-sizing: border-box !important;
    z-index: 10000 !important;
  }

  /* Inhalt des Headers wieder aktivieren */
  .ruby-header * {
  
    display: block;
    box-sizing: border-box;
  }

  /* Innerer Container wird horizontal */
  .ruby-header .rh-inner {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    gap: 0 !important;
  }


  /* Termin-Button in der Mitte */
  .rh-whatsapp {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 40px !important;
    background: #1d5c47 !important;
    color: #fff !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
  }



  /* Navigation ausblenden (kommt später wieder schön) */
  .rh-nav {
    display: none !important;
  }

  /* Kein Schrumpfen */
  .ruby-header.shrunk,
  .ruby-header.scrolled {
    width: 100% !important;
    opacity: 1 !important;
  }
}

@media (max-width: 1250px) {

  /* Äußere Header-Schicht: ALLE Hintergründe löschen */
  .ruby-header {
    background: #264b3d !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Innere Header-Schicht: ebenfalls komplett neutralisieren */
  .rh-inner {
    background: #264b3d !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
  }

  /* Falls noch eine pseudo-Ebene eingefärbt: sofort killen */
  .ruby-header::before,
  .ruby-header::after,
  .rh-inner::before,
  .rh-inner::after {
    content: none !important;
    background: none !important;
  }
}

/* =======================================================
   MOBILE & TABLET < 1250px
   Wandelt den bestehenden Vertical Header in
   einen horizontalen Header mit Burger-Menu
   ======================================================= */
@media (max-width: 1250px) {

  /* NAVIGATION AUSBLENDEN / EINBLENDEN */
  .rh-nav {
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    display: none;
    flex-direction: column;
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(12px);
    padding: 1.2rem 1rem;
  }

  /* Wenn active → Menü sichtbar */
  .rh-nav.open {
    display: flex !important;
  }

  /* Hauptpunkte */
  .rh-nav > ul > li {
    width: 100%;
    padding: 0.7rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.25);
  }

  .rh-nav > ul > li > a,
  .rh-nav > ul > li > .submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-size: 1.1rem;
    color: white !important;
    background: transparent;
    border: none;
    cursor: pointer;
  }

 

  .submenu-toggle.open::after {
    transform: rotate(90deg);
  }

  /* UNTERMENÜ */
  .submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s ease;
    padding-left: 1.5rem;
  }

  .submenu.open {
    max-height: 500px; /* genug Platz */
  }

  .submenu li a {
    padding: 0.4rem 0;
    display: block;
    color: rgba(255,255,255,0.9) !important;
    font-size: 1rem;
  }

}

/* ================================================
   MOBILE & TABLET HEADER (HTML bleibt unverändert)
   ================================================ */
@media (max-width: 1250px) {

  /* Sidebar-Header wird zum Top-Header */
  .ruby-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100% !important;    /* statt 250px */
    height: 100px !important;   /* nicht mehr voll hoch */
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(11,46,36,0.92);
    backdrop-filter: blur(10px);
    z-index: 99999;
    overflow: visible;
    pointer-events: auto !important;
    opacity: 1 !important;      /* NICHT mehr verstecken */
  }

  /* Inneres wieder horizontal statt senkrecht */
  .ruby-header .rh-inner {
    flex-direction: row;
    width: 100%;
    height: 100%;
    padding: 0 1.5rem;
    justify-content: space-between;
    align-items: center;
    background: none !important;
    box-shadow: none !important;
  }

  /* LOGO links */
  .rh-logo img {
    width: 100px !important;
    margin: 0;
    transform: none !important;
  }

  /* Burger rechts sichtbar */
  #rhToggle {
    display: block !important;
    position: relative;
    z-index: 100000;
    font-size: 2rem;
    color: white;
    background: none;
    border: none;
  }

  /* Termin-Button in die Mitte */
  .rh-whatsapp {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    z-index: 100000;
  }

  /* ===== Menü vertikal darunter ===== */

  .rh-nav {
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
    max-height: 0; /* geschlossen */
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(12px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: max-height .4s ease, opacity .35s ease;
    z-index: 99998;
  }

  .rh-nav.open {
    max-height: 80vh;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Menüeinträge */
  .rh-nav ul > li > a,
  .rh-nav ul > li > .submenu-toggle {
    padding: 1rem 1.5rem;
    text-align: left;
  }

  /* Unterpunkte Einzug */
  .submenu a {
    padding-left: 2.4rem !important;
  }
}

/* ==========================================
   MENU-INHALT SICHTBAR MACHEN (Mobile ONLY)
   ========================================== */
@media (max-width: 1250px) {

  /* UL sichtbar machen */
  .rh-nav ul {
    display: block !important;
    margin: 0;
    padding: 0;
  }

  /* Li sichtbar & vertikal */
  .rh-nav ul > li {
    display: block !important;
    width: 100% !important;
    padding: 0;
    margin: 0;
  }

  /* Hauptpunkte sichtbar */
  .rh-nav > ul > li > a,
  .rh-nav > ul > li > .submenu-toggle {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    color: white !important;
    padding: 1rem 1.5rem !important;
    font-size: 1.1rem;
    font-weight: 600;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Untermenüs sichtbar (weggeschaltet durch Desktop-CSS!) */
  .submenu {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    max-height: none !important;
    overflow: visible !important;
    background: rgba(9, 97, 14, 0.116);
  }

  /* Einzug für Unterpunkte */
  .submenu li a {
    padding-left: 2.5rem !important;
    font-size: 1rem;
    color: rgba(255,255,255,0.85) !important;
  }

  /* Pfeil-Buttons sichtbar erzwingen */
  .submenu-toggle {
    color: white !important;
    background: rgba(255, 255, 255, 0.116) !important;
  }
}
@media (max-width: 1250px) {

  /* Untermenüs sind standardmäßig zu */
  .submenu {
    display: none !important;
    max-height: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: max-height .3s ease, opacity .3s ease !important;
  }

  /* Wenn der User klickt → .open wird per JS gesetzt */
  .submenu.open {
    display: block !important;
    max-height: 500px !important;
    opacity: 1 !important;
  }
  

  .has-submenu.open .submenu-toggle::after {
    transform: rotate(90deg);
  }}


@media (max-width: 1250px) {

  /* ===== Header fix & volle Breite ===== */
  .ruby-header {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100% !important;        /* NICHT schrumpfen */
    height: 100px !important;
    background: rgba(38,75,61,0.95);
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 1rem !important;
    box-sizing: border-box;
    overflow: visible !important;
    z-index: 9999 !important;
    transition: none !important;   /* Schrumpf-Animation TOT */
  }

  /* ===== Inhalt IMMER in einer sauberen Reihe ===== */
  .ruby-header .rh-inner {
    width: 100% !important;
    height: 100px;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important; 
    padding: 0 1.2rem !important;
    background: none !important;  /* Kein zweiter Farbton */
  }

  /* ===== Logo links ===== */
  .rh-logo img {
    width: 110px !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* ===== Terminbutton sauber mittig ===== */
  .rh-whatsapp {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    background: linear-gradient(
      90deg,
      rgba(209,182,98,1),
      rgba(209,182,98,0.75)
    ) !important;

    padding: 0.5rem 1rem !important;
    border-radius: 999px !important;
    font-size: 0.9rem !important;
    margin: 0 !important;
    white-space: nowrap;
  }

  /* ===== Burger rechts ===== */
  .rh-toggle {
    display: block !important;
    font-size: 1.8rem !important;
    color: white !important;
    background: none !important;
    border: none !important;
    margin-left: auto !important;
    z-index: 10000 !important;
  }

  /* Desktop-Navigation verstecken */
  .rh-nav {
    display: none !important;
  }
}


/* bis hier hin schön */



/* ============================
   Menücontainer weich einblenden
   ============================ */
@media (max-width: 1250px) {
.rh-nav {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.45s ease, transform 0.45s ease;
  pointer-events: none; /* klicks blocken wenn geschlossen */
}

.rh-nav.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}}

@media (max-width: 1250px) {
/* Menü standardmäßig geschlossen */
nav.rh-nav {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-12px);
  transition:
    max-height .45s ease,
    opacity .35s ease,
    transform .45s ease;
}

/* Menü offen */
nav.rh-nav.open {
  max-height: 70vh; /* genug Platz fürs Aufziehen */
  opacity: 1;
  transform: translateY(0);
  overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  
nav.rh-nav.open .submenu a {
  color: #ffffff !important; /* weiß */
}
.submenu {
  opacity: 0;
  max-height: 0;
  transform: translateY(-8px);
  transition:
    max-height .35s ease,
    opacity .35s ease,
    transform .35s ease;
}

.submenu.open {
  opacity: 1;
  max-height: 300px;
  transform: translateY(0);
}} 



@media (max-width: 1250px) {
  .rh-nav {
    display: block !important;              /* IMMER im DOM */
    max-height: 0;
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition:
      max-height .45s ease,
      opacity .35s ease,
      transform .45s ease;
  }

  .rh-nav.open {
    max-height: 650px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

@media (max-width: 700px)  {
  .rh-nav {
    margin-top: 40px;
  }}



@media (max-width: 1250px) {

  /* EINZELNE PUNKTE – viel weicherer Drop */
  .fade-down {
    opacity: 0;
    transform: translateY(-18px);
    transition:
      opacity 0.55s ease,
      transform 0.55s cubic-bezier(0.25, 0.8, 0.25, 1);
  }

  .fade-down.visible {
    opacity: 1;
    transform: translateY(0);
  }

}


@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;
  }

}


@media (max-width: 1250px) {

  /* Header-Shrink ignorieren auf Mobile */
  .ruby-header.shrunk .rh-logo img {
    transform: none !important;
    scale: 1 !important;
  }
  .rh-logo img {
  transform-origin: center center !important;
  }}


/* ========== HEADER LAYOUT FIX: keine Überlappung (<=1250px) ========== */
@media (max-width: 1250px) {
  /* Inneren Header als Grid aufziehen: 3 Spalten */
  .ruby-header { height: 100px !important; }
  .ruby-header .rh-inner {
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    grid-template-areas: "logo cta burger" !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 12px !important;
    gap: 8px !important;
  }

  /* Grid-Zuweisungen */
  .rh-logo { grid-area: logo !important; justify-self: start !important; }
  .rh-whatsapp { 
    grid-area: cta !important; 
    position: static !important;   /* absolute zentrierung ausschalten */
    transform: none !important;
    max-width: 90% !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    padding: 8px 12px !important;
  }
  #rhToggle { grid-area: burger !important; justify-self: end !important; }

  /* leichte Größenbegrenzungen, damit nichts kollidiert */
  .rh-logo img { max-width: 110px !important; height: auto !important; }
  #rhToggle { font-size: 1.6rem !important; }
}

/* ========== Sehr kleine Breiten: Button in zweite Zeile (<=700px) ========== */
@media (max-width: 700px) {
  .ruby-header { height: 140px !important; }
  .ruby-header .rh-inner {
    grid-template-columns: 1fr auto !important;
    grid-template-rows: 70px 1fr !important;
    grid-template-areas:
      "logo burger"
      "cta  cta" !important;
    row-gap: 6px !important;
  }

  .rh-logo img { 
    max-width: 90px !important; }
  .rh-whatsapp {
    justify-self: center !important;
    font-size: 0.9rem !important;
    padding: 8px 12px !important;
  }

  #rhToggle { font-size: 1.5rem !important; }
}

/* ========== Ultra-eng: minimale Schrumpfung der Elemente (<=420px) ========== */
@media (max-width: 420px) {
  .rh-logo img { max-width: 100px !important; }
  .rh-whatsapp { font-size: 0.85rem !important; padding: 6px 10px !important; }
  #rhToggle { font-size: 1.4rem !important; }
}


/* Logo darf NICHT über den Header ragen */
@media (max-width: 1250px) {
  /* Headerhöhe als Variable – Standard: 100px */
  .ruby-header { --h: 100px; height: var(--h) !important; overflow: hidden !important; }
  .ruby-header .rh-inner { height: 100% !important; }

  .rh-logo img{
    max-height: calc(var(--h) - 0.1px) !important; /* innen mit Luft */
    width: auto !important;
    height: auto !important;
    transform: none !important;
    margin: 0 !important;
    display: block !important;
  }
}

/* sehr schmale Geräte: unsere zweite Zeile (Header war 140px) */
@media (max-width: 700px) {
  .ruby-header { --h: 140px; } /* gleiche Regel greift automatisch */
  .rh-logo img{ max-height: calc(var(--h) - 28px) !important; }
}

/* X + "Schließen" oben rechts im geöffneten Menü (nur mobil) */
@media (max-width: 1250px) {
  .rh-nav .rh-nav-close {
    position: absolute;
    top: 8px;
    right: 10px;
    z-index: 100001;
  }
  .rh-nav .nav-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
  }
  .rh-nav .nav-close-btn .x {
    font-weight: 700;
    font-size: 1.15rem;
    line-height: 1;
  }
  .rh-nav .nav-close-btn:focus-visible {
    outline: 2px solid rgba(255,255,255,0.7);
    outline-offset: 2px;
  }
}









/* ========= 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;
  }
}


@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) {
  .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;
  }
}
:root { --footer-h: 120px; --gap: 30px; }


/* ============================
   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
  }
}

html, body {
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  width: 100%;
  height: 100%;
}

#parallax-stage {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
}


/* =========================
   PARALLAX MODULE
   ========================= */

#parallax-stage[data-parallax] {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

/* jede Ebene */
#parallax-stage[data-parallax] img {
  position: absolute;
  top: 0;
  left: 50%;
  height: 110%;
  width: auto;
  transform: translateX(-50%);
  will-change: transform;
  user-select: none;
}

/* NUR Layer 2–5 dürfen breiter sein */
#parallax .layer-2,
#parallax .layer-3,
#parallax .layer-4,
#parallax .layer-5 {
  inset: auto;        /* 🔑 DAS ist der Schlüssel */
  top: 0;
  bottom: 0;

}

#parallax .layer-1 {
  height: 100vh;
}


/* =========================
   ========================= */

#parallax-stage {
  position: fixed;
  top: 0;
  left: 0;

  height: 110%;
  width: 100vw; /* wird gleich von JS überschrieben */

  overflow: hidden;
  pointer-events: none;
  z-index: -1;
}

#parallax-stage img {
  position: absolute;
  top: 0;
  left: 0;

  height: 110%;
  width: 100%;

  object-fit: cover;
  will-change: transform;
}

#parallax-stage img {
  position: absolute;
  top: 0;
  left: 0;

  height: 110%;
  width: 120%;              /* 🔑 WICHTIG */
  min-width: 120%;          /* 🔑 */
  object-fit: cover;

  will-change: transform;
}

/* ==========================================
   MOBILE FOOTER – NUR AM SEITENENDE SICHTBAR
   ========================================== */
@media (max-width: 1250px) {

  .site-footer {
    position: static !important;   /* 🔑 normaler Dokumentfluss */
    bottom: auto !important;
    left: auto !important;
    right: auto !important;

    z-index: auto !important;
  }

}

main {
  min-height: 100svh;
}


/* --------------------
---- TEMPLATE ENDE ----
---------------------*/ 

/* Referenziert: dein aktuelles footer HTML/CSS/JS */
/* Regeln: keine Experimente • nur exakt auf Anweisung • keine ungefragten Fixes/Änderungen */

/* nutzt dein bestehendes Placeholder-Design als Basis */
#extPopup[hidden] { display: none !important; }

#extPopup {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

#extPopupBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(3, 32, 11, 0.55);
}

/* Panel = Desktop Modal */
#extPopupPanel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(720px, 92vw);
  font-family: 'Lato';
  display: flex;
  flex-direction: column;
  gap: 12px;

  padding: clamp(14px, 2.2vw, 22px);
  border-radius: 18px;

  background: rgba(255, 255, 255, 0.25);
  -webkit-backdrop-filter: blur(5px) saturate(110%);
  backdrop-filter: blur(5px) saturate(110%);

  border: 2px solid rgba(209, 182, 98, 0.85);
  box-sizing: border-box;

  color: rgba(255,255,255,1);
}

#extPopupClose {
  position: absolute;
  top: 10px;
  right: 12px;

  border: 0.2px solid rgba(255, 255, 255, 0.1);
  background: rgba(209, 182, 98, 0.85);
  color: rgba(255,255,255,1);

  width: 36px;
  height: 36px;
  border-radius: 12px;
  cursor: pointer;
  line-height: 1;
  font-size: 22px;
}

#extPopupActions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

#extPopupActions button {
  appearance: none;
  border: 1px solid rgba(209, 182, 98, 0.85);
  background: rgba(209, 182, 98, 0.9);
  color: rgba(255, 255, 255, 1);
  padding: 10px 14px;
  border-radius: 12px;
  font: inherit;
  cursor: pointer;
}

#extPopup a {
  color: rgba(209, 182, 98, 0.95);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Mobile = Bottom Sheet */
@media (max-width: 1250px) {
  #extPopupPanel {
    left: 50%;
    top: auto;
    bottom: 12px;
    transform: translateX(-50%);
    width: min(720px, 94vw);
    border-radius: 18px;
  }
}