/* sageroom — Analyse: Einwilligungsleiste und Widerspruchsschalter.
   Die Leiste erscheint nur in der Betriebsart "mit Einwilligung"; cookielos
   gemessen wird ohne Leiste, dann traegt nur der Schalter auf der
   Datenschutzseite Farbe.
   Nutzt die Farb- und Abstandstoken des Themes; die Zweitwerte greifen, falls
   das Plugin einmal mit einem anderen Theme laeuft. Bewusst eine Leiste am
   unteren Rand und kein Overlay: Der Inhalt bleibt lesbar und bedienbar,
   niemand wird zur Entscheidung gezwungen. */

.consent-bar{
  position:fixed;
  inset-inline:0;
  bottom:0;
  /* Unter der Mobilnavigation (z-index 150): Wenn das Menue offen ist, hat es
     Vorrang. Zusaetzlich wird die Leiste dann ausgeblendet, siehe unten. */
  z-index:140;
  background:var(--bg,#393E37);
  border-top:1px solid var(--line,#565D51);
  box-shadow:0 -2px 12px rgb(35 40 35 / .10);
  padding:var(--s-4,24px);
  /* Auf Telefonen mit Home-Leiste liegen die unteren Pixel unter der
     Systemgeste — sonst sitzt der Knopf teilweise darunter. */
  padding-bottom:max(var(--s-4,24px),env(safe-area-inset-bottom,0px));
  font-family:var(--font-text,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif);
  color:var(--ink,#E6E0D6);
  font-size:.9375rem;
  line-height:1.6;
  /* Die Leiste darf den Bildschirm nie ganz einnehmen. Auf kleinen Geraeten
     wird stattdessen der Text scrollbar — die Schaltflaechen bleiben immer
     sichtbar. Andernfalls lag "Einverstanden" auf einem 320-px-Telefon
     unterhalb des sichtbaren Bereichs der Leiste. */
  display:flex;
  max-height:min(60vh,420px);
  overflow:hidden;
}

/* Ist die Mobilnavigation offen, tritt die Leiste zurueck: zwei uebereinander
   liegende Ebenen mit Schaltflaechen sind auf dem Telefon nicht bedienbar. */
.nav-open .consent-bar{display:none}

.consent-inner{
  max-width:var(--container,1200px);
  width:100%;
  margin-inline:auto;
  display:flex;
  flex-direction:column;
  gap:var(--s-4,24px);
  /* min-height:0 ist die Bedingung dafuer, dass das Kind ueberhaupt schrumpfen
     und scrollen darf — ohne sie waechst der Flex-Container ueber die Leiste. */
  min-height:0;
}

.consent-text{
  min-height:0;
  overflow-y:auto;
  overscroll-behavior:contain;
}

@media(min-width:768px){
  .consent-inner{flex-direction:row;align-items:center;justify-content:space-between}
  .consent-text{max-width:70ch}
}

.consent-text p{margin:0 0 var(--s-2,8px);max-width:none}
.consent-text p:last-child{margin-bottom:0}

.consent-headline{
  font-family:var(--font-display,Georgia,"Times New Roman",serif);
  font-size:1.0625rem;
  font-weight:600;
}

.consent-text a{
  color:var(--clay-d,#EBBCA6);
  text-decoration:underline;
  text-underline-offset:3px;
}

.consent-actions{
  display:flex;
  gap:var(--s-3,16px);
  flex-wrap:wrap;
  flex:0 0 auto;
}

/* Beide Schaltflaechen identisch: gleiche Farbe, gleiche Groesse, gleiches
   Gewicht. Kein hervorgehobenes "Akzeptieren" — das waere keine freie
   Einwilligung mehr (Art. 4 Nr. 11 DSGVO). */
.consent-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
  padding:0 var(--s-4,24px);
  border:1px solid var(--sage-d,#C3CCB4);
  border-radius:var(--radius,4px);
  background:transparent;
  color:var(--sage-d,#C3CCB4);
  font:inherit;
  font-weight:600;
  cursor:pointer;
  text-decoration:none;
  transition:background 150ms cubic-bezier(.22,.61,.36,1),color 150ms cubic-bezier(.22,.61,.36,1);
}

.consent-btn:hover{
  background:var(--sage-d,#C3CCB4);
  color:var(--bg,#393E37);
}

/* Fokusring: :focus-visible ist der richtige Weg, aber die Leiste wird oft per
   Tastatur erreicht — deshalb zusaetzlich ein einfacher :focus-Ring fuer
   Browser, die :focus-visible nicht kennen. */
.consent-btn:focus,
.consent-text a:focus{
  outline:2px solid var(--sage-d,#C3CCB4);
  outline-offset:3px;
}

.consent-btn:focus-visible,
.consent-text a:focus-visible{
  outline:2px solid var(--sage-d,#C3CCB4);
  outline-offset:3px;
}

/* Zustand und Widerruf, z. B. auf der Datenschutzseite. */
.consent-state{
  margin:var(--s-5,32px) 0;
  padding:var(--s-4,24px);
  background:var(--surface,#444A41);
  border-radius:var(--radius,4px);
}

.consent-state-text{margin:0 0 var(--s-3,16px)}

/* Telefon: beide Schaltflaechen ueber die volle Breite und gleich gross.
   Nebeneinander werden sie auf 320-px-Geraeten unterschiedlich breit und
   brechen ungleichmaessig um. */
@media(max-width:559px){
  .consent-bar{padding:var(--s-3,16px) var(--s-4,24px)}
  .consent-inner{gap:var(--s-3,16px)}
  .consent-actions{flex-direction:column;gap:var(--s-2,8px);width:100%}
  .consent-btn{width:100%}
}

@media (prefers-reduced-motion:reduce){
  .consent-btn{transition:none}
}

@media print{
  .consent-bar{display:none!important}
}