/*
 * apoAI KI-Reifegradcheck – Fassung „abgerundet“ (Nov. 2026)
 * Angeglichen an apo-ai.de (Upload-2): runde Karten, Pillen-Knöpfe,
 * keine Eckwinkel, weiche Schatten, neues Logo nach Brand Guidelines V2.
 * Farben, Schriften und Texte unverändert.
 */
:root {
  --r-card: 22px;
  --r-box: 16px;
  --r-pill: 999px;
  --shadow-soft: 0 1px 2px rgba(28, 28, 26, 0.04), 0 8px 24px -12px rgba(28, 28, 26, 0.12);
  --shadow-hover: 0 2px 4px rgba(28, 28, 26, 0.04), 0 18px 40px -18px rgba(28, 28, 26, 0.22);
}

/* ── Eckwinkel (altes Markenzeichen) entfernen ─────────────── */
.bracket-frame::before, .bracket-frame::after { display: none !important; }

/* ── Grundradien ───────────────────────────────────────────── */
.rounded-\[2px\] { border-radius: var(--r-card); }
.rounded-\[3px\] { border-radius: var(--r-pill); }
a.rounded-\[3px\], button.rounded-\[3px\] { padding-inline: 1.5rem; }

/* Karten: helle Linie statt Graphit-Rahmen, weicher Schatten */
div.rounded-\[2px\].border, form.rounded-\[2px\].border {
  border-color: var(--color-line) !important;
  box-shadow: var(--shadow-soft);
}

/* Antwortknöpfe: runde Karten wie die FAQ der Website */
button.bracket-frame.rounded-\[2px\] {
  border-radius: var(--r-box);
  background: #fff;
  transition: border-color .2s, box-shadow .2s, background-color .2s;
}
button.bracket-frame.rounded-\[2px\]:hover {
  border-color: var(--color-petrol) !important;
  box-shadow: var(--shadow-soft);
}
/* Auswahlkästchen in den Antworten: weich gerundet (passt für Einfach- und Mehrfachauswahl) */
span.h-4.w-4.rounded-\[1px\] { border-radius: 5px; }

/* Formularfelder und Einwilligung */
input.rounded-\[2px\] { border-radius: 14px; }
span.h-5.w-5.rounded-\[2px\] { border-radius: 7px; }

/* Logo-Link und Fokusringe */
header a.rounded-\[2px\] { border-radius: 12px; }
:focus-visible { border-radius: 10px; }

/* Listen: dunkle Linie über den Handlungsfeldern weicher */
ol.border-t { border-top-color: var(--color-line) !important; }

/* Fortschritts- und Ergebnisbalken mit runden Enden */
div.h-\[3px\] { border-radius: var(--r-pill); overflow: hidden; }
div.h-\[3px\] > div { border-radius: var(--r-pill); }

/* Linien-Icons mit runden Enden */
svg path, svg line, svg polyline { stroke-linecap: round; stroke-linejoin: round; }

/* ── Kopfzeile als schwebende Pille ────────────────────────── */
body > header.border-b, header.w-full.border-b {
  width: calc(100% - 20px);
  max-width: 60rem;
  margin: 10px auto 0;
  border: 1px solid var(--color-line) !important;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.86);
  box-shadow: var(--shadow-soft);
}
section.border-b { border-bottom: 0 !important; }
footer.border-t { border-top-color: var(--color-line); }

/* ── Neues rundes Logo (Brand Guidelines V2) ───────────────────
   Mindestens 90px breit, Schutzraum = Höhe des „A“ rundum. */
svg[viewBox="22 22 723 380"] > * { display: none; }
svg[viewBox="22 22 723 380"] {
  width: 96px !important;
  height: calc(96px * 235.6 / 565.3) !important;
  background: url("/logo/apoAI_Logo_rund_Petrol.svg") center / contain no-repeat;
}
header a:has(> svg[viewBox="22 22 723 380"]) { gap: 24px; }

/* Kleine Eckwinkel als Aufzählungszeichen → runder Punkt wie auf apo-ai.de */
svg:has(> path[d^="M1 8 V1"]) {
  width: 8px !important;
  height: 8px !important;
  margin-top: .5em !important;
  border-radius: 50%;
  background: var(--color-petrol);
}
svg:has(> path[d^="M1 8 V1"]) > * { display: none; }

/* Gewählte Antwort deutlich markieren */
button.bracket-frame:has(span.h-4.w-4.bg-\[var\(--color-petrol\)\]) {
  border-color: var(--color-petrol) !important;
  background: color-mix(in srgb, var(--color-petrol) 6%, #fff);
}