/* =========================================================================
   cookie-checker.css — Website-Cookie-Checker.
   Wird nur auf /cookie-checker/ geladen. Nutzt Tokens aus main.css.
   Statusfarben gegen alle vier Site-Hintergruende auf >= 4,5:1 geprueft.
   ========================================================================= */

.cc {
  --cc-ok:        #2f6b45;
  --cc-ok-bg:     #e6f2ea;
  --cc-warn:      #8a5300;
  --cc-warn-bg:   #fbf1e2;
  --cc-fail:      #b42323;
  --cc-fail-bg:   #fbe9e9;
  max-width: 860px;
  margin-inline: auto;
}

.cc__panel {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.5rem, 4vw, 3rem);
}

/* === Formular === */
.cc-form__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: var(--space-2xs);
}
.cc-form__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
@media (min-width: 620px) {
  .cc-form__row { flex-direction: row; }
  .cc-form__input { flex: 1 1 auto; }
  .cc-form__submit { flex: 0 0 auto; }
}
.cc-input {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0.9rem 1rem;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.cc-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0, 105, 194, 0.18);
}
.cc-form__hint {
  margin: var(--space-2xs) 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.cc .button.is-loading { opacity: 0.7; pointer-events: none; }

/* === Fortschritt / Fehler === */
.cc-progress {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: var(--space-md);
  color: var(--color-primary-dark);
  font-weight: 600;
}
.cc-progress[hidden] { display: none; }
.cc-progress__spinner {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 3px solid var(--color-bg-tint);
  border-top-color: var(--color-primary);
  animation: cc-spin 0.8s linear infinite;
}
@keyframes cc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .cc-progress__spinner { animation-duration: 2.4s; }
}
.cc-error {
  margin: var(--space-sm) 0 0;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  background: var(--cc-fail-bg);
  border: 1px solid rgba(180, 35, 35, 0.25);
  color: var(--cc-fail);
  font-size: 0.9375rem;
}

/* === Bericht === */
.cc-result:empty { display: none; }
.cc-result { margin-top: var(--space-xl); }
.cc-report-page .cc-result { margin-top: var(--space-lg); }

.cc-report {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-soft);
  border-top: 5px solid var(--cc-status);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 4vw, 2.75rem);
}
.cc-report--ok   { --cc-status: var(--cc-ok);   --cc-status-bg: var(--cc-ok-bg); }
.cc-report--warn { --cc-status: var(--cc-warn); --cc-status-bg: var(--cc-warn-bg); }
.cc-report--fail { --cc-status: var(--cc-fail); --cc-status-bg: var(--cc-fail-bg); }

.cc-report__head {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
}
.cc-report__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--radius-md);
  background: var(--cc-status-bg);
  color: var(--cc-status);
}
.cc-report__icon svg { width: 28px; height: 28px; }
.cc-report__headline {
  margin: 0 0 0.25rem;
  font-size: clamp(1.25rem, 2.4vw, 1.625rem);
  line-height: 1.3;
  color: var(--cc-status);
}
.cc-report__headline:focus { outline: none; }
.cc-report__meta {
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  word-break: break-word;
}
.cc-report__summary {
  margin: var(--space-md) 0 0;
  color: var(--color-text);
  line-height: 1.65;
}
.cc-report__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-md);
}
.cc-report__actions .button[hidden] { display: none; }
.cc-report__disclaimer {
  margin: var(--space-lg) 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
}

/* === Teilen === */
.cc-share {
  margin-top: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-bg-soft);
  border: 1px solid var(--color-border-soft);
}
.cc-share[hidden] { display: none; }
.cc-share__label {
  display: block;
  font-weight: 600;
  color: var(--color-primary-dark);
  margin-bottom: 0.4rem;
}
.cc-share__row { display: flex; gap: var(--space-2xs); }
.cc-share__input {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  background: #fff;
  padding: 0.7rem 0.8rem;
  min-width: 0;
}
.cc-share__copy { flex: 0 0 auto; white-space: nowrap; padding: 0.7rem 1.1rem; }
.cc-share__copy[hidden] { display: none; }
.cc-share__channels {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}
.cc-share__btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.95rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: #fff;
  color: var(--color-primary-dark);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.cc-share__btn:hover { border-color: var(--color-primary); background: var(--color-bg-tint); text-decoration: none; }
.cc-share__btn[hidden] { display: none; }
.cc-share__btn--wa { color: #0b6b5f; }
.cc-share__btn svg { width: 20px; height: 20px; }
.cc-share__info {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin: var(--space-sm) 0 0;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.cc-share__info svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--color-primary); }

/* === Gruppen === */
.cc-group { margin-top: var(--space-lg); }
.cc-group__title {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  margin: 0 0 var(--space-sm);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-soft);
  font-size: 1.0625rem;
  color: var(--color-primary-dark);
}
.cc-group__count {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--color-text-muted);
}
.cc-group--fail .cc-group__title { color: var(--cc-fail); }
.cc-group--unclear .cc-group__title,
.cc-group--extern .cc-group__title { color: var(--cc-warn); }
.cc-group--blocked .cc-group__title { color: var(--cc-ok); }

.cc-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2xs); }
.cc-item {
  padding: 0.9rem 1rem;
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}
.cc-group--fail .cc-item { border-left: 3px solid var(--cc-fail); }
.cc-group--unclear .cc-item,
.cc-group--extern .cc-item { border-left: 3px solid var(--cc-warn); }
.cc-group--blocked .cc-item { border-left: 3px solid var(--cc-ok); }
.cc-item__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.cc-item__name { font-weight: 700; color: var(--color-text); }
.cc-item__note,
.cc-item__cookies,
.cc-item__pages {
  margin: 0.35rem 0 0;
  font-size: 0.9rem;
  line-height: 1.55;
}
.cc-item__note { color: var(--color-text); }
.cc-item__cookies,
.cc-item__pages { color: var(--color-text-muted); word-break: break-word; }
.cc-item__cookies span { margin-right: 0.15rem; }
.cc code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  padding: 0.05rem 0.35rem;
  border-radius: 4px;
  background: var(--color-bg-soft);
  color: var(--color-primary-dark);
}

/* Kategorie-Label: schlicht rechteckig, kein Pill */
.cc-tag {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  background: #eef2f7;
  color: #4b5563;
}
.cc-tag--marketing  { background: #fdecec; color: #9b1c1c; }
.cc-tag--statistik  { background: #fdf3e1; color: #7a4a00; }
.cc-tag--funktional { background: #e2ecf7; color: #004f92; }
.cc-tag--notwendig  { background: #e6f2ea; color: #2f6b45; }

/* === Tabelle Server-Cookies === */
.cc-table-wrap { overflow-x: auto; }
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.cc-table th {
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  color: var(--color-primary-dark);
  background: var(--color-bg-soft);
  padding: 0.55rem 0.75rem;
}
.cc-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--color-border-soft);
  vertical-align: top;
  color: var(--color-text);
}

/* === Details / Hinweise === */
.cc-facts {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.25rem var(--space-md);
  margin: 0;
  font-size: 0.9375rem;
}
@media (min-width: 620px) { .cc-facts { grid-template-columns: max-content 1fr; } }
.cc-facts dt { font-weight: 600; color: var(--color-primary-dark); }
.cc-facts dd { margin: 0 0 var(--space-2xs); color: var(--color-text); }
.cc-pages { list-style: none; margin: 0; padding: 0; word-break: break-word; }
.cc-pages .is-failed { color: var(--color-text-muted); }
.cc-notes { list-style: none; margin: var(--space-sm) 0 0; padding: 0; display: grid; gap: 0.5rem; }
.cc-notes li {
  display: flex;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--color-text-muted);
}
.cc-notes svg { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; color: var(--cc-warn); }

/* === CTA im Bericht === */
.cc-cta {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: var(--color-bg-tint);
}
.cc-cta__title {
  margin: 0 0 0.35rem;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-primary-dark);
}
.cc-cta__text { margin: 0 0 var(--space-sm); color: var(--color-text); }

/* === Vertrauensmerkmale === */
.cc-trust {
  margin-top: var(--space-xl);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-sm);
}
@media (min-width: 620px) { .cc-trust { grid-template-columns: 1fr 1fr; } }
.cc-trust__item {
  display: flex;
  gap: 0.75rem;
  padding: var(--space-md);
  background: var(--color-bg-card);
  border: 1px solid var(--color-border-soft);
  border-radius: var(--radius-md);
}
.cc-trust__item svg { flex: 0 0 auto; color: var(--color-primary); }
.cc-trust__item h3 { font-size: 1rem; margin: 0 0 0.25rem; }
.cc-trust__item p { margin: 0; font-size: 0.9rem; color: var(--color-text-muted); }

/* === Geteilter Bericht === */
.cc-report-page { padding-top: clamp(2rem, 5vw, 4rem); }
.cc-report-page__head h1 {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  margin: 0.5rem 0 0;
  word-break: break-word;
}

/* 3-Schritt-Prozess mittig im 4-Spalten-Grid (nur diese Seite) */
@media (min-width: 961px) {
  .page--cookie-checker .process {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: 1120px;
    margin-inline: auto;
  }
}