/* Einwilligungsbanner.
   ==============================================================================================

   ⭐ NEUTRAL HELLGRAU MIT EIGENEN FARBEN (0.14.0, 14.10.2026, Vorgabe des Users: „neutral, in einem hellen
   Grauton, damit wir es als Plugin realisieren können“). Bis dahin zog das Banner die Farbwelt von
   meinedatenspur.de (--spurnacht-2, --signal) und war damit auf jedem anderen Portal ein dunkler Fremdkörper.
   Jetzt stehen alle Farben als --einwilligung-* auf .einwilligung. Ein Portal, das eigene Farben will,
   überschreibt diese Variablen in seinem Theme, nicht die Regeln hier. Schrift erbt weiter von der Seite.

   ⚠️ z-index 150: über Kopfpille (60), Vertrauensplakette (69) und Hochknopf (70), aber UNTER
   dem Fenster der Rechtstexte (200). Das ist Absicht. Der Verweis im Banner öffnet die
   Datenschutzhinweise in genau diesem Fenster, und es muss über dem Banner liegen, sonst liest
   niemand, wozu er zustimmen soll.
   ============================================================================================== */

.einwilligung{
  /* ☠️ EIGENE LUFT, NICHT '--rahmen' DIREKT (21.09.2026).
     Das Theme setzt '--rahmen' unter 620px auf '0px' — dort liegt die Seitenfläche bewusst
     randlos. Ein Fenster, das etwas fragt, braucht seinen Abstand trotzdem.
     ⚠️ NICHT '--luft' nennen: Das Theme hat bereits ein '--luft' auf ':root', ein zweites
     gleichen Namens würde hier still überschrieben und an alle Kinder vererbt. */
  --einwilligung-luft:24px;
  /* ⚠️ SENKRECHT EIGENS GEREGELT. Seitlich darf es eng sein, oben und unten nicht: Genau dort
     entscheidet sich, ob der Kasten wie ein FENSTER auf der Seite wirkt oder wie eine zweite
     Seite, die die erste verdeckt. Auf dem Telefon war das Zweite der Fall (gemeldet am
     21.09.2026, „am besten nicht ganze Höhe einnehmen"), deshalb steht der Wert dort HÖHER
     als der seitliche, nicht niedriger. */
  --einwilligung-hoch:24px;

  /* Farben (siehe Kopf). Kontraste auf dem Grund: Schrift 11:1, leise Schrift 6:1. */
  --einwilligung-grund:#F4F4F5;
  --einwilligung-leiste:#EBEBED;
  --einwilligung-linie:#DCDCDE;
  --einwilligung-schrift:#2E2E30;
  --einwilligung-stark:#1A1A1C;
  --einwilligung-leise:#5E5E62;
  --einwilligung-punkt:#8A8A8E;
  --einwilligung-knopf:#FFFFFF;
  --einwilligung-knopf-hover:#F0F0F2;
  --einwilligung-knopf-rand:#BDBDC1;

  position:fixed;
  inset:0;
  z-index:150;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:var(--einwilligung-hoch) var(--einwilligung-luft);
  padding-bottom:max(var(--einwilligung-hoch),env(safe-area-inset-bottom));
}

.einwilligung[hidden]{display:none}

.einwilligung__kasten{
  position:relative;
  width:100%;
  max-width:560px;
  /* ☠️ SPALTE MIT SCROLLENDER MITTE. Kopf und Knopfreihe bleiben stehen, nur der Inhalt
     scrollt. Ohne das rutschen auf einem kleinen Gerät die Knöpfe aus dem Bild, sobald die
     Auswahl aufgeklappt ist — und dann sieht man die Frage, aber keine Antwort. */
  display:flex;
  flex-direction:column;
  /* ⚠️ 'dvh' und nicht 'vh': Auf dem Telefon rechnet 'vh' mit der Fensterhöhe OHNE die
     ein- und ausfahrende Browserleiste, der Kasten reichte also unter sie. 'dvh' folgt der
     tatsächlich sichtbaren Höhe. Die erste Zeile ist der Rückfall für Browser ohne 'dvh'. */
  max-height:calc(100vh - 2 * var(--einwilligung-hoch));
  max-height:calc(100dvh - 2 * var(--einwilligung-hoch));

  background:var(--einwilligung-grund);
  color:var(--einwilligung-schrift);
  border:1px solid var(--einwilligung-linie);
  border-radius:calc(var(--radius,8px) + 6px);
  box-shadow:0 26px 70px rgba(0,0,0,.18);
  font-size:14.5px;
  line-height:1.6;
  overflow:hidden;
}

.einwilligung__kopf{
  padding:16px 24px;
  border-bottom:1px solid var(--einwilligung-linie);
}
.einwilligung__marke{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--f-display,sans-serif);font-weight:800;font-size:14px;
  letter-spacing:-.01em;color:var(--einwilligung-stark);
}
/* Der Punkt der Wortmarke. Er steht hier eigenständig und nicht als Bild: eine Datei mehr
   wäre eine Anfrage mehr, und zwar für einen Kreis. */
.einwilligung__punkt{
  width:9px;height:9px;border-radius:50%;
  background:var(--einwilligung-punkt);flex:0 0 auto;
}
/* Das Icon der Seite in Farbe (seit 0.15.0, siehe banner.php). Klein wie im Browser-Reiter. */
.einwilligung__icon{width:18px;height:18px;flex:0 0 18px;border-radius:4px;display:block}

.einwilligung__inhalt{
  padding:20px 24px 18px;
  overflow-y:auto;
  overscroll-behavior:contain;
  /* ☠️☠️ 'min-height:0' IST DER GANZE PUNKT, OHNE IHN SCROLLT HIER NICHTS.
     Ein Flex-Element hat von Haus aus 'min-height:auto' und schrumpft deshalb NIE unter seinen
     Inhalt. Das 'overflow-y:auto' darüber lief damit ins Leere: Der Inhalt blieb in voller
     Höhe stehen, schob die Knopfreihe aus dem Kasten heraus, und 'overflow:hidden' am Kasten
     schnitt sie ab. Auf dem Telefon war „Alles erlauben" halb hinter der Safari-Leiste.
     Gemeldet vom Auftraggeber am 21.09.2026, mit Bildschirmfoto. */
  min-height:0;
}

.einwilligung__titel{
  font-family:var(--f-display,sans-serif);
  font-size:19px;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.02em;
  color:var(--einwilligung-stark);
  margin:0 0 10px;
}

/* Die Überschrift bekommt beim Erscheinen den Fokus, damit Bildschirmlesegeräte das Banner
   ansagen. Ein sichtbarer Fokusrahmen wäre dort irreführend, es ist kein Bedienelement. */
.einwilligung__titel:focus{outline:none}

.einwilligung__text{margin:0 0 16px}

.einwilligung__wahl{
  margin:0 0 16px;
  border-top:1px solid var(--einwilligung-linie);
  padding-top:14px;
  display:grid;
  gap:14px;
}

.einwilligung__posten label{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--f-display,sans-serif);
  font-weight:700;
  color:var(--einwilligung-stark);
  cursor:pointer;
}

.einwilligung__posten input{
  width:18px;height:18px;
  accent-color:var(--einwilligung-schrift);
  flex:0 0 auto;
  cursor:pointer;
}

.einwilligung__posten p{margin:6px 0 0 28px;font-size:13.5px;color:var(--einwilligung-leise)}

.einwilligung__knoepfe{
  display:flex;
  gap:10px;
  padding:14px 24px;
  padding-bottom:max(14px,env(safe-area-inset-bottom));
  border-top:1px solid var(--einwilligung-linie);
  background:var(--einwilligung-leiste);
}

/* ☠️ GLEICHE GRÖSSE FÜR ALLE DREI, und zwar nicht als Geschmacksfrage: Eine Einwilligung ist
   nur freiwillig, wenn das Ablehnen genauso leicht fällt wie das Zustimmen. Auf diesem Fenster
   hängt daran zusätzlich die Zulässigkeit der Sperre. 'flex:1 1 0' gibt allen dreien exakt
   dieselbe Breite, unabhängig von der Länge ihrer Beschriftung. */
.einwilligung__knopf{
  flex:1 1 0;
  min-width:0;
  font-family:var(--f-display,sans-serif);
  font-size:14px;
  font-weight:700;
  line-height:1.15;
  padding:12px 10px;
  border-radius:var(--radius,8px);
  border:1px solid var(--einwilligung-knopf-rand);
  background:var(--einwilligung-knopf);
  color:var(--einwilligung-stark);
  cursor:pointer;
}

.einwilligung__knopf:hover{background:var(--einwilligung-knopf-hover)}

/* ☠️ „ALLES ERLAUBEN" TRÄGT KEINE SIGNALFARBE. Bis zum 21.09.2026 war der Knopf als einziger
   gefüllt; auf Ansage des Auftraggebers entfällt das. Alle drei sehen jetzt gleich aus, und
   hervorgehoben ist das Ja nur noch durch seine Stelle (auf dem Telefon oben, siehe unten).

   ⭐ Das ist die strengere Fassung, nicht die nachlässigere: Eine Einwilligung ist freiwillig,
   wenn Ablehnen nicht schwerer fällt als Zustimmen. Ein eingefärbter Ja-Knopf ist genau die
   Stelle, an der Aufsichtsbehörden nachsehen. Wer die Farbe je zurückholt, holt eine
   Angreifbarkeit mit zurück, die heute nicht besteht. */

.einwilligung__fuss{margin:12px 0 0;font-size:13px}
.einwilligung__fuss a{color:var(--einwilligung-stark);text-underline-offset:2px}

/* Der Widerruf in der Fusszeile. Er ist ein Knopf (er öffnet ein Fenster und wechselt keine
   Seite), muss aber aussehen wie die Verweise daneben. */
.einwilligung__wieder{
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:var(--einwilligung-leise);text-decoration:none;cursor:pointer;
}
.einwilligung__wieder:hover{color:var(--einwilligung-stark);text-decoration:underline}

/* ☠️ SCHWEBENDE ELEMENTE DES THEMES AUS DEM WEG, solange das Banner steht. Beide hängen auf
   meinedatenspur.de unten rechts am Fenster, genau dort, wo das Banner steht, und beide liegen
   mit z-index 69 und 70 darüber. Ohne diese Regel sitzt die Vertrauensplakette auf dem Knopf
   „Alles erlauben". Die Klasse am body setzt consent.js.

   ⚠️ DIESE ZWEI NAMEN GEHÖREN ZUM THEME 'datenspur', NICHT ZUM PLUGIN. Auf einem anderen
   Portal treffen sie nichts und kosten nichts. Wer dort einen schwebenden Knopf hat (Chat,
   Nach-oben, Aktionsbanner), trägt ihn HIER ein. Ein Selektor, der ins Leere geht, ist
   harmlos; ein fehlender fällt erst auf, wenn jemand den Nein-Knopf nicht trifft. */
body.hat-einwilligung .vertrauen,
body.hat-einwilligung .hochknopf{display:none}

/* Dieselbe Grenze wie im Theme, an der '--rahmen' auf 0 fällt. Zwei verschiedene Zahlen für
   dieselbe Sache wären genau die Art Abweichung, die man ein halbes Jahr später nicht mehr
   erklären kann. */
@media(max-width:619px){
  .einwilligung{--einwilligung-luft:14px;--einwilligung-hoch:30px}
}

/* Auf dem Telefon stehen die Knöpfe untereinander. Drei nebeneinander ergäben Beschriftungen
   von acht Zeichen Breite, und „Einzeln entscheiden" bräche dreizeilig um.

   ☠️ 'column-reverse' HOLT „ALLES ERLAUBEN" NACH OBEN, auf ausdrückliche Ansage des
   Auftraggebers am 21.09.2026 („Erlauben muss Fokus sein"). Hier stand vorher das Gegenteil,
   samt Begründung; die Entscheidung ist seine, der Vermerk bleibt, damit niemand die Zeile
   später für ein Versehen hält und zurückdreht.

   ⚠️ WAS DABEI NICHT VERHANDELBAR IST, und woran die Zulässigkeit der Sperre hängt: Alle drei
   Knöpfe bleiben GLEICH GROSS, stehen auf DERSELBEN Ebene, sind vollständig sichtbar und
   brauchen je EINEN Klick. Verschoben ist nur die Reihenfolge. Wer zusätzlich die Grösse, die
   Farbe oder die Sichtbarkeit des Nein-Knopfes antastet, macht aus dem Fenster eine
   Cookie-Wall, und dann trägt auch die Reihenfolge nicht mehr.

   ⚠️ 'column-reverse' dreht nur die ANZEIGE. Die Tabulatortaste folgt weiter dem Markup und
   erreicht „Nichts erlauben" zuerst. Das ist Absicht: Wer mit der Tastatur bedient, soll nicht
   als Erstes auf dem weitreichenden Knopf stehen. */
@media(max-width:560px){
  .einwilligung__kopf{padding:14px 18px}
  .einwilligung__inhalt{padding:18px 18px 16px;font-size:14px}
  .einwilligung__knoepfe{flex-direction:column-reverse;padding:12px 18px}
  .einwilligung__knopf{flex:0 0 auto;width:100%;padding:13px 12px}
}

/* Wer Bewegung abbestellt hat, bekommt keine. Dieselbe Regel wie beim weichen Scrollen des
   Themes, und aus demselben Grund. */
@media(prefers-reduced-motion:no-preference){
  .einwilligung__kasten{animation:einwilligung-auf .24s ease-out}
}

@keyframes einwilligung-auf{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}


/* --- 0.5.0 (13.10.2026, Vorgabe des Users): nicht sperrend ------------------------------------
   Rechts unten, ohne Abdunkelung, Seite bleibt scroll- und klickbar; am Telefon als Leiste unten.
   ⚠️ An der ZULÄSSIGKEIT ändert das nichts, und daran darf auch hier nichts geändert werden: drei gleich
   grosse Knöpfe auf einer Ebene, je ein Klick, Tags erst NACH der Zustimmung (siehe oben). */
.einwilligung{inset:auto 20px 20px auto;width:min(400px,calc(100% - 28px));padding:0;display:block;font-size:14px}
.einwilligung[hidden]{display:none}
.einwilligung__kasten{max-width:none;max-height:min(60vh,430px);box-shadow:0 18px 50px rgba(0,0,0,.16)}
@media(max-width:619px){
  .einwilligung{inset:auto 8px max(8px,env(safe-area-inset-bottom)) 8px;width:auto}
  .einwilligung__kasten{max-height:48vh}
}

.einwilligung__kennung{margin:6px 0 0;font-size:11.5px;opacity:.7}
.einwilligung__kennung code{font-size:inherit;background:none;padding:0;color:inherit}

/* --- Gegen fremde Themes (0.17.1, EA 14.10.2026) -----------------------------------------------
   ☠️ Elementor-Kits und Themes stylen 'button' mit höherer Spezifität (.elementor-kit-5 button = 0,1,1)
   als unsere Klassen (0,1,0): Auf EA kamen Hintergrund, Polsterung und display:inline-block vom Theme —
   der versteckte Knopf „Auswahl speichern" stand sichtbar da (display schlägt das hidden-Attribut), und
   die Beschriftungen liefen aus den Knöpfen. Deshalb hier doppelte Klasse und ein ausdrückliches
   [hidden]. Auf MD (eigenes Theme) ändert das nichts, die Werte sind dieselben wie oben. */
.einwilligung [hidden]{display:none!important}
.einwilligung .einwilligung__knopf{
  flex:1 1 0;min-width:0;margin:0;width:auto;
  font-family:var(--f-display,sans-serif);font-size:14px;font-weight:700;line-height:1.15;
  letter-spacing:normal;text-transform:none;white-space:normal;text-align:center;
  padding:12px 10px;border-radius:var(--radius,8px);
  border:1px solid var(--einwilligung-knopf-rand);background:var(--einwilligung-knopf);
  color:var(--einwilligung-stark);box-shadow:none;cursor:pointer;
}
.einwilligung .einwilligung__knopf:hover,.einwilligung .einwilligung__knopf:focus{background:var(--einwilligung-knopf-hover);color:var(--einwilligung-stark)}
@media(max-width:560px){
  .einwilligung .einwilligung__knopf{flex:0 0 auto;width:100%;padding:13px 12px}
}

/* Ersatz-Verweis „Messung und Cookies" für Portale ohne Menü „rechtliches" (consent.js). Klein, unten links,
   mit eigener Schrift und Farbe — er muss auffindbar sein, darf aber nichts verdecken. */
html body button.einwilligung__ersatz{
  position:fixed;left:12px;bottom:12px;z-index:99998;margin:0;
  font:600 12px/1.2 var(--f-display,system-ui,sans-serif);letter-spacing:normal;text-transform:none;
  padding:7px 11px;border-radius:999px;border:1px solid var(--einwilligung-knopf-rand,#d0d0d6);
  background:var(--einwilligung-knopf,#fff);color:var(--einwilligung-stark,#222);
  box-shadow:0 2px 10px rgba(0,0,0,.12);cursor:pointer;
}
html body button.einwilligung__ersatz:hover{background:var(--einwilligung-knopf-hover,#f0f0f2);color:var(--einwilligung-stark,#222)}
html body button.einwilligung__ersatz[hidden]{display:none!important}