/* ==========================================================================
   rundum.dog Design-Paket 2026-10-01 · Entwurf B (mutiger)
   Theme-Modul rundum-design-b (functions.php, nach rundum-system + rundum-footer-box).
   Kein :not([class*=...]) (WP-Rocket-RUCSS), kein !important, nur Theme-Tokens.
   Bestand bleibt: Creme-Flaechen, Terracotta #9A5526 / #944F22, Inter.
   Markup: front-page.php, inc/buehne-anker.php, single-wiki.php, taxonomy-thema.php.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 · Tokens. Warme Grautoene von A uebernommen (gemessen, Kontrast >= Bestand).
       Lesemass: ein Token, 58ch (wie Entwurf A, rund 70 Zeichen/Zeile in Inter).
       Neu nur Struktur-Tokens fuer die drei Kartenebenen, keine neue Farbe.
   -------------------------------------------------------------------------- */
:root {
  --rd-text: #1C1815;
  --rd-text-secondary: #5C5753;
  --rd-text-tertiary: #696460;
  --rd-measure: 58ch;

  --rdb-e1-bg: var(--rd-bg-warm);      /* Ebene 1 Primaer: warme Flaeche  */
  --rdb-e1-radius: 20px;
  --rdb-e2-bg: var(--rd-bg-soft);      /* Ebene 2 Sekundaer: weiss, Linie  */
  --rdb-e2-radius: 12px;
  --rdb-e3-line: var(--rd-border);     /* Ebene 3 Liste: nur Haarlinie     */
  --rdb-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

[data-rd-kanton-hub],
.rd-standort[data-level="2"] {
  --rd-read: var(--rd-measure);
}

.rd-thema__fulltext-body > :is(p, ul, ol, blockquote, h2, h3, h4),
.rd-standort__fulltext-body > :is(p, ul, ol, blockquote, h2, h3, h4),
.rd-lead,
.rd-wesen__txt,
[data-rd-kanton-hub] .qa p {
  max-width: var(--rd-measure);
}

/* --------------------------------------------------------------------------
   1 · Fokus: ein gestalteter Ring ueberall (heute nur auf /wo/).
   -------------------------------------------------------------------------- */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--rd-accent-strong);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   2 · Kartenhierarchie, drei Ebenen. Kein Anheben, kein Schatten auf KEINER
       Ebene: die Ebene erkennt man an Flaeche und Groesse, nicht an Bewegung.
   -------------------------------------------------------------------------- */

/* Ebene 1 · Primaer: warme Flaeche, grosser Radius, kein Rahmen, kein Schatten.
   Startseite: Rasse-Anker + Cartoon (Simulation) und die drei neuesten Artikel.
   Artikel/Wiki: Querachse. Rasse: aehnliche Rassen. Archiv: Lead-Karte (nur Seite 1,
   Klasse aus php/taxonomy-thema.php.patch). */
.rd-home__latest-card,
.rd-beitrag__cross-card,
.rd-aehnliche-rassen__card,
.rd-thema__card--featured {
  background: var(--rdb-e1-bg);
  border: 0;
  border-radius: var(--rdb-e1-radius);
  box-shadow: none;
  transform: none;
}
.rd-home__latest-card {
  padding: 12px 12px 20px;
}
.rd-home__latest-body {
  padding: 0 8px;
}

/* Ebene 2 · Sekundaer: weiss, 1px Linie, 12px. Hover = Linie in Akzent. */
.rd-thema__card,
.rd-thema__category-card,
.rd-beitrag__magazin-card,
.rd-home__theme-card,
[data-rd-kanton-hub] .rd-pcard,
[data-rd-kanton-hub] .rd-kpi__link,
[data-rd-kanton-hub] .rd-kpi__item,
.rd-standort[data-level="2"] .rd-pcard {
  box-shadow: none;
  border-radius: var(--rdb-e2-radius);
}

/* Ebene 3 · Liste: keine Karte. Zeile mit Haarlinie oben, Titel + eine Metazeile. */
.rd-thema__related-grid {
  gap: 0 32px;
}
.rd-thema__related-card,
.rd-home__nearby-card,
[data-rd-kanton-hub] .rd-citycard {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--rdb-e3-line);
  border-radius: 0;
  box-shadow: none;
  padding: 14px 0 16px;
}

/* Hover/Fokus aller Ebenen: Anheben und Schatten aus. */
.rd-card:hover,
.rd-pfad-hub:hover,
.rd-home__theme-card:hover,
.rd-home__latest-card:hover,
.rd-home__nearby-card:hover,
.rd-beitrag__cross-card:hover,
.rd-beitrag__magazin-card:hover,
.rd-aehnliche-rassen__card:hover,
.rd-thema__card:hover,
.rd-thema__category-card:hover,
.rd-thema__related-card:hover,
.rd-content-hub li a:hover,
[data-rd-kanton-hub] .rd-pcard:hover,
.rd-standort[data-level="2"] .rd-pcard:hover,
[data-rd-kanton-hub] .rd-citycard:hover,
[data-rd-kanton-hub] .rd-kpi__link:hover {
  transform: none;
  box-shadow: none;
}
[data-rd-kanton-hub] .rd-pcard:hover .rd-pcard__img,
.rd-standort[data-level="2"] .rd-pcard:hover .rd-pcard__img {
  transform: none;
}

/* Rueckmeldung je Ebene */
.rd-home__theme-card:hover,
.rd-thema__card:hover,
.rd-thema__category-card:hover,
.rd-beitrag__magazin-card:hover,
[data-rd-kanton-hub] .rd-pcard:hover,
.rd-standort[data-level="2"] .rd-pcard:hover,
[data-rd-kanton-hub] .rd-kpi__link:hover {
  border-color: var(--rd-accent);
}
.rd-home__latest-card:hover .rd-home__latest-title,
.rd-thema__related-card:hover .rd-thema__related-card-title,
.rd-aehnliche-rassen__card:hover,
.rd-beitrag__cross-card:hover,
.rd-thema__card--featured:hover .rd-thema__card-title {
  color: var(--rd-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.rd-thema__card--featured:hover {
  border: 0;
}

/* Archiv: die erste Karte fuehrt (zwei Spalten breit, groesserer Titel). */
@media (min-width: 980px) {
  .rd-thema__card--featured {
    grid-column: span 2; /* eine Zeile hoch: span 2 streckte die Karte auf ~1000 px mit Leerraum */
  }
  .rd-thema__card--featured .rd-thema__card-body {
    padding: 32px 36px;
  }
  .rd-thema__card--featured .rd-thema__card-title {
    font-size: var(--rd-fs-xl);
    line-height: 1.15;
    letter-spacing: -0.02em;
    max-width: 24ch;
  }
}
/* Lead-Karte: Excerpt (existiert im Template) auf zwei Zeilen. */
.rd-thema__card--featured .rd-thema__card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  max-width: var(--rd-measure);
}

/* Nachbar der Lead-Karte: traegt den laengeren Teaser (#2057). Unter 980 px steht
   er einspaltig ohne Hoehenzwang → 3 Zeilen; daneben fuellt er die Hoehe, Kappe 10. */
.rd-thema__card--neben .rd-thema__card-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
@media (min-width: 980px) {
  .rd-thema__card--neben .rd-thema__card-excerpt {
    -webkit-line-clamp: 10;
    line-clamp: 10;
  }
}

/* --------------------------------------------------------------------------
   3 · Pfeile, Regel aus Entwurf A, nur CSS: weg, wo die Form schon «klickbar»
       sagt (Karte, Kachel). Bleiben: nackte Textlinks (.rd-sec-more,
       «Alle Artikel») und Pagination. Nur aria-hidden-Spans, kein Textverlust.
   -------------------------------------------------------------------------- */
.rd-mega-menu__thema-cta,
.rd-thema__related-card-arrow,
.rd-home__nearby-arrow,
.rdb-buehne .rd-pfad-hub__arrow,
[data-rd-kanton-hub] .rd-pcard__go,
.rd-standort[data-level="2"] .rd-pcard__go,
[data-rd-kanton-hub] .rd-citycard__go {
  display: none;
}

/* Versalien-Kicker leiser: gemischte Schreibung statt Sperrsatz-Versal.
   (IBM Plex Mono ist als Token da, aber nicht geladen: Fallback waere Serif.) */
.rd-thema__card-eyebrow,
.rd-home__latest-tag,
.rdb-buehne .rd-hero-magazin__eyebrow,
.rd-beitrag__hero-eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--rd-font-ui);
  font-weight: 600;
  font-size: 13px;
}

/* --------------------------------------------------------------------------
   4 · Startseite: Buehne statt Kaskade. Erster Bildschirm = H1 + Suche +
       vier Wege (Ebene 3) + zwei Identitaets-Anker (Rasse, Cartoon).
       Markup: php/front-page.php.patch + php/inc-buehne-anker.php.patch
       (entwurf-b-dom.js spiegelt es nur fuer die Vorschau).
   -------------------------------------------------------------------------- */
.rdb-buehne {
  background: var(--rd-bg);
  padding: 24px 0 40px;
}
.rdb-buehne__grid {
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr);
}
/* Mobil: Rasse-Anker direkt nach der Suche, die vier Wege danach, Cartoon zuletzt. */
@media (max-width: 899px) {
  .rdb-buehne__einstieg {
    display: contents;
  }
  .rdb-buehne .rd-hero-magazin { order: 1; }
  .rdb-buehne .rd-home__search { order: 2; margin-top: 0; }
  .rdb-anker--rasse { order: 3; }
  .rdb-buehne .rd-pfad-hubs { order: 4; margin-top: 0; }
  .rdb-anker--cartoon { order: 5; }
  .rdb-anker--rasse .rdb-anker__bild { aspect-ratio: 16 / 10; }
}
@media (min-width: 900px) {
  .rdb-buehne__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr);
    align-items: start;
    gap: 32px;
  }
  /* Anker nach Inhalt hoch: stretch liess ~330 px Leerraum (Beleg nachher-v2-home-1280). */
  .rdb-anker {
    align-self: start;
  }
  /* Ohne Anker (EN, leerer Pool): Einstieg allein, eine Spalte. */
  .rdb-buehne--ohne-anker .rdb-buehne__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
.rdb-buehne .rd-hero-magazin,
.rdb-buehne .rd-home__search {
  padding: 0;
  background: none;
}
.rdb-buehne__einstieg .rd-container {
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}
.rdb-buehne .rd-hero-magazin__headline {
  font-size: clamp(1.9rem, 1.2rem + 2.4vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  max-width: 16ch;
}
.rdb-buehne .rd-hero-magazin__sub {
  max-width: 40ch;
}
.rdb-buehne .rd-home__search {
  margin-top: 20px;
}

/* Die vier Wege als Ebene-3-Liste: Haarlinien, kein Kasten, kein Pfeil. */
.rdb-buehne .rd-pfad-hubs {
  margin-top: 24px;
  padding: 0;
  background: none;
}
.rdb-buehne .rd-pfad-hubs__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
@media (min-width: 560px) and (max-width: 899px) {
  .rdb-buehne .rd-pfad-hubs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}
.rdb-buehne .rd-pfad-hub {
  display: grid;
  grid-template-columns: 9.5em minmax(0, 1fr);
  align-items: baseline;
  gap: 2px 16px;
  padding: 12px 0;
  min-height: 44px;
  background: none;
  border: 0;
  border-top: 1px solid var(--rdb-e3-line);
  border-radius: 0;
  box-shadow: none;
}
.rdb-buehne .rd-pfad-hub__eyebrow {
  display: none;
}
.rdb-buehne .rd-pfad-hub__label {
  font-size: var(--rd-fs-base);
  font-weight: 650;
  /* Ohne Hover als Link lesbar: Akzent + Unterstrich. 5.93:1 auf --rd-bg. */
  color: var(--rd-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.rdb-buehne .rd-pfad-hub__sub {
  min-width: 0;
  overflow-wrap: anywhere;
  hyphens: auto;
  font-size: var(--rd-fs-sm);
  color: var(--rd-text-secondary);
  line-height: 1.4;
}
.rdb-buehne .rd-pfad-hub:hover .rd-pfad-hub__label {
  text-decoration-thickness: 2px;
}

/* Anker (Ebene 1): Rasse und Cartoon. */
.rdb-anker {
  display: flex;
  flex-direction: column;
  background: var(--rdb-e1-bg);
  border-radius: var(--rdb-e1-radius);
  padding: 12px 12px 20px;
  text-decoration: none;
  color: var(--rd-text);
}
.rdb-anker__bild {
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  aspect-ratio: 4 / 3;
  background: var(--rd-bg-alt);
}
.rdb-anker--cartoon .rdb-anker__bild {
  aspect-ratio: 1 / 1;
  background: var(--rd-bg-soft);
}
.rdb-anker__bild img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.rdb-anker--cartoon .rdb-anker__bild img {
  object-fit: contain;
}
.rdb-anker__text {
  padding: 16px 8px 0;
}
.rdb-anker__label {
  font-family: var(--rd-font-ui);
  font-size: 13px;
  font-weight: 600;
  color: var(--rd-text-secondary);
  margin: 0 0 6px;
}
.rdb-anker__titel {
  font-family: var(--rd-font-display);
  font-size: var(--rd-fs-lg);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
}
.rdb-anker--rasse .rdb-anker__titel {
  font-size: var(--rd-fs-xl);
}
.rdb-anker__satz {
  font-size: var(--rd-fs-sm);
  line-height: 1.5;
  color: var(--rd-text-secondary);
  margin: 0;
  max-width: 42ch;
}
.rdb-anker:hover .rdb-anker__titel {
  color: var(--rd-accent-strong);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

/* Der eine Motion-Akzent: Bild atmet im Rahmen. Nur transform, nur ohne
   reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .rdb-anker__bild img {
    transition: transform 420ms var(--rdb-ease-out);
  }
  .rdb-anker:hover .rdb-anker__bild img {
    transform: scale(1.03);
  }
}

/* Quicklinks «Gerade gefragt» stehen nach der Buehne (dom.js verschiebt sie). */
.rdb-nachbuehne {
  padding: 8px 0 24px;
}

/* Footer-Cartoon bleibt, wird aber zur Fussnote (Bild steht jetzt oben). */
.rd-cartoon-woche--footer .rd-cartoon-woche__card img {
  max-width: 120px;
}

/* --------------------------------------------------------------------------
   5 · Wiki-Kopf: Lexikon-Eintrag statt Magazin-Hero.
       Begriff gross, Definition als Lead im Kopf, Rassen dazu als Wege,
       KI-Symbolbild nur noch als Seitenplatte.
   -------------------------------------------------------------------------- */
.rd-wiki .rd-beitrag__hero-grid {
  align-items: start;
}
@media (min-width: 768px) {
  .rd-wiki .rd-beitrag__hero-grid {
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 48px;
  }
}
.rd-wiki .rd-beitrag__hero-title {
  font-size: clamp(2.4rem, 1.4rem + 4vw, 4.25rem);
  line-height: 1;
  letter-spacing: -0.035em;
  margin-bottom: 20px;
}
.rd-wiki .rd-beitrag__hero-eyebrow {
  color: var(--rd-text-secondary);
  display: inline-block;
  margin-bottom: 14px;
}
.rdb-wiki-lead {
  font-family: var(--rd-font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--rd-text);
  max-width: 34ch;
  margin: 0 0 20px;
}
.rd-wiki .rd-beitrag__hero-image {
  border-radius: var(--rdb-e2-radius);
  overflow: hidden;
  background: var(--rd-bg-alt);
}
.rd-wiki .rd-beitrag__hero-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
  height: auto;
}
.rd-wiki .rd-beitrag__hero-image .rd-image-attribution {
  font-family: var(--rd-font-ui);
  font-size: var(--rd-fs-xs);
  color: var(--rd-text-secondary);
}
.rdb-wiki-rassen {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  padding-top: 14px;
  border-top: 1px solid var(--rdb-e3-line);
  max-width: 40rem;
  font-size: var(--rd-fs-sm);
}
.rdb-wiki-rassen__label {
  font-family: var(--rd-font-ui);
  font-size: var(--rd-fs-xs);
  color: var(--rd-text-secondary);
  flex-basis: 100%;
}
.rdb-wiki-rassen a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  /* #55743F ergab 4.57:1 auf --rd-bg-alt (Hero), zu knapp: accent-strong 5.32:1. */
  color: var(--rd-accent-strong);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.rdb-wiki-rassen a:hover {
  text-decoration-thickness: 2px;
}

/* Folgeseiten-Block (inc/folgeseiten.php): bis zu drei Wege weiter, nach dem ersten
   Abschnitt auf Wiki- und Rasse-Einzelseiten. Ebene 3: Haarlinien, keine Karte.
   .rd-folge .rd-folge__link (0,2,0) schlaegt .rd-beitrag__content a (0,1,1). */
.rd-folge {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 0 24px;
  margin: 32px 0;
  padding: 12px 0 4px;
  border-top: 1px solid var(--rdb-e3-line);
  border-bottom: 1px solid var(--rdb-e3-line);
}
.rd-folge .rd-folge__label {
  grid-column: 1 / -1;
  font-family: var(--rd-font-ui);
  font-size: var(--rd-fs-xs);
  color: var(--rd-text-secondary);
}
.rd-folge .rd-folge__link {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 56px;
  padding: 6px 0;
  color: var(--rd-text);
  text-decoration: none;
}
.rd-folge .rd-folge__art {
  font-family: var(--rd-font-ui);
  font-size: var(--rd-fs-xs);
  color: var(--rd-text-secondary);
}
.rd-folge .rd-folge__titel {
  color: var(--rd-accent-strong);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
.rd-folge .rd-folge__link:hover .rd-folge__titel,
.rd-folge .rd-folge__link:focus-visible .rd-folge__titel {
  text-decoration-thickness: 2px;
}
@media (max-width: 767px) {
  .rd-wiki .rd-beitrag__hero-image {
    max-width: 100%;
  }
  .rd-wiki .rd-beitrag__hero-image img {
    aspect-ratio: 16 / 9;
  }
}