/* ============================================================
   apiara — site / content.css
   Inhaltsseiten: Prosa, Artikel, Kopfbereich.
   Alles ist auf `.site` gescopt: der SEO-Footer teilt sich das
   Dokument und benutzt Tailwind.
   ============================================================ */

/* ---------- assets/styles/site/content.css — Seitenkopf, Prosa, Panel, Tabelle ---------- */
/* ---- Seitenkopf: Breadcrumb, H1, Lead ---- */
.site .pg-head{padding-block:56px 34px}
.site .pg-head h1{font-size:clamp(2rem,4.4vw,3rem);letter-spacing:-.03em;line-height:1.08;color:var(--heading)}
.site .pg-lead{margin-top:16px;max-width:62ch;font-size:1.06rem;line-height:1.65;color:var(--text-dim)}

.site .pg-crumb{display:flex;align-items:center;gap:9px;margin-bottom:22px;
  font-size:.85rem;font-weight:600;color:var(--text-mute);flex-wrap:wrap}
.site .pg-crumb a{color:var(--text-mute);text-decoration:none;transition:color .18s}
.site .pg-crumb a:hover{color:var(--accent)}
.site .pg-crumb svg{width:15px;height:15px;vertical-align:-2px}
.site .pg-crumb [aria-current]{color:var(--text-dim)}
/* Auf den Detailseiten ist der Breadcrumb das erste Element unter der festen
   Kopfleiste — ohne diesen Abstand klebt er an ihr. Die Seiten mit `.pg-head`
   (Impressum & Co.) bringen ihren Abstand selbst mit und sind nicht betroffen. */
.site .page > .wrap > .pg-crumb:first-child{margin-top:2.5rem}
/* Folgt das Artikel-Raster direkt darauf, hat es den Abstand schon bekommen. */
.site .pg-crumb + .art-layout{padding-top:2rem}

/* ---- Panel: die Flaeche, auf der Inhalt liegt ---- */
/* Prosa liest sich schlecht ueber die volle Breite — Legal-Seiten begrenzen. */
.site .pg-narrow{max-width:46rem}
.site .pg-panel{border-radius:var(--r-3xl);padding:34px 30px;background:var(--surface);
  border:1px solid var(--border);box-shadow:var(--sh-lg);backdrop-filter:blur(12px)}
@media(max-width:640px){.site .pg-panel{padding:24px 20px;border-radius:var(--r-2xl)}}

/* ---- Fliesstext ---- */
.site .pg-prose{color:var(--text-dim);font-size:1rem;line-height:1.72;max-width:72ch}
.site .pg-prose > * + *{margin-top:1.05em}
.site .pg-prose h2{margin-top:2em;font-size:1.45rem;letter-spacing:-.02em;line-height:1.25;color:var(--heading)}
.site .pg-prose h3{margin-top:1.6em;font-size:1.12rem;line-height:1.3;color:var(--heading)}
.site .pg-prose h2:first-child,.site .pg-prose h3:first-child{margin-top:0}
.site .pg-prose strong,.site .pg-prose b{color:var(--text);font-weight:700}
.site .pg-prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;
  text-decoration-thickness:1px;text-decoration-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.site .pg-prose a:hover{color:var(--accent-bright);text-decoration-color:currentColor}
.site .pg-prose ul,.site .pg-prose ol{padding-left:1.35em}
.site .pg-prose li + li{margin-top:.45em}
.site .pg-prose ul{list-style:disc}
.site .pg-prose ol{list-style:decimal}
.site .pg-prose li::marker{color:var(--accent)}
.site .pg-prose em{color:var(--text-mute);font-style:italic}
.site .pg-prose hr{border:0;border-top:1px solid var(--border);margin:2em 0}

/* Adressblöcke und andere Gruppen im Impressum. */
.site .pg-block + .pg-block{margin-top:1.5em}
.site .pg-block p + p{margin-top:.2em}
.site .pg-block .pg-key{font-weight:700;color:var(--text)}

/* ---- Abschnitt mit Nummer (AGB, Datenschutz) ---- */
.site .pg-sec{scroll-margin-top:90px}
.site .pg-sec + .pg-sec{margin-top:2.4em;padding-top:2.4em;border-top:1px solid var(--border)}

/* ---- Inhaltsverzeichnis ---- */
.site .pg-toc{margin-bottom:30px;padding:20px 22px;border-radius:var(--r-xl);
  background:var(--surface-3);border:1px solid var(--border)}
.site .pg-toc-title{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-mute);margin-bottom:12px}
.site .pg-toc ol{list-style:none;display:grid;gap:7px}
.site .pg-toc a{color:var(--text-dim);text-decoration:none;font-size:.92rem;font-weight:600;transition:color .18s}
.site .pg-toc a:hover{color:var(--accent)}

/* ---- Hinweis-Kasten ---- */
.site .pg-note{margin-top:2em;padding:16px 18px;border-radius:var(--r-lg);
  background:var(--note-bg);border:1px solid var(--border);
  color:var(--text-mute);font-size:.9rem;line-height:1.6}

/* ---- Tabelle (AGB: Uebersicht der Plaene) ---- */
.site .pg-tablewrap{margin-top:1.05em;overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border)}
.site .pg-table{width:100%;border-collapse:collapse;font-size:.9rem}
.site .pg-table th{text-align:left;padding:12px 16px;font-weight:700;color:var(--heading);
  background:var(--surface-3);border-bottom:1px solid var(--border)}
.site .pg-table td{padding:12px 16px;color:var(--text-dim)}
.site .pg-table tbody tr + tr td{border-top:1px solid var(--border)}
.site .pg-table td:first-child{font-weight:600;color:var(--text)}

/* ---- "Zuletzt aktualisiert" ---- */
.site .pg-updated{margin-top:2.4em;padding-top:1.2em;border-top:1px solid var(--border);
  font-size:.85rem;color:var(--text-mute)}

/* ---- Abschluss-Abstand vor dem Footer ---- */
.site .pg-foot{padding-bottom:80px}

/* ---------- assets/styles/site/content.css — Typografie des Artikel-HTML aus der Datenbank ---------- */
.site .art-content{color:var(--text-dim);font-size:1.0625rem;line-height:1.75}
.site .art-content > *:first-child{margin-top:0}
/* Auch in verschachtelten Autoren-Boxen (z. B. `<div class="bg-amber-50 p-6">`)
   darf das erste Element keinen Section-Abstand nach oben ziehen — sonst klafft
   über der Box-Überschrift das Padding + der h-Margin. */
.site .art-content div > :first-child{margin-top:0}

/* Rechtlicher Hinweis unter Vergleichen (Detailseite + Übersicht) */
.site .vgl-disclaimer{margin:2.75rem 0 0;padding:1.1rem 1.35rem;border-radius:var(--r-md);
  background:var(--surface-3);border:1px solid var(--border);color:var(--text-mute);
  font-size:.82rem;line-height:1.55}
.site .vgl-disclaimer-title{font-weight:700;color:var(--text-dim);margin:0 0 .35rem;
  text-transform:uppercase;letter-spacing:.05em;font-size:.72rem}
.site .vgl-disclaimer-body{margin:0}
.site .art-content > *:last-child{margin-bottom:0}

.site .art-content h2{font-size:1.75rem;font-weight:800;color:var(--heading);margin:2.5rem 0 1rem;letter-spacing:-.01em;line-height:1.25;scroll-margin-top:96px}
.site .art-content h3{font-size:1.375rem;font-weight:700;color:var(--heading);margin:2rem 0 .75rem;line-height:1.3}
.site .art-content h4{font-size:1.125rem;font-weight:700;color:var(--heading);margin:1.5rem 0 .5rem}

/* `color` ist neu: ohne sie schlaegt `text-gray-700` aus dem DB-HTML durch. */
.site .art-content p{margin:0 0 1.25rem;color:var(--text-dim)}
.site .art-content ul,.site .art-content ol{margin:0 0 1.25rem;padding-left:1.5rem;color:var(--text-dim)}
.site .art-content ul{list-style:disc}
.site .art-content ol{list-style:decimal}
/* Autoren-Checklisten (Tailwind `list-none` mit eigenem ☑-Zeichen) dürfen keinen
   zusätzlichen Disc-Punkt bekommen — sonst doppelte Aufzählungssymbole. Wie im
   Tailwind-Kontext gedacht: ohne ul- und li-Einzug, damit das ☑ bündig mit der
   Card-Überschrift steht. */
.site .art-content ul.list-none{list-style:none;padding-left:0}
.site .art-content ul.list-none li{padding-left:0}
.site .art-content li{margin:.5rem 0;padding-left:.25rem}
.site .art-content li::marker{color:var(--accent)}

.site .art-content strong,.site .art-content b{color:var(--text);font-weight:700}
.site .art-content em{font-style:italic}
.site .art-content a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.site .art-content a:hover{color:var(--accent-bright)}
.site .art-content hr{border:0;border-top:1px solid var(--border);margin:2rem 0}
.site .art-content img{max-width:100%;height:auto;border-radius:var(--r-md);margin:1.5rem 0}

.site .art-content blockquote{border-left:4px solid var(--accent);background:var(--note-bg);
  padding:1rem 1.25rem;margin:1.5rem 0;border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--text-dim)}
.site .art-content code{background:var(--chip-bg);color:var(--accent);padding:.125rem .375rem;
  border-radius:.25rem;font-size:.875em}
.site .art-content pre{background:var(--field-solid);color:var(--accent-bright);padding:1.25rem;
  border-radius:var(--r-md);overflow-x:auto;margin:1.5rem 0}
.site .art-content pre code{background:transparent;color:inherit;padding:0}

/* Tabellen: `help/show` hatte sie nie, rendert aber denselben Korpus. */
.site .art-content table{width:100%;border-collapse:separate;border-spacing:0;margin:1.5rem 0;
  font-size:.9375rem;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-xl);overflow:hidden}
.site .art-content thead tr{background:var(--surface-3)}
.site .art-content th{padding:.875rem 1.25rem;color:var(--heading);font-weight:700;text-align:left;
  border-bottom:2px solid var(--border);vertical-align:top}
.site .art-content td{padding:1rem 1.25rem;border-bottom:1px solid var(--border);text-align:left;
  vertical-align:top;color:var(--text-dim)}
.site .art-content tbody tr:last-child td{border-bottom:0}
.site .art-content tbody tr:nth-child(even){background:var(--surface-2)}
.site .art-content tbody tr:hover{background:var(--chip-bg)}
.site .art-content .rounded-2xl table{margin:0;background:transparent;border:0;border-radius:0}

/* ---- Muster aus dem DB-HTML, die eine Element-Regel nicht erwischt ---- */

/* Wenn Listenpunkte im Seed-HTML als Karten gestaltet sind, stoeren die Punkte. */
.site .art-content ul:has(li[class*="bg-"]),
.site .art-content ul:has(li[class*="border"]){list-style:none;padding-left:0}

/* Tipp-Box: <div class="bg-amber-50 border border-amber-200 rounded-xl p-6 mt-8">.
   Padding und Margin muessen hier stehen, weil `.site *` sie vorher wegnimmt. */
.site .art-content div[class*="bg-amber-50"]{background:var(--note-bg);border:1px solid var(--border);
  border-radius:var(--r-md);padding:1.5rem;margin:2rem 0}
.site .art-content div[class*="bg-amber-50"] > *:last-child{margin-bottom:0}

/* Inline-Pill/Badge (z.B. "Gesetzliche Pflicht in Deutschland"): der helle
   Tailwind-Grund (bg-amber-100) wirkt im Theme fremd. Auf ein dezentes,
   token-basiertes Amber-Badge umstellen; Padding wiederherstellen. */
.site .art-content div[class*="bg-amber-100"]{display:inline-flex;align-items:center;gap:.5rem;
  padding:.35rem .85rem;border-radius:var(--r-full);font-size:.8rem;font-weight:700;letter-spacing:.01em;
  background:color-mix(in srgb,var(--accent) 15%,transparent);color:var(--accent)}

/* Warn-Box: <div class="... bg-red-50 border border-red-200 rounded-2xl p-5">.
   Heller Tailwind-Grund → der geerbte helle Dark-Theme-Text wird unlesbar.
   Auf die Danger-Tokens stellen, Padding zurueckholen. */
.site .art-content div[class*="bg-red-50"]{background:var(--danger-bg);
  border:1px solid var(--danger-border);border-radius:var(--r-xl);padding:1.25rem;margin:1.5rem 0}
.site .art-content div[class*="bg-red-50"] > *:last-child{margin-bottom:0}

/* Info-Karten (meist Listenpunkte): <li class="bg-white border ... rounded-xl px-5 py-4">.
   Weisser Grund + heller Erbtext = unsichtbar → auf eine dunkle Flaeche stellen. */
.site .art-content li[class*="bg-white"],
.site .art-content div[class*="bg-white"]{background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);padding:.875rem 1.25rem;margin:0 0 .75rem}
.site .art-content li[class*="bg-white"] > *:last-child,
.site .art-content div[class*="bg-white"] > *:last-child{margin-bottom:0}

/* CTA-Banner, den Admin-Artikel setzen koennen. Ist bereits dunkel gemeint. */
.site .art-content section[class*="bg-amber-7"],
.site .art-content section[class*="bg-amber-8"]{position:relative;overflow:hidden;
  background:var(--cta-bg);border:1px solid var(--cta-border);border-radius:var(--r-3xl);
  padding:2rem;margin:2rem 0;color:var(--cta-fg)}
.site .art-content section[class*="bg-amber-7"] > *,
.site .art-content section[class*="bg-amber-8"] > *{position:relative}
.site .art-content section[class*="bg-amber-7"] h2,.site .art-content section[class*="bg-amber-8"] h2,
.site .art-content section[class*="bg-amber-7"] h3,.site .art-content section[class*="bg-amber-8"] h3{color:var(--cta-fg);margin-top:0}
.site .art-content section[class*="bg-amber-7"] p,
.site .art-content section[class*="bg-amber-8"] p{color:var(--cta-fg);opacity:.86}
.site .art-content section[class*="bg-amber-7"] strong,
.site .art-content section[class*="bg-amber-8"] strong{color:var(--cta-fg)}
/* Aufzaehlungen im CTA-Banner erben sonst die gedaempfte Artikel-Textfarbe und
   werden auf dem dunklen Amber-Grund unlesbar. Auf `--cta-fg` heben. */
.site .art-content section[class*="bg-amber-7"] li,
.site .art-content section[class*="bg-amber-8"] li,
.site .art-content section[class*="bg-amber-7"] ul,
.site .art-content section[class*="bg-amber-8"] ul{color:var(--cta-fg);opacity:.92}
.site .art-content section[class*="bg-amber-7"] a,
.site .art-content section[class*="bg-amber-8"] a{color:var(--accent-bright)}
/* CTA-Button im Banner: Gold im Dark-Theme (hebt sich vom dunkel-amber Banner ab),
   weiss im Light-Theme. Banner ist in beiden Themes dunkel-amber (--cta-bg). */
.site .art-content section[class*="bg-amber-7"] a[class*="bg-white"],
.site .art-content section[class*="bg-amber-8"] a[class*="bg-white"]{display:inline-flex;align-items:center;gap:.5rem;
  background:var(--accent);color:var(--on-accent);padding:.875rem 1.5rem;border-radius:var(--r-md);
  text-decoration:none;font-weight:700;transition:background .2s ease}
.site .art-content section[class*="bg-amber-7"] a[class*="bg-white"]:hover,
.site .art-content section[class*="bg-amber-8"] a[class*="bg-white"]:hover{background:var(--accent-bright);color:var(--on-accent)}
:root[data-theme="light"] .site .art-content section[class*="bg-amber-7"] a[class*="bg-white"],
:root[data-theme="light"] .site .art-content section[class*="bg-amber-8"] a[class*="bg-white"]{background:var(--surface-raised);color:var(--heading)}
:root[data-theme="light"] .site .art-content section[class*="bg-amber-7"] a[class*="bg-white"]:hover,
:root[data-theme="light"] .site .art-content section[class*="bg-amber-8"] a[class*="bg-white"]:hover{background:#FFF7EA;color:var(--heading)}

/* ---------- assets/styles/site/content.css — Zweispaltiges Artikel-Layout, Inhaltsverzeichnis, Seitenspalte ---------- */
/* 40px waren zu knapp: die feste Kopfleiste sass dem Breadcrumb im Nacken. */
.site .art-layout{display:grid;grid-template-columns:1fr;gap:3rem;align-items:start;padding-block:64px 80px}
/* Folgt das Layout direkt auf einen Hero, liefert dessen `margin-bottom:56px`
   bereits den Abstand — das eigene Top-Padding doppelt ihn sonst auf ~120px. */
.site .hero-page + .wrap .art-layout{padding-top:0}
@media(min-width:1024px){.site .art-layout{grid-template-columns:1fr 18rem}}

.site .art-hero{margin-bottom:2rem}
/* Makro-Portrait unter dem Hero (Rasse-Detail + Kombi-Seiten). aspect-ratio
   haelt die Hoehe frei, damit nichts springt, bevor das Bild geladen ist. */
.site .art-portrait{position:relative;margin:0 0 2rem;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border)}
.site .art-portrait img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover}
/* Sehr dezenter „Symbolbild"-Hinweis in der Bildecke (KI-generierte Illustrationen). */
.site .art-portrait-note{position:absolute;bottom:.5rem;right:.625rem;font-size:.625rem;font-weight:500;
  letter-spacing:.02em;color:rgba(255,255,255,.72);background:rgba(0,0,0,.32);
  padding:.1rem .45rem;border-radius:.375rem;pointer-events:none;user-select:none}
.site .art-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1rem;
  font-size:.875rem;color:var(--text-mute)}
.site .art-cat{display:inline-block;background:var(--chip-bg);color:var(--accent);padding:.375rem 1rem;
  border-radius:var(--r-full);font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;
  text-decoration:none;border:1px solid var(--border);transition:background .2s,color .2s}
.site .art-cat:hover{background:var(--surface-3);color:var(--accent-bright)}
.site .art-title{font-size:2.25rem;line-height:1.15;font-weight:800;color:var(--heading);letter-spacing:-.02em}
@media(min-width:640px){.site .art-title{font-size:2.75rem}}

/* ---- Inhaltsverzeichnis ---- */
.site .art-toc{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-2xl);
  padding:1.5rem 2rem;margin-bottom:2rem}
.site .art-toc-title{font-size:.8125rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem}
.site .art-toc-title svg{width:1rem;height:1rem}
/* Waidwart-Stil: durchgehende linke Fuehrungslinie, aktiver Abschnitt mit farbigem Balken + Text
   (kein Chip-Hintergrund). Lange Verzeichnisse scrollen statt die Seite nach unten zu druecken. */
.site .art-toc-list{list-style:none;display:flex;flex-direction:column;gap:0;
  max-height:15rem;overflow-y:auto;padding-right:.25rem;
  scrollbar-width:thin;scrollbar-color:var(--border) transparent}
.site .art-toc-list::-webkit-scrollbar{width:6px}
.site .art-toc-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:var(--r-xs)}
.site .art-toc-list a{display:block;border-left:2px solid var(--border);
  color:var(--text-dim);font-size:.9375rem;font-weight:500;text-decoration:none;
  padding:.45rem 0 .45rem 1rem;line-height:1.4;transition:color .15s,border-color .15s}
.site .art-toc-list a:hover{color:var(--text)}
.site .art-toc-list a.active{border-left-color:var(--accent);color:var(--accent);font-weight:700}
/* Sticky-Sidebar-Variante (Desktop): die Seitenspalte (.art-side) ist bereits sticky. */
.site .art-toc--side{padding:1.25rem 1.375rem 1.25rem 1.5rem;margin-bottom:0}
/* Platz fuer die CTA-Karte unter dem TOC lassen, damit beides in die sticky Spalte passt. */
.site .art-toc--side .art-toc-list{max-height:calc(100vh - 24rem)}
/* Sidebar-TOC nur am Desktop, Inline-TOC nur mobil (dort stapelt die Seitenspalte unter den Text). */
@media(max-width:1023px){.site .art-toc--side{display:none}}
@media(min-width:1024px){.site .art-toc--inline{display:none}}

/* ---- Seitenspalte ---- */
.site .art-side{display:flex;flex-direction:column;gap:1.25rem;position:sticky;top:5rem}
.site .art-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);padding:1.5rem}
.site .art-card h2{font-size:.875rem;font-weight:700;color:var(--heading);text-transform:uppercase;
  letter-spacing:.05em;margin-bottom:1rem}

.site .art-related{display:flex;flex-direction:column;gap:.875rem}
.site .art-related a{display:block;text-decoration:none;padding:.625rem;border-radius:var(--r-sm);transition:background .2s}
.site .art-related a:hover{background:var(--chip-bg)}
.site .art-related-title{font-size:.875rem;font-weight:600;color:var(--text);line-height:1.4}
.site .art-related-date{font-size:.6875rem;color:var(--text-mute);margin-top:.25rem}

/* ---- Handlungsaufforderung in der Seitenspalte ---- */
.site .art-cta{background:var(--cta-bg);border:1px solid var(--cta-border)}
.site .art-cta h2{color:var(--cta-fg);opacity:.82}
.site .art-cta p{color:var(--cta-fg);opacity:.9;font-size:.9375rem;line-height:1.5;margin-bottom:1rem}
/* Stil wie der Header-Button (.btn-primary): Gold-Verlauf, kleinere Schrift, theme-aware
   (im Light-Theme liefert --btn-primary-bg automatisch Amber-700). */
.site .art-cta-btn{display:block;text-align:center;background:var(--btn-primary-bg);color:var(--on-accent);
  padding:.75rem 1rem;border-radius:var(--r-md);font-weight:700;font-size:.9rem;text-decoration:none;
  box-shadow:var(--btn-primary-shadow);transition:transform .18s,box-shadow .28s}
.site .art-cta-btn:hover{transform:translateY(-2px);box-shadow:var(--btn-primary-shadow-hover)}

/* Kontextuelles Werkzeug in der Seitenspalte (z. B. Varroa-Rechner) */
.site .art-tool{border-color:var(--border-strong)}
.site .art-tool-eyebrow{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin:0 0 .35rem}

/* Weitere Artikel / Glossar unter dem Beitrag (die rechte Spalte gehoert dem Sticky-TOC + CTA).
   Related als kompakte Karten-Reihe (fuellt die Breite, wird nicht zur riesigen Leerbox),
   Glossar-Begriffe als Chips. */
.site .art-more{margin-bottom:2rem}
.site .art-more-head{font-size:.8125rem;font-weight:700;color:var(--text-dim);text-transform:uppercase;
  letter-spacing:.06em;margin-bottom:.875rem}
.site .art-more-grid{display:flex;flex-wrap:wrap;gap:1rem}
.site .art-more-item{flex:1 1 15rem;max-width:26rem;display:flex;flex-direction:column;gap:.35rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:.95rem 1.125rem;
  text-decoration:none;transition:border-color .2s,transform .2s,background .2s}
.site .art-more-item:hover{border-color:var(--accent);transform:translateY(-2px);background:var(--chip-bg)}
.site .art-more-item-title{font-size:.9375rem;font-weight:600;color:var(--text);line-height:1.35}
.site .art-more-item-date{font-size:.6875rem;color:var(--text-mute)}
.site .art-more-chips{display:flex;flex-wrap:wrap;gap:.5rem}
.site .art-more-chip{display:inline-flex;padding:.4rem .85rem;border-radius:var(--r-full);background:var(--chip-bg);
  border:1px solid var(--border);color:var(--accent);font-size:.85rem;font-weight:600;text-decoration:none;
  transition:border-color .2s,color .2s}
.site .art-more-chip:hover{border-color:var(--accent);color:var(--accent-bright)}

/* ---- Auf schmalen Bildschirmen traegt der Artikel allein ---- */
@media(max-width:1023px){
  .site .art-side{position:static}
}

/* ---------- components/site/hero.html.twig — Kopfbereich mit Verlauf, Kugeln und optionalem Bild ---------- */
.site .hero-page{position:relative;overflow:hidden;text-align:center;
  padding:84px 24px 76px;margin-bottom:56px;
  background:var(--hero-bg);border-bottom:1px solid var(--border)}
/* `layout_public` haelt mit `.page{padding-top:70px}` die feste Kopfleiste frei.
   Der Hero soll aber DARUNTER durchlaufen — die Leiste ist durchscheinend, und
   ein flacher Streifen ueber dem Bild sieht aus wie ein Fehler. Also zieht er
   sich in das Polster hinein und holt die Hoehe oben wieder drauf.
   Kein `:first-child`: das Partial gibt vor dem <header> seinen <style> aus. */
.site .page > .hero-page{margin-top:-70px;padding-top:154px}
.site .hero-page-bg{position:absolute;inset:0;z-index:0;background-image:var(--hero-img);
  background-size:cover;background-position:center;background-repeat:no-repeat}
.site .hero-page-veil{position:absolute;inset:0;z-index:0;pointer-events:none;background:var(--hero-veil)}
.site .hero-page-orbs{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* Liegt ein Bild darunter, wuerden die Kugeln es zumatschen. */
.site .hero-page--image .hero-page-orbs{opacity:.3}
.site .hero-page--image .hero-page-grid{opacity:.022}
.site .hero-page-orbs i{position:absolute;display:block;border-radius:var(--r-full)}
.site .hero-page-orbs i:nth-child(1){width:600px;height:600px;top:-10%;left:-5%;filter:blur(120px);
  background:radial-gradient(circle,var(--orb-a),transparent 70%);
  animation:apiara-orb1 20s ease-in-out infinite}
.site .hero-page-orbs i:nth-child(2){width:500px;height:500px;top:20%;right:-10%;filter:blur(100px);
  background:radial-gradient(circle,var(--orb-b),transparent 70%);
  animation:apiara-orb2 25s ease-in-out infinite}
.site .hero-page-orbs i:nth-child(3){width:700px;height:700px;bottom:-20%;left:30%;filter:blur(140px);
  background:radial-gradient(circle,var(--orb-c),transparent 70%);
  animation:apiara-orb3 18s ease-in-out infinite}
/* Wabenmuster statt eines quadratischen Rasters — dezent, nur als Textur.
   Als Maske, nicht als Bild: so nimmt es `--heading` an und dreht mit dem Theme.
   Die Kachel ist nahtlos, weil die vier angeschnittenen Eckwaben sich beim
   Wiederholen zu ganzen Waben ergaenzen. */
.site .hero-page-grid{position:absolute;inset:0;pointer-events:none;opacity:.035;
  background-color:var(--heading);
  -webkit-mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48.00' height='27.71' viewBox='0 0 48.00 27.71'><g fill='none' stroke='black' stroke-width='1'><path d='M-16.00 0.00L-8.00 -13.86L8.00 -13.86L16.00 0.00L8.00 13.86L-8.00 13.86Z'/><path d='M-16.00 27.71L-8.00 13.86L8.00 13.86L16.00 27.71L8.00 41.57L-8.00 41.57Z'/><path d='M32.00 0.00L40.00 -13.86L56.00 -13.86L64.00 0.00L56.00 13.86L40.00 13.86Z'/><path d='M32.00 27.71L40.00 13.86L56.00 13.86L64.00 27.71L56.00 41.57L40.00 41.57Z'/><path d='M8.00 13.86L16.00 0.00L32.00 0.00L40.00 13.86L32.00 27.71L16.00 27.71Z'/></g></svg>");mask-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48.00' height='27.71' viewBox='0 0 48.00 27.71'><g fill='none' stroke='black' stroke-width='1'><path d='M-16.00 0.00L-8.00 -13.86L8.00 -13.86L16.00 0.00L8.00 13.86L-8.00 13.86Z'/><path d='M-16.00 27.71L-8.00 13.86L8.00 13.86L16.00 27.71L8.00 41.57L-8.00 41.57Z'/><path d='M32.00 0.00L40.00 -13.86L56.00 -13.86L64.00 0.00L56.00 13.86L40.00 13.86Z'/><path d='M32.00 27.71L40.00 13.86L56.00 13.86L64.00 27.71L56.00 41.57L40.00 41.57Z'/><path d='M8.00 13.86L16.00 0.00L32.00 0.00L40.00 13.86L32.00 27.71L16.00 27.71Z'/></g></svg>");
  -webkit-mask-size:48px 27.71px;mask-size:48px 27.71px;
  -webkit-mask-repeat:repeat;mask-repeat:repeat}
.site .hero-page-in{position:relative;z-index:1;max-width:48rem;margin:0 auto}
.site .hero-page h1{font-size:clamp(2.25rem,5.2vw,4.25rem);font-weight:800;line-height:1.1;
  letter-spacing:-.03em;color:var(--heading);margin-bottom:20px}
.site .hero-page h1 .l2{display:block}
.site .hero-page .lead{font-size:clamp(1.05rem,1.8vw,1.25rem);line-height:1.65;
  color:var(--text-dim);max-width:42rem;margin:0 auto}
.site .hero-page .pg-crumb{justify-content:center;margin-bottom:20px}
@media(max-width:640px){.site .hero-page{padding:64px 20px 56px;margin-bottom:40px}}