/* ============================================================
* rundum.dog V3 — Theme-CSS (AUTO-GENERATED from _schema/design-tokens.json)
* NICHT direkt editieren — Änderungen in _schema/design-tokens.json, dann `sync.py rebuild`
* ============================================================ */
:root {
/* === FARBEN === */
--rd-bg: #FDFAF6; /* Seitenhintergrund (Base) — body + alle Sections, eliminiert weiße Streifen zwischen Atomic-Sektionen */
--rd-bg-alt: #F4EDE4; /* Alternierende Sektionen */
--rd-bg-soft: #FFFFFF; /* Cards, Formulare */
--rd-bg-inverse: #141311; /* Footer, dunkle Sektionen */
--rd-text: #1A1A1A; /* Standard-Text, Headlines */
--rd-text-secondary: #595959; /* Sekundär-Text, Meta */
--rd-text-tertiary: #767676; /* Labels, gedämpft */
--rd-text-inverse: #FBF7F2; /* Auf dunklem BG */
--rd-accent: #B56A34; /* Primär-CTAs, Badges */
--rd-accent-strong: #944F22; /* Hover, Akzent-Text */
--rd-accent-soft: #F4E3D2; /* Tag-Pills, Chip-BG */
--rd-accent-on-dark: #E89A63; /* Akzent auf dunkel */
--rd-cat-rasse: #6B8E5A; /* Hunderasse-CPT-Akzent */
--rd-cat-event: #6B8AA5; /* Event-CPT-Akzent */
--rd-cat-wiki: #A8741F; /* Wiki-CPT-Akzent */
--rd-cat-ort: #B56A34; /* Eintrag-CPT-Akzent */
--rd-cat-job: #7B6AA8; /* Job-CPT-Akzent */
--rd-cat-tierschutz: #C94B3B; /* Vermittlung/Gefahr */
--rd-border: #E5DDD7; /* Card-Rahmen */
--rd-border-strong: #CDBFB3; /* Trennlinien */
--rd-success: #1F8A5B; /* Jetzt offen, verifiziert */
--rd-danger: #C23B2E; /* Qualzucht, Notfall */
--rd-warning: #C28B2E; /* Triage mittel */
--rd-danger-soft: #FBE7E4; /* Alert-Signal-Tag BG */
--rd-subtype-med-bg: #E2ECEE; /* Subtyp-Badge Medizin BG (Tierarzt, Klinik) */
--rd-subtype-med-fg: #113D49; /* Subtyp-Badge Medizin FG */
--rd-subtype-med-border: #C9DCE0; /* Subtyp-Badge Medizin Border */
--rd-subtype-train-bg: #F4E3D2; /* Subtyp-Badge Training BG (= accent-soft) */
--rd-subtype-train-fg: #944F22; /* Subtyp-Badge Training FG (= accent-strong) */
--rd-subtype-train-border: #E8CFB5; /* Subtyp-Badge Training Border */
--rd-subtype-care-bg: #F5E8D9; /* Subtyp-Badge Care BG (Pension, Sitter) */
--rd-subtype-care-fg: #6B4A28; /* Subtyp-Badge Care FG */
--rd-subtype-care-border: #E8D4BA; /* Subtyp-Badge Care Border */
--rd-subtype-service-bg: #E0EBEE; /* Subtyp-Badge Service BG (Groomer) */
--rd-subtype-service-fg: #1F5A69; /* Subtyp-Badge Service FG */
--rd-subtype-service-border: #C8DCE1; /* Subtyp-Badge Service Border */
--rd-subtype-shelter-bg: #EAF1F2; /* Subtyp-Badge Shelter BG (Tierheim) */
--rd-subtype-shelter-fg: #113D49; /* Subtyp-Badge Shelter FG */
--rd-subtype-shelter-border: #CFDDE0; /* Subtyp-Badge Shelter Border */
--rd-subtype-trade-bg: #F4EDE4; /* Subtyp-Badge Trade BG (Shop, Futter) (= bg-alt) */
--rd-subtype-trade-fg: #1A1A1A; /* Subtyp-Badge Trade FG (= text) */
--rd-subtype-trade-border: #CDBFB3; /* Subtyp-Badge Trade Border (= border-strong) */
--rd-subtype-nature-bg: #E7EDDF; /* Subtyp-Badge Nature BG (Wanderweg, Wald) */
--rd-subtype-nature-fg: #3A4E28; /* Subtyp-Badge Nature FG */
--rd-subtype-nature-border: #CCDCBC; /* Subtyp-Badge Nature Border */
--rd-subtype-info-bg: #E5E9F0; /* Subtyp-Badge Info BG (Default) */
--rd-subtype-info-fg: #2B3A4E; /* Subtyp-Badge Info FG */
--rd-subtype-info-border: #CDD4DF; /* Subtyp-Badge Info Border */
--rd-subtype-warn-bg: #F7E6C8; /* Subtyp-Badge Warn BG (Giftköder, Wolfsgebiet) */
--rd-subtype-warn-fg: #7B5516; /* Subtyp-Badge Warn FG */
--rd-subtype-warn-border: #ECD2A3; /* Subtyp-Badge Warn Border */
--rd-subtype-sport-bg: #ECE2EE; /* Subtyp-Badge Sport BG (Sportverein) */
--rd-subtype-sport-fg: #4E2A55; /* Subtyp-Badge Sport FG */
--rd-subtype-sport-border: #D8C3DC; /* Subtyp-Badge Sport Border */
--rd-subtype-ref-bg: #EAE4DA; /* Subtyp-Badge Reference BG (Versicherung, Sehenswürdigkeit) */
--rd-subtype-ref-fg: #4B3E28; /* Subtyp-Badge Reference FG */
--rd-subtype-ref-border: #D4C9B8; /* Subtyp-Badge Reference Border */
--rd-tone-1: #D4B8A8; /* Image-Placeholder Tone (warm) */
--rd-tone-2: #C5B89A; /* Image-Placeholder Tone (sand) */
--rd-tone-3: #A8C5A0; /* Image-Placeholder Tone (sage) */
--rd-tone-4: #A0B8C5; /* Image-Placeholder Tone (petrol) */
--rd-tone-5: #C5A0B8; /* Image-Placeholder Tone (rosé) */
--rd-tone-6: #D4C5B0; /* Image-Placeholder Tone (beige, default) */
--rd-cpt-accent: var(--rd-accent);
/* === TYPOGRAFIE === */
--rd-font-display: "Inter", system-ui, -apple-system, sans-serif;
--rd-font-ui: "Inter", system-ui, -apple-system, sans-serif;
--rd-font-body: "Inter", system-ui, -apple-system, sans-serif;
--rd-font-mono: "IBM Plex Mono", ui-monospace, monospace;
--rd-fs-xs: 12px;
--rd-fs-sm: 14px;
--rd-fs-base: 16px;
--rd-fs-md: 18px;
--rd-fs-lg: 22px;
--rd-fs-xl: 28px;
--rd-fs-2xl: clamp(32px, 8vw, 48px);
--rd-fs-3xl: clamp(40px, 10vw, 72px);
/* === DENSITY & SPACING === */
--rd-density: 1;
--rd-space-1: calc(4px * var(--rd-density));
--rd-space-2: calc(8px * var(--rd-density));
--rd-space-3: calc(12px * var(--rd-density));
--rd-space-4: calc(16px * var(--rd-density));
--rd-space-5: calc(24px * var(--rd-density));
--rd-space-6: calc(32px * var(--rd-density));
--rd-space-7: calc(48px * var(--rd-density));
--rd-space-8: calc(72px * var(--rd-density));
/* === RADIEN === */
--rd-r-sm: 8px;
--rd-r-md: 12px;
--rd-r-lg: 20px;
--rd-r-xl: 28px;
--rd-r-pill: 9999px;
/* === SHADOWS === */
--rd-shadow-sm: 0 1px 2px rgba(20,19,17,0.04), 0 2px 6px rgba(20,19,17,0.04);
--rd-shadow-md: 0 4px 12px rgba(20,19,17,0.06), 0 8px 24px rgba(20,19,17,0.05);
--rd-shadow-lg: 0 12px 32px rgba(20,19,17,0.08), 0 24px 48px rgba(20,19,17,0.06);
--rd-max-w: 1240px;
}
/* ============================================================
* BEM-KOMPONENTEN (rd-Namespace)
* Änderungen bitte in scripts/sync.py:_read_bem_components()
* ============================================================ */
/* === SCROLL-TO-TOP-BUTTON === */
.rd-scroll-top {
position: fixed;
right: 16px;
bottom: 16px;
width: 44px;
height: 44px;
border-radius: 50%;
border: 1px solid var(--rd-border, #e5ddd7);
background: #fff;
color: var(--rd-accent-strong, #944F22);
display: grid;
place-items: center;
cursor: pointer;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
opacity: 0;
transform: translateY(8px);
transition: opacity 220ms ease-out, transform 220ms ease-out, background 160ms ease;
z-index: 9998;
}
.rd-scroll-top.is-visible { opacity: 1; transform: translateY(0); }
.rd-scroll-top:hover { background: var(--rd-accent-soft, #F4E3D2); }
.rd-scroll-top:focus-visible {
outline: 2px solid var(--rd-accent, #B56A34);
outline-offset: 2px;
}
.rd-scroll-top svg { display: block; }
@media (min-width: 720px) {
.rd-scroll-top { right: 24px; bottom: 24px; width: 48px; height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
.rd-scroll-top { transition: opacity 0s, transform 0s; }
}
/* === BOX-SIZING-RESET ===
Universeller border-box-Reset. Ohne diesen rechnet `padding` in `width: 100%`
nicht hinein → Container werden auf Mobile breiter als Viewport (klassischer
Horizontal-Overflow-Bug). Modern-Standard, Elementor + Hello-Elementor setzen
border-box auf ihre Widgets ohnehin — diese Regel betrifft also primär
Theme-eigene `.rd-*`-Klassen und unabsichtliche Default-content-box-Elemente. */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* === LAYOUT UTILITIES === */
.rd-container {
width: 100%;
max-width: var(--rd-max-w, 1240px);
margin-left: auto;
margin-right: auto;
padding-left: var(--rd-space-4);
padding-right: var(--rd-space-4);
}
@media (min-width: 960px) {
.rd-container {
padding-left: var(--rd-space-5);
padding-right: var(--rd-space-5);
}
}
/* === BASE — Typografie-Defaults (Inter für body, bewusste Link-Reset) === */
/* Greift NUR auf Elementen ohne eigenen font-family-Override. Elementor-Widgets
setzen eigene Fonts via inline-CSS; die bleiben unberührt. */
body,
body .rd-archive,
body .rd-card,
body .rd-card *,
body .rd-archive *:not(svg):not(path):not(line):not(polyline):not(polygon):not(circle):not(rect) {
font-family: var(--rd-font-body, "Inter", system-ui, -apple-system, sans-serif);
}
/* === Horizontal-Overflow-Guard === */
/* Verschiedene Sections nutzen `width: 100vw; margin-left: calc(50% - 50vw)`
für Full-Bleed-Hintergründe (Stats, Latest, Hero-Strips). Auf Mobile-Browsern
kann dieses Muster minimal über den Viewport hinausragen (Sub-Pixel-Rundung,
Safari address-bar-Quirks, Scrollbar-Kompensation). Ergebnis: Page lässt
sich horizontal scrollen, Texte fühlen sich abgeschnitten an. Der Overflow-
Guard auf html+body fängt das auf, ohne dass Section-Overlays schief sitzen. */
html, body {
max-width: 100%;
overflow-x: hidden;
}
/* Body-Hintergrund cremig statt Browser-Default-Weiß. Eliminiert weiße
Streifen zwischen Atomic-Sections (Roger 2026-05-06). */
body {
background: var(--rd-bg, #FDFAF6);
}
/* Link-Reset innerhalb Archive-Cards — verhindert blau-unterstrichenen Default.
.rd-chip ausgenommen: der Chip-Style setzt color explizit (inkl. is-active white). */
.rd-archive a:not(.rd-btn):not(.rd-archive__btn-primary):not(.rd-archive__btn-ghost):not(.rd-chip),
.rd-card a {
color: inherit;
text-decoration: none;
}
.rd-archive a:hover:not(.rd-btn):not(.rd-archive__btn-primary):not(.rd-archive__btn-ghost):not(.rd-chip),
.rd-card a:hover {
color: var(--rd-accent-strong);
}
/* Chips haben eigenen Link-Style */
a.rd-chip { color: var(--rd-text); text-decoration: none; }
a.rd-chip:hover { background: var(--rd-bg-alt); }
a.rd-chip.is-active { color: var(--rd-bg); }
/* Breadcrumb-Links bleiben unterscheidbar */
.rd-archive__breadcrumb a {
color: var(--rd-text-secondary);
text-decoration: none;
}
.rd-archive__breadcrumb a:hover {
color: var(--rd-accent-strong);
text-decoration: underline;
}
/* === BUTTONS === */
.rd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 24px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 700;
font-size: 15px;
cursor: pointer;
text-decoration: none;
transition: transform 150ms, box-shadow 150ms, background 150ms;
}
.rd-btn--primary { background: var(--rd-accent-strong); color: #fff !important; }
.rd-btn--primary:hover { background: #7c4219; transform: translateY(-1px); box-shadow: var(--rd-shadow-md); }
.rd-btn--ghost {
background: transparent;
color: var(--rd-text);
border: 1.5px solid var(--rd-border-strong);
font-weight: 600;
}
.rd-btn--ghost:hover { background: var(--rd-bg-alt); }
/* === CHIPS === */
.rd-chip {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 600;
font-size: 13px;
background: var(--rd-bg-soft);
color: var(--rd-text);
border: 1px solid var(--rd-border);
cursor: pointer;
white-space: nowrap;
text-decoration: none;
}
.rd-chip--active,
.rd-chip.is-active { background: var(--rd-text); color: var(--rd-bg); border-color: var(--rd-text); }
.rd-chip.is-active .rd-chip__count { color: var(--rd-bg); opacity: 0.7; }
.rd-chip__count {
margin-left: 6px;
color: var(--rd-text-tertiary);
font-variant-numeric: tabular-nums;
font-size: 12px;
}
/* === HERO (alle CPTs) === */
.rd-hero {
position: relative;
width: 100%;
aspect-ratio: 16/9;
max-height: 68vh;
min-height: 280px;
overflow: hidden;
}
.rd-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-hero__overlay {
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,19,17,0.1) 0%, rgba(20,19,17,0.6) 100%);
}
.rd-hero__back,
.rd-hero__back a,
a.rd-hero__back,
.elementor-button.rd-hero__back,
.elementor-widget-button .elementor-button.rd-hero__back {
position: absolute; top: var(--rd-space-4); left: var(--rd-space-4);
display: inline-flex !important; align-items: center; gap: 6px;
padding: 8px 14px 8px 10px !important;
border-radius: var(--rd-r-pill) !important;
background: rgba(255,255,255,0.92) !important;
backdrop-filter: blur(8px);
font-family: var(--rd-font-ui) !important;
font-weight: 600 !important; font-size: 13px !important;
color: var(--rd-text) !important; text-decoration: none !important;
border: none !important; box-shadow: var(--rd-shadow-sm);
}
.rd-hero__back:hover { background: #fff !important; }
/* Falls Elementor den Button in einen Wrapper packt: Wrapper absolut positionieren */
.elementor-widget-button:has(.rd-hero__back) {
position: absolute; top: var(--rd-space-4); left: var(--rd-space-4); z-index: 2;
}
/* === FILTER-BAR === */
.rd-filter-bar {
position: sticky; top: 60px; z-index: 40;
background: rgba(251,247,242,0.94);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--rd-border);
}
.rd-filter-bar__inner { padding: 12px 0; }
.rd-filter-bar__search {
display: flex; gap: 8px; align-items: center;
background: var(--rd-bg-soft);
border-radius: var(--rd-r-pill);
padding: 6px; border: 1px solid var(--rd-border);
margin-bottom: 12px;
}
.rd-filter-bar__input {
flex: 1; border: none; outline: none; background: transparent;
font-family: var(--rd-font-body); font-size: 15px;
color: var(--rd-text); height: 40px;
padding: 0 14px;
}
.rd-filter-bar__chips {
display: flex; gap: 6px; overflow-x: auto;
scrollbar-width: none;
}
.rd-filter-bar__chips::-webkit-scrollbar { display: none; }
/* === CARD — Claude-Design-konform (2026-04-23) ===
Zwei Typen fuer 7 Live-CPTs:
.rd-card → Standard-Grid-Card (Image + Eyebrow + Title + Meta)
→ hunderasse, eintrag, wiki, uebung, vermittlung, gefahr
.rd-card--event → Event-Card mit Datum-Box links statt Bild
→ event
Klick-Bug-Fix: Elementor wrappt jedes Widget in .elementor-widget-wrap
welches position:relative hat. Dadurch bricht der absolute-positionierte
Overlay-Link nicht bis zur rd-card-Root durch. Fix: innerhalb rd-card
die Elementor-Wrapper auf position:static zwingen.
*/
.rd-card {
background: var(--rd-bg-soft);
border-radius: var(--rd-r-md);
border: 1px solid var(--rd-border);
overflow: hidden;
transition: transform 200ms, box-shadow 200ms;
position: relative; /* Ankerpunkt fuer Overlay-Link */
}
.rd-card:hover {
transform: translateY(-2px);
box-shadow: var(--rd-shadow-md);
}
/* === CARD-IMG UTILITY (Welle-47 · 2026-05-23) ===========================
Single-Source für Card-Image-Layouts über alle Card-Komponenten hinweg.
Renderer setzen:
![]()
→ Foto-Default (cover, 16:9)
![]()
→ Brand-Logo (contain + accent-BG + padding)
![]()
→ Avatar/Profile (1:1, round)
PHP-Helper: rd_card_img_class($cpt) entscheidet --logo automatisch für
Eintrag/Zuechter/Unterkunft/Wurfankuendigung. Siehe inc/card-helpers.php.
*/
/* Doppel-Klassen-Selector für höhere Specificity (0,2,0) — schlägt
konkurrierende Komponenten-Selektoren wie .rd-standort__cpt-thumb img
(0,1,1) und .rd-eintrag__related-thumb img (0,1,1). Welle-47-Bug:
Cards mit Wrapper-Selector zeigten Logos mit cover statt contain. */
img.rd-card-img,
.rd-card-img.rd-card-img {
aspect-ratio: 16/9;
width: 100%;
height: auto;
object-fit: cover;
object-position: center 30%;
display: block;
}
img.rd-card-img--logo,
.rd-card-img.rd-card-img--logo {
object-fit: contain;
background: var(--rd-accent-soft, #F4E3D2);
padding: 8px;
object-position: center;
}
img.rd-card-img--profile,
.rd-card-img.rd-card-img--profile {
aspect-ratio: 1/1;
border-radius: 50%;
object-fit: cover;
}
/* Bild: flexibel gegen beliebige Upload-Formate.
aspect-ratio 16:9 fixiert die Card-Hoehe, object-fit:cover cropt Portrait-
und Landscape-Uploads zentral. object-position:center 30% haelt Hundeportraits
mit Gesicht oben besser im Fokus. */
.rd-card__image,
.rd-card .elementor-element-card-image-link img,
.rd-card .jet-listing-dynamic-image img {
aspect-ratio: 16/9;
width: 100%;
height: auto;
object-fit: cover;
object-position: center 30%;
display: block;
}
/* JE-Listing-Pfad (eintrag-card.json → .rd-kachel-eintrag): Logo-Padding für
Eintrag-Cards. Theme-PHP-Cards nutzen seit Welle-47 (2026-05-23) den
utility-Selektor .rd-card-img--logo (siehe rd_card_img_class()).
Welle-47-P2-Cleanup 2026-05-25: .rd-card--eintrag-Pfad entfernt. */
.rd-kachel-eintrag .rd-card__image,
.rd-kachel-eintrag .jet-listing-dynamic-image img,
.rd-kachel-eintrag .elementor-element-card-image-link img {
object-fit: contain;
background: var(--rd-accent-soft, #F4E3D2);
padding: 8px;
}
/* Body-Padding */
.rd-card .elementor-element-card-body > .elementor-container,
.rd-card__body { padding: var(--rd-space-3) var(--rd-space-4) var(--rd-space-4); }
/* Eyebrow (Shortcode [rd_card_eyebrow] rendert direkt .rd-card__eyebrow) */
.rd-card__eyebrow {
font-size: 11px;
color: var(--rd-text-tertiary);
font-family: var(--rd-font-ui);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 4px;
}
/* Title (jet-listing-dynamic-field im Widget mit id="card-title") */
.rd-card__title,
.rd-card .elementor-element-card-title,
.rd-card .elementor-element-card-title .jet-listing-dynamic-field__content {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: 17px;
color: var(--rd-text);
line-height: 1.2;
letter-spacing: -0.01em;
margin: 0;
display: block;
}
.rd-card .elementor-element-card-title .jet-listing-dynamic-field.display-inline,
.rd-card .elementor-element-card-title .jet-listing-dynamic-field__inline-wrap {
display: block;
}
/* Meta-Zeile (Shortcode [rd_card_meta]) */
.rd-card__meta {
margin-top: 6px;
font-size: 12px;
color: var(--rd-text-secondary);
font-family: var(--rd-font-ui);
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.rd-card__meta svg { flex-shrink: 0; vertical-align: middle; }
.rd-card__meta .rd-card__sep { color: var(--rd-border-strong); opacity: 0.6; }
.rd-card__price { font-weight: 600; color: var(--rd-text); }
/* Welle 42 (2026-04-29): Autor-Byline für redaktionelle CPTs in Card-Listings */
.rd-card__author {
margin-top: 4px;
font-size: 12px;
color: var(--rd-text-tertiary, #767676);
font-family: var(--rd-font-ui);
font-weight: 500;
display: flex;
align-items: center;
gap: 4px;
}
.rd-card__author svg { flex-shrink: 0; opacity: 0.7; }
/* Vermittlung-Tags (Shortcode [rd_vermittlung_tags]) */
.rd-card__tags {
display: flex; gap: 4px; flex-wrap: wrap;
margin-top: 6px;
}
.rd-card__tag {
padding: 2px 8px;
border-radius: var(--rd-r-pill);
background: var(--rd-accent-soft);
color: var(--rd-accent-strong);
font-family: var(--rd-font-ui);
font-weight: 600;
font-size: 10px;
line-height: 1.4;
}
/* Status-Active-Badge (Gefahr) */
.rd-card__status-active {
display: inline-flex; align-items: center; gap: 4px;
color: var(--rd-success, #10B981);
font-weight: 600;
}
.rd-card__dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: currentColor;
}
/* ── KLICK-BUG-FIX ──────────────────────────────────────────────────
Elementor wrappt Widgets in .elementor-container > .elementor-column
> .elementor-widget-wrap mit eigenem position:relative. !important
ist hier noetig, weil Elementor-Core-CSS mit hoeherer Specificity
greift als unser Scope-Prefix .rd-card. */
.rd-card .elementor-container,
.rd-card .elementor-column,
.rd-card .elementor-widget-wrap,
.rd-card .elementor-element-card-overlay-link,
.rd-card .elementor-element-card-overlay-link .jet-listing,
.rd-card .elementor-element-card-overlay-link .jet-listing-dynamic-link {
position: static !important;
}
/* rd-card selbst: relative — als Anchor fuer absolute Overlay */
.rd-card { position: relative !important; }
/* Overlay-: deckt die ganze Card, liegt ueber allem */
.rd-card .elementor-element-card-overlay-link a,
.rd-card .elementor-element-card-overlay-link .jet-listing-dynamic-link__link {
position: absolute !important;
inset: 0 !important;
z-index: 5 !important;
display: block !important;
font-size: 0; color: transparent;
text-indent: 100%; white-space: nowrap; overflow: hidden;
}
/* Image-Widget hat eigenen permalink-Link (link_type=permalink) — der
klickt eh auf dieselbe URL, muss aber unter dem Overlay bleiben. */
.rd-card .elementor-element-card-image-link a { z-index: 2; }
/* Interaktive Elemente (Pfoten, Buttons im Einzelcontent) ueber dem Overlay */
.rd-card a:not(.jet-listing-dynamic-link__link),
.rd-card button,
.rd-card [role="button"] {
position: relative;
z-index: 4;
}
/* ── EVENT-CARD VARIANTE ─────────────────────────────────────────── */
/* 2-col-Layout: Datum-Box (FESTE 88px) + Content (rest, flex:1).
Elementor's column_size=25/75 liefert prozentuelle Breiten, die bei
schmaleren Grid-Spalten Titel zerquetschen. Daher CSS-Grid-Override. */
.rd-card--event > .elementor-container {
display: grid !important;
grid-template-columns: 88px 1fr !important;
align-items: stretch;
}
.rd-card--event .elementor-column {
width: auto !important;
max-width: none !important;
}
.rd-card--event .elementor-element-card-date-col {
background: var(--rd-accent-strong);
}
.rd-card--event .elementor-element-card-date-col .elementor-widget-wrap,
.rd-card--event .elementor-element-card-date-box {
background: var(--rd-accent-strong);
color: #fff;
display: flex; flex-direction: column;
justify-content: center; align-items: center;
padding: var(--rd-space-3);
text-align: center;
min-height: 100%;
}
.rd-card--event .elementor-element-card-content-col {
min-width: 0; /* erlaubt Titel-Umbruch in schmalen Cards */
}
/* Content-Column: Widgets vertikal gestapelt, mit definiertem Padding.
Ohne diese Regel rendert Elementor die 4 Widgets (eyebrow/title/meta/overlay)
als flex-wrap:row → sie überlappen visuell statt untereinander zu stacken. */
.rd-card--event .elementor-element-card-content-col > .elementor-widget-wrap {
display: flex !important;
flex-direction: column !important;
align-content: flex-start !important;
gap: 4px;
padding: 12px 16px !important;
justify-content: center;
}
.rd-card--event .elementor-element-card-content-col > .elementor-widget-wrap > .elementor-element {
width: 100% !important;
}
.rd-event-date-card__day {
font-family: var(--rd-font-display);
font-weight: 700; font-size: 28px;
line-height: 1; letter-spacing: -0.02em;
}
.rd-event-date-card__month {
font-family: var(--rd-font-ui);
font-size: 10px; font-weight: 700;
letter-spacing: 0.1em;
margin-top: 4px;
}
/* Event-Titel: kleiner, aber ohne line-clamp (Clash mit display-inline-Wrapper
führte dazu dass Titel gar nicht mehr sichtbar war). Margin nach oben
trennt den Titel vom Eyebrow, margin nach unten vom Meta. */
.rd-card--event .elementor-element-card-title {
margin: 4px 0 6px;
}
.rd-card--event .elementor-element-card-title .jet-listing-dynamic-field__content {
font-size: 15px;
line-height: 1.25;
}
/* Meta in schmalen Event-Cards: stacked statt in einer Zeile
(Gap zwischen Zeilen für Lesbarkeit) */
.rd-card--event .rd-card__meta {
flex-direction: column;
align-items: flex-start;
gap: 2px;
}
/* Separator zwischen gestackten Meta-Items verstecken */
.rd-card--event .rd-card__meta .rd-card__sep {
display: none;
}
/* === CARD — Event-Variante === */
.rd-kachel-event {
display: grid; grid-template-columns: 96px 1fr;
background: var(--rd-bg-soft);
border-radius: var(--rd-r-md);
border: 1px solid var(--rd-border);
overflow: hidden;
}
.rd-event-date-card {
background: var(--rd-accent-strong); color: #fff;
display: flex; flex-direction: column; justify-content: center; align-items: center;
padding: var(--rd-space-3); text-align: center;
}
.rd-event-date-card__day {
font-family: var(--rd-font-display); font-weight: 700;
font-size: 32px; line-height: 1; letter-spacing: -0.02em;
}
.rd-event-date-card__month {
font-family: var(--rd-font-ui); font-size: 11px; font-weight: 700;
letter-spacing: 0.1em; margin-top: 4px;
}
/* === CARD — Eintrag/Ort mit Logo === */
.rd-kachel-eintrag {
display: flex; align-items: center; gap: var(--rd-space-4);
padding: var(--rd-space-4);
background: var(--rd-bg-soft);
border-radius: var(--rd-r-md);
border: 1px solid var(--rd-border);
}
.rd-kachel-eintrag__logo {
width: 76px; height: 76px; border-radius: var(--rd-r-sm);
flex-shrink: 0;
background: #fff;
border: 1px solid var(--rd-border);
display: grid; place-items: center;
padding: 10px;
}
.rd-kachel-eintrag__logo img { width: 100%; height: 100%; object-fit: contain; }
/* === TRIAGE-BOX (Notfall-Artikel) === */
.rd-triage-box {
display: grid; grid-template-columns: 1fr;
gap: var(--rd-space-3);
padding: var(--rd-space-5);
border-radius: var(--rd-r-lg);
border: 2px solid var(--rd-danger);
background: #FFF5F4;
margin: var(--rd-space-5) 0;
}
.rd-triage-box__title {
font-family: var(--rd-font-display); font-weight: 700;
font-size: var(--rd-fs-lg);
color: var(--rd-danger); letter-spacing: -0.01em;
}
.rd-triage-box__level {
display: grid; grid-template-columns: 120px 1fr;
gap: var(--rd-space-3); padding: var(--rd-space-3);
background: var(--rd-bg-soft);
border-radius: var(--rd-r-md);
border: 1px solid var(--rd-border);
}
.rd-triage-box__level-label {
font-family: var(--rd-font-ui); font-weight: 700;
font-size: var(--rd-fs-sm);
text-transform: uppercase; letter-spacing: 0.06em;
}
.rd-triage-box__level--leicht .rd-triage-box__level-label { color: var(--rd-success); }
.rd-triage-box__level--mittel .rd-triage-box__level-label { color: var(--rd-warning); }
.rd-triage-box__level--notfall .rd-triage-box__level-label { color: var(--rd-danger); }
/* === POST-TITLE (rd_post_title Shortcode + theme-post-title Widget) === */
.rd-post-title,
.rd-post-title *,
.elementor-widget-theme-post-title .elementor-heading-title,
body[class*="rd-single-"] .elementor-widget-theme-post-title .elementor-heading-title {
font-family: var(--rd-font-display) !important;
font-weight: 700 !important;
font-size: var(--rd-fs-2xl) !important;
line-height: 1.12 !important;
letter-spacing: -0.03em !important;
color: var(--rd-text) !important;
margin: 0 0 12px;
text-wrap: balance;
}
.rd-lead { text-wrap: pretty; }
/* === LEAD-MAGNET-CTA (rd-lead-magnet — Aside-Block für PDF/Asset-Downloads) === */
.rd-lead-magnet {
display: grid;
grid-template-columns: 56px 1fr;
gap: var(--rd-space-4);
padding: var(--rd-space-5);
margin: var(--rd-space-6) 0;
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-left: 4px solid var(--rd-accent-strong);
border-radius: var(--rd-r-lg);
}
.rd-lead-magnet__icon {
font-size: 32px;
line-height: 1;
align-self: start;
text-align: center;
}
.rd-lead-magnet__body {
display: flex;
flex-direction: column;
gap: var(--rd-space-2);
min-width: 0;
}
.rd-lead-magnet__eyebrow {
font-family: var(--rd-font-ui);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rd-accent-strong);
}
.rd-lead-magnet__title {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: var(--rd-fs-lg);
line-height: 1.2;
margin: 0;
color: var(--rd-text);
}
.rd-lead-magnet__lead {
font-family: var(--rd-font-body);
font-size: var(--rd-fs-base);
line-height: 1.55;
color: var(--rd-text-secondary);
margin: 0;
}
.rd-lead-magnet__action {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--rd-space-3);
margin-top: var(--rd-space-2);
}
.rd-lead-magnet__hint {
font-family: var(--rd-font-ui);
font-size: 13px;
color: var(--rd-text-tertiary);
}
@media (max-width: 600px) {
.rd-lead-magnet {
grid-template-columns: 1fr;
padding: var(--rd-space-4);
}
.rd-lead-magnet__icon { font-size: 28px; text-align: left; }
}
/* === TAGS (rd-tags Klasse auf jet-listing-dynamic-terms) === */
body[class*="rd-single-"] .rd-tags,
body[class*="rd-single-"] .rd-tags a,
body[class*="rd-single-"] .rd-tags span,
body[class*="rd-single-"] .elementor-widget-jet-listing-dynamic-terms.rd-tags a {
color: var(--rd-accent-strong) !important;
font-family: var(--rd-font-ui) !important;
font-weight: 700 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.08em !important;
text-decoration: none !important;
margin-bottom: 10px;
}
/* === KONTAKT-BLOCK (rd_eintrag_kontakt) === */
.rd-kontakt {
display: flex; flex-direction: column; gap: 10px;
padding: var(--rd-space-5);
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
}
.rd-kontakt__row {
display: flex; align-items: center; gap: 10px;
color: var(--rd-text) !important; text-decoration: none !important;
font-family: var(--rd-font-ui); font-size: 14px;
}
.rd-kontakt__row:hover { color: var(--rd-accent-strong) !important; }
.rd-kontakt__icon {
flex-shrink: 0; width: 28px; height: 28px;
display: grid; place-items: center;
background: var(--rd-accent-soft);
border-radius: 50%; font-size: 13px;
}
/* === ÖFFNUNGSZEITEN === */
.rd-oeffnungszeiten {
padding: var(--rd-space-5);
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
}
.rd-oeffnungszeiten__row {
display: grid; grid-template-columns: 1fr auto;
padding: 6px 0; font-family: var(--rd-font-ui);
font-size: 14px; color: var(--rd-text-secondary);
border-bottom: 1px solid var(--rd-border);
}
.rd-oeffnungszeiten__row:last-child { border: none; }
.rd-oeffnungszeiten__row.is-today {
color: var(--rd-text); font-weight: 700;
}
.rd-oeffnungszeiten__row.is-today span:last-child {
color: var(--rd-success);
}
/* === WIKI DEFINITION === */
.rd-wiki-definition {
padding: var(--rd-space-5);
background: var(--rd-accent-soft);
border-left: 4px solid var(--rd-accent);
border-radius: var(--rd-r-md);
margin: 0 0 var(--rd-space-5);
}
.rd-wiki-definition p {
margin: 8px 0 0; font-family: var(--rd-font-display);
font-size: var(--rd-fs-md); line-height: 1.5;
color: var(--rd-text); letter-spacing: -0.01em;
}
/* === QUELLEN === */
.rd-quellen { margin-top: var(--rd-space-6); padding-top: var(--rd-space-5); border-top: 1px solid var(--rd-border); }
.rd-quellen__list {
margin: 0; padding: 0 0 0 20px;
font-size: 13px; color: var(--rd-text-secondary); line-height: 1.7;
}
.rd-quellen__list a { color: var(--rd-accent-strong); text-decoration: underline; }
/* === VERWANDTE (Produkte/Posts) === */
.rd-verwandt { margin-top: var(--rd-space-6); }
.rd-verwandt__grid {
display: grid; grid-template-columns: repeat(2, 1fr);
gap: var(--rd-space-3);
}
.rd-verwandt__item {
display: block; background: var(--rd-bg-soft);
border: 1px solid var(--rd-border); border-radius: var(--rd-r-md);
overflow: hidden; text-decoration: none;
transition: transform 200ms, box-shadow 200ms;
}
.rd-verwandt__item:hover { transform: translateY(-2px); box-shadow: var(--rd-shadow-md); }
.rd-verwandt__title {
padding: var(--rd-space-3) var(--rd-space-4);
font-family: var(--rd-font-display); font-weight: 700;
font-size: 14px; color: var(--rd-text); line-height: 1.3;
}
/* === HELLO-ELEMENTOR DEFAULTS UNTERDRÜCKEN bei rd-single-* ===
* Hello-Elementor rendert bei CPT-Singles teilweise Default-Post-Meta
* (Datum, Author, Comment-Count). Wir haben eigene Meta-Blöcke.
*/
body[class*="rd-single-"] .entry-header,
body[class*="rd-single-"] .page-header,
body[class*="rd-single-"] .post-meta,
body[class*="rd-single-"] > main > article > header:not([class*="rd-"]),
body[class*="rd-single-"] > main > article > footer:not([class*="rd-"]),
body[class*="rd-single-"] .hello-elementor-default .entry-title,
body[class*="rd-single-"] .posted-on,
body[class*="rd-single-"] .byline,
body[class*="rd-single-"] .comments-link {
display: none !important;
}
/* === QUALZUCHT-WARNUNG === */
/* Bug-Fix 2026-05-24: max-width + min-width:0 für Flex-Body, sonst stretcht Box auf
volle Viewport-Breite und Inhalt wird nicht umgebrochen → fällt aus Hero-Grid raus
auf https://2026.rundum.dog/rasse/deutscher-schaeferhund/. */
.rd-qualzucht-warnung {
display: flex; align-items: flex-start; gap: var(--rd-space-3);
padding: var(--rd-space-4);
border-radius: var(--rd-r-md);
background: #FFF5F4;
border: 1px solid var(--rd-danger);
margin: var(--rd-space-4) auto;
max-width: var(--rd-max-w, 1240px);
width: 100%;
box-sizing: border-box;
}
.rd-qualzucht-warnung > * { min-width: 0; }
.rd-qualzucht-warnung__icon {
flex-shrink: 0; width: 24px; height: 24px;
color: var(--rd-danger);
}
.rd-qualzucht-warnung__title {
font-family: var(--rd-font-display); font-weight: 700;
font-size: var(--rd-fs-md);
color: var(--rd-danger); margin-bottom: 4px;
}
/* Grenzfall-Variante: orange statt rot (weniger alarmierend) */
.rd-qualzucht-warnung--grenzfall {
background: #FFF8EC;
border-color: var(--rd-warning);
}
.rd-qualzucht-warnung--grenzfall .rd-qualzucht-warnung__icon,
.rd-qualzucht-warnung--grenzfall .rd-qualzucht-warnung__title {
color: var(--rd-warning);
}
/* === ADOPTION-BLOCK (Mission Step 2.2) === */
.rd-adoption-block {
background: var(--rd-accent-soft, #F4E3D2);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
padding: var(--rd-space-5);
margin: var(--rd-space-5) 0;
}
.rd-adoption-block__eyebrow {
font-family: var(--rd-font-ui); font-weight: 700;
font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--rd-accent-strong);
margin-bottom: 6px;
}
.rd-adoption-block__title {
font-family: var(--rd-font-display); font-weight: 700;
font-size: var(--rd-fs-lg);
color: var(--rd-text-primary);
margin: 0 0 8px;
}
.rd-adoption-block__body {
font-size: var(--rd-fs-md);
line-height: 1.6;
color: var(--rd-text-primary);
margin: 0 0 var(--rd-space-3);
}
.rd-adoption-block__links {
margin: 0;
display: flex; flex-wrap: wrap; gap: var(--rd-space-2);
}
.rd-adoption-block__cta {
display: inline-block;
padding: 8px 14px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui); font-weight: 600;
font-size: 13px;
text-decoration: none;
background: #fff;
color: var(--rd-accent-strong);
border: 1px solid var(--rd-border);
transition: background 0.15s ease, transform 0.15s ease;
}
.rd-adoption-block__cta:hover {
background: var(--rd-bg-soft);
transform: translateY(-1px);
}
.rd-adoption-block__cta--primary {
background: var(--rd-accent);
color: #fff;
border-color: var(--rd-accent);
}
.rd-adoption-block__cta--primary:hover {
background: var(--rd-accent-strong);
color: #fff;
}
/* Verstärkte Variante bei Qualzucht-Rassen */
.rd-adoption-block--verstaerkt {
background: #FFF8EC;
border-color: var(--rd-warning);
}
.rd-adoption-block--verstaerkt .rd-adoption-block__eyebrow {
color: var(--rd-warning);
}
/* === WURFANKÜNDIGUNG-PANEL (Step 2.7) === */
.rd-wurfankuendigung-panel {
background: var(--rd-accent-soft, #F4E3D2);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
padding: var(--rd-space-5);
margin: var(--rd-space-5) 0;
}
.rd-wurf-panel__title {
font-family: var(--rd-font-ui); font-weight: 700;
font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--rd-accent-strong);
margin-bottom: var(--rd-space-3);
}
.rd-wurf-badge {
display: inline-block;
padding: 6px 12px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui); font-weight: 600;
font-size: 13px;
}
.rd-wurf-badge--ok { background: #E8F5EC; color: var(--rd-success); border: 1px solid var(--rd-success); }
.rd-wurf-badge--warn { background: #FFF8EC; color: var(--rd-warning); border: 1px solid var(--rd-warning); }
.rd-wurf-qz {
margin-top: var(--rd-space-3);
padding: var(--rd-space-3);
background: #FFF5F4;
border-left: 3px solid var(--rd-danger);
border-radius: var(--rd-r-sm);
font-size: 14px; line-height: 1.5;
}
.rd-wurf-tests {
margin-top: var(--rd-space-3);
font-size: 14px; line-height: 1.5;
}
.rd-wurf-tests ul { margin: 6px 0 0; padding-left: 20px; }
.rd-wurf-tests--missing {
padding: var(--rd-space-3);
background: var(--rd-bg-soft);
border-left: 3px solid var(--rd-warning);
border-radius: var(--rd-r-sm);
}
.rd-wurf-adoption {
margin-top: var(--rd-space-3);
padding: var(--rd-space-3);
background: #fff;
border-left: 3px solid var(--rd-accent);
border-radius: var(--rd-r-sm);
font-size: 14px; line-height: 1.5;
}
/* === QUELLEN-STATUS (Wiki-GEO Phase 2 · Step 4.4) === */
.rd-quellen-status {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-left: 3px solid var(--rd-accent);
border-radius: var(--rd-r-md);
padding: var(--rd-space-4) var(--rd-space-5);
margin: var(--rd-space-5) 0;
}
.rd-quellen-status__eyebrow {
font-family: var(--rd-font-ui); font-weight: 700;
font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--rd-accent-strong);
margin-bottom: 6px;
}
.rd-quellen-status__title {
font-family: var(--rd-font-display); font-weight: 700;
font-size: var(--rd-fs-md);
color: var(--rd-text-primary);
margin: 0 0 8px;
}
.rd-quellen-status__body {
font-size: 14px;
line-height: 1.6;
color: var(--rd-text-secondary);
margin: 0 0 var(--rd-space-3);
}
.rd-quellen-status__links {
margin: 0;
display: flex; flex-wrap: wrap; gap: var(--rd-space-2);
}
.rd-quellen-status__link {
font-family: var(--rd-font-ui); font-weight: 600;
font-size: 13px;
color: var(--rd-accent-strong);
text-decoration: underline;
}
.rd-quellen-status__link:hover {
color: var(--rd-accent);
}
/* === FACHPATE-BADGE (Step 8.7) === */
.rd-fachpate-badge {
display: inline-flex; align-items: center;
padding: 4px 10px;
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong);
border: 1px solid var(--rd-accent);
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui); font-weight: 700;
font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
white-space: nowrap;
}
/* === VERIFIZIERUNGS-BADGE === */
.rd-verifizierung-badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px; border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui); font-weight: 700;
font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
}
.rd-verifizierung-badge--basis { background: var(--rd-bg-alt); color: var(--rd-text-tertiary); }
.rd-verifizierung-badge--community { background: #E8F0F5; color: #3B6783; }
.rd-verifizierung-badge--geprueft { background: #E8F5EC; color: var(--rd-success); }
.rd-verifizierung-badge--verband { background: var(--rd-accent-soft); color: var(--rd-accent-strong); }
/* === PFOTEN-RATING === */
.rd-pfoten-rating { display: inline-flex; gap: 2px; align-items: center; }
.rd-pfoten-rating__paw { color: var(--rd-border-strong); }
.rd-pfoten-rating__paw--filled { color: var(--rd-accent-strong); }
/* === NOTFALL-WIDGET (fixed, global) === */
.rd-notfall-widget {
position: fixed; bottom: 20px; right: 20px; z-index: 90;
display: flex; align-items: center; gap: 8px;
padding: 12px 20px;
border-radius: var(--rd-r-pill);
background: var(--rd-danger); color: #fff !important;
font-family: var(--rd-font-ui); font-weight: 700; font-size: 14px;
box-shadow: var(--rd-shadow-lg);
text-decoration: none;
}
.rd-notfall-widget:hover { background: #a8321f; }
/* === AUTOR-CARD (E-E-A-T-Box · Progressive-Enhancement · Roger 2026-05-06) ===
Stage 1 Baseline = Avatar (get_avatar) + display_name + Bio + Stand
Stage 2 +Quellen = Pill „X Quellen" + -Block
Stage 3 +Review = Pill „✓ Fachlich geprüft von … am …"
*/
.rd-autor-card {
display: flex; gap: 16px; align-items: flex-start;
padding: var(--rd-space-4) var(--rd-space-5);
background: var(--rd-bg-alt);
border: 1px solid var(--rd-border);
border-left: 3px solid var(--rd-accent);
border-radius: var(--rd-r-md);
/* Shortcode wird teils ohne .rd-container-Wrapper gerendert (z.B.
single-eintrag.php Zeile 747). max-width + margin-inline:auto stellen
sicher, dass die Card nie volle Page-Breite einnimmt. */
max-width: 1180px;
margin: var(--rd-space-6) auto;
}
.rd-autor-card--reviewed {
border-left-color: var(--rd-success, #10B981);
}
.rd-autor-card--unverified { /* Legacy — Backward-Compat, von neuer Render-Logik nicht mehr gesetzt */
border-left-color: var(--rd-text-tertiary);
background: var(--rd-bg-soft);
}
.rd-autor-card__avatar {
width: 56px; height: 56px; border-radius: 50%;
flex-shrink: 0;
overflow: hidden;
background: var(--rd-accent-soft);
display: flex; align-items: center; justify-content: center;
font-family: var(--rd-font-display); font-weight: 700;
font-size: 18px; color: var(--rd-accent-strong);
}
.rd-autor-card__avatar-img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.rd-autor-card__avatar--unverified { /* Legacy */
background: var(--rd-border-strong);
color: var(--rd-text-secondary);
font-weight: 400;
}
.rd-autor-card__body { min-width: 0; flex: 1; }
.rd-autor-card__name {
font-family: var(--rd-font-display); font-weight: 700;
font-size: 15px; letter-spacing: -0.01em;
color: var(--rd-text-primary);
margin-bottom: 2px;
}
.rd-autor-card__name-link {
color: inherit;
text-decoration: none;
border-bottom: 1px solid var(--rd-accent);
}
.rd-autor-card__name-link:hover { color: var(--rd-accent-strong); }
.rd-autor-card__bio {
font-family: var(--rd-font-ui); font-size: 13px;
color: var(--rd-text-secondary);
line-height: 1.5;
margin-top: 2px; margin-bottom: 6px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
.rd-autor-card__pills {
display: flex; flex-wrap: wrap; gap: 6px 8px;
margin: 6px 0;
}
.rd-autor-card__pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 3px 10px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-size: 12px; font-weight: 500;
line-height: 1.4;
}
.rd-autor-card__pill-icon { font-size: 12px; line-height: 1; }
.rd-autor-card__pill--reviewed {
background: var(--rd-accent-soft);
color: var(--rd-accent-strong);
}
.rd-autor-card__pill--reviewed a {
color: inherit;
text-decoration: underline;
text-decoration-color: var(--rd-accent);
text-underline-offset: 2px;
}
.rd-autor-card__pill--reviewed a:hover { text-decoration-color: var(--rd-accent-strong); }
.rd-autor-card__pill--sources {
background: var(--rd-bg-soft);
color: var(--rd-text-secondary);
border: 1px solid var(--rd-border);
}
.rd-autor-card__pill--linked {
text-decoration: none;
cursor: pointer;
transition: background 120ms ease;
}
.rd-autor-card__pill--linked:hover,
.rd-autor-card__pill--linked:focus-visible {
background: var(--rd-bg-warm, #FAF2EC);
color: var(--rd-accent-strong, #B56A34);
border-color: var(--rd-accent-strong, #B56A34);
}
/* Quellen-Pill als eines (Roger 2026-05-14).
Ersetzt das alte Doppelmuster „Pill-Anzeige + separate Quellen-ansehen-Zeile".
Pill bleibt visuell identisch zur sources-Pill, kriegt nur Toggle-Affordance. */
.rd-autor-card__pill-quellen { display: inline-block; }
.rd-autor-card__pill-quellen > summary.rd-autor-card__pill--toggle {
list-style: none;
cursor: pointer;
user-select: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rd-autor-card__pill-quellen > summary.rd-autor-card__pill--toggle::-webkit-details-marker { display: none; }
.rd-autor-card__pill-quellen > summary.rd-autor-card__pill--toggle::after {
content: '▾'; margin-left: 4px; font-size: 10px; line-height: 1;
transition: transform 120ms ease;
}
.rd-autor-card__pill-quellen[open] > summary.rd-autor-card__pill--toggle::after { transform: rotate(180deg); }
.rd-autor-card__pill-quellen > summary.rd-autor-card__pill--toggle:hover,
.rd-autor-card__pill-quellen > summary.rd-autor-card__pill--toggle:focus-visible {
background: var(--rd-bg-warm, #FAF2EC);
color: var(--rd-accent-strong, #B56A34);
border-color: var(--rd-accent-strong, #B56A34);
outline: none;
}
.rd-autor-card__quellen-list {
margin: 8px 0 0 18px;
padding: 0;
font-family: var(--rd-font-ui); font-size: 13px;
color: var(--rd-text-secondary);
}
.rd-autor-card__quellen-list li { margin: 2px 0; }
.rd-autor-card__quellen-list li a {
color: var(--rd-text-primary);
border-bottom: 1px solid var(--rd-border-strong);
text-decoration: none;
}
.rd-autor-card__quellen-list li a:hover {
color: var(--rd-accent-strong);
border-bottom-color: var(--rd-accent);
}
.rd-autor-card__meta {
font-family: var(--rd-font-ui); font-size: 13px;
color: var(--rd-text-secondary);
line-height: 1.5;
margin-top: 4px;
}
.rd-autor-card__meta-item { display: block; }
.rd-autor-card__meta-item + .rd-autor-card__meta-item { margin-top: 2px; }
.rd-autor-card__quellen {
margin-top: 8px;
font-family: var(--rd-font-ui); font-size: 13px;
}
.rd-autor-card__quellen summary {
cursor: pointer;
color: var(--rd-text-secondary);
font-weight: 500;
}
.rd-autor-card__quellen summary:hover { color: var(--rd-accent-strong); }
.rd-autor-card__quellen ol {
margin: 8px 0 0 18px;
padding: 0;
color: var(--rd-text-secondary);
}
.rd-autor-card__quellen ol li { margin: 2px 0; }
.rd-autor-card__quellen ol li a {
color: var(--rd-text-primary);
border-bottom: 1px solid var(--rd-border-strong);
text-decoration: none;
}
.rd-autor-card__quellen ol li a:hover {
color: var(--rd-accent-strong);
border-bottom-color: var(--rd-accent);
}
.rd-autor-card__title { /* Legacy-Klasse — bleibt für Backward-Compat */
font-family: var(--rd-font-ui); font-size: 12px;
color: var(--rd-text-secondary);
}
/* === STECKBRIEF (Definition-List für Rasse/Eintrag) === */
.rd-steckbrief {
background: var(--rd-bg-soft);
border-radius: var(--rd-r-lg);
border: 1px solid var(--rd-border);
padding: var(--rd-space-5);
margin: 0;
}
.rd-steckbrief__row {
display: grid; grid-template-columns: 1fr 1fr;
padding-bottom: 12px; margin-bottom: 12px;
border-bottom: 1px solid var(--rd-border);
}
.rd-steckbrief__row:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.rd-steckbrief__label {
font-family: var(--rd-font-ui); font-size: 12px;
color: var(--rd-text-secondary);
text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600;
}
.rd-steckbrief__value {
margin: 0; font-family: var(--rd-font-ui);
font-size: 14px; color: var(--rd-text); font-weight: 600;
}
/* === READING-PROGRESS-BAR === */
.rd-reading-progress {
position: fixed; top: 0; left: 0; right: 0; height: 3px;
z-index: 200; background: transparent;
}
.rd-reading-progress__bar {
height: 100%; width: 0%;
background: var(--rd-accent-strong);
transition: width 100ms linear;
}
/* === RESPONSIVE === */
@media (min-width: 680px) {
.rd-grid--cards-2 { grid-template-columns: repeat(2, 1fr); }
.rd-grid--cards-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 960px) {
.rd-grid--cards-3 { grid-template-columns: repeat(3, 1fr); }
.rd-grid--cards-4 { grid-template-columns: repeat(4, 1fr); }
.rd-grid--detail { grid-template-columns: 1fr 320px; gap: var(--rd-space-7); }
.rd-sidebar--sticky { position: sticky; top: 120px; align-self: start; }
}
@media (min-width: 1200px) {
.rd-grid--detail { grid-template-columns: 1fr 380px; }
}
/* === ACCESSIBILITY === */
:focus-visible {
outline: 2px solid var(--rd-accent-strong);
outline-offset: 2px;
border-radius: 4px;
}
/* === RASSEKLUBS-LISTE (Repeater-Rendering) === */
.rd-rasseklubs-list {
display: flex; flex-direction: column; gap: var(--rd-space-4);
margin: var(--rd-space-5) 0;
}
.rd-rasseklubs-list__group {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: var(--rd-fs-md);
letter-spacing: -0.01em;
color: var(--rd-text);
margin: 0 0 var(--rd-space-2);
padding-bottom: 4px;
border-bottom: 1px solid var(--rd-border);
}
.rd-rasseklubs-list__items {
list-style: none; padding: 0; margin: 0;
display: flex; flex-direction: column; gap: var(--rd-space-3);
}
.rd-rasseklubs-list__item {
padding: var(--rd-space-3);
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
}
.rd-rasseklubs-list__name {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: 15px;
color: var(--rd-text);
letter-spacing: -0.01em;
text-decoration: none;
}
a.rd-rasseklubs-list__name:hover { color: var(--rd-accent-strong); }
.rd-rasseklubs-list__meta {
margin-top: 4px;
font-family: var(--rd-font-ui);
font-size: 13px;
color: var(--rd-text-secondary);
}
.rd-rasseklubs-list__meta a {
color: var(--rd-accent-strong);
border-bottom: 1px solid var(--rd-accent-soft);
}
/* === FCI-PDF-DOWNLOAD === */
.rd-fci-download { margin-top: var(--rd-space-4); }
/* === REGION-SVG === */
.rd-region-svg { display: block; max-width: 100%; height: auto; }
.rd-region-svg--kanton, .rd-region-svg--bundesland { max-height: 220px; }
.rd-region-svg--overview { max-height: 360px; }
/* === META-BOX (generisch: Event-Meta, Eintrag-Kontakt, Zuechter-Meta, …) === */
.rd-meta-box {
margin: 0 0 var(--rd-space-5);
padding: var(--rd-space-4);
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
display: flex; flex-direction: column; gap: 10px;
}
.rd-meta-box__row {
display: grid; grid-template-columns: 120px 1fr; gap: 8px;
padding-bottom: 10px; border-bottom: 1px solid var(--rd-border);
font-family: var(--rd-font-ui); font-size: 14px;
}
.rd-meta-box__row:last-child { border-bottom: none; padding-bottom: 0; }
.rd-meta-box__row dt { font-weight: 600; color: var(--rd-text-secondary); margin: 0; display: flex; align-items: center; }
.rd-meta-box__row dd { margin: 0; font-weight: 500; color: var(--rd-text); }
/* === WIKI-DEFINITION (Callout oben) === */
.rd-wiki-definition {
background: var(--rd-accent-soft);
border-left: 4px solid var(--rd-accent-strong);
border-radius: var(--rd-r-sm);
padding: var(--rd-space-4) var(--rd-space-5);
margin: 0 0 var(--rd-space-5);
}
.rd-wiki-definition__label {
font-family: var(--rd-font-ui); font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--rd-accent-strong); margin-bottom: 6px;
}
.rd-wiki-definition__text {
margin: 0; font-size: 17px; line-height: 1.55;
font-family: var(--rd-font-display); font-weight: 500;
color: var(--rd-text); letter-spacing: -0.01em;
}
/* === QUELLEN-LISTE === */
.rd-quellen-liste { margin-top: var(--rd-space-6); padding-top: var(--rd-space-5); border-top: 1px solid var(--rd-border); }
.rd-quellen-liste__title {
font-family: var(--rd-font-ui); font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--rd-accent-strong); margin: 0 0 12px;
}
.rd-quellen-liste__list { margin: 0; padding-left: 20px; font-size: 13px; color: var(--rd-text-secondary); line-height: 1.7; }
.rd-quellen-liste__list a { color: var(--rd-accent-strong); border-bottom: 1px solid var(--rd-accent-soft); }
/* === VERWANDTE PRODUKTE === */
.rd-verwandte-produkte { margin-top: var(--rd-space-5); }
.rd-verwandte-produkte__title {
font-family: var(--rd-font-display); font-weight: 700;
font-size: var(--rd-fs-lg); margin: 0 0 var(--rd-space-3);
letter-spacing: -0.01em;
}
.rd-verwandte-produkte__grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--rd-space-3);
}
.rd-verwandte-produkte__card {
display: block; background: var(--rd-bg-soft);
border: 1px solid var(--rd-border); border-radius: var(--rd-r-md);
overflow: hidden; text-decoration: none; color: var(--rd-text);
transition: transform 150ms, box-shadow 150ms;
}
.rd-verwandte-produkte__card:hover { transform: translateY(-2px); box-shadow: var(--rd-shadow-md); }
.rd-verwandte-produkte__img { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; }
.rd-verwandte-produkte__body { padding: var(--rd-space-3) var(--rd-space-3) var(--rd-space-4); display: flex; flex-direction: column; gap: 4px; }
/* === EVENT-CTA === */
a.rd-event-cta { display: inline-flex; margin-top: var(--rd-space-3); }
/* === EINTRAG-ÖFFNUNGSZEITEN === */
.rd-eintrag-oeffnungszeiten {
margin-top: var(--rd-space-4); padding: var(--rd-space-4);
background: var(--rd-bg-soft); border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
}
.rd-eintrag-oeffnungszeiten__title {
font-family: var(--rd-font-ui); font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--rd-accent-strong); margin: 0 0 10px;
}
.rd-eintrag-oeffnungszeiten__row {
display: grid; grid-template-columns: 1fr 1fr;
padding: 6px 0; border-bottom: 1px solid var(--rd-border);
font-family: var(--rd-font-ui); font-size: 14px;
}
.rd-eintrag-oeffnungszeiten__row:last-child { border-bottom: none; padding-bottom: 0; }
.rd-eintrag-oeffnungszeiten__row span:last-child { color: var(--rd-text); font-weight: 600; }
/* === BUTTON-VARIANTE SEKUNDÄR === */
.rd-btn--secondary {
background: var(--rd-bg-soft); color: var(--rd-text);
border: 1px solid var(--rd-border-strong);
font-weight: 600;
}
.rd-btn--secondary:hover {
background: var(--rd-accent-soft, #F4E3D2);
border-color: var(--rd-accent-strong);
color: var(--rd-accent-strong);
transform: translateY(-1px);
}
/* ═══════════════════════════════════════════════════
* CPT: UEBUNG
* ═══════════════════════════════════════════════════ */
.rd-uebung-ziel, .rd-uebung-tipps {
margin: var(--rd-space-4) 0; padding: var(--rd-space-4) var(--rd-space-5);
border-radius: var(--rd-r-md);
background: var(--rd-accent-soft, #F4E3D2);
border-left: 4px solid var(--rd-accent-strong);
}
.rd-uebung-tipps { background: #FFFBEA; border-left-color: #D4A017; }
.rd-uebung-ziel__label, .rd-uebung-tipps__label {
font-family: var(--rd-font-ui); font-weight: 700; font-size: 12px;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--rd-accent-strong); margin-bottom: 8px;
display: flex; align-items: center;
}
.rd-uebung-tipps__label { color: #8A6D07; }
.rd-uebung-ziel__text { margin: 0; color: var(--rd-text); font-size: 16px; line-height: 1.6; }
.rd-uebung-tipps__text { color: var(--rd-text); font-size: 15px; line-height: 1.6; }
.rd-uebung-tipps__text p { margin: 0 0 10px; }
.rd-uebung-tipps__text p:last-child { margin-bottom: 0; }
.rd-uebung-schritte { margin: var(--rd-space-6) 0; }
.rd-uebung-schritte__title {
font-family: var(--rd-font-heading); font-size: 22px; font-weight: 700;
color: var(--rd-text, #1A1A1A); margin: 0 0 var(--rd-space-4);
}
.rd-uebung-schritte__list { list-style: none; padding: 0; margin: 0; counter-reset: uebung-step; }
.rd-uebung-schritte__step {
display: flex; gap: var(--rd-space-4);
padding: var(--rd-space-4) 0;
border-bottom: 1px solid var(--rd-border);
}
.rd-uebung-schritte__step:last-child { border-bottom: none; }
.rd-uebung-schritte__num {
flex-shrink: 0; width: 36px; height: 36px;
background: var(--rd-accent-strong); color: #fff;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-family: var(--rd-font-ui);
}
.rd-uebung-schritte__titel {
font-family: var(--rd-font-heading); font-size: 17px; font-weight: 700;
color: var(--rd-text, #1A1A1A); margin: 4px 0 6px;
}
.rd-uebung-schritte__text { margin: 0; color: var(--rd-text); line-height: 1.65; }
.rd-uebung-meta { }
/* ═══════════════════════════════════════════════════
* CPT: VERMITTLUNG
* ═══════════════════════════════════════════════════ */
.rd-vermittlung-charakter { margin: var(--rd-space-5) 0; }
.rd-vermittlung-charakter__block { margin-bottom: var(--rd-space-5); }
.rd-vermittlung-charakter__title {
font-family: var(--rd-font-heading); font-size: 18px; font-weight: 700;
color: var(--rd-text, #1A1A1A); margin: 0 0 var(--rd-space-3);
display: flex; align-items: center;
}
.rd-vermittlung-charakter__text { color: var(--rd-text); line-height: 1.65; }
.rd-vermittlung-charakter__text p { margin: 0 0 var(--rd-space-3); }
.rd-vermittlung-meta__status {
display: inline-block; padding: 4px 10px; border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui); font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em;
}
.rd-vermittlung-meta__status--offen { background: #FEE2E2; color: #B91C1C; }
.rd-vermittlung-meta__status--vermittelt { background: #D1FAE5; color: #065F46; }
/* ═══════════════════════════════════════════════════
* CPT: AUSFLUGSZIEL
* ═══════════════════════════════════════════════════ */
.rd-ausflugsziel-features {
margin: var(--rd-space-5) 0; padding: var(--rd-space-5);
background: var(--rd-bg-soft); border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
}
.rd-ausflugsziel-features__title {
font-family: var(--rd-font-heading); font-size: 18px; font-weight: 700;
color: var(--rd-text, #1A1A1A); margin: 0 0 var(--rd-space-3);
}
.rd-ausflugsziel-features__list {
list-style: none; padding: 0; margin: 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;
}
.rd-ausflugsziel-features__item {
display: flex; align-items: center;
font-family: var(--rd-font-ui); font-size: 14px;
}
.rd-ausflugsziel-features__item--yes { color: var(--rd-text); }
.rd-ausflugsziel-features__item--yes svg { color: #10B981; }
.rd-ausflugsziel-features__item--no { color: var(--rd-text-secondary, #595959); }
.rd-ausflugsziel-features__item--no svg { color: #9CA3AF; }
.rd-ausflugsziel-features__note {
margin-top: var(--rd-space-4); padding-top: var(--rd-space-4);
border-top: 1px solid var(--rd-border);
font-size: 14px; color: var(--rd-text); line-height: 1.6;
}
@media (max-width: 600px) {
.rd-ausflugsziel-features__list { grid-template-columns: 1fr; }
}
/* Standort-Map (generisch, ausflugsziel + gefahr) */
.rd-standort-map {
margin: var(--rd-space-4) 0; padding: var(--rd-space-4);
background: var(--rd-bg-soft); border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
}
.rd-standort-map__title {
font-family: var(--rd-font-ui); font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--rd-accent-strong); margin: 0 0 8px;
display: flex; align-items: center;
}
.rd-standort-map__coords {
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 13px; color: var(--rd-text-secondary, #595959); margin: 0 0 12px;
}
.rd-standort-map__links { display: flex; flex-wrap: wrap; gap: 8px; }
.rd-standort-map__links .rd-btn { height: 36px; padding: 0 14px; font-size: 13px; }
/* ═══════════════════════════════════════════════════
* CPT: ZUECHTER
* ═══════════════════════════════════════════════════ */
.rd-zuechter-elterntiere { margin: var(--rd-space-6) 0; }
.rd-zuechter-elterntiere__title, .rd-zuechter-wuerfe__title {
font-family: var(--rd-font-heading); font-size: 22px; font-weight: 700;
color: var(--rd-text, #1A1A1A); margin: 0 0 var(--rd-space-4);
}
.rd-zuechter-elterntiere__grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: var(--rd-space-4);
}
.rd-zuechter-elterntiere__card {
background: #fff; border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md); overflow: hidden;
}
.rd-zuechter-elterntiere__foto {
width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block;
}
.rd-zuechter-elterntiere__body { padding: var(--rd-space-3) var(--rd-space-4) var(--rd-space-4); }
.rd-zuechter-elterntiere__name {
font-family: var(--rd-font-heading); font-size: 17px; font-weight: 700;
color: var(--rd-text, #1A1A1A); margin: 0 0 4px;
}
.rd-zuechter-elterntiere__meta {
font-family: var(--rd-font-ui); font-size: 13px; color: var(--rd-text-secondary, #595959); margin-bottom: 8px;
}
.rd-zuechter-elterntiere__tests, .rd-zuechter-elterntiere__stamm {
font-size: 13px; color: var(--rd-text); margin: 6px 0 0; line-height: 1.5;
}
.rd-zuechter-elterntiere__stamm a { color: var(--rd-accent-strong); }
.rd-zuechter-wuerfe { margin: var(--rd-space-6) 0; }
.rd-zuechter-wuerfe__card {
background: #fff; border: 1px solid var(--rd-border);
border-left: 4px solid var(--rd-accent-strong);
border-radius: var(--rd-r-md); padding: var(--rd-space-4);
margin-bottom: var(--rd-space-3);
}
.rd-zuechter-wuerfe__head {
font-family: var(--rd-font-ui); font-size: 14px; color: var(--rd-text);
margin-bottom: 8px; line-height: 1.7;
}
.rd-zuechter-wuerfe__status {
display: inline-block; padding: 3px 8px; background: var(--rd-accent-soft);
color: var(--rd-accent-strong); border-radius: var(--rd-r-sm);
font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em;
margin-right: 4px;
}
.rd-zuechter-wuerfe__info { color: var(--rd-text); font-size: 14px; line-height: 1.6; }
.rd-zuechter-wuerfe__kontakt {
margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--rd-border);
font-size: 13px; color: var(--rd-text-secondary);
}
.rd-zuechter-meta__badge {
display: inline-block; padding: 3px 8px; border-radius: var(--rd-r-sm);
font-family: var(--rd-font-ui); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px;
}
.rd-zuechter-meta__badge--offen { background: #D1FAE5; color: #065F46; }
.rd-zuechter-meta__badge--warte { background: var(--rd-accent-soft, #F4E3D2); color: var(--rd-accent-strong); }
/* ═══════════════════════════════════════════════════
* CPT: UNTERKUNFT
* ═══════════════════════════════════════════════════ */
.rd-unterkunft-hundedetails {
margin: var(--rd-space-5) 0; padding: var(--rd-space-5);
background: var(--rd-bg-soft); border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
}
.rd-unterkunft-hundedetails__title {
font-family: var(--rd-font-heading); font-size: 18px; font-weight: 700;
color: var(--rd-text, #1A1A1A); margin: 0 0 var(--rd-space-3);
display: flex; align-items: center;
}
.rd-unterkunft-hundedetails__features {
list-style: none; padding: 0; margin: var(--rd-space-3) 0;
display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 16px;
}
.rd-unterkunft-hundedetails__item { display: flex; align-items: center; font-size: 14px; font-family: var(--rd-font-ui); }
.rd-unterkunft-hundedetails__item--yes svg { color: #10B981; }
.rd-unterkunft-hundedetails__item--no { color: var(--rd-text-secondary, #595959); }
.rd-unterkunft-hundedetails__item--no svg { color: #9CA3AF; }
.rd-unterkunft-hundedetails__nahe {
margin-top: var(--rd-space-3); padding-top: var(--rd-space-3);
border-top: 1px solid var(--rd-border);
font-size: 14px; color: var(--rd-text); line-height: 1.6;
}
a.rd-unterkunft-buchung { display: inline-flex; margin-top: var(--rd-space-3); }
@media (max-width: 600px) {
.rd-unterkunft-hundedetails__features { grid-template-columns: 1fr; }
}
/* ═══════════════════════════════════════════════════
* CPT: PRODUKT
* ═══════════════════════════════════════════════════ */
.rd-produkt-bewertung {
margin: var(--rd-space-5) 0; padding: var(--rd-space-5);
background: var(--rd-accent-soft, #F4E3D2); border: 1px solid var(--rd-accent-soft);
border-radius: var(--rd-r-md);
display: flex; align-items: center; gap: var(--rd-space-4);
}
.rd-produkt-bewertung__marke {
font-family: var(--rd-font-ui); font-weight: 700; font-size: 13px;
text-transform: uppercase; letter-spacing: 0.1em;
color: var(--rd-text-secondary);
}
.rd-produkt-bewertung__stars { color: var(--rd-accent-strong); }
.rd-produkt-bewertung__label {
margin-top: 6px; font-size: 13px; color: var(--rd-text-secondary); font-family: var(--rd-font-ui);
}
.rd-produkt-vor-nachteile {
display: grid; grid-template-columns: 1fr 1fr; gap: var(--rd-space-4);
margin: var(--rd-space-5) 0;
}
.rd-produkt-vor-nachteile__col {
padding: var(--rd-space-4); border-radius: var(--rd-r-md); border: 1px solid var(--rd-border);
background: #fff;
}
.rd-produkt-vor-nachteile__col--pro { border-left: 4px solid #10B981; }
.rd-produkt-vor-nachteile__col--con { border-left: 4px solid #EF4444; }
.rd-produkt-vor-nachteile__title {
font-family: var(--rd-font-heading); font-size: 15px; font-weight: 700;
margin: 0 0 var(--rd-space-3); color: var(--rd-text, #1A1A1A);
}
.rd-produkt-vor-nachteile__list { list-style: none; padding: 0; margin: 0; }
.rd-produkt-vor-nachteile__item {
display: flex; align-items: flex-start;
padding: 6px 0; font-size: 14px; line-height: 1.5; color: var(--rd-text);
}
.rd-produkt-vor-nachteile__item--pro svg { color: #10B981; flex-shrink: 0; margin-top: 2px; }
.rd-produkt-vor-nachteile__item--con svg { color: #EF4444; flex-shrink: 0; margin-top: 2px; }
@media (max-width: 600px) {
.rd-produkt-vor-nachteile { grid-template-columns: 1fr; }
}
.rd-produkt-kauflink {
margin-top: var(--rd-space-3);
display: flex; flex-direction: column; gap: 8px;
}
.rd-produkt-kauflink__btn { justify-content: center; }
.rd-produkt-kauflink__hint {
font-size: 11px; color: var(--rd-text-secondary, #595959); margin: 4px 0 0; text-align: center;
}
/* ═══════════════════════════════════════════════════
* CPT: JOB
* ═══════════════════════════════════════════════════ */
.rd-job-block { margin: var(--rd-space-5) 0; }
.rd-job-block__title {
font-family: var(--rd-font-heading); font-size: 20px; font-weight: 700;
color: var(--rd-text, #1A1A1A); margin: 0 0 var(--rd-space-3);
display: flex; align-items: center;
}
.rd-job-block__text { color: var(--rd-text); line-height: 1.65; }
.rd-job-block__text p { margin: 0 0 var(--rd-space-3); }
.rd-job-meta__badge {
display: inline-block; padding: 3px 8px; background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong); border-radius: var(--rd-r-sm);
font-family: var(--rd-font-ui); font-size: 12px; font-weight: 700;
}
a.rd-job-bewerbung-cta { display: inline-flex; margin-top: var(--rd-space-3); }
.rd-job-bewerbung-cta--text {
margin-top: var(--rd-space-3); padding: var(--rd-space-3) var(--rd-space-4);
background: var(--rd-accent-soft, #F4E3D2); border-radius: var(--rd-r-md);
font-family: var(--rd-font-ui); font-size: 14px; color: var(--rd-text);
display: flex; align-items: center;
}
/* ═══════════════════════════════════════════════════
* CPT: GEFAHR
* ═══════════════════════════════════════════════════ */
.rd-gefahr-meta__status {
display: inline-block; padding: 3px 8px; border-radius: var(--rd-r-sm);
font-family: var(--rd-font-ui); font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.08em; margin-right: 4px;
}
.rd-gefahr-meta__status--aktiv { background: #FEE2E2; color: #B91C1C; }
.rd-gefahr-meta__status--archiv { background: #E5E7EB; color: #4B5563; }
.rd-gefahr-meta__status--offiziell { background: #DBEAFE; color: #1E3A8A; }
/* ═══════════════════════════════════════════════════
* CPT: UNTERHALTUNG — Mythen-Check
* ═══════════════════════════════════════════════════ */
.rd-unterhaltung-mythos {
margin: var(--rd-space-5) 0; padding: var(--rd-space-5);
background: var(--rd-bg-soft); border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
}
.rd-unterhaltung-mythos__label {
font-family: var(--rd-font-ui); font-weight: 700; font-size: 11px;
text-transform: uppercase; letter-spacing: 0.12em;
color: var(--rd-accent-strong); margin-bottom: 10px;
}
.rd-unterhaltung-mythos__badge {
display: inline-block; padding: 6px 14px; border-radius: var(--rd-r-pill);
font-family: var(--rd-font-heading); font-size: 18px; font-weight: 700;
margin-bottom: var(--rd-space-3);
}
.rd-unterhaltung-mythos__badge--ja { background: #D1FAE5; color: #065F46; }
.rd-unterhaltung-mythos__badge--nein { background: #FEE2E2; color: #B91C1C; }
.rd-unterhaltung-mythos__badge--teils { background: #FEF3C7; color: #92400E; }
.rd-unterhaltung-mythos__text { color: var(--rd-text); line-height: 1.65; }
.rd-unterhaltung-mythos__text p { margin: 0 0 var(--rd-space-3); }
/* === ARCHIVE-TEMPLATES (rd-archive__*) ===
Layout-Container für alle 13 CPT-Archive-Templates. Baseline ist
hunderasse-archive.json. Siehe ARCHIVE-BASELINE-SPEC.md */
/* Grid-Base-Rule (rd-grid--cards-* liefert nur die Columns) */
.rd-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--rd-space-4);
}
/* Re-apply cards-N nach Base, damit Source-Order-Cascade bei gleicher
Specificity die Media-Query-Regeln von weiter oben nicht überschreibt. */
@media (min-width: 680px) {
.rd-grid.rd-grid--cards-2 { grid-template-columns: repeat(2, 1fr); }
.rd-grid.rd-grid--cards-3 { grid-template-columns: repeat(2, 1fr); }
.rd-grid.rd-grid--cards-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
.rd-grid.rd-grid--cards-3 { grid-template-columns: repeat(3, 1fr); }
.rd-grid.rd-grid--cards-4 { grid-template-columns: repeat(4, 1fr); }
}
/* Hero-Block — Breite und h-Padding kommen aus .rd-container (inner wrapper).
Welle-47 (2026-05-23): Background + Border-Bottom für konsistenten
Hero-Look — vorher fielen Archive-Heroes auf Page-BG zurück, während
Standort-Heroes bereits --rd-bg-alt zeigten. Roger 2026-05-23: „Standart
aufbau, der sich durch die ganze Webseite durchzieht". */
.rd-archive-hero {
padding-top: var(--rd-space-6);
padding-bottom: var(--rd-space-5);
background: var(--rd-bg-alt);
border-bottom: 1px solid var(--rd-border);
}
.rd-archive__breadcrumb {
font-family: var(--rd-font-ui);
font-size: 13px;
color: var(--rd-text-secondary);
margin-bottom: var(--rd-space-3);
}
.rd-archive__title {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: clamp(32px, 4vw, 48px);
color: var(--rd-text);
line-height: 1.1;
letter-spacing: -0.02em;
margin: 0 0 var(--rd-space-3);
}
.rd-archive__lead {
font-size: 17px;
color: var(--rd-text-secondary);
line-height: 1.55;
max-width: 720px;
}
.rd-archive__lead p { margin: 0 0 var(--rd-space-2); }
.rd-archive__count {
font-family: var(--rd-font-ui);
font-size: 13px;
font-weight: 600;
color: var(--rd-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: var(--rd-space-3);
}
/* Notice (z.B. Ort nicht gefunden) */
.rd-archive__notice {
margin-top: var(--rd-space-2);
padding: 10px 14px;
border-radius: 8px;
font-size: 14px;
line-height: 1.5;
max-width: 720px;
}
.rd-archive__notice--warn {
background: var(--rd-warn-soft, #FEF6E7);
color: var(--rd-warn-fg, #7A4A0D);
border-left: 3px solid var(--rd-warn, #D08A1A);
}
/* Filter-Bar (wrappt .rd-filter-bar aus der bestehenden Komponente) */
.rd-archive-filterbar {
position: sticky;
top: 60px;
z-index: 40;
background: rgb(251, 247, 242);
border-bottom: 1px solid var(--rd-border);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}
.rd-archive-filterbar__inner {
max-width: 1180px;
margin: 0 auto;
padding: var(--rd-space-3) var(--rd-space-4);
display: flex;
align-items: center;
gap: var(--rd-space-3);
flex-wrap: wrap;
}
.rd-archive__chips {
display: flex;
gap: 6px;
flex-wrap: nowrap;
overflow-x: auto;
scrollbar-width: none;
flex: 1 1 auto;
min-width: 0;
}
.rd-archive__chips::-webkit-scrollbar { display: none; }
.rd-archive__more-btn { flex: 0 0 auto; }
/* === JSF-Checkboxes als Pill-Chips ===
Default-Markup von JetSmartFilters (jet-checkboxes-list) wird in den
Archive-Filter-Bars als Pill-Chips dargestellt. Anker: jedes Filter-
Widget bekommt eine Element-ID rd-archive__chips-{primary|secondary}.
Specificity: Attribute-Prefix matcht alle Filter-Widgets, kein !important
noetig solange Elementor-Defaults nicht zu spezifisch sind. */
[id^="rd-archive__chips"] .jet-checkboxes-list-wrapper {
display: flex; flex-wrap: nowrap; gap: 6px;
border: 0; padding: 0; margin: 0;
}
[id^="rd-archive__chips"] .jet-checkboxes-list__row {
display: inline-flex;
margin: 0;
}
[id^="rd-archive__chips"] .jet-checkboxes-list__input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0; height: 0;
}
[id^="rd-archive__chips"] .jet-checkboxes-list__item {
cursor: pointer;
display: inline-block;
margin: 0;
}
[id^="rd-archive__chips"] .jet-checkboxes-list__button {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 600;
font-size: 13px;
background: var(--rd-bg-soft);
color: var(--rd-text);
border: 1px solid var(--rd-border);
white-space: nowrap;
transition: background 150ms, color 150ms, border-color 150ms;
}
[id^="rd-archive__chips"] .jet-checkboxes-list__button:hover {
background: var(--rd-bg-alt);
border-color: var(--rd-border-strong);
}
[id^="rd-archive__chips"] .jet-checkboxes-list__decorator {
display: none;
}
[id^="rd-archive__chips"] .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button {
background: var(--rd-text);
color: var(--rd-bg);
border-color: var(--rd-text);
}
[id^="rd-archive__chips"] .jet-checkboxes-list__input:checked + .jet-checkboxes-list__button .jet-checkboxes-list__decorator {
display: inline-flex;
}
[id^="rd-archive__chips"] .jet-checkboxes-list__checked-icon,
[id^="rd-archive__chips"] .jet-checkboxes-list__checked-icon svg {
width: 12px; height: 12px;
}
[id^="rd-archive__chips"] .jet-checkboxes-list__checked-icon svg path {
fill: currentColor;
}
/* JSF-Reset: legend/fieldset Browser-Defaults killen (uebernehmen Border etc) */
[id^="rd-archive__chips"] fieldset.jet-checkboxes-list-wrapper {
border: 0; padding: 0; min-width: 0;
}
/* Tablet/Desktop: Pills umbrechen statt horizontal scrollen.
Mobile bleibt scroll-snap (siehe .rd-archive__chips Default oben). */
@media (min-width: 680px) {
.rd-archive__chips {
flex-wrap: wrap;
overflow-x: visible;
}
[id^="rd-archive__chips"] .jet-checkboxes-list-wrapper {
flex-wrap: wrap;
}
}
/* Grid-Block — Breite aus Parent (.rd-container), nur vertikales Padding */
.rd-archive-grid {
padding-top: var(--rd-space-5);
padding-bottom: var(--rd-space-5);
}
.rd-archive__grid { gap: var(--rd-space-4); }
/* Footer-CTA — Full-bleed Band, inneres .rd-container für content-Breite */
.rd-archive-footer {
margin-top: var(--rd-space-7);
padding-top: var(--rd-space-6);
padding-bottom: var(--rd-space-6);
background: var(--rd-bg-alt);
border-top: 1px solid var(--rd-border);
}
.rd-archive__footer-cta {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
padding: var(--rd-space-5);
text-align: center;
}
.rd-archive__footer-heading {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: 22px;
margin: 0 0 var(--rd-space-2);
color: var(--rd-text);
}
.rd-archive__footer-text { color: var(--rd-text-secondary); margin: 0; }
.rd-archive__footer-text a { margin-top: var(--rd-space-3); }
/* Mobile: Filter-Bar schrumpft, mehr-btn eigene Zeile */
@media (max-width: 679px) {
.rd-archive-hero { padding: var(--rd-space-4) var(--rd-space-3); }
.rd-archive-filterbar__inner { padding: var(--rd-space-2) var(--rd-space-3); }
.rd-archive__title { font-size: 28px; }
.rd-archive__lead { font-size: 15px; }
}
/* === HERO — image-less CPTs (wiki, uebung, unterhaltung, gefahr) ===
Diese CPTs haben systematisch kein Featured Image. Hero-Block wird
zum kompakten Text-Hero ohne reservierten 16:9-Platzhalter. */
:is(.rd-single-wiki, .rd-single-uebung, .rd-single-unterhaltung, .rd-single-gefahr) .rd-hero {
aspect-ratio: auto;
min-height: 0;
max-height: none;
padding: var(--rd-space-5) 0 var(--rd-space-3);
overflow: visible;
}
:is(.rd-single-wiki, .rd-single-uebung, .rd-single-unterhaltung, .rd-single-gefahr) .rd-hero__image,
:is(.rd-single-wiki, .rd-single-uebung, .rd-single-unterhaltung, .rd-single-gefahr) .rd-hero__overlay {
display: none;
}
:is(.rd-single-wiki, .rd-single-uebung, .rd-single-unterhaltung, .rd-single-gefahr) .rd-hero__back,
:is(.rd-single-wiki, .rd-single-uebung, .rd-single-unterhaltung, .rd-single-gefahr) .elementor-widget-button:has(.rd-hero__back) {
position: relative !important;
top: auto !important;
left: auto !important;
margin-bottom: var(--rd-space-3);
}
:is(.rd-single-wiki, .rd-single-uebung, .rd-single-unterhaltung, .rd-single-gefahr) .rd-hero__back {
background: var(--rd-bg-soft) !important;
box-shadow: none !important;
border: 1px solid var(--rd-border) !important;
}
/* Fallback fuer image-bound CPTs ohne Featured Image: Hero nur rendern wenn Bild existiert */
.rd-hero:not(:has(img, [style*="background-image"])) {
aspect-ratio: auto;
min-height: 0;
padding: var(--rd-space-4) 0;
}
.rd-hero:not(:has(img, [style*="background-image"])) .rd-hero__overlay { display: none; }
.rd-hero:not(:has(img, [style*="background-image"])) .rd-hero__back,
.rd-hero:not(:has(img, [style*="background-image"])) .elementor-widget-button:has(.rd-hero__back) {
position: relative !important;
top: auto !important;
left: auto !important;
margin-bottom: var(--rd-space-3);
}
.rd-hero:not(:has(img, [style*="background-image"])) .rd-hero__back {
background: var(--rd-bg-soft) !important;
box-shadow: none !important;
border: 1px solid var(--rd-border) !important;
width: auto !important;
white-space: nowrap;
}
/* === JSF-CHIPS — Pills statt Default-Checkboxen ===
Greift Chip-Widgets in .rd-archive-filterbar (robuster Parent-Selector, weil
css_classes auf Widget-Ebene vom Import gestripped werden koennen) + zusaetzlich
die BEM-Klassen falls vorhanden. */
.rd-archive-filterbar .jet-smart-filters-checkboxes__list,
.rd-archive__chips-primary .jet-smart-filters-checkboxes__list,
.rd-archive__chips-secondary .jet-smart-filters-checkboxes__list {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
padding: 0;
margin: 0;
}
.rd-archive-filterbar .jet-smart-filters-checkboxes__row,
.rd-archive__chips-primary .jet-smart-filters-checkboxes__row,
.rd-archive__chips-secondary .jet-smart-filters-checkboxes__row {
margin: 0 !important;
padding: 0 !important;
}
.rd-archive-filterbar .jet-smart-filters-checkboxes__label,
.rd-archive__chips-primary .jet-smart-filters-checkboxes__label,
.rd-archive__chips-secondary .jet-smart-filters-checkboxes__label {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 6px 14px;
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-pill);
background: #fff;
font-family: var(--rd-font-ui);
font-weight: 500;
font-size: 14px;
color: var(--rd-text);
cursor: pointer;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rd-archive-filterbar .jet-smart-filters-checkboxes__label:hover,
.rd-archive__chips-primary .jet-smart-filters-checkboxes__label:hover,
.rd-archive__chips-secondary .jet-smart-filters-checkboxes__label:hover {
background: var(--rd-bg-soft);
border-color: var(--rd-accent);
}
.rd-archive-filterbar input[type="checkbox"],
.rd-archive-filterbar .jet-smart-filters-checkboxes__decorator,
.rd-archive__chips-primary input[type="checkbox"],
.rd-archive__chips-secondary input[type="checkbox"],
.rd-archive__chips-primary .jet-smart-filters-checkboxes__decorator,
.rd-archive__chips-secondary .jet-smart-filters-checkboxes__decorator {
display: none !important;
}
.rd-archive-filterbar .jet-smart-filters-checkboxes__row.checked .jet-smart-filters-checkboxes__label,
.rd-archive-filterbar input[type="checkbox"]:checked ~ .jet-smart-filters-checkboxes__label,
.rd-archive__chips-primary .jet-smart-filters-checkboxes__row.checked .jet-smart-filters-checkboxes__label,
.rd-archive__chips-secondary .jet-smart-filters-checkboxes__row.checked .jet-smart-filters-checkboxes__label,
.rd-archive__chips-primary input[type="checkbox"]:checked ~ .jet-smart-filters-checkboxes__label,
.rd-archive__chips-secondary input[type="checkbox"]:checked ~ .jet-smart-filters-checkboxes__label {
background: var(--rd-accent);
border-color: var(--rd-accent);
color: #fff;
}
.rd-archive-filterbar .jet-smart-filters-checkboxes__count,
.rd-archive__chips-primary .jet-smart-filters-checkboxes__count,
.rd-archive__chips-secondary .jet-smart-filters-checkboxes__count {
font-size: 12px;
opacity: 0.7;
margin-left: 2px;
}
/* ═══════════════════════════════════════════════════════════════════
CLAUDE-DESIGN V2 — Patterns aus screen-detail.jsx + screen-archive.jsx
Ergaenzt die bestehenden Komponenten um Magazin-Layout-Bausteine.
═══════════════════════════════════════════════════════════════════ */
/* === PILLAR-INTRO / -OUTRO ===
Pillar-Pages (alle 13 CPTs) fuehren mit Eyebrow „Einleitung" in den
Content ein und schliessen mit Eyebrow „Fazit" + CTA-Buttons.
Textbreite auf 760px begrenzt fuer Lesbarkeit. */
.rd-pillar-intro,
.rd-pillar-outro {
max-width: 760px;
margin-left: auto;
margin-right: auto;
padding: var(--rd-space-5) 0;
}
.rd-pillar-intro__eyebrow,
.rd-pillar-outro__eyebrow {
font-family: var(--rd-font-ui);
font-weight: 600; font-size: 11px;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--rd-accent-strong);
margin-bottom: var(--rd-space-3);
}
.rd-pillar-intro__text,
.rd-pillar-outro__text {
font-size: var(--rd-fs-md);
line-height: 1.7;
color: var(--rd-text);
}
.rd-pillar-intro__text p,
.rd-pillar-outro__text p { margin: 0 0 var(--rd-space-3); }
.rd-pillar-intro__text p:last-child,
.rd-pillar-outro__text p:last-child { margin-bottom: 0; }
.rd-pillar-outro__title {
font-family: var(--rd-font-display);
font-weight: 700; font-size: var(--rd-fs-2xl);
line-height: 1.12; letter-spacing: -0.02em;
color: var(--rd-text);
margin: 0 0 var(--rd-space-4);
text-wrap: balance;
}
.rd-pillar-outro__cta {
display: flex; flex-wrap: wrap; gap: var(--rd-space-3);
margin-top: var(--rd-space-5);
}
/* === CHARACTER-RATING-BAR (Balken statt Pfoten-Icons) ===
Nach Entscheidung 2026-04-22: Magazin-Balken pro Rating-Eigenschaft.
Pfoten-Rating bleibt parallel existent fuer Cards/Teaser. */
.rd-character-ratings {
display: flex; flex-direction: column; gap: 14px;
margin: var(--rd-space-5) 0;
}
.rd-character-rating-bar {
display: grid; grid-template-columns: 1fr auto;
align-items: baseline;
grid-template-areas: "label value" "track track";
row-gap: 6px; column-gap: var(--rd-space-3);
}
.rd-character-rating-bar__label {
grid-area: label;
font-family: var(--rd-font-ui);
font-size: var(--rd-fs-sm); font-weight: 600;
color: var(--rd-text);
}
.rd-character-rating-bar__value {
grid-area: value;
font-family: var(--rd-font-ui);
font-size: 12px; font-weight: 600;
color: var(--rd-text-secondary);
}
.rd-character-rating-bar__track {
grid-area: track;
height: 8px; border-radius: 4px;
background: var(--rd-border);
overflow: hidden; position: relative;
}
.rd-character-rating-bar__fill {
position: absolute; inset: 0; width: var(--rd-rating-fill, 0%);
background: var(--rd-accent-strong);
border-radius: 4px;
transition: width 0.3s ease-out;
}
/* === QUOTE-ASIDE ===
Zitat-Block mit Kupfer-Left-Border, Display-Font, Autor/Quelle klein. */
.rd-quote-aside {
border-left: 3px solid var(--rd-accent);
padding: 8px 0 8px 20px;
margin: var(--rd-space-5) 0;
font-family: var(--rd-font-display);
font-weight: 500; font-size: var(--rd-fs-lg);
line-height: 1.35; color: var(--rd-text);
letter-spacing: -0.01em;
max-width: 560px;
}
.rd-quote-aside__source {
display: block;
margin-top: 10px;
font-family: var(--rd-font-ui);
font-size: 13px; font-weight: 600;
color: var(--rd-text-secondary);
}
/* === CONTACT-WIDGET (Eintrag-Single) ===
Grosser Phone-Button primary + Mail/Route nebeneinander ghost. */
.rd-contact-widget {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-lg);
padding: var(--rd-space-5);
display: grid; gap: var(--rd-space-3);
}
.rd-contact-widget__phone {
display: flex; align-items: center; justify-content: center; gap: 8px;
height: 52px;
background: var(--rd-accent);
color: #fff;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 700; font-size: var(--rd-fs-base);
text-decoration: none;
transition: background 0.15s;
}
.rd-contact-widget__phone:hover { background: var(--rd-accent-strong); }
.rd-contact-widget__row {
display: flex; gap: 8px;
}
.rd-contact-widget__secondary {
flex: 1;
display: flex; align-items: center; justify-content: center; gap: 6px;
height: 48px;
background: var(--rd-bg-soft);
color: var(--rd-text);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 600; font-size: var(--rd-fs-sm);
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.rd-contact-widget__secondary:hover {
background: var(--rd-bg-alt);
border-color: var(--rd-accent);
}
/* === STICKY-TABS (Pillar-Navigation) ===
Unterhalb des Title-Blocks, scrollt mit, aktiver Tab dunkel gefuellt.
JS: scrollIntoView + IntersectionObserver fuer active-state (nicht hier). */
.rd-sticky-tabs {
position: sticky;
top: 60px; z-index: 50;
background: rgb(251, 247, 242);
border-bottom: 1px solid var(--rd-border);
}
.rd-sticky-tabs__inner {
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding: 8px var(--rd-space-4);
display: flex; gap: 4px;
overflow-x: auto;
scrollbar-width: none;
}
.rd-sticky-tabs__inner::-webkit-scrollbar { display: none; }
.rd-sticky-tabs__link {
padding: 8px 14px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 600; font-size: 13px;
white-space: nowrap;
color: var(--rd-text-secondary);
text-decoration: none;
background: transparent;
transition: background 0.15s, color 0.15s;
}
.rd-sticky-tabs__link:hover { color: var(--rd-text); }
.rd-sticky-tabs__link--active {
background: var(--rd-text);
color: var(--rd-bg);
}
/* === MAP-WIDGET (Eintrag / Ausflugsziel / Gefahr) ===
16:9-Box mit Custom-Pin-Marker. OSM-Iframe ersetzt nachtraeglich das Placeholder. */
.rd-map-widget {
position: relative;
aspect-ratio: 16/9;
max-height: 320px;
border-radius: var(--rd-r-lg);
overflow: hidden;
border: 1px solid var(--rd-border);
background: #E0ECF4;
background-image: radial-gradient(circle at 50% 50%, #CFDFEA 0%, transparent 50%);
}
.rd-map-widget__pin {
position: absolute;
top: 50%; left: 50%;
transform: translate(-50%, -100%) rotate(-45deg);
width: 38px; height: 38px;
border-radius: 50% 50% 50% 0;
background: var(--rd-accent-strong);
border: 3px solid #fff;
box-shadow: var(--rd-shadow-md);
}
.rd-map-widget iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
/* === EINTRAG-HERO mit Logo-Overlap ===
16:9 Hero-Bild, darunter 96x96 Logo-Box die -48px ueberlappt. */
.rd-eintrag-hero {
position: relative;
width: 100%; aspect-ratio: 16/9;
max-height: 60vh; min-height: 260px;
overflow: hidden;
}
.rd-eintrag-hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rd-eintrag-hero__title-block {
display: flex; gap: var(--rd-space-4);
align-items: flex-start; flex-wrap: wrap;
padding-top: var(--rd-space-5); padding-bottom: var(--rd-space-5);
}
.rd-eintrag-hero__logo {
width: 96px; height: 96px;
border-radius: var(--rd-r-md);
background: #fff;
border: 1px solid var(--rd-border);
box-shadow: var(--rd-shadow-sm);
display: grid; place-items: center;
padding: 12px;
flex-shrink: 0;
margin-top: -48px; /* ueberlappt Hero */
position: relative; z-index: 2;
}
.rd-eintrag-hero__logo img {
width: 100%; height: 100%;
object-fit: contain;
}
.rd-eintrag-hero__body { flex: 1 1 280px; }
.rd-eintrag-hero__pills {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: var(--rd-space-3);
}
.rd-eintrag-hero__pill {
padding: 4px 12px; border-radius: var(--rd-r-pill);
background: var(--rd-accent-soft); color: var(--rd-accent-strong);
font-family: var(--rd-font-ui);
font-weight: 700; font-size: 12px;
text-transform: uppercase; letter-spacing: 0.06em;
}
.rd-eintrag-hero__pill--status-open {
background: #E8F5EC; color: var(--rd-success);
display: inline-flex; align-items: center; gap: 4px;
text-transform: none; letter-spacing: normal; font-weight: 700;
}
.rd-eintrag-hero__pill--status-open::before {
content: ""; width: 6px; height: 6px;
border-radius: 50%; background: var(--rd-success);
}
.rd-eintrag-hero__meta {
display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
color: var(--rd-text-secondary);
font-family: var(--rd-font-ui);
font-size: var(--rd-fs-sm);
}
.rd-eintrag-hero__meta-sep {
display: inline-block;
width: 3px; height: 3px; border-radius: 50%;
background: var(--rd-border-strong);
}
/* === ARCHIVE-SEARCH-PILL (Claude-Design-Pattern) ===
Such-Input + Filter-Button in einer Pill-Zeile.
Ersetzt die reine Chip-Row, bleibt aber kompatibel mit .rd-archive-filterbar. */
.rd-archive__search-pill {
display: flex; gap: 8px; align-items: center;
background: var(--rd-bg-soft);
border-radius: var(--rd-r-pill);
padding: 6px;
border: 1px solid var(--rd-border);
margin-bottom: var(--rd-space-3);
}
.rd-archive__search-icon {
padding: 0 6px 0 14px;
color: var(--rd-text-tertiary);
display: flex; align-items: center;
}
.rd-archive__search-input {
flex: 1; border: none; outline: none; background: transparent;
font-family: var(--rd-font-body);
font-size: 15px; color: var(--rd-text);
height: 40px;
}
.rd-archive__search-input::placeholder { color: var(--rd-text-tertiary); }
.rd-archive__filter-button {
display: inline-flex; align-items: center; gap: 6px;
height: 40px; padding: 0 14px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 600; font-size: 13px;
background: var(--rd-text);
color: #fff;
flex-shrink: 0;
border: none; cursor: pointer;
transition: background 0.15s;
}
.rd-archive__filter-button:hover { background: var(--rd-accent-strong); }
.rd-archive__filter-button--active { background: var(--rd-accent-strong); }
.rd-archive__filter-badge {
min-width: 20px; height: 20px;
border-radius: 10px; padding: 0 6px;
background: #fff;
color: var(--rd-accent-strong);
font-size: 11px; font-weight: 700;
display: inline-grid; place-items: center;
}
/* === ARCHIVE-VIEW-TOGGLE (Grid/List) ===
Toggle-Pill mit 2 Modes. CSS-only; JS-State separat. */
.rd-archive__view-toggle {
display: inline-flex;
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-pill);
padding: 3px;
}
.rd-archive__view-toggle button {
width: 32px; height: 32px;
border-radius: var(--rd-r-pill);
border: none; cursor: pointer;
background: transparent;
color: var(--rd-text-secondary);
display: grid; place-items: center;
transition: background 0.15s, color 0.15s;
}
.rd-archive__view-toggle button[aria-pressed="true"] {
background: var(--rd-text);
color: var(--rd-bg);
}
/* === ARCHIVE-SIMILAR / RELATED-SECTION ===
Fuer „Aehnliche Rassen" / „Weitere Orte" als bg-alt-Band. */
.rd-similar {
background: var(--rd-bg-alt);
padding: var(--rd-space-7) 0;
}
.rd-similar__inner {
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding-left: var(--rd-space-4);
padding-right: var(--rd-space-4);
}
.rd-similar__grid {
display: grid; gap: var(--rd-space-3);
grid-template-columns: 1fr;
margin-top: var(--rd-space-5);
}
@media (min-width: 680px) {
.rd-similar__grid { grid-template-columns: repeat(3, 1fr); }
}
/* === HUNDERASSE SINGLE-TEMPLATE (2026-04-24) ====================================
Komponenten fuer das 8-Sektionen-Single-Template (screen-detail.jsx).
Alle Container werden via Shortcode gerendert, CSS hookt auf die BEM-Klassen. */
/* ---- rd-hunderasse: Root-Scoping + Shared ---- */
.rd-hunderasse { /* Elementor-Template-Root, Platzhalter fuer CPT-Scope */ }
.rd-hunderasse .rd-eyebrow { /* Eyebrow innerhalb des Single ein Ticken weicher */ }
/* ---- Welle-47 (2026-05-23): rd-breed-hero ----
Hero-Komponente für single-hunderasse.php. Vorher nutzte das Template
die generische .rd-hero-Klasse, die für 16:9-Background-Image-Heros
gedacht ist und bei 2-Spalten-Layout (Text + Featured-Image) das Grid
sprengt. Roger 2026-05-23: „Linke Seite völlig ohne Grid".
Jetzt: konsistenter BG/Border wie .rd-archive-hero, Inner-Container
nutzt .rd-container-Padding (parallel via Klasse im PHP), eigenes
2-Spalten-Grid mit Featured-Image rechts, Mobile gestackt. */
.rd-breed-hero {
background: var(--rd-bg-alt);
border-bottom: 1px solid var(--rd-border);
padding: var(--rd-space-6) 0;
}
.rd-breed-hero__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--rd-space-5);
align-items: center;
}
@media (min-width: 880px) {
.rd-breed-hero__inner {
grid-template-columns: 1.2fr 1fr;
gap: var(--rd-space-6);
}
}
.rd-breed-hero .rd-hero__cat {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 12px;
font-weight: 600;
color: var(--rd-accent);
margin-bottom: 8px;
}
.rd-breed-hero .rd-hero__title {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 16px;
color: var(--rd-text);
}
.rd-breed-hero .rd-hero__meta {
display: flex;
flex-wrap: wrap;
gap: 14px 20px;
font-size: 14px;
color: var(--rd-text-secondary);
margin: 16px 0;
}
.rd-breed-hero .rd-hero__meta span b {
color: var(--rd-text);
font-weight: 600;
margin-right: 4px;
}
.rd-breed-hero .rd-hero__tags {
margin: 12px 0 18px;
}
.rd-breed-hero .rd-hero__cta {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 18px;
border-radius: var(--rd-r-pill);
background: #fff;
border: 1px solid var(--rd-border);
font-family: var(--rd-font-ui);
font-weight: 600;
font-size: 14px;
color: var(--rd-text);
text-decoration: none;
transition: background 0.15s, border-color 0.15s;
}
.rd-breed-hero .rd-hero__cta:hover {
background: var(--rd-accent-soft);
border-color: var(--rd-accent);
}
.rd-breed-hero .rd-hero__media {
position: relative;
aspect-ratio: 4/3;
border-radius: var(--rd-r-md);
overflow: hidden;
background: var(--rd-accent-soft);
display: flex;
align-items: center;
justify-content: center;
}
.rd-breed-hero .rd-hero__media-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rd-breed-hero .rd-hero__media-caption {
font-family: var(--rd-font-ui);
font-style: italic;
color: var(--rd-text-tertiary);
font-size: 14px;
}
/* ---- Hero 16:9 ---- */
.rd-hunderasse__hero {
position: relative;
width: 100%;
aspect-ratio: 16 / 9;
max-height: 68vh;
min-height: 280px;
background: var(--rd-bg-alt);
overflow: hidden;
}
.rd-hunderasse__hero-image {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.rd-hunderasse__hero::after {
content: "";
position: absolute; inset: 0;
background: linear-gradient(180deg, rgba(20,19,17,0) 40%, rgba(20,19,17,0.6) 100%);
pointer-events: none;
}
.rd-hunderasse__hero-back {
position: absolute; top: 16px; left: 16px; z-index: 2;
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px 8px 10px;
border-radius: var(--rd-r-pill);
background: rgba(255,255,255,0.92);
backdrop-filter: blur(8px);
font-family: var(--rd-font-ui); font-weight: 600; font-size: 13px;
color: var(--rd-text);
text-decoration: none;
}
.rd-hunderasse__hero-back:hover { background: #fff; }
@media (min-width: 680px) {
.rd-hunderasse__hero-back {
left: clamp(16px, calc(50% - (var(--rd-max-w, 1240px) / 2) + 16px), 50%);
}
}
/* ---- rd-breed-tags: Pill-Row im Title-Block ---- */
.rd-breed-tags {
display: flex; gap: 8px; flex-wrap: wrap;
margin-bottom: 14px;
}
.rd-breed-tags__pill {
padding: 4px 12px;
border-radius: var(--rd-r-pill);
background: var(--rd-accent-soft);
color: var(--rd-accent-strong);
font-family: var(--rd-font-ui);
font-weight: 600; font-size: 12px;
}
/* ---- rd-intro: Pillar-Intro Container ---- */
.rd-intro {
max-width: 760px;
padding-top: var(--rd-space-5);
padding-bottom: var(--rd-space-5);
}
.rd-intro__body {
font-size: var(--rd-fs-md);
line-height: 1.7;
color: var(--rd-text);
}
.rd-intro__body p:first-child { margin-top: 0; }
/* ---- rd-tierschutz-aside: Blockquote-Aside mit tierschutz_hinweis ---- */
.rd-tierschutz-aside {
border-left: 3px solid var(--rd-accent);
padding: 8px 0 8px 20px;
margin: var(--rd-space-5) 0;
max-width: 600px;
}
.rd-tierschutz-aside__eyebrow {
font-family: var(--rd-font-ui);
font-size: 11px;
color: var(--rd-text-secondary);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 700;
margin-bottom: 8px;
}
.rd-tierschutz-aside__body {
margin: 0;
font-family: var(--rd-font-display, var(--rd-font-ui));
font-weight: 500;
font-size: var(--rd-fs-lg);
line-height: 1.45;
color: var(--rd-text);
letter-spacing: -0.01em;
}
/* ---- rd-eignung-tags: neutrale Pill-Tags (anders als breed-tags) ---- */
.rd-eignung-tags {
margin: var(--rd-space-4) 0 var(--rd-space-5);
}
.rd-eignung-tags__list {
display: flex; gap: 8px; flex-wrap: wrap;
}
.rd-eignung-tags__pill {
padding: 6px 14px;
border-radius: var(--rd-r-pill);
background: var(--rd-bg-soft);
color: var(--rd-text);
border: 1px solid var(--rd-border);
font-family: var(--rd-font-ui);
font-weight: 600; font-size: 13px;
}
/* ---- rd-rating-bars: Charakter-Profil ---- */
.rd-rating-bars {
margin-top: var(--rd-space-6);
margin-bottom: var(--rd-space-6);
}
.rd-rating-bars__row {
margin-bottom: 14px;
}
.rd-rating-bars__row:last-child { margin-bottom: 0; }
.rd-rating-bars__header {
display: flex;
justify-content: space-between;
align-items: baseline;
margin-bottom: 6px;
}
.rd-rating-bars__label {
font-family: var(--rd-font-ui);
font-size: 14px; font-weight: 600;
color: var(--rd-text);
}
.rd-rating-bars__value {
font-family: var(--rd-font-ui);
font-size: 12px; font-weight: 600;
color: var(--rd-text-secondary);
}
.rd-rating-bars__track {
height: 8px;
border-radius: 4px;
background: var(--rd-border);
overflow: hidden;
position: relative;
}
.rd-rating-bars__fill {
position: absolute; top: 0; left: 0;
height: 100%;
background: var(--rd-accent-strong);
border-radius: 4px;
transition: width 300ms ease-out;
}
/* ---- rd-gesundheit: Krankheiten + Gesundheitstests ---- */
.rd-gesundheit {
margin: var(--rd-space-6) 0;
}
.rd-gesundheit__block {
margin-bottom: var(--rd-space-4);
}
.rd-gesundheit__block:last-child { margin-bottom: 0; }
.rd-gesundheit__title {
font-family: var(--rd-font-ui);
font-size: var(--rd-fs-md);
font-weight: 700;
color: var(--rd-text);
margin-bottom: 8px;
}
.rd-gesundheit__body {
font-size: var(--rd-fs-base);
line-height: 1.7;
color: var(--rd-text);
max-width: 640px;
}
.rd-gesundheit__body p:first-child { margin-top: 0; }
/* ---- rd-aehnliche-rassen: Card-Grid 16:9 ---- */
.rd-aehnliche-rassen {
background: var(--rd-bg-alt);
padding: var(--rd-space-7) 0;
margin-top: var(--rd-space-7);
}
.rd-aehnliche-rassen .rd-section-header {
margin-bottom: var(--rd-space-5);
padding-left: var(--rd-space-4);
padding-right: var(--rd-space-4);
max-width: var(--rd-max-w, 1240px);
margin-left: auto; margin-right: auto;
}
.rd-aehnliche-rassen .rd-section-header__title {
font-family: var(--rd-font-display, var(--rd-font-ui));
font-size: var(--rd-fs-xl);
font-weight: 700;
color: var(--rd-text);
letter-spacing: -0.01em;
margin: 4px 0 0;
}
.rd-aehnliche-rassen__grid {
display: grid; gap: var(--rd-space-3);
grid-template-columns: 1fr;
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding-left: var(--rd-space-4);
padding-right: var(--rd-space-4);
}
@media (min-width: 680px) {
.rd-aehnliche-rassen__grid { grid-template-columns: repeat(3, 1fr); }
}
.rd-aehnliche-rassen__card {
background: var(--rd-bg-soft);
border-radius: var(--rd-r-md);
border: 1px solid var(--rd-border);
overflow: hidden;
text-decoration: none;
display: block;
transition: transform 150ms, box-shadow 150ms;
}
.rd-aehnliche-rassen__card:hover {
transform: translateY(-2px);
box-shadow: var(--rd-shadow-md);
}
.rd-aehnliche-rassen__image {
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
display: block;
}
.rd-aehnliche-rassen__image--ph {
background: var(--rd-border);
}
.rd-aehnliche-rassen__body {
padding: var(--rd-space-3) var(--rd-space-4) var(--rd-space-4);
}
.rd-aehnliche-rassen__eyebrow {
font-family: var(--rd-font-ui);
font-size: 11px;
color: var(--rd-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
margin-bottom: 4px;
}
.rd-aehnliche-rassen__title {
font-family: var(--rd-font-display, var(--rd-font-ui));
font-weight: 700;
font-size: 17px;
color: var(--rd-text);
line-height: 1.2;
letter-spacing: -0.01em;
}
/* ---- rd-outro: Fazit-Sektion ---- */
.rd-outro {
max-width: 780px;
padding-top: var(--rd-space-8);
padding-bottom: var(--rd-space-8);
}
.rd-outro__title {
font-family: var(--rd-font-display, var(--rd-font-ui));
font-size: var(--rd-fs-2xl);
font-weight: 700;
color: var(--rd-text);
letter-spacing: -0.02em;
margin: 12px 0 var(--rd-space-4);
}
.rd-outro__body {
font-size: var(--rd-fs-md);
line-height: 1.75;
color: var(--rd-text);
}
.rd-outro__body p:first-child { margin-top: 0; }
/* ---- Detail-Grid (Content-Col + Sidebar), Mobile-First ---- */
.rd-hunderasse .detail-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--rd-space-6);
}
.rd-hunderasse .detail-sidebar {
display: flex;
flex-direction: column;
gap: var(--rd-space-4);
}
@media (min-width: 960px) {
.rd-hunderasse .detail-grid {
grid-template-columns: minmax(0, 1fr) 320px;
}
}
/* ---- Sticky Tabs (Anchor-Navigation) ----
Sticky-Effekt wird von Elementor Pro (JS-basiert) auf der Section hr-tabs-sec
gesetzt — zu finden in _elementor_data Template 12890: sticky=top, sticky_on=all.
CSS hier bleibt nur visuelles Styling auf dem inneren Container, damit es nicht
full-width beige rendert wenn die Section gestretched ist. */
.rd-hunderasse__tabs {
background: rgba(251,247,242,0.92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--rd-border);
margin-bottom: var(--rd-space-5);
}
/* Wenn Elementor-Sticky aktiv ist, bekommt die Section .elementor-sticky--active.
top-Offset wird via Elementor-Settings (sticky_offset) gesetzt — hier nur optional
Verfeinerung fuer eingeloggte Admins (Admin-Bar). */
body.admin-bar .elementor-section.elementor-sticky--effects,
body.admin-bar .elementor-section.elementor-sticky--active {
top: var(--wp-admin--admin-bar--height, 32px) !important;
}
.rd-hunderasse__tabs-inner {
display: flex; gap: 4px;
overflow-x: auto;
scrollbar-width: none;
padding: 8px var(--rd-space-4);
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
}
.rd-hunderasse__tabs-inner::-webkit-scrollbar { display: none; }
.rd-hunderasse__tab {
padding: 8px 14px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 600; font-size: 13px;
white-space: nowrap;
background: transparent;
color: var(--rd-text-secondary);
text-decoration: none;
transition: background 150ms, color 150ms;
}
.rd-hunderasse__tab:hover,
.rd-hunderasse__tab[aria-current="true"] {
background: var(--rd-text);
color: var(--rd-bg);
}
/* === VERMITTLUNG SINGLE-TEMPLATE (2026-04-24) =================================== */
.rd-vermittlung { /* Root-Scope */ }
.rd-vermittlung__header-sec {
background: var(--rd-bg-alt);
padding: var(--rd-space-4) 0;
border-bottom: 1px solid var(--rd-border);
}
.rd-vermittlung__hero-image {
margin: 0 0 var(--rd-space-4);
border-radius: var(--rd-r-md);
overflow: hidden;
aspect-ratio: 4 / 3;
background: var(--rd-bg-alt);
}
.rd-vermittlung__hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rd-vermittlung__status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: 12px;
}
.rd-vermittlung__status--sucht {
background: var(--rd-accent-soft);
color: var(--rd-accent-strong);
}
.rd-vermittlung__status--gefunden {
background: #E8F5EC;
color: #1F8A5B;
}
.rd-vermittlung__tags {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.rd-vermittlung__tag {
padding: 3px 10px;
border-radius: var(--rd-r-pill);
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
font-family: var(--rd-font-ui);
font-weight: 600;
font-size: 11px;
color: var(--rd-text);
}
.rd-vermittlung__title {
font-size: var(--rd-fs-2xl);
line-height: 1.15;
margin: 8px 0 12px;
}
.rd-vermittlung__meta {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
font-family: var(--rd-font-ui);
font-size: 14px;
color: var(--rd-text-secondary);
}
.rd-vermittlung__meta-dot {
width: 3px; height: 3px; border-radius: 50%;
background: var(--rd-border-strong);
}
.rd-vermittlung__gallery {
margin: var(--rd-space-5) 0;
}
.rd-vermittlung__gallery-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
}
@media (min-width: 600px) {
.rd-vermittlung__gallery-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 900px) {
.rd-vermittlung__gallery-grid { grid-template-columns: repeat(4, 1fr); }
}
.rd-vermittlung__gallery-item {
aspect-ratio: 1 / 1;
overflow: hidden;
border-radius: var(--rd-r-sm);
display: block;
}
.rd-vermittlung__gallery-item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform 200ms;
}
.rd-vermittlung__gallery-item:hover img { transform: scale(1.05); }
.rd-vermittlung__cta-wrap {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
padding: var(--rd-space-5);
margin: var(--rd-space-5) 0;
text-align: center;
}
.rd-vermittlung__cta {
display: inline-flex !important;
align-items: center;
gap: 6px;
height: auto;
padding: 14px 24px;
font-size: 15px;
}
.rd-vermittlung__cta-hint {
margin-top: 10px;
font-family: var(--rd-font-ui);
font-size: 12px;
color: var(--rd-text-secondary);
}
/* === GEFAHR SINGLE-TEMPLATE (2026-04-24) ===================================== */
.rd-gefahr { /* Root-Scope */ }
.rd-gefahr__header-sec {
background: var(--rd-bg-alt);
padding: var(--rd-space-4) 0;
border-bottom: 1px solid var(--rd-border);
}
.rd-gefahr__badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
align-items: center;
}
.rd-gefahr__status {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 12px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.rd-gefahr__status--aktiv {
background: #FDEEE9;
color: #B84A2F;
border: 1.5px solid #F0B8A0;
}
.rd-gefahr__status--inaktiv {
background: var(--rd-bg-soft);
color: var(--rd-text-secondary);
border: 1px solid var(--rd-border);
}
.rd-gefahr__pulse {
width: 7px; height: 7px;
border-radius: 50%;
background: #B84A2F;
box-shadow: 0 0 0 0 rgba(184,74,47,0.6);
animation: rd-gefahr-pulse 1.5s infinite;
}
@keyframes rd-gefahr-pulse {
0% { box-shadow: 0 0 0 0 rgba(184,74,47,0.6); }
70% { box-shadow: 0 0 0 10px rgba(184,74,47,0); }
100% { box-shadow: 0 0 0 0 rgba(184,74,47,0); }
}
.rd-gefahr__typ {
display: inline-block;
padding: 4px 12px;
border-radius: var(--rd-r-pill);
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
font-family: var(--rd-font-ui);
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rd-text);
text-decoration: none;
}
.rd-gefahr__title {
font-size: var(--rd-fs-2xl);
line-height: 1.15;
margin: 8px 0 12px;
}
.rd-gefahr__meta {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
font-family: var(--rd-font-ui);
font-size: 14px;
color: var(--rd-text-secondary);
}
.rd-gefahr__meta-dot {
width: 3px; height: 3px; border-radius: 50%;
background: var(--rd-border-strong);
}
.rd-gefahr__quelle {
background: var(--rd-bg-soft);
border-left: 3px solid var(--rd-text-secondary);
padding: var(--rd-space-3) var(--rd-space-4);
margin: var(--rd-space-5) 0;
border-radius: 0 var(--rd-r-sm) var(--rd-r-sm) 0;
}
.rd-gefahr__quelle a {
color: var(--rd-accent-strong);
text-decoration: none;
border-bottom: 1px solid var(--rd-accent-soft);
}
/* === EVENT SINGLE-TEMPLATE (2026-04-24) ==========================================
Event-Detail mit prominenter Date-Card (Overlapping -56px in Titelblock).
Design-Source: screen-events.jsx / EventDetailScreen. */
.rd-event { /* Root-Scope */ }
.rd-event__header-sec {
background: var(--rd-bg-alt);
padding: var(--rd-space-4) 0;
border-bottom: 1px solid var(--rd-border);
}
/* Hero-Meta: Date-Card + Title-Block in Flex-Row */
.rd-event__hero-meta {
display: flex;
gap: var(--rd-space-4);
align-items: flex-start;
flex-wrap: wrap;
}
.rd-event__title-block {
flex: 1 1 280px;
min-width: 0;
}
.rd-event__date-card {
width: 88px;
min-height: 104px;
flex-shrink: 0;
background: var(--rd-accent-strong);
color: #fff;
border-radius: var(--rd-r-md);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 6px 20px rgba(0,0,0,0.09);
position: relative;
z-index: 2;
text-align: center;
padding: 12px 6px;
}
.rd-event__date-card-day {
font-family: var(--rd-font-display, var(--rd-font-ui));
font-weight: 700;
font-size: 38px;
line-height: 1;
letter-spacing: -0.02em;
}
.rd-event__date-card-month {
font-family: var(--rd-font-ui);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
margin-top: 4px;
}
.rd-event__date-card-year {
font-family: var(--rd-font-ui);
font-size: 10px;
font-weight: 500;
letter-spacing: 0.04em;
margin-top: 2px;
opacity: 0.85;
}
.rd-event__badge {
display: inline-block;
padding: 4px 12px;
border-radius: var(--rd-r-pill);
background: var(--rd-accent-soft);
color: var(--rd-accent-strong);
font-family: var(--rd-font-ui);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
margin-bottom: 12px;
transition: background 150ms;
}
.rd-event__badge:hover { background: #f5e6d3; }
.rd-event__title {
font-size: var(--rd-fs-2xl);
line-height: 1.15;
margin: 0 0 10px;
}
.rd-event__meta {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
color: var(--rd-text-secondary);
font-size: 14px;
font-family: var(--rd-font-ui);
}
.rd-event__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.rd-event__meta-item--online {
color: var(--rd-accent-strong);
font-weight: 600;
}
/* CTA-Section mit Callout-Styling */
.rd-event__cta-sec {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
padding: var(--rd-space-5);
margin: var(--rd-space-5) 0;
text-align: center;
}
/* --- rd-event-box: Info-Box mit Event-Daten + CTAs (Anmeldung + iCal) --- */
.rd-event-box {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
padding: var(--rd-space-5);
margin: 0;
}
.rd-event-box__eyebrow {
color: var(--rd-accent-strong);
margin-bottom: 14px;
}
.rd-event-box__rows {
margin: 0 0 var(--rd-space-4);
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.rd-event-box__row {
display: grid;
grid-template-columns: 100px 1fr;
gap: 12px;
align-items: baseline;
padding-bottom: 10px;
border-bottom: 1px solid var(--rd-border);
}
.rd-event-box__row:last-child { border-bottom: none; padding-bottom: 0; }
.rd-event-box__row dt {
font-family: var(--rd-font-ui);
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rd-text-secondary);
margin: 0;
}
.rd-event-box__row dd {
font-family: var(--rd-font-ui);
font-size: 14px;
color: var(--rd-text);
margin: 0;
line-height: 1.4;
}
.rd-event-box__row dd a {
color: var(--rd-accent-strong);
text-decoration: none;
border-bottom: 1px solid var(--rd-accent-soft);
}
.rd-event-box__ctas {
display: flex;
flex-direction: column;
gap: 8px;
padding-top: var(--rd-space-3);
border-top: 1px solid var(--rd-border);
}
.rd-event-box__cta,
.rd-event-box__ical {
width: 100%;
justify-content: center;
}
.rd-event-box__ical {
display: inline-flex;
align-items: center;
gap: 6px;
}
/* === AUSFLUGSZIEL SINGLE-TEMPLATE (2026-04-24) ===================================
Erlebnis-/Wanderzieldatenblatt. Reuses rd-uebung__badge--level fuer Schwierigkeit
und rd-eintrag__map-* fuer Karte. */
.rd-ausflugsziel { /* Root-Scope */ }
.rd-ausflugsziel__header-sec {
background: var(--rd-bg-alt);
padding: var(--rd-space-4) 0;
border-bottom: 1px solid var(--rd-border);
}
.rd-ausflugsziel__badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.rd-ausflugsziel__badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
transition: background 150ms;
}
.rd-ausflugsziel__badge--standort {
background: var(--rd-bg-soft);
color: var(--rd-text);
border: 1px solid var(--rd-border);
}
.rd-ausflugsziel__badge--standort:hover { background: #fff; }
.rd-ausflugsziel__badge--leine {
border: 1.5px solid currentColor;
}
.rd-ausflugsziel__badge--leine-ja {
color: #B84A2F;
background: #FDEEE9;
border-color: #F0B8A0;
}
.rd-ausflugsziel__badge--leine-nein {
color: #1F8A5B;
background: #E8F5EC;
border-color: #A8D8B9;
}
.rd-ausflugsziel__badge--leine-teils {
color: #A86E42;
background: var(--rd-accent-soft, #F4E3D2);
border-color: #E5CBA8;
}
.rd-ausflugsziel__title {
font-size: var(--rd-fs-2xl);
line-height: 1.15;
margin: 8px 0 12px;
}
/* Quick-Facts in Sidebar-Card ("Auf einen Blick"). Auch in single-uebung.php verwendet. */
.rd-ausflugsziel__quick-facts {
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.rd-ausflugsziel__qf-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 12px;
align-items: baseline;
padding-bottom: 10px;
border-bottom: 1px solid var(--rd-border, #E5DDD7);
}
.rd-ausflugsziel__qf-row:last-child {
border-bottom: 0;
padding-bottom: 0;
}
.rd-ausflugsziel__qf-row dt {
font-size: 13px;
color: var(--rd-text-secondary, #6B6B6B);
margin: 0;
}
.rd-ausflugsziel__qf-row dd {
margin: 0;
font-family: var(--rd-font-ui, 'Inter', system-ui, sans-serif);
font-weight: 600;
font-size: 14px;
line-height: 1.3;
color: var(--rd-text, #1A1A1A);
text-align: right;
}
/* === EINTRAG SINGLE-TEMPLATE (2026-04-24) ========================================
Dienstleister-Datenblatt: Badges + Titel + Slogan → Kontakt + Map + Content
+ Conditional Service-Info (0/30 live, silent rendering bis gepflegt). */
.rd-eintrag { /* Root-Scope */ }
.rd-eintrag__header-sec {
background: var(--rd-bg-alt);
padding: var(--rd-space-4) 0;
border-bottom: 1px solid var(--rd-border);
}
.rd-eintrag__badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.rd-eintrag__badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
transition: background 150ms;
}
.rd-eintrag__badge--art {
background: var(--rd-accent-soft);
color: var(--rd-accent-strong);
}
.rd-eintrag__badge--art:hover { background: #f5e6d3; }
.rd-eintrag__badge--standort {
background: var(--rd-bg-soft);
color: var(--rd-text);
border: 1px solid var(--rd-border);
}
.rd-eintrag__badge--standort:hover { background: #fff; }
.rd-eintrag__title {
font-size: var(--rd-fs-2xl);
line-height: 1.15;
margin: 8px 0 12px;
}
.rd-eintrag__tagline {
font-size: var(--rd-fs-md);
color: var(--rd-text-secondary);
line-height: 1.55;
margin: 0;
max-width: 640px;
}
/* Kontakt-Block wiederverwendet rd-kontakt (existiert schon). Hier eintrag-spezifisches Layout */
.rd-eintrag__kontakt-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--rd-space-4);
margin: var(--rd-space-5) 0;
}
@media (min-width: 768px) {
.rd-eintrag__kontakt-grid {
grid-template-columns: 1fr 1fr;
}
}
/* Map */
.rd-eintrag__map {
margin: 0;
}
.rd-eintrag__map-wrap {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--rd-r-md);
overflow: hidden;
border: 1px solid var(--rd-border);
background: #E0ECF4;
}
.rd-eintrag__map-wrap iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
.rd-eintrag__map-caption {
margin-top: 8px;
font-size: 13px;
color: var(--rd-text-secondary);
font-family: var(--rd-font-ui);
text-align: right;
}
/* Social-Icons */
.rd-eintrag__social {
display: flex;
gap: 8px;
margin: var(--rd-space-4) 0;
}
.rd-eintrag__social-link {
width: 40px; height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
color: var(--rd-text);
transition: background 150ms, color 150ms, transform 150ms;
}
.rd-eintrag__social-link:hover {
background: var(--rd-accent-strong);
color: #fff;
transform: translateY(-1px);
}
/* Conditional-Info-Blocks */
.rd-eintrag__conditional {
margin: var(--rd-space-5) 0;
}
.rd-eintrag__conditional-block {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
padding: var(--rd-space-4);
margin-bottom: var(--rd-space-3);
}
.rd-eintrag__conditional-block:last-child { margin-bottom: 0; }
.rd-eintrag__conditional-block .rd-eyebrow {
margin-bottom: 10px;
color: var(--rd-accent-strong);
}
.rd-eintrag__conditional-list {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--rd-font-ui);
font-size: 14px;
line-height: 1.7;
color: var(--rd-text);
}
.rd-eintrag__conditional-list li {
padding: 4px 0;
border-bottom: 1px solid var(--rd-border);
}
.rd-eintrag__conditional-list li:last-child { border-bottom: none; }
/* === UEBUNG SINGLE-TEMPLATE (2026-04-24) =========================================
HowTo-orientiert: Badges (Bereich+Schwierigkeit) + Titel + Meta → Ziel → Hilfsmittel → Content
Single-column, max 780px. */
.rd-uebung { /* Root-Scope */ }
/* Header-Band analog zu rd-wiki__header-sec — bg-alt, border-bottom */
.rd-uebung__header-sec {
background: var(--rd-bg-alt);
padding: var(--rd-space-4) 0;
border-bottom: 1px solid var(--rd-border);
}
.rd-uebung__badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 16px;
}
.rd-uebung__badge {
display: inline-block;
padding: 4px 12px;
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
transition: background 150ms, opacity 150ms;
}
.rd-uebung__badge--bereich {
background: var(--rd-accent-soft);
color: var(--rd-accent-strong);
}
.rd-uebung__badge--bereich:hover { background: #f5e6d3; }
.rd-uebung__badge--level {
border: 1.5px solid currentColor;
}
.rd-uebung__badge--level-leicht,
.rd-uebung__badge--level-einfach {
color: #1F8A5B;
background: #E8F5EC;
border-color: #A8D8B9;
}
.rd-uebung__badge--level-mittel {
color: #A86E42;
background: var(--rd-accent-soft, #F4E3D2);
border-color: #E5CBA8;
}
.rd-uebung__badge--level-schwer,
.rd-uebung__badge--level-anspruchsvoll,
.rd-uebung__badge--level-fortgeschritten,
.rd-uebung__badge--level-profi {
color: #B84A2F;
background: #FDEEE9;
border-color: #F0B8A0;
}
.rd-uebung__title {
font-size: var(--rd-fs-2xl);
line-height: 1.15;
margin: 8px 0 16px;
}
.rd-uebung__meta {
display: flex;
align-items: center;
gap: 12px;
flex-wrap: wrap;
font-size: 14px;
color: var(--rd-text-secondary);
font-family: var(--rd-font-ui);
}
.rd-uebung__meta-item {
display: inline-flex;
align-items: center;
gap: 6px;
}
.rd-uebung__meta-dot {
width: 3px; height: 3px;
border-radius: 50%;
background: var(--rd-border-strong);
display: inline-block;
}
/* --- rd-uebung__ziel: Trainingsziel-Block --- */
.rd-uebung__ziel {
background: var(--rd-bg-soft);
border-left: 3px solid var(--rd-accent);
border-radius: var(--rd-r-md);
padding: var(--rd-space-4) var(--rd-space-5);
margin: var(--rd-space-5) 0;
}
.rd-uebung__ziel .rd-eyebrow { margin-bottom: 8px; }
.rd-uebung__ziel p {
margin: 0;
font-size: var(--rd-fs-md);
line-height: 1.6;
color: var(--rd-text);
}
/* --- rd-uebung__hilfsmittel: Badge-Liste --- */
.rd-uebung__hilfsmittel {
margin: var(--rd-space-5) 0;
}
.rd-uebung__hilfsmittel-list {
display: flex;
gap: 8px;
flex-wrap: wrap;
}
.rd-uebung__hilfsmittel-pill {
padding: 6px 14px;
border-radius: var(--rd-r-pill);
background: var(--rd-bg-soft);
color: var(--rd-text);
border: 1px solid var(--rd-border);
font-family: var(--rd-font-ui);
font-weight: 600;
font-size: 13px;
}
/* --- rd-uebung__schritte: Nummerierte Schritt-Liste --- */
.rd-uebung__schritte {
margin: var(--rd-space-6) 0;
}
.rd-uebung__steps-list {
list-style: none;
margin: 0;
padding: 0;
counter-reset: none;
}
.rd-uebung__step {
display: grid;
grid-template-columns: 40px 1fr;
gap: 16px;
padding: var(--rd-space-4) 0;
border-bottom: 1px solid var(--rd-border);
}
.rd-uebung__step:last-child { border-bottom: none; }
.rd-uebung__step-num {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--rd-accent-strong);
color: #fff;
font-family: var(--rd-font-display, var(--rd-font-ui));
font-weight: 700;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.rd-uebung__step-title {
font-family: var(--rd-font-display, var(--rd-font-ui));
font-weight: 700;
font-size: var(--rd-fs-lg);
color: var(--rd-text);
letter-spacing: -0.01em;
margin: 4px 0 8px;
}
.rd-uebung__step-text {
font-size: var(--rd-fs-base);
line-height: 1.7;
color: var(--rd-text);
}
.rd-uebung__step-text p:first-child { margin-top: 0; }
.rd-uebung__step-text p:last-child { margin-bottom: 0; }
/* --- rd-uebung__video: 16:9 responsive Embed --- */
.rd-uebung__video {
margin: var(--rd-space-6) 0;
}
.rd-uebung__video-wrap {
position: relative;
aspect-ratio: 16 / 9;
border-radius: var(--rd-r-md);
overflow: hidden;
background: var(--rd-bg-alt);
}
.rd-uebung__video-wrap iframe {
position: absolute;
top: 0; left: 0;
width: 100%; height: 100%;
border: 0;
}
.rd-uebung__video-caption {
margin-top: 8px;
font-size: 13px;
color: var(--rd-text-secondary);
font-family: var(--rd-font-ui);
}
/* --- rd-uebung__tipps: Profi-Tipps-Aside --- */
.rd-uebung__tipps {
background: linear-gradient(135deg, var(--rd-accent-soft, #F4E3D2) 0%, var(--rd-bg-soft) 100%);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
padding: var(--rd-space-4) var(--rd-space-5);
margin: var(--rd-space-6) 0;
}
.rd-uebung__tipps-head {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
font-family: var(--rd-font-ui);
font-size: 14px;
color: var(--rd-accent-strong);
}
.rd-uebung__tipps-body {
font-size: var(--rd-fs-base);
line-height: 1.7;
color: var(--rd-text);
}
.rd-uebung__tipps-body p:first-child { margin-top: 0; }
.rd-uebung__tipps-body p:last-child { margin-bottom: 0; }
/* === WIKI SINGLE-TEMPLATE (2026-04-24) ===========================================
Komponenten fuer das Wiki-Single-Template (screen-wiki.jsx / ArtikelDetailScreen).
Single-column, kein Hero-Image, Content-zentriert (max 720px). */
/* ---- rd-wiki: Root + Header-Band ---- */
.rd-wiki { /* Elementor-Template-Root */ }
.rd-wiki__header-sec {
background: var(--rd-bg-alt);
padding: var(--rd-space-4) 0;
border-bottom: 1px solid var(--rd-border);
}
.rd-wiki__back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px 6px 10px;
border-radius: var(--rd-r-pill);
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
font-family: var(--rd-font-ui);
font-weight: 600;
font-size: 13px;
color: var(--rd-text);
text-decoration: none;
transition: background 150ms;
}
.rd-wiki__back:hover { background: #fff; }
/* ---- rd-wiki__category-badge: Pill ueber H1 ---- */
.rd-wiki__category-badge {
display: inline-block;
padding: 4px 12px;
border-radius: var(--rd-r-pill);
background: var(--rd-accent-soft);
color: var(--rd-accent-strong);
font-family: var(--rd-font-ui);
font-weight: 700;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
text-decoration: none;
margin-bottom: 16px;
transition: background 150ms;
}
.rd-wiki__category-badge:hover { background: #f5e6d3; }
/* ---- rd-wiki__meta: Autor-Block + Datum + Lesezeit ---- */
.rd-wiki__meta {
display: flex;
align-items: center;
gap: var(--rd-space-4);
flex-wrap: wrap;
margin-top: var(--rd-space-5);
padding-top: var(--rd-space-4);
padding-bottom: var(--rd-space-4);
border-top: 1px solid var(--rd-border);
border-bottom: 1px solid var(--rd-border);
}
.rd-wiki__author {
display: flex;
align-items: center;
gap: 12px;
}
.rd-wiki__avatar {
width: 40px; height: 40px;
border-radius: 50%;
object-fit: cover;
background: var(--rd-border);
flex-shrink: 0;
}
.rd-wiki__avatar--ph {
background: linear-gradient(135deg, var(--rd-accent-soft) 0%, var(--rd-border) 100%);
}
.rd-wiki__author-name {
font-family: var(--rd-font-display, var(--rd-font-ui));
font-weight: 700;
font-size: 14px;
color: var(--rd-text);
letter-spacing: -0.01em;
}
.rd-wiki__author-title {
font-family: var(--rd-font-ui);
font-size: 12px;
color: var(--rd-text-secondary);
}
.rd-wiki__meta-info {
display: flex;
align-items: center;
gap: 12px;
font-size: 13px;
color: var(--rd-text-secondary);
font-family: var(--rd-font-ui);
}
.rd-wiki__meta-dot {
width: 3px; height: 3px;
border-radius: 50%;
background: var(--rd-border-strong);
display: inline-block;
}
.rd-wiki__meta-read {
display: inline-flex;
align-items: center;
gap: 4px;
}
/* ---- rd-wiki-definition (bestehender Shortcode rd_wiki_definition) ---- */
.rd-wiki-definition {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-left: 3px solid var(--rd-accent);
border-radius: var(--rd-r-md);
padding: var(--rd-space-4) var(--rd-space-5);
margin: var(--rd-space-5) 0;
}
.rd-wiki-definition .rd-eyebrow {
margin-bottom: 8px;
}
.rd-wiki-definition p {
margin: 0;
font-size: var(--rd-fs-base);
line-height: 1.6;
color: var(--rd-text);
}
/* ---- Post-Content-Typography im Wiki-Kontext ---- */
.rd-wiki__content-sec .elementor-widget-theme-post-content p {
font-size: var(--rd-fs-md);
line-height: 1.75;
color: var(--rd-text);
max-width: 720px;
}
.rd-wiki__content-sec .elementor-widget-theme-post-content h2 {
font-size: var(--rd-fs-xl);
margin-top: var(--rd-space-6);
margin-bottom: var(--rd-space-3);
}
.rd-wiki__content-sec .elementor-widget-theme-post-content h3 {
font-size: var(--rd-fs-lg);
margin-top: var(--rd-space-5);
margin-bottom: 12px;
}
.rd-wiki__content-sec .elementor-widget-theme-post-content blockquote,
.rd-wiki__content-sec .elementor-widget-theme-post-content .wp-block-quote {
border-left: 3px solid var(--rd-accent);
padding: 8px 0 8px 20px;
margin: var(--rd-space-5) 0;
font-family: var(--rd-font-display, var(--rd-font-ui));
font-weight: 500;
font-size: var(--rd-fs-lg);
line-height: 1.35;
letter-spacing: -0.01em;
color: var(--rd-text);
max-width: 600px;
}
.rd-wiki__content-sec .elementor-widget-theme-post-content figure {
margin: var(--rd-space-5) 0;
}
.rd-wiki__content-sec .elementor-widget-theme-post-content figcaption {
margin-top: 8px;
font-size: 13px;
color: var(--rd-text-secondary);
font-family: var(--rd-font-ui);
}
/* ==========================================================================
/welpe/ — Pillar-Page Polish (Hero, TOC, Themen-Grids, CTA-Banner)
========================================================================== */
/* Hero (ersetzt inline-Styles im html-Widget) */
.rd-welpe__hero {
padding: 20px 0 12px;
font-family: var(--rd-font-display);
}
.rd-welpe__hero .rd-breadcrumb {
font-size: 14px;
color: var(--rd-text-secondary);
margin-bottom: 16px;
}
.rd-welpe__hero .rd-breadcrumb a {
color: var(--rd-text-secondary);
text-decoration: none;
}
.rd-welpe__hero .rd-breadcrumb a:hover { color: var(--rd-accent); }
.rd-welpe__hero .rd-breadcrumb__sep { color: var(--rd-border); margin: 0 4px; }
.rd-welpe__hero .rd-breadcrumb__current { color: var(--rd-text); font-weight: 600; }
.rd-welpe__hero-eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--rd-accent-soft);
border: 1px solid var(--rd-border);
border-radius: 24px;
padding: 6px 18px;
font-size: 13px;
font-weight: 600;
color: var(--rd-text-secondary);
margin-bottom: 20px;
}
.rd-welpe__hero-lead {
font-size: 20px;
color: var(--rd-text-secondary);
font-weight: 500;
line-height: 1.6;
margin: 0;
max-width: 780px;
}
/* TOC-Karte (ersetzt .rd-triage nur im Pillar-Kontext; Rest bleibt wie er ist) */
.rd-welpe__toc {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: 12px;
padding: 20px 24px;
margin: 8px 0 32px 0;
}
.rd-welpe__toc h3 {
margin: 0 0 12px 0;
font-size: 15px;
font-weight: 700;
color: var(--rd-text-tertiary);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.rd-welpe__toc ul {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 8px;
}
@media (min-width: 640px) {
.rd-welpe__toc ul { grid-template-columns: 1fr 1fr; gap: 8px 24px; }
}
.rd-welpe__toc li {
padding: 8px 0;
border-bottom: 1px solid var(--rd-border);
line-height: 1.45;
font-size: 15px;
color: var(--rd-text-secondary);
}
.rd-welpe__toc li:last-child { border-bottom: 0; }
.rd-welpe__toc a {
color: var(--rd-accent);
text-decoration: none;
font-weight: 600;
}
.rd-welpe__toc a:hover { color: var(--rd-accent-strong); }
/* Themen-Grid (Cards nach jedem H2) */
.rd-welpe__grid-heading {
font-size: 18px;
font-weight: 700;
color: var(--rd-text);
margin: 36px 0 14px 0;
font-family: var(--rd-font-display);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rd-welpe__themen-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
margin: 0 0 40px 0;
}
@media (min-width: 640px) { .rd-welpe__themen-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .rd-welpe__themen-grid { grid-template-columns: 1fr 1fr 1fr; } }
.rd-welpe__card {
display: flex;
flex-direction: column;
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}
.rd-welpe__card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.09);
border-color: var(--rd-accent-soft);
}
.rd-welpe__card-image {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
background-size: cover;
background-position: center;
background-color: var(--rd-bg-alt);
}
.rd-welpe__card-body {
display: flex;
flex-direction: column;
gap: 6px;
padding: 14px 16px 16px 16px;
}
.rd-welpe__card-thema {
font-size: 11px;
font-weight: 700;
color: var(--rd-accent);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.rd-welpe__card-title {
font-size: 17px;
font-weight: 700;
line-height: 1.35;
color: var(--rd-text);
font-family: var(--rd-font-display);
}
.rd-welpe__card-excerpt {
font-size: 14px;
line-height: 1.5;
color: var(--rd-text-secondary);
}
/* CTA-Banner (dedupliziert inline-Styles; nutzt bestehende rd-cta-banner-Klasse) */
.rd-cta-banner {
background: var(--rd-bg-alt);
border: 1px solid var(--rd-border);
border-radius: 12px;
padding: 36px 32px;
display: flex;
gap: 24px;
align-items: center;
flex-wrap: wrap;
justify-content: space-between;
font-family: var(--rd-font-display);
margin: 24px 0;
}
.rd-cta-banner__text { flex: 1 1 320px; min-width: 260px; }
.rd-cta-banner__text h3 {
margin: 0 0 6px 0;
font-size: 22px;
font-weight: 700;
color: var(--rd-text);
}
.rd-cta-banner__text p {
margin: 0;
color: var(--rd-text-secondary);
font-size: 16px;
line-height: 1.55;
}
/* ═══════════════════════════════════════════════════════════════
* Standort-Archive (taxonomy-standort.php) — /wo/{land}/{region}/{ort}/
* ═══════════════════════════════════════════════════════════════ */
.rd-standort {
padding-bottom: 64px;
}
/* Welle-47-P2-Cleanup 2026-05-25: .rd-standort__container und
.rd-standort__hero-inner entfernt — Renderer (taxonomy-standort.php Z.35,
inc/standort-archive.php Z.212) nutzen jetzt direkt .rd-container.
Vereinheitlichung 2026-05-23 hatte Aliasse bereits CSS-äquivalent gemacht. */
/* --- Hero (kompakt, ohne Kartenbild) --- */
.rd-standort__hero {
background: var(--rd-bg-alt);
padding: 36px 0 28px;
border-bottom: 1px solid var(--rd-border);
}
.rd-standort__breadcrumb {
font-size: 14px;
color: var(--rd-text-secondary);
margin-bottom: 10px;
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.rd-standort__breadcrumb a {
color: var(--rd-text-secondary);
text-decoration: none;
}
.rd-standort__breadcrumb a:hover { color: var(--rd-accent); text-decoration: underline; }
.rd-standort__breadcrumb-sep { color: var(--rd-text-secondary, #595959); }
.rd-standort__hero-eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 12px;
font-weight: 600;
color: var(--rd-accent);
margin-bottom: 6px;
}
.rd-standort__hero-title {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: clamp(28px, 3.4vw, 40px);
line-height: 1.12;
margin: 0 0 12px 0;
color: var(--rd-text);
}
.rd-standort__hero-teaser {
font-size: 16px;
line-height: 1.55;
color: var(--rd-text);
max-width: 720px;
margin: 0;
}
/* --- Sticky Anchor-Tabs --- */
.rd-standort__tabs {
position: sticky;
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 40;
background: var(--rd-bg-page, #fdf9f6);
border-bottom: 1px solid var(--rd-border);
margin: 0 -16px 28px;
padding: 0 16px;
}
.rd-standort__tabs-inner {
max-width: 1240px;
margin: 0 auto;
display: flex;
gap: 4px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
}
.rd-standort__tab {
display: inline-flex;
align-items: center;
padding: 14px 16px;
font-size: 14px;
font-weight: 600;
color: var(--rd-text-secondary);
text-decoration: none;
white-space: nowrap;
border-bottom: 2px solid transparent;
transition: color 0.15s, border-color 0.15s;
}
.rd-standort__tab:hover {
color: var(--rd-accent);
border-bottom-color: var(--rd-accent);
}
/* Anchor-Scroll-Offset: Header + Sticky-Tabs freihalten */
.rd-standort [id] {
scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 70px);
}
/* --- Counts-Strip --- */
.rd-standort__counts { margin: 32px 0; }
.rd-standort__counts-list {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (min-width: 560px) { .rd-standort__counts-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .rd-standort__counts-list { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); } }
.rd-standort__counts-item {
background: #fff;
border: 1px solid var(--rd-border);
border-radius: 12px;
padding: 16px 14px;
display: flex;
flex-direction: column;
gap: 2px;
}
.rd-standort__counts-num {
font-size: 26px;
font-weight: 700;
color: var(--rd-text);
line-height: 1.1;
}
.rd-standort__counts-label {
font-size: 13px;
color: var(--rd-text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
}
/* --- Section-Titles --- */
.rd-standort__section-title {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: clamp(20px, 2.2vw, 26px);
margin: 0 0 20px 0;
color: var(--rd-text);
}
/* --- Children-Grid (L1→L2, L2→L3) --- */
.rd-standort__children { margin: 48px 0 40px; }
.rd-standort__children-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
@media (min-width: 560px) { .rd-standort__children-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 860px) { .rd-standort__children-grid { grid-template-columns: repeat(4, 1fr); } }
.rd-standort__children-card {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--rd-border);
border-radius: 12px;
text-decoration: none;
color: var(--rd-text);
transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
min-height: 64px;
}
.rd-standort__children-card:hover {
border-color: var(--rd-accent);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.rd-standort__children-map {
flex: 0 0 40px;
width: 40px;
height: 40px;
display: grid;
place-items: center;
background: var(--rd-bg-alt);
border-radius: 8px;
overflow: hidden;
}
.rd-standort__children-map img { max-width: 100%; max-height: 100%; object-fit: contain; }
.rd-standort__children-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.rd-standort__children-name {
font-weight: 600;
font-size: 15px;
color: var(--rd-text);
line-height: 1.25;
}
.rd-standort__children-count { font-size: 12px; color: var(--rd-text-secondary); }
.rd-standort__children-count--empty { color: var(--rd-text-secondary, #595959); }
/* --- CPT-Section-Blocks --- */
.rd-standort__cpt-section { margin: 40px 0; }
.rd-standort__cpt-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 16px;
margin-bottom: 20px;
flex-wrap: wrap;
}
.rd-standort__cpt-header .rd-standort__section-title { margin: 0; }
.rd-standort__more-link {
font-size: 14px;
font-weight: 600;
color: var(--rd-accent);
text-decoration: none;
white-space: nowrap;
}
.rd-standort__more-link:hover { color: var(--rd-accent-strong); text-decoration: underline; }
.rd-standort__cpt-grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 560px) { .rd-standort__cpt-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .rd-standort__cpt-grid { grid-template-columns: repeat(3, 1fr); } }
.rd-standort__cpt-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--rd-border);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: var(--rd-text);
transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
height: 100%;
}
.rd-standort__cpt-card:hover {
border-color: var(--rd-accent);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.rd-standort__cpt-thumb {
display: block;
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--rd-bg-alt);
}
.rd-standort__cpt-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.rd-standort__cpt-card:hover .rd-standort__cpt-thumb img { transform: scale(1.05); }
.rd-standort__cpt-thumb--empty {
background: linear-gradient(135deg, var(--rd-bg-alt) 0%, var(--rd-bg-page, #fdf9f6) 100%);
}
/* Logo-Mode-Background für Standort-Cards (Wo-Pages) — Image-Fitting selbst
kommt jetzt aus .rd-card-img--logo, das der Renderer setzt. Background
bleibt am Wrapper, damit Letterbox-Bereich um das Logo das Akzent-Soft
zeigt (visueller Frame). */
.rd-standort__cpt-section--eintrag .rd-standort__cpt-thumb,
.rd-standort__cpt-section--zuechter .rd-standort__cpt-thumb,
.rd-standort__cpt-section--unterkunft .rd-standort__cpt-thumb,
.rd-standort__cpt-section--wurfankuendigung .rd-standort__cpt-thumb {
background: var(--rd-accent-soft, #F4E3D2);
}
.rd-standort__cpt-body {
padding: 14px 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.rd-standort__cpt-date {
font-size: 12px;
font-weight: 600;
color: var(--rd-accent);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rd-standort__cpt-title {
font-weight: 700;
font-size: 17px;
line-height: 1.3;
color: var(--rd-text);
}
.rd-standort__cpt-excerpt {
font-size: 14px;
color: var(--rd-text-secondary);
line-height: 1.5;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* --- Fulltext (Hintergrund am Seitenende) --- */
.rd-standort__fulltext {
margin: 48px 0 32px;
padding: 32px 0 0;
border-top: 1px solid var(--rd-border);
max-width: 760px;
}
.rd-standort__fulltext-body {
font-size: 16px;
line-height: 1.65;
color: var(--rd-text);
}
.rd-standort__fulltext-body p { margin: 0 0 14px; }
.rd-standort__fulltext-body h2,
.rd-standort__fulltext-body h3,
.rd-standort__fulltext-body h4 {
font-family: var(--rd-font-display);
font-weight: 700;
color: var(--rd-text);
margin: 28px 0 10px;
}
.rd-standort__fulltext-body h2 { font-size: 22px; }
.rd-standort__fulltext-body h3 { font-size: 18px; margin-top: 24px; }
.rd-standort__fulltext-body h4 { font-size: 16px; margin-top: 18px; color: var(--rd-text-secondary); }
.rd-standort__fulltext-body ul,
.rd-standort__fulltext-body ol { padding-left: 1.4em; margin: 0 0 14px; }
.rd-standort__fulltext-body a { color: var(--rd-accent); }
.rd-standort__fulltext-body a:hover { color: var(--rd-accent-strong); }
/* --- FAQ-Akkordeon (innerhalb Fulltext-Body) --- */
.rd-faq__item {
margin: 8px 0;
border: 1px solid var(--rd-border);
border-radius: 10px;
background: var(--rd-bg);
overflow: hidden;
}
.rd-faq__item + .rd-faq__item { margin-top: 6px; }
.rd-faq__item[open] { border-color: var(--rd-accent); }
.rd-faq__question {
display: list-item;
list-style: none;
padding: 14px 18px;
font-weight: 600;
font-size: 15px;
color: var(--rd-text);
cursor: pointer;
position: relative;
padding-right: 44px;
}
.rd-faq__question::-webkit-details-marker { display: none; }
.rd-faq__question::after {
content: "+";
position: absolute;
right: 18px;
top: 50%;
transform: translateY(-50%);
font-size: 22px;
font-weight: 400;
color: var(--rd-accent);
transition: transform 0.2s ease;
}
.rd-faq__item[open] .rd-faq__question::after { content: "−"; }
.rd-faq__answer {
padding: 0 18px 14px;
font-size: 15px;
line-height: 1.6;
color: var(--rd-text);
}
.rd-faq__answer p { margin: 0 0 10px; }
.rd-faq__answer p:last-child { margin-bottom: 0; }
/* --- Empty-CTA --- */
.rd-standort__empty {
text-align: center;
padding: 48px 24px;
margin: 40px 0;
background: var(--rd-bg-alt);
border: 1px solid var(--rd-border);
border-radius: 12px;
}
.rd-standort__empty p {
max-width: 520px;
margin: 0 auto 20px;
color: var(--rd-text-secondary);
font-size: 15px;
line-height: 1.55;
}
/* --- Thin-Container-Banner (Path D · 2026-05-21) ---
* Opt-in via term_meta `rd_pillar_thin_containers=1`.
* Kompakter Hinweis, sitzt zwischen Hero und Counts. */
.rd-standort__thin-banner {
display: flex;
align-items: flex-start;
gap: 14px;
padding: 16px 20px;
margin: 24px 0 16px;
background: var(--rd-bg-alt);
border: 1px solid var(--rd-border);
border-left: 3px solid var(--rd-accent-strong, #944F22);
border-radius: 10px;
font-size: 15px;
line-height: 1.5;
color: var(--rd-text);
}
.rd-standort__thin-banner__icon {
flex: 0 0 auto;
font-size: 20px;
line-height: 1.2;
color: var(--rd-accent-strong, #944F22);
}
.rd-standort__thin-banner__body { margin: 0; }
.rd-standort__thin-banner__body a {
color: var(--rd-accent-strong, #944F22);
text-decoration: underline;
text-underline-offset: 2px;
}
.rd-standort__thin-banner__body a:hover { color: var(--rd-link-hover, #a86e42); }
/* ═══════════════════════════════════════════════════════════════
* Rassen-Finder (/rassen-finder/)
* ═══════════════════════════════════════════════════════════════ */
.rd-rassen-finder {
max-width: 1240px;
margin: 32px auto 64px;
padding: 0 16px;
}
.rd-rassen-finder__intro { margin-bottom: 28px; }
.rd-rassen-finder__heading {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: clamp(28px, 4vw, 40px);
line-height: 1.1;
margin: 0 0 10px;
color: var(--rd-text);
}
.rd-rassen-finder__lead {
font-size: 17px;
color: var(--rd-text-secondary);
max-width: 680px;
margin: 0;
}
/* Layout: Sidebar + Results */
.rd-rassen-finder__layout {
display: grid;
gap: 28px;
grid-template-columns: 1fr;
}
@media (min-width: 960px) {
.rd-rassen-finder__layout {
grid-template-columns: 280px 1fr;
gap: 40px;
}
}
/* Filter-Sidebar */
.rd-rassen-finder__filters {
background: #fff;
border: 1px solid var(--rd-border);
border-radius: 12px;
padding: 20px 20px 16px;
align-self: start;
}
@media (min-width: 960px) {
.rd-rassen-finder__filters {
position: sticky;
top: calc(var(--wp-admin--admin-bar--height, 0px) + 20px);
max-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px) - 40px);
overflow-y: auto;
}
}
.rd-rassen-finder__group {
border: 0;
padding: 0;
margin: 0 0 18px;
}
.rd-rassen-finder__group-label {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: 15px;
color: var(--rd-text);
margin: 0 0 10px;
padding: 0;
display: block;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.rd-rassen-finder__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rd-rassen-finder__chip {
display: inline-flex;
align-items: center;
cursor: pointer;
user-select: none;
}
.rd-rassen-finder__chip input {
position: absolute;
opacity: 0;
pointer-events: none;
width: 0;
height: 0;
}
.rd-rassen-finder__chip span {
display: inline-block;
padding: 7px 13px;
border: 1px solid var(--rd-border);
border-radius: 20px;
font-size: 13px;
font-weight: 500;
color: var(--rd-text-secondary);
background: var(--rd-bg-alt);
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
line-height: 1.2;
}
.rd-rassen-finder__chip:hover span {
border-color: var(--rd-accent);
color: var(--rd-text);
}
.rd-rassen-finder__chip input:checked + span {
background: var(--rd-accent);
color: #fff;
border-color: var(--rd-accent);
}
.rd-rassen-finder__chip input:focus-visible + span {
outline: 2px solid var(--rd-accent);
outline-offset: 2px;
}
.rd-rassen-finder__actions {
margin-top: 20px;
padding-top: 16px;
border-top: 1px solid var(--rd-border);
}
.rd-rassen-finder__actions .rd-btn--outline {
display: block;
width: 100%;
padding: 10px 16px;
border: 1px solid var(--rd-border);
background: transparent;
color: var(--rd-text-secondary);
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.rd-rassen-finder__actions .rd-btn--outline:hover {
border-color: var(--rd-accent);
color: var(--rd-accent);
}
/* Results */
.rd-rassen-finder__summary {
margin-bottom: 16px;
}
.rd-rassen-finder__counter {
font-size: 15px;
color: var(--rd-text-secondary);
margin-bottom: 10px;
}
.rd-rassen-finder__counter strong {
font-size: 26px;
color: var(--rd-text);
font-weight: 700;
margin-right: 6px;
}
.rd-rassen-finder__active {
display: flex;
flex-wrap: wrap;
gap: 12px 18px;
align-items: center;
padding: 12px 14px;
background: var(--rd-bg-alt);
border: 1px solid var(--rd-border);
border-radius: 10px;
}
.rd-rassen-finder__active[hidden] { display: none; }
.rd-rassen-finder__active-group {
display: inline-flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.rd-rassen-finder__active-label {
font-size: 12px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--rd-text-secondary);
margin-right: 4px;
}
.rd-rassen-finder__active-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 10px 5px 12px;
border: 1.5px solid var(--rd-accent);
border-radius: 14px;
background: #fff;
color: #2a2a2a;
font-size: 13px;
font-weight: 600;
font-family: inherit;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
line-height: 1.2;
}
.rd-rassen-finder__active-chip:hover {
background: var(--rd-bg-alt, #F4EDE4);
border-color: var(--rd-accent-strong);
}
.rd-rassen-finder__active-chip:focus-visible {
outline: 2px solid var(--rd-accent);
outline-offset: 2px;
}
.rd-rassen-finder__active-x {
color: var(--rd-accent);
font-size: 16px;
line-height: 1;
font-weight: 700;
margin-top: -1px;
}
.rd-rassen-finder__active-chip:hover .rd-rassen-finder__active-x {
color: var(--rd-accent-strong);
}
.rd-rassen-finder__grid {
list-style: none;
padding: 0;
margin: 0;
display: grid;
gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 640px) { .rd-rassen-finder__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1120px) { .rd-rassen-finder__grid { grid-template-columns: repeat(3, 1fr); } }
.rd-rassen-finder__card {
background: #fff;
border: 1px solid var(--rd-border);
border-radius: 12px;
overflow: hidden;
transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
display: flex;
flex-direction: column;
}
.rd-rassen-finder__card:hover {
border-color: var(--rd-accent);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.rd-rassen-finder__card-link {
display: flex;
flex-direction: column;
text-decoration: none;
color: var(--rd-text);
height: 100%;
}
.rd-rassen-finder__card-thumb {
display: block;
aspect-ratio: 16 / 9;
background: var(--rd-bg-alt);
overflow: hidden;
}
.rd-rassen-finder__card-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s;
}
.rd-rassen-finder__card:hover .rd-rassen-finder__card-thumb img { transform: scale(1.05); }
.rd-rassen-finder__card-body {
padding: 14px 16px 18px;
display: flex;
flex-direction: column;
gap: 6px;
flex: 1;
}
.rd-rassen-finder__card-title {
font-weight: 700;
font-size: 17px;
line-height: 1.3;
color: var(--rd-text);
}
.rd-rassen-finder__card-meta {
font-size: 13px;
color: var(--rd-text-secondary);
}
.rd-rassen-finder__card-tags {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin-top: 4px;
}
.rd-rassen-finder__tag {
display: inline-block;
padding: 3px 8px;
border-radius: 10px;
background: var(--rd-bg-alt);
color: var(--rd-text-secondary);
font-size: 11px;
font-weight: 500;
}
.rd-rassen-finder__card-kernsatz {
font-size: 14px;
color: var(--rd-text-secondary);
line-height: 1.5;
margin-top: 6px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rd-rassen-finder__empty {
padding: 48px 24px;
text-align: center;
background: var(--rd-bg-alt);
border: 1px solid var(--rd-border);
border-radius: 12px;
color: var(--rd-text-secondary);
font-size: 15px;
line-height: 1.55;
}
/* === HELLO-ELEMENTOR OVERRIDES === */
.site-header, .site-footer { background: transparent; }
/* ============================================================
* SITE-CHROME — Header + Footer (via Shortcode gerendert)
* Siehe theme/rundum-dog/inc/site-chrome.php
* ============================================================ */
/* --- Header Container --- */
.rd-site-header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(253, 249, 246, 0.92);
backdrop-filter: blur(12px) saturate(140%);
-webkit-backdrop-filter: blur(12px) saturate(140%);
border-bottom: 1px solid var(--rd-border, #e5ddd7);
/* Full-Bleed-Trick: aus Elementor-Section-Container ausbrechen */
width: 100vw;
margin-left: calc(50% - 50vw);
}
/* Elementor-Wrapper zurücksetzen falls er Padding/Max-Width erzwingt */
.rd-header-wrap > .elementor-container,
.rd-header-wrap .elementor-widget-shortcode,
.rd-header-wrap .elementor-widget-container {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
.rd-header-wrap { overflow: visible !important; }
.rd-site-header__main { padding: 0; }
.rd-site-header__inner {
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding: 0 16px;
height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
/* --- Logo --- */
.rd-site-header__logo {
display: inline-flex;
align-items: center;
flex-shrink: 0;
text-decoration: none;
}
.rd-site-header__logo img {
display: block;
height: 36px;
width: auto;
max-width: 100%;
}
/* --- Main-Nav (Desktop) --- */
.rd-site-header__main-nav {
flex: 1 1 auto;
display: none;
justify-content: center;
}
.rd-main-nav {
display: flex;
flex-wrap: wrap;
gap: 2px;
list-style: none;
margin: 0;
padding: 0;
}
.rd-main-nav li a {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: var(--rd-r-pill, 24px);
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--rd-text, #1A1A1A);
text-decoration: none;
transition: background 160ms ease, color 160ms ease;
white-space: nowrap;
}
.rd-main-nav li a:hover {
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
}
.rd-main-nav li.current-menu-item > a,
.rd-main-nav li.current-menu-parent > a,
.rd-main-nav li.current-menu-ancestor > a {
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
}
/* --- Actions (Search / User / Menu) --- */
.rd-site-header__actions {
display: flex;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.rd-site-header__icon-btn {
width: 40px;
height: 40px;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--rd-text, #1A1A1A);
background: transparent;
border: none;
cursor: pointer;
text-decoration: none;
transition: background 160ms ease;
}
.rd-site-header__icon-btn:hover {
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
}
.rd-site-header__icon-btn--desktop { display: none; }
.rd-site-header__icon-btn--mobile { display: grid; }
/* --- Content-Hub-Row --- */
.rd-site-header__hub {
border-top: 1px solid var(--rd-border, #e5ddd7);
background: rgba(253, 249, 246, 0.6);
}
.rd-site-header__hub-inner {
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding: 8px 16px;
display: flex;
justify-content: center;
}
.rd-content-hub {
display: flex;
flex-wrap: wrap;
gap: 6px;
list-style: none;
margin: 0;
padding: 0;
overflow-x: auto;
scrollbar-width: none;
}
.rd-content-hub::-webkit-scrollbar { display: none; }
.rd-content-hub li a {
display: inline-flex;
align-items: center;
padding: 6px 14px;
border-radius: var(--rd-r-pill, 24px);
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
text-decoration: none;
white-space: nowrap;
transition: all 160ms ease;
}
.rd-content-hub li a:hover {
border-color: var(--rd-accent, #B56A34);
color: var(--rd-accent-strong, #944F22);
transform: translateY(-1px);
}
.rd-content-hub li.current-menu-item > a {
background: var(--rd-accent, #B56A34);
color: #fff;
border-color: var(--rd-accent, #B56A34);
}
/* current-menu-parent auf Content-Hub deaktiviert — Custom-URLs matchen zu weit */
/* --- Desktop-Breakpoint --- */
@media (min-width: 880px) {
.rd-site-header__inner { height: 68px; }
.rd-site-header__logo img { height: 40px; }
.rd-site-header__main-nav { display: flex; }
.rd-site-header__icon-btn--desktop { display: grid; }
.rd-site-header__icon-btn--mobile { display: none; }
}
/* --- Mobile-Drawer --- */
.rd-mobile-drawer {
position: fixed;
inset: 0;
z-index: 200;
display: none;
}
.rd-mobile-drawer[aria-hidden="false"] { display: block; }
.rd-mobile-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(20, 19, 17, 0.5);
animation: rd-fade-in 160ms ease;
}
.rd-mobile-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: min(340px, 86vw);
background: var(--rd-bg, #FDF9F6);
box-shadow: -4px 0 24px rgba(0, 0, 0, 0.12);
padding: 20px;
display: flex;
flex-direction: column;
gap: 16px;
overflow-y: auto;
animation: rd-slide-in-right 220ms ease;
}
.rd-mobile-drawer__header {
display: flex;
justify-content: space-between;
align-items: center;
}
.rd-mobile-drawer__title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 22px;
color: var(--rd-text, #1A1A1A);
}
.rd-mobile-drawer__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 4px;
}
.rd-mobile-drawer__menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
.rd-mobile-drawer__menu li a {
display: flex;
justify-content: space-between;
align-items: center;
padding: 14px 0;
border-bottom: 1px solid var(--rd-border, #e5ddd7);
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 600;
font-size: 20px;
color: var(--rd-text, #1A1A1A);
text-decoration: none;
}
.rd-mobile-drawer__menu--secondary li a {
font-size: 16px;
color: var(--rd-text-secondary, #595959);
}
.rd-mobile-drawer__divider {
border: 0;
border-top: 1px solid var(--rd-border, #e5ddd7);
margin: 12px 0 4px;
}
.rd-mobile-drawer__footer {
display: flex;
flex-direction: column;
gap: 8px;
margin-top: auto;
padding-top: 16px;
}
/* --- Button-Basis (für Drawer-Footer) --- */
.rd-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
height: 48px;
padding: 0 24px;
border-radius: var(--rd-r-pill, 24px);
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 15px;
text-decoration: none;
cursor: pointer;
transition: all 160ms ease;
border: 1.5px solid transparent;
}
.rd-btn--primary {
background: var(--rd-accent, #B56A34);
color: #fff;
}
.rd-btn--primary:hover {
background: var(--rd-accent-strong, #944F22);
}
.rd-btn--ghost {
background: transparent;
color: var(--rd-text, #1A1A1A);
border-color: var(--rd-border-strong, #DCDCDE);
}
.rd-btn--ghost:hover {
border-color: var(--rd-accent, #B56A34);
color: var(--rd-accent-strong, #944F22);
}
/* --- Scroll-Lock wenn Drawer offen --- */
body.rd-drawer-open {
overflow: hidden;
}
@keyframes rd-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes rd-slide-in-right {
from { transform: translateX(100%); }
to { transform: translateX(0); }
}
/* --- Hello-Elementor-Header-Reset (verstecken, wenn Elementor-Pro-Header-Template aktiv ist) --- */
.elementor-page #site-header,
.elementor-page .site-header:not(.rd-site-header) { display: none; }
/* ============================================================
* SITE-FOOTER
* ============================================================ */
.rd-site-footer {
background: var(--rd-bg-inverse, #1f1a16);
color: rgba(251, 247, 242, 0.85);
padding: 56px 0 24px;
margin-top: 80px;
/* Full-Bleed-Trick analog Header */
width: 100vw;
margin-left: calc(50% - 50vw);
}
.rd-footer-wrap > .elementor-container,
.rd-footer-wrap .elementor-widget-shortcode,
.rd-footer-wrap .elementor-widget-container {
max-width: none !important;
padding: 0 !important;
margin: 0 !important;
}
.rd-footer-wrap { overflow: visible !important; }
.rd-site-footer__inner {
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding: 0 16px;
}
.rd-site-footer__grid {
display: grid;
/* Mobile: 2 Spalten direkt — Roger 2026-04-25, hat genug Platz auf Mobile.
Brand-Block stretched über beide Spalten (rule unten).
Ab 880px volle 5-Spalten-Logik. */
grid-template-columns: repeat(2, 1fr);
gap: 28px 24px;
padding-bottom: 40px;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.rd-site-footer__brand { grid-column: 1 / -1; max-width: none; }
/* Brand-Column */
.rd-site-footer__brand { max-width: 360px; }
.rd-site-footer__logo {
display: inline-flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
text-decoration: none;
}
.rd-site-footer__logo-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
background: var(--rd-accent, #B56A34);
color: #fff;
flex-shrink: 0;
}
.rd-site-footer__logo-text {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 22px;
color: #FBF7F2;
letter-spacing: -0.01em;
}
.rd-site-footer__claim {
font-size: 14px;
line-height: 1.6;
color: rgba(251, 247, 242, 0.7);
margin: 0 0 16px;
}
.rd-site-footer__social {
display: flex;
gap: 8px;
}
.rd-site-footer__social-link {
width: 36px;
height: 36px;
border-radius: 50%;
display: grid;
place-items: center;
border: 1px solid rgba(255, 255, 255, 0.18);
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 11px;
color: rgba(251, 247, 242, 0.8);
text-decoration: none;
transition: all 160ms ease;
}
.rd-site-footer__social-link:hover {
border-color: var(--rd-accent, #B56A34);
color: var(--rd-accent, #B56A34);
}
/* Content-Columns */
.rd-site-footer__col-title {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent, #B56A34);
margin: 0 0 16px;
}
.rd-site-footer__col-list,
.rd-site-footer__col ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
.rd-site-footer__col-list li a,
.rd-site-footer__col ul li a {
color: rgba(251, 247, 242, 0.75);
font-size: 14px;
text-decoration: none;
transition: color 160ms ease;
}
.rd-site-footer__col-list li a:hover,
.rd-site-footer__col ul li a:hover {
color: var(--rd-accent, #B56A34);
}
/* Bottom-Row */
.rd-site-footer__bottom {
padding-top: 20px;
display: flex;
flex-wrap: wrap;
gap: 6px 12px;
justify-content: space-between;
align-items: center;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
color: rgba(251, 247, 242, 0.5);
}
.rd-site-footer__bottom-sep { display: none; }
/* Responsive Grid · W41: 6 Spalten (Brand + 3 Content + Cartoon + Rechtliches) */
@media (min-width: 880px) {
.rd-site-footer__grid {
grid-template-columns: 1.4fr repeat(5, 1fr);
gap: 40px;
}
.rd-site-footer__brand { grid-column: auto; max-width: 360px; }
}
/* Image-Attribution Caption (W41 B.1 Decision 1B) · CC-BY-SA für Karten */
.rd-image-attribution {
font-size: 12px;
line-height: 1.4;
color: var(--rd-text-tertiary, #767676);
font-style: italic;
text-align: right;
padding: 6px 8px 0;
margin: 0;
}
.rd-image-attribution a {
color: inherit;
text-decoration: underline;
text-decoration-color: rgba(154, 142, 135, 0.4);
}
.rd-image-attribution a:hover {
color: var(--rd-color-brand, #B56A34);
}
.rd-figure-with-attribution {
margin: 0;
}
/* Cartoon-Spalte im Footer · kompaktes Visual als Scroll-Anker (W41) */
.rd-site-footer__col--cartoon { min-width: 0; }
.rd-site-footer__col--cartoon .rd-cartoon-woche__eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
letter-spacing: 0.1em;
color: var(--rd-accent, #B56A34);
margin-bottom: 16px;
}
.rd-site-footer__col--cartoon .rd-cartoon-woche__title {
color: rgba(251, 247, 242, 0.9);
font-size: 14px;
}
.rd-site-footer__col--cartoon .rd-cartoon-woche__kurz {
color: rgba(251, 247, 242, 0.6);
font-size: 12px;
}
.rd-site-footer__col--cartoon .rd-cartoon-woche__card:hover .rd-cartoon-woche__title {
color: var(--rd-accent, #B56A34);
}
/* Legacy-Footer verstecken wenn wir aktiv sind */
.elementor-page .site-footer:not(.rd-site-footer) { display: none; }
/* ============================================================
* THEMA-ARCHIVE (/thema/{slug}/)
* ============================================================ */
/* Kein eigenes BG auf .rd-thema — Body-/Site-BG fließt durch */
.rd-thema { background: transparent; }
/* Hero (transparent — kein Box-Look) */
.rd-thema__hero {
padding: 56px 0 32px;
background: transparent;
}
.rd-thema__hero-eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 8px;
}
.rd-thema__hero-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: clamp(32px, 5vw, 48px);
line-height: 1.1;
color: var(--rd-text, #1A1A1A);
letter-spacing: -0.02em;
margin: 0 0 16px;
}
.rd-thema__hero-lead {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 18px;
line-height: 1.5;
color: var(--rd-text-secondary, #595959);
max-width: 720px;
margin: 0;
}
/* Posts-Grid */
.rd-thema__posts { padding: 48px 0 64px; }
.rd-thema__grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 680px) {
.rd-thema__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
.rd-thema__grid { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
/* Card */
.rd-thema__card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.rd-thema__card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
border-color: var(--rd-accent, #B56A34);
}
.rd-thema__card-image {
aspect-ratio: 16 / 9;
background-color: var(--rd-accent-soft, #F4E3D2);
background-image: linear-gradient(135deg, #F4E3D2 0%, #f0e4d8 100%);
background-size: cover;
background-position: center;
display: grid;
place-items: center;
color: var(--rd-accent, #B56A34);
opacity: 0.9;
}
.rd-thema__card-image-placeholder {
font-size: 20px;
opacity: 0.55;
filter: grayscale(0.3);
}
.rd-thema__card-body {
padding: 20px;
display: flex;
flex-direction: column;
gap: 8px;
flex: 1;
}
.rd-thema__card-eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
}
.rd-thema__card-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.25;
color: var(--rd-text, #1A1A1A);
margin: 0;
letter-spacing: -0.01em;
}
.rd-thema__card-excerpt {
font-size: 14px;
line-height: 1.5;
color: var(--rd-text-secondary, #595959);
margin: 4px 0 0;
}
.rd-thema__card-meta {
margin-top: auto;
padding-top: 12px;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
color: var(--rd-text-tertiary, #767676);
display: flex;
gap: 6px;
align-items: center;
}
/* Empty-State */
.rd-thema__empty {
padding: 48px 16px;
text-align: center;
color: var(--rd-text-secondary, #595959);
font-size: 16px;
}
/* Pagination */
.rd-thema__pagination {
margin-top: 40px;
display: flex;
justify-content: center;
}
.rd-thema__pagination ul,
.rd-thema__pagination .page-numbers {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rd-thema__pagination a,
.rd-thema__pagination span {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 44px;
height: 44px;
padding: 0 16px;
border-radius: var(--rd-r-pill, 24px);
border: 1px solid var(--rd-border, #e5ddd7);
background: #fff;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--rd-text, #1A1A1A);
text-decoration: none;
transition: all 160ms ease;
}
.rd-thema__pagination a:hover {
border-color: var(--rd-accent, #B56A34);
color: var(--rd-accent-strong, #944F22);
}
.rd-thema__pagination .current {
background: var(--rd-accent, #B56A34);
color: #fff;
border-color: var(--rd-accent, #B56A34);
}
/* Prev/Next prominenter */
.rd-thema__pagination .prev,
.rd-thema__pagination .next {
padding: 0 22px;
border-color: var(--rd-accent, #B56A34);
color: var(--rd-accent-strong, #944F22);
font-weight: 700;
}
/* Fulltext am Seitenende — fließt mit dem Grid zusammen */
.rd-thema__fulltext {
padding: 16px 0 64px;
background: transparent;
}
/* Breite wie die Cards oben, damit keine „schmale Box" entsteht */
.rd-thema__fulltext-inner { max-width: none; }
.rd-thema__fulltext-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 24px;
color: var(--rd-text, #1A1A1A);
margin: 0 0 20px;
}
.rd-thema__fulltext-body {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 16px;
line-height: 1.7;
color: var(--rd-text, #1A1A1A);
}
.rd-thema__fulltext-body p { margin: 0 0 16px; }
.rd-thema__fulltext-body h2,
.rd-thema__fulltext-body h3 {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
color: var(--rd-text, #1A1A1A);
margin: 24px 0 12px;
}
/* rd-container: vergewissere dass max-width gesetzt ist */
.rd-thema .rd-container {
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding: 0 16px;
}
/* Hero-Count neben Eyebrow */
.rd-thema__hero-count {
color: var(--rd-text-tertiary, #767676);
font-weight: 500;
margin-left: 2px;
}
/* ─── Lebensphase-Cross-Filter ─── */
.rd-thema__lebensphase {
padding: 8px 0 24px;
}
.rd-thema__lebensphase-label {
font-family: var(--rd-font-ui), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rd-text-tertiary, #767676);
margin-bottom: 10px;
}
.rd-thema__lebensphase-pills {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rd-thema__lebensphase-pill {
display: inline-flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
padding: 10px 16px;
border-radius: var(--rd-r-pill, 9999px);
border: 1px solid var(--rd-border, #E5DDD7);
background: var(--rd-bg-soft, #fff);
color: var(--rd-text, #1A1A1A);
font-family: var(--rd-font-ui), sans-serif;
text-decoration: none;
transition: border-color 160ms ease, background 160ms ease, color 160ms ease;
}
.rd-thema__lebensphase-pill:hover {
border-color: var(--rd-accent-strong, #944F22);
color: var(--rd-accent-strong, #944F22);
}
.rd-thema__lebensphase-pill.is-active {
background: var(--rd-accent-strong, #944F22);
border-color: var(--rd-accent-strong, #944F22);
color: #fff;
}
.rd-thema__lebensphase-pill-label {
font-weight: 700;
font-size: 14px;
line-height: 1.2;
}
.rd-thema__lebensphase-pill-sub {
font-weight: 500;
font-size: 11px;
line-height: 1.1;
opacity: 0.75;
letter-spacing: 0.02em;
}
/* ─── Posts-Filter-Info (aktiver Lebensphase-Filter) ─── */
.rd-thema__posts-filterinfo {
font-family: var(--rd-font-ui), sans-serif;
font-size: 14px;
color: var(--rd-text-secondary, #595959);
margin: 0 0 20px;
padding: 12px 16px;
background: var(--rd-accent-soft, #F4E3D2);
border-radius: var(--rd-r-sm, 8px);
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
}
.rd-thema__posts-filterinfo strong {
color: var(--rd-accent-strong, #944F22);
}
.rd-thema__posts-filterinfo a {
color: var(--rd-accent-strong, #944F22);
text-decoration: underline;
text-underline-offset: 2px;
}
/* ─── Categories-Grid (Top-Tags als Sub-Kategorien) ─── */
.rd-thema__categories {
padding: 16px 0 32px;
}
.rd-thema__categories-header {
margin-bottom: 20px;
}
.rd-thema__categories-eyebrow {
font-family: var(--rd-font-ui), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 8px;
}
.rd-thema__categories-title {
font-family: var(--rd-font-display), sans-serif;
font-weight: 700;
font-size: clamp(22px, 3vw, 28px);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--rd-text, #1A1A1A);
margin: 0;
}
.rd-thema__categories-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 12px;
}
.rd-thema__category-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 16px 18px;
background: var(--rd-bg-soft, #fff);
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: var(--rd-r-md, 12px);
text-decoration: none;
color: inherit;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.rd-thema__category-card:hover {
transform: translateY(-2px);
border-color: var(--rd-accent-strong, #944F22);
box-shadow: var(--rd-shadow-sm);
}
.rd-thema__category-name {
font-family: var(--rd-font-display), sans-serif;
font-weight: 700;
font-size: 16px;
line-height: 1.25;
color: var(--rd-text, #1A1A1A);
letter-spacing: -0.01em;
}
.rd-thema__category-count {
font-family: var(--rd-font-ui), sans-serif;
font-size: 12px;
color: var(--rd-text-tertiary, #767676);
font-weight: 500;
}
/* ─── Related Themen (Cross-Linking am Ende) ─── */
.rd-thema__related {
padding: 32px 0 48px;
border-top: 1px solid var(--rd-border, #E5DDD7);
margin-top: 16px;
}
.rd-thema__related-header {
margin-bottom: 20px;
}
.rd-thema__related-eyebrow {
font-family: var(--rd-font-ui), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 8px;
}
.rd-thema__related-title {
font-family: var(--rd-font-display), sans-serif;
font-weight: 700;
font-size: clamp(22px, 3vw, 28px);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--rd-text, #1A1A1A);
margin: 0;
}
.rd-thema__related-grid {
display: grid;
grid-template-columns: 1fr;
gap: 12px;
}
@media (min-width: 680px) {
.rd-thema__related-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
.rd-thema__related-grid { grid-template-columns: repeat(3, 1fr); }
}
.rd-thema__related-card {
display: flex;
flex-direction: column;
gap: 6px;
padding: 18px 20px;
background: var(--rd-bg-soft, #fff);
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: var(--rd-r-md, 12px);
text-decoration: none;
color: inherit;
transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.rd-thema__related-card:hover {
transform: translateY(-2px);
border-color: var(--rd-accent-strong, #944F22);
box-shadow: var(--rd-shadow-sm);
}
.rd-thema__related-card-title {
font-family: var(--rd-font-display), sans-serif;
font-weight: 700;
font-size: 18px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
}
.rd-thema__related-card-lead {
font-size: 14px;
line-height: 1.5;
color: var(--rd-text-secondary, #595959);
}
.rd-thema__related-card-meta {
margin-top: auto;
padding-top: 8px;
font-family: var(--rd-font-ui), sans-serif;
font-size: 12px;
color: var(--rd-text-tertiary, #767676);
display: flex;
justify-content: space-between;
align-items: center;
}
.rd-thema__related-card-arrow {
color: var(--rd-accent-strong, #944F22);
font-size: 14px;
transition: transform 160ms ease;
}
.rd-thema__related-card:hover .rd-thema__related-card-arrow {
transform: translateX(4px);
}
/* ============================================================
* BEITRAG / POST-SINGLE (Claude-Design v2)
* ============================================================ */
.rd-beitrag { background: transparent; }
/* Welle-47 (2026-05-23): .rd-beitrag .rd-container Override entfernt —
Standard-.rd-container greift nun (Token-driven Padding statt 16px hardcoded). */
/* ─── Hero (kompakt) ───
Welle-47 (2026-05-23): BG + Border-Bottom analog .rd-archive-hero und
.rd-standort__hero. Roger 2026-05-23: „bei den Beiträgen … könnte der
Hero eingefärbt werden wie auf den anderen Seiten". */
.rd-beitrag__hero {
padding: 40px 0 24px;
background: var(--rd-bg-alt);
border-bottom: 1px solid var(--rd-border);
}
.rd-beitrag__breadcrumb {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
margin-bottom: 16px;
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.rd-beitrag__breadcrumb a {
color: var(--rd-text-secondary, #595959);
text-decoration: none;
}
.rd-beitrag__breadcrumb a:hover { color: var(--rd-accent-strong, #944F22); }
.rd-beitrag__hero-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
}
@media (min-width: 768px) {
.rd-beitrag__hero-grid {
grid-template-columns: 1.2fr 1fr;
gap: 48px;
}
}
.rd-beitrag__hero-eyebrow {
display: inline-block;
padding: 4px 12px;
border-radius: var(--rd-r-pill, 24px);
background: var(--rd-accent-soft, #F4E3D2);
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
text-decoration: none;
margin-bottom: 16px;
}
.rd-beitrag__hero-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: clamp(28px, 4.2vw, 44px);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--rd-text, #1A1A1A);
margin: 0 0 16px;
}
.rd-beitrag__hero-lead {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 17px;
line-height: 1.55;
color: var(--rd-text-secondary, #595959);
margin: 0 0 20px;
}
.rd-beitrag__hero-meta {
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
align-items: center;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 13px;
color: var(--rd-text-tertiary, #767676);
}
.rd-beitrag__hero-author {
color: var(--rd-text, #1A1A1A);
font-weight: 600;
text-decoration: none;
transition: color 0.15s;
}
.rd-beitrag__hero-author:hover {
color: var(--rd-accent-strong, #944F22);
text-decoration: underline;
}
.rd-beitrag__hero-image {
aspect-ratio: 16 / 9;
border-radius: 12px;
overflow: hidden;
background: var(--rd-accent-soft, #F4E3D2);
}
.rd-beitrag__hero-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ─── Content-Grid ─── */
.rd-beitrag__body { padding: 24px 0 64px; }
.rd-beitrag__grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
@media (min-width: 960px) {
.rd-beitrag__grid { grid-template-columns: minmax(0, 1fr) 320px; gap: 56px; }
.rd-beitrag__grid--no-sidebar { grid-template-columns: minmax(0, 1fr); }
.rd-beitrag__sidebar { position: sticky; top: 120px; align-self: start; }
}
@media (min-width: 1200px) {
.rd-beitrag__grid { grid-template-columns: minmax(0, 1fr) 360px; gap: 64px; }
.rd-beitrag__grid--no-sidebar { grid-template-columns: minmax(0, 1fr); }
}
.rd-beitrag__main { min-width: 0; }
/* ─── Content Typography ─── */
.rd-beitrag__content {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 17px;
line-height: 1.75;
color: var(--rd-text, #1A1A1A);
}
.rd-beitrag__content > * { max-width: 720px; }
/* FAQ-Items sind Layout-Boxen (volle Spaltenbreite), kein Lesetext.
Im Live-Markup stehen die als direkte
Geschwister im rd-beitrag__content — der > *-Cap zog sie sonst auf 720px,
während rd-autor-card als Geschwister von rd-beitrag__content die volle
rd-beitrag__main-Breite einnimmt (sichtbar als „FAQ schmaler als Autor-Box").
Memory: feedback_lesetext_cap_nicht_auf_layout_container. */
.rd-beitrag__content > .rd-faq,
.rd-beitrag__content > .rd-faq__list,
.rd-beitrag__content > .rd-faq__item { max-width: none; }
.rd-beitrag__content h2 {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 1.25;
color: var(--rd-text, #1A1A1A);
margin: 40px 0 16px;
letter-spacing: -0.01em;
scroll-margin-top: 120px;
}
.rd-beitrag__content h3 {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.3;
color: var(--rd-text, #1A1A1A);
margin: 32px 0 12px;
}
.rd-beitrag__content p { margin: 0 0 20px; }
.rd-beitrag__content ul,
.rd-beitrag__content ol { margin: 0 0 20px; padding-left: 24px; }
.rd-beitrag__content li { margin-bottom: 8px; }
.rd-beitrag__content a {
color: var(--rd-accent-strong, #944F22);
text-decoration: underline;
text-decoration-color: var(--rd-accent-soft, #F4E3D2);
text-underline-offset: 3px;
text-decoration-thickness: 2px;
transition: text-decoration-color 160ms ease;
}
.rd-beitrag__content a:hover {
text-decoration-color: var(--rd-accent, #B56A34);
}
.rd-beitrag__content blockquote {
border-left: 3px solid var(--rd-accent, #B56A34);
padding: 4px 0 4px 20px;
margin: 24px 0;
font-style: italic;
color: var(--rd-text-secondary, #595959);
}
.rd-beitrag__content figure,
.rd-beitrag__content img {
max-width: 100%;
height: auto;
border-radius: 12px;
}
.rd-beitrag__autolink {
color: var(--rd-accent-strong, #944F22);
text-decoration: underline dotted;
text-underline-offset: 3px;
}
/* ─── Cross: „Das solltest du auch lesen" ─── */
.rd-beitrag__cross {
margin: 48px 0;
padding: 28px 24px;
background: var(--rd-accent-soft, #F4E3D2);
border-radius: 16px;
}
.rd-beitrag__cross-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 20px;
color: var(--rd-text, #1A1A1A);
margin: 0 0 20px;
}
.rd-beitrag__cross-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 680px) {
.rd-beitrag__cross-grid { grid-template-columns: repeat(3, 1fr); }
}
.rd-beitrag__cross-card {
display: flex;
flex-direction: column;
background: #fff;
border-radius: 10px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 160ms ease, box-shadow 160ms ease;
}
.rd-beitrag__cross-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.rd-beitrag__cross-image {
aspect-ratio: 16 / 9;
background-color: var(--rd-accent-soft, #F4E3D2);
background-size: cover;
background-position: center;
}
.rd-beitrag__cross-body { padding: 14px 16px 18px; }
.rd-beitrag__cross-eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 6px;
}
.rd-beitrag__cross-card-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.3;
color: var(--rd-text, #1A1A1A);
margin: 0;
}
/* Wiki-Variante: kein Bild, Text-forward mit Accent-Strip + Definition */
.rd-beitrag__cross-card--wiki { padding: 20px; }
.rd-beitrag__cross-card--wiki::before {
content: '';
display: block;
height: 3px;
width: 40px;
background: var(--rd-accent, #B56A34);
border-radius: 2px;
margin-bottom: 14px;
}
.rd-beitrag__cross-card--wiki .rd-beitrag__cross-body { padding: 0; }
.rd-beitrag__cross-author {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
line-height: 1.4;
color: var(--rd-text-tertiary, #767676);
margin: 8px 0 0;
}
.rd-beitrag__cross-def {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 13px;
line-height: 1.5;
color: var(--rd-text-secondary, #595959);
margin: 8px 0 0;
}
/* ─── Quellen ─── */
.rd-beitrag__quellen {
margin: 40px 0 24px;
padding-top: 24px;
border-top: 1px solid var(--rd-border, #e5ddd7);
}
.rd-beitrag__quellen-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 18px;
color: var(--rd-text, #1A1A1A);
margin: 0 0 12px;
}
.rd-beitrag__quellen-list {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 14px;
line-height: 1.6;
color: var(--rd-text-secondary, #595959);
padding-left: 20px;
margin: 0;
}
.rd-beitrag__quellen-list li { margin-bottom: 6px; }
.rd-beitrag__quellen-list a { color: var(--rd-accent-strong, #944F22); }
/* ─── Tags ─── */
.rd-beitrag__tags {
margin-top: 32px;
padding-top: 24px;
border-top: 1px solid var(--rd-border, #e5ddd7);
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
.rd-beitrag__tags a {
display: inline-block;
padding: 4px 12px;
margin: 2px;
border-radius: var(--rd-r-pill, 24px);
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-text-secondary, #595959);
text-decoration: none;
font-size: 12px;
font-weight: 600;
}
.rd-beitrag__tags-label {
font-weight: 700;
margin-right: 8px;
}
/* ─── Sidebar ─── */
.rd-beitrag__sidebar {
display: flex;
flex-direction: column;
gap: 24px;
}
.rd-beitrag__widget {
padding: 20px;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
}
.rd-beitrag__widget-title {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin: 0 0 14px;
}
.rd-beitrag__widget-text {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 14px;
line-height: 1.55;
color: var(--rd-text);
margin: 0;
}
/* Quick-Facts Definition-List (job, produkt, wurfankuendigung Sidebar + Body) */
.rd-beitrag__facts {
display: grid;
grid-template-columns: max-content 1fr;
column-gap: 14px;
row-gap: 8px;
margin: 0;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 14px;
line-height: 1.5;
}
.rd-beitrag__facts dt {
font-weight: 600;
color: var(--rd-text-secondary, #595959);
text-transform: uppercase;
font-size: 11px;
letter-spacing: 0.06em;
padding-top: 3px;
}
.rd-beitrag__facts dd {
margin: 0;
color: var(--rd-text);
}
/* Universelle Relation-Card für Sidebar-Verknüpfungen
(job → eintrag, wurf → hunderasse + zuechter, etc.) */
.rd-relation-card {
display: flex;
align-items: center;
gap: 14px;
padding: 12px;
background: var(--rd-bg-soft, #FAF7F4);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: border-color 160ms ease, background 160ms ease, transform 160ms ease;
}
.rd-relation-card:hover {
border-color: var(--rd-accent, #B56A34);
background: #fff;
transform: translateY(-1px);
}
.rd-relation-card__logo {
width: 56px;
height: 56px;
object-fit: contain;
flex-shrink: 0;
background: #fff;
border: 1px solid var(--rd-border);
border-radius: 8px;
padding: 6px;
}
.rd-relation-card__body {
flex: 1;
min-width: 0;
}
.rd-relation-card__type {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-text-secondary, #595959);
margin-bottom: 2px;
}
.rd-relation-card__title {
font-family: var(--rd-font-heading, Inter), sans-serif;
font-size: 16px;
font-weight: 700;
color: var(--rd-text);
line-height: 1.3;
margin-bottom: 4px;
}
.rd-relation-card__cta {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 13px;
color: var(--rd-accent-strong, #944F22);
font-weight: 600;
}
/* TOC */
.rd-beitrag__toc-list {
list-style: decimal;
padding-left: 20px;
margin: 0;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 14px;
line-height: 1.55;
color: var(--rd-text, #1A1A1A);
}
.rd-beitrag__toc-list li { margin-bottom: 8px; }
.rd-beitrag__toc-list a {
color: var(--rd-text, #1A1A1A);
text-decoration: none;
}
.rd-beitrag__toc-list a:hover { color: var(--rd-accent-strong, #944F22); }
/* Mobile-TOC: über dem Content auf Mobile, unter dem H1.
Auf Desktop ausgeblendet — dort lebt das TOC in der Sticky-Sidebar. */
.rd-beitrag__toc--mobile {
background: var(--rd-accent-soft, #F4E3D2);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
padding: 16px 18px;
margin-bottom: 28px;
}
.rd-beitrag__toc--mobile .rd-beitrag__toc-summary {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
cursor: pointer;
list-style: none;
position: relative;
padding-right: 24px;
}
.rd-beitrag__toc--mobile .rd-beitrag__toc-summary::-webkit-details-marker { display: none; }
.rd-beitrag__toc--mobile .rd-beitrag__toc-summary::after {
content: '▾';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
font-size: 14px;
transition: transform 200ms ease;
}
.rd-beitrag__toc--mobile[open] .rd-beitrag__toc-summary::after { transform: translateY(-50%) rotate(180deg); }
.rd-beitrag__toc--mobile .rd-beitrag__toc-list { margin-top: 12px; }
@media (min-width: 960px) {
.rd-beitrag__toc--mobile { display: none; }
}
@media (max-width: 959px) {
.rd-beitrag__toc--desktop { display: none; }
}
/* Related in Sidebar */
.rd-beitrag__related-list {
list-style: none;
margin: 0;
padding: 0;
font-family: var(--rd-font-ui, Inter), sans-serif;
}
.rd-beitrag__related-list li {
padding: 10px 0;
border-bottom: 1px solid var(--rd-border, #e5ddd7);
}
.rd-beitrag__related-list li:last-child { border-bottom: none; padding-bottom: 0; }
.rd-beitrag__related-list li:first-child { padding-top: 0; }
.rd-beitrag__related-list a {
color: var(--rd-text, #1A1A1A);
text-decoration: none;
font-size: 14px;
font-weight: 600;
line-height: 1.4;
}
.rd-beitrag__related-list a:hover { color: var(--rd-accent-strong, #944F22); }
/* Newsletter */
.rd-beitrag__newsletter {
background: linear-gradient(135deg, #F4E3D2 0%, #f0e4d8 100%);
border-color: var(--rd-accent-soft, #F4E3D2);
}
.rd-beitrag__newsletter-lead {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 13px;
line-height: 1.5;
color: var(--rd-text-secondary, #595959);
margin: 0 0 14px;
}
.rd-beitrag__newsletter-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.rd-beitrag__newsletter-form input[type="email"] {
padding: 10px 14px;
border-radius: var(--rd-r-pill, 24px);
border: 1px solid var(--rd-border, #e5ddd7);
background: #fff;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 14px;
color: var(--rd-text, #1A1A1A);
}
.rd-beitrag__newsletter-form input[type="email"]:focus {
outline: none;
border-color: var(--rd-accent, #B56A34);
}
/* ─── Mehr aus dem Magazin (full-bleed) ─── */
.rd-beitrag__magazin {
padding: 48px 0 64px;
background: var(--rd-accent-soft, #F4E3D2);
/* Full-Bleed: aus content-Container ausbrechen */
width: 100vw;
margin-left: calc(50% - 50vw);
}
.rd-beitrag__magazin-header {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.rd-beitrag__magazin-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 24px;
color: var(--rd-text, #1A1A1A);
margin: 0;
}
.rd-beitrag__magazin-link {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--rd-accent-strong, #944F22);
text-decoration: none;
}
.rd-beitrag__magazin-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
}
@media (min-width: 680px) { .rd-beitrag__magazin-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .rd-beitrag__magazin-grid { grid-template-columns: repeat(4, 1fr); } }
.rd-beitrag__magazin-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.rd-beitrag__magazin-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
border-color: var(--rd-accent, #B56A34);
}
.rd-beitrag__magazin-image {
aspect-ratio: 16 / 9;
background-color: var(--rd-accent-soft, #F4E3D2);
background-size: cover;
background-position: center;
}
.rd-beitrag__magazin-body { padding: 14px 16px 18px; }
.rd-beitrag__magazin-eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 6px;
}
.rd-beitrag__magazin-card-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.3;
color: var(--rd-text, #1A1A1A);
margin: 0 0 8px;
}
.rd-beitrag__magazin-meta {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
color: var(--rd-text-tertiary, #767676);
}
.screen-reader-text {
position: absolute !important;
clip: rect(1px, 1px, 1px, 1px);
height: 1px; width: 1px;
overflow: hidden;
white-space: nowrap;
}
/* ============================================================
* HOMEPAGE / FRONT-PAGE (v2)
* ============================================================ */
.rd-home { background: transparent; }
.rd-home .rd-container {
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding: 0 16px;
}
.rd-home__eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 12px;
}
/* ─── 1. Hero — extrahiert in rd-hero-magazin Atomic (Phase 2A) ─── */
/* Frontpage rendert via Elementor-Page (ID 32503) mit rd-hero-magazin */
/* Legacy-CSS entfernt 2026-05-06 Phase 2E */
/* ─── 2. Suche ─── */
.rd-home__search { padding: 32px 0 24px; }
.rd-home__search-inner { max-width: 820px; }
.rd-home__search-box {
background: var(--rd-accent-soft, #F4E3D2);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 20px;
padding: 10px;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.rd-home__search-chips {
display: flex;
gap: 4px;
padding: 6px 4px 10px;
overflow-x: auto;
scrollbar-width: none;
}
.rd-home__search-chips::-webkit-scrollbar { display: none; }
.rd-home__search-chip {
padding: 6px 14px;
border: none;
border-radius: var(--rd-r-pill, 24px);
background: transparent;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
cursor: pointer;
white-space: nowrap;
}
.rd-home__search-chip.is-active {
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
}
.rd-home__search-row {
display: flex;
align-items: center;
gap: 8px;
padding: 8px;
background: #fff;
border-radius: var(--rd-r-pill, 24px);
}
.rd-home__search-icon {
padding: 0 4px 0 14px;
color: var(--rd-text-tertiary, #767676);
display: inline-flex;
}
.rd-home__search-input {
flex: 1;
border: none;
outline: none;
background: transparent;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 16px;
color: var(--rd-text, #1A1A1A);
height: 44px;
}
.rd-home__search-submit { height: 44px; padding: 0 22px; border: none; }
.rd-home__quicklinks {
margin-top: 16px;
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.rd-home__quicklinks-label {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-text-tertiary, #767676);
}
.rd-home__quicklink {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--rd-accent-strong, #944F22);
text-decoration: none;
border-bottom: 1px solid var(--rd-accent-soft, #F4E3D2);
padding-bottom: 1px;
}
.rd-home__quicklink:hover { border-bottom-color: var(--rd-accent, #B56A34); }
/* ─── Shared Section-Header ─── */
.rd-home__section-header { margin-bottom: 28px; }
.rd-home__section-header--with-link {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
flex-wrap: wrap;
}
.rd-home__section-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: clamp(22px, 3vw, 28px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
margin: 0;
}
.rd-home__section-link {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--rd-accent-strong, #944F22);
text-decoration: none;
border-bottom: 1px solid var(--rd-accent-soft, #F4E3D2);
padding-bottom: 2px;
white-space: nowrap;
}
/* ─── 3. Stats (full-bleed) ─── */
.rd-home__stats {
padding: 48px 0;
background: var(--rd-bg-alt, #FAF7F2);
border-top: 1px solid var(--rd-border, #e5ddd7);
border-bottom: 1px solid var(--rd-border, #e5ddd7);
width: 100vw;
margin-left: calc(50% - 50vw);
}
.rd-home__stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 16px;
}
.rd-home__stat {
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
padding: 20px;
}
.rd-home__stat-num {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 40px;
line-height: 1;
letter-spacing: -0.03em;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 10px;
}
.rd-home__stat-label {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 16px;
color: var(--rd-text, #1A1A1A);
margin-bottom: 3px;
letter-spacing: -0.01em;
}
.rd-home__stat-sub {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
/* ─── 4. Themen-Schnellzugriff ─── */
.rd-home__themes { padding: 56px 0 48px; }
.rd-home__theme-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 680px) { .rd-home__theme-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .rd-home__theme-grid { grid-template-columns: repeat(4, 1fr); } }
.rd-home__theme-card {
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: 12px;
background: var(--rd-accent-soft, #F4E3D2);
border: 1px solid var(--rd-border, #e5ddd7);
text-decoration: none;
color: inherit;
transition: transform 200ms ease, box-shadow 200ms ease;
}
.rd-home__theme-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.rd-home__theme-image {
height: 6px;
background-color: var(--rd-tone, #C5B89A);
background-image: linear-gradient(90deg, var(--rd-tone, #C5B89A) 0%, rgba(255, 255, 255, 0.15) 100%);
}
.rd-home__theme-body { padding: 18px 18px 20px; }
.rd-home__theme-label {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 18px;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
margin-bottom: 4px;
}
.rd-home__theme-sub {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
line-height: 1.4;
}
/* ─── 5. Latest Posts (full-bleed) ─── */
.rd-home__latest {
padding: 48px 0;
background: var(--rd-bg-alt, #FAF7F2);
width: 100vw;
margin-left: calc(50% - 50vw);
}
.rd-home__latest-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 680px) { .rd-home__latest-grid { grid-template-columns: repeat(3, 1fr); } }
.rd-home__latest-card {
display: flex;
flex-direction: column;
gap: 12px;
text-decoration: none;
color: inherit;
transition: transform 160ms ease;
}
.rd-home__latest-card:hover { transform: translateY(-2px); }
.rd-home__latest-image {
aspect-ratio: 16 / 10;
border-radius: 12px;
background-color: var(--rd-accent-soft, #F4E3D2);
background-size: cover;
background-position: center;
}
.rd-home__latest-tag {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 8px;
}
.rd-home__latest-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
margin: 0 0 10px;
}
.rd-home__latest-meta {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
/* ─── 6. Nearby / Orte ─── */
.rd-home__nearby { padding: 56px 0 48px; }
.rd-home__nearby-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 960px) {
.rd-home__nearby-grid { grid-template-columns: 1fr 1fr; align-items: start; }
}
.rd-home__nearby-map {
border-radius: 14px;
overflow: hidden;
border: 1px solid var(--rd-border, #e5ddd7);
background: #E0ECF4;
aspect-ratio: 4 / 3;
max-height: 320px;
position: relative;
background-image:
radial-gradient(circle at 30% 40%, #CFDFEA 0%, transparent 40%),
radial-gradient(circle at 70% 60%, #D5DFC8 0%, transparent 35%);
}
.rd-home__nearby-map-dots { position: absolute; inset: 0; }
.rd-home__nearby-pin {
position: absolute;
width: 28px;
height: 28px;
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
background: var(--rd-accent-strong, #944F22);
border: 2px solid #fff;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.rd-home__nearby-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.rd-home__nearby-card {
display: flex;
align-items: center;
gap: 14px;
padding: 14px;
background: var(--rd-accent-soft, #F4E3D2);
border-radius: 12px;
border: 1px solid var(--rd-border, #e5ddd7);
text-decoration: none;
color: inherit;
transition: border-color 160ms ease;
}
.rd-home__nearby-card:hover { border-color: var(--rd-accent, #B56A34); }
.rd-home__nearby-logo {
width: 56px;
height: 56px;
border-radius: 8px;
flex-shrink: 0;
background-color: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
background-size: cover;
background-position: center;
}
.rd-home__nearby-body { flex: 1; min-width: 0; }
.rd-home__nearby-type {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 3px;
}
.rd-home__nearby-name {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
margin-bottom: 2px;
}
.rd-home__nearby-town {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
.rd-home__nearby-arrow {
color: var(--rd-text-tertiary, #767676);
font-size: 18px;
flex-shrink: 0;
}
/* ─── 7. Outro — extrahiert in rd-cta-band Atomic (Phase 2C) ─── */
/* Frontpage-Outro rendert via Elementor-Page (ID 32503) mit rd-cta-band */
/* Legacy-CSS entfernt 2026-05-06 Phase 2E */
/* ============================================================
* STANDARD PAGE (Über uns, Kontakt, Familienhund, Rettungshund …)
* ============================================================ */
.rd-page { background: transparent; }
.rd-page .rd-container {
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding: 0 16px;
}
.rd-page__hero {
padding: 48px 0 24px;
}
/* === LEBENSPHASE-ONBOARDING === */
.rd-lebensphase__content {
font-family: var(--rd-font-body, Georgia, serif);
font-size: 17px; line-height: 1.7;
color: var(--rd-text-primary);
}
/* 2026-05-07 Path B Fix: max-width auf inneren elementor-container statt
* äußere Section, weil .elementor-section-stretched das Section-Element via
* Inline-Style "width: 100vw; left: -Xpx" auf volle Viewport-Breite zwingt.
* Selector mit 3 Klassen, um Elementor-Default (.elementor-section.elementor-section-boxed > .elementor-container = 1240px) zu schlagen.
* Pattern symmetrisch zu .rd-hero (1240px) und .rd-mehrwerte (1220px). */
.rd-lebensphase__content.elementor-section-boxed > .elementor-container {
max-width: 720px;
margin-left: auto;
margin-right: auto;
}
.rd-lebensphase__content h2 {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: clamp(22px, 3vw, 30px);
letter-spacing: -0.01em;
margin: 36px 0 14px;
color: var(--rd-text-primary);
}
.rd-lebensphase__content h3 {
font-family: var(--rd-font-display);
font-weight: 600;
font-size: 19px;
margin: 28px 0 8px;
}
.rd-lebensphase__content p { margin: 0 0 14px; }
.rd-lebensphase__content ul,
.rd-lebensphase__content ol { margin: 0 0 18px 20px; }
.rd-lebensphase__content li { margin: 4px 0; }
.rd-lebensphase__content a {
color: var(--rd-accent-strong);
border-bottom: 1px solid var(--rd-accent);
text-decoration: none;
}
.rd-lebensphase__content a:hover {
color: var(--rd-accent);
border-bottom-color: var(--rd-accent-strong);
}
.rd-lebensphase__listing {
padding: 40px 0;
background: var(--rd-bg-soft);
border-top: 1px solid var(--rd-border);
}
.rd-lebensphase__listing--wiki {
background: transparent;
border-top: none;
padding-top: 16px;
}
.rd-lebensphase__listing-title {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: clamp(20px, 2.5vw, 26px);
margin: 0 0 18px;
color: var(--rd-text-primary);
}
.rd-lebensphase__cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 18px;
}
.rd-lebensphase__card {
display: block;
background: #fff;
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rd-lebensphase__card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.rd-lebensphase__card-image {
aspect-ratio: 16/9;
background: var(--rd-bg-alt) center/cover no-repeat;
}
.rd-lebensphase__card-body { padding: 14px 16px 16px; }
.rd-lebensphase__card-eyebrow {
font-family: var(--rd-font-ui); font-size: 11px;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--rd-text-tertiary);
margin-bottom: 4px;
}
.rd-lebensphase__card-title {
font-family: var(--rd-font-display); font-weight: 700;
font-size: 16px; line-height: 1.3;
margin: 0;
color: var(--rd-text-primary);
}
.rd-lebensphase__wiki-list {
list-style: none; margin: 0; padding: 0;
display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 16px;
}
.rd-lebensphase__wiki-item {
background: var(--rd-bg-alt);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
padding: 14px 16px;
}
.rd-lebensphase__wiki-title {
display: block;
font-family: var(--rd-font-display); font-weight: 600;
font-size: 16px;
color: var(--rd-text-primary);
text-decoration: none;
margin-bottom: 6px;
border-bottom: 1px solid transparent;
}
.rd-lebensphase__wiki-title:hover {
color: var(--rd-accent-strong);
border-bottom-color: var(--rd-accent);
}
.rd-lebensphase__wiki-def {
font-family: var(--rd-font-ui); font-size: 13px;
color: var(--rd-text-secondary);
line-height: 1.5;
margin: 0;
}
.rd-lebensphase__cta {
padding: 48px 0;
background: var(--rd-accent-soft, #F4E3D2);
}
.rd-lebensphase__cta-box {
max-width: 720px; margin: 0 auto;
text-align: center;
}
.rd-lebensphase__cta-title {
font-family: var(--rd-font-display); font-weight: 700;
font-size: clamp(22px, 3vw, 28px);
margin: 0 0 12px;
}
.rd-lebensphase__cta-text {
font-family: var(--rd-font-body, Georgia, serif);
font-size: 16px; line-height: 1.6;
color: var(--rd-text-secondary);
margin: 0 0 22px;
}
.rd-lebensphase__cta-actions {
display: flex; gap: 12px; justify-content: center; flex-wrap: wrap;
}
/* Related-Content-Section (4 Mini-Grids: post + wiki + ausflugsziel + eintrag).
2026-05-07 Lebensphase-Related-Sprint. Empty-Subgrids ausgeblendet im Shortcode. */
.rd-lebensphase__related {
padding: 56px 0;
background: transparent;
border-top: 1px solid var(--rd-border);
}
.rd-lebensphase__related-title {
font-family: var(--rd-font-display); font-weight: 700;
font-size: clamp(22px, 2.8vw, 28px);
margin: 0 0 32px;
color: var(--rd-text-primary);
text-align: center;
}
.rd-lebensphase__related-subgrid {
margin: 0 0 36px;
}
.rd-lebensphase__related-subgrid:last-child { margin-bottom: 0; }
.rd-lebensphase__related-subgrid-title {
font-family: var(--rd-font-display); font-weight: 600;
font-size: clamp(16px, 1.8vw, 19px);
margin: 0 0 16px;
color: var(--rd-text-primary);
padding-left: 8px;
border-left: 3px solid var(--rd-accent);
}
.rd-lebensphase__related-cards {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 16px;
}
.rd-lebensphase__related-card {
display: block;
background: #fff;
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.rd-lebensphase__related-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.rd-lebensphase__related-card-image {
aspect-ratio: 16/9;
background: var(--rd-bg-alt) center/cover no-repeat;
}
.rd-lebensphase__related-card-body { padding: 12px 14px 14px; }
.rd-lebensphase__related-card-eyebrow {
font-family: var(--rd-font-ui); font-size: 11px;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--rd-text-tertiary);
margin-bottom: 4px;
}
.rd-lebensphase__related-card-title {
font-family: var(--rd-font-display); font-weight: 600;
font-size: 15px; line-height: 1.35;
color: var(--rd-text-primary);
display: block;
}
/* === MARKEN-CLAIM (Step 1.5 strategischer Auftrag) === */
.rd-marken-claim {
text-align: center;
background: var(--rd-accent-soft, #F4E3D2);
border-left: 4px solid var(--rd-accent);
padding: 28px 32px;
margin: 28px 0 36px;
border-radius: var(--rd-r-md);
}
.rd-marken-claim__text {
font-family: var(--rd-font-display); font-weight: 700;
font-size: clamp(20px, 3vw, 28px);
letter-spacing: -0.01em;
color: var(--rd-text-primary);
margin: 0 0 8px;
}
.rd-marken-claim__sub {
font-family: var(--rd-font-ui); font-size: 14px;
color: var(--rd-text-secondary);
margin: 0;
}
/* === DATENETHIK-BOX (Step 9 strategischer Auftrag) === */
.rd-datenethik {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-lg);
padding: 28px 28px 24px;
margin: 32px 0;
max-width: 820px;
}
.rd-datenethik--full {
background: var(--rd-accent-soft, #F4E3D2);
padding: 36px 36px 30px;
margin: 40px auto;
}
.rd-datenethik__heading {
font-family: var(--rd-font-display); font-weight: 700;
font-size: clamp(20px, 2.4vw, 26px);
letter-spacing: -0.01em;
margin: 0 0 18px;
color: var(--rd-text-primary);
}
.rd-datenethik__list {
list-style: none; margin: 0; padding: 0;
display: grid; gap: 14px;
}
.rd-datenethik__item {
display: flex; gap: 14px; align-items: flex-start;
}
.rd-datenethik__icon {
flex-shrink: 0;
width: 40px; height: 40px;
display: flex; align-items: center; justify-content: center;
font-size: 20px;
background: #fff;
border: 1px solid var(--rd-border);
border-radius: 50%;
}
.rd-datenethik__body { min-width: 0; }
.rd-datenethik__title {
font-family: var(--rd-font-display); font-weight: 600;
font-size: 16px;
color: var(--rd-text-primary);
margin-bottom: 2px;
}
.rd-datenethik__text {
font-family: var(--rd-font-ui); font-size: 14px; line-height: 1.55;
color: var(--rd-text-secondary);
margin: 0;
}
.rd-datenethik__link {
margin: 18px 0 0;
font-family: var(--rd-font-ui); font-size: 14px;
}
.rd-datenethik__link a {
color: var(--rd-accent-strong);
border-bottom: 1px solid var(--rd-accent);
text-decoration: none;
}
.rd-datenethik__link a:hover {
color: var(--rd-accent);
border-bottom-color: var(--rd-accent-strong);
}
/* === E-E-A-T-BOX (Auto-Render am Beitrag-Anfang) === */
.rd-eeat {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 14px 16px;
margin: 0 0 24px;
border-radius: 10px;
background: var(--rd-bg-alt, #F4EDE4);
border-left: 3px solid var(--rd-accent, #B56A34);
font-family: var(--rd-font-ui);
font-size: 14px;
line-height: 1.5;
color: var(--rd-text-primary);
}
.rd-eeat--ungeprueft {
background: #FFF4E5;
border-left-color: #C28A2A;
}
.rd-eeat__icon {
flex: 0 0 24px;
font-size: 18px;
line-height: 1.3;
color: var(--rd-accent-strong, #944F22);
}
.rd-eeat--geprueft .rd-eeat__icon { color: #2A8540; }
.rd-eeat--ungeprueft .rd-eeat__icon { color: #B26100; }
.rd-eeat__body { flex: 1 1 auto; min-width: 0; }
.rd-eeat__line { margin: 0; }
.rd-eeat__line a {
color: var(--rd-accent-strong);
border-bottom: 1px solid var(--rd-accent);
text-decoration: none;
}
.rd-eeat__line a:hover { color: var(--rd-accent); }
.rd-eeat__date { color: var(--rd-text-secondary, #595959); }
.rd-eeat__stand {
margin: 4px 0 0;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
/* === TRUST-BADGE (Gastbeitrag-Hinweis am Beitrag-Anfang) === */
.rd-trust-badge {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 16px 18px;
margin: 0 0 24px;
border-radius: 10px;
background: #F1ECE3;
border-left: 3px solid #8A7B5C;
font-family: var(--rd-font-ui);
font-size: 14px;
line-height: 1.55;
color: var(--rd-text-primary);
}
.rd-trust-badge__icon {
flex: 0 0 28px;
font-size: 22px;
line-height: 1.2;
}
.rd-trust-badge__body {
flex: 1 1 auto;
min-width: 0;
}
.rd-trust-badge__line {
margin: 0 0 4px;
font-size: 15px;
}
.rd-trust-badge__line strong {
font-weight: 600;
}
.rd-trust-badge__line a {
color: var(--rd-accent-strong);
border-bottom: 1px solid var(--rd-accent);
text-decoration: none;
}
.rd-trust-badge__line a:hover { color: var(--rd-accent); }
.rd-trust-badge__hint {
margin: 0;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
.rd-trust-badge__doppel {
margin: 10px 0 0;
padding-top: 8px;
border-top: 1px solid rgba(138, 123, 92, 0.25);
font-size: 13px;
color: #2A8540;
display: flex;
align-items: baseline;
gap: 6px;
}
.rd-trust-badge__doppel-icon {
display: inline-block;
font-weight: 700;
color: #2A8540;
}
.rd-trust-badge--gastbeitrag-doppel {
border-left-color: #5A8A4F;
background: #EEF2E6;
}
/* Stufen-Badges (Pivot 2026-04-27 — Snapshot-basiert, 4 Public-Stufen) */
.rd-trust-badge__by {
margin: 8px 0 0;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
.rd-trust-badge__role {
font-style: italic;
}
.rd-trust-badge__scope {
margin: 4px 0 0;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
.rd-trust-badge--stufe-1 {
border-left-color: #8A7B5C;
background: #F5F0E8;
}
.rd-trust-badge--stufe-2 {
border-left-color: var(--rd-accent, #B56A34);
background: var(--rd-accent-soft, #F4E3D2);
}
.rd-trust-badge--stufe-3 {
border-left-color: #2A8540;
background: #EEF6EC;
}
.rd-trust-badge--stufe-4 {
border-left-color: #1F6E80;
background: #E6F0F2;
}
.rd-trust-badge--stufe-3 .rd-trust-badge__line strong,
.rd-trust-badge--stufe-4 .rd-trust-badge__line strong {
color: #1F4F2A;
}
.rd-trust-badge--stufe-4 .rd-trust-badge__line strong {
color: #134555;
}
/* Inline-Variante (z.B. Author-Archive, Card-Flags) — Pfad G+ Item #4 (2026-04-29) */
.rd-trust-badge--inline {
display: inline-flex;
align-items: center;
padding: 3px 10px;
margin: 0;
border-radius: 999px;
border-left: none;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
line-height: 1.4;
vertical-align: middle;
}
.rd-trust-badge--gastbeitrag.rd-trust-badge--inline {
background: #EEF2E6;
color: #2A4F1A;
}
/* === AUTHOR-ARCHIVE: Gastbeitrag-Provenienz (Pfad G+ Item #4, 2026-04-29) === */
.rd-author__provenance {
display: flex;
flex-wrap: wrap;
gap: 10px;
align-items: center;
margin: 12px 0 4px;
font-size: 14px;
color: var(--rd-text-secondary, #595959);
line-height: 1.55;
}
.rd-author__provenance .rd-trust-badge--inline {
flex: 0 0 auto;
}
/* Card-Flag im Author-Archive-Grid */
.rd-card .rd-trust-badge--inline {
margin: 0 0 8px;
}
/* === PILLAR-OUTRO (Schluss-Einordnung am Seitenende) === */
.rd-page__outro {
padding: 56px 0 72px;
background: var(--rd-bg-soft, #FDF9F6);
border-top: 1px solid var(--rd-border, #e5ddd7);
margin-top: 48px;
}
.rd-page__outro .rd-container { max-width: 760px; }
.rd-page__outro-title {
font-family: var(--rd-font-display); font-weight: 700;
font-size: clamp(22px, 3vw, 32px);
letter-spacing: -0.01em;
color: var(--rd-text-primary);
margin: 0 0 18px;
}
.rd-page__outro-body {
font-family: var(--rd-font-body, Georgia, serif);
font-size: 17px; line-height: 1.7;
color: var(--rd-text-primary);
}
.rd-page__outro-body p { margin: 0 0 14px; }
.rd-page__outro-body p:last-child { margin-bottom: 0; }
.rd-page__outro-body a {
color: var(--rd-accent-strong);
border-bottom: 1px solid var(--rd-accent);
text-decoration: none;
}
.rd-page__outro-body a:hover {
color: var(--rd-accent);
border-bottom-color: var(--rd-accent-strong);
}
.rd-page__breadcrumb {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
margin-bottom: 16px;
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.rd-page__breadcrumb a {
color: var(--rd-text-secondary, #595959);
text-decoration: none;
}
.rd-page__breadcrumb a:hover { color: var(--rd-accent-strong, #944F22); }
.rd-page__title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: clamp(30px, 5vw, 48px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--rd-text, #1A1A1A);
margin: 0 0 16px;
max-width: 780px;
}
.rd-page__lead {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 18px;
line-height: 1.5;
color: var(--rd-text-secondary, #595959);
max-width: 720px;
margin: 0;
}
.rd-page__lead p { margin: 0; }
.rd-page__body { padding: 24px 0 64px; }
.rd-page__content {
max-width: 780px;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 17px;
line-height: 1.75;
color: var(--rd-text, #1A1A1A);
}
.rd-page__content h2 {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 28px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
margin: 40px 0 16px;
}
.rd-page__content h3 {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 22px;
line-height: 1.3;
color: var(--rd-text, #1A1A1A);
margin: 32px 0 12px;
}
.rd-page__content p { margin: 0 0 20px; }
.rd-page__content ul,
.rd-page__content ol { margin: 0 0 20px; padding-left: 24px; }
.rd-page__content li { margin-bottom: 8px; }
.rd-page__content a {
color: var(--rd-accent-strong, #944F22);
text-decoration: underline;
text-decoration-color: var(--rd-accent-soft, #F4E3D2);
text-underline-offset: 3px;
text-decoration-thickness: 2px;
}
.rd-page__content a:hover { text-decoration-color: var(--rd-accent, #B56A34); }
.rd-page__content blockquote {
border-left: 3px solid var(--rd-accent, #B56A34);
padding: 4px 0 4px 20px;
margin: 24px 0;
font-style: italic;
color: var(--rd-text-secondary, #595959);
}
.rd-page__content figure,
.rd-page__content img { max-width: 100%; height: auto; border-radius: 12px; }
.rd-page__pagination {
margin-top: 32px;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 14px;
}
/* ============================================================
* SINGLE-EINTRAG (Fachleute/Profis)
* ============================================================ */
.rd-eintrag { background: transparent; }
.rd-eintrag .rd-container {
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding: 0 16px;
}
/* ─── Hero ─── */
.rd-eintrag__hero {
width: 100vw;
margin-left: calc(50% - 50vw);
aspect-ratio: 21 / 7;
min-height: 220px;
max-height: 420px;
background-color: var(--rd-accent-soft, #F4E3D2);
background-size: cover;
background-position: center;
position: relative;
}
.rd-eintrag__hero-inner {
position: absolute;
top: 16px;
left: 50%;
transform: translateX(-50%);
width: 100%;
display: flex;
justify-content: space-between;
}
.rd-eintrag__hero-back {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 16px;
border-radius: var(--rd-r-pill, 24px);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--rd-text, #1A1A1A);
text-decoration: none;
}
/* ─── Title-Block (Logo überlappt Hero) ─── */
.rd-eintrag__title-block {
padding: 20px 0 32px;
border-bottom: 1px solid var(--rd-border, #e5ddd7);
}
.rd-eintrag__title-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
align-items: start;
}
@media (min-width: 760px) {
.rd-eintrag__title-grid { grid-template-columns: auto 1fr auto; gap: 24px; }
}
.rd-eintrag__logo {
width: 112px;
height: 112px;
border-radius: 12px;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
margin-top: -60px;
flex-shrink: 0;
display: grid;
place-items: center;
overflow: hidden;
position: relative;
z-index: 2;
}
.rd-eintrag__logo--image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
padding: 10px;
display: block;
}
.rd-eintrag__logo--initials {
background: var(--rd-accent-soft, #F4E3D2);
}
.rd-eintrag__logo--initials span {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 42px;
letter-spacing: -0.02em;
color: var(--rd-accent-strong, #944F22);
line-height: 1;
}
.rd-eintrag__pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 12px;
}
.rd-eintrag__pill {
padding: 4px 12px;
border-radius: var(--rd-r-pill, 24px);
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.06em;
text-transform: uppercase;
}
.rd-eintrag__pill--art {
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
}
.rd-eintrag__pill--verified {
background: #E8F5EC;
color: #1F8A5B;
text-transform: none;
font-size: 12px;
}
.rd-eintrag__name {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: clamp(26px, 4vw, 36px);
line-height: 1.15;
letter-spacing: -0.02em;
color: var(--rd-text, #1A1A1A);
margin: 0 0 8px;
}
.rd-eintrag__tagline {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 500;
font-size: 18px;
line-height: 1.3;
color: var(--rd-text-secondary, #595959);
margin: 0 0 14px;
max-width: 620px;
}
.rd-eintrag__meta {
display: flex;
gap: 16px;
flex-wrap: wrap;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
.rd-eintrag__meta-item {
display: inline-flex;
align-items: center;
gap: 4px;
}
.rd-eintrag__actions {
display: flex;
flex-direction: column;
gap: 8px;
flex-shrink: 0;
}
.rd-eintrag__action-primary {
min-width: 220px;
height: 48px;
}
.rd-eintrag__action-row {
display: flex;
gap: 8px;
}
.rd-eintrag__action-sec {
flex: 1;
height: 40px;
padding: 0 14px;
font-size: 13px;
}
/* ─── Sticky-Tabs ─── */
.rd-eintrag__tabs {
position: sticky;
top: 60px;
z-index: 40;
background: rgba(253, 249, 246, 0.94);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
border-bottom: 1px solid var(--rd-border, #e5ddd7);
}
.rd-eintrag__tabs-inner {
display: flex;
gap: 8px;
padding-top: 12px;
padding-bottom: 12px;
overflow-x: auto;
scrollbar-width: none;
}
.rd-eintrag__tabs-inner::-webkit-scrollbar { display: none; }
.rd-eintrag__tab {
padding: 8px 14px;
border-radius: var(--rd-r-pill, 24px);
border: 1px solid var(--rd-border, #e5ddd7);
background: transparent;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
text-decoration: none;
white-space: nowrap;
}
.rd-eintrag__tab--active {
background: var(--rd-text, #1A1A1A);
color: #fff;
border-color: var(--rd-text, #1A1A1A);
}
/* ─── Body-Sections ─── */
.rd-eintrag__body { padding: 32px 0 64px; }
.rd-eintrag__section { margin-bottom: 56px; scroll-margin-top: 120px; }
.rd-eintrag__section:last-child { margin-bottom: 0; }
.rd-eintrag__eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 10px;
}
.rd-eintrag__section-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: clamp(22px, 3vw, 28px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
margin: 0 0 20px;
}
.rd-eintrag__section-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 12px;
flex-wrap: wrap;
margin-bottom: 20px;
}
.rd-eintrag__section-header h2 { margin: 0; }
.rd-eintrag__section-link {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--rd-accent-strong, #944F22);
text-decoration: none;
white-space: nowrap;
}
.rd-eintrag__about {
max-width: 780px;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 17px;
line-height: 1.7;
color: var(--rd-text, #1A1A1A);
}
.rd-eintrag__about p { margin: 0 0 16px; }
/* ─── Events-Grid ─── */
.rd-eintrag__events-grid {
display: grid;
grid-template-columns: 1fr;
gap: 14px;
}
@media (min-width: 680px) { .rd-eintrag__events-grid { grid-template-columns: repeat(2, 1fr); } }
.rd-eintrag__event-card {
display: flex;
gap: 12px;
padding: 12px;
background: var(--rd-accent-soft, #F4E3D2);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
text-decoration: none;
color: inherit;
transition: transform 160ms ease;
}
.rd-eintrag__event-card:hover { transform: translateY(-2px); }
.rd-eintrag__event-image {
width: 84px;
aspect-ratio: 1 / 1;
border-radius: 8px;
flex-shrink: 0;
background-color: var(--rd-border, #e5ddd7);
background-size: cover;
background-position: center;
}
.rd-eintrag__event-body { flex: 1; min-width: 0; }
.rd-eintrag__event-cat {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 6px;
}
.rd-eintrag__event-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
margin: 0 0 4px;
}
.rd-eintrag__event-date {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
/* ─── Beiträge-Grid ─── */
.rd-eintrag__posts-grid {
display: grid;
grid-template-columns: 1fr;
gap: 16px;
}
@media (min-width: 680px) { .rd-eintrag__posts-grid { grid-template-columns: repeat(3, 1fr); } }
.rd-eintrag__post-card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: border-color 160ms ease, transform 160ms ease;
}
.rd-eintrag__post-card:hover { transform: translateY(-2px); border-color: var(--rd-accent, #B56A34); }
.rd-eintrag__post-image {
aspect-ratio: 16 / 10;
background-color: var(--rd-accent-soft, #F4E3D2);
background-size: cover;
background-position: center;
}
.rd-eintrag__post-body { padding: 14px 16px 18px; }
.rd-eintrag__post-cat {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 6px;
}
.rd-eintrag__post-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.3;
color: var(--rd-text, #1A1A1A);
margin: 0;
}
/* ─── Kontakt-Grid ─── */
.rd-eintrag__kontakt-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 760px) { .rd-eintrag__kontakt-grid { grid-template-columns: 1fr 1.2fr; } }
.rd-eintrag__kontakt-info {
display: flex;
flex-direction: column;
gap: 14px;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 14px;
}
.rd-eintrag__kontakt-row {
padding: 14px 16px;
background: var(--rd-accent-soft, #F4E3D2);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 10px;
}
.rd-eintrag__kontakt-label {
display: block;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-text-tertiary, #767676);
margin-bottom: 4px;
}
.rd-eintrag__kontakt-row a {
color: var(--rd-accent-strong, #944F22);
text-decoration: none;
font-weight: 600;
}
.rd-eintrag__kontakt-map {
aspect-ratio: 4 / 3;
min-height: 240px;
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--rd-border, #e5ddd7);
}
/* ============================================================
* THEMEN-HUB (/themen/)
* ============================================================ */
.rd-themen-hub { background: transparent; }
.rd-themen-hub .rd-container {
max-width: var(--rd-max-w, 1240px);
margin: 0 auto;
padding: 0 16px;
}
/* ─── Hero ─── */
.rd-themen-hub__hero { padding: 56px 0 40px; }
.rd-themen-hub__hero-inner { max-width: 820px; }
.rd-themen-hub__breadcrumb {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
margin-bottom: 16px;
display: flex;
gap: 8px;
align-items: center;
}
.rd-themen-hub__breadcrumb a {
color: var(--rd-text-secondary, #595959);
text-decoration: none;
}
.rd-themen-hub__breadcrumb a:hover { color: var(--rd-accent-strong, #944F22); }
.rd-themen-hub__eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 12px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 12px;
}
.rd-themen-hub__title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: clamp(30px, 5vw, 48px);
line-height: 1.1;
letter-spacing: -0.02em;
color: var(--rd-text, #1A1A1A);
margin: 0 0 16px;
}
.rd-themen-hub__lead {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 17px;
line-height: 1.65;
color: var(--rd-text, #1A1A1A);
margin: 0 0 20px;
}
.rd-themen-hub__stats {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 14px;
color: var(--rd-text-secondary, #595959);
display: flex;
gap: 10px;
flex-wrap: wrap;
align-items: center;
}
.rd-themen-hub__stats strong {
color: var(--rd-accent-strong, #944F22);
font-weight: 700;
}
/* ─── Welle 42 (2026-04-29): Filter-Bar + Results-Grid ─── */
.rd-themen-hub__filter {
padding: 24px 0;
background: var(--rd-accent-soft, #F4E3D2);
border-bottom: 1px solid var(--rd-border, #E5DDD7);
}
.rd-themen-hub__filter-form {
display: flex; flex-direction: column; gap: 16px;
}
.rd-themen-hub__filter-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 12px;
}
.rd-themen-hub__filter-field {
display: flex; flex-direction: column; gap: 4px;
}
.rd-themen-hub__filter-label {
font: 600 11px/1 'Inter', system-ui, sans-serif;
letter-spacing: 0.06em; text-transform: uppercase;
color: var(--rd-text-secondary, #595959);
}
.rd-themen-hub__filter-field select {
appearance: none;
-webkit-appearance: none;
background: var(--rd-bg, #fff) url("data:image/svg+xml;utf8,") right 12px center no-repeat;
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: var(--rd-r-md, 12px);
padding: 10px 32px 10px 14px;
font: 500 14px/1.2 'Inter', system-ui, sans-serif;
color: var(--rd-text, #1A1A1A);
}
.rd-themen-hub__filter-field select:focus {
outline: 2px solid var(--rd-accent, #B56A34);
outline-offset: 1px;
}
.rd-themen-hub__filter-actions {
display: flex; align-items: center; gap: 16px;
}
.rd-themen-hub__filter-reset {
font: 500 13px/1 'Inter', system-ui, sans-serif;
color: var(--rd-text-secondary, #595959);
text-decoration: underline;
}
.rd-themen-hub__filter-reset:hover { color: var(--rd-accent-strong, #944F22); }
@media (max-width: 1023px) {
.rd-themen-hub__filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
.rd-themen-hub__filter-grid { grid-template-columns: 1fr; }
}
.rd-themen-hub__results { padding: 32px 0 64px; }
.rd-themen-hub__results-header { margin-bottom: 24px; }
.rd-themen-hub__results-title {
font: 700 24px/1.2 'Inter', system-ui, sans-serif;
color: var(--rd-text, #1A1A1A);
margin: 0;
}
.rd-themen-hub__results-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 24px;
}
@media (max-width: 1023px) {
.rd-themen-hub__results-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 575px) {
.rd-themen-hub__results-grid { grid-template-columns: 1fr; }
}
.rd-themen-hub__pagination {
margin-top: 32px;
display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
}
.rd-themen-hub__page {
display: inline-block; min-width: 36px; padding: 8px 12px;
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: var(--rd-r-md, 12px);
font: 500 14px/1 'Inter', system-ui, sans-serif;
color: var(--rd-text, #1A1A1A);
text-decoration: none; text-align: center;
}
.rd-themen-hub__page:hover {
background: var(--rd-accent-soft, #F4E3D2);
border-color: var(--rd-accent, #B56A34);
}
.rd-themen-hub__page--current {
background: var(--rd-accent, #B56A34);
border-color: var(--rd-accent, #B56A34);
color: #fff;
}
/* ─── Themes / Blocks ─── */
.rd-themen-hub__themes { padding: 24px 0 48px; }
.rd-themen-hub__block {
padding: 40px 0;
border-top: 1px solid var(--rd-border, #e5ddd7);
}
.rd-themen-hub__block:first-child { border-top: none; }
.rd-themen-hub__block--alt {
background: var(--rd-accent-soft, #F4E3D2);
width: 100vw;
margin-left: calc(50% - 50vw);
border-top: none;
}
.rd-themen-hub__block--alt + .rd-themen-hub__block { border-top: none; }
.rd-themen-hub__block-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
flex-wrap: wrap;
margin-bottom: 28px;
}
.rd-themen-hub__block-lead { max-width: 680px; }
.rd-themen-hub__block-eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 10px;
}
.rd-themen-hub__block-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: clamp(24px, 3.5vw, 32px);
line-height: 1.2;
letter-spacing: -0.015em;
color: var(--rd-text, #1A1A1A);
margin: 0 0 10px;
}
.rd-themen-hub__block-title a {
color: inherit;
text-decoration: none;
}
.rd-themen-hub__block-title a:hover { color: var(--rd-accent-strong, #944F22); }
.rd-themen-hub__block-desc {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 15px;
line-height: 1.55;
color: var(--rd-text-secondary, #595959);
margin: 0;
}
.rd-themen-hub__block-link {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--rd-accent-strong, #944F22);
text-decoration: none;
border-bottom: 1px solid var(--rd-accent-soft, #F4E3D2);
padding-bottom: 2px;
white-space: nowrap;
}
.rd-themen-hub__block-link:hover { border-bottom-color: var(--rd-accent, #B56A34); }
/* ─── Posts-Grid ─── */
.rd-themen-hub__posts-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
}
@media (min-width: 680px) { .rd-themen-hub__posts-grid { grid-template-columns: repeat(3, 1fr); } }
.rd-themen-hub__card {
display: flex;
flex-direction: column;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
overflow: hidden;
text-decoration: none;
color: inherit;
transition: transform 200ms ease, box-shadow 200ms ease, border-color 200ms ease;
}
.rd-themen-hub__block--alt .rd-themen-hub__card {
background: #fff;
}
.rd-themen-hub__card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
border-color: var(--rd-accent, #B56A34);
}
.rd-themen-hub__card-image {
aspect-ratio: 16 / 9;
background-color: var(--rd-accent-soft, #F4E3D2);
background-size: cover;
background-position: center;
}
.rd-themen-hub__card-body { padding: 16px 18px 20px; }
.rd-themen-hub__card-eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 8px;
}
.rd-themen-hub__card-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 1.25;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
margin: 0 0 8px;
}
.rd-themen-hub__card-date {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
.rd-themen-hub__empty {
padding: 24px;
text-align: center;
color: var(--rd-text-tertiary, #767676);
font-size: 14px;
background: #fff;
border-radius: 10px;
border: 1px dashed var(--rd-border, #e5ddd7);
}
/* ─── Outro ─── */
.rd-themen-hub__outro {
padding: 64px 0;
background: var(--rd-accent-soft, #F4E3D2);
width: 100vw;
margin-left: calc(50% - 50vw);
text-align: center;
}
.rd-themen-hub__outro-inner {
max-width: 560px;
padding: 0 16px;
}
.rd-themen-hub__outro-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: clamp(24px, 3.5vw, 32px);
line-height: 1.2;
color: var(--rd-text, #1A1A1A);
margin: 0 0 12px;
}
.rd-themen-hub__outro-lead {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 15px;
line-height: 1.55;
color: var(--rd-text-secondary, #595959);
margin: 0 0 24px;
}
.rd-themen-hub__newsletter {
display: flex;
gap: 8px;
max-width: 440px;
margin: 0 auto;
flex-wrap: wrap;
justify-content: center;
}
.rd-themen-hub__newsletter input[type="email"] {
flex: 1;
min-width: 240px;
padding: 12px 18px;
border-radius: var(--rd-r-pill, 24px);
border: 1px solid var(--rd-border, #e5ddd7);
background: #fff;
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 15px;
}
.rd-themen-hub__newsletter input[type="email"]:focus {
outline: none;
border-color: var(--rd-accent, #B56A34);
}
/* Kategorien-Pill-Row im Themen-Hub (pro Block) */
.rd-themen-hub__categories {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 0 0 24px;
}
.rd-themen-hub__category {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 14px;
border-radius: var(--rd-r-pill, 24px);
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 13px;
color: var(--rd-text, #1A1A1A);
text-decoration: none;
transition: border-color 160ms ease, transform 160ms ease;
}
.rd-themen-hub__block--alt .rd-themen-hub__category { background: #fff; }
.rd-themen-hub__category:hover {
border-color: var(--rd-accent, #B56A34);
color: var(--rd-accent-strong, #944F22);
transform: translateY(-1px);
}
.rd-themen-hub__category-count {
font-size: 11px;
font-weight: 700;
color: var(--rd-text-tertiary, #767676);
background: var(--rd-accent-soft, #F4E3D2);
padding: 1px 8px;
border-radius: var(--rd-r-pill, 24px);
}
/* ─── Thema-Pillar: Kategorien-Grid (zwischen Hero und Post-Grid) ─── */
.rd-thema__categories {
padding: 24px 0 8px;
background: var(--rd-accent-soft, #F4E3D2);
width: 100vw;
margin-left: calc(50% - 50vw);
}
.rd-thema__categories-header { margin-bottom: 20px; }
.rd-thema__categories-eyebrow {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 700;
font-size: 11px;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 8px;
}
.rd-thema__categories-title {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: clamp(22px, 3vw, 28px);
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
margin: 0;
}
.rd-thema__categories-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 8px;
padding-bottom: 24px;
}
@media (min-width: 680px) { .rd-thema__categories-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 980px) { .rd-thema__categories-grid { grid-template-columns: repeat(4, 1fr); } }
.rd-thema__category-card {
display: flex;
flex-direction: column;
gap: 4px;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 10px;
text-decoration: none;
color: inherit;
transition: transform 160ms ease, border-color 160ms ease;
}
.rd-thema__category-card:hover {
transform: translateY(-2px);
border-color: var(--rd-accent, #B56A34);
}
.rd-thema__category-name {
font-family: var(--rd-font-display, Inter), sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.2;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
}
.rd-thema__category-count {
font-family: var(--rd-font-ui, Inter), sans-serif;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
/* ─── Suche — Unified-Search across all CPTs ─── */
.rd-suche {
background: var(--rd-bg);
min-height: calc(100vh - 60px);
}
.rd-suche__container {
max-width: 1240px;
margin: 0 auto;
padding: 0 20px;
}
.rd-suche__header {
background: var(--rd-bg-soft, #fff);
border-bottom: 1px solid var(--rd-border);
position: sticky;
top: 60px;
z-index: 50;
padding: 16px 0 12px;
}
.rd-suche__form {
position: relative;
display: flex;
align-items: center;
gap: 8px;
background: var(--rd-bg);
border: 1.5px solid var(--rd-border-strong, #CDBFB3);
border-radius: 9999px;
padding: 4px 4px 4px 18px;
transition: border-color 150ms ease;
}
.rd-suche__form:focus-within {
border-color: var(--rd-accent-strong);
}
.rd-suche__form-icon {
color: var(--rd-text-secondary);
display: inline-flex;
flex-shrink: 0;
}
.rd-suche__input {
flex: 1;
min-width: 0;
border: none;
outline: none;
background: transparent;
height: 44px;
padding: 0 4px;
font-family: var(--rd-font-body, Inter), system-ui, sans-serif;
font-size: 16px;
color: var(--rd-text);
}
.rd-suche__clear {
width: 36px;
height: 36px;
border: none;
background: transparent;
border-radius: 50%;
display: grid;
place-items: center;
color: var(--rd-text-tertiary, #767676);
cursor: pointer;
}
.rd-suche__submit {
height: 40px;
padding: 0 18px;
border-radius: 9999px;
background: var(--rd-accent-strong);
color: #fff;
border: none;
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-weight: 700;
font-size: 14px;
white-space: nowrap;
cursor: pointer;
}
.rd-suche__submit:hover {
background: var(--rd-accent);
}
.rd-suche__suggestions {
position: absolute;
top: calc(100% + 6px);
left: 0;
right: 0;
background: var(--rd-bg-soft, #fff);
border: 1px solid var(--rd-border);
border-radius: 12px;
box-shadow: 0 4px 12px rgba(20,19,17,0.06), 0 8px 24px rgba(20,19,17,0.05);
overflow: hidden;
z-index: 20;
}
.rd-suche__sug-item {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border-bottom: 1px solid var(--rd-border);
text-align: left;
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-size: 14px;
color: var(--rd-text);
background: transparent;
text-decoration: none;
transition: background 120ms ease;
}
.rd-suche__sug-item:last-child { border-bottom: none; }
.rd-suche__sug-item:hover { background: var(--rd-bg-alt); }
.rd-suche__sug-item strong { color: var(--rd-accent-strong); font-weight: 700; }
.rd-suche__sug-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.rd-suche__sug-title {
flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rd-suche__sug-type {
font-size: 12px; color: var(--rd-text-tertiary, #767676); text-transform: capitalize;
}
.rd-suche__chips {
display: flex;
gap: 8px;
overflow-x: auto;
padding-top: 12px;
margin-left: -20px;
margin-right: -20px;
padding-left: 20px;
padding-right: 20px;
scrollbar-width: none;
}
.rd-suche__chips::-webkit-scrollbar { display: none; }
.rd-suche__chip {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px 14px;
border-radius: 9999px;
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-weight: 600;
font-size: 13px;
background: var(--rd-bg-soft, #fff);
color: var(--rd-text);
border: 1px solid var(--rd-border);
white-space: nowrap;
flex-shrink: 0;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rd-suche__chip.is-active {
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong);
border-color: var(--rd-accent-strong);
}
.rd-suche__chip-dot {
width: 8px; height: 8px; border-radius: 50%;
}
.rd-suche__main {
padding: 28px 20px 64px;
}
/* Discovery State */
.rd-suche__section { margin-bottom: 36px; }
.rd-suche__section-head {
font-family: var(--rd-font-display, Inter), system-ui, sans-serif;
font-size: 20px; font-weight: 700;
letter-spacing: -0.02em;
margin: 0 0 16px;
}
.rd-suche__pills {
display: flex; flex-wrap: wrap; gap: 8px;
}
.rd-suche__pill {
padding: 10px 16px;
border-radius: 9999px;
background: var(--rd-bg-soft, #fff);
border: 1px solid var(--rd-border);
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-weight: 500;
font-size: 14px;
color: var(--rd-text);
text-decoration: none;
transition: border-color 120ms ease, transform 120ms ease;
}
.rd-suche__pill:hover {
border-color: var(--rd-border-strong, #CDBFB3);
transform: translateY(-1px);
}
.rd-suche__kat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 12px;
}
.rd-suche__kat {
display: flex;
align-items: center;
gap: 10px;
padding: 16px;
background: var(--rd-bg-soft, #fff);
border: 1px solid var(--rd-border);
border-radius: 12px;
text-align: left;
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--rd-text);
text-decoration: none;
transition: border-color 150ms ease, transform 150ms ease;
}
.rd-suche__kat:hover {
border-color: var(--rd-border-strong, #CDBFB3);
transform: translateY(-2px);
}
.rd-suche__kat-dot {
width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
}
.rd-suche__tip {
background: var(--rd-bg-alt);
border-radius: 20px;
padding: 24px;
}
.rd-suche__tip-label {
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent-strong);
margin: 0 0 8px;
}
.rd-suche__tip-text {
font-family: var(--rd-font-display, Inter), system-ui, sans-serif;
font-size: 20px;
line-height: 1.3;
margin: 0;
text-wrap: balance;
}
/* Results */
.rd-suche__meta {
margin-bottom: 20px;
}
.rd-suche__meta-count {
margin: 0;
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-size: 14px;
color: var(--rd-text-secondary);
}
.rd-suche__meta-count strong { color: var(--rd-text); }
.rd-suche__reset {
color: var(--rd-accent-strong);
text-decoration: underline;
}
.rd-suche__results {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.rd-suche__card {
background: var(--rd-bg-soft, #fff);
border: 1px solid var(--rd-border);
border-radius: 12px;
padding: 12px;
transition: border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.rd-suche__card:hover {
border-color: var(--rd-border-strong, #CDBFB3);
transform: translateY(-2px);
box-shadow: 0 1px 2px rgba(20,19,17,0.04), 0 2px 6px rgba(20,19,17,0.04);
}
.rd-suche__card-link {
display: grid;
grid-template-columns: 96px 1fr;
gap: 12px;
text-decoration: none;
color: inherit;
}
.rd-suche__card-thumb {
width: 96px;
aspect-ratio: 1/1;
border-radius: 8px;
overflow: hidden;
background: var(--rd-bg-alt);
}
.rd-suche__card-thumb img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.rd-suche__card-thumb-ph {
width: 100%; height: 100%;
background: linear-gradient(135deg, var(--rd-tone, var(--rd-accent)) 0%, rgba(255,255,255,0.15) 100%);
}
.rd-suche__card-body {
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
}
.rd-suche__card-meta {
display: flex;
align-items: center;
gap: 6px;
min-width: 0;
white-space: nowrap;
overflow: hidden;
}
.rd-suche__card-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.rd-suche__card-meta-label {
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-text-secondary);
flex-shrink: 0;
}
.rd-suche__card-meta-sep { color: var(--rd-text-tertiary, #767676); font-size: 12px; flex-shrink: 0; }
.rd-suche__card-meta-right {
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-size: 12px;
color: var(--rd-text-tertiary, #767676);
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
}
.rd-suche__card-title {
font-family: var(--rd-font-display, Inter), system-ui, sans-serif;
font-weight: 700;
font-size: 17px;
line-height: 1.25;
margin: 0;
letter-spacing: -0.01em;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rd-suche__card-excerpt {
font-family: var(--rd-font-body, Inter), system-ui, sans-serif;
font-size: 13px;
color: var(--rd-text-secondary);
margin: 0;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rd-suche__card-chips {
display: flex;
gap: 6px;
margin-top: 4px;
flex-wrap: wrap;
}
.rd-suche__chip-info {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 8px;
border-radius: 9999px;
background: var(--rd-bg-alt);
color: var(--rd-text-secondary);
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-size: 11px;
font-weight: 600;
white-space: nowrap;
}
.rd-suche__chip-info--warn { background: #FBE7E4; color: var(--rd-danger, #C23B2E); }
.rd-suche__chip-info--success { background: #E2F1EA; color: var(--rd-success, #1F8A5B); }
.rd-suche__chip-info--accent { background: var(--rd-accent-soft, #F4E3D2); color: var(--rd-accent-strong); }
/* Pagination */
.rd-suche__pagination {
margin-top: 32px;
display: flex;
justify-content: center;
gap: 6px;
flex-wrap: wrap;
}
.rd-suche__pagination .page-numbers {
padding: 8px 14px;
border-radius: 9999px;
background: var(--rd-bg-soft, #fff);
border: 1px solid var(--rd-border);
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-weight: 600;
font-size: 14px;
color: var(--rd-text);
text-decoration: none;
}
.rd-suche__pagination .page-numbers.current {
background: var(--rd-accent-strong);
color: #fff;
border-color: var(--rd-accent-strong);
}
/* Zero-Results */
.rd-suche__zero {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 56px 20px;
gap: 12px;
max-width: 520px;
margin: 0 auto;
}
.rd-suche__zero-icon {
width: 72px; height: 72px;
border-radius: 50%;
background: var(--rd-accent-soft, #F4E3D2);
display: grid;
place-items: center;
color: var(--rd-accent-strong);
margin-bottom: 8px;
}
.rd-suche__zero-title {
font-family: var(--rd-font-display, Inter), system-ui, sans-serif;
font-size: 26px;
margin: 0;
letter-spacing: -0.02em;
text-wrap: balance;
}
.rd-suche__zero-text {
font-family: var(--rd-font-body, Inter), system-ui, sans-serif;
font-size: 15px;
color: var(--rd-text-secondary);
margin: 0;
text-wrap: pretty;
max-width: 440px;
}
.rd-suche__zero-tips {
width: 100%;
text-align: left;
background: var(--rd-bg-soft, #fff);
border: 1px solid var(--rd-border);
border-radius: 12px;
padding: 16px;
margin-top: 12px;
}
.rd-suche__zero-tips-head {
font-family: var(--rd-font-ui, Inter), system-ui, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-text-secondary);
margin: 0 0 10px;
}
.rd-suche__zero-tips ul {
margin: 0; padding: 0 0 0 20px;
list-style: disc;
font-family: var(--rd-font-body, Inter), system-ui, sans-serif;
font-size: 14px;
color: var(--rd-text);
line-height: 1.5;
}
.rd-suche__zero-tips li { margin-bottom: 8px; }
.rd-suche__zero-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: center;
margin-top: 12px;
}
/* ─────────────────────────────────────────────────────────────────────
* rd-auth — Login / Registrieren / Mein Konto / Verify
* ──────────────────────────────────────────────────────────────────── */
.rd-auth {
max-width: var(--rd-container, 1180px);
margin: 0 auto;
padding: 48px 20px 64px;
}
.rd-auth__container {
max-width: 560px;
margin: 0 auto;
background: var(--rd-bg-soft, #FFFFFF);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
padding: 32px 28px;
box-shadow: 0 4px 16px rgba(0,0,0,0.04);
}
.rd-auth__title {
margin: 0 0 8px;
font-size: 28px;
color: var(--rd-text, #1A1A1A);
}
.rd-auth__intro {
margin: 0 0 24px;
color: var(--rd-text-secondary, #595959);
}
.rd-auth__form { display: flex; flex-direction: column; gap: 14px; }
.rd-auth__label {
display: flex; flex-direction: column; gap: 6px;
font-size: 14px; font-weight: 500;
color: var(--rd-text, #1A1A1A);
}
.rd-auth__input {
padding: 10px 12px;
border: 1px solid var(--rd-border-neutral, #DCDCDE);
border-radius: 8px;
font-size: 15px;
font-family: inherit;
background: #fff;
}
.rd-auth__input:focus {
outline: 2px solid var(--rd-accent, #B56A34);
outline-offset: 1px;
border-color: var(--rd-accent, #B56A34);
}
.rd-auth__checkbox {
display: flex; align-items: flex-start; gap: 8px;
font-size: 14px; color: var(--rd-text, #1A1A1A);
}
.rd-auth__checkbox input { margin-top: 3px; }
.rd-auth__submit {
margin-top: 8px;
padding: 12px 20px;
background: var(--rd-accent, #B56A34);
color: #fff;
border: 0;
border-radius: 24px;
font-size: 16px; font-weight: 600;
cursor: pointer;
transition: background 0.15s, transform 0.15s;
}
.rd-auth__submit:hover { background: var(--rd-accent-strong, #944F22); transform: translateY(-1px); }
.rd-auth__alt {
margin-top: 16px;
font-size: 14px;
color: var(--rd-text-secondary, #595959);
text-align: center;
}
.rd-auth__alt a { color: var(--rd-accent, #B56A34); text-decoration: none; }
.rd-auth__alt a:hover { text-decoration: underline; }
.rd-auth__error, .rd-auth__success {
padding: 12px 14px;
border-radius: 8px;
margin-bottom: 16px;
font-size: 14px;
}
.rd-auth__error {
background: #FBE7E4;
color: var(--rd-danger, #C23B2E);
border: 1px solid #F1C6C0;
}
.rd-auth__error ul { margin: 0; padding-left: 18px; }
.rd-auth__error small {
display: inline-block;
margin-top: 6px;
font-size: 13px;
color: #7F1D1D;
font-weight: 400;
}
.rd-auth__error small a { color: inherit; text-decoration: underline; }
.rd-auth__error--lock {
background: #FEF3C7;
color: #92400E;
border-color: #FDE68A;
}
.rd-auth__error--lock small { color: #78350F; }
/* Migrations-Hinweis auf der Login-Seite (alte rundum.dog-User) */
.rd-auth__notice {
padding: 16px 18px;
margin: 0 0 24px;
border-radius: 10px;
border: 1px solid var(--rd-border, #e5ddd7);
background: var(--rd-accent-soft, #F4E3D2);
}
.rd-auth__notice--migration strong {
display: block;
color: var(--rd-accent-strong, #944F22);
font-size: 15px;
margin-bottom: 4px;
}
.rd-auth__notice--migration p {
margin: 0 0 12px;
font-size: 14px;
color: var(--rd-text, #1A1A1A);
line-height: 1.5;
}
.rd-auth__notice--migration .rd-btn {
font-size: 14px !important;
padding: 8px 16px !important;
}
.rd-auth__success {
background: #E2F1EA;
color: var(--rd-success, #1F8A5B);
border: 1px solid #B8DEC8;
}
/* Wertversprechen-Hero auf /registrieren/ (A4 Premortem, Welle 46 Tag 33).
* Single-CTA-Pivot: 3-Item-Feature-Strip mit nur live-verfügbaren Funktionen
* (Bewerten / Newsletter / Eintrag-Verwalten). Lieblings-Liste kommt mit
* Post-Live-A4-Backlog (Frontend 12h) – wenn live, Hero auf Lieblings-Anker
* pivotieren laut DEC-UX-03. */
.rd-auth__features {
display: grid;
grid-template-columns: 1fr;
gap: 8px;
margin: 0 0 28px;
padding: 16px 18px;
background: var(--rd-accent-soft, #F4E3D2);
border-radius: 12px;
border: 1px solid var(--rd-border, #e5ddd7);
}
.rd-auth__feature {
display: flex; align-items: flex-start; gap: 10px;
font-size: 14px;
color: var(--rd-text, #1A1A1A);
line-height: 1.45;
}
.rd-auth__feature-icon {
flex-shrink: 0;
width: 22px;
font-size: 16px;
text-align: center;
color: var(--rd-accent, #B56A34);
}
.rd-auth__roles-heading {
font-size: 16px;
font-weight: 600;
color: var(--rd-text, #1A1A1A);
margin: 0 0 10px;
}
/* Rollen-Karten auf /registrieren/ */
.rd-auth__role-cards {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin: 16px 0 24px;
}
.rd-auth__role-card {
display: flex; flex-direction: column; gap: 4px;
padding: 16px 18px;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
text-decoration: none;
background: #fff;
transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.rd-auth__role-card:hover {
transform: translateY(-2px);
border-color: var(--rd-accent, #B56A34);
box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.rd-auth__role-label {
font-size: 17px; font-weight: 600;
color: var(--rd-text, #1A1A1A);
}
.rd-auth__role-desc {
font-size: 14px;
color: var(--rd-text-secondary, #595959);
}
/* Dashboard (rd-dashboard) — Mein-Konto Profilbuilder Phase 2 */
.rd-dashboard {
background: var(--rd-bg-page, #FDF9F6);
min-height: 70vh;
padding: 32px 0 64px;
}
.rd-dashboard__container {
max-width: 960px;
margin: 0 auto;
padding: 0 20px;
}
.rd-dashboard__header { margin: 0 0 32px; }
.rd-dashboard__title {
font-size: 32px;
font-weight: 700;
margin: 0 0 8px;
color: var(--rd-text, #1A1A1A);
}
.rd-dashboard__meta {
margin: 0;
font-size: 14px;
color: var(--rd-text-secondary, #595959);
display: flex;
flex-wrap: wrap;
gap: 6px 14px;
align-items: center;
}
.rd-dashboard__roles {
display: inline-block;
padding: 3px 10px;
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
border-radius: 20px;
font-weight: 500;
font-size: 13px;
}
.rd-dashboard__org { font-weight: 500; color: var(--rd-text, #1A1A1A); }
.rd-dashboard__user { color: var(--rd-text-secondary, #595959); }
.rd-dashboard__section {
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
padding: 20px 24px;
margin: 0 0 20px;
}
.rd-dashboard__section-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
margin: 0 0 16px;
flex-wrap: wrap;
}
.rd-dashboard__section-title {
font-size: 20px;
font-weight: 600;
margin: 0;
color: var(--rd-text, #1A1A1A);
display: flex;
align-items: baseline;
gap: 10px;
}
.rd-dashboard__count {
font-size: 13px;
font-weight: 500;
color: var(--rd-text-secondary, #595959);
background: var(--rd-bg-page, #FDF9F6);
padding: 2px 10px;
border-radius: 20px;
}
.rd-dashboard__new {
font-size: 14px !important;
padding: 8px 14px !important;
}
.rd-dashboard__section-empty {
margin: 0;
padding: 16px;
background: var(--rd-bg-page, #FDF9F6);
border-radius: 8px;
color: var(--rd-text-secondary, #595959);
font-size: 14px;
}
.rd-dashboard__list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 8px;
}
.rd-dashboard__item {
display: flex;
justify-content: space-between;
align-items: center;
gap: 16px;
padding: 14px 16px;
background: var(--rd-bg-page, #FDF9F6);
border-radius: 8px;
transition: background .15s;
}
.rd-dashboard__item:hover { background: var(--rd-accent-soft, #F4E3D2); }
.rd-dashboard__item-main { flex: 1; min-width: 0; }
.rd-dashboard__item-title {
display: block;
font-size: 16px;
font-weight: 600;
color: var(--rd-text, #1A1A1A);
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rd-dashboard__item-title:hover { color: var(--rd-accent, #B56A34); }
.rd-dashboard__item-meta {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
margin-top: 6px;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
/* Public-Route-Badge + Copy-Link im Dashboard (haustier: /vermisst/, /im-gedenken/) */
.rd-dashboard__public-link {
text-decoration: none;
transition: transform 120ms ease, box-shadow 120ms ease;
}
.rd-dashboard__public-link:hover {
transform: translateY(-1px);
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
text-decoration: none;
}
.rd-dashboard__copy-link {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
background: transparent;
color: var(--rd-text-secondary, #595959);
border: 1px solid var(--rd-border, #e5ddd7);
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rd-dashboard__copy-link:hover {
background: var(--rd-bg-alt, #F4EDE4);
color: var(--rd-text, #1A1A1A);
}
.rd-dashboard__copy-link.is-copied {
background: #DCFCE7;
color: #166534;
border-color: #BBF7D0;
}
.rd-dashboard__copy-icon {
font-size: 13px;
line-height: 1;
}
.rd-dashboard__item-actions {
display: flex;
gap: 8px;
flex-shrink: 0;
}
.rd-dashboard__item-actions .rd-btn {
font-size: 13px !important;
padding: 6px 12px !important;
}
.rd-dashboard__empty {
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
padding: 24px;
text-align: center;
color: var(--rd-text-secondary, #595959);
}
.rd-dashboard__empty h2 {
margin: 0 0 8px;
font-size: 18px;
color: var(--rd-text, #1A1A1A);
}
.rd-dashboard__footer {
margin: 32px 0 0;
padding: 20px;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 24px;
flex-wrap: wrap;
}
.rd-dashboard__info {
margin: 0;
display: grid;
grid-template-columns: max-content 1fr;
gap: 6px 16px;
font-size: 13px;
}
.rd-dashboard__info dt { color: var(--rd-text-secondary, #595959); font-weight: 500; }
.rd-dashboard__info dd { margin: 0; color: var(--rd-text, #1A1A1A); }
.rd-dashboard__logout {
color: var(--rd-text-secondary, #595959);
text-decoration: underline;
font-size: 14px;
}
.rd-dashboard__logout:hover { color: var(--rd-accent, #B56A34); }
/* ═══════════════════════════════════════════════════════════════════════
Dashboard Sprint 3 Phase 1 — Card-Grid + Hunde-Liste + Print-Links
═══════════════════════════════════════════════════════════════════════ */
.rd-dashboard__container--narrow {
max-width: 720px;
}
.rd-dashboard__hero {
margin: 0 0 32px;
padding: 28px 0 24px;
border-bottom: 1px solid var(--rd-border, #e5ddd7);
}
.rd-dashboard__kicker {
margin: 0 0 10px;
font-family: var(--rd-font-ui, Inter, sans-serif);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-accent, #B56A34);
}
.rd-dashboard__hero .rd-dashboard__title {
font-size: clamp(28px, 4vw, 40px);
letter-spacing: -0.03em;
line-height: 1.1;
margin: 0 0 10px;
}
.rd-dashboard__lead {
margin: 0 0 14px;
font-size: 15px;
color: var(--rd-text-secondary, #595959);
max-width: 640px;
line-height: 1.55;
}
.rd-dashboard__lead a {
color: var(--rd-accent, #B56A34);
text-decoration: underline;
}
.rd-dashboard__user-meta {
display: flex;
flex-wrap: wrap;
gap: 8px 20px;
margin: 0;
font-size: 13px;
}
.rd-dashboard__user-meta > div { display: flex; gap: 6px; }
.rd-dashboard__user-meta dt { color: var(--rd-text-secondary, #595959); font-weight: 500; }
.rd-dashboard__user-meta dd { margin: 0; color: var(--rd-text, #1A1A1A); }
/* Quick-Access-Cards */
.rd-dashboard__quick {
margin: 0 0 40px;
}
.rd-dashboard__section-title--compact {
font-size: 14px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--rd-text-secondary, #595959);
margin: 0 0 14px;
font-weight: 700;
}
.rd-dashboard__quick-grid {
display: grid;
gap: 14px;
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.rd-dashboard__quick-card {
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
padding: 18px 18px 16px;
display: flex;
flex-direction: column;
gap: 8px;
transition: transform 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.rd-dashboard__quick-card:hover {
transform: translateY(-2px);
border-color: var(--rd-accent, #B56A34);
box-shadow: 0 6px 20px rgba(0,0,0,0.06);
}
.rd-dashboard__quick-card--primary {
border-color: var(--rd-accent, #B56A34);
box-shadow: 0 0 0 1px var(--rd-accent, #B56A34);
}
.rd-dashboard__quick-card--muted {
background: var(--rd-bg-page, #FDF9F6);
}
.rd-dashboard__quick-card__title {
margin: 0;
font-size: 16px;
font-weight: 700;
color: var(--rd-text, #1A1A1A);
line-height: 1.25;
letter-spacing: -0.01em;
}
.rd-dashboard__quick-card__body {
margin: 0;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
line-height: 1.5;
flex: 1;
}
.rd-dashboard__quick-card__actions {
display: flex;
gap: 14px;
flex-wrap: wrap;
margin-top: 4px;
}
.rd-dashboard__quick-card__cta {
font-size: 13px;
font-weight: 700;
color: var(--rd-accent, #B56A34);
text-decoration: none;
}
.rd-dashboard__quick-card__cta:hover {
color: var(--rd-accent-strong, #944F22);
text-decoration: underline;
}
.rd-dashboard__quick-card__cta--secondary {
color: var(--rd-text-secondary, #595959);
}
/* Hunde-Section */
.rd-dashboard__hunde { margin: 0 0 40px; scroll-margin-top: 80px; }
.rd-dashboard__hunde-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 16px;
flex-wrap: wrap;
margin: 0 0 18px;
}
.rd-dashboard__hunde-header .rd-dashboard__section-title {
font-size: 24px;
margin: 0 0 4px;
font-weight: 700;
letter-spacing: -0.02em;
}
.rd-dashboard__hunde-lead {
margin: 0;
font-size: 14px;
color: var(--rd-text-secondary, #595959);
max-width: 560px;
line-height: 1.5;
}
/* Tabs — full-page-reload mit GET-Param (kein JS) */
.rd-dashboard__tabs {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 0 0 20px;
}
.rd-dashboard__tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 14px;
border-radius: 999px;
background: #fff;
color: var(--rd-text-secondary, #595959);
border: 1px solid var(--rd-border-strong, #DCDCDE);
font-family: var(--rd-font-ui, Inter, sans-serif);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rd-dashboard__tab:hover {
border-color: var(--rd-accent, #B56A34);
color: var(--rd-text, #1A1A1A);
}
.rd-dashboard__tab--active {
background: var(--rd-text, #1A1A1A);
color: #fff;
border-color: var(--rd-text, #1A1A1A);
}
.rd-dashboard__tab-count {
padding: 0 7px;
border-radius: 999px;
background: var(--rd-bg-alt, #F4EDE4);
color: var(--rd-text-secondary, #595959);
font-size: 11px;
font-weight: 700;
min-width: 18px;
text-align: center;
}
.rd-dashboard__tab--active .rd-dashboard__tab-count {
background: rgba(255,255,255,0.18);
color: #fff;
}
/* Empty-State */
.rd-dashboard__hunde-empty {
background: #fff;
border: 1px dashed var(--rd-border-strong, #DCDCDE);
border-radius: 14px;
padding: 44px 20px;
text-align: center;
color: var(--rd-text-secondary, #595959);
font-size: 14px;
line-height: 1.55;
max-width: 520px;
margin: 0 auto;
}
/* Hund-Card */
.rd-dashboard__hund-grid {
display: grid;
gap: 18px;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.rd-dashboard__hund-card {
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 14px;
padding: 18px;
display: grid;
grid-template-columns: 80px 1fr;
gap: 16px;
transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}
.rd-dashboard__hund-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.06);
}
.rd-dashboard__hund-card--status-vermisst { border-color: #E8B88A; }
.rd-dashboard__hund-card--status-vermisst:hover { border-color: #D89A60; }
.rd-dashboard__hund-card--status-verstorben { background: var(--rd-bg-page, #FDF9F6); }
.rd-dashboard__hund-card--status-verstorben .rd-dashboard__hund-card__thumb { filter: grayscale(0.6); }
.rd-dashboard__hund-card__media { width: 80px; flex-shrink: 0; }
.rd-dashboard__hund-card__thumb {
width: 80px;
height: 80px;
border-radius: 50%;
object-fit: cover;
display: block;
background: var(--rd-bg-alt, #F4EDE4);
}
.rd-dashboard__hund-card__thumb--placeholder {
display: grid;
place-items: center;
color: var(--rd-text-secondary, #595959);
border: 1px solid var(--rd-border, #e5ddd7);
}
.rd-dashboard__hund-card__body {
display: flex;
flex-direction: column;
gap: 10px;
min-width: 0;
}
.rd-dashboard__hund-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 10px;
flex-wrap: wrap;
}
.rd-dashboard__hund-card__title {
margin: 0;
font-size: 18px;
font-weight: 800;
letter-spacing: -0.02em;
line-height: 1.2;
}
.rd-dashboard__hund-card__title a {
color: var(--rd-text, #1A1A1A);
text-decoration: none;
}
.rd-dashboard__hund-card__title a:hover { color: var(--rd-accent, #B56A34); }
.rd-dashboard__hund-card__status {
padding: 3px 10px;
border-radius: 999px;
font-family: var(--rd-font-ui, Inter, sans-serif);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
}
.rd-dashboard__hund-card__status--aktiv { background: #D8E6D0; color: #2E5A33; }
.rd-dashboard__hund-card__status--vermisst { background: #F0D4B8; color: #8A3E1A; }
.rd-dashboard__hund-card__status--verstorben { background: #D8D0C6; color: #5C4A38; }
.rd-dashboard__hund-card__status--vermittelt { background: #CFDCE6; color: #3A5A7A; }
.rd-dashboard__hund-card__status--default { background: var(--rd-bg-alt, #F4EDE4); color: var(--rd-text-secondary, #595959); }
.rd-dashboard__hund-card__meta {
margin: 0;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
.rd-dashboard__hund-card__badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.rd-dashboard__hund-card__privat {
margin: 0;
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
.rd-dashboard__hund-card__privat-hint { font-style: italic; }
/* Print-Link-Chips pro Hund-Card */
.rd-dashboard__print-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 2px;
}
.rd-dashboard__print-link {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
border-radius: 999px;
background: var(--rd-bg-alt, #F4EDE4);
border: 1px solid var(--rd-border, #e5ddd7);
color: var(--rd-text, #1A1A1A);
font-family: var(--rd-font-ui, Inter, sans-serif);
font-size: 12px;
font-weight: 600;
text-decoration: none;
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
}
.rd-dashboard__print-link:hover {
background: var(--rd-accent-soft, #F4E3D2);
border-color: var(--rd-accent, #B56A34);
color: var(--rd-accent-strong, #944F22);
transform: translateY(-1px);
}
.rd-dashboard__print-link--alert {
background: #FDECEC;
border-color: #F4CFCF;
color: #8A3E1A;
}
.rd-dashboard__print-link--alert:hover {
background: #F9D8D8;
border-color: #E8B8B8;
color: #8A3E1A;
}
.rd-dashboard__print-icon { font-size: 13px; line-height: 1; }
.rd-dashboard__hund-card__actions {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: auto;
}
.rd-dashboard__hund-card__actions .rd-btn {
font-size: 12px !important;
padding: 6px 12px !important;
}
/* Mobile: Hund-Card stackt Thumb oben, Body unten */
@media (max-width: 560px) {
.rd-dashboard__hund-card {
grid-template-columns: 1fr;
}
.rd-dashboard__hund-card__media { width: 72px; }
.rd-dashboard__hund-card__thumb { width: 72px; height: 72px; }
.rd-dashboard__hund-grid {
grid-template-columns: 1fr;
}
.rd-dashboard__quick-grid {
grid-template-columns: 1fr;
}
}
/* Notfallkaskade-Form (wiederverwendet rd-form-Pattern) */
.rd-notfallkaskade__group {
background: var(--rd-bg-page, #FDF9F6);
border: 1px solid var(--rd-border, #e5ddd7) !important;
border-radius: 10px !important;
padding: 16px 18px 18px !important;
margin: 0 0 18px !important;
}
.rd-notfallkaskade__group .rd-form__legend {
font-size: 15px;
}
.rd-notfallkaskade__group .rd-form__grid {
grid-template-columns: 1fr 1fr;
}
.rd-notfallkaskade .rd-form__field--beziehung {
grid-column: 1 / -1;
}
.rd-notfallkaskade__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin: 8px 0 14px;
}
.rd-notfallkaskade__hint {
font-size: 12px;
color: var(--rd-text-secondary, #595959);
line-height: 1.5;
margin: 0;
}
@media (max-width: 560px) {
.rd-notfallkaskade__group .rd-form__grid {
grid-template-columns: 1fr;
}
}
/* ===== Termine (Sprint 5) =========================================
/mein-konto/termine/ — Listen + Filter + Inline-Form.
Reuse der Dashboard-Tabs und rd-form-Grids.
================================================================== */
.rd-termine__hero {
display: flex;
gap: 18px;
justify-content: space-between;
align-items: flex-start;
flex-wrap: wrap;
}
.rd-termine__hero-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.rd-termine__tabs { margin-top: 12px; }
.rd-dashboard__hund-card__termin {
margin: 0;
display: flex;
gap: 6px;
flex-wrap: wrap;
align-items: baseline;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
.rd-dashboard__hund-card__termin-label {
font-weight: 600;
}
.rd-dashboard__hund-card__termin-link {
color: var(--rd-accent, #B56A34);
text-decoration: none;
}
.rd-dashboard__hund-card__termin-link:hover { text-decoration: underline; }
.rd-dashboard__hund-card__termin-rel {
color: var(--rd-text-tertiary, #767676);
font-size: 12px;
}
/* Aktualitäten-Section (ungelesene Dashboard-Ereignisse) */
.rd-dashboard__aktualitaeten {
margin-block: 0 24px;
}
.rd-dashboard__aktualitaeten-list {
display: grid;
gap: 8px;
margin-top: 12px;
}
.rd-dashboard__aktualitaet {
display: grid;
grid-template-columns: auto 1fr auto;
gap: 14px;
align-items: center;
padding: 12px 16px;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-left: 4px solid var(--rd-accent, #B56A34);
border-radius: 10px;
}
.rd-dashboard__aktualitaet-badge {
display: inline-block;
padding: 4px 10px;
background: var(--rd-bg-page, #FDF9F6);
color: var(--rd-text, #1A1A1A);
border-radius: 999px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
white-space: nowrap;
}
.rd-dashboard__aktualitaet-body {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.rd-dashboard__aktualitaet-titel {
margin: 0;
font-size: 14px;
font-weight: 700;
color: var(--rd-text, #1A1A1A);
line-height: 1.3;
}
.rd-dashboard__aktualitaet-nachricht {
margin: 0;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
line-height: 1.4;
}
.rd-dashboard__aktualitaet-actions {
display: flex;
gap: 8px;
align-items: center;
}
.rd-dashboard__aktualitaet-link {
font-size: 13px;
color: var(--rd-accent-strong, #944F22);
text-decoration: none;
font-weight: 600;
}
.rd-dashboard__aktualitaet-link:hover { text-decoration: underline; }
.rd-dashboard__aktualitaet-mark {
background: none;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 6px;
padding: 4px 10px;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
cursor: pointer;
}
.rd-dashboard__aktualitaet-mark:hover {
border-color: var(--rd-accent, #B56A34);
color: var(--rd-text, #1A1A1A);
}
.rd-dashboard__aktualitaeten-empty {
margin: 0;
padding: 14px 16px;
background: var(--rd-bg-page, #FDF9F6);
border: 1px dashed var(--rd-border, #e5ddd7);
border-radius: 10px;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
@media (max-width: 600px) {
.rd-dashboard__aktualitaet {
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
}
.rd-dashboard__aktualitaet-actions {
grid-column: 1 / -1;
justify-content: flex-end;
}
}
.rd-termine__filters {
display: grid;
grid-template-columns: repeat(3, minmax(180px, 1fr));
gap: 12px 16px;
align-items: end;
margin: 14px 0 20px;
padding: 14px 16px;
background: var(--rd-bg-page, #FDF9F6);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 10px;
}
.rd-termine__filter-field {
display: flex;
flex-direction: column;
gap: 4px;
}
.rd-termine__filter-field label {
font-size: 12px;
font-weight: 600;
color: var(--rd-text-secondary, #595959);
}
.rd-termine__filter-field select {
padding: 7px 10px;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 8px;
background: #fff;
font-size: 14px;
}
.rd-termine__filter-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.rd-termine__filter-reset {
font-size: 12px;
color: var(--rd-text-secondary, #595959);
text-decoration: underline;
}
/* Inline-Form */
.rd-termine__form {
margin: 14px 0 28px;
padding: 22px 24px;
background: var(--rd-bg-page, #FDF9F6);
border: 2px solid var(--rd-accent, #B56A34);
border-radius: 12px;
}
.rd-termine__form-title {
font-size: 18px;
font-weight: 600;
color: var(--rd-text, #1A1A1A);
margin: 0 0 16px;
}
.rd-termine__form .rd-form {
background: transparent;
border: none;
padding: 0;
}
.rd-termine__form-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 14px;
}
/* Listen-Ansicht */
.rd-termine__list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 10px 0 28px;
}
.rd-termine__row {
display: grid;
grid-template-columns: 140px 1fr auto;
gap: 16px;
align-items: center;
padding: 14px 16px;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 10px;
transition: border-color 120ms ease, background 120ms ease;
}
.rd-termine__row:hover {
border-color: var(--rd-accent, #B56A34);
background: var(--rd-bg-alt, #F4EDE4);
}
.rd-termine__row--erledigt {
opacity: 0.65;
}
.rd-termine__row--erledigt .rd-termine__row-datum { text-decoration: line-through; }
.rd-termine__row-date {
display: flex;
flex-direction: column;
gap: 2px;
}
.rd-termine__row-datum {
font-size: 15px;
font-weight: 600;
color: var(--rd-text, #1A1A1A);
}
.rd-termine__row-relativ {
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
.rd-termine__row-body {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.rd-termine__row-title {
font-size: 15px;
font-weight: 600;
margin: 0;
color: var(--rd-text, #1A1A1A);
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
.rd-termine__row-typ {
display: inline-flex;
align-items: center;
padding: 3px 10px;
border-radius: 999px;
background: var(--rd-bg-alt, #F4EDE4);
border: 1px solid var(--rd-border, #e5ddd7);
font-size: 12px;
font-weight: 500;
color: var(--rd-accent-strong, #944F22);
}
.rd-termine__row-typ--impfung,
.rd-termine__row-typ--jahrescheck,
.rd-termine__row-typ--tierarzt_kontrolle,
.rd-termine__row-typ--zahn_kontrolle {
background: #FDECEC;
border-color: #F4CFCF;
color: #8A3E1A;
}
.rd-termine__row-typ--hundeschule,
.rd-termine__row-typ--hundesport_event {
background: #EAF4E8;
border-color: #C8DFC0;
color: #3E6B2F;
}
.rd-termine__row-notiz {
font-size: 13px;
margin: 0;
color: var(--rd-text, #1A1A1A);
}
.rd-termine__row-dok { margin: 0; font-size: 12px; }
.rd-termine__row-dok a {
color: var(--rd-accent, #B56A34);
text-decoration: none;
}
.rd-termine__row-actions {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}
.rd-termine__inline-form { margin: 0; }
.rd-termine__toggle,
.rd-termine__edit,
.rd-termine__delete {
display: inline-flex;
align-items: center;
padding: 6px 12px;
border-radius: 8px;
border: 1px solid var(--rd-border, #e5ddd7);
background: #fff;
font-size: 12px;
font-weight: 500;
text-decoration: none;
color: var(--rd-text, #1A1A1A);
cursor: pointer;
font-family: var(--rd-font-ui, Inter, sans-serif);
transition: background 120ms ease, border-color 120ms ease;
}
.rd-termine__toggle:hover,
.rd-termine__edit:hover,
.rd-termine__delete:hover {
border-color: var(--rd-accent, #B56A34);
background: var(--rd-bg-alt, #F4EDE4);
}
.rd-termine__toggle--erledigt {
background: #EAF4E8;
border-color: #C8DFC0;
color: #3E6B2F;
}
.rd-termine__delete {
color: #8A3E1A;
}
.rd-termine__delete:hover {
background: #FDECEC;
border-color: #F4CFCF;
color: #8A3E1A;
}
/* Empty-State */
.rd-termine__empty,
.rd-termine__empty-hunde {
margin: 16px 0 24px;
padding: 22px 24px;
background: var(--rd-bg-page, #FDF9F6);
border: 1px dashed var(--rd-border, #e5ddd7);
border-radius: 12px;
color: var(--rd-text, #1A1A1A);
}
.rd-termine__empty-hunde h2 { margin: 0 0 6px; font-size: 17px; }
.rd-termine__empty p { margin: 10px 0 0; }
/* iCal-Hinweis */
.rd-termine__ical-hint {
margin: 24px 0 12px;
padding: 18px 20px;
background: var(--rd-bg-alt, #F4EDE4);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
}
.rd-termine__ical-title {
margin: 0 0 6px;
font-size: 16px;
font-weight: 600;
color: var(--rd-text, #1A1A1A);
}
.rd-termine__ical-hint p {
font-size: 14px;
color: var(--rd-text, #1A1A1A);
margin: 0 0 8px;
}
/* Mobile — Cards statt Rows */
@media (max-width: 640px) {
.rd-termine__row {
grid-template-columns: 1fr;
gap: 10px;
}
.rd-termine__row-date {
flex-direction: row;
align-items: baseline;
gap: 8px;
}
.rd-termine__filters {
grid-template-columns: 1fr;
}
.rd-termine__form {
padding: 16px 14px;
}
.rd-termine__hero {
flex-direction: column;
}
}
/* ===== Benachrichtigungen + Kalender-Abo (Sprint 5) =============== */
.rd-benachrichtigungen {
display: flex;
flex-direction: column;
gap: 22px;
}
.rd-benachrichtigungen__section {
padding: 22px 24px;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
}
.rd-benachrichtigungen__section-title {
margin: 0 0 6px;
font-size: 18px;
font-weight: 600;
color: var(--rd-text, #1A1A1A);
}
.rd-benachrichtigungen__lead {
margin: 0 0 14px;
font-size: 14px;
color: var(--rd-text-secondary, #595959);
}
.rd-benachrichtigungen__switches {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 18px;
}
.rd-benachrichtigungen__switch {
display: flex;
gap: 12px;
align-items: flex-start;
padding: 10px 12px;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 8px;
background: var(--rd-bg-page, #FDF9F6);
cursor: pointer;
}
.rd-benachrichtigungen__switch input {
margin: 2px 0 0;
}
.rd-benachrichtigungen__switch-label {
display: flex;
flex-direction: column;
gap: 2px;
font-size: 14px;
color: var(--rd-text, #1A1A1A);
}
.rd-benachrichtigungen__switch-hint {
font-size: 12px;
color: var(--rd-text-secondary, #595959);
}
.rd-benachrichtigungen__ical-url {
display: flex;
gap: 8px;
align-items: center;
padding: 10px 12px;
background: var(--rd-bg-page, #FDF9F6);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 8px;
font-family: var(--rd-font-mono, 'IBM Plex Mono', monospace);
font-size: 12px;
word-break: break-all;
}
.rd-benachrichtigungen__actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
/* Edit-Form (rd-form) — Profilbuilder Phase 2 Edit/Create */
.rd-edit__back {
margin: 0 0 16px;
font-size: 14px;
}
.rd-edit__back a {
color: var(--rd-text-secondary, #595959);
text-decoration: none;
}
.rd-edit__back a:hover { color: var(--rd-accent, #B56A34); }
.rd-edit__status {
margin: 0 0 20px;
font-size: 14px;
color: var(--rd-text-secondary, #595959);
}
.rd-edit__status a { color: var(--rd-accent, #B56A34); text-decoration: none; }
.rd-edit__status a:hover { text-decoration: underline; }
.rd-form {
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
padding: 24px;
}
.rd-form__group {
border: none;
margin: 0 0 28px;
padding: 0;
}
/* Conditional-Visibility: Fieldset-Gruppen abhängig von einem Controller-Feld
(z.B. haustier_status). !important defensiv gegen Plugin-CSS (Elementor/FlyingPress). */
.rd-form__group.rd-form__group--inactive,
fieldset.rd-form__group--inactive {
display: none !important;
}
.rd-form__legend {
font-size: 16px;
font-weight: 600;
color: var(--rd-accent-strong, #944F22);
padding: 0 0 10px;
margin-bottom: 16px;
border-bottom: 1px solid var(--rd-border, #e5ddd7);
width: 100%;
}
.rd-form__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px 20px;
}
.rd-form__field {
display: flex;
flex-direction: column;
gap: 6px;
}
.rd-form__field--post_title,
.rd-form__field--post_content,
.rd-form__field--textarea,
.rd-form__field--featured_image,
.rd-form__field--taxonomy,
.rd-form__field--checkbox_pipe,
.rd-form__field--gallery,
.rd-form__field--post_relation,
.rd-form__field--repeater {
grid-column: 1 / -1;
}
/* Repeater */
.rd-form__repeater {
background: var(--rd-bg-page, #FDF9F6);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 8px;
padding: 12px;
}
.rd-form__repeater-rows { display: flex; flex-direction: column; gap: 12px; margin-bottom: 12px; }
.rd-form__repeater-row {
position: relative;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 10px;
padding: 12px 14px;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 8px;
}
.rd-form__repeater-field {
display: flex; flex-direction: column; gap: 4px;
font-size: 13px; color: var(--rd-text-secondary, #595959);
}
.rd-form__repeater-field input,
.rd-form__repeater-field textarea {
padding: 8px 10px;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 6px;
font-size: 14px;
font-family: inherit;
color: var(--rd-text, #1A1A1A);
background: #fff;
}
.rd-form__repeater-field input:focus,
.rd-form__repeater-field textarea:focus {
outline: none; border-color: var(--rd-accent, #B56A34);
box-shadow: 0 0 0 2px rgba(181, 106, 52, 0.15);
}
.rd-form__repeater-field textarea { min-height: 50px; resize: vertical; }
.rd-form__repeater-remove {
position: absolute;
top: 8px; right: 8px;
background: #fff;
color: var(--rd-danger, #C23B2E);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 50%;
width: 26px; height: 26px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
line-height: 1;
}
.rd-form__repeater-remove:hover { background: #FEE2E2; border-color: #FCA5A5; }
.rd-form__repeater-add {
font-size: 14px !important;
padding: 8px 14px !important;
}
.rd-form__select--relation[multiple] {
min-height: 140px;
padding: 6px;
}
/* ---- Welle-47 (2026-05-23): rd-vermittlung-hero ----
Vermittlungs-Single-Hero analog rd-beitrag__hero und rd-breed-hero.
Beige-BG + Border-Bottom + 2-Spalten-Grid (Text links, Foto rechts).
Vorher rd-cpt-hero mit Full-Bleed-Background-Image überlud das Layout.
Roger 2026-05-23: „Hero wie bei den Beiträgen. Bild rechts Titel links". */
.rd-vermittlung-hero {
background: var(--rd-bg-alt);
border-bottom: 1px solid var(--rd-border);
padding: var(--rd-space-6) 0;
}
.rd-vermittlung-hero__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--rd-space-5);
align-items: center;
}
@media (min-width: 880px) {
.rd-vermittlung-hero__inner {
grid-template-columns: 1.2fr 1fr;
gap: var(--rd-space-6);
}
}
.rd-vermittlung-hero__eyebrow {
display: inline-block;
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 12px;
font-weight: 700;
color: var(--rd-accent-strong);
margin: 0 0 12px;
}
.rd-vermittlung-hero__title {
font-family: var(--rd-font-display);
font-weight: 700;
font-size: clamp(28px, 4vw, 44px);
line-height: 1.12;
letter-spacing: -0.02em;
margin: 0 0 12px;
color: var(--rd-text);
}
.rd-vermittlung-hero__tagline {
font-size: 18px;
line-height: 1.5;
color: var(--rd-text);
margin: 0 0 12px;
}
.rd-vermittlung-hero__meta {
font-size: 14px;
color: var(--rd-text-secondary);
margin: 0;
}
.rd-vermittlung-hero__meta a {
color: var(--rd-accent-strong);
text-decoration: none;
font-weight: 600;
}
.rd-vermittlung-hero__meta a:hover {
text-decoration: underline;
}
.rd-vermittlung-hero__media {
aspect-ratio: 4/3;
border-radius: var(--rd-r-md);
overflow: hidden;
background: var(--rd-accent-soft);
}
.rd-vermittlung-hero__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* CPT-Single-Hero (rd-unterkunft-hero + rd-zuechter-hero — Full-Bleed mit
dynamischem BG-Image). Welle-47-P2-Cleanup 2026-05-25: Inline-Gradient aus
PHP raus, Gradient jetzt via ::before-Pseudo-Element themable. Inline-Style
reduziert auf reines `background-image: url(...)` (unvermeidbar dynamisch).
Sub-Klassen .rd-cpt-hero__inner|eyebrow|title|tagline|meta bleiben als
shared Utility (siehe unten). */
.rd-unterkunft-hero,
.rd-zuechter-hero {
position: relative;
min-height: 360px;
background-size: cover;
background-position: center;
background-color: var(--rd-accent-soft, #F4E3D2);
display: flex;
align-items: flex-end;
color: #fff;
padding: 32px 20px;
}
.rd-unterkunft-hero::before,
.rd-zuechter-hero::before {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
pointer-events: none;
z-index: 1;
}
.rd-unterkunft-hero > *,
.rd-zuechter-hero > * {
position: relative;
z-index: 2;
}
.rd-cpt-hero__inner { max-width: 1180px; margin: 0 auto; width: 100%; }
.rd-cpt-hero__eyebrow {
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 12px;
font-weight: 600;
opacity: 0.9;
}
.rd-cpt-hero__title {
margin: 0 0 8px;
font-size: 40px;
font-weight: 800;
line-height: 1.15;
text-shadow: 0 1px 8px rgba(0,0,0,0.4);
}
.rd-cpt-hero__tagline {
margin: 0 0 8px;
font-size: 18px;
opacity: 0.95;
}
.rd-cpt-hero__meta {
margin: 0;
font-size: 14px;
opacity: 0.9;
}
/* Welle-47-P2-Cleanup 2026-05-25: .rd-cpt-container entfernt — die 3 CPT-
Templates (single-unterkunft.php, single-zuechter.php, single-vermittlung.php)
nutzen jetzt .rd-container + .rd-container--cpt-body. Vorteile:
einheitliche max-width 1240px (statt 1180px), Token-driven Padding.
Unterschied zu .rd-container: Top-Padding 32px für Abstand zwischen Hero
und Facts-Strip (war als `padding: 32px 20px 0` im Legacy-Block). */
.rd-container--cpt-body {
padding-top: var(--rd-space-6);
}
.rd-cpt-facts {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
padding: 18px;
margin: 0 0 24px;
}
.rd-cpt-facts__item { display: flex; flex-direction: column; gap: 4px; }
.rd-cpt-facts__label {
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
color: var(--rd-text-secondary, #595959);
font-weight: 500;
}
.rd-cpt-facts__value {
font-size: 16px;
font-weight: 600;
color: var(--rd-text, #1A1A1A);
}
.rd-cpt-banner {
margin: 0 0 24px;
padding: 14px 20px;
border-radius: 10px;
font-size: 15px;
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
border: 1px solid #e8c8a8;
}
.rd-cpt-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: 32px;
align-items: start;
}
.rd-cpt-main { min-width: 0; }
.rd-cpt-section { margin: 0 0 32px; }
.rd-cpt-h2 {
font-size: 24px;
font-weight: 700;
color: var(--rd-text, #1A1A1A);
margin: 0 0 12px;
padding-bottom: 8px;
border-bottom: 2px solid var(--rd-accent, #B56A34);
display: inline-block;
}
.rd-cpt-prose { font-size: 16px; line-height: 1.7; color: var(--rd-text, #1A1A1A); }
.rd-cpt-prose p { margin: 0 0 12px; }
.rd-cpt-prose h3 { font-size: 18px; margin: 20px 0 8px; color: var(--rd-text, #1A1A1A); }
.rd-cpt-prose ul, .rd-cpt-prose ol { margin: 0 0 12px 20px; }
.rd-cpt-prose blockquote {
border-left: 3px solid var(--rd-accent, #B56A34);
margin: 16px 0;
padding: 4px 16px;
color: var(--rd-text-secondary, #595959);
font-style: italic;
}
.rd-cpt-gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
gap: 10px;
}
.rd-cpt-gallery__item {
aspect-ratio: 4/3;
overflow: hidden;
border-radius: 8px;
display: block;
}
.rd-cpt-gallery__item img {
width: 100%; height: 100%;
object-fit: cover;
transition: transform .3s;
}
.rd-cpt-gallery__item:hover img { transform: scale(1.05); }
.rd-cpt-rassen-list {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.rd-cpt-rassen-list li a {
display: inline-block;
padding: 6px 14px;
background: var(--rd-bg-page, #FDF9F6);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 20px;
text-decoration: none;
color: var(--rd-text, #1A1A1A);
font-size: 14px;
}
.rd-cpt-rassen-list li a:hover {
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
}
.rd-cpt-cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.rd-cpt-card {
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
padding: 18px;
}
.rd-cpt-card__title {
margin: 0 0 10px;
font-size: 16px;
font-weight: 600;
color: var(--rd-accent-strong, #944F22);
}
.rd-cpt-card__meta {
margin: 0 0 8px;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
.rd-cpt-card p { font-size: 14px; line-height: 1.5; margin: 0 0 6px; color: var(--rd-text, #1A1A1A); }
.rd-cpt-card__address { font-style: normal; line-height: 1.5; font-size: 14px; }
.rd-cpt-card__list { list-style: none; margin: 0; padding: 0; font-size: 14px; }
.rd-cpt-card__list li { padding: 4px 0; }
.rd-cpt-card__list a { color: var(--rd-accent, #B56A34); text-decoration: none; }
.rd-cpt-card__list a:hover { text-decoration: underline; }
.rd-cpt-card__maps-link {
display: inline-block;
margin-top: 8px;
font-size: 13px;
color: var(--rd-accent, #B56A34);
text-decoration: none;
}
.rd-cpt-card__maps-link:hover { text-decoration: underline; }
.rd-cpt-card--booking { background: var(--rd-accent-soft, #F4E3D2); border-color: #e8c8a8; }
.rd-cpt-card--interest {
background: var(--rd-accent-soft, #F4E3D2);
border-color: #e8c8a8;
}
.rd-cpt-card--interest .rd-cpt-card__title { color: var(--rd-accent-strong, #944F22); }
.rd-cpt-card--done {
background: #DCFCE7;
border-color: #BBF7D0;
}
.rd-cpt-card--done .rd-cpt-card__title { color: #166534; }
.rd-cpt-card--done .rd-cpt-card__meta { color: #166534; font-weight: 600; }
.rd-cpt-banner--vermittelt {
background: #DCFCE7;
border-color: #BBF7D0;
color: #166534;
}
.rd-cpt-banner--vermittelt strong { display: block; margin-bottom: 4px; font-size: 16px; }
.rd-single-vermittlung.is-vermittelt .rd-cpt-hero__title { opacity: 0.95; }
.rd-cpt-card__price { margin: 0 0 12px; font-size: 14px; }
.rd-cpt-card__price strong { font-size: 22px; color: var(--rd-accent-strong, #944F22); display: inline-block; margin-left: 4px; }
.rd-cpt-card__times {
margin: 0 0 12px;
display: grid;
grid-template-columns: max-content 1fr;
gap: 4px 12px;
font-size: 13px;
}
.rd-cpt-card__times dt { color: var(--rd-text-secondary, #595959); }
.rd-cpt-card__times dd { margin: 0; color: var(--rd-text, #1A1A1A); font-weight: 500; }
.rd-cpt-card__cta {
display: flex;
width: 100%;
box-sizing: border-box;
justify-content: center;
}
.rd-cpt-wuerfe { list-style: none; margin: 0; padding: 0; }
.rd-cpt-wuerfe li {
padding: 12px 0;
border-bottom: 1px solid var(--rd-border, #e5ddd7);
font-size: 14px;
}
.rd-cpt-wuerfe li:last-child { border-bottom: none; }
.rd-cpt-wuerfe__notes {
display: block;
margin-top: 4px;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
@media (max-width: 900px) {
.rd-cpt-grid { grid-template-columns: 1fr; }
.rd-cpt-hero__title { font-size: 30px; }
.rd-unterkunft-hero,
.rd-zuechter-hero { min-height: 260px; }
}
/* Drawer-Pill Count-Badge */
.rd-archive__pill-count {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
font-size: 11px;
font-weight: 500;
background: rgba(0,0,0,0.06);
color: var(--rd-text-secondary, #595959);
border-radius: 10px;
vertical-align: baseline;
}
.rd-archive__pill.is-active .rd-archive__pill-count {
background: rgba(255,255,255,0.25);
color: #fff;
}
/* Leaflet.markercluster im rundum-Brand */
.marker-cluster-small,
.marker-cluster-medium,
.marker-cluster-large {
background: rgba(181, 106, 52, 0.4) !important;
}
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
background: rgba(168, 110, 66, 0.85) !important;
color: #fff !important;
font-weight: 600;
font-family: inherit;
border: 1px solid #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.leaflet-cluster-anim .leaflet-marker-icon,
.leaflet-cluster-anim .leaflet-marker-shadow {
transition: transform .2s ease, opacity .2s ease;
}
.rd-form__field--geocode_button {
grid-column: 1 / -1;
}
.rd-form__geocode-btn {
font-size: 14px !important;
padding: 10px 18px !important;
}
.rd-form__geocode-status {
display: inline-block;
margin-left: 12px;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
.rd-form__select--relation[multiple] option {
padding: 4px 8px;
border-radius: 4px;
}
.rd-form__gallery {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
gap: 10px;
padding: 12px;
background: var(--rd-bg-page, #FDF9F6);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 8px;
margin-bottom: 10px;
}
.rd-form__gallery-item {
position: relative;
aspect-ratio: 1;
overflow: hidden;
border-radius: 6px;
background: #fff;
}
.rd-form__gallery-item img {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.rd-form__gallery-remove {
position: absolute;
top: 4px; right: 4px;
background: rgba(255,255,255,0.95);
border-radius: 50%;
width: 24px; height: 24px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 18px;
font-weight: 700;
color: var(--rd-danger, #C23B2E);
border: 1px solid var(--rd-border, #e5ddd7);
transition: background .15s;
}
.rd-form__gallery-remove:hover { background: #FEE2E2; }
.rd-form__gallery-remove input[type=checkbox] {
position: absolute;
inset: 0;
opacity: 0;
cursor: pointer;
}
.rd-form__gallery-remove:has(input:checked) {
background: var(--rd-danger, #C23B2E);
color: #fff;
}
.rd-form__gallery-item:has(input:checked) img {
opacity: 0.4;
filter: grayscale(1);
}
.rd-form__checkbox-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 8px 14px;
padding: 8px 12px;
background: var(--rd-bg-page, #FDF9F6);
border-radius: 8px;
border: 1px solid var(--rd-border, #e5ddd7);
}
.rd-form__checkbox-item {
display: flex;
gap: 8px;
align-items: center;
font-size: 14px;
cursor: pointer;
color: var(--rd-text, #1A1A1A);
user-select: none;
padding: 4px 0;
}
.rd-form__checkbox-item input[type=checkbox] {
flex-shrink: 0;
width: 16px;
height: 16px;
accent-color: var(--rd-accent, #B56A34);
}
.rd-form__label {
font-size: 14px;
font-weight: 500;
color: var(--rd-text, #1A1A1A);
}
.rd-form__req { color: var(--rd-danger, #C23B2E); margin-left: 2px; }
.rd-form__readonly-hint {
margin-left: 6px;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
font-weight: 400;
}
.rd-form__input,
.rd-form__textarea,
.rd-form__select {
padding: 10px 12px;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 6px;
font-size: 14px;
font-family: inherit;
background: #fff;
color: var(--rd-text, #1A1A1A);
width: 100%;
box-sizing: border-box;
}
.rd-form__input:focus,
.rd-form__textarea:focus,
.rd-form__select:focus {
outline: none;
border-color: var(--rd-accent, #B56A34);
box-shadow: 0 0 0 2px rgba(181, 106, 52, 0.15);
}
.rd-form__input:disabled,
.rd-form__textarea:disabled,
.rd-form__select:disabled {
background: var(--rd-bg-page, #FDF9F6);
color: var(--rd-text-secondary, #595959);
cursor: not-allowed;
}
.rd-form__textarea { resize: vertical; min-height: 80px; }
.rd-form__help {
margin: 0;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
line-height: 1.4;
}
.rd-form__file {
padding: 8px;
border: 1px dashed var(--rd-border, #e5ddd7);
border-radius: 6px;
background: var(--rd-bg-page, #FDF9F6);
font-size: 13px;
}
.rd-form__preview {
margin-bottom: 8px;
}
.rd-form__preview-img {
max-width: 240px;
max-height: 160px;
border-radius: 8px;
border: 1px solid var(--rd-border, #e5ddd7);
display: block;
}
.rd-form__preview-remove {
display: inline-flex;
gap: 6px;
align-items: center;
margin-top: 8px;
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
.rd-form__switch {
display: inline-flex;
gap: 8px;
align-items: center;
cursor: pointer;
user-select: none;
}
.rd-form__switch input[type=checkbox] {
position: absolute;
opacity: 0;
pointer-events: none;
}
.rd-form__switch-track {
display: inline-block;
width: 40px;
height: 22px;
background: var(--rd-border, #e5ddd7);
border-radius: 12px;
position: relative;
transition: background .15s;
}
.rd-form__switch-track::after {
content: '';
position: absolute;
top: 3px; left: 3px;
width: 16px; height: 16px;
background: #fff;
border-radius: 50%;
transition: transform .15s;
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
.rd-form__switch input:checked + .rd-form__switch-track {
background: var(--rd-accent, #B56A34);
}
.rd-form__switch input:checked + .rd-form__switch-track::after {
transform: translateX(18px);
}
.rd-form__switch-label {
font-size: 13px;
color: var(--rd-text-secondary, #595959);
}
.rd-form__actions {
display: flex;
justify-content: flex-end;
gap: 12px;
padding-top: 16px;
border-top: 1px solid var(--rd-border, #e5ddd7);
margin-top: 8px;
}
@media (max-width: 640px) {
.rd-form { padding: 16px; }
.rd-form__grid { grid-template-columns: 1fr; gap: 14px; }
.rd-form__field--post_title,
.rd-form__field--post_content,
.rd-form__field--textarea,
.rd-form__field--featured_image,
.rd-form__field--taxonomy { grid-column: auto; }
.rd-form__actions { flex-direction: column-reverse; }
.rd-form__actions .rd-btn { width: 100%; text-align: center; }
}
/* Newsletter (wiederverwendbar via rundum_render_newsletter_form) */
.rd-newsletter {
background: var(--rd-bg-page, #FDF9F6);
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 12px;
padding: 28px;
}
.rd-newsletter--compact {
padding: 20px;
background: transparent;
border: none;
}
.rd-newsletter__heading {
margin: 0 0 8px;
font-size: 22px;
font-weight: 700;
color: var(--rd-text, #1A1A1A);
}
.rd-newsletter__heading--compact {
font-size: 18px;
margin-bottom: 6px;
}
.rd-newsletter__lead {
margin: 0 0 18px;
color: var(--rd-text-secondary, #595959);
font-size: 14px;
line-height: 1.5;
}
.rd-newsletter__form {
display: flex;
flex-direction: column;
gap: 12px;
}
.rd-newsletter__label {
display: block;
font-size: 13px;
font-weight: 500;
color: var(--rd-text, #1A1A1A);
margin-bottom: 4px;
}
.rd-newsletter__input-wrap {
display: flex;
gap: 8px;
}
.rd-newsletter__input {
flex: 1;
min-width: 0;
padding: 12px 14px;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 8px;
font-size: 15px;
font-family: inherit;
background: #fff;
color: var(--rd-text, #1A1A1A);
}
.rd-newsletter__input:focus {
outline: none;
border-color: var(--rd-accent, #B56A34);
box-shadow: 0 0 0 2px rgba(181, 106, 52, 0.15);
}
.rd-newsletter__submit {
padding: 12px 22px;
background: var(--rd-accent-strong, #944F22);
color: #fff;
border: none;
border-radius: 8px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
font-family: inherit;
white-space: nowrap;
transition: background .15s, transform .15s;
}
.rd-newsletter__submit:hover {
background: #7c4219;
transform: translateY(-1px);
}
.rd-newsletter__submit:active { transform: translateY(0); }
.rd-newsletter__rgpd {
margin: 0;
font-size: 12px;
color: var(--rd-text-secondary, #595959);
line-height: 1.5;
}
@media (max-width: 560px) {
.rd-newsletter__input-wrap { flex-direction: column; }
.rd-newsletter__submit { width: 100%; }
}
/* Newsletter-Slot in Single-Templates */
.rd-beitrag__newsletter-slot {
background: var(--rd-bg-page, #FDF9F6);
padding: 48px 20px;
margin-top: 32px;
border-top: 1px solid var(--rd-border, #e5ddd7);
}
.rd-beitrag__newsletter-inner {
max-width: 680px;
margin: 0 auto;
}
/* Newsletter-Page (Hero + Bestätigungsseite) */
.rd-newsletter-page {
background: var(--rd-bg-page, #FDF9F6);
min-height: 70vh;
padding: 48px 0 64px;
}
.rd-newsletter-page__container {
max-width: 760px;
margin: 0 auto;
padding: 0 20px;
}
.rd-newsletter-page__hero { text-align: center; margin: 0 0 32px; }
.rd-newsletter-page__eyebrow {
margin: 0 0 8px;
text-transform: uppercase;
letter-spacing: 1.5px;
font-size: 12px;
font-weight: 600;
color: var(--rd-accent, #B56A34);
}
.rd-newsletter-page__title {
margin: 0 0 16px;
font-size: 38px;
font-weight: 800;
color: var(--rd-text, #1A1A1A);
line-height: 1.15;
}
.rd-newsletter-page__lead {
margin: 0 auto;
max-width: 580px;
font-size: 17px;
color: var(--rd-text-secondary, #595959);
line-height: 1.55;
}
.rd-newsletter-page__form-wrap { margin: 0 0 48px; }
.rd-newsletter-page__h2 {
font-size: 22px;
margin: 0 0 16px;
text-align: center;
color: var(--rd-text, #1A1A1A);
}
.rd-newsletter-page__list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.rd-newsletter-page__list li {
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 10px;
padding: 18px;
}
.rd-newsletter-page__list strong {
display: block;
font-size: 15px;
color: var(--rd-accent-strong, #944F22);
margin-bottom: 4px;
}
.rd-newsletter-page__list span {
font-size: 14px;
color: var(--rd-text-secondary, #595959);
line-height: 1.5;
}
.rd-newsletter-page__success-card {
background: #fff;
border: 1px solid var(--rd-border, #e5ddd7);
border-radius: 16px;
padding: 48px 32px;
text-align: center;
}
.rd-newsletter-page__check {
margin: 0 auto 16px;
width: 64px;
height: 64px;
border-radius: 50%;
background: #DCFCE7;
color: #166534;
display: flex;
align-items: center;
justify-content: center;
}
.rd-newsletter-page__hint {
margin: 28px auto 0;
max-width: 460px;
text-align: left;
background: var(--rd-bg-page, #FDF9F6);
border-radius: 10px;
padding: 18px 20px;
font-size: 14px;
color: var(--rd-text, #1A1A1A);
}
.rd-newsletter-page__hint strong { display: block; margin-bottom: 8px; }
.rd-newsletter-page__hint ul { margin: 0; padding-left: 20px; color: var(--rd-text-secondary, #595959); }
.rd-newsletter-page__hint li { margin-bottom: 4px; line-height: 1.5; }
.rd-newsletter-page__hint code {
background: #fff;
padding: 1px 6px;
border-radius: 4px;
font-size: 13px;
border: 1px solid var(--rd-border, #e5ddd7);
}
.rd-newsletter-page__hint a { color: var(--rd-accent, #B56A34); }
.rd-newsletter-page__back { margin: 28px 0 0; }
@media (max-width: 640px) {
.rd-newsletter-page__title { font-size: 28px; }
.rd-newsletter-page__list { grid-template-columns: 1fr; }
.rd-newsletter-page__success-card { padding: 32px 20px; }
}
/* Status-Badges (wiederverwendbar) */
.rd-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
background: var(--rd-bg-page, #FDF9F6);
color: var(--rd-text-secondary, #595959);
border: 1px solid var(--rd-border, #e5ddd7);
}
.rd-badge--publish { background: #DCFCE7; color: #166534; border-color: #BBF7D0; }
.rd-badge--pending { background: #FEF3C7; color: #92400E; border-color: #FDE68A; }
.rd-badge--draft { background: #F3F4F6; color: #4B5563; border-color: #E5E7EB; }
.rd-badge--private { background: #EDE9FE; color: #5B21B6; border-color: #DDD6FE; }
.rd-badge--future { background: #DBEAFE; color: #1E40AF; border-color: #BFDBFE; }
.rd-badge--alert { background: #FEE2E2; color: #991B1B; border-color: #FECACA; font-weight: 600; }
.rd-badge--memorial { background: #EFEAE4; color: #4A4338; border-color: #DDD5CB; }
@media (max-width: 640px) {
.rd-dashboard__item { flex-direction: column; align-items: stretch; }
.rd-dashboard__item-actions { justify-content: flex-end; }
.rd-dashboard__footer { flex-direction: column; align-items: stretch; }
}
/* Account-Icon: kleiner Punkt wenn eingeloggt */
.rd-site-header__icon-btn.is-logged-in {
position: relative;
}
.rd-site-header__icon-btn.is-logged-in::after {
content: '';
position: absolute;
top: 6px; right: 6px;
width: 8px; height: 8px;
border-radius: 50%;
background: var(--rd-accent, #B56A34);
border: 2px solid var(--rd-bg-page, #FDF9F6);
}
/* =============================================================
* Archive-V4 — Design-Handoff 2026-04-24
* PHP-rendered Archive-Templates (template-parts/archive-*.php).
* Variables via var(--rd-*) (generiert aus design-tokens.json).
* ============================================================= */
/* Hero — Subterm-Kontext (z.B. /eintrag-art/zoofachhandel/) */
.rd-archive__title-sep {
color: var(--rd-text-tertiary);
font-weight: 400;
margin: 0 6px;
}
.rd-archive__title-subterm {
color: var(--rd-accent-strong);
font-weight: 600;
}
/* Hero — Ortssuche + Umkreis-Chips */
.rd-archive-hero--search {
padding: var(--rd-space-7) 0 var(--rd-space-6);
}
@media (max-width: 680px) {
.rd-archive-hero--search { padding: var(--rd-space-4) 0 var(--rd-space-3); }
}
.rd-archive__search-stack {
display: flex;
flex-direction: column;
gap: var(--rd-space-3);
max-width: 720px;
margin-top: var(--rd-space-4);
}
.rd-archive__search-field {
display: flex;
align-items: center;
gap: 6px;
padding: 6px 6px 6px 16px;
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-pill);
box-shadow: var(--rd-shadow-sm);
min-height: 52px;
transition: border-color 180ms, box-shadow 180ms;
}
.rd-archive__search-field:focus-within {
border-color: var(--rd-accent);
box-shadow: 0 0 0 3px var(--rd-accent-soft);
}
@media (max-width: 680px) {
.rd-archive__search-field { min-height: 44px; padding: 4px 4px 4px 14px; }
}
.rd-archive__search-icon {
flex: 0 0 auto;
color: var(--rd-text-tertiary);
display: inline-flex;
}
.rd-archive__search-input {
flex: 1;
min-width: 0;
border: 0;
outline: none;
background: transparent;
font: inherit;
font-size: 15px;
color: var(--rd-text);
}
.rd-archive__search-input::placeholder { color: var(--rd-text-tertiary); }
.rd-archive__search-btn {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 6px;
padding: 9px 16px;
background: var(--rd-text);
color: var(--rd-bg);
border-radius: var(--rd-r-pill);
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 0;
transition: background 150ms;
}
.rd-archive__search-btn:hover { background: var(--rd-accent-strong); }
@media (max-width: 680px) {
.rd-archive__search-btn span { display: none; }
.rd-archive__search-btn { padding: 8px 11px; }
}
.rd-archive__radius-chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rd-archive__radius-chip {
padding: 6px 14px;
border-radius: var(--rd-r-pill);
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
font-size: 13px;
font-weight: 600;
color: var(--rd-text);
cursor: pointer;
transition: all 150ms;
}
.rd-archive__radius-chip:hover:not(:disabled) {
background: var(--rd-bg-alt);
border-color: var(--rd-border-strong);
}
.rd-archive__radius-chip.is-active {
background: var(--rd-text);
color: var(--rd-bg);
border-color: var(--rd-text);
}
.rd-archive__radius-chip:disabled {
opacity: 0.45;
cursor: not-allowed;
}
/* Toolbar — Sticky: Count, View-Toggle, Sort, Filter-Btn */
.rd-archive__toolbar {
display: flex;
align-items: center;
gap: 12px;
padding: 10px 0;
background: var(--rd-bg);
border-bottom: 1px solid var(--rd-border);
flex-wrap: wrap;
}
.rd-archive__toolbar--sticky {
position: sticky;
top: 0;
z-index: 5;
}
.rd-archive__result-count {
font-size: 13px;
color: var(--rd-text-secondary);
flex: 1;
min-width: 120px;
}
.rd-archive__result-count strong { color: var(--rd-text); font-weight: 700; }
.rd-archive__view-toggle {
display: inline-flex;
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-pill);
padding: 3px;
gap: 0;
}
/* Specificity 0,2,0 nötig, weil es einen .rd-archive__view-toggle button
Reset von WP/Elementor gibt, der auf display: grid forced. */
.rd-archive__view-toggle .rd-archive__view-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 7px 14px;
min-height: 30px;
width: auto;
background: transparent;
color: var(--rd-text-secondary);
border: 0;
border-radius: var(--rd-r-pill);
font-size: 13px;
font-weight: 600;
line-height: 1;
white-space: nowrap;
cursor: pointer;
transition: background 150ms, color 150ms;
}
.rd-archive__view-toggle .rd-archive__view-btn svg { flex: 0 0 auto; }
.rd-archive__view-toggle .rd-archive__view-btn span {
display: inline;
line-height: 1;
}
.rd-archive__view-toggle .rd-archive__view-btn.is-active {
background: var(--rd-text);
color: var(--rd-bg);
}
@media (max-width: 680px) {
.rd-archive__view-toggle .rd-archive__view-btn { padding: 7px 10px; }
.rd-archive__view-toggle .rd-archive__view-btn span { display: none; }
}
.rd-archive__sort {
height: 36px;
padding: 0 34px 0 14px;
border-radius: var(--rd-r-pill);
border: 1px solid var(--rd-border);
background: var(--rd-bg-soft)
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23595959' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
no-repeat right 14px center;
font: inherit;
font-size: 13px;
color: var(--rd-text);
appearance: none;
cursor: pointer;
}
.rd-archive__sort:hover { border-color: var(--rd-border-strong); }
@media (max-width: 680px) {
.rd-archive__sort { display: none; }
}
.rd-archive__filter-btn {
display: inline-flex;
align-items: center;
gap: 6px;
height: 36px;
padding: 0 14px;
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-pill);
font-size: 13px;
font-weight: 600;
color: var(--rd-text);
cursor: pointer;
transition: all 150ms;
}
.rd-archive__filter-btn:hover { background: var(--rd-bg-alt); }
.rd-archive__filter-btn.is-active {
background: var(--rd-text);
color: var(--rd-bg);
border-color: var(--rd-text);
}
.rd-archive__filter-badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
background: var(--rd-accent);
color: var(--rd-bg);
border-radius: 9px;
font-size: 11px;
font-weight: 700;
margin-left: 4px;
}
/* Subtype-Chips Fade-Edge (erweitert bestehendes rd-archive__chips) */
.rd-archive__subtype-chips-wrap {
position: relative;
padding: var(--rd-space-3) 0;
}
.rd-archive__subtype-fade {
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 40px;
background: linear-gradient(to left, var(--rd-bg), transparent);
pointer-events: none;
}
/* Filter-Drawer (Desktop: rechts / Mobile: Bottom-Sheet) */
.rd-archive__filter-overlay {
position: fixed;
inset: 0;
z-index: 40;
background: rgba(20, 19, 17, 0.4);
opacity: 0;
pointer-events: none;
transition: opacity 200ms;
}
.rd-archive__filter-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
.rd-archive__filter-drawer {
position: fixed;
z-index: 50;
background: var(--rd-bg);
display: flex;
flex-direction: column;
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 280ms;
/* Q-W14-MOB-01 Fix: off-screen Drawer darf keine Touch-Events fangen (iOS-Quirk)
und nicht in Tab-Reihenfolge sein (aria-hidden allein reicht nicht in Safari). */
pointer-events: none;
visibility: hidden;
}
.rd-archive__filter-drawer.is-open {
pointer-events: auto;
visibility: visible;
transition: transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0s;
}
@media (min-width: 681px) {
.rd-archive__filter-drawer {
top: 0;
right: 0;
bottom: 0;
width: min(460px, 92vw);
box-shadow: -12px 0 32px rgba(20, 19, 17, 0.12);
transform: translateX(100%);
}
.rd-archive__filter-drawer.is-open { transform: translateX(0); }
}
@media (max-width: 680px) {
.rd-archive__filter-drawer {
left: 0;
right: 0;
bottom: 0;
max-height: 85vh;
border-radius: var(--rd-r-xl) var(--rd-r-xl) 0 0;
box-shadow: 0 -12px 32px rgba(20, 19, 17, 0.18);
transform: translateY(100%);
}
.rd-archive__filter-drawer.is-open { transform: translateY(0); }
}
.rd-archive__filter-handle {
display: none;
padding: 10px 0;
justify-content: center;
flex: 0 0 auto;
}
@media (max-width: 680px) {
.rd-archive__filter-handle { display: flex; }
}
.rd-archive__filter-handle-bar {
width: 40px;
height: 4px;
background: var(--rd-border-strong);
border-radius: 2px;
}
.rd-archive__filter-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--rd-space-4) var(--rd-space-5);
border-bottom: 1px solid var(--rd-border);
flex: 0 0 auto;
}
.rd-archive__filter-title {
margin: 0;
font-size: 20px;
font-weight: 700;
}
.rd-archive__filter-close {
background: transparent;
border: 0;
cursor: pointer;
width: 36px;
height: 36px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rd-text-secondary);
transition: background 150ms;
}
.rd-archive__filter-close:hover { background: var(--rd-bg-alt); }
.rd-archive__filter-body {
flex: 1;
overflow-y: auto;
padding: var(--rd-space-5);
}
.rd-archive__filter-section {
margin-bottom: var(--rd-space-5);
}
.rd-archive__filter-section--highlight {
padding: var(--rd-space-4);
background: var(--rd-accent-soft);
border-radius: var(--rd-r-md);
}
.rd-archive__filter-label {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--rd-text-tertiary);
margin: 0 0 var(--rd-space-3);
}
.rd-archive__filter-label--accent { color: var(--rd-accent-strong); }
.rd-archive__filter-pills {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.rd-archive__pill {
padding: 8px 14px;
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-pill);
font-size: 13px;
font-weight: 600;
color: var(--rd-text);
cursor: pointer;
transition: all 150ms;
}
.rd-archive__pill:hover { background: var(--rd-bg-alt); }
.rd-archive__pill.is-active {
background: var(--rd-text);
color: var(--rd-bg);
border-color: var(--rd-text);
}
.rd-archive__filter-toggle {
display: flex;
gap: 12px;
padding: var(--rd-space-3) var(--rd-space-4);
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
cursor: pointer;
align-items: flex-start;
}
.rd-archive__filter-toggle input[type="checkbox"] {
margin-top: 2px;
flex: 0 0 auto;
}
.rd-archive__toggle-title {
font-size: 14px;
font-weight: 600;
color: var(--rd-text);
}
.rd-archive__toggle-desc {
font-size: 12px;
color: var(--rd-text-secondary);
margin-top: 2px;
}
.rd-archive__filter-footer {
display: flex;
gap: 10px;
padding: var(--rd-space-4) var(--rd-space-5);
border-top: 1px solid var(--rd-border);
background: var(--rd-bg);
flex: 0 0 auto;
}
.rd-archive__btn-ghost,
.rd-archive__btn-primary {
flex: 1;
padding: 10px 16px;
border-radius: var(--rd-r-pill);
font-size: 14px;
font-weight: 700;
cursor: pointer;
border: 1px solid transparent;
transition: all 150ms;
}
.rd-archive__btn-ghost {
background: var(--rd-bg-soft);
color: var(--rd-text);
border-color: var(--rd-border);
}
.rd-archive__btn-ghost:hover { background: var(--rd-bg-alt); }
.rd-archive__btn-primary {
background: var(--rd-text);
color: var(--rd-bg);
}
.rd-archive__btn-primary:hover { background: var(--rd-accent-strong); }
/* Map-Panel (60/40-Split Desktop, Full-Screen + Card-Stack Mobile) */
.rd-archive__map-container {
display: grid;
grid-template-columns: 1.5fr 1fr;
min-height: 60vh;
height: calc(100vh - 140px);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
overflow: hidden;
background: var(--rd-bg-soft);
}
@media (max-width: 960px) {
.rd-archive__map-container {
grid-template-columns: 1fr;
grid-template-rows: 1fr;
min-height: 70vh;
position: relative;
}
}
.rd-archive__map-canvas {
position: relative;
background: linear-gradient(135deg, #E0EBEE 0%, #D4E0E4 100%);
overflow: hidden;
}
.rd-archive__map-canvas[data-rd-leaflet] { background: transparent; }
.rd-archive__map-credit {
position: absolute;
bottom: 6px;
right: 8px;
font-size: 10px;
color: var(--rd-text-tertiary);
font-family: "IBM Plex Mono", ui-monospace, monospace;
letter-spacing: 0.04em;
background: rgba(251, 247, 242, 0.8);
padding: 2px 6px;
border-radius: 3px;
z-index: 5;
}
.rd-archive__map-controls {
position: absolute;
right: 12px;
bottom: 32px;
display: flex;
flex-direction: column;
gap: 4px;
z-index: 6;
}
.rd-archive__map-btn {
width: 32px;
height: 32px;
background: var(--rd-bg);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-sm);
cursor: pointer;
font-size: 16px;
font-weight: 700;
color: var(--rd-text);
display: inline-flex;
align-items: center;
justify-content: center;
box-shadow: var(--rd-shadow-sm);
}
.rd-archive__marker {
position: absolute;
transform: translate(-50%, -100%);
z-index: 10;
cursor: pointer;
}
.rd-archive__marker-pin {
width: 30px;
height: 30px;
background: var(--rd-text);
color: var(--rd-bg);
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
box-shadow: var(--rd-shadow-md);
border: 2px solid var(--rd-bg);
}
.rd-archive__marker-pin > span { transform: rotate(45deg); }
.rd-archive__marker--premium .rd-archive__marker-pin { background: var(--rd-accent); }
.rd-archive__marker.is-active .rd-archive__marker-pin {
background: var(--rd-accent-strong);
transform: rotate(-45deg) scale(1.2);
}
.rd-archive__map-list {
overflow-y: auto;
padding: var(--rd-space-4);
border-left: 1px solid var(--rd-border);
background: var(--rd-bg);
display: flex;
flex-direction: column;
gap: var(--rd-space-3);
}
[data-rd-map-card] { cursor: pointer; transition: background-color 0.12s; border-radius: var(--rd-r-sm); }
[data-rd-map-card]:hover { background: var(--rd-bg-soft); }
[data-rd-map-card].is-active {
background: var(--rd-accent-soft, #F4E3D2);
box-shadow: inset 3px 0 0 var(--rd-accent);
}
/* Leaflet Custom Pin (divIcon) */
.rd-map-pin {
position: relative;
width: 18px !important;
height: 18px !important;
}
.rd-map-pin__dot {
display: block;
width: 14px;
height: 14px;
background: var(--rd-accent);
border: 2px solid var(--rd-bg);
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
transition: transform 0.15s;
}
.leaflet-marker-icon:hover .rd-map-pin__dot {
transform: scale(1.25);
background: var(--rd-accent-strong);
}
.rd-map-popup {
font-family: var(--rd-font-base);
font-size: 13px;
line-height: 1.4;
}
.rd-map-popup strong { display: block; margin-bottom: 4px; color: var(--rd-text); }
.rd-map-popup a { color: var(--rd-accent); text-decoration: none; font-weight: 600; }
.rd-map-popup a:hover { color: var(--rd-accent-strong); }
/* Leaflet-Tile-Attribution überschreiben — wir haben eigenen Credit */
.leaflet-container .leaflet-control-attribution { display: none; }
@media (max-width: 960px) {
.rd-archive__map-list {
position: absolute;
left: 0;
right: 0;
bottom: 16px;
padding: 0 var(--rd-space-3);
flex-direction: row;
gap: 10px;
overflow-x: auto;
scroll-snap-type: x mandatory;
border-left: 0;
background: transparent;
}
.rd-archive__map-list > * { flex: 0 0 86%; scroll-snap-align: start; }
}
/* Card erweitert — Premium + Subtype-Badge + Signale */
.rd-card--premium {
border-color: var(--rd-accent);
box-shadow: 0 0 0 1px var(--rd-accent) inset;
}
.rd-card__image-wrap {
display: block;
position: relative;
aspect-ratio: 16 / 9;
width: 100%;
background:
repeating-linear-gradient(45deg, rgba(0,0,0,0.025) 0 10px, transparent 10px 20px),
var(--rd-tone, #D4C5B0);
overflow: hidden;
}
.rd-card__image-wrap img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Card-Pills im Body (bei empty image-wrap) — Subtype + Premium-Info als
regular Pill statt verlorener Overlay-Badge. */
.rd-card__pills {
display: flex;
gap: 6px;
flex-wrap: wrap;
margin-bottom: 8px;
}
.rd-card__pill {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--rd-r-pill, 24px);
font-family: var(--rd-font-ui, Inter), sans-serif;
font-weight: 600;
font-size: 11px;
letter-spacing: 0.02em;
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
border: 1px solid var(--rd-border, #e5ddd7);
}
.rd-card__pill--verified {
background: rgba(16, 185, 129, 0.10);
color: #047857;
border-color: rgba(16, 185, 129, 0.30);
}
/* Empty-State: kein Featured-Image und kein Logo → 6px Farb-Strip statt fetter
Hero-Block (Memory: feedback_image_slot_strip_pattern). Klassenmatch +
:has()-Fallback für inline-rendered Cards. */
.rd-card__image-wrap--empty,
.rd-card__image-wrap:not(:has(img)) {
aspect-ratio: auto;
height: 6px;
background: var(--rd-tone, #D4C5B0);
/* Streifen-Pattern entfällt — bei 6px Strip kein Mehrwert, würde gefleckt aussehen */
background-image: none;
}
/* Badges bei empty card weglassen — sie würden außerhalb des 6px-Strips clippen.
Subtype/Premium-Info gehört in solchen Fällen als Pill in den Card-Body. */
.rd-card__image-wrap--empty .rd-card__premium-badge,
.rd-card__image-wrap--empty .rd-card__subtype-badge,
.rd-card__image-wrap:not(:has(img)) .rd-card__premium-badge,
.rd-card__image-wrap:not(:has(img)) .rd-card__subtype-badge {
display: none;
}
.rd-card__premium-badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 2;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 4px 10px;
background: var(--rd-accent);
color: var(--rd-bg);
border-radius: var(--rd-r-pill);
font-size: 11px;
font-weight: 700;
box-shadow: 0 2px 6px rgba(20, 19, 17, 0.15);
}
.rd-card__subtype-badge {
position: absolute;
top: 10px;
right: 10px;
z-index: 1;
padding: 3px 10px;
border-radius: var(--rd-r-pill);
font-size: 11px;
font-weight: 700;
border: 1px solid;
background: var(--rd-subtype-info-bg);
color: var(--rd-subtype-info-fg);
border-color: var(--rd-subtype-info-border);
}
.rd-card__subtype-badge--med { background: var(--rd-subtype-med-bg); color: var(--rd-subtype-med-fg); border-color: var(--rd-subtype-med-border); }
.rd-card__subtype-badge--train { background: var(--rd-subtype-train-bg); color: var(--rd-subtype-train-fg); border-color: var(--rd-subtype-train-border); }
.rd-card__subtype-badge--care { background: var(--rd-subtype-care-bg); color: var(--rd-subtype-care-fg); border-color: var(--rd-subtype-care-border); }
.rd-card__subtype-badge--service { background: var(--rd-subtype-service-bg); color: var(--rd-subtype-service-fg); border-color: var(--rd-subtype-service-border); }
.rd-card__subtype-badge--shelter { background: var(--rd-subtype-shelter-bg); color: var(--rd-subtype-shelter-fg); border-color: var(--rd-subtype-shelter-border); }
.rd-card__subtype-badge--trade { background: var(--rd-subtype-trade-bg); color: var(--rd-subtype-trade-fg); border-color: var(--rd-subtype-trade-border); }
.rd-card__subtype-badge--nature { background: var(--rd-subtype-nature-bg); color: var(--rd-subtype-nature-fg); border-color: var(--rd-subtype-nature-border); }
.rd-card__subtype-badge--info { background: var(--rd-subtype-info-bg); color: var(--rd-subtype-info-fg); border-color: var(--rd-subtype-info-border); }
.rd-card__subtype-badge--warn { background: var(--rd-subtype-warn-bg); color: var(--rd-subtype-warn-fg); border-color: var(--rd-subtype-warn-border); }
.rd-card__subtype-badge--sport { background: var(--rd-subtype-sport-bg); color: var(--rd-subtype-sport-fg); border-color: var(--rd-subtype-sport-border); }
.rd-card__subtype-badge--ref { background: var(--rd-subtype-ref-bg); color: var(--rd-subtype-ref-fg); border-color: var(--rd-subtype-ref-border); }
/* Signal-Tags auf Card */
.rd-card__signals {
display: flex;
flex-wrap: wrap;
gap: 4px;
margin: 6px 0;
}
.rd-signal {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 9px;
border-radius: var(--rd-r-pill);
font-size: 11px;
font-weight: 600;
}
.rd-signal--default { background: var(--rd-bg-alt); color: var(--rd-text-secondary); }
.rd-signal--accent { background: var(--rd-accent-soft); color: var(--rd-accent-strong); }
.rd-signal--alert { background: var(--rd-danger-soft); color: var(--rd-danger); }
.rd-signal--warn { background: var(--rd-subtype-warn-bg); color: var(--rd-subtype-warn-fg); }
.rd-signal__dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: currentColor;
flex: 0 0 auto;
animation: rd-signal-pulse 2s ease-in-out infinite;
}
@keyframes rd-signal-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
/* Card-Footer (Rating + Favorite) */
.rd-card__card-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding-top: 8px;
margin-top: 6px;
border-top: 1px solid var(--rd-border);
}
.rd-card__rating {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 13px;
color: var(--rd-text);
}
.rd-card__rating strong { font-weight: 700; }
.rd-card__rating-meta { color: var(--rd-text-tertiary); font-size: 12px; }
.rd-card__favorite {
width: 32px;
height: 32px;
border: 0;
background: transparent;
cursor: pointer;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--rd-text-tertiary);
transition: color 150ms, background 150ms;
}
.rd-card__favorite:hover { background: var(--rd-bg-alt); color: var(--rd-accent); }
.rd-card__favorite.is-active { color: var(--rd-accent); }
/* Card Compact (Map-Liste) */
.rd-card--compact {
display: grid;
grid-template-columns: 28px 80px 1fr;
gap: 10px;
padding: 10px;
align-items: center;
flex-shrink: 0; /* flex-item in .rd-archive__map-list (column, fixed height) */
}
.rd-card--compact .rd-card__marker-num {
width: 24px;
height: 24px;
background: var(--rd-text);
color: var(--rd-bg);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 800;
}
.rd-card--compact .rd-card__image-wrap {
width: 80px;
height: 64px;
aspect-ratio: auto;
border-radius: var(--rd-r-sm);
}
/* === CPT-SPEZIFISCHE CARD-VARIANTEN (unterkunft / zuechter / vermittlung) === */
/* Subline: zweitzeilige Beschreibung zwischen Titel und Meta */
.rd-card__subline {
margin: 0 0 8px;
font-size: 13px;
line-height: 1.45;
color: var(--rd-text-secondary);
display: -webkit-box;
-webkit-line-clamp: 2;
line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.rd-card__subline--breeds {
-webkit-line-clamp: 1;
line-clamp: 1;
font-size: 12px;
color: var(--rd-text-tertiary);
}
.rd-card__subline-label {
font-weight: 600;
color: var(--rd-text-secondary);
}
/* Meta — muted Variante für „vermittelt durch …" */
.rd-card__meta--muted {
color: var(--rd-text-tertiary);
font-size: 12px;
}
/* Land-Flag inline neben Ort */
.rd-card__flag {
display: inline-block;
margin-left: 2px;
font-size: 13px;
line-height: 1;
opacity: 0.9;
}
/* Inline-Facts — Steckbrief-Strip (♂ Rüde · 🎂 4 Jahre · 📏 gross) */
.rd-card__facts--inline {
list-style: none;
margin: 4px 0 8px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 6px 10px;
font-size: 12.5px;
color: var(--rd-text);
}
.rd-card__fact {
display: inline-flex;
align-items: center;
gap: 4px;
white-space: nowrap;
}
.rd-card__fact-icon {
font-size: 13px;
line-height: 1;
opacity: 0.85;
}
/* Pills — Mitgliedschafts-Badges (VDH / FCI / …) */
.rd-card__pills {
list-style: none;
margin: 2px 0 8px;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.rd-card__pill {
padding: 2px 8px;
border-radius: var(--rd-r-pill);
background: var(--rd-accent-soft);
color: var(--rd-accent-strong);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.02em;
text-transform: uppercase;
}
/* Card-Footer — Kontakt-Dots + Signals nebeneinander am Kartenboden */
.rd-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-top: 10px;
padding-top: 8px;
border-top: 1px solid var(--rd-border);
}
/* Kontakt-Indikatoren — kleine Dots mit SVG-Icon */
.rd-card__contact-dots {
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
gap: 6px;
}
.rd-card__contact-dot {
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--rd-bg-alt);
color: var(--rd-text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
transition: background 150ms, color 150ms;
}
.rd-card:hover .rd-card__contact-dot {
background: var(--rd-accent-soft);
color: var(--rd-accent-strong);
}
/* Status-Overlay — großer „Vermittelt"-Banner über dem Bild */
.rd-card__status-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(20, 19, 17, 0.45);
z-index: 3;
backdrop-filter: blur(1px);
}
.rd-card__status-overlay-inner {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: #fff;
border-radius: var(--rd-r-pill);
box-shadow: 0 4px 12px rgba(0,0,0,0.18);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.02em;
}
.rd-card__status-overlay--vermittelt .rd-card__status-overlay-inner {
color: #0a6b3b;
}
.rd-card__status-overlay-heart {
font-size: 16px;
line-height: 1;
color: #10b981;
}
/* Vermittelt-Card — dimmed Optik, klar als „abgeschlossen" lesbar */
.rd-card--vermittelt {
opacity: 0.82;
}
.rd-card--vermittelt:hover {
opacity: 1;
}
.rd-card--vermittelt .rd-card__title {
color: var(--rd-text-secondary);
}
/* Vermittlung-Card Fact-Strip — etwas prominenter */
.rd-card--vermittlung .rd-card__facts--inline {
margin-top: 2px;
font-weight: 500;
}
/* === HAUSTIER PUBLIC: VERMISST (/vermisst/{slug}/) === */
/* Tonalität: dringlich aber nicht reisserisch. Roter Akzent als Signal,
sonst ruhige rd-Palette. Mobile-first, eine Spalte; ab 800px Grid. */
.rd-vermisst {
--rd-vermisst-alert: var(--rd-danger, #C23B2E);
--rd-vermisst-alert-soft: var(--rd-danger-soft, #FBE7E4);
background: var(--rd-bg);
color: var(--rd-text);
padding-bottom: var(--rd-space-7);
}
/* Hero ohne Container — Foto vollbreite bis 1240px */
.rd-vermisst__hero {
background: var(--rd-bg-alt);
border-bottom: 1px solid var(--rd-border);
margin-bottom: var(--rd-space-6);
}
.rd-vermisst__hero-photo {
width: 100%;
max-width: 1240px;
margin: 0 auto;
aspect-ratio: 16 / 9;
background: var(--rd-bg-alt);
overflow: hidden;
}
.rd-vermisst__hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* Empty: 6px Alarm-Strip statt grauer Block */
.rd-vermisst__hero-photo--empty {
aspect-ratio: auto;
height: 6px;
background: linear-gradient(90deg,
var(--rd-vermisst-alert) 0%,
var(--rd-vermisst-alert-soft) 100%);
}
.rd-vermisst__hero-body {
padding-top: var(--rd-space-5);
padding-bottom: var(--rd-space-5);
}
/* Eyebrow mit pulsierendem roten Punkt */
.rd-vermisst__eyebrow {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0 0 var(--rd-space-3);
padding: 6px 14px;
background: var(--rd-vermisst-alert-soft);
color: var(--rd-vermisst-alert);
border-radius: var(--rd-r-pill);
font-family: var(--rd-font-ui);
font-weight: 700;
font-size: 13px;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.rd-vermisst__eyebrow-dot {
display: inline-block;
width: 8px;
height: 8px;
background: var(--rd-vermisst-alert);
border-radius: 50%;
animation: rd-vermisst-pulse 2s ease-in-out infinite;
}
@keyframes rd-vermisst-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.55; transform: scale(1.25); }
}
@media (prefers-reduced-motion: reduce) {
.rd-vermisst__eyebrow-dot { animation: none; }
}
.rd-vermisst__title {
font-family: var(--rd-font-display);
font-size: clamp(32px, 7vw, 48px);
font-weight: 700;
line-height: 1.1;
margin: 0 0 var(--rd-space-3);
color: var(--rd-text);
}
.rd-vermisst__since {
margin: 0;
font-size: 17px;
color: var(--rd-text-secondary);
}
.rd-vermisst__since strong { color: var(--rd-text); font-weight: 600; }
.rd-vermisst__reward {
display: inline-flex;
align-items: baseline;
gap: 10px;
margin: var(--rd-space-4) 0 0;
padding: 10px 18px;
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border-strong);
border-radius: var(--rd-r-md);
}
.rd-vermisst__reward-label {
font-family: var(--rd-font-ui);
font-size: 12px;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--rd-text-tertiary);
}
.rd-vermisst__reward-value {
font-family: var(--rd-font-display);
font-size: 22px;
font-weight: 700;
color: var(--rd-accent-strong);
}
/* Main-Layout: Single-Column mobile, 2-col ab 800px */
.rd-vermisst__main { /* nutzt rd-container */ }
.rd-vermisst__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--rd-space-6);
}
@media (min-width: 800px) {
.rd-vermisst__grid {
grid-template-columns: 280px 1fr;
align-items: start;
}
}
.rd-vermisst__steckbrief {
background: var(--rd-bg-soft);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
padding: var(--rd-space-5);
box-shadow: var(--rd-shadow-sm);
}
@media (min-width: 800px) {
.rd-vermisst__steckbrief { position: sticky; top: 24px; }
}
.rd-vermisst__h2 {
font-family: var(--rd-font-display);
font-size: 20px;
font-weight: 700;
margin: 0 0 var(--rd-space-3);
color: var(--rd-text);
}
.rd-vermisst__dl {
display: grid;
grid-template-columns: max-content 1fr;
gap: 8px 16px;
margin: 0;
}
.rd-vermisst__dl dt {
font-family: var(--rd-font-ui);
font-size: 13px;
font-weight: 600;
color: var(--rd-text-tertiary);
letter-spacing: 0.02em;
}
.rd-vermisst__dl dd {
margin: 0;
font-size: 15px;
color: var(--rd-text);
}
.rd-vermisst__content {
display: flex;
flex-direction: column;
gap: var(--rd-space-6);
min-width: 0; /* gegen grid-overflow */
}
.rd-vermisst__section { margin: 0; }
.rd-vermisst__ort {
margin: 0;
font-size: 17px;
color: var(--rd-text);
}
.rd-vermisst__ort-link { margin: 8px 0 0; font-size: 14px; }
.rd-vermisst__ort-link a { color: var(--rd-accent-strong); text-decoration: underline; }
.rd-vermisst__text {
font-size: 16px;
line-height: 1.65;
color: var(--rd-text);
}
.rd-vermisst__text p { margin: 0 0 var(--rd-space-4); }
.rd-vermisst__text p:last-child { margin-bottom: 0; }
/* Kontakt-Card — visuell hervorgehoben */
.rd-vermisst__contact-card {
background: var(--rd-bg-soft);
border: 1.5px solid var(--rd-vermisst-alert);
border-radius: var(--rd-r-md);
padding: var(--rd-space-5);
box-shadow: var(--rd-shadow-md);
}
.rd-vermisst__contact-name { margin: 0 0 var(--rd-space-3); font-size: 17px; }
.rd-vermisst__contact-rel {
display: inline-block;
margin-left: 8px;
padding: 2px 10px;
background: var(--rd-bg-alt);
border-radius: var(--rd-r-pill);
font-size: 12px;
color: var(--rd-text-secondary);
font-weight: 500;
vertical-align: middle;
}
.rd-vermisst__contact-phone { margin: 0; }
.rd-vermisst__contact-phone .rd-btn--primary {
background: var(--rd-vermisst-alert);
font-size: 17px;
height: 56px;
padding: 0 28px;
}
.rd-vermisst__contact-phone .rd-btn--primary:hover {
background: #9a2e23;
}
/* QR-Code in der Kontakt-Card — sekundärer Pfad zur Notfall-Seite.
SVG kommt aus dem JetEngine-QR-Modul (api.qrserver.com, 1-Tag-Cache).
Wenn das Modul oder die externe API nicht antwortet, rendert PHP den Block
einfach nicht. Hier nur Sizing/Layout für das SVG-Element. */
.rd-vermisst__qr {
display: flex;
align-items: center;
gap: 14px;
margin-top: var(--rd-space-4);
padding: var(--rd-space-3);
background: var(--rd-bg);
border: 1px solid var(--rd-border);
border-radius: var(--rd-r-md);
text-decoration: none;
color: var(--rd-text-secondary);
transition: border-color 0.15s ease, background 0.15s ease;
}
.rd-vermisst__qr:hover,
.rd-vermisst__qr:focus-visible {
border-color: var(--rd-text-secondary);
background: var(--rd-bg-soft);
color: var(--rd-text);
}
.rd-vermisst__qr-svg {
flex: 0 0 auto;
display: block;
width: 80px;
height: 80px;
padding: 4px;
background: #fff;
border-radius: 4px;
border: 1px solid var(--rd-border);
}
.rd-vermisst__qr-svg svg {
width: 100%;
height: 100%;
display: block;
}
.rd-vermisst__qr-label {
font-family: var(--rd-font-ui);
font-size: 13px;
line-height: 1.4;
letter-spacing: 0.01em;
}
/* Share-Strip am Seitenende */
.rd-vermisst__share {
margin-top: var(--rd-space-7);
padding: var(--rd-space-6);
background: var(--rd-bg-alt);
border-radius: var(--rd-r-lg);
text-align: center;
}
.rd-vermisst__share .rd-vermisst__h2 { margin-bottom: var(--rd-space-2); }
.rd-vermisst__share-lead {
margin: 0 0 var(--rd-space-4);
color: var(--rd-text-secondary);
font-size: 15px;
}
.rd-vermisst__share-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
justify-content: center;
}
.rd-vermisst__share-buttons .rd-btn { min-width: 140px; }
/* === HAUSTIER PUBLIC: GEDENKEN (/im-gedenken/{slug}/) === */
/* Tonalität: still, würdig, lesbarer Lese-Block. Kein hartes Akzent.
Nutzt memorial-Palette (warmer Beige-Stein). */
.rd-gedenken {
--rd-gedenken-tone: #EFEAE4;
--rd-gedenken-tone-fg: #4A4338;
--rd-gedenken-tone-border: #DDD5CB;
background: var(--rd-bg);
color: var(--rd-text);
padding: var(--rd-space-7) 0;
}
.rd-gedenken__article {
max-width: var(--rd-container-content, 760px);
}
.rd-gedenken__header {
text-align: center;
margin-bottom: var(--rd-space-6);
}
.rd-gedenken__eyebrow {
margin: 0 0 var(--rd-space-3);
font-family: var(--rd-font-ui);
font-size: 12px;
font-weight: 700;
color: var(--rd-text-tertiary);
letter-spacing: 0.12em;
text-transform: uppercase;
}
.rd-gedenken__title {
font-family: var(--rd-font-display);
font-size: clamp(32px, 6vw, 44px);
font-weight: 600;
line-height: 1.15;
margin: 0 0 var(--rd-space-3);
color: var(--rd-text);
letter-spacing: -0.01em;
}
.rd-gedenken__dates {
margin: 0 0 8px;
font-family: var(--rd-font-display);
font-size: 17px;
color: var(--rd-text-secondary);
font-style: italic;
}
.rd-gedenken__meta {
margin: 0;
font-size: 14px;
color: var(--rd-text-tertiary);
letter-spacing: 0.02em;
}
.rd-gedenken__photo {
margin: 0 0 var(--rd-space-6);
border-radius: var(--rd-r-lg);
overflow: hidden;
box-shadow: var(--rd-shadow-md);
background: var(--rd-bg-soft);
aspect-ratio: 16 / 10;
}
.rd-gedenken__photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: grayscale(0.4) sepia(0.15);
}
.rd-gedenken__photo--empty {
aspect-ratio: auto;
height: 6px;
border-radius: 0;
box-shadow: none;
background: linear-gradient(90deg,
var(--rd-gedenken-tone) 0%,
var(--rd-gedenken-tone-border) 100%);
margin-bottom: var(--rd-space-6);
}
.rd-gedenken__text {
font-size: 17px;
line-height: 1.75;
color: var(--rd-text);
margin: 0 0 var(--rd-space-7);
}
.rd-gedenken__text p { margin: 0 0 var(--rd-space-4); }
.rd-gedenken__text p:last-child { margin-bottom: 0; }
.rd-gedenken__text blockquote {
margin: var(--rd-space-5) 0;
padding: 0 var(--rd-space-5);
border-left: 3px solid var(--rd-gedenken-tone-border);
font-style: italic;
color: var(--rd-text-secondary);
}
.rd-gedenken__footer {
text-align: center;
margin-top: var(--rd-space-6);
padding-top: var(--rd-space-5);
border-top: 1px solid var(--rd-border);
}
.rd-gedenken__signature {
margin: 0;
font-family: var(--rd-font-ui);
font-size: 13px;
color: var(--rd-text-tertiary);
letter-spacing: 0.02em;
}
.rd-gedenken__signature strong {
color: var(--rd-text-secondary);
font-weight: 600;
}
.rd-gedenken__signature a {
color: var(--rd-text-secondary);
text-decoration: underline;
}
.rd-gedenken__signature a:hover { color: var(--rd-accent-strong); }
/* === HAUSTIER PUBLIC: NOTFALL (/notfall/{slug}/) === */
/* QR-Scan-Ziel: Finder-zentriert, maximal scanbar, prominent Telefon.
noindex+nofollow (Robots-Policy in haustier-public-routes.php). */
.rd-notfall {
--rd-notfall-accent: #0f766e;
--rd-notfall-missing: #b53838;
background: var(--rd-bg);
color: var(--rd-text);
padding: 0 0 var(--rd-space-7);
}
.rd-notfall__banner {
padding: var(--rd-space-4) var(--rd-space-5);
background: #fef2f2;
color: var(--rd-notfall-missing);
border-bottom: 2px solid var(--rd-notfall-missing);
font-size: 15px;
text-align: center;
}
.rd-notfall__banner strong {
display: block;
font-size: 17px;
margin-bottom: 4px;
}
.rd-notfall__hero {
position: relative;
background: var(--rd-bg-alt);
overflow: hidden;
margin-bottom: var(--rd-space-6);
}
.rd-notfall__hero-photo {
width: 100%;
aspect-ratio: 16 / 7;
overflow: hidden;
background: var(--rd-bg-soft);
}
.rd-notfall__hero-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.rd-notfall__hero-photo--empty {
background: linear-gradient(135deg, var(--rd-bg-soft) 0%, var(--rd-border) 100%);
}
.rd-notfall__hero-body {
padding: var(--rd-space-5) 0 0;
text-align: center;
}
.rd-notfall__eyebrow {
margin: 0 0 var(--rd-space-2);
font-family: var(--rd-font-ui);
font-size: 12px;
font-weight: 700;
color: var(--rd-notfall-accent);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.rd-notfall__title {
font-family: var(--rd-font-display);
font-size: clamp(32px, 6vw, 48px);
font-weight: 700;
line-height: 1.1;
margin: 0 0 var(--rd-space-2);
color: var(--rd-text);
letter-spacing: -0.02em;
}
.rd-notfall__summary {
margin: 0;
font-size: 17px;
color: var(--rd-text-secondary);
}
.rd-notfall__main {
max-width: 720px;
}
.rd-notfall__section {
margin-bottom: var(--rd-space-6);
}
.rd-notfall__h2 {
font-family: var(--rd-font-display);
font-size: 22px;
font-weight: 600;
margin: 0 0 var(--rd-space-3);
color: var(--rd-text);
}
.rd-notfall__h3 {
font-family: var(--rd-font-ui);
font-size: 14px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--rd-text-tertiary);
margin: 0 0 var(--rd-space-1);
}
/* Kontakt-Card: prominenter als im Vermisst-Template, das ist der primäre CTA */
.rd-notfall__contact-card {
background: var(--rd-bg-soft);
border: 2px solid var(--rd-notfall-accent);
border-radius: var(--rd-r-md);
padding: var(--rd-space-5);
box-shadow: var(--rd-shadow-md);
}
.rd-notfall__contact-name {
margin: 0 0 var(--rd-space-3);
font-size: 18px;
}
.rd-notfall__contact-rel {
display: inline-block;
margin-left: 8px;
padding: 2px 10px;
background: var(--rd-bg-alt);
border-radius: var(--rd-r-pill);
font-size: 12px;
color: var(--rd-text-secondary);
font-weight: 500;
vertical-align: middle;
}
.rd-notfall__contact-phone { margin: 0; }
.rd-notfall__phone-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
width: 100%;
max-width: 480px;
margin: 0 auto;
background: var(--rd-notfall-accent);
color: #fff;
font-size: 19px;
line-height: 1;
height: 64px;
padding: 0 28px;
font-weight: 700;
letter-spacing: 0.01em;
border-radius: var(--rd-r-md);
text-decoration: none;
}
.rd-notfall__phone-btn:hover,
.rd-notfall__phone-btn:focus-visible {
background: #0b5550;
color: #fff;
}
.rd-notfall__phone-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
line-height: 0;
}
.rd-notfall__phone-number {
font-variant-numeric: tabular-nums;
letter-spacing: 0.02em;
}
.rd-notfall__no-contact {
padding: var(--rd-space-4);
background: #fef2f2;
border: 1px solid var(--rd-notfall-missing);
border-radius: var(--rd-r-md);
color: var(--rd-notfall-missing);
}
/* Struktur-Listen: klare Key/Value-Rasterung */
.rd-notfall__dl {
display: grid;
grid-template-columns: minmax(110px, auto) 1fr;
gap: 8px 16px;
margin: 0;
}
.rd-notfall__dl dt {
font-family: var(--rd-font-ui);
font-size: 13px;
color: var(--rd-text-tertiary);
font-weight: 600;
padding-top: 2px;
}
.rd-notfall__dl dd {
margin: 0;
font-size: 15px;
color: var(--rd-text);
}
.rd-notfall__code {
display: inline-block;
padding: 2px 8px;
background: var(--rd-bg-alt);
border-radius: 4px;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 14px;
letter-spacing: 0.02em;
}
.rd-notfall__chip-reg {
display: inline-block;
margin-left: 8px;
padding: 1px 8px;
background: var(--rd-notfall-accent);
color: #fff;
border-radius: var(--rd-r-pill);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.06em;
vertical-align: middle;
}
.rd-notfall__section--medical {
padding: var(--rd-space-4);
background: #fffbeb;
border: 1px solid #fde68a;
border-radius: var(--rd-r-md);
}
.rd-notfall__medical-item { margin-bottom: var(--rd-space-3); }
.rd-notfall__medical-item:last-child { margin-bottom: 0; }
.rd-notfall__medical-item p {
margin: 0;
font-size: 15px;
color: var(--rd-text);
white-space: pre-line;
}
.rd-notfall__versich-nr {
display: block;
font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
font-size: 13px;
color: var(--rd-text-secondary);
}
.rd-notfall__footer {
margin-top: var(--rd-space-6);
padding-top: var(--rd-space-4);
border-top: 1px solid var(--rd-border);
text-align: center;
}
.rd-notfall__footer-meta {
margin: 0;
font-size: 12px;
color: var(--rd-text-tertiary);
line-height: 1.6;
}
.rd-notfall__footer-meta a {
color: var(--rd-text-secondary);
text-decoration: underline;
}
/* Dashboard-Badge --info Modifier (für Notfall-QR-Link) */
.rd-badge--info {
background: var(--rd-bg-soft);
color: var(--rd-notfall-accent, #0f766e);
border: 1px solid var(--rd-notfall-accent, #0f766e);
}
/* ==========================================================================
* PRINT-ARTEFAKTE — Notfallausweis CR80, Vermisst-Flyer A5, Halterkarte CR80
*
* Wird von inc/haustier-print-routes.php in eigener HTML-Hülle ausgeliefert
* (kein get_header/footer). Screen-Preview zeigt die Karte + Print-Button,
* @media print blendet alles außer der Karte aus.
*
* @page-Regeln liegen inline im jeweiligen Route-Render (CR80 vs A5).
* ==========================================================================
*/
body.rd-print {
background: #eee7df;
margin: 0;
padding: 0;
font-family: 'Inter', system-ui, sans-serif;
color: var(--rd-text, #1A1A1A);
}
.rd-print-wrapper {
min-height: 100vh;
padding: 32px 16px 64px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.rd-print-wrapper__controls {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.rd-print-wrapper__hint {
max-width: 480px;
margin: 0;
text-align: center;
font-size: 13px;
line-height: 1.5;
color: var(--rd-text-secondary, #595959);
}
/* ─── Notfallausweis CR80 ──────────────────────────────────────────────── */
.rd-print-ausweis {
width: 85.6mm;
height: 53.98mm;
background: #ffffff;
color: #2a2a2a;
border-radius: 3mm;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
page-break-inside: avoid;
break-inside: avoid;
position: relative;
}
.rd-print-ausweis + .rd-print-ausweis {
margin-top: 12px;
}
.rd-print-ausweis__head {
display: flex;
align-items: center;
gap: 3mm;
padding: 2.5mm 3mm 1.5mm;
border-bottom: 0.4mm solid #e5ddd7;
}
.rd-print-ausweis__head--back {
display: block;
border-bottom: 0.4mm solid #e5ddd7;
padding: 2.5mm 3mm 2mm;
text-align: center;
}
.rd-print-ausweis__photo {
flex: 0 0 auto;
width: 14mm;
height: 14mm;
border-radius: 50%;
overflow: hidden;
background: #eee7df;
}
.rd-print-ausweis__photo img {
width: 100%;
height: 100%;
object-fit: cover;
filter: none;
}
.rd-print-ausweis__photo--empty {
background: linear-gradient(135deg, #B56A34 0%, #F4E3D2 100%);
}
.rd-print-ausweis__name-block { min-width: 0; flex: 1 1 auto; }
.rd-print-ausweis__eyebrow {
margin: 0 0 0.5mm;
font-size: 7pt;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-accent-strong, #944F22);
}
.rd-print-ausweis__eyebrow--alert {
color: #C23B2E;
font-size: 9pt;
}
.rd-print-ausweis__eyebrow-en {
margin: 0.5mm 0 0;
font-size: 7.5pt;
color: #6B6B6B;
font-style: italic;
text-align: center;
}
.rd-print-ausweis__name {
margin: 0;
font-size: 14pt;
font-weight: 800;
line-height: 1.1;
color: #2a2a2a;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.rd-print-ausweis__body {
padding: 2mm 3mm;
display: grid;
align-content: start;
gap: 1mm;
}
.rd-print-ausweis__body--front {
grid-template-columns: 1fr auto;
grid-template-rows: auto auto 1fr;
gap: 1mm 3mm;
}
.rd-print-ausweis__body--back {
grid-template-columns: 1fr;
gap: 1.5mm;
align-content: center;
}
.rd-print-ausweis__id-row {
display: flex;
align-items: baseline;
gap: 2mm;
grid-column: 1;
}
.rd-print-ausweis__id-label {
font-size: 7pt;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6B6B6B;
min-width: 10mm;
}
.rd-print-ausweis__id-value {
font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
font-size: 8pt;
font-weight: 500;
background: #F5EDE6;
padding: 0.3mm 1.5mm;
border-radius: 1mm;
letter-spacing: 0.02em;
}
.rd-print-ausweis__qr {
grid-column: 2;
grid-row: 1 / span 3;
align-self: center;
width: 18mm;
height: 18mm;
display: flex;
align-items: center;
justify-content: center;
}
.rd-print-ausweis__qr svg {
width: 100%;
height: 100%;
display: block;
}
.rd-print-ausweis__contact {
text-align: center;
margin-bottom: 1mm;
}
.rd-print-ausweis__tel {
display: inline-block;
font-size: 14pt;
font-weight: 800;
color: #C23B2E;
text-decoration: none;
letter-spacing: 0.01em;
}
.rd-print-ausweis__contact-name {
margin: 0.5mm 0 0;
font-size: 8pt;
color: var(--rd-text, #1A1A1A);
font-weight: 500;
}
.rd-print-ausweis__medical {
margin: 0;
display: grid;
grid-template-columns: 18mm 1fr;
gap: 0.5mm 2mm;
font-size: 7pt;
line-height: 1.25;
}
.rd-print-ausweis__medical dt {
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6B6B6B;
}
.rd-print-ausweis__medical dd {
margin: 0;
color: #2a2a2a;
}
.rd-print-ausweis__foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1mm 3mm 1.5mm;
border-top: 0.4mm solid #e5ddd7;
font-size: 6.5pt;
color: #6B6B6B;
}
.rd-print-ausweis__brand {
font-weight: 700;
color: var(--rd-accent-strong, #944F22);
letter-spacing: 0.02em;
}
.rd-print-ausweis__scan-hint,
.rd-print-ausweis__url {
font-style: italic;
}
/* ─── Vermisst-Flyer A5 ────────────────────────────────────────────────── */
.rd-print-flyer {
width: 148mm;
height: 210mm;
background: #ffffff;
color: #2a2a2a;
padding: 8mm 10mm;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14);
display: grid;
grid-template-rows: auto auto auto auto auto 1fr;
gap: 4mm;
page-break-inside: avoid;
break-inside: avoid;
position: relative;
}
.rd-print-flyer__head { text-align: center; }
.rd-print-flyer__headline {
margin: 0;
font-size: 48pt;
font-weight: 900;
line-height: 1;
letter-spacing: 0.02em;
color: #C23B2E;
}
.rd-print-flyer__sub {
margin: 2mm 0 0;
font-size: 11pt;
font-weight: 500;
color: var(--rd-text, #1A1A1A);
}
.rd-print-flyer__photo-wrap {
width: 100%;
height: 80mm;
background: #eee7df;
border-radius: 2mm;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.rd-print-flyer__photo {
width: 100%;
height: 100%;
object-fit: cover;
}
.rd-print-flyer__photo--empty {
width: 100%;
height: 100%;
background: linear-gradient(135deg, #B56A34 0%, #F4E3D2 100%);
}
.rd-print-flyer__id { text-align: center; }
.rd-print-flyer__name {
margin: 0;
font-size: 22pt;
font-weight: 800;
line-height: 1.1;
color: #2a2a2a;
}
.rd-print-flyer__steckbrief {
margin: 1.5mm 0 0;
font-size: 10pt;
color: #6B6B6B;
}
.rd-print-flyer__facts {
margin: 0;
display: grid;
grid-template-columns: 38mm 1fr;
gap: 1mm 3mm;
font-size: 10pt;
line-height: 1.35;
}
.rd-print-flyer__facts dt {
font-weight: 700;
text-transform: uppercase;
font-size: 8pt;
letter-spacing: 0.05em;
color: #6B6B6B;
}
.rd-print-flyer__facts dd { margin: 0; }
.rd-print-flyer__reward {
font-weight: 700;
color: var(--rd-accent-strong, #944F22);
}
.rd-print-flyer__contact {
background: #fff5f3;
border: 0.6mm solid #C23B2E;
border-radius: 2mm;
padding: 3mm 4mm;
text-align: center;
}
.rd-print-flyer__contact-label {
margin: 0;
font-size: 9pt;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #C23B2E;
}
.rd-print-flyer__tel {
margin: 2mm 0 0;
font-size: 26pt;
line-height: 1;
font-weight: 800;
}
.rd-print-flyer__tel a {
color: #C23B2E;
text-decoration: none;
letter-spacing: 0.02em;
}
.rd-print-flyer__tel-name {
margin: 1.5mm 0 0;
font-size: 10pt;
color: var(--rd-text, #1A1A1A);
}
.rd-print-flyer__foot {
display: grid;
grid-template-columns: 28mm 1fr;
align-items: center;
gap: 4mm;
padding-top: 3mm;
border-top: 0.4mm solid #e5ddd7;
}
.rd-print-flyer__qr {
width: 28mm;
height: 28mm;
display: flex;
align-items: center;
justify-content: center;
}
.rd-print-flyer__qr svg {
width: 100%;
height: 100%;
display: block;
}
.rd-print-flyer__foot-text {
display: flex;
flex-direction: column;
gap: 0.5mm;
font-size: 9pt;
line-height: 1.3;
}
.rd-print-flyer__brand {
margin: 0;
font-weight: 800;
font-size: 12pt;
color: var(--rd-accent-strong, #944F22);
}
.rd-print-flyer__url {
margin: 0;
font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
font-size: 8.5pt;
color: var(--rd-text, #1A1A1A);
word-break: break-all;
}
.rd-print-flyer__note {
margin: 0;
font-size: 8pt;
font-style: italic;
color: #6B6B6B;
}
/* ─── Halter-Notfallkarte CR80 bilingual ──────────────────────────────── */
.rd-print-halterkarte {
width: 85.6mm;
height: 53.98mm;
background: #ffffff;
color: #2a2a2a;
border-radius: 3mm;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
display: grid;
grid-template-rows: auto 1fr auto;
overflow: hidden;
page-break-inside: avoid;
break-inside: avoid;
}
.rd-print-halterkarte + .rd-print-halterkarte {
margin-top: 12px;
}
.rd-print-halterkarte__head {
padding: 2.5mm 3mm 1.5mm;
border-bottom: 0.4mm solid #e5ddd7;
text-align: center;
}
.rd-print-halterkarte__eyebrow {
margin: 0;
font-size: 8.5pt;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--rd-accent-strong, #944F22);
}
.rd-print-halterkarte__eyebrow--alert { color: #C23B2E; }
.rd-print-halterkarte__owner {
margin: 0.5mm 0 0;
font-size: 9pt;
font-weight: 600;
color: #2a2a2a;
}
.rd-print-halterkarte__body {
padding: 2mm 3mm;
display: flex;
flex-direction: column;
gap: 1.5mm;
font-size: 7.5pt;
line-height: 1.3;
}
.rd-print-halterkarte__intro {
margin: 0;
font-size: 7.5pt;
color: var(--rd-text, #1A1A1A);
text-align: center;
}
.rd-print-halterkarte__contacts {
display: flex;
flex-direction: column;
gap: 1.4mm;
}
.rd-print-halterkarte__section {
display: flex;
flex-direction: column;
gap: 0.6mm;
}
.rd-print-halterkarte__section-title {
margin: 0 0 0.2mm;
font-size: 6.5pt;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #6B6B6B;
}
.rd-print-halterkarte__entry {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: 0.3mm 2mm;
}
.rd-print-halterkarte__person {
flex: 1 1 auto;
min-width: 0;
font-size: 7.5pt;
color: #2a2a2a;
}
.rd-print-halterkarte__name {
font-weight: 600;
}
.rd-print-halterkarte__rel {
margin-left: 0.6mm;
font-size: 6.5pt;
color: #6B6B6B;
font-style: italic;
}
.rd-print-halterkarte__tel {
flex: 0 0 auto;
font-family: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
font-size: 8pt;
font-weight: 700;
color: #8B1F17;
text-decoration: none;
white-space: nowrap;
text-align: right;
}
.rd-print-halterkarte__foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1mm 3mm 1.5mm;
border-top: 0.4mm solid #e5ddd7;
font-size: 6.5pt;
color: #6B6B6B;
}
.rd-print-halterkarte__brand {
font-weight: 700;
color: var(--rd-accent-strong, #944F22);
letter-spacing: 0.02em;
}
.rd-print-halterkarte__lang {
font-weight: 700;
font-size: 7pt;
background: #F5EDE6;
padding: 0.3mm 1.5mm;
border-radius: 1mm;
letter-spacing: 0.08em;
}
.rd-print-halterkarte__empty {
width: 85.6mm;
padding: 6mm;
background: #fff7ed;
border: 1px dashed #f59e0b;
border-radius: 3mm;
font-size: 12px;
line-height: 1.5;
}
.rd-print-halterkarte__empty p { margin: 0 0 6px; }
.rd-print-halterkarte__empty p:last-child { margin: 0; }
.rd-print-halterkarte__empty-note { color: #6B6B6B; font-size: 11px; }
/* ─── @media print: alles außer der Karte ausblenden ──────────────────── */
@media print {
html, body {
background: #ffffff !important;
margin: 0 !important;
padding: 0 !important;
}
body.rd-print .rd-print-wrapper {
padding: 0 !important;
gap: 0 !important;
min-height: 0 !important;
display: block !important;
}
body.rd-print .rd-print-wrapper__controls,
body.rd-print .rd-print-wrapper__hint,
body.rd-print .rd-print-halterkarte__empty {
display: none !important;
}
/* Seitenwechsel zwischen Karten */
.rd-print-ausweis,
.rd-print-halterkarte {
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
page-break-after: always;
break-after: page;
}
.rd-print-ausweis:last-of-type,
.rd-print-halterkarte:last-of-type {
page-break-after: auto;
break-after: auto;
}
.rd-print-flyer {
box-shadow: none !important;
border-radius: 0 !important;
margin: 0 !important;
width: 148mm !important;
height: 210mm !important;
}
}
/* ==========================================================================
EINTRAG SINGLE — v3-Refactor 2026-04-25
Vorlage: Claude-Design `eintrag.html` (zweispaltiger Header, Logo-Stage,
Sticky Section-Nav, Key-Facts-Strip, Content+Sidebar, Galerie, Sidebar-Cards)
========================================================================== */
/* Breadcrumb */
.rd-eintrag__breadcrumb {
font-size: 13px; color: var(--rd-text-secondary, #595959);
padding: 14px 0 6px; background: var(--rd-bg, #FBF7F2);
border-bottom: 1px solid var(--rd-border, #E5DDD7);
}
.rd-eintrag__breadcrumb a { color: inherit; text-decoration: none; }
.rd-eintrag__breadcrumb a:hover { color: var(--rd-accent, #B56A34); }
.rd-eintrag__breadcrumb span[aria-hidden] { margin: 0 6px; color: var(--rd-text-tertiary, #767676); }
/* Header — zweispaltig ab 720px */
.rd-eintrag__header {
background: var(--rd-bg-alt, #F4EDE4);
padding: 32px 0 28px;
border-bottom: 1px solid var(--rd-border, #E5DDD7);
}
.rd-eintrag__header-grid {
display: grid;
grid-template-columns: 1fr;
gap: 24px;
align-items: center;
}
@media (min-width: 720px) {
.rd-eintrag__header-grid {
grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr);
gap: 36px;
}
}
@media (min-width: 1100px) {
.rd-eintrag__header-grid {
grid-template-columns: minmax(0, 1.5fr) minmax(360px, 480px);
}
}
.rd-eintrag__title-block { min-width: 0; }
.rd-eintrag__pills {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px;
}
.rd-eintrag__pill {
padding: 4px 12px; border-radius: 9999px;
font: 700 12px/1 'Inter', system-ui, sans-serif;
text-transform: uppercase; letter-spacing: 0.06em;
display: inline-flex; align-items: center; gap: 5px;
}
.rd-eintrag__pill--art {
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
}
.rd-eintrag__pill--verified {
background: #FFF; color: #1F8A5B;
border: 1px solid var(--rd-border, #E5DDD7);
text-transform: none; letter-spacing: 0;
font-size: 12px; font-weight: 600;
}
/* Trust-Spec 3.2 — drei sichtbare Profil-Status-Logiken (2026-04-29) */
.rd-eintrag__pill--claimed {
background: #FFF; color: #4A6E80;
border: 1px solid var(--rd-border, #E5DDD7);
text-transform: none; letter-spacing: 0;
font-size: 12px; font-weight: 600;
}
.rd-eintrag__pill--basis {
background: #F5F0E8; color: #6B6B6B;
border: 1px solid var(--rd-border, #E5DDD7);
text-transform: none; letter-spacing: 0;
font-size: 12px; font-weight: 500;
}
.rd-eintrag__pill--member {
background: #FFF7E0; color: #8a6a1f;
border: 1px solid #f0d97a;
}
.rd-eintrag__name {
font: 800 clamp(34px, 6vw, 56px)/1.05 'Inter', system-ui, sans-serif;
letter-spacing: -0.03em;
margin: 0 0 14px;
color: var(--rd-text, #1A1A1A);
text-wrap: balance;
}
.rd-eintrag__tagline {
margin: 0;
font: 500 22px/1.35 'Inter', system-ui, sans-serif;
letter-spacing: -0.01em;
color: var(--rd-text-secondary, #595959);
max-width: 560px;
text-wrap: pretty;
}
.rd-eintrag__meta {
display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
margin-top: 22px;
font-size: 13px; color: var(--rd-text-secondary, #595959);
}
.rd-eintrag__meta-sep {
width: 3px; height: 3px; border-radius: 50%;
background: var(--rd-border-strong, #CDBFB3);
display: inline-block;
}
.rd-eintrag__meta-item--urgent {
color: #C23B2E; font-weight: 600;
}
/* Logo-Stage — weisse Bühne mit object-fit: contain */
.rd-eintrag__logo-stage {
background: #FFF;
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: 20px;
box-shadow: 0 4px 12px rgba(20,19,17,0.06), 0 8px 24px rgba(20,19,17,0.05);
aspect-ratio: 4 / 3;
max-height: 320px;
padding: clamp(12px, 2vw, 20px);
display: grid; place-items: center;
width: 100%;
overflow: hidden;
justify-self: end;
}
.rd-eintrag__logo-stage img {
max-width: 100%; max-height: 100%;
object-fit: contain; display: block;
}
.rd-eintrag__logo-initials {
font: 800 clamp(60px, 10vw, 96px)/1 'Inter', system-ui, sans-serif;
letter-spacing: -0.04em;
color: var(--rd-accent-strong, #944F22);
}
/* Sticky Section-Nav */
.rd-eintrag__section-nav {
position: sticky; top: 0; z-index: 10;
background: rgba(251, 247, 242, 0.92);
backdrop-filter: blur(8px);
border-top: 1px solid var(--rd-border, #E5DDD7);
border-bottom: 1px solid var(--rd-border, #E5DDD7);
}
@media (min-width: 960px) {
.rd-eintrag__section-nav { top: 76px; }
}
.rd-eintrag__section-nav-inner {
display: flex; gap: 8px; padding: 12px 0;
overflow-x: auto; scrollbar-width: none;
}
.rd-eintrag__section-nav-inner::-webkit-scrollbar { display: none; }
.rd-eintrag__section-tab {
padding: 10px 16px; border-radius: 9999px;
background: transparent; color: var(--rd-text-secondary, #595959);
border: 1px solid var(--rd-border, #E5DDD7);
font: 600 13px/1 'Inter', system-ui, sans-serif;
white-space: nowrap; text-decoration: none;
transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.rd-eintrag__section-tab:hover {
border-color: var(--rd-text, #1A1A1A); color: var(--rd-text, #1A1A1A);
}
.rd-eintrag__section-tab--active {
background: var(--rd-text, #1A1A1A);
color: var(--rd-bg, #FBF7F2);
border-color: var(--rd-text, #1A1A1A);
}
/* Key-Facts-Strip */
.rd-eintrag__key-facts {
padding: 32px 0 8px;
}
.rd-eintrag__key-facts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: 12px;
}
.rd-eintrag__key-fact {
background: #FFF;
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: 12px;
padding: 14px 16px;
}
.rd-eintrag__key-fact-label {
font: 700 11px/1 'Inter', system-ui, sans-serif;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--rd-text-tertiary, #767676);
margin-bottom: 4px;
}
.rd-eintrag__key-fact-val {
font: 700 18px/1.2 'Inter', system-ui, sans-serif;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A);
}
/* Content + Sidebar */
.rd-eintrag__body { padding: 32px 0 48px; }
.rd-eintrag__content-grid {
display: grid;
grid-template-columns: 1fr;
gap: 32px;
align-items: start;
}
@media (min-width: 960px) {
.rd-eintrag__content-grid {
grid-template-columns: 1fr 320px;
gap: 48px;
}
.rd-eintrag__sidebar {
position: sticky; top: 140px; align-self: start;
display: flex; flex-direction: column; gap: 16px;
}
}
@media (min-width: 1200px) {
.rd-eintrag__content-grid { grid-template-columns: 1fr 380px; }
}
.rd-eintrag__main { min-width: 0; }
/* Section-Block (Über, Leistungen, Galerie, …) */
.rd-eintrag__section { margin-bottom: 40px; scroll-margin-top: 140px; }
.rd-eintrag__section-title {
font: 700 28px/1.2 'Inter', system-ui, sans-serif;
letter-spacing: -0.02em;
color: var(--rd-text, #1A1A1A);
margin: 0 0 16px;
}
.rd-eintrag__eyebrow {
font: 700 11px/1 'Inter', system-ui, sans-serif;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--rd-text-tertiary, #767676);
margin-bottom: 12px;
}
.rd-eintrag__section-header {
display: flex; justify-content: space-between; align-items: baseline;
margin-bottom: 16px; gap: 12px; flex-wrap: wrap;
}
.rd-eintrag__section-link {
font: 600 13px/1 'Inter', system-ui, sans-serif;
color: var(--rd-accent-strong, #944F22);
text-decoration: none; white-space: nowrap;
}
.rd-eintrag__section-link:hover { text-decoration: underline; }
/* Über-Body */
.rd-eintrag__about {
font: 400 17px/1.7 'Inter', system-ui, sans-serif;
color: var(--rd-text, #1A1A1A);
max-width: 680px;
text-wrap: pretty;
}
.rd-eintrag__about p:first-child { margin-top: 0; }
/* Leistungen — Pills + Feature-Grid */
.rd-eintrag__pill-list {
display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px;
}
.rd-eintrag__service-pill {
padding: 8px 16px; border-radius: 9999px;
background: #FFF; color: var(--rd-text, #1A1A1A);
border: 1px solid var(--rd-border, #E5DDD7);
font: 600 14px/1 'Inter', system-ui, sans-serif;
}
.rd-eintrag__feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 8px 16px;
margin-top: 16px;
}
.rd-eintrag__feature {
display: flex; align-items: center; gap: 8px;
font-size: 14px; color: var(--rd-text, #1A1A1A);
}
.rd-eintrag__feature-check {
width: 22px; height: 22px; border-radius: 50%;
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
display: grid; place-items: center; flex-shrink: 0;
font-weight: 700; font-size: 12px;
}
.rd-eintrag__highlight {
margin-top: 16px; padding: 14px 16px;
background: var(--rd-accent-soft, #F4E3D2);
border-left: 3px solid var(--rd-accent-strong, #944F22);
border-radius: 8px;
font-size: 14px; color: var(--rd-accent-strong, #944F22);
}
/* W47: Verband-Strip (Mitgliedschaften, Trust-Beleg zwischen Header und Section-Nav) */
.rd-eintrag__verband-strip {
background: var(--rd-bg-soft, #FFFFFF);
border-top: 1px solid var(--rd-border, #E5DDD7);
border-bottom: 1px solid var(--rd-border, #E5DDD7);
padding: 18px 0;
}
.rd-eintrag__verband-eyebrow {
font: 600 11px/1 'Inter', system-ui, sans-serif;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--rd-text-secondary, #595959);
margin-bottom: 12px;
}
.rd-eintrag__verband-list {
display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
}
.rd-eintrag__verband-item {
display: inline-flex; align-items: center; justify-content: center;
width: 60px; height: 60px;
background: #FFF;
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: 8px;
padding: 6px;
text-decoration: none;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rd-eintrag__verband-item:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.rd-eintrag__verband-item img {
max-width: 100%; max-height: 100%; object-fit: contain;
}
.rd-eintrag__verband-fallback {
font: 600 9px/1.1 'Inter', system-ui, sans-serif;
color: var(--rd-text, #1A1A1A);
text-align: center;
padding: 4px;
word-break: break-word;
}
/* W47: Feature-Chips (eintrag-feature Tax-Terms im Leistungen-Block) */
.rd-eintrag__feature-chips {
display: flex; flex-wrap: wrap; gap: 8px;
margin-top: 16px; margin-bottom: 4px;
}
.rd-eintrag__feature-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 6px 12px; border-radius: 9999px;
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
border: 1px solid transparent;
font: 600 13px/1 'Inter', system-ui, sans-serif;
text-decoration: none;
transition: background 0.15s ease, border-color 0.15s ease;
}
.rd-eintrag__feature-chip:hover {
background: #FFF;
border-color: var(--rd-accent-strong, #944F22);
}
.rd-eintrag__feature-chip-check {
font-weight: 700; font-size: 11px;
}
/* W47: Team-Section (Mitarbeiter-Repeater) */
.rd-eintrag__team-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 16px;
margin-top: 12px;
}
.rd-eintrag__team-card {
display: flex; flex-direction: column;
background: #FFF;
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: 12px;
overflow: hidden;
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.rd-eintrag__team-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0,0,0,0.09);
}
.rd-eintrag__team-photo {
position: relative;
aspect-ratio: 1 / 1;
background: var(--rd-bg-alt, #F4EDE4);
display: grid; place-items: center;
overflow: hidden;
}
.rd-eintrag__team-photo img {
width: 100%; height: 100%; object-fit: cover;
}
.rd-eintrag__team-initials {
font: 700 36px/1 'Inter', system-ui, sans-serif;
color: var(--rd-text-secondary, #595959);
}
.rd-eintrag__team-body {
padding: 12px 14px;
}
.rd-eintrag__team-name {
font: 600 15px/1.3 'Inter', system-ui, sans-serif;
color: var(--rd-text, #1A1A1A);
}
.rd-eintrag__team-position {
font: 400 13px/1.3 'Inter', system-ui, sans-serif;
color: var(--rd-text-secondary, #595959);
margin-top: 4px;
}
.rd-eintrag__team-links {
display: flex; gap: 8px; margin-top: 10px;
}
.rd-eintrag__team-link {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px;
border-radius: 50%;
background: var(--rd-bg-alt, #F4EDE4);
color: var(--rd-text, #1A1A1A);
text-decoration: none;
font: 700 12px/1 'Inter', system-ui, sans-serif;
transition: background 0.15s ease;
}
.rd-eintrag__team-link:hover {
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
}
/* Galerie — 3-Col mit Lead 2x */
.rd-eintrag__gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.rd-eintrag__gallery-item {
display: block; aspect-ratio: 1/1;
border-radius: 8px; overflow: hidden;
background: var(--rd-border, #E5DDD7);
}
.rd-eintrag__gallery-item img {
width: 100%; height: 100%; object-fit: cover;
transition: transform 0.3s;
}
.rd-eintrag__gallery-item:hover img { transform: scale(1.04); }
.rd-eintrag__gallery-item--lead {
aspect-ratio: 2/1; grid-column: span 2;
}
@media (max-width: 600px) {
.rd-eintrag__gallery { grid-template-columns: repeat(2, 1fr); }
.rd-eintrag__gallery-item--lead { grid-column: span 2; aspect-ratio: 16/9; }
}
/* Events-Cards (im Eintrag-Single) */
.rd-eintrag__events-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 12px;
}
.rd-eintrag__event-card {
display: flex; gap: 12px; padding: 12px;
background: #FFF; border: 1px solid var(--rd-border, #E5DDD7);
border-radius: 12px; text-decoration: none; color: inherit;
transition: border-color 0.15s, transform 0.15s;
}
.rd-eintrag__event-card:hover {
border-color: var(--rd-text, #1A1A1A); transform: translateY(-2px);
}
.rd-eintrag__event-image {
width: 84px; aspect-ratio: 1/1; border-radius: 8px;
background-size: cover; background-position: center;
background-color: var(--rd-bg-alt, #F4EDE4);
flex-shrink: 0;
}
.rd-eintrag__event-body { flex: 1; min-width: 0; }
.rd-eintrag__event-cat {
font: 700 11px/1 'Inter', system-ui, sans-serif;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--rd-accent-strong, #944F22); margin-bottom: 6px;
}
.rd-eintrag__event-title {
font: 700 15px/1.25 'Inter', system-ui, sans-serif;
letter-spacing: -0.01em; margin: 0 0 4px;
}
.rd-eintrag__event-date { font-size: 12px; color: var(--rd-text-secondary, #595959); }
/* Beitrags-Cards */
.rd-eintrag__posts-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 16px;
}
.rd-eintrag__post-card {
display: flex; flex-direction: column; gap: 10px;
text-decoration: none; color: inherit;
background: #FFF; border: 1px solid var(--rd-border, #E5DDD7);
border-radius: 12px; overflow: hidden;
transition: transform 0.15s, border-color 0.15s;
}
.rd-eintrag__post-card:hover { transform: translateY(-2px); border-color: var(--rd-text, #1A1A1A); }
.rd-eintrag__post-image {
aspect-ratio: 16/9;
background-size: cover; background-position: center;
background-color: var(--rd-bg-alt, #F4EDE4);
}
.rd-eintrag__post-body { padding: 14px 16px 18px; }
.rd-eintrag__post-cat {
font: 700 11px/1 'Inter', system-ui, sans-serif;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--rd-text-tertiary, #767676); margin-bottom: 6px;
}
.rd-eintrag__post-title {
font: 700 18px/1.25 'Inter', system-ui, sans-serif;
letter-spacing: -0.01em; margin: 0;
}
/* Sidebar-Cards */
.rd-eintrag__sidebar-card {
background: #FFF;
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: 16px;
padding: 20px;
}
.rd-eintrag__sidebar-card--social { background: var(--rd-bg-alt, #F4EDE4); }
.rd-eintrag__sidebar-card--cta {
background: var(--rd-accent-soft, #F4E3D2);
border-color: var(--rd-accent, #B56A34);
}
.rd-eintrag__contact-name {
font: 700 16px/1.3 'Inter', system-ui, sans-serif;
letter-spacing: -0.01em; margin-bottom: 4px;
}
.rd-eintrag__contact-addr {
font-size: 14px; color: var(--rd-text-secondary, #595959);
line-height: 1.6; margin-bottom: 16px;
}
.rd-eintrag__contact-actions { display: flex; flex-direction: column; gap: 8px; }
.rd-eintrag__contact-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px 14px; border-radius: 12px;
background: var(--rd-bg, #FBF7F2); color: var(--rd-text, #1A1A1A);
border: 1px solid var(--rd-border-strong, #CDBFB3);
font: 700 14px/1 'Inter', system-ui, sans-serif;
text-decoration: none; cursor: pointer;
transition: background-color 0.15s, border-color 0.15s;
}
.rd-eintrag__contact-btn:hover {
background: var(--rd-bg-alt, #F4EDE4);
border-color: var(--rd-text, #1A1A1A);
}
.rd-eintrag__contact-btn--primary {
background: var(--rd-text, #1A1A1A); color: #FFF;
border-color: var(--rd-text, #1A1A1A);
}
.rd-eintrag__contact-btn--primary:hover {
background: #000; border-color: #000;
}
.rd-eintrag__contact-btn--urgent {
background: #FFF1EE; color: #C23B2E;
border-color: #f3c2bc;
}
.rd-eintrag__contact-row { display: flex; gap: 8px; }
.rd-eintrag__contact-row .rd-eintrag__contact-btn {
flex: 1; padding: 10px 12px; font-size: 13px;
}
/* Social-Liste */
.rd-eintrag__social-list { list-style: none; padding: 0; margin: 0; }
.rd-eintrag__social-list li { margin-bottom: 4px; }
.rd-eintrag__social-list a {
display: flex; gap: 10px; align-items: center;
padding: 8px 0; font-size: 13px;
color: var(--rd-text, #1A1A1A); text-decoration: none;
}
.rd-eintrag__social-list a:hover { color: var(--rd-accent-strong, #944F22); }
.rd-eintrag__social-ico {
width: 28px; height: 28px; border-radius: 6px;
background: #FFF; border: 1px solid var(--rd-border, #E5DDD7);
display: grid; place-items: center;
font: 700 11px/1 'Inter', system-ui, sans-serif;
flex-shrink: 0;
}
/* CTA-Card */
.rd-eintrag__cta-eyebrow {
font: 700 11px/1 'Inter', system-ui, sans-serif;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--rd-accent-strong, #944F22); margin-bottom: 8px;
}
.rd-eintrag__cta-title {
font: 700 17px/1.2 'Inter', system-ui, sans-serif;
letter-spacing: -0.01em; margin-bottom: 6px;
color: var(--rd-text, #1A1A1A);
}
.rd-eintrag__cta-lead {
margin: 0 0 12px; font-size: 13px; line-height: 1.5;
color: var(--rd-text-secondary, #595959);
}
.rd-eintrag__cta-btn {
width: 100%; display: block; text-align: center;
padding: 10px 14px; border-radius: 9999px;
background: var(--rd-accent-strong, #944F22); color: #FFF;
font: 700 13px/1 'Inter', system-ui, sans-serif;
text-decoration: none; cursor: pointer;
transition: background-color 0.15s;
}
.rd-eintrag__cta-btn:hover { background: var(--rd-text, #1A1A1A); }
/* Verwandte Einträge */
.rd-eintrag__related {
padding: 48px 0 56px;
background: var(--rd-bg-alt, #F4EDE4);
border-top: 1px solid var(--rd-border, #E5DDD7);
}
.rd-eintrag__related-header {
display: flex; justify-content: space-between; align-items: flex-end;
gap: 16px; flex-wrap: wrap; margin-bottom: 24px;
}
.rd-eintrag__related-all {
padding: 10px 18px; border-radius: 9999px;
background: var(--rd-text, #1A1A1A); color: var(--rd-bg, #FBF7F2);
font: 600 13px/1 'Inter', system-ui, sans-serif;
text-decoration: none;
}
.rd-eintrag__related-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
.rd-eintrag__related-card {
display: flex; flex-direction: column; gap: 10px;
background: var(--rd-bg, #FBF7F2);
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: 12px; padding: 12px;
text-decoration: none; color: inherit;
transition: transform 0.15s, border-color 0.15s;
}
.rd-eintrag__related-card:hover {
transform: translateY(-2px); border-color: var(--rd-text, #1A1A1A);
}
.rd-eintrag__related-thumb {
aspect-ratio: 16/9; border-radius: 8px; overflow: hidden;
background: var(--rd-accent-soft, #F4E3D2);
}
.rd-eintrag__related-thumb img {
width: 100%; height: 100%;
/* Welle-47 (2026-05-23): Renderer setzt explizit .rd-card-img bzw.
.rd-card-img--logo — die Klassen steuern object-fit/padding selbst.
Hier kein Fallback-Padding mehr (siehe Welle 2026-05-14: Ausflugsziel-
Hero-Bilder bekamen sonst einen 8px Logo-Rand). */
display: block;
}
.rd-eintrag__related-strip {
display: block; width: 100%; height: 6px;
background: var(--rd-accent, #B56A34); border-radius: 3px;
margin-top: 50%;
}
.rd-eintrag__related-cat {
font: 700 11px/1 'Inter', system-ui, sans-serif;
letter-spacing: 0.08em; text-transform: uppercase;
color: var(--rd-accent-strong, #944F22); margin-bottom: 6px;
}
.rd-eintrag__related-title {
font: 700 17px/1.25 'Inter', system-ui, sans-serif;
letter-spacing: -0.01em; margin: 0 0 4px;
}
.rd-eintrag__related-loc { font-size: 12px; color: var(--rd-text-secondary, #595959); }
/* === AUTHOR-ARCHIV (/author//) ========================================
* Profilkarte (Avatar + Bio + Sub-Rollen) plus Beiträge + weitere CPT-Sektionen.
* BEM-Wurzel: rd-author. Cards reused via rd-card aus archive-css.
*/
.rd-author { background: var(--rd-bg-page, #FDF9F6); padding: 32px 0 72px; }
.rd-author__container {
max-width: 1180px; margin: 0 auto; padding: 0 20px;
display: flex; flex-direction: column; gap: 48px;
}
.rd-author__hero {
display: grid;
grid-template-columns: 160px 1fr;
gap: 28px;
align-items: start;
background: #fff;
border: 1px solid var(--rd-border, #E5DDD7);
border-radius: 14px;
padding: 28px;
box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
@media (max-width: 640px) {
.rd-author__hero { grid-template-columns: 1fr; gap: 20px; text-align: left; }
}
.rd-author__avatar {
width: 160px; height: 160px; border-radius: 50%;
overflow: hidden; background: var(--rd-accent-soft, #F4E3D2);
border: 1px solid var(--rd-border, #E5DDD7);
}
.rd-author__avatar img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
.rd-author__intro { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.rd-author__kicker {
font: 600 12px/1 'Inter', system-ui, sans-serif;
letter-spacing: 0.12em; text-transform: uppercase;
color: var(--rd-text-secondary, #595959); margin: 0;
}
.rd-author__name {
font: 700 32px/1.15 'Inter', system-ui, sans-serif;
letter-spacing: -0.015em;
color: var(--rd-text, #1A1A1A); margin: 0;
}
.rd-author__badges {
list-style: none; padding: 0; margin: 4px 0 0;
display: flex; flex-wrap: wrap; gap: 6px;
}
.rd-author__badge {
display: inline-block;
font: 600 12px/1 'Inter', system-ui, sans-serif;
padding: 6px 10px; border-radius: 999px;
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-accent-strong, #944F22);
border: 1px solid rgba(181, 106, 52, 0.18);
}
.rd-author__bio {
font: 400 16px/1.55 'Inter', system-ui, sans-serif;
color: var(--rd-text, #1A1A1A);
}
.rd-author__bio p { margin: 0 0 0.7em; }
.rd-author__bio p:last-child { margin-bottom: 0; }
.rd-author__section { display: flex; flex-direction: column; gap: 18px; }
.rd-author__section-head {
display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
border-bottom: 1px solid var(--rd-border, #E5DDD7);
padding-bottom: 8px;
}
.rd-author__section-title {
font: 700 22px/1.2 'Inter', system-ui, sans-serif;
letter-spacing: -0.01em;
color: var(--rd-text, #1A1A1A); margin: 0;
}
.rd-author__section-count {
display: inline-block; margin-left: 8px;
font: 600 13px/1 'Inter', system-ui, sans-serif;
color: var(--rd-text-secondary, #595959);
background: var(--rd-accent-soft, #F4E3D2);
padding: 4px 8px; border-radius: 999px;
vertical-align: middle;
}
.rd-author__grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 20px;
}
.rd-author__chip {
display: inline-block;
font: 500 11px/1 'Inter', system-ui, sans-serif;
padding: 4px 8px; margin-right: 4px; border-radius: 4px;
background: var(--rd-accent-soft, #F4E3D2);
color: var(--rd-text-secondary, #595959);
}
.rd-author__more { margin: 8px 0 0; }
.rd-author__empty {
background: #fff; border: 1px dashed var(--rd-border, #E5DDD7);
border-radius: 12px; padding: 32px; text-align: center;
color: var(--rd-text-secondary, #595959);
}
/* ─────────────────────────────────────────────────────────────────────
* Mega-Menü «Wissen» — Pillar-Navigation
*
* Markup: template-parts/header-mega-menu.php
* Quelle: rundum_get_pillars_by_thema() in inc/pillar-navigation.php
*
* Variants per Container:
* .rd-site-header__main-nav .rd-mega-menu → Desktop-Dropdown
* .rd-mobile-drawer__mega .rd-mega-menu → Mobile-Akkordeon
*
* Token-Konvention v3 (siehe Memory `feedback_token_drift_bem_css`):
* --rd-text, --rd-text-secondary, --rd-accent, --rd-accent-strong, --rd-accent-soft
* --rd-bg, --rd-bg-alt, --rd-bg-soft, --rd-bg-inverse
* --rd-border, --rd-border-strong
* --rd-shadow-md, --rd-r-md, --rd-r-lg
* ──────────────────────────────────────────────────────────────────── */
.rd-mega-menu { position: relative; display: inline-block; }
.rd-mega-menu__trigger {
display: inline-flex; align-items: center; gap: 6px;
background: transparent; border: 0;
padding: 8px 12px;
font: 600 14px/1 'Inter', system-ui, sans-serif;
color: var(--rd-text, #1A1A1A);
cursor: pointer;
border-radius: var(--rd-r-md, 12px);
transition: background-color 160ms ease, color 160ms ease;
text-decoration: none; /* trigger ist seit W14 ein , kein