/*
 * Compact cookie banner. Complianz stays the consent tool; this file only changes its look.
 * Approved on 31 October 2026 as a local revision: a bar along the bottom instead of a card, the short first layer,
 * Akzeptieren and Ablehnen side by side with the same size and style, Einstellungen and the privacy link kept.
 * Texts, categories, consent defaults and the stored choices are Complianz's and unchanged.
 * The floating «Cookie-Einstellungen» tab follows its Complianz setting (on this site «Hide everywhere», approved on
 * 2 November 2026); the «Cookie-Einstellungen» control in the footer opens the same settings on every page.
 * The container id gives these rules priority over Complianz's generated banner CSS and its custom CSS.
 * The last grid row is Complianz' block of document links under the buttons. It stays empty while «legal documents»
 * is off in the banner settings (the message already links the privacy statement), so the bottom padding is one row
 * gap smaller than the top padding; with the links switched on they get that gap above them.
 */
#cmplz-cookiebanner-container {
  --cmplz_text_color: var(--ink); --cmplz_hyperlink_color: var(--ink);
  --cmplz_slider_active_color: var(--ink); --cmplz_category_header_always_active_color: var(--ok);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner {
  top: auto; right: 0; bottom: 0; left: 0;
  transform: none;
  width: 100%; min-width: 0; max-width: none;
  max-height: 85vh; overflow-y: auto;
  margin: 0; padding: 12px var(--gutter) 4px;
  border: 0; border-top: 1px solid var(--line); border-radius: 0;
  box-shadow: 0 -4px 18px rgba(16, 24, 28, .14);
  background: #fff; color: var(--ink);
  font-family: var(--font-body);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "body" "buttons";
  row-gap: 10px; column-gap: 24px;
  align-items: center;
}
/* Complianz closes the banner after a choice with .cmplz-dismissed (display: none); the grid above must not undo that.
   Its .cmplz-hidden (before the script decides) is !important and needs no repeat here. */
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-dismissed { display: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-show:hover { box-shadow: 0 -4px 18px rgba(16, 24, 28, .14); }
#cmplz-cookiebanner-container .cmplz-cookiebanner > * { grid-column: 1 / -1; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-divider,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-logo,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-close { display: none; }

#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header { grid-area: head; display: block; margin: 0; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-title {
  display: block; margin: 0; font-family: var(--font-head); font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--ink);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body {
  grid-area: body; width: auto; min-width: 0; max-height: none; overflow: visible; margin: 0;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message {
  width: auto; margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.45; color: var(--ink);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-message a {
  color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px;
}

/* buttons: accept and refuse look the same; settings is the lighter third */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons {
  grid-area: buttons; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  width: 100%; min-height: 46px; height: auto; margin: 0; padding: 8px 10px;
  border-radius: var(--btn-radius); font-family: var(--font-body); font-size: 15px; font-weight: 600; line-height: 1.2;
  white-space: normal; text-decoration: none; cursor: pointer;
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-deny {
  background: var(--cta-bg); color: var(--cta-ink); border: 2px solid var(--cta-bg);
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
  background: #fff; color: var(--ink); border: 2px solid var(--ink);
}
@media (hover: hover) {   /* no hover look that sticks after a tap on touch screens */
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:hover { filter: brightness(1.15); }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-view-preferences:hover,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-save-preferences:hover { filter: none; background: #f1f3f3; }
}
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-btn:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner a:focus-visible,
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-category-toggle:focus-visible { outline: 3px solid var(--focus, #2a6fdb); outline-offset: 2px; }
/* the switch is drawn by the label's ::before; its focus ring follows the site instead of Complianz' blue shadow */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus + .cmplz-label::before { box-shadow: none; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-banner-checkbox input.cmplz-consent-checkbox:focus-visible + .cmplz-label::before { outline: 3px solid var(--focus, #2a6fdb); outline-offset: 2px; }

/* preferences: the categories open below the text; the bar scrolls if they do not fit */
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories { margin-top: 10px; width: auto; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-category-title { font-family: var(--font-body); font-size: 15px; }
#cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-categories .cmplz-description { font-size: 14px; line-height: 1.45; color: var(--muted); }
/* 44 px tap areas in the category rows: Complianz' switch is an invisible 40 x 20 px checkbox over a drawn 30 x 16 px
   switch, its arrow button 18 x 18 px. The invisible checkbox now fills a 48 x 44 px box around the switch, the arrow
   button is 44 x 44 px; negative margins keep the rows as high as before. «Funktional» (always on) is not touched. */
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header { grid-template-columns: 1fr auto 44px; }
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header > .cmplz-banner-checkbox { width: 48px; height: 44px; margin: -10px 0; justify-content: center; }
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header > .cmplz-banner-checkbox input.cmplz-consent-checkbox { top: 0; left: 0; width: 100%; height: 100%; margin: 0; }
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-toggle { width: 44px; height: 44px; margin: -10px -10px -10px 0; }

/* phones and short screens: the title stays for screen readers (it names the dialog) but takes no line */
@media (max-width: 767.98px), (max-height: 400px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner { grid-template-areas: "body" "buttons"; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-header {
    position: absolute; width: 1px; height: 1px; max-height: none; margin: -1px !important; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
}
/* phones: three equal buttons in one row. «Einstellungen» is the longest word (98 px at 15 px), so narrower phones get
   14 px text and less side padding, and the smallest (320 px) put the third button on its own row. Akzeptieren and
   Ablehnen stay the same size in every case. «Auswahl speichern» may wrap onto two lines. */
@media (max-width: 767.98px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { padding: 8px 4px; }
}
@media (max-width: 389.98px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { gap: 6px; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { padding: 8px 3px; font-size: 14px; }
}
@media (max-width: 354.98px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-view-preferences,
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-save-preferences { grid-column: 1 / -1; }
}

/* wider screens: one row, text on the left, the buttons on the right, inside the page width */
@media (min-width: 768px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "head buttons" "body buttons";
    row-gap: 4px;
    /* the text starts and the buttons end at the edges of the page content (.container) */
    padding: 14px max(var(--gutter), calc((100% - var(--container)) / 2)) 10px;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { grid-template-columns: repeat(3, auto); align-self: center; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn { min-width: 136px; padding: 8px 18px; white-space: nowrap; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible {
    grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "buttons"; row-gap: 10px; padding-bottom: 4px;
  }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-body { max-width: 760px; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner.cmplz-categories-visible .cmplz-buttons { justify-self: start; }
}

/* short landscape phones: Complianz shrinks everything with zoom; keep the bar readable instead.
   Only what Complianz marks !important is overridden with !important (never display, so its hiding keeps working). */
@media (max-height: 400px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner { zoom: 1; height: auto; max-height: 90vh; padding: 8px var(--gutter) 0 !important; row-gap: 8px; overflow-y: auto; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-body { margin-top: 0 !important; max-height: none !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons { gap: 8px !important; }
  #cmplz-cookiebanner-container .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
    zoom: 1 !important; height: auto !important; min-height: 44px !important; padding: 6px 12px !important; font-size: 15px !important; line-height: 1.2 !important; white-space: nowrap !important;
  }
}

/* short and wide (landscape phones): text and buttons in one row, the title only for screen readers */
@media (max-height: 400px) and (min-width: 768px) {
  #cmplz-cookiebanner-container .cmplz-cookiebanner:not(.cmplz-categories-visible) { grid-template-areas: "body buttons"; }
}

/* the floating «Cookie-Einstellungen» tab: Complianz decides whether it shows (setting «Hide everywhere»); only the font follows the site */
#cmplz-manage-consent .cmplz-manage-consent { font-family: var(--font-body); }