/**
 * Der Einwilligungsbanner als schmale Leiste am unteren Rand.
 *
 * Beauftragt von Tim am 16.10.2026 (Punkt 6), die Form mit zwei Knöpfen hat
 * Jan am 18.10.2026 gewählt: oben der Hinweis über die volle Breite, darunter
 * links Impressum, Datenschutz und „Einstellungen", rechts auf zwei Dritteln
 * „Ablehnen" und „Alle akzeptieren" — gleich gross, beide gefüllt. Am Telefon
 * stehen die Knöpfe untereinander, die Verweise in einer Zeile darunter.
 * „Einstellungen" öffnet in der Leiste die Kategorien und „Speichern".
 *
 * Das Stilblatt der TYPO3-Erweiterung bleibt unangetastet; diese Regeln
 * überstimmen es allein über `#cookie-consent`. Das Markup bleibt Element für
 * Element dasselbe, darum kann es nicht anders gehen:
 *
 * - Die Bibliothek setzt am Behälter `style.display = "block"` als Inline-Stil.
 *   Er kann also selbst kein Flex-Behälter werden; die Anordnung sitzt eine
 *   Ebene tiefer in `.consent-modal`.
 * - Die Knöpfe stehen im Formular, die Verweise Impressum und Datenschutz
 *   ausserhalb. `form { display: contents }` macht beide zu Geschwistern in
 *   derselben Zeile; abgeschickt wird das Formular wie zuvor.
 * - „Speichern" bleibt im DOM: `toggleFormDisabledState` setzt
 *   `saveButton.disabled` ohne Prüfung auf null. Es ist nur ausgeblendet,
 *   solange die Einstellungen zu sind.
 * - Die zweite Ebene schaltet die Bibliothek selbst: „Einstellungen" setzt
 *   `open` an `.consent-modal`, `.show-details` und `.detail`.
 *
 * Farben, Schrift, Rundung und Schatten kommen weiter aus dem Hausstil
 * (`fileadmin/admin/css/style.css`), der die Erweiterung mit `!important`
 * überstimmt: beide Knöpfe gefüllt in #DB1C1C, keiner durchscheinend. Hier
 * steht davon nichts, denn ohne `!important` käme es nicht an. Die eine
 * Ausnahme ist die Höhe der geöffneten Leiste, siehe dort.
 *
 * Kein Tor sieht den Banner (`tools/stabilize.mjs` blendet ihn aus). Den
 * Prüfstand hält `apps/site/test/einwilligung-leiste-browser.test.mjs`.
 */

#cookie-consent.cookie-consent-container {
  top: auto;
  bottom: 0;
  height: auto;
  background-color: transparent;
}

#cookie-consent .consent-modal,
#cookie-consent .consent-modal.open {
  position: relative;
  top: auto;
  left: auto;
  transform: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  width: 100%;
  max-width: none;
  height: auto;
  min-height: 0;
  /*
   * Oben bleibt der Kopf der Seite frei (100 px am Schirm, 88 px am Telefon):
   * der Banner steht in `#mm-0.mm-page` mit z-index 1, sein 999999 gilt nur
   * dort drinnen, und der feste Kopf (z-index 10) läge über der ersten Zeile.
   * Was darüber hinausgeht, rollt in der Leiste.
   */
  max-height: calc(100vh - 6.5rem);
  max-height: calc(100dvh - 6.5rem);
  margin: 0;
  /* Der Inhalt bleibt auf breiten Schirmen bei 75rem und mittig. */
  padding: 1rem max(2rem, calc((100% - 75rem) / 2));
  transition: none;
}

/*
 * Der Hausstil gibt dem geöffneten Fenster `calc(100vh - 300px) !important`
 * — für ein Fenster in der Mitte gedacht. Einer Leiste am Rand liesse das bei
 * einem quer gehaltenen Telefon (360 px hoch) 60 px; sie wächst stattdessen
 * mit dem Inhalt bis unter den Kopf der Seite und rollt darüber in sich.
 */
#cookie-consent .consent-modal.open {
  height: auto !important;
}

/* Die Überschrift bleibt für Vorleser, sichtbar trägt der Hinweis allein. */
#cookie-consent .consent-modal .cookie-headline {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

#cookie-consent .consent-modal form {
  display: contents;
}

/* Nur versteckte Felder; ohne Box keine leere Zeile über dem Hinweis. */
#cookie-consent .consent-modal form > div:first-child {
  display: none;
}

#cookie-consent .consent-modal .hint {
  flex: 0 0 100%;
  order: 1;
  font-size: 0.875rem;
}

#cookie-consent .consent-modal .hint p {
  margin: 0;
}

#cookie-consent .consent-modal .options {
  flex: 0 0 100%;
  order: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 2rem;
  margin: 0;
}

#cookie-consent .consent-modal .options li {
  display: block;
  width: auto;
  margin: 0;
}

#cookie-consent .consent-modal .options .label {
  margin: 0;
}

#cookie-consent .consent-modal .footer-links,
#cookie-consent .consent-modal a.show-details {
  width: auto;
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: left;
}

#cookie-consent .consent-modal .footer-links {
  order: 3;
}

#cookie-consent .consent-modal a.show-details {
  order: 4;
}

/* Unterstrichen, damit die drei als Verweise neben den Knöpfen kenntlich
   sind; „ausblenden" steht in einem inline-block, der die Linie nicht erbt. */
#cookie-consent .consent-modal .footer-links a,
#cookie-consent .consent-modal a.show-details,
#cookie-consent .consent-modal a.show-details > span {
  text-decoration: underline;
}

/* Rechts zwei Drittel; wächst bis dahin und lässt den Rest dem Rand. */
#cookie-consent .consent-modal .buttons {
  flex: 1 1 auto;
  order: 5;
  display: flex;
  gap: 0.75rem;
  max-width: calc(200% / 3);
  margin: 0 0 0 auto;
}

#cookie-consent .consent-modal .buttons .btn {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  margin: 0;
}

/* Ablehnen links, Alle akzeptieren rechts; im Markup steht es umgekehrt. */
#cookie-consent .consent-modal .buttons .deny {
  order: 1;
}

#cookie-consent .consent-modal .buttons .save {
  order: 2;
}

#cookie-consent .consent-modal .buttons .select-all {
  order: 3;
}

#cookie-consent .consent-modal .details {
  flex: 0 0 100%;
  order: 6;
}

/* Erste Ebene: keine Kategorien, kein Speichern, keine Einzelheiten. */
#cookie-consent .consent-modal:not(.open) .options,
#cookie-consent .consent-modal:not(.open) .buttons .save,
#cookie-consent .consent-modal:not(.open) .details {
  display: none;
}

@media (max-width: 767px) {
  #cookie-consent .consent-modal,
  #cookie-consent .consent-modal.open {
    padding: 1rem;
  }

  /* Text, dann die Knöpfe untereinander, dann eine Zeile Verweise. */
  #cookie-consent .consent-modal .buttons {
    flex: 0 0 100%;
    order: 3;
    flex-direction: column;
    gap: 0.5rem;
    max-width: none;
    margin: 0;
  }

  #cookie-consent .consent-modal .buttons .btn {
    flex: none;
    width: 100%;
  }

  #cookie-consent .consent-modal .footer-links {
    order: 4;
  }

  #cookie-consent .consent-modal a.show-details {
    order: 5;
  }
}