/*
 * apoAI – Testfassung „abgerundet“ (Netlify-Upload-2, Nov. 2026)
 * Liegt über dem Original-CSS und ersetzt die kantige Formensprache:
 * runde Karten, Pillen-Buttons, keine Eckmarken, weiche Schatten.
 * Farben und Schriften bleiben unverändert.
 */

:root {
  --r-card: 22px;
  --r-box: 16px;
  --r-small: 12px;
  --r-pill: 999px;
  --radius-card: var(--r-card);
  --radius-control: var(--r-pill);
  --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);
}

/* ── Grundradien ─────────────────────────────────────────────── */
.rounded-\[1px\] { border-radius: 6px; }
.rounded-\[2px\] { border-radius: var(--r-card); }
.rounded-\[3px\] { border-radius: var(--r-pill); }

/* Alle rundum umrandeten Kästen */
.border { border-radius: var(--r-card); }

/* Kästen mit Innenraster oder Bild: Inhalt an die Rundung anpassen */
.grid.border,
.overflow-x-auto.border,
.border.bg-white.p-3,
a.flex-col.border,
.border.bg-\[var\(--color-flaeche\)\] { overflow: hidden; }
.border.bg-white.p-3 img,
button.border.p-3 img { border-radius: calc(var(--r-card) - 8px); }

/* Formularfelder */
input.border, textarea.border, select.border,
input.rounded-\[2px\], textarea.rounded-\[2px\] { border-radius: 14px; }
textarea { border-radius: 16px !important; }

/* Checkboxen und kleine Auswahl-Chips */
span.h-5.w-5.rounded-\[2px\] { border-radius: 7px; }
label.rounded-\[2px\].border { border-radius: var(--r-pill); }
p.inline-block.border { border-radius: var(--r-pill); }

/* Icon-Kästchen: weich gerundete Quadrate */
span.h-9.w-9.border,
span.h-11.w-11.border { border-radius: var(--r-small); }

/* Eck-Reiter oben links an Karten: als runder Chip nach innen setzen */
span.absolute.-left-px.-top-px.h-12.w-12 {
  border-radius: 14px;
  left: 14px; top: 14px;
}

/* Navigation: Logo-Link, Menüknopf */
header a.rounded-\[2px\], header button.rounded-\[2px\] { border-radius: var(--r-small); }

/* Bilder */
img.rounded-\[2px\] { border-radius: var(--r-card); }

/* ── Karten: weicher Schatten statt harter Kante ─────────────── */
a.group.flex-col.border,
li.border.bg-\[var\(--color-white\)\],
div.group.rounded-\[2px\].border,
div.relative.flex.flex-col.border,
form.rounded-\[2px\].border {
  box-shadow: var(--shadow-soft);
  transition: box-shadow .3s ease, border-color .3s ease, translate .3s ease, transform .3s ease;
}
a.group.flex-col.border:hover,
div.group.rounded-\[2px\].border:hover,
div.relative.flex.flex-col.border:hover {
  box-shadow: var(--shadow-hover);
}
@media (prefers-reduced-motion: no-preference) {
  a.group.flex-col.border:hover { translate: 0 -2px; }
}

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

/* ── Eckmarken entfernen ────────────────────────────────────── */
/* grosse Eckwinkel um die Hero-Überschrift */
svg.pointer-events-none.absolute[viewBox="0 0 100 100"] { display: none; }

/* kleine Winkel als Aufzählungszeichen / Abschnittsmarke → runder Punkt */
svg:has(> path[d^="M1 9 V1"]),
svg:has(> path[d^="M1 8 V1"]) {
  width: 8px !important;
  height: 8px !important;
  border-radius: 50%;
  background: var(--color-petrol);
  align-self: center;
}
svg:has(> path[d^="M1 9 V1"][stroke="#FFFFFF"]),
svg:has(> path[d^="M1 8 V1"][stroke*="on-dark"]) { background: var(--color-petrol-on-dark); }
svg:has(> path[d^="M1 9 V1"]) > *,
svg:has(> path[d^="M1 8 V1"]) > * { display: none; }

/* Kleine quadratische Marker, Punkte, Slider-Punkte → rund */
span.h-1\.5.w-1\.5, span.h-2.w-2, span.h-3.w-3,
button.h-2.w-2 { border-radius: 50%; }
/* Schritt-Nummern als runde Kreise */
span.flex.h-10.w-10.font-headline { border-radius: 50%; }

/* Mauslicht: im Startseiten-Hero bleibt das Original aktiv. Die hellen
   Seitenköpfe der Unterseiten bekommen denselben Effekt über rund.js
   (Attribut data-licht, Position über --mx / --my). */
@property --licht {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 0%;
}
[data-licht] {
  background-image: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 50%),
    color-mix(in srgb, var(--color-petrol) var(--licht), transparent),
    transparent 70%
  );
  transition: --licht .5s ease;
}
[data-licht="an"] { --licht: 11%; }
@media (prefers-reduced-motion: reduce) {
  [data-licht] { transition: none; }
}

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

/* Unterstriche / Fortschrittsbalken mit runden Enden */
span.h-\[2px\], div.h-\[2px\] { border-radius: 2px; }

/* ── Kopfzeile: schwebende Pille beim Scrollen ──────────────── */
header.sticky {
  top: 10px;
  width: calc(100% - 20px);
  max-width: 88rem;
  margin: 10px auto 0;
  border-radius: var(--r-pill);
  border: 1px solid transparent !important;
}
header.sticky.backdrop-blur-md {
  border-color: var(--color-line) !important;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-soft);
}
header.sticky > div { height: 5rem; } /* Platz für Logo-Schutzraum */
/* Mobiles Menü offen: aus der Pille wird eine runde Karte */
header.sticky:has(> div.md\:hidden) {
  border-radius: 28px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--shadow-hover);
}
header.sticky > div.md\:hidden {
  height: calc(100dvh - 5rem - 40px) !important;
  background: #fff;
}
/* Lesefortschritt-Linie in die Pille hineinsetzen */
header.sticky span.absolute.h-\[2px\] { left: 2rem; right: 2rem; bottom: 6px; }

/* ── Dunkle Abschnitte als abgerundete Panels ───────────────── */
section.on-dark.bg-\[var\(--color-graphit\)\] {
  margin: 12px clamp(10px, 1.6vw, 24px);
  border-radius: clamp(24px, 3vw, 40px);
}

/* Hinweis-Kachel unten rechts */
aside.fixed.rounded-\[2px\] { border-radius: 20px; overflow: hidden; }

/* Häufige Fragen: als einzelne runde Karten */
details.apo-details {
  border: 1px solid var(--color-line) !important;
  border-radius: var(--r-box);
  background: #fff;
  padding-inline: 1.25rem;
  margin-bottom: 10px;
}

/* ── Runde 2 (Feedback 12.11.2026) ─────────────────────────── */

/* Startseite: Hero ohne Verlauf und ohne Trennlinie, fliesst in die dunkle Box */
section:has(> div[class*="linear-gradient(168deg"]) { border-bottom: 0 !important; }
div.pointer-events-none.absolute.inset-0[class*="linear-gradient(168deg"] { display: none; }

/* Unterseiten: Seitenkopf ohne Trennlinie */
main header.border-b, header.border-b:not(.sticky) { border-bottom: 0 !important; }

/* Einheitlicher Abstand vom Kopfbereich zum nächsten Abschnitt, auf allen Seiten
   (Desktop 96px, Handy 56px). Vor einem dunklen Panel zählt dessen 12px Rand mit. */
:root { --kopf-abstand: clamp(3.5rem, 7.5vw, 6rem); }
main header:not(.sticky) [class*="pb-[var(--space-section)]"],
main header:not(.sticky) > div > div.grid.pb-11 /* Wissensbeiträge */ {
  padding-bottom: var(--kopf-abstand) !important;
}
main header:not(.sticky):has(+ section.on-dark) [class*="pb-[var(--space-section)]"] {
  padding-bottom: calc(var(--kopf-abstand) - 12px) !important;
}

/* Workshop-Themenschwerpunkte: einheitlich zweizeilig. Breiten in em (skalieren
   mit der Schrift), je Titel gemessen, jeweils mit Puffer:
   1 „Wissenstransfer zu KI-Grundlagen“ / „ohne technisches Vorwissen“
   2 „Konkrete KI-Beispiele aus dem“ / „Apothekenumfeld“
   3 „Praktische Übungseinheiten mit“ / „KI-Systemen“
   4 „Überblick: Datenschutz, Recht“ / „und EU AI Act“ */
div.lg\:row-start-2 > ul.border-t > li.border-b h3 > button[aria-expanded] > span:first-child {
  text-wrap: wrap; /* kein Ausbalancieren, damit der Umbruch an der gewollten Stelle sitzt */
}
div.lg\:row-start-2 > ul.border-t > li.border-b:nth-child(1) h3 > button[aria-expanded] > span:first-child { max-width: 17em; }
div.lg\:row-start-2 > ul.border-t > li.border-b:nth-child(2) h3 > button[aria-expanded] > span:first-child { max-width: 17.5em; }
div.lg\:row-start-2 > ul.border-t > li.border-b:nth-child(3) h3 > button[aria-expanded] > span:first-child { max-width: 15.6em; }
div.lg\:row-start-2 > ul.border-t > li.border-b:nth-child(4) h3 > button[aria-expanded] > span:first-child { max-width: 15em; }

/* Navigation: aktive Seite nur grün, ohne Unterstrich */
header nav .link-underline::after { display: none; }

/* Lesefortschritt-Balken in der Kopfzeile ausblenden (wirkte wie Unterstrich) */
header.sticky > span.absolute.h-\[2px\] { display: none; }

/* Fotocollagen (z. B. Workshop): runde Bilder, kein Leuchtverlauf dahinter */
figure.group.absolute img { border-radius: 18px; }
figure.group.absolute > div { border-radius: 18px; box-shadow: var(--shadow-hover); }
div.pointer-events-none.absolute.-inset-x-28.-inset-y-32 { display: none; }

/* FAQ: dunkle Linie über der Liste entfernen */
div.border-t:has(> details.apo-details) { border-top: 0 !important; }

/* Startseite „Unser Ansatz“: Erklärbox ist klickbar */
[id$="-erklaerung"] {
  cursor: pointer;
  transition: box-shadow .3s ease, border-color .3s ease;
}
[id$="-erklaerung"]:hover { box-shadow: var(--shadow-hover); border-color: var(--color-petrol); }

/* Leistungsübersicht: ganze Karte klickbar */
li[data-karte-link] > div > div.border {
  cursor: pointer;
  box-shadow: var(--shadow-soft);
  transition: box-shadow .3s ease, border-color .3s ease, translate .3s ease;
}
li[data-karte-link] > div > div.border:hover {
  box-shadow: var(--shadow-hover);
  border-color: var(--color-petrol);
}
@media (prefers-reduced-motion: no-preference) {
  li[data-karte-link] > div > div.border:hover { translate: 0 -2px; }
}

/* Aufklapp-Listen (Themenschwerpunkte Workshop, Schwerpunkte Implementierung):
   gleicher Aufbau wie die FAQ-Karten (details.apo-details) */
ul.border-t:has(> li.border-b h3 > button[aria-expanded]) {
  border-top: 0 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
ul.border-t > li.border-b:has(h3 > button[aria-expanded]) {
  border: 1px solid var(--color-line) !important;
  border-radius: var(--r-box);
  background: #fff;
  padding-inline: 1.25rem;
}
/* Kopfzeile wie FAQ-Frage */
ul.border-t > li.border-b h3 > button[aria-expanded] {
  padding-block: 1.15rem;
  align-items: center;
}
ul.border-t > li.border-b h3 > button[aria-expanded] > span:first-child {
  font-size: .9375rem !important;
  font-weight: 500;
  line-height: 1.375;
  letter-spacing: 0;
  color: var(--color-graphit) !important;
  transition: color .2s;
}
ul.border-t > li.border-b h3 > button[aria-expanded]:hover > span:first-child { color: var(--color-petrol) !important; }
/* +/− durch den FAQ-Pfeil ersetzen, dreht sich beim Öffnen */
ul.border-t > li.border-b h3 > button[aria-expanded] > span[aria-hidden="true"] {
  font-size: 0;
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 9 L12 16 L19 9' stroke='%236b7280' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .2s;
}
ul.border-t > li.border-b h3 > button[aria-expanded="true"] > span[aria-hidden="true"] { transform: rotate(180deg); }
/* Inhalt wie FAQ-Antwort */
ul.border-t > li.border-b:has(h3 > button[aria-expanded]) > div { padding-bottom: 1.15rem !important; }
ul.border-t > li.border-b:has(h3 > button[aria-expanded]) > div p {
  font-size: .875rem !important;
  line-height: 1.7 !important;
  color: var(--color-grau);
  max-width: 34rem;
}

/* Tabellen */
table { border-collapse: separate; border-spacing: 0; }

/* Fokusringe passend zur Rundung */
:focus-visible { border-radius: 10px; }

/* ── Neues rundes Logo (Nov. 2026) ──────────────────────────────
   Das alte Logo steckt als eingebettetes SVG in Kopf- und Fußzeile.
   Seine Inhalte werden ausgeblendet, das neue Logo liegt als Grafik
   auf derselben Fläche. So bleibt es auch beim Seitenwechsel korrekt. */
svg[viewBox="22 22 723 380"] > * { display: none; }
/* Brand Guidelines V2: digital mind. 90px breit, Schutzraum = Höhe des „A“ (bei 96px ca. 24px) */
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;
}
/* Fußzeile: graue Variante */
svg[viewBox="22 22 723 380"][role="img"] {
  background-image: url("/logo/apoAI_Logo_rund_Grau.svg");
}