/* ============================================================
   Cookie-Consent — Skin: Tidemark Navy
   Gehört zusammen mit cookie-consent.js.
   Nutzt die CSS-Variablen der Seite; die Fallback-Werte hinter
   dem Komma greifen nur, falls die Seite den Skin nicht lädt.
   ============================================================ */

.cc-hidden{display:none !important}

/* Verhindert Scrollen der Seite, solange der Dialog offen ist */
body.cc-locked{overflow:hidden}

/* ---------- gemeinsame Schaltflächen ---------- */
.cc-btn{
  font-family:var(--font-body,'JetBrains Mono',monospace);
  font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border:2px solid transparent;border-radius:var(--radius-pill,999px);
  padding:12px 22px;cursor:pointer;white-space:nowrap;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .18s,color .18s,border-color .18s,transform .18s;
}
.cc-btn:active{transform:translateY(1px)}

/* "Ablehnen" und "Akzeptieren" sind bewusst optisch identisch —
   gesetzlich muss das Ablehnen genauso leicht fallen wie das Annehmen. */
.cc-btn-main{
  background:var(--secondary,#003087);color:#fff;border-color:var(--secondary,#003087);
}
.cc-btn-main:hover{background:var(--secondary-hover,#001435);border-color:var(--secondary-hover,#001435)}

.cc-btn-quiet{
  background:transparent;color:var(--secondary,#003087);
  border-color:var(--secondary,#003087);
}
.cc-btn-quiet:hover{background:var(--secondary,#003087);color:#fff}

.cc-btn:focus-visible{outline:3px solid var(--secondary,#003087);outline-offset:3px}

/* ---------- Toast (erste Ebene) ----------
   Bewusst KEIN seitenbreiter Balken, sondern eine kompakte Karte unten
   rechts. Sie erscheint einmalig beim ersten Besuch und danach nur noch,
   wenn in der Fusszeile "Cookie-Einstellungen" geklickt wird.

   Rechtlich wichtig und deshalb nicht verhandelbar: "Alle ablehnen" und
   "Alle akzeptieren" sind in Grösse, Gewicht und Farbe IDENTISCH. Ein
   optisch hervorgehobener Zustimmen-Knopf wäre ein Dark Pattern und
   würde die Einwilligung angreifbar machen.
   ------------------------------------------------------------------- */
.cc-banner{
  position:fixed;z-index:9000;
  right:20px;bottom:20px;left:20px;
  max-width:400px;margin-left:auto;
  background:var(--surface,#fff);
  border:1px solid var(--border,#E3DDD5);
  border-left:5px solid var(--secondary,#003087);
  border-radius:var(--radius,12px);
  box-shadow:0 14px 38px rgba(0,20,53,.22);
  padding:18px 20px 20px;
  transform:translateY(18px);opacity:0;visibility:hidden;
  transition:transform .26s ease, opacity .26s ease, visibility 0s linear .26s;
}
.cc-banner[data-open="true"]{
  transform:translateY(0);opacity:1;visibility:visible;
  transition:transform .26s ease, opacity .26s ease, visibility 0s;
}
.cc-inner{width:100%}
.cc-banner h2{
  font-family:var(--font-body,'JetBrains Mono',monospace);
  font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  line-height:1.4;margin:0 0 8px;color:var(--text-muted,#545D79);
}
.cc-banner h2 .cc-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--secondary,#003087);margin-right:8px;vertical-align:2px;
}
.cc-banner p{
  margin:0 0 14px;font-size:.76rem;line-height:1.5;
  color:var(--text,#001435);
}
.cc-banner a,.cc-modal a{color:var(--secondary,#003087);text-decoration:underline}
.cc-actions{display:flex;flex-wrap:wrap;gap:8px}
.cc-actions .cc-btn{flex:1 1 calc(50% - 4px);min-width:0}
/* Der ruhige dritte Knopf steht als eigene Zeile darunter */
.cc-banner .cc-actions .cc-btn-quiet{flex:1 1 100%}

/* ---------- Dialog (zweite Ebene) ---------- */
.cc-modal{
  position:fixed;inset:0;z-index:9100;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(0,20,53,.55);
}
.cc-modal-box{
  background:var(--surface,#fff);
  border:1px solid var(--border,#E3DDD5);border-radius:var(--radius,12px);
  box-shadow:0 20px 60px rgba(0,20,53,.28);
  width:100%;max-width:660px;max-height:88vh;
  display:flex;flex-direction:column;overflow:hidden;
}
.cc-modal-head{
  padding:24px 26px 16px;border-bottom:1px solid var(--border,#E3DDD5);
}
.cc-eyebrow{
  font-size:.7rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;
  color:var(--text-muted,#545D79);margin:0 0 6px;
}
.cc-eyebrow .cc-dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--secondary,#003087);margin-right:8px;vertical-align:2px;
}
.cc-modal-head h2{
  font-family:var(--font-display,'Caveat',cursive);font-weight:700;
  font-size:2.1rem;line-height:1.05;margin:0 0 8px;color:var(--text,#001435);
}
.cc-modal-head p{margin:0;font-size:.78rem;line-height:1.6;color:var(--text-muted,#545D79)}

.cc-modal-body{padding:6px 26px 20px;overflow-y:auto}

/* ---------- eine Kategorie ---------- */
.cc-cat{border-bottom:1px solid var(--border,#E3DDD5);padding:18px 0}
.cc-cat:last-child{border-bottom:0}
.cc-cat-top{display:flex;align-items:flex-start;gap:16px;justify-content:space-between}
.cc-cat h3{
  margin:0 0 4px;font-family:var(--font-body,'JetBrains Mono',monospace);
  font-size:.88rem;font-weight:700;color:var(--text,#001435);
}
.cc-cat p{margin:0;font-size:.76rem;line-height:1.6;color:var(--text-muted,#545D79)}

/* Schalter in der Optik des Rätsels: aus = grau, ein = blau */
.cc-switch{
  flex:0 0 auto;position:relative;width:52px;height:28px;
  border:0;padding:0;border-radius:999px;cursor:pointer;
  background:var(--border,#E3DDD5);
  transition:background .2s;
}
.cc-switch::after{
  content:"";position:absolute;top:3px;left:3px;
  width:22px;height:22px;border-radius:50%;
  background:#fff;box-shadow:0 1px 3px rgba(0,20,53,.3);
  transition:transform .2s;
}
.cc-switch[aria-checked="true"]{background:var(--secondary,#003087)}
.cc-switch[aria-checked="true"]::after{transform:translateX(24px)}
.cc-switch[disabled]{cursor:not-allowed;background:var(--secondary,#003087);opacity:.45}
.cc-switch:focus-visible{outline:3px solid var(--secondary,#003087);outline-offset:3px}

/* Aufklappbare Cookie-Liste */
.cc-details{margin-top:12px}
.cc-details summary{
  cursor:pointer;font-size:.7rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--secondary,#003087);
}
.cc-details summary::marker{color:var(--secondary,#003087)}
.cc-table{
  width:100%;border-collapse:collapse;margin-top:12px;
  font-size:.7rem;line-height:1.5;
}
.cc-table th,.cc-table td{
  text-align:left;padding:8px 10px;
  border:1px solid var(--border,#E3DDD5);vertical-align:top;
}
.cc-table th{background:var(--subtle,#F1EDE8);font-weight:700;color:var(--text,#001435)}
.cc-table td{color:var(--text-muted,#545D79)}
.cc-empty{
  margin-top:12px;padding:10px 12px;font-size:.72rem;
  background:var(--subtle,#F1EDE8);border-radius:8px;color:var(--text-muted,#545D79);
}

/* ---------- Fuss des Dialogs ---------- */
.cc-modal-foot{
  padding:18px 26px 22px;border-top:1px solid var(--border,#E3DDD5);
  background:var(--surface,#fff);
}
.cc-modal-foot .cc-actions{margin-bottom:14px}
.cc-legal{
  margin:0;font-size:.68rem;line-height:1.6;color:var(--text-muted,#545D79);
  text-align:center;
}

/* Knöpfe im Toast kompakter als im Dialog */
.cc-banner .cc-btn{padding:11px 14px;font-size:.72rem;letter-spacing:.04em}

@media (max-width:620px){
  .cc-banner{right:12px;left:12px;bottom:12px;max-width:none;padding:16px 16px 18px}
  .cc-banner .cc-actions .cc-btn{flex:1 1 100%}
  .cc-modal{padding:0}
  .cc-modal-box{max-width:none;max-height:100vh;height:100%;border-radius:0;border:0}
}
@media (prefers-reduced-motion:reduce){
  .cc-banner,.cc-btn,.cc-switch,.cc-switch::after{transition:none !important}
}