/* NF-R93 — Einwilligungsstreifen (js/einwilligung.js).
   Gestaltung des bisherigen Hinweisstreifens, nur mit drei gleichrangigen Wegen statt einem
   "Verstanden". Alle Farben kommen aus den Seiten-Tokens; die Angaben hinter dem Komma sind
   Rueckfallwerte, falls eine Seite ein Token einmal nicht kennt. */

.nf-ew{
  position:fixed;left:0;right:0;bottom:0;z-index:2000;
  display:flex;flex-direction:column;gap:10px;
  padding:18px 24px;
  background:var(--panel,rgba(10,14,24,.97));
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-top:1px solid var(--border-gold,rgba(160,120,64,.28));
  box-shadow:0 -8px 32px var(--shadow-45,rgba(0,0,0,.45));
  font-family:'Inter',system-ui,sans-serif;
  max-height:88vh;max-height:88dvh;overflow-y:auto;overscroll-behavior:contain;
}
/* Auf breiten Ansichten stehen Text und Knoepfe nebeneinander wie bisher. */
@media(min-width:861px){
  .nf-ew{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    align-items:center;column-gap:28px;row-gap:6px;
  }
  .nf-ew-titel{grid-column:1}
  .nf-ew-text{grid-column:1}
  .nf-ew-knoepfe{grid-column:2;grid-row:1/span 2;justify-content:flex-end}
  .nf-ew-zwecke{grid-column:1/-1}
}

.nf-ew-titel{
  margin:0;font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold-light,#c49a56);
}
.nf-ew-text{
  margin:0;max-width:760px;
  color:#b4bccb;font-size:13.5px;line-height:1.65;
}
.nf-ew-text a{color:var(--gold-light,#c49a56);text-decoration:underline;text-underline-offset:2px}
.nf-ew-text a:hover{color:var(--gold,#a07840)}

.nf-ew-knoepfe{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.nf-ew-btn{
  flex-shrink:0;font-family:inherit;font-size:14px;font-weight:600;
  padding:11px 24px;border-radius:var(--r-pill,50px);cursor:pointer;white-space:nowrap;
  border:1px solid transparent;transition:background .2s,border-color .2s,color .2s;
  min-height:44px;
}
/* NF-R111: Zustimmung, Ablehnung und "Auswahl speichern" tragen EINE Klasse - gleiche Groesse (Mindestbreite), gleiche
   Farbe, gleicher Kontrast, gleiches Verhalten. Keine der beiden Antworten ist hervorgehoben. Helle Schrift (#eef0f4)
   auf der dunklen Flaeche: Kontrast ueber 12:1. */
.nf-ew-btn--gleich{min-width:12.5em;text-align:center;background:var(--w-06,rgba(255,255,255,.06));color:var(--text,#eef0f4);
  border-color:rgba(255,255,255,.42)}
.nf-ew-btn--gleich:hover{border-color:var(--gold-light,#c49a56);background:rgba(255,255,255,.1)}
/* "Einstellungen": dritter Weg, als Knopf erkennbar und gut lesbar (vorher #6b7588, rund 4:1). */
.nf-ew-btn--mehr{background:transparent;color:#d5dae4;border-color:rgba(255,255,255,.2);text-decoration:underline;text-underline-offset:3px}
.nf-ew-btn--mehr:hover{color:#fff;border-color:rgba(255,255,255,.42)}
.nf-ew-btn:focus-visible{outline:2px solid #d4b27a;outline-offset:2px}

/* ── Ansicht "Einstellungen" ─────────────────────────────────────────────────────────────────── */
.nf-ew--wahl{max-height:80vh;overflow-y:auto}
.nf-ew-zwecke{display:flex;flex-direction:column;gap:2px;margin:6px 0 2px}
.nf-ew-zweck{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:12px 14px;border-radius:14px;cursor:pointer;
  border:1px solid var(--border,rgba(255,255,255,.065));
  background:var(--w-04,rgba(255,255,255,.04));
}
.nf-ew-zweck:hover{border-color:var(--border-gold,rgba(160,120,64,.28))}
.nf-ew-zweck--fest{cursor:default;opacity:.85}
.nf-ew-zweck input{width:18px;height:18px;margin-top:2px;accent-color:var(--gold,#a07840);cursor:inherit}
.nf-ew-zweck b{display:block;font-size:14px;font-weight:600;color:var(--text,#eef0f4);margin-bottom:3px}
.nf-ew-zweck span span{display:block;font-size:12.5px;line-height:1.6;color:#b4bccb}

@media(max-width:860px){
  .nf-ew{padding:16px 18px;gap:12px}
  .nf-ew-knoepfe{flex-direction:column;align-items:stretch}
  .nf-ew-btn{width:100%;text-align:center}
  .nf-ew--wahl{max-height:88vh}
}
@media(prefers-reduced-motion:reduce){
  .nf-ew-btn{transition:none}
}
/* Standbild-Aufnahmen blenden den Streifen aus (wie zuvor beim Hinweisstreifen).
   Solange die Eroeffnung der Startseite laeuft, tritt er ebenfalls zurueck: der Vorhang liegt
   darueber (z-index 3000) und der Streifen waere nur halb sichtbar. Danach kommt er von selbst. */
html[data-standbild] .nf-ew,
html[data-intro] .nf-ew{display:none!important}

/* Der Weg zurueck zur Auswahl in der Fusszeile: sieht aus wie die uebrigen Fusszeilen-Links
   (gleiche Groesse, gleiche Farbe, gleiche eckige Klammern), ist aber ein Schalter - er fuehrt
   zu keiner anderen Seite. js/einwilligung.js blendet ihn nur dann ein, wenn es tatsaechlich
   etwas zu entscheiden gibt. */
.gf-einwilligung{
  appearance:none;-webkit-appearance:none;background:none;border:0;margin:0;
  font-family:inherit;font-size:14px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:#aeb6c6;padding:10px 16px;min-height:44px;display:inline-flex;align-items:center;
  cursor:pointer;text-decoration:none;transition:color .2s;
}
.gf-einwilligung::before{content:'[\00a0';color:#7d8699;transition:color .2s}
.gf-einwilligung::after{content:'\00a0]';color:#7d8699;transition:color .2s}
.gf-einwilligung:hover{color:#fff}
.gf-einwilligung:hover::before,.gf-einwilligung:hover::after{color:#c49a56}
.gf-einwilligung:focus-visible{outline:2px solid #d4b27a;outline-offset:2px;border-radius:4px}
/* NF-R108: Bis 900 px stehen die Fusszeilen-Links linksbuendig und ohne linken Innenabstand (footer.css:
   .gf-links a{padding-left:0}); der Schalter behielt seine 16 px und stand dadurch um 16 px weiter rechts. Jetzt
   dieselbe Einrueckung. Schalter bleibt Schalter (oeffnet die Einstellungen erneut). */
@media (max-width:900px){.gross-footer .gf-einwilligung{padding-left:0;line-height:inherit}}
/* In der Portfolio-Fusszeile sind die Links kleiner, leiser und ohne Klammern. */
.footer-links .gf-einwilligung{font-size:13px;letter-spacing:normal;text-transform:none;padding:0;min-height:0;color:var(--text-faint,#3a4258)}
.footer-links .gf-einwilligung:hover{color:var(--text-muted,#6b7588)}
.footer-links .gf-einwilligung::before,
.footer-links .gf-einwilligung::after{content:none}