/* Content-Elemente – einheitliches Styling im Seitenstil (erdig/warm). */
.ce { margin: 0 auto 1.6rem; max-width: 68rem; }

/* Zusätzlicher, frei editierbarer Block-Bereich unter dem generierten Inhalt
   der Detailseiten. Nur sichtbar, wenn Blöcke vorhanden sind. */
/* Collections in Grid-Containern: die .neos-contentcollection-Hülle darf kein
   eigenes Grid-Item sein, sonst stapeln sich alle Elemente in einer Spalte. */
.wege__grid > .neos-contentcollection,
.habitat-grid > .neos-contentcollection,
.steps > .neos-contentcollection,
.prizes > .neos-contentcollection,
.plaques-steps__list > .neos-contentcollection,
.plaques-split__cards > .neos-contentcollection { display: contents; }
.steps .ce, .prizes .ce, .plaques-steps__list .ce, .plaques-split__cards .ce { max-width: none; margin: 0; }
/* Die .ce-Basis (max-width + margin:auto) würde die Grid-Zellen ungleich breit
   machen – im Grid zurücksetzen, damit alle Karten die Zellbreite füllen. */
.wege__grid .ce, .habitat-grid .ce { max-width: none; margin: 0; width: 100%; }
a.ce-habitat { text-decoration: none; }

/* Preis-Karte (Content.PrizeCard) + Kennzahl-Karte (Content.StatCard) */
.ce-prize { background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); padding: 1.6rem; text-align: center; }
.ce-prize__icon { font-size: 2.4rem; line-height: 1; }
.ce-prize__title { font-family: var(--ts-font-head); font-weight: 600; margin: .4rem 0 .3rem; color: var(--ts-ink); }
.ce-prize__text { color: var(--ts-muted); line-height: 1.6; }
.ce-stat { display: flex; flex-direction: column; gap: .2rem; text-align: center; padding: 1rem; }
.ce-stat__value { font-family: var(--ts-font-head); font-size: 2.2rem; font-weight: 600; color: var(--ts-accent); }
.ce-stat__label { font-weight: 600; color: var(--ts-ink); }
.ce-stat__items { color: var(--ts-muted); font-size: .9rem; }

/* Farbige Lebensraum-Karte (Content.HabitatCard) – Farbe + Pfote editierbar. */
.ce-habitat {
    position: relative; border-radius: 12px; padding: 1.3rem 1.2rem; min-height: 96px;
    display: flex; align-items: flex-end; color: #fff; font-weight: 700;
    /* Kräftiger + zum Text hin deutlich dunkler → Weiß bleibt auf allen (auch hellen) Farben lesbar */
    background: linear-gradient(155deg, color-mix(in srgb, var(--c) 88%, #000) 0%, color-mix(in srgb, var(--c) 50%, #000) 100%);
    box-shadow: var(--ts-shadow); overflow: hidden;
}
.ce-habitat::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.30) 0%, rgba(0,0,0,0) 55%); pointer-events: none; }
.ce-habitat__paw { position: absolute; top: .7rem; right: .8rem; font-size: 1.4rem; opacity: .7; z-index: 1; }
.ce-habitat__label { position: relative; z-index: 1; text-shadow: 0 1px 4px rgba(0,0,0,.55); }

.ts-extra-blocks { max-width: 72rem; margin: 0 auto; padding: 0 1.25rem; }
.ts-extra-blocks:not(:empty) { margin-top: 2.5rem; }
.ts-extra-blocks .neos-contentcollection:empty { display: none; }
.ce--narrow { max-width: 44rem; }
.ce--wide { max-width: 82rem; }
.ce--center { text-align: center; }
.ce-eyebrow { font-size: .82rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ts-accent); margin: 0 0 .4rem; }

.ce-heading__title { font-family: var(--ts-font-head); font-weight: 600; line-height: 1.1; color: var(--ts-ink); margin: 0; }
.ce-heading__title { font-size: clamp(1.8rem, 4vw, 2.8rem); }
.ce-heading__title--h3 { font-size: clamp(1.4rem, 3vw, 1.9rem); }
.ce-heading__title--h4 { font-size: clamp(1.15rem, 2.4vw, 1.4rem); }

.ce-text { color: var(--ts-ink); line-height: 1.7; }
.ce-text p { margin: 0 0 1rem; }
.ce-text a { color: var(--ts-accent); }

.ce-image { max-width: 68rem; }
.ce-image img { width: 100%; height: auto; border-radius: var(--ts-radius); display: block; }
.ce-image__cap { margin: .5rem 0 0; font-size: .85rem; color: var(--ts-muted); }

.ce-button { margin-bottom: 1.4rem; }

.ce-columns { display: grid; gap: 1.6rem; }
.ce-columns--2 { grid-template-columns: repeat(2, 1fr); }
.ce-columns--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .ce-columns--2, .ce-columns--3 { grid-template-columns: 1fr; } }

.ce-hero { max-width: 60rem; padding: 1rem 0 1.5rem; }
.ce-hero__title { font-family: var(--ts-font-head); font-weight: 600; font-size: clamp(2.2rem, 6vw, 4rem); line-height: 1.05; color: var(--ts-ink); margin: .3rem 0 1rem; }
.ce-hero__lead { font-size: clamp(1.05rem, 2vw, 1.3rem); color: var(--ts-muted); line-height: 1.6; max-width: 40rem; margin: 0 0 1.4rem; }
.ce-hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.ce-sectionhead { max-width: 46rem; margin-bottom: 1.4rem; }
.ce-sectionhead__lead { color: var(--ts-muted); line-height: 1.6; }

.ce-card { background: var(--ts-surface); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); box-shadow: var(--ts-shadow); padding: 1.6rem; display: flex; flex-direction: column; gap: .5rem; height: 100%; }
.ce-card__icon { font-size: 2rem; line-height: 1; }
.ce-card__img { width: 3.2rem; height: 3.2rem; object-fit: contain; margin-bottom: .3rem; }
.hero__img { width: min(100%, 24rem); height: auto; display: block; margin: 0 auto; border-radius: 50%; box-shadow: var(--ts-shadow); }
.ce-card__title { font-family: var(--ts-font-head); font-weight: 600; font-size: 1.3rem; margin: 0; color: var(--ts-ink); }
.ce-card__text { color: var(--ts-muted); line-height: 1.6; flex: 1; }
.ce-card__cta { margin-top: .3rem; color: var(--ts-accent); font-weight: 600; text-decoration: none; }
.ce-card__cta:hover { text-decoration: underline; }

.ce-step { position: relative; padding-left: 3.4rem; }
.ce-step__num { position: absolute; left: 0; top: 0; width: 2.4rem; height: 2.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--ts-accent); color: var(--ts-accent-ink); font-family: var(--ts-font-head); font-weight: 700; }
.ce-step__title { font-family: var(--ts-font-head); font-weight: 600; font-size: 1.2rem; margin: .2rem 0 .3rem; color: var(--ts-ink); }
.ce-step__text { color: var(--ts-muted); line-height: 1.6; }

.ce-cta { max-width: 60rem; text-align: center; background: color-mix(in srgb, var(--ts-accent) 10%, var(--ts-surface)); border: 1px solid var(--ts-line); border-radius: var(--ts-radius); padding: clamp(2rem, 5vw, 3.5rem); }
.ce-cta__title { font-family: var(--ts-font-head); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem); margin: 0 0 .5rem; color: var(--ts-ink); }
.ce-cta__text { color: var(--ts-muted); margin: 0 auto 1.3rem; max-width: 34rem; line-height: 1.6; }

/* Eintritts-Preiszeilen (Content.PriceRow) – als saubere Preistabelle. */
.zoo__admission-rows .neos-contentcollection { display: block; }
.zoo__admission-rows .ce { max-width: none; margin: 0; }
.ce-pricerow { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid var(--ts-line); }
.ce-pricerow:last-child { border-bottom: 0; }
.ce-pricerow__cat { font-weight: 600; color: var(--ts-ink); }
.ce-pricerow__note { display: block; font-weight: 400; font-size: .82rem; color: var(--ts-muted); }
.ce-pricerow__amount { font-variant-numeric: tabular-nums; color: var(--ts-ink); white-space: nowrap; }

/* Leere Collection NUR im Backend sichtbar machen (Platzhalter). [data-ts-edit]
   wird nur im Neos-Backend am Body gesetzt → im Frontend kein Platzhalter. */
[data-ts-edit] .neos-contentcollection:empty::after { content: 'Inhalt hier einfügen …'; display: block; padding: 1rem; color: #999; border: 1px dashed var(--ts-line); border-radius: 8px; text-align: center; }

/* ---- Style-/Varianten-System (Trittsiegel.Style.classes) ---- */
.ce--bg-surface, .ce--bg-accent, .ce--bg-muted { padding: clamp(1.2rem, 3vw, 2rem); border-radius: var(--ts-radius); }
.ce--bg-surface { background: var(--ts-surface); border: 1px solid var(--ts-line); }
.ce--bg-accent  { background: color-mix(in srgb, var(--ts-accent) 12%, var(--ts-surface)); }
.ce--bg-muted   { background: var(--ts-bg); }
/* Erde/Braun – warmes Vollbreiten-Band (v. a. für ganze Abschnitte). Überschriften/Texte hell. */
.ce--bg-erde { background: linear-gradient(165deg, #4c3b27 0%, #35281a 100%); color: #f2e8d6; }
.ce--bg-erde .ce-section__title, .ce--bg-erde .ce-sectionhead__title, .ce--bg-erde .section-title { color: #f6efdd; }
.ce--bg-erde .ce-eyebrow, .ce--bg-erde .section-eyebrow { color: #dcc7a0; }
.ce--bg-erde .ce-section__lead, .ce--bg-erde .ce-sectionhead__lead, .ce--bg-erde .section-lead { color: rgba(246,239,221,.82); }
.ce--pt-none { padding-top: 0 !important; } .ce--pt-s { padding-top: 1rem; } .ce--pt-m { padding-top: 2rem; } .ce--pt-l { padding-top: clamp(2.5rem,6vw,4rem); }
.ce--pb-none { padding-bottom: 0 !important; } .ce--pb-s { padding-bottom: 1rem; } .ce--pb-m { padding-bottom: 2rem; } .ce--pb-l { padding-bottom: clamp(2.5rem,6vw,4rem); }
/* Farbwelt (habitat-*) auf ein Element angewandt: Tönung sichtbar machen. */
[class*="habitat-"].ce { background: var(--ts-bg); color: var(--ts-ink); }

/* ---- Phase 2: Karten-Raster, Medium, Galerie ---- */
.ce-cardgrid { display: grid; gap: 1.5rem; }
.ce-cardgrid--2 { grid-template-columns: repeat(2, 1fr); }
.ce-cardgrid--3 { grid-template-columns: repeat(3, 1fr); }
.ce-cardgrid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 820px) { .ce-cardgrid--3, .ce-cardgrid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .ce-cardgrid { grid-template-columns: 1fr; } }
.ce-cardgrid > .neos-contentcollection { display: contents; }
.ce-cardgrid .ce { max-width: none; margin: 0; width: 100%; }

.ce-media { margin: 0 auto 1.6rem; max-width: 68rem; }
.ce-media__frame { display: block; }
.ce-media img { width: 100%; height: auto; display: block; border-radius: var(--ts-radius); }
.ce-media--wide img { aspect-ratio: 16 / 9; object-fit: cover; }
.ce-media--photo img { aspect-ratio: 4 / 3; object-fit: cover; }
.ce-media--square img { aspect-ratio: 1 / 1; object-fit: cover; }
.ce-media__cap { margin: .5rem 0 0; font-size: .85rem; color: var(--ts-muted); }

.ce-gallery { margin: 0 auto 1.6rem; max-width: 72rem; }
.ce-gallery__title { font-family: var(--ts-font-head); font-weight: 600; margin: 0 0 1rem; color: var(--ts-ink); }
.ce-gallery__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .8rem; }
.ce-gallery__item { margin: 0; }
.ce-gallery__item img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; display: block; }

/* Karten-Slots: leere Felder nur im Backend als befüllbare Box sichtbar
   (im Frontend werden leere Slots gar nicht gerendert). */
.ce-card__icon--empty { opacity: .55; border: 1px dashed currentColor; border-radius: 8px; width: 2.2rem; height: 2.2rem; display: inline-flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--ts-muted); }
[data-ts-edit] .ce-card__title:empty::before { content: 'Überschrift eingeben …'; color: #bcb6ab; font-weight: 400; }
[data-ts-edit] .ce-card__text:empty::before { content: 'Text eingeben …'; color: #bcb6ab; }
[data-ts-edit] .ce-card__cta:empty::before { content: '↗ Link-Beschriftung eingeben …'; color: #bcb6ab; }
[data-ts-edit] .ce-habitat__label:empty::before { content: 'Bezeichnung …'; color: rgba(255,255,255,.6); }

/* Backend-Platzhalter für optionale Slots (nur [data-ts-edit] = Neos-Backend). */
[data-ts-edit] .ce-eyebrow:empty::before { content: 'Vortext …'; color: #bcb6ab; }
[data-ts-edit] .ce-hero__lead:empty::before, [data-ts-edit] .ce-sectionhead__lead:empty::before { content: 'Lead-Text …'; color: #bcb6ab; }
[data-ts-edit] .ce-image__cap:empty::before, [data-ts-edit] .ce-media__cap:empty::before { content: 'Bildunterschrift …'; color: #bcb6ab; }
[data-ts-edit] .ce-stat__items:empty::before { content: 'Zusatzzeile …'; color: #bcb6ab; }
[data-ts-edit] .ce-pricerow__note:empty::before { content: 'Zusatz …'; color: #bcb6ab; }
[data-ts-edit] .ce-gallery__title:empty::before { content: 'Galerie-Titel …'; color: #bcb6ab; }

/* ---- Modulare Struktur-Bausteine (Section / Split) ---- */
.ce-section { max-width: none; margin: 0; padding: clamp(1.5rem, 5vw, 3.5rem) 1.25rem; }
.ce-section > .ce-section__head, .ce-section > .ce-section__body { max-width: 72rem; margin-left: auto; margin-right: auto; }
.ce-section__head { margin-bottom: 1.6rem; }
.ce-section.ce--center .ce-section__head { text-align: center; }
.ce-section__title { font-family: var(--ts-font-head); font-weight: 600; font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.1; color: var(--ts-ink); margin: 0 0 .5rem; }
.ce-section__lead { color: var(--ts-muted); line-height: 1.6; max-width: 46rem; }
.ce-section.ce--center .ce-section__lead { margin-left: auto; margin-right: auto; }
.ce-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; max-width: 72rem; margin: 0 auto 1.6rem; }
.ce-split--rev .ce-split__media { order: 2; }
@media (max-width: 720px) { .ce-split { grid-template-columns: 1fr; } .ce-split--rev .ce-split__media { order: 0; } }

/* Footer-Link-Spalten (Content.LinkList / NavLink) – nutzen die Footer-Spalten-Optik. */
.ts-footer__col .neos-contentcollection a, .ts-footer__link { display: block; }
.ce-linklist { display: contents; }

/* Widget-Box-Modi: kompakter/Teaser-Globus (Vollbild-Globus unverändert) */
.ce-embed--globe-compact .globe-canvas,
.ce-embed--globe-teaser .globe-canvas { height: 360px; min-height: 360px; }
.ce-embed--globe-teaser { text-align: center; }
.ce-embed--globe-teaser .globe-teaser-cta { display: inline-flex; margin-top: 1.1rem; }

/* ---- Widget-Teaser (mode="teaser"): schlanke Promo-Box statt der App ---- */
.ce-widget-teaser { display: block; }
.ce-widget-teaser__inner {
  display: flex; gap: 1.1rem; align-items: flex-start;
  padding: 1.5rem 1.7rem; border: 1px solid rgba(120,100,70,.22);
  border-radius: 16px; background: var(--surface, #fff);
  box-shadow: 0 6px 24px rgba(60,45,20,.06);
}
.ce-widget-teaser__icon { font-size: 2.1rem; line-height: 1; flex: 0 0 auto; }
.ce-widget-teaser__body { flex: 1 1 auto; }
.ce-widget-teaser__title { margin: .1rem 0 .35rem; font-size: 1.3rem; }
.ce-widget-teaser__text { margin: 0 0 1rem; color: rgba(60,45,20,.8); }
.ce-widget-teaser--center .ce-widget-teaser__inner { flex-direction: column; text-align: center; align-items: center; }

/* ---- Kompakt-Modi der Tool-Widgets (JS bleibt aktiv, nur reduziert) ---- */
.ce-embed--db-compact .db-toolbar .db-filter { display: none; }
.ce-embed--db-compact .db-tablewrap { max-height: 440px; overflow: auto; }
.ce-embed--compare-compact, .ce-embed--identify-compact { max-width: 720px; margin-inline: auto; }
.ce-embed--geo-compact .geo-map { height: 340px; min-height: 340px; }
.ce-embed--geo-compact .geo-filter { display: none; }

/* ---- Spiele-Teaser (mode="teaser"): nur Kopf + CTA, ohne Kachel-Grid ---- */
.home-games--teaser .home-games__grid { display: none; }

/* ===================== Dunkelbraun-Theme (Artur): Kontrast ===================== */
/* Direkt auf dem braunen Seiten-Hintergrund → Titel weiß. (Eyebrows bleiben orange.) */
body.ts-body .ce-section__title, body.ts-body .ce-sectionhead__title, body.ts-body .section-title,
body.ts-body .ce-heading__title, body.ts-body .ce-hero__title, body.ts-body .ce-cta__title { color: #fff; }
/* Fließ-/Lead-/Schritt-Texte auf Braun → gedämpftes Weiß. */
body.ts-body .ce-section__lead, body.ts-body .ce-sectionhead__lead, body.ts-body .section-lead,
body.ts-body .ce-hero__lead, body.ts-body .ce-step__text, body.ts-body .ce-cta__text,
body.ts-body .ce-text, body.ts-body .ce-stat__label, body.ts-body .ce-stat__items,
body.ts-body .ce-gallery__title, body.ts-body .ce-image__cap { color: var(--ts-onbg-muted); }
body.ts-body .ce-text { color: var(--ts-onbg); }
/* Rechtstexte auf Braun → weiß. */
body.ts-body .legal h1, body.ts-body .legal__content, body.ts-body .legal__content h2,
body.ts-body .legal__content h3, body.ts-body .legal__content p, body.ts-body .legal__content li,
body.ts-body .legal__content strong, body.ts-body .ts-crumbs, body.ts-body .ts-crumbs a { color: var(--ts-onbg); }

/* Weiße Inhalts-Kästen → dunkler Text; Kontur weiß (Buttons behalten eigene Farbe). */
body.ts-body .ce-card, body.ts-body .ce-prize, body.ts-body .ce-widget-teaser__inner,
body.ts-body .ce--bg-surface { color: var(--ts-ink); }
body.ts-body .ce-card .ce-card__text, body.ts-body .ce-prize .ce-prize__text { color: var(--ts-muted); }
body.ts-body .ce--bg-surface .ce-section__title, body.ts-body .ce--bg-surface .ce-sectionhead__title,
body.ts-body .ce--bg-surface .section-title, body.ts-body .ce--bg-surface .ce-heading__title,
body.ts-body .ce--bg-surface .ce-text, body.ts-body .ce--bg-surface .ce-section__lead,
body.ts-body .ce--bg-surface .ce-sectionhead__lead { color: var(--ts-ink); }
body.ts-body .ce--bg-surface .ce-section__lead, body.ts-body .ce--bg-surface .ce-sectionhead__lead { color: var(--ts-muted); }

/* ============ Phase 4: Seiten-/Widget-Feinschliff (Dunkelbraun-Theme) ============ */
/* Tool-Seiten: Hauptüberschrift orange (Systematik&Suche / Spiele / Bestimmen / Vergleich). */
body.games-page .ce-sectionhead__title, body.games-page .section-title,
body.discover-page .ce-sectionhead__title, body.discover-page .section-title,
body.database-page .ce-sectionhead__title, body.database-page .section-title { color: var(--ts-accent); }

/* Elemente, die früher das helle Creme (--ts-bg) als Fläche nutzten → jetzt
   weiße Kästen mit dunklem Text (sonst braun-auf-braun/unlesbar). */
body.ts-body .quiz-opt, body.ts-body .patentier-card__link { background: var(--ts-surface); color: var(--ts-ink); border-color: rgba(0,0,0,.14); }
body.ts-body .patentier-card__link { text-align: center; }
body.ts-body .hab-chip { background: var(--ts-surface); color: var(--ts-ink); }
body.ts-body .game-pick__name, body.ts-body .game-bar b, body.ts-body .quiz-opt { color: var(--ts-ink); }

/* --- Metalltafeln --- */
.plaques-hero__eyebrow { color: var(--ts-accent) !important; }   /* „Für Zoos – Tierparks – Reservate" */
.plaques-hero__title { margin-top: .7rem; }                       /* eine Zeile mehr Abstand */
.plaques-hero__lead, .plaques-split__note, .plaques-form__sub { color: var(--ts-onbg-muted); }
.plaques-steps, .plaques-form-section { background: transparent; border-color: rgba(255,255,255,.22); }
.plaques-step { background: transparent; border: 1px solid var(--ts-line); }  /* weißer Umriss, brauner Grund */
.plaques-step h3 { color: #fff; }
.plaques-step p { color: var(--ts-onbg-muted); }
/* Erlös-Split: brauner Grund, weiße Texte, orange Prozente, weißer Umriss. */
.split-card { background: transparent; border: 1px solid var(--ts-line); color: #fff; }
.split-card--full { background: color-mix(in srgb, var(--ts-accent) 22%, transparent); border-color: var(--ts-accent); }
.split-card__label { color: #fff; }
.split-card__items { color: var(--ts-onbg-muted); }
.plaque-mock { border-color: #fff; }                              /* weiße Kontur auf der Tafel */
/* Anmeldeformular: Felder weiß + dunkler Text, Labels hell. */
.plaques-form__title { color: #fff; }
.pf-label, .pf-consent { color: var(--ts-onbg-muted); }
.pf-input { background: #fff; color: var(--ts-ink); border: 1px solid rgba(0,0,0,.25); border-radius: 8px; padding: .6rem .7rem; }

/* Datenseiten (Tier-Habitat-Themes) aufs globale Dunkelbraun-Theme zwingen (Artur:
   „Frage 3: Ja" – alle Seiten braun). Überschreibt die habitat-* Token aus main.css. */
body[class*="habitat-"] {
    --ts-bg: #58584E; --ts-surface: #ffffff; --ts-ink: #1c1c18;
    --ts-muted: #6f675b; --ts-onbg: #ffffff; --ts-onbg-muted: rgba(255,255,255,.82);
    --ts-accent: #ED8008; --ts-line: rgba(255,255,255,.65);
}