/* Cookie-Banner und Rechtsseiten.
   Farben und Schrift stammen aus den bestehenden Design-Token (--lvf-*) in
   assets/css/live/lvlup-theme.css, damit sich beides ohne Bruch einfuegt. */

.lvcb {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 100000;
  display: flex;
  justify-content: center;
  padding: 16px;
  pointer-events: none;
}

.lvcb-box {
  pointer-events: auto;
  width: min(680px, 100%);
  background: rgb(var(--lvfb-0a0d12,10,13,18));
  border: 1px solid var(--lvf-line, rgba(255, 255, 255, 0.09));
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
  padding: 22px 24px 20px;
  font-family: var(--lvf-font-alt, 'Plus Jakarta Sans', 'Segoe UI', sans-serif);
}

.lvcb-title {
  margin: 0 0 8px;
  font-family: var(--lvf-font-display, 'Clash Grotesk Variable', sans-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--lvf-white, #fff);
}

.lvcb-text {
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--lvf-text-mid, rgba(255, 255, 255, 0.6));
}

.lvcb-link {
  color: var(--lvf-blue-light, rgb(var(--lvfb-8cd5ff,140,213,255)));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lvcb-options {
  display: grid;
  gap: 10px;
  margin: 18px 0 4px;
}

.lvcb-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--lvf-line, rgba(255, 255, 255, 0.09));
  border-radius: 10px;
  cursor: pointer;
}

.lvcb-option:hover {
  border-color: rgba(var(--lvfb-8cd5ff,140,213,255),0.35);
}

.lvcb-option--fixed {
  cursor: default;
  opacity: 0.72;
}

.lvcb-option input {
  width: 18px;
  height: 18px;
  margin: 2px 0 0;
  accent-color: var(--lvf-blue, rgb(var(--lvfb-00a2ff,0,162,255)));
  flex: none;
}

.lvcb-option strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--lvf-white, #fff);
}

.lvcb-option em {
  display: block;
  margin-top: 3px;
  font-style: normal;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--lvf-text-dim, rgba(255, 255, 255, 0.4));
}

.lvcb-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 20px;
}

/* Alle Schaltflaechen sehen gleich aus und sind gleich gross.
   Das ist keine Geschmacksfrage: eine Einwilligung ist nach Artikel 4 Nummer 11
   DSGVO nur wirksam, wenn sie freiwillig erfolgt. Ist Zustimmen farbig
   hervorgehoben und Ablehnen blass, lenkt die Gestaltung die Entscheidung, und
   genau das beanstanden die Aufsichtsbehoerden. Deshalb hat hier keine Antwort
   ein Uebergewicht, weder in Farbe noch in Groesse noch in der Position. */
.lvcb-btn {
  width: 100%;
  padding: 13px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.06);
  color: var(--lvf-white, #fff);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.lvcb-btn:hover {
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(255, 255, 255, 0.1);
}

.lvcb-btn:focus-visible {
  outline: 2px solid var(--lvf-blue-light, rgb(var(--lvfb-8cd5ff,140,213,255)));
  outline-offset: 2px;
}


@media (max-width: 520px) {
  .lvcb-box { padding: 18px 18px 16px; }
  .lvcb-actions { grid-template-columns: 1fr; }
}

/* --- Rechtsseiten ------------------------------------------------------- */

.lvlg {
  max-width: 860px;
  margin: 0 auto;
  padding: 120px 24px 96px;
  font-family: var(--lvf-font-alt, 'Plus Jakarta Sans', 'Segoe UI', sans-serif);
  color: var(--lvf-text-mid, rgba(255, 255, 255, 0.6));
  font-size: 15px;
  line-height: 1.7;
}

.lvlg h1 {
  font-family: var(--lvf-font-display, 'Clash Grotesk Variable', sans-serif);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 600;
  line-height: 1.15;
  color: var(--lvf-white, #fff);
  margin: 0 0 10px;
}

.lvlg h2 {
  font-family: var(--lvf-font-display, 'Clash Grotesk Variable', sans-serif);
  font-size: 21px;
  font-weight: 600;
  color: var(--lvf-white, #fff);
  margin: 40px 0 12px;
}

.lvlg h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--lvf-white, #fff);
  margin: 26px 0 8px;
}

.lvlg p { margin: 0 0 14px; }

.lvlg ul { margin: 0 0 16px; padding-left: 20px; }
.lvlg li { margin-bottom: 7px; }

.lvlg a {
  color: var(--lvf-blue-light, rgb(var(--lvfb-8cd5ff,140,213,255)));
  text-decoration: underline;
  text-underline-offset: 2px;
}

.lvlg-lead {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.75);
  margin-bottom: 8px;
}

.lvlg-meta {
  font-size: 13px;
  color: var(--lvf-text-dim, rgba(255, 255, 255, 0.4));
  margin: 0 0 36px;
}

.lvlg-card {
  border: 1px solid var(--lvf-line, rgba(255, 255, 255, 0.09));
  border-radius: 12px;
  padding: 18px 20px;
  margin: 0 0 18px;
}

.lvlg-card p:last-child { margin-bottom: 0; }

.lvlg table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 18px;
  font-size: 14px;
}

.lvlg th,
.lvlg td {
  text-align: left;
  vertical-align: top;
  padding: 10px 12px 10px 0;
  border-bottom: 1px solid var(--lvf-line, rgba(255, 255, 255, 0.09));
}

.lvlg th {
  color: var(--lvf-white, #fff);
  font-weight: 600;
  white-space: nowrap;
}

.lvlg-btn {
  display: inline-block;
  margin-top: 6px;
  padding: 11px 20px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-weight: 600;
  color: var(--lvf-white, #fff);
  cursor: pointer;
}

.lvlg-btn:hover { border-color: var(--lvf-blue-light, rgb(var(--lvfb-8cd5ff,140,213,255))); }

.lvlg-status {
  display: block;
  margin-top: 10px;
  font-size: 13.5px;
  color: var(--lvf-blue-light, rgb(var(--lvfb-8cd5ff,140,213,255)));
  min-height: 1em;
}

/* Statusmeldung der Formulare. Fehler rot, Erfolg blau wie die Seite. */
.lvf-form-status {
  display: block;
  margin-top: 10px;
  font-family: var(--lvf-font-alt, 'Plus Jakarta Sans', 'Segoe UI', sans-serif);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--lvf-blue-light, rgb(var(--lvfb-8cd5ff,140,213,255)));
}

.lvf-form-status[data-state="error"] { color: #ff8080; }

/* Honigtopf: fuer Menschen unsichtbar, aber nicht per display:none, damit
   einfache Bots ihn trotzdem ausfuellen. */
.lvf-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

/* --- Rechtstext-Popup im Footer -------------------------------------------
   Gebaut wie das Newsletter-Popup der Startseite (r3b-home.css, .lvf-landing-*):
   gleicher Hintergrund, gleicher Radius, gleiche Schliessen-Schaltflaeche.
   Ohne den weissen Verlauf am unteren Rand, der dort nur das Formular traegt,
   und ohne die Bindung an body.page-id-7895, damit es auf jeder Seite geht. */

.lvf-legal-modal {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.24s ease;
}

.lvf-legal-modal.is-open { opacity: 1; }

.lvf-legal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(var(--lvfb-000508,0,5,8),0.72);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

.lvf-legal-dialog {
  position: relative;
  isolation: isolate;
  width: min(760px, 100%);
  max-height: calc(100vh - 48px);
  /* Sichtbar lassen, sonst erzeugt die Schliessen-Schaltflaeche, die wie im
     Landing-Popup 12px ueber den Rand ragt, einen Scrollbalken. Gescrollt
     wird im Textkoerper darunter. */
  overflow: visible;
  padding: 48px 56px 44px;
  border-radius: 32px;
  background:
    radial-gradient(ellipse 55% 50% at 0% 80%, rgba(var(--lvfb-12a9ff,18,169,255),0.35) 0%, transparent 70%),
    radial-gradient(ellipse 55% 50% at 100% 80%, rgba(var(--lvfb-12a9ff,18,169,255),0.35) 0%, transparent 70%),
    linear-gradient(180deg, rgb(var(--lvfb-0a0e11,10,14,17)) 0%, rgb(var(--lvfb-0d1418,13,20,24)) 60%, rgb(var(--lvfb-10222d,16,34,45)) 100%);
  box-shadow: 0 42px 110px rgba(0, 0, 0, 0.72);
  color: #fff;
  text-align: left;
  transform: translateY(18px) scale(0.97);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.lvf-legal-modal.is-open .lvf-legal-dialog { transform: translateY(0) scale(1); }

.lvf-legal-close {
  position: absolute;
  z-index: 3;
  top: -12px;
  right: -12px;
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: none;
  border-radius: 50%;
  background: rgb(var(--lvfb-2d3640,45,54,64));
  color: rgb(var(--lvfb-5bbfee,91,191,238));
  font: 500 30px/1 Arial, sans-serif;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.lvf-legal-close:hover { background: rgb(var(--lvfb-3a4550,58,69,80)); }
.lvf-legal-close:focus-visible { outline: 2px solid rgb(var(--lvfb-6ecaff,110,202,255)); outline-offset: 3px; }

.lvf-legal-title {
  margin: 0 0 18px;
  font-family: var(--lvf-font-display, 'Clash Grotesk Variable', sans-serif);
  font-size: clamp(26px, 2.6vw, 34px);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: 0.01em;
  background: linear-gradient(180deg, rgb(var(--lvfb-8cd5ff,140,213,255)) 0%, rgb(var(--lvfb-12a9ff,18,169,255)) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.lvf-legal-body {
  max-height: calc(100vh - 48px - 48px - 44px - 60px);
  overflow: auto;
  padding-right: 4px;
}

.lvf-legal-body p {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--lvf-font-alt, 'Plus Jakarta Sans', 'Segoe UI', sans-serif);
  font-size: 15px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}

.lvf-legal-body p:last-child { margin-bottom: 0; }

.lvf-legal-body a {
  color: var(--lvf-blue-light, rgb(var(--lvfb-8cd5ff,140,213,255)));
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

@media (max-width: 640px) {
  .lvf-legal-modal { padding: 16px; }
  .lvf-legal-dialog { padding: 40px 24px 32px; border-radius: 22px; }
  .lvf-legal-close { top: -8px; right: -8px; width: 44px; height: 44px; font-size: 26px; }
}