/* =====================================================================
   ProBit · Consent-Banner im "Signalfluss"-Look (Tag 9)
   Skin fuer das Pixelmate-Consent-Plugin. Die Consent-MECHANIK bleibt
   unangetastet - sie blockiert Google Analytics nachweislich vor der
   Einwilligung (geprueft: ohne Consent-Cookie kein gtag, kein dataLayer,
   0 externe Skripte). Hier wird ausschliesslich das Aussehen angepasst
   und die Gleichrangigkeit der Buttons hergestellt.

   Laedt NACH `pixelmate-public-css` (Abhaengigkeit in functions.php),
   deshalb reichen gleich spezifische Selektoren.
   ===================================================================== */

/* --- Karte ---------------------------------------------------------- */
/* Der Wrapper ist `position:fixed` und damit shrink-to-fit: seine Breite
   ergibt sich aus dem Inhalt. Ein Grid mit `1fr`-Spalten (die Buttonreihe
   unten) haette darin keine aufloesbare Bezugsbreite und kollabiert auf 0.
   Deshalb bekommt die KARTE hier eine definite Breite - der Wrapper bleibt
   unangetastet: er ist die 100vw-Abdunklung des Plugins. (Tag 9: genau die
   hatte ich mit `width:auto` versehentlich auf Kartenbreite geschrumpft,
   sichtbar als dunkler Balken am linken Rand.) */
.pixelmate-general-banner,
.pixelmate-settings {
  width: min(520px, calc(100vw - 2rem)) !important;
  box-sizing: border-box !important;
  background: var(--pb-surface) !important;
  border: 1px solid var(--pb-card-border) !important;
  border-radius: var(--pb-radius-lg) !important;
  box-shadow: var(--pb-shadow-lg) !important;
  padding: clamp(1.5rem, 3vw, 2rem) !important;
  font-family: inherit;
  color: var(--pb-text) !important;
}

/* Signal-Kante oben - dasselbe Motiv wie die Leiterbahnen im Hero */
.pixelmate-general-banner {
  position: relative;
  overflow: hidden;
}
.pixelmate-general-banner::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pb-cyan) 0%, var(--pb-navy) 60%, transparent 100%);
}

/* --- Kopf: Mono-Label + Bit-Raute wie site-weit ---------------------- */
.pixelmate-general-banner h3,
.pixelmate-settings > div:first-child {
  color: var(--pb-navy) !important;
  font-weight: 700 !important;
  font-size: clamp(1.15rem, 2vw, 1.35rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em;
  margin: 0 0 0.9rem !important;
}
.pixelmate-general-banner h3::before,
.pixelmate-settings > div:first-child::before {
  content: "DATENSCHUTZ";
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.55rem;
  font-family: var(--pb-mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--pb-cyan-ink);
}
.pixelmate-general-banner h3::after,
.pixelmate-settings > div:first-child::after { content: none; }

/* --- Fliesstext ------------------------------------------------------ */
.pixelmate-general-notice,
.pixelmate-settings > div:nth-child(2) {
  color: var(--pb-text) !important;
  font-size: 0.94rem !important;
  line-height: 1.62 !important;
  margin: 0 0 1.25rem !important;
  max-height: 42vh;
  overflow-y: auto;
}

/* --- Buttons: Zustimmen und Ablehnen GLEICHRANGIG --------------------
   Rechtlich heikel waere ein "Alle akzeptieren" als grosser Farbknopf
   neben einem blassen "Alle ablehnen". Beide Schaltflaechen haben daher
   dieselbe Groesse, dieselbe Form und dasselbe Gewicht - sie
   unterscheiden sich nur im Farbton. "Einstellungen" darf als
   nachgeordnete Option leiser sein.
   --------------------------------------------------------------------- */
.pixelmate-general-btns {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 0.7rem !important;
  align-items: stretch;
}
.pixelmate-btn-single-deny { display: contents !important; }

.pixelmate-general-allow,
.pixelmate-general-deny {
  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0.8rem 1rem !important;
  border: 0 !important;
  border-radius: var(--pb-radius-md) !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  cursor: pointer;
  transition: background var(--pb-transition), transform var(--pb-transition);
}
.pixelmate-general-allow { background: var(--pb-navy) !important; color: #fff !important; }
.pixelmate-general-deny  { background: #41556e !important; color: #fff !important; }
.pixelmate-general-allow:hover { background: var(--pb-blue-600) !important; transform: translateY(-1px); }
.pixelmate-general-deny:hover  { background: #33465c !important; transform: translateY(-1px); }

.pixelmate-general-single {
  grid-column: 1 / -1;
  width: 100% !important;
  margin: 0.15rem 0 0 !important;
  padding: 0.5rem !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--pb-text-muted) !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pixelmate-general-single:hover { color: var(--pb-navy) !important; }

/* --- Fusszeile ------------------------------------------------------- */
.pixelmate-general-footer,
.pixelmate-settings-footer {
  margin-top: 1.1rem !important;
  padding-top: 0.9rem;
  border-top: 1px solid var(--pb-line);
  font-family: var(--pb-mono, ui-monospace, Consolas, monospace);
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  color: var(--pb-text-muted) !important;
}
.pixelmate-general-footer a,
.pixelmate-settings-footer a {
  color: var(--pb-cyan-ink) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* =====================================================================
   Einstellungen-Dialog
   ===================================================================== */
.pixelmate-settings { width: min(620px, calc(100vw - 2rem)) !important; }

.pixelmate-settings-essential,
.pixelmate-settings-stats {
  background: var(--pb-surface-alt) !important;
  border: 1px solid var(--pb-card-border) !important;
  border-radius: var(--pb-radius-md) !important;
  margin-bottom: 0.7rem !important;
}
.pixelmate-settings-essential-h,
.pixelmate-settings-stats-h {
  color: var(--pb-navy) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
}
.pixelmate-setting-items { color: var(--pb-text) !important; font-size: 0.9rem !important; }

/* Notwendige Cookies: der Schalter ist `disabled` und laesst sich nicht
   bedienen - als Schalter dargestellt wirkt er nur kaputt. Er wird daher
   ausgeblendet und der Zustand als Abzeichen benannt. */
.pixelmate-settings-essential .pix-toggle-wrapper { display: none !important; }
.pixelmate-settings-essential-h::after {
  content: "Immer aktiv";
  display: inline-block;
  margin-left: 0.7rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: var(--pb-surface);
  border: 1px solid var(--pb-card-border);
  font-family: var(--pb-mono, ui-monospace, Consolas, monospace);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pb-text-muted);
  vertical-align: middle;
}

/* Der Dialog lief in einen eigenen Scrollbereich und schnitt den Inhalt ab
   (User-Screenshot: "Anbieter" halb sichtbar). Mehr Hoehe, und gescrollt
   wird der Inhalt, nicht die Karte. */
.pixelmate-settings-form.settings-checkbox {
  max-height: min(58vh, 520px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;   /* sonst waagrechte Rollleiste am Fuss */
  padding-right: 0.4rem;
}
.pixelmate-settings { overflow-x: hidden !important; }
.pix-slide { padding-bottom: 0.4rem; }
.pix-cookie-description { line-height: 1.55 !important; }

/* Schalter: Marken-Cyan statt Material-Blau. Nur die Farben werden
   getauscht, die Geometrie bleibt beim Plugin. */
.pix-toggle.pix-checkbox { accent-color: var(--pb-cyan-ink); }
.pix-toggle.pix-checkbox:checked { background: var(--pb-cyan-ink) !important; }
.pix-toggle.pix-checkbox:not(:checked) { background: #c2c8ce !important; }
.pix-toggle.pix-checkbox:disabled { background: #9fb3c4 !important; opacity: 1 !important; cursor: not-allowed; }

/* Speichern-Button war fest verdrahtetes Material-Blau (#2196f3) und
   passte damit in keine Marke - jetzt ProBit-Navy. */
.pixelmate-settings-btns {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem !important;
  margin-top: 1.2rem !important;
}
.pixelmate-settings-save.settings-btn {
  background: var(--pb-navy) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: var(--pb-radius-md) !important;
  min-height: 48px !important;
  padding: 0.8rem 1.6rem !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  width: auto !important;
  cursor: pointer;
}
.pixelmate-settings-save.settings-btn:hover { background: var(--pb-blue-600) !important; }

.pixelmate-settings-reset {
  background: transparent !important;
  border: 0 !important;
  color: var(--pb-text-muted) !important;
  font-family: inherit !important;
  font-size: 0.88rem !important;
  font-weight: 600 !important;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 0.5rem 0 !important;
  cursor: pointer;
}
.pixelmate-settings-reset:hover { color: var(--pb-navy) !important; }

/* --- Widerruf-Griff (muss dauerhaft erreichbar bleiben) -------------- */
.pixelmate-revoke {
  font-family: var(--pb-mono, ui-monospace, Consolas, monospace) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.08em;
}

/* --- Schmale Schirme -------------------------------------------------- */
@media (max-width: 560px) {
  .pixelmate-general-banner,
  .pixelmate-settings { max-width: none; border-radius: var(--pb-radius-md) !important; }
  .pixelmate-general-btns { grid-template-columns: 1fr; }
}

/* --- Tastatur-Fokus sichtbar halten (WCAG 2.4.7) --------------------- */
.pixelmate-general-allow:focus-visible,
.pixelmate-general-deny:focus-visible,
.pixelmate-general-single:focus-visible,
.pixelmate-settings-save:focus-visible,
.pixelmate-settings-reset:focus-visible {
  outline: var(--pb-focus-ring);
  outline-offset: var(--pb-focus-offset);
}

/* =====================================================================
   BANNER ALS BALKEN STATT DIALOG  (Tag 11, User-Wunsch "pragmatischer")
   Gemessen vorher @1440x900: Karte 450 x 575 px = 64% der Fensterhoehe,
   davor eine ganzseitige Abdunklung, Buttons in drei Reihen. Fuer eine
   Einwilligung mit genau zwei Optionen ist das zu viel Apparat.
   Jetzt: schmaler Balken unten, Text links, Buttons rechts.
   Bewusst BEIBEHALTEN, weil rechtlich relevant:
     - "Alle ablehnen" gleich gross und gleich prominent wie "Alle akzeptieren"
     - "Einstellungen" (granulare Wahl) auf der ERSTEN Ebene erreichbar
     - Links auf Datenschutz und Impressum im Banner
   Die Abdunklung faellt weg: sie ist nicht vorgeschrieben, und ohne
   Einwilligung laedt ohnehin kein Tracker. Damit die durchsichtige
   Vollbild-Ebene keine Klicks mehr abfaengt, `pointer-events` umgestellt.
   ===================================================================== */
.pixelmate-general-banner-wrapper {
  background: transparent !important;
  right: 0 !important;                 /* Plugin setzt -15px -> Balken saesse aus der Mitte */
  /* KEIN !important auf `display`: das Plugin blendet den Wrapper beim
     Klick auf Akzeptieren/Ablehnen per Inline-`display:none` aus. Ein
     Author-`!important` schlaegt Inline ohne !important - das Banner
     waere nach der Entscheidung stehen geblieben (genau so passiert). */
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 1rem 1rem;
  box-sizing: border-box;
  pointer-events: none;                /* Seite bleibt bedienbar ... */
}
.pixelmate-general-banner-wrapper .pixelmate-general-banner {
  pointer-events: auto;                /* ... der Balken selbst nicht */
  /* Das Plugin macht die Karte SELBST `position:fixed` mit top/left:50% und
     `transform: translate(-50%,-50%)` - sie haengt also gar nicht im Wrapper.
     Solange das steht, ist jede Flex-/Grid-Ausrichtung am Wrapper wirkungslos
     (gemessen: Karte 450x900px, 14px-Spalte, aus der Mitte geschoben).
     Deshalb hier die Positionierung neutralisieren. `relative` statt `static`,
     damit die Signal-Kante (`::after`, absolut) ihren Bezug behaelt. */
  position: relative !important;
  top: auto !important; right: auto !important;
  bottom: auto !important; left: auto !important;
  transform: none !important;
  width: min(1200px, 100%) !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;         /* Plugin setzt overflow-y:scroll */
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1.5rem;
  align-items: center;
}
.pixelmate-general-banner-wrapper .pixelmate-general-banner h3 {
  grid-area: 1 / 1; margin: 0 0 0.3rem !important;
}
.pixelmate-general-banner-wrapper .pixelmate-general-notice {
  grid-area: 2 / 1;
  max-height: none; overflow: visible;
  margin: 0 0 0.45rem !important;
}
.pixelmate-general-banner-wrapper .pixelmate-general-footer {
  grid-area: 3 / 1; margin: 0 !important;
}
.pixelmate-general-banner-wrapper .pixelmate-general-btns {
  grid-area: 1 / 2 / 4 / 3;
  width: 320px;
  align-self: center;
}

/* Schmale Schirme: wieder untereinander, Buttons ueber die volle Breite. */
@media (max-width: 860px) {
  .pixelmate-general-banner-wrapper .pixelmate-general-banner {
    grid-template-columns: minmax(0, 1fr);
  }
  .pixelmate-general-banner-wrapper .pixelmate-general-banner h3    { grid-area: auto; }
  .pixelmate-general-banner-wrapper .pixelmate-general-notice       { grid-area: auto; margin-bottom: 0.9rem !important; }
  .pixelmate-general-banner-wrapper .pixelmate-general-btns         { grid-area: auto; width: auto; margin: 0 0 0.8rem; }
  .pixelmate-general-banner-wrapper .pixelmate-general-footer       { grid-area: auto; }

  /* Auf 375px belegte der Balken 70% des Schirms (gemessen 565px): 8 Textzeilen
     plus drei gestapelte Buttons. Zustimmen und Ablehnen stehen deshalb auch
     hier NEBENEINANDER (gleich gross, gleiches Gewicht - die Gleichrangigkeit
     bleibt gewahrt), und der Fliesstext rueckt eine Stufe kleiner.
     Das Innenabstands-Mass laesst sich nicht per CSS aendern: das Plugin setzt
     `padding: 24px !important` INLINE, und Inline-!important schlaegt jedes
     Stylesheet. Dafuer waere die Plugin-Option noetig. */
  .pixelmate-general-banner-wrapper .pixelmate-general-btns {
    grid-template-columns: 1fr 1fr !important;
  }
  .pixelmate-general-banner-wrapper .pixelmate-general-notice {
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
  }
}

/* Kurzmeldung nach "Auswahl zuruecksetzen" (js/consent-fix.js, Abschnitt 5).
   Ersetzt das frueher aufpoppende zweite Fenster: der Nutzer bleibt im
   Dialog und sieht, dass die Schalter auf den Auslieferungszustand
   zurueckgesprungen sind und noch gespeichert werden muessen. */
.pixelmate-settings .pb-consent-hinweis {
  margin: 0 0 0.9rem !important;
  padding: 0.6rem 0.8rem;
  border-left: 3px solid var(--pb-cyan);
  background: rgba(41, 163, 224, 0.08);
  border-radius: 0 var(--pb-radius-sm) var(--pb-radius-sm) 0;
  font-size: 0.86rem !important;
  line-height: 1.5 !important;
  color: var(--pb-text) !important;
}


/* Inhalt der Kategorie "Notwendige Cookies" (js/consent-fix.js, Abschnitt 6).
   Das Plugin gestaltet seine eigenen Eintraege per Inline-Styles; damit der
   ergaenzte Eintrag daneben nicht fremd wirkt, wird hier dieselbe Anmutung
   mit Klassen nachgebaut - Beschriftungen klein und ruhig, Werte lesbar. */
.pixelmate-settings .pb-consent-item { padding: 12px 0 20px 12px; }
.pixelmate-settings .pb-consent-item__name {
  font-size: 1rem !important; font-weight: 700 !important;
  color: var(--pb-navy) !important; margin: 0 0 0.2rem !important;
}
.pixelmate-settings .pb-consent-item__label {
  font-size: 0.82rem; font-weight: 700; color: var(--pb-text);
  margin: 0.75rem 0 0.1rem;
}
.pixelmate-settings .pb-consent-item__val {
  font-size: 0.86rem !important; line-height: 1.5 !important;
  color: var(--pb-text) !important; margin: 0 0 0 0.4rem !important;
}
.pixelmate-settings .pb-consent-item__link { margin: 0.8rem 0 0 !important; }
.pixelmate-settings .pb-consent-item__link a {
  font-size: 0.82rem; color: var(--pb-cyan-ink); text-decoration: underline;
}