/* ---------------------------------------------------------------------------
   Einwilligungsbanner (Cookie/Consent)

   Grundsatz: Ablehnen muss genauso leicht sein wie Zustimmen. Beide Knoepfe
   haben deshalb dieselbe Groesse, dieselbe Schriftstaerke und stehen
   gleichrangig nebeneinander - kein optisch schwaecheres "Ablehnen".

   Es gibt genau EINE optionale Kategorie (Calendly). Die Seite setzt sonst
   keine Cookies und bindet keine Analyse ein; ein aufgeblasener Katalog mit
   erfundenen Kategorien waere Augenwischerei.
   --------------------------------------------------------------------------- */

.cc-root{
  position:fixed; left:0; right:0; bottom:0; z-index:2000;
  padding:16px; display:flex; justify-content:center;
  pointer-events:none;
}
.cc-root[hidden]{display:none;}

.cc-card{
  pointer-events:auto;
  width:min(560px, 100%);
  background:var(--bg, #fff);
  border:1px solid var(--border, #E6E5E0);
  border-radius:var(--radius-lg, 24px);
  box-shadow:0 28px 70px -24px rgba(20,20,20,.42), 0 2px 8px rgba(20,20,20,.06);
  padding:clamp(20px, 3.4vw, 28px);
  transform:translateY(14px); opacity:0;
  transition:transform var(--dur-slow, 450ms) var(--ease-out, ease),
             opacity var(--dur-slow, 450ms) var(--ease-out, ease);
}
.cc-root.cc-sichtbar .cc-card{transform:none; opacity:1;}

.cc-titel{
  font-family:'Manrope', sans-serif; font-weight:800;
  font-size:var(--fs-2xl, 1.25rem); letter-spacing:-.01em;
  color:var(--ink, #1A1A1A);
}
.cc-text{
  margin-top:10px; color:var(--ink-soft, #5A5A5A);
  font-size:var(--fs-base, .9375rem); line-height:1.65;
}
.cc-text a{
  color:var(--purple, #7C3AED); text-decoration:underline; text-underline-offset:3px;
}

/* Knopfreihe. Gleichrangig: gleiche Hoehe, gleiche Schriftstaerke.
   Der Unterschied liegt nur in der Farbe, nicht im Gewicht. */
.cc-knoepfe{display:flex; gap:10px; margin-top:20px; flex-wrap:wrap;}
.cc-btn{
  /* flex-basis 0 statt auto: sonst richtet sich die Breite nach der Laenge
     der Beschriftung und "Alle akzeptieren" wird ein Pixel breiter als
     "Nur notwendige". Bei zwei gleichrangigen Wahlmoeglichkeiten soll auch
     das nicht unterschiedlich sein. */
  flex:1 1 0; min-width:150px; min-height:48px;
  display:inline-flex; align-items:center; justify-content:center;
  padding:13px 20px; border-radius:999px; cursor:pointer;
  font-family:'Inter', sans-serif; font-weight:700; font-size:var(--fs-base, .9375rem);
  border:1px solid transparent; text-align:center;
  transition:background var(--dur-fast, 180ms) var(--ease-out, ease),
             border-color var(--dur-fast, 180ms) var(--ease-out, ease),
             transform var(--dur-fast, 180ms) var(--ease-out, ease);
}
.cc-btn:hover{transform:translateY(-1px);}
.cc-btn:focus-visible{outline:3px solid var(--purple, #7C3AED); outline-offset:3px;}
/* Die beiden Wahlknoepfe sind ABSICHTLICH voellig identisch gestaltet:
   gleiche Flaeche, gleicher Rahmen, gleiche Schriftfarbe. Nur die
   Beschriftung unterscheidet sie.

   Hintergrund: Zustimmen und Ablehnen muessen gleich leicht sein. Eine
   Farbdifferenz allein ist zwar nicht pauschal unzulaessig - beanstandet
   wird vor allem ein abgewerteter Ablehnen-Knopf - aber ein lila gefuellter
   "Alle akzeptieren" neben einem grauen "Nur notwendige" zieht den Blick
   messbar staerker an. Mit identischer Gestaltung gibt es nichts zu
   diskutieren, und die Seite verliert nichts dabei.
   NICHT wieder einen der beiden hervorheben. */
.cc-btn--wahl{
  background:#fff; color:var(--purple-dark, #5B21B6);
  border-color:var(--purple, #7C3AED); border-width:1.5px;
}
.cc-btn--wahl:hover{background:var(--purple-tint, #F3EEFE);}

/* Fuer echte Einzelaktionen ohne Gegenoption (Auswahl speichern, Kalender
   freigeben) - hier gibt es nichts zu lenken, also darf es ein normaler
   Hauptknopf sein. */
.cc-btn--alle{background:var(--purple, #7C3AED); color:#fff;}
.cc-btn--alle:hover{background:var(--purple-dark, #5B21B6);}

/* Einstellungen bewusst als Textlink: es ist der seltenere Weg, aber gut
   sichtbar und mit ausreichender Tippflaeche. */
.cc-mehr{
  display:inline-flex; align-items:center; min-height:44px; margin-top:6px;
  background:none; border:0; cursor:pointer; padding:0 2px;
  font-family:'Inter', sans-serif; font-size:var(--fs-sm, .875rem); font-weight:600;
  color:var(--ink-faint, #6E6E6E); text-decoration:underline; text-underline-offset:3px;
}
.cc-mehr:hover{color:var(--purple, #7C3AED);}
.cc-mehr:focus-visible{outline:3px solid var(--purple, #7C3AED); outline-offset:3px;}

/* ---- Detailansicht ---- */
.cc-details{margin-top:18px; border-top:1px solid var(--border, #E6E5E0); padding-top:18px;}
.cc-details[hidden]{display:none;}
.cc-dienst{
  display:flex; gap:14px; align-items:flex-start;
  padding:14px 0; border-bottom:1px solid var(--border, #E6E5E0);
}
.cc-dienst:last-of-type{border-bottom:0;}
.cc-dienst h3{
  font-family:'Manrope', sans-serif; font-weight:700;
  font-size:var(--fs-md, 1rem); color:var(--ink, #1A1A1A);
}
.cc-dienst p{
  margin-top:4px; font-size:var(--fs-sm, .875rem); line-height:1.6;
  color:var(--ink-soft, #5A5A5A);
}
.cc-dienst-txt{flex:1; min-width:0;}

/* Schalter. 44px hohe Tippflaeche, Zustand nicht nur ueber Farbe erkennbar
   (der Griff wandert sichtbar). */
.cc-schalter{
  flex-shrink:0; width:52px; height:30px; border-radius:999px; border:0;
  background:var(--border, #E6E5E0); position:relative; cursor:pointer;
  padding:0; margin-top:2px;
  transition:background var(--dur-fast, 180ms) var(--ease-out, ease);
}
.cc-schalter::after{
  content:''; position:absolute; top:3px; left:3px; width:24px; height:24px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.28);
  transition:transform var(--dur-fast, 180ms) var(--ease-out, ease);
}
.cc-schalter[aria-checked="true"]{background:var(--purple, #7C3AED);}
.cc-schalter[aria-checked="true"]::after{transform:translateX(22px);}
.cc-schalter[disabled]{opacity:.5; cursor:not-allowed;}
.cc-schalter:focus-visible{outline:3px solid var(--purple, #7C3AED); outline-offset:3px;}

/* ---- Sperrflaeche fuer Calendly, solange keine Einwilligung vorliegt ---- */
.cc-sperre{
  height:100%; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:14px; text-align:center;
  padding:clamp(24px, 4vw, 44px); background:var(--bg-soft, #F7F7F5);
}
.cc-sperre h3{
  font-family:'Manrope', sans-serif; font-weight:700; font-size:var(--fs-2xl, 1.25rem);
}
.cc-sperre p{
  max-width:46ch; color:var(--ink-soft, #5A5A5A);
  font-size:var(--fs-base, .9375rem); line-height:1.65;
}
.cc-sperre .cc-btn{flex:0 0 auto; min-width:220px;}

@media(max-width:560px){
  .cc-root{padding:10px;}
  .cc-card{border-radius:var(--radius-md, 16px);}
  /* Auf dem Handy untereinander: nebeneinander waeren beide Knoepfe zu
     schmal fuer bequemes Tippen. */
  .cc-knoepfe{flex-direction:column; gap:8px;}
  .cc-btn{width:100%;}
}
@media(prefers-reduced-motion:reduce){
  .cc-card{transition:none;}
  .cc-schalter, .cc-schalter::after{transition:none;}
}