/* =============================================================================
   Einwilligung, akademie.waxtum500.com — Fassung 3 (zweistufig, nach Vorlage
   eines vom Kunden gezeigten Beispiels: Schritt 1 eine kurze, freundliche
   Frage; "Eigene Auswahl" fuehrt zu Schritt 2, einem Einstellungsbildschirm
   mit Reitern "Kategorien"/"Services" und Kippschaltern statt Kontrollkaestchen.
   Umgestellt am 10.09.2026.
   -----------------------------------------------------------------------------
   Text auf Schritt 1 ist auf ausdruecklichen Kundenwunsch WORTGLEICH aus der
   gezeigten Vorlage uebernommen (siehe einwilligung.js). Die Vorlage nennt auf
   dieser Ebene keine konkreten Werkzeuge — das ist branchenueblich (Details
   folgen auf Schritt 2). Damit die Transparenzpflicht trotzdem erfuellt bleibt,
   nennt der Reiter "Services" auf Schritt 2 weiterhin Google Analytics, Google
   Ads und LinkedIn Insight Tag beim Namen (siehe Kommentar in einwilligung.js).

   Hintergrund weiterhin abgedunkelt und blockierend, wie in Fassung 2: kein
   Klick-zum-Schliessen, kein X, kein Escape.
   ============================================================================= */

.ew-overlay{
  position:fixed; inset:0; z-index:3000; padding:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(20,22,25,.6);
  font-family:"Gantari",system-ui,-apple-system,"Segoe UI",sans-serif;
  animation:ew-dunkel .25s ease;
}
@keyframes ew-dunkel{from{opacity:0} to{opacity:1}}
@media(prefers-reduced-motion:reduce){.ew-overlay{animation:none}}

.ew-card{
  background:#fff; border-radius:var(--radius,18px);
  width:100%; max-width:460px; max-height:88vh; overflow-y:auto;
  padding:32px 30px 28px;
  box-shadow:0 26px 70px rgba(0,0,0,.35);
  animation:ew-auf .3s cubic-bezier(.2,.7,.3,1);
}
@keyframes ew-auf{from{opacity:0; transform:translateY(14px) scale(.98)} to{opacity:1; transform:none}}
@media(prefers-reduced-motion:reduce){.ew-card{animation:none}}

.ew-card[data-schritt="start"] .ew-schritt--einstellungen{display:none}
.ew-card[data-schritt="einstellungen"] .ew-schritt--start{display:none}

.ew-logo{height:48px; width:auto; margin-bottom:18px}

.ew-titel{font-size:20px; font-weight:800; color:var(--ink,#1f2226); margin:0 0 13px; letter-spacing:-.2px}
.ew-untertitel{font-size:14px; line-height:1.55; color:var(--muted,#5b6066); margin:0 0 16px}

.ew-text{font-size:14.5px; line-height:1.55; color:var(--muted,#5b6066); margin:0 0 12px}
.ew-text:last-of-type{margin-bottom:18px}

.ew-links{display:flex; gap:16px; font-size:12.5px; margin-bottom:18px}
.ew-links a{color:var(--muted,#5b6066); text-decoration:underline; text-underline-offset:.18em}
.ew-links a:hover{color:var(--blue-d,#345d9c)}

/* ---------- Reiter (Kategorien / Services) ---------- */
.ew-tabs{display:flex; gap:22px; border-bottom:1px solid var(--line,#e6e8eb); margin-bottom:16px}
.ew-tab{
  font:inherit; font-size:14.5px; font-weight:700; color:var(--muted,#5b6066);
  background:none; border:0; padding:0 0 11px; cursor:pointer;
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.ew-tab[aria-selected="true"]{color:var(--ink,#1f2226); border-bottom-color:var(--dark,#2a2d31)}
.ew-panel{display:none}
.ew-panel[data-aktiv="true"]{display:flex; flex-direction:column; gap:10px}

/* ---------- Kategorie-/Service-Karten ---------- */
.ew-zeile{
  border:1px solid var(--line,#e6e8eb); border-radius:12px; padding:13px 14px;
}
.ew-zeile-kopf{display:flex; align-items:flex-start; gap:12px}
.ew-zeile-info{flex:1; min-width:0}
.ew-zeile-info b{display:block; font-size:14.5px; font-weight:800; color:var(--ink,#1f2226); margin-bottom:3px}
.ew-zeile-info p{margin:0; font-size:12.5px; line-height:1.5; color:var(--muted,#5b6066)}
.ew-zeile-steuer{display:flex; align-items:center; gap:8px; flex:none; padding-top:1px}

.ew-mehr{
  background:none; border:0; padding:2px; cursor:pointer; color:var(--muted,#5b6066);
  display:flex; align-items:center; justify-content:center;
}
.ew-mehr svg{width:16px; height:16px; transition:transform .15s ease}
.ew-zeile[data-offen="true"] .ew-mehr svg{transform:rotate(180deg)}
.ew-zeile-detail{display:none; margin-top:10px; padding-top:10px; border-top:1px solid var(--line,#e6e8eb); font-size:12px; line-height:1.55; color:var(--muted,#5b6066)}
.ew-zeile[data-offen="true"] .ew-zeile-detail{display:block}
.ew-zeile-detail a{color:var(--blue-d,#345d9c); text-decoration:underline; text-underline-offset:.18em}

/* ---------- Kippschalter ---------- */
.ew-schalter{position:relative; display:inline-flex; width:44px; height:25px; flex:none; cursor:pointer}
.ew-schalter input{position:absolute; inset:0; opacity:0; margin:0; cursor:pointer}
.ew-schalter-bild{position:absolute; inset:0; background:#fff; border:1.5px solid var(--line,#dfe2e6); border-radius:999px; transition:border-color .15s}
.ew-schalter-bild::before{
  content:''; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
  background:var(--dark,#2a2d31); transition:transform .18s cubic-bezier(.2,.7,.3,1), background .15s;
}
.ew-schalter-bild::after{
  content:'✕'; position:absolute; top:2px; left:2px; width:19px; height:19px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:9px; color:#fff; font-weight:700;
  transition:transform .18s cubic-bezier(.2,.7,.3,1); pointer-events:none;
}
.ew-schalter input:checked ~ .ew-schalter-bild{border-color:var(--green,#6fa824)}
.ew-schalter input:checked ~ .ew-schalter-bild::before{transform:translateX(19px); background:var(--green,#6fa824)}
.ew-schalter input:checked ~ .ew-schalter-bild::after{content:'✓'; transform:translateX(19px)}
.ew-schalter input:focus-visible ~ .ew-schalter-bild{outline:2px solid var(--blue,#4172bb); outline-offset:2px}
.ew-schalter input:disabled ~ .ew-schalter-bild{opacity:.5; cursor:not-allowed}
.ew-schalter input:disabled{cursor:not-allowed}

.ew-fein{margin:4px 0 2px; font-size:11.5px; line-height:1.55; color:var(--muted,#5b6066)}
.ew-fein a{color:var(--blue-d,#345d9c); text-decoration:underline; text-underline-offset:.18em}

/* ---------- Buttons (beide Schritte) ---------- */
.ew-btn{
  display:block; width:100%; font-family:inherit; font-size:15px; font-weight:700;
  padding:14px 18px; border-radius:12px; border:0; cursor:pointer; text-align:center;
  margin-top:9px; transition:transform .15s ease;
}
.ew-btn:first-of-type{margin-top:16px}
.ew-btn:hover{transform:translateY(-1px)}
@media(prefers-reduced-motion:reduce){.ew-btn:hover{transform:none}}
.ew-btn--haupt{background:var(--green,#6fa824); color:#fff; box-shadow:0 8px 20px rgba(111,168,36,.32)}
.ew-btn--haupt:hover{background:var(--green-d,#5c8d1e)}
.ew-btn--neben{background:var(--soft2,#f5f6f8); color:var(--ink,#1f2226); box-shadow:none}
.ew-btn--neben:hover{background:var(--line,#e6e8eb)}

/* Der Widerrufsverweis in der Fusszeile, vom Skript gesetzt (siehe einwilligung.js) */
.ew-widerruf-box{margin-top:6px}
.ew-widerruf{color:inherit; text-decoration:underline; text-underline-offset:.18em}

@media(max-width:520px){
  .ew-overlay{padding:0; align-items:flex-end}
  .ew-card{
    max-width:none; border-radius:var(--radius,18px) var(--radius,18px) 0 0;
    max-height:92vh; padding:26px 20px 22px;
  }
}