/* cookiebot-mobile.css
   Macht den Cookiebot-Consent-Banner (#CybotCookiebotDialog, Template "popup-v2" /
   Klasse CybotMultilevel) auf Mobilgeraeten (max-width: 640px) kompakt:
   Bottom-Sheet, interner Scroll fuer Text + Kategorie-Schalter, Button-Leiste
   immer sichtbar. Desktop (ab 641px) bleibt vollstaendig unveraendert.

   Einbindung: lib/gtm.php -> cookiebot_head() haengt den <link> an (mit ?v=mtime).
   Zuruecknehmen: die <link>-Zeile in lib/gtm.php entfernen ODER diese Datei loeschen.

   Spezifitaet: Cookiebots eigenes CSS ist eine Cross-Origin-Stylesheet (consentcdn),
   die asynchron geladen wird -> Ladereihenfolge nicht garantiert. Deshalb bewusst
   hoeher spezifisch als Cookiebot: Root ueber #CybotCookiebotDialog[class] (1,1,0),
   Kinder ueber Zwei-ID-Selektoren (2,0,0). !important nur dort, wo Cookiebot sonst
   ueberschreibt. Verifiziert: gewinnt auch als erstes Head-Element. */

@media (max-width: 640px) {
  /* Root: kompakte Leiste am unteren Bildschirmrand, volle Breite, oben abgerundet */
  #CybotCookiebotDialog[class] {
    position: fixed !important;
    top: auto !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;        /* popup-v2 zentriert per translate(-50%,-50%) -> aufheben */
    margin: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 55vh !important;
    max-height: 55dvh !important;      /* dvh gewinnt in unterstuetzenden Browsern, vh ist Fallback */
    border-radius: 12px 12px 0 0 !important;
    overflow: hidden !important;
    font-size: 13px !important;
  }

  /* Inhalts-Wrapper als Flex-Spalte -> Scrollbereich flexibel, Button-Leiste fix */
  #CybotCookiebotDialog .CybotCookiebotDialogContentWrapper[class] {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: 55vh !important;
    max-height: 55dvh !important;
  }

  /* Kopfbereich/Logo ausblenden (spart Hoehe) */
  #CybotCookiebotDialog #CybotCookiebotDialogHeader { display: none !important; }

  /* Tab-Reiter (Zustimmung / Details / Ueber Cookies) bleiben oben sichtbar & bedienbar */
  #CybotCookiebotDialog #CybotCookiebotDialogNav { flex: 0 0 auto !important; }

  /* Scrollbereich: Text + Kategorie-Schalter scrollen intern */
  #CybotCookiebotDialog #CybotCookiebotDialogTabContent {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
  /* Cookiebots interne (fixe) Scrollcontainer freigeben, damit der aeussere Bereich scrollt */
  #CybotCookiebotDialog #CybotCookiebotDialogBody,
  #CybotCookiebotDialog #CybotCookiebotDialogBody .CybotCookiebotScrollContainer,
  #CybotCookiebotDialog #CybotCookiebotDialogBodyContent {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Button-Leiste immer sichtbar (scrollt nicht mit) */
  #CybotCookiebotDialog #CybotCookiebotDialogFooter {
    flex: 0 0 auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 8px 12px !important;
  }
  #CybotCookiebotDialog #CybotCookiebotDialogFooter .CybotCookiebotScrollArea {
    max-height: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  /* Drei gleich grosse, gleich auffaellige Buttons (grosse Touch-Ziele >= 48px).
     "Ablehnen" wird NICHT verkleinert/versteckt/ausgegraut. */
  #CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }
  #CybotCookiebotDialog #CybotCookiebotDialogBodyButtonsWrapper > button {
    width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
  }
}