/* ════════════════════════════════════════════════════════════════════
   Cookie-/Consent-Leiste (19.08.2026)

   Fährt unten ein und liegt auf z-index 140: unter dem Vollflächenmenü
   (150) und der Nav (200), über dem Seiteninhalt. Modals (400) bleiben
   darüber.

   Breite und Padding sind die von Nav und Footer (1320px,
   clamp(20px,4vw,48px)) - die Leiste steht damit im gleichen Raster.

   Buttons folgen dem Haus-Muster von #nav-cta / .cm-cta: 13px, 600,
   Radius 8px, dunkle Flaeche mit hellem Text, im Hover auf --acc. Im
   Dark Mode dreht sich das Verhaeltnis wie bei .ha-btn.
   ════════════════════════════════════════════════════════════════════ */

#consent {
  display:none;
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:140;
  padding:0 clamp(20px,4vw,48px) clamp(16px,2.2vw,28px);
  /* Leiste liegt ausserhalb von #ldi-root -> Site-Font explizit setzen,
     sonst rendert der Browser-Default-Serif (gleiche Begruendung wie
     bei #cal-modal). */
  font-family:'Helvetica Now Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  /* Nur die Box selbst faengt Klicks - der Rand bleibt durchlaessig. */
  pointer-events:none;
}
#consent.is-on { display:block; }

#consent-box {
  pointer-events:auto;
  box-sizing:border-box;
  max-width:1320px;
  margin:0 auto;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:clamp(18px,2.6vw,40px);
  padding:clamp(18px,2vw,22px) clamp(20px,2.2vw,26px);
  border-radius:14px;
  background:#FFFFFF;
  border:1px solid rgba(11,12,14,.10);
  box-shadow:0 18px 50px rgba(11,12,14,.16);
  color:#0B0C0E;
  /* Startlage: unter der Kante, inklusive Schatten */
  transform:translateY(calc(100% + 40px));
  opacity:0;
  transition:transform .55s cubic-bezier(.22,.7,.2,1), opacity .4s ease;
}
#consent.is-in #consent-box { transform:none; opacity:1; }

/* Label-Schnitt der Seite: 11px, 600, weit gesperrt, Versalien. */
#consent-title {
  margin:0 0 6px;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(11,12,14,.45);
}
#consent-body {
  margin:0;
  max-width:78ch;
  font-size:13px;
  font-weight:400;
  line-height:1.6;
  color:rgba(11,12,14,.78);
}
#consent-body a {
  color:var(--acc);
  font-weight:600;
  text-decoration:underline;
  text-underline-offset:2px;
  transition:opacity .3s;
}
#consent-body a:hover { opacity:.7; }

#consent-actions {
  flex:none;
  display:flex;
  align-items:center;
  gap:10px;
}
/* Korpus wie #nav-cta / .cm-cta */
#consent-actions button {
  appearance:none;
  cursor:pointer;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1;
  padding:12px 22px;
  border-radius:8px;
  white-space:nowrap;
  transition:background .3s, border-color .3s, color .3s;
}
#consent-accept {
  border:1px solid #0B0C0E;
  background:#0B0C0E;
  color:#F4F4F2;
}
#consent-accept:hover { background:var(--acc); border-color:var(--acc); }
/* Ablehnen: gleicher Korpus, nur als Umriss - gleich gut erreichbar,
   optisch aber nicht die Hauptaktion. */
#consent-decline {
  border:1px solid rgba(11,12,14,.22);
  background:transparent;
  color:#0B0C0E;
}
#consent-decline:hover { border-color:#0B0C0E; background:rgba(11,12,14,.04); }

/* ── Dark Mode: gleiche Flaeche wie Footer und Bergsilhouette (#27282A) ── */
html.dark #consent-box {
  background:#27282A;
  border-color:rgba(244,244,242,.12);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  color:#F4F4F2;
}
html.dark #consent-title { color:rgba(244,244,242,.45); }
html.dark #consent-body { color:rgba(244,244,242,.72); }
html.dark #consent-body a { color:#6FD4A4; }
/* Verhaeltnis wie bei .ha-btn: helle Flaeche, dunkle Schrift, Hover #1a663f */
html.dark #consent-accept { background:#F4F4F2; border-color:#F4F4F2; color:#0B0C0E; }
html.dark #consent-accept:hover { background:#1a663f; border-color:#1a663f; color:#F4F4F2; }
html.dark #consent-decline { border-color:rgba(244,244,242,.28); color:#F4F4F2; }
html.dark #consent-decline:hover { border-color:#F4F4F2; background:rgba(244,244,242,.06); }

/* ── Schmale Schirme: Text ueber den Buttons, Buttons je halbe Breite ── */
@media (max-width:760px) {
  #consent-box {
    flex-direction:column;
    align-items:stretch;
    gap:16px;
    padding:20px;
  }
  #consent-actions { gap:8px; }
  #consent-actions button { flex:1 1 0; padding:12px; }
}

/* ── Widerruf: Schaltflaeche in der Footer-Zeile, optisch identisch zu
      den Legal-Links daneben ── */
#consent-reopen {
  appearance:none;
  border:0;
  background:transparent;
  padding:0;
  cursor:pointer;
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:rgba(244,244,242,.45);
  transition:color .3s;
}
#consent-reopen:hover { color:#F4F4F2; }

/* Wer Bewegung reduziert haben moechte, bekommt die Leiste ohne Fahrt. */
@media (prefers-reduced-motion:reduce) {
  #consent-box { transition:none; }
}