/* ============================================================
   kk-fixes.css  —  Mobile Bugfixes
   Einbinden in index.html NACH style.css:
   <link rel="stylesheet" href="kk-fixes.css">
   ============================================================ */


/* ────────────────────────────────────────────────────────────
   FIX 1 · Cookie-Banner halb außerhalb des Bildschirms (links)
   ────────────────────────────────────────────────────────────
   Ursache: Desktop-Zentrierung nutzt
     left: 50%;  transform: translateX(-50%) translateY(16px);
   Die 480px-Media-Query setzt zwar left/right um,
   überschreibt aber NICHT den transform → Banner rutscht
   um 50% seiner Breite nach links aus dem Viewport.
   Fix: transform auf mobile auf reine Y-Achse reduzieren.       */

@media (max-width: 640px) {
  .cookie-banner {
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-width: none !important;
    bottom: 82px !important;          /* Über dem Full-Width-Floating-Button */
    transform: translateY(16px) !important;   /* Nur Y – kein X mehr! */
  }

  .cookie-banner.show {
    transform: translateY(0) !important;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 2 · Back-to-Top Button hinter dem Floating-Button
   ────────────────────────────────────────────────────────────
   Auf Mobile wird .floating-booking full-width und sitzt bei
   bottom: 15px (~56px hoch). Der Back-to-Top-Button war
   ebenfalls bei bottom: 25px → Überlappung.                    */

@media (max-width: 768px) {
  #back-to-top {
    bottom: 82px;     /* Gleiches Niveau wie Cookie-Banner-Bottom */
    left: 15px;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 3 · Hero min-height Fallback
   ────────────────────────────────────────────────────────────
   100svh ist in Safari < 15.4 und alten Android-Browsern
   unbekannt → Seite hat dann keine Hero-Höhe.                  */

.hero {
  min-height: 100vh;               /* Universeller Fallback */
}

@supports (min-height: 100svh) {
  .hero {
    min-height: 100svh;            /* Moderne Browser: exklusive Safe Area */
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 4 · Floating-Button Sichtbarkeit auf sehr kleinen Screens
   ────────────────────────────────────────────────────────────
   Auf Screens < 380px (z.B. SE 1st gen) war die Schrift
   leicht abgeschnitten.                                        */

@media (max-width: 380px) {
  .floating-booking {
    font-size: 0.85rem;
    padding: 15px 20px;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 5 · Cookie-Aktionsbuttons auf sehr kleinen Screens
   ────────────────────────────────────────────────────────────
   Auf < 360px wurden die drei Buttons zu schmal.               */

@media (max-width: 360px) {
  .cookie-actions {
    grid-template-columns: 1fr;
  }
  .cookie-act--accept {
    order: -1;
  }
}


/* ────────────────────────────────────────────────────────────
   FIX 6 · iOS Safari – overflow-x auf html statt body
   ────────────────────────────────────────────────────────────
   overflow-x: hidden auf body kann auf iOS Safari dazu führen,
   dass position:fixed Elemente mit left:50%+transform falsch
   gerendert werden (verursacht Bug #1 oben). Besser auf html.  */

html {
  overflow-x: hidden;
}

body {
  overflow-x: visible;   /* War: overflow-x: hidden – Konflikt mit fixed+transform */
}