/* ==========================================================================
   journal.css — Journal auf raumkult.eu (/journal/), gebaut von social-feed/bauen_journal.py
   Version: 1.0 | 2026-10-11 | KAI Engineering
   Grundlage: Vorschau social-feed/vorschau/social-feed-vorschau.html (Runde 2, von Kai abgenommen).
   Regel (Skill rauMKult-Webseiten): Token, Knöpfe (.rk-btn), Fenster (.rk-mac) und Wow-Bausteine (.rk-wow-*)
   kommen aus main-v2.css und rk-wow.css der Website (über die Seitenhülle geladen) und werden hier NICHT kopiert.
   Hier stehen nur:
     1. die Komponentenfamilie jr-chip (zum späteren zentralen Übernehmen in rk-wow.css/main-v2.css),
     2. die Anordnung der Journal-Seiten mit Präfix jf-.
   Feste Farbwerte nur als dokumentierte Variablen mit Präfix --jr- und --jf-. Kein Gold in Knöpfen, Orange nur als feine Linie.
   ========================================================================== */

:root {
  /* jr-chip (Kanal / Format / Thema / Alle / Link / kompakt) */
  --jr-chip-h: 56px; --jr-chip-h-kompakt: 48px;
  --jr-chip-r: 16px; --jr-chip-gap: 12px; --jr-chip-pad-l: 6px; --jr-chip-pad-r: 18px;
  --jr-scheibe: 44px; --jr-scheibe-kompakt: 36px; --jr-scheibe-r: 12px;
  --jr-logo: 26px; --jr-logo-kompakt: 22px;
  --jr-chip-bg: var(--surface-card); --jr-chip-line: var(--rk-wow-line-strong); --jr-chip-fs: var(--rk-fs-meta);
  --jr-scheibe-bg: #ffffff; --jr-scheibe-ink: #1a1a18; --jr-scheibe-ring: rgba(17, 18, 16, .08); --jr-piko-bg: #f4f4f2;
  --jr-marke: var(--text-primary); --jr-ring: var(--accent-orange);
  --jr-dur: .5s; --jr-dur-ring: .75s; --jr-ease: cubic-bezier(.23, 1, .32, 1);
  /* Seite */
  --jf-rand: 16px; --jf-max: 1320px; --jf-luecke: 12px; --jf-zeile: 8px; --jf-kopf-abstand: 96px;
  --jf-schleier: rgba(8, 8, 8, .82); --jf-punkt: rgba(250, 250, 247, .55); --jf-punkt-rand: rgba(0, 0, 0, .15);
  --jf-video-bg: #000000; --jf-schatten-text: rgba(0, 0, 0, .4);
}
@media (min-width: 700px) { :root { --jf-rand: 32px; --jf-luecke: 20px; } }
[data-theme="dark"] { --jr-piko-bg: #2a2a27; --jr-scheibe-ring: rgba(255, 255, 255, .10); }
.rk-wow-dark { --jr-chip-bg: var(--rk-wow-dark-card); --jr-chip-line: var(--rk-wow-dark-line-strong); --jr-piko-bg: #2a2a27; --jr-scheibe-ring: rgba(255, 255, 255, .10); }

/* ═════════════ Komponentenfamilie jr-chip ═════════════
   <button class="jr-chip jr-chip--kanal" style="--jr-marke:#0866ff" aria-pressed="false">
     <span class="jr-chip__scheibe"><img class="jr-chip__logo" alt=""></span><span class="jr-chip__text">Facebook</span>
     <span class="jr-chip__zahl">7</span><span class="jr-chip__haken"><svg/></span></button>
   Varianten: --kanal (offizielles Logo auf weißer Scheibe) · --format (eigenes Piktogramm) · --thema (rundes Foto-Medaillon) ·
   --alle (Raster-Symbol) · --link (a-Element zum Profil, Pfeil nach außen) · --kompakt (48 px).
   Zustände: Ruhe · Überfahren (hebt sich, Leuchtkante in --jr-marke) · Fokus · gewählt [aria-pressed=true] (invertiert + Haken) ·
   .is-gewaehlt (einmalige Ring- und Piktogramm-Bewegung, 0,75 s). Logos werden nie bewegt, umgefärbt oder beschnitten. */
.jr-chip { --_h: var(--jr-chip-h); --_s: var(--jr-scheibe); --_l: var(--jr-logo);
  position: relative; isolation: isolate; flex: none; display: inline-flex; align-items: center; gap: var(--jr-chip-gap);
  min-height: var(--_h); padding: 0 var(--jr-chip-pad-r) 0 var(--jr-chip-pad-l); border: 1px solid var(--jr-chip-line); border-radius: var(--jr-chip-r);
  background: var(--jr-chip-bg); color: var(--text-primary); font: inherit; font-size: var(--jr-chip-fs); line-height: 1.2; text-decoration: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: transform var(--jr-dur) var(--jr-ease), box-shadow var(--jr-dur) var(--jr-ease), border-color var(--jr-dur) var(--jr-ease), background-color .3s var(--jr-ease), color .3s var(--jr-ease); }
.jr-chip--kompakt { --_h: var(--jr-chip-h-kompakt); --_s: var(--jr-scheibe-kompakt); --_l: var(--jr-logo-kompakt); --jr-chip-pad-r: 14px; gap: 10px; }
.jr-chip__scheibe { position: relative; flex: none; display: grid; place-items: center; width: var(--_s); height: var(--_s); border-radius: var(--jr-scheibe-r); background: var(--jr-scheibe-bg); box-shadow: inset 0 0 0 1px var(--jr-scheibe-ring); transition: transform var(--jr-dur) var(--jr-ease); }
.jr-chip__logo { width: var(--_l); height: var(--_l); object-fit: contain; display: block; }
.jr-chip__scheibe svg { width: calc(var(--_s) * .55); height: calc(var(--_s) * .55); fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; color: var(--jr-scheibe-ink); overflow: visible; }
.jr-chip__text { white-space: nowrap; }
.jr-chip__zahl { margin-left: -2px; min-width: 22px; padding: 1px 7px; border-radius: var(--rk-radius-pill); background: var(--surface-hover); color: var(--text-secondary); font-size: var(--rk-fs-xs); text-align: center; font-variant-numeric: tabular-nums; transition: background-color .3s, color .3s; }
.jr-chip__haken { position: absolute; z-index: 2; left: calc(var(--jr-chip-pad-l) + var(--_s) - 12px); top: calc(50% - var(--_s) / 2 - 6px); display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--rk-btn-primary-fg); color: var(--rk-btn-primary-bg); box-shadow: 0 0 0 2px var(--rk-btn-primary-bg); opacity: 0; transform: scale(.4); transition: opacity .25s, transform .35s var(--jr-ease); }
.jr-chip__haken svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.jr-chip__raus { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .6; transition: transform var(--jr-dur) var(--jr-ease), opacity .3s; }
@property --jr-winkel { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.jr-chip__scheibe::after { content: ""; position: absolute; inset: -4px; border-radius: calc(var(--jr-scheibe-r) + 4px); border: 2px solid var(--jr-ring); opacity: 0; pointer-events: none;
  -webkit-mask: conic-gradient(#000 var(--jr-winkel), transparent 0); mask: conic-gradient(#000 var(--jr-winkel), transparent 0); }
.jr-chip--kanal { --jr-ring: var(--jr-marke); }
.jr-chip--thema .jr-chip__scheibe, .jr-chip--thema .jr-chip__scheibe::after { border-radius: 50%; }
.jr-chip--thema .jr-chip__scheibe { overflow: hidden; background: var(--rk-wow-tint); }
.jr-chip--thema .jr-chip__scheibe::after { inset: 0; }
.jr-chip--thema .jr-chip__foto { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--jr-ease); }
.jr-chip--thema .jr-chip__scheibe::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--jr-scheibe-ring), inset 0 0 0 3px color-mix(in srgb, var(--jr-scheibe-bg) 35%, transparent); pointer-events: none; }
.jr-chip--format .jr-chip__scheibe, .jr-chip--alle .jr-chip__scheibe { background: var(--jr-piko-bg); }
.jr-chip--format .jr-chip__scheibe svg, .jr-chip--alle .jr-chip__scheibe svg { color: var(--text-primary); }
@media (hover: hover) {
  .jr-chip:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--jr-marke) 45%, var(--jr-chip-line)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--jr-marke) 18%, transparent), 0 12px 28px -16px color-mix(in srgb, var(--jr-marke) 60%, transparent), var(--rk-wow-sh-1); }
  .jr-chip:hover .jr-chip__scheibe { transform: scale(1.04); }
  .jr-chip--thema:hover .jr-chip__foto { transform: scale(1.14); }
  .jr-chip--link:hover .jr-chip__raus { transform: translate(2px, -2px); opacity: 1; }
}
.jr-chip:focus-visible { outline: 2px solid var(--rk-focus-color); outline-offset: 3px; box-shadow: var(--rk-focus-ring); }
.jr-chip:active { transform: translateY(1px) scale(.98); }
.jr-chip[aria-pressed="true"] { background: var(--rk-btn-primary-bg); color: var(--rk-btn-primary-fg); border-color: var(--rk-btn-primary-bg); box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--jr-marke) 70%, transparent); }
.jr-chip[aria-pressed="true"] .jr-chip__zahl { background: color-mix(in srgb, var(--rk-btn-primary-fg) 18%, transparent); color: var(--rk-btn-primary-fg); }
.jr-chip[aria-pressed="true"] .jr-chip__haken { opacity: 1; transform: scale(1); }
.jr-chip--format[aria-pressed="true"] .jr-chip__scheibe, .jr-chip--alle[aria-pressed="true"] .jr-chip__scheibe { background: var(--jr-scheibe-bg); }
.jr-chip--format[aria-pressed="true"] .jr-chip__scheibe svg, .jr-chip--alle[aria-pressed="true"] .jr-chip__scheibe svg { color: var(--jr-scheibe-ink); }
.jr-chip--alle[aria-pressed="true"] .jr-chip__haken { display: none; }
@keyframes jr-ring { 0% { --jr-winkel: 0deg; opacity: 1; } 70% { --jr-winkel: 360deg; opacity: 1; } 100% { --jr-winkel: 360deg; opacity: 0; } }
@keyframes jr-puls { 0% { transform: scale(1); } 35% { transform: scale(.88); } 70% { transform: scale(1.07); } 100% { transform: scale(1); } }
.jr-chip.is-gewaehlt .jr-chip__scheibe { animation: jr-puls .55s var(--jr-ease); }
.jr-chip.is-gewaehlt .jr-chip__scheibe::after { animation: jr-ring var(--jr-dur-ring) var(--jr-ease) forwards; }
@keyframes jr-play { 0%, 100% { transform: none; } 50% { transform: translateX(2px); } }
@keyframes jr-blaettern { 0%, 100% { transform: none; } 45% { transform: translateX(-3px); } }
@keyframes jr-sonne { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.5); } }
.jr-piko__a { transform-box: fill-box; transform-origin: center; }
.jr-chip.is-gewaehlt .jr-piko--reel .jr-piko__a { animation: jr-play .5s var(--jr-ease) 2; }
.jr-chip.is-gewaehlt .jr-piko--karussell .jr-piko__a { animation: jr-blaettern .6s var(--jr-ease); }
.jr-chip.is-gewaehlt .jr-piko--beitrag .jr-piko__a { animation: jr-sonne .55s var(--jr-ease); }
.jr-chipreihe { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
@media (max-width: 599px) {
  .jr-chipreihe--raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .jr-chipreihe--raster .jr-chip { width: 100%; }
  .jr-chipreihe--raster .jr-chip__raus { margin-left: auto; }
}

/* ═════════════ Seite „Journal“ (Präfix jf-, nur Anordnung) ═════════════ */
.jf { position: relative; }
.jf [hidden], .jf-dlg [hidden] { display: none !important; }
.jf-wrap { width: 100%; max-width: var(--jf-max); margin: 0 auto; padding: 0 var(--jf-rand) clamp(48px, 6vw, 96px); box-sizing: border-box; }
.jf-wrap > * { min-width: 0; }
.jf-pfad ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; margin: 0; padding: 12px 0 0; list-style: none; font-size: var(--rk-fs-sm); color: var(--text-muted); }
.jf-pfad li { display: inline-flex; align-items: center; min-width: 0; }
.jf-pfad li + li::before { content: "›"; margin-right: 8px; }
.jf-pfad a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--text-secondary); text-underline-offset: .2em; }
.jf-pfad [aria-current] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60vw; }
.jf-h2 { font-size: var(--rk-fs-h2); }
.jf-autor { margin: 0; font-size: var(--rk-fs-meta); color: var(--text-muted); }
.jf-folgen { display: grid; gap: 12px; padding-top: 18px; border-top: 1px solid var(--rk-line); }
.jf-folgen__titel { margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.jf-folgen__titel span { letter-spacing: .02em; text-transform: none; color: var(--text-muted); }

/* Einstieg (Seite 1) */
.jf-hero { display: grid; gap: clamp(28px, 4vw, 64px); align-items: center; padding: clamp(8px, 2vw, 24px) 0 clamp(56px, 7vw, 104px); }
.jf-hero > * { min-width: 0; }
.jf-hero .rk-wow-statement__title { font-size: clamp(2.3rem, 1.5rem + 3.6vw, 4.4rem); hyphens: auto; }
.jf-hero__medium { margin: 0; position: relative; }
.jf-hero__medium::before { content: ""; position: absolute; inset: 10% -6% -6% 18%; border: 1px solid var(--accent); opacity: .35; transform: rotate(4deg); border-radius: var(--rk-radius-xs, 4px); pointer-events: none; }
.jf-hero__vgl { aspect-ratio: 958 / 840; }
.jf-hero__vgl .rk-wow-vergleich { min-height: 0; }
.jf-mac-knopf { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--rk-line-strong); border-radius: var(--rk-radius-pill); background: var(--surface-card); color: var(--text-primary); font: inherit; font-size: var(--rk-fs-sm); text-decoration: none; white-space: nowrap; transition: background-color var(--rk-t-base) var(--rk-ease), color var(--rk-t-base) var(--rk-ease); }
.jf-mac-knopf:hover { background: var(--rk-btn-primary-bg); color: var(--rk-btn-primary-fg); }
.jf-mac-knopf:focus-visible { outline: 2px solid var(--rk-focus-color); outline-offset: 2px; }
.jf-hero__unter { margin: 14px 4px 0; font-size: var(--rk-fs-sm); color: var(--text-muted); }
@media (min-width: 960px) { .jf-hero { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }
@media (max-width: 959px) { .jf-hero__medium::before { inset: 8% 0 -4% 30%; } }
@media (max-width: 599px) { .jf-hero .rk-mac__title { text-align: left; } .jf-hero .rk-wow-btnrow .rk-btn { width: 100%; } }

/* Kopf der Folgeseiten */
.jf-kopf-klein { padding: clamp(12px, 2vw, 24px) 0 clamp(28px, 4vw, 48px); }

/* Feed-Kopf und Filter-Pult */
.jf-feed-abschnitt { padding-top: clamp(40px, 5vw, 72px); border-top: 1px solid var(--rk-line); scroll-margin-top: 16px; }
.jf-kopf-klein + .jf-feed-abschnitt { padding-top: 0; border-top: 0; }
.jf-kopfzeile { margin-bottom: clamp(24px, 3vw, 36px); }
.jf-pult { display: grid; gap: 18px; padding: clamp(16px, 2.4vw, 28px); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-2); margin-bottom: clamp(24px, 3vw, 40px); min-width: 0; }
.jf-pult__zahl { display: none; }
.jf-pult__gruppen { display: grid; gap: 16px; min-width: 0; }
.jf-gruppe { display: grid; gap: 8px; min-width: 0; }
.jf-gruppe__label { margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.jf-gruppe__chips { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding: 6px 4px 10px; margin: -6px -4px -4px; scrollbar-width: thin; overscroll-behavior-x: contain; -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); }
.jf-gruppe__chips > .jr-chip { scroll-snap-align: start; }
.jf-pult__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; padding-top: 12px; border-top: 1px solid var(--rk-wow-line); }
.jf-treffer { margin: 0; font-size: var(--rk-fs-meta); color: var(--text-secondary); }
@media (min-width: 900px) {
  .jf-pult { grid-template-columns: auto minmax(0, 1fr); column-gap: clamp(24px, 3vw, 48px); align-items: center; }
  .jf-pult__zahl { display: grid; justify-items: start; align-content: center; padding-right: clamp(24px, 3vw, 48px); border-right: 1px solid var(--rk-wow-line); min-width: 150px; }
  .jf-pult__zahl b { font-weight: 400; font-size: var(--rk-wow-fs-number); line-height: .9; letter-spacing: -.05em; background: var(--rk-wow-hl); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; padding: .1em .14em .06em 0; font-variant-numeric: tabular-nums; }
  .jf-pult__zahl span { font-size: var(--rk-fs-meta); color: var(--text-secondary); }
  .jf-gruppe { grid-template-columns: 96px minmax(0, 1fr); align-items: center; gap: 12px; }
  .jf-gruppe__chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding: 0; margin: 0; }
  .jf-pult__fuss { grid-column: 1 / -1; }
}

/* Feed: Mauerwerk (JS setzt die Zeilenspannen; ohne JS ein normales Raster) */
.jf-feed { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--jf-luecke); row-gap: var(--jf-luecke); align-items: start; }
.jf-feed.is-mauer { grid-auto-rows: var(--jf-zeile); row-gap: 0; }
.jf-feed.is-mauer > * { margin-bottom: var(--jf-luecke); }
@media (min-width: 900px) { .jf-feed { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .jf-feed { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jf-karte { container-type: inline-size; min-width: 0; margin: 0; }
.jf-karte__link { display: grid; text-decoration: none; color: inherit; border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); border: 1px solid var(--rk-wow-line); box-shadow: var(--rk-wow-sh-1); overflow: hidden; transition: transform .45s var(--rk-wow-ease), box-shadow .45s var(--rk-wow-ease), border-color .45s var(--rk-wow-ease); }
@media (hover: hover) { .jf-karte__link:hover { transform: translateY(-4px); box-shadow: var(--rk-wow-sh-4); border-color: var(--rk-wow-line-strong); } }
.jf-karte__link:focus-visible { outline: 3px solid var(--rk-focus-color); outline-offset: 3px; }
.jf-karte__medium { position: relative; margin: 0; overflow: hidden; background: var(--rk-wow-tint); }
.jf-karte__medium img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--rk-wow-ease); }
.jf-karte__medium picture { display: contents; }
@media (hover: hover) { .jf-karte__link:hover .jf-karte__medium img { transform: scale(1.03); } }
.jf-karte__text { display: grid; gap: 8px; padding: 14px 16px 16px; min-width: 0; }
.jf-karte__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 10px; margin: 0; font-size: var(--rk-fs-sm); color: var(--text-muted); }
.jf-format { color: var(--rk-gold-text); letter-spacing: .06em; text-transform: uppercase; font-size: var(--rk-fs-sm); }
.jf-karte__titel { margin: 0; font-size: var(--rk-fs-card-title); line-height: 1.22; letter-spacing: -.015em; color: var(--text-primary); text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.jf-karte__kurz { margin: 0; font-size: var(--rk-fs-meta); line-height: 1.5; color: var(--text-secondary); }
.jf-karte__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-top: 10px; border-top: 1px solid var(--rk-wow-line); }
.jf-tag { padding: 3px 10px; border-radius: var(--rk-radius-pill); border: 1px solid var(--rk-wow-line-strong); font-size: var(--rk-fs-sm); color: var(--text-primary); }
.jf-kanaele { display: flex; flex-wrap: wrap; gap: 2px 8px; margin: 0; padding: 0; list-style: none; font-size: var(--rk-fs-sm); color: var(--text-muted); }
.jf-kanaele li + li::before { content: "·"; margin-right: 8px; }
.jf-kanaele__mehr { display: none; }
.jf-karte--reel .jf-karte__medium { aspect-ratio: 9 / 16; }
.jf-karte--reel .jf-karte__medium::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, var(--jf-schleier)); pointer-events: none; }
.jf-karte--reel .jf-karte__titel { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 14px; color: var(--rk-on-media); text-shadow: 0 1px 12px var(--jf-schatten-text); }
.jf-play { position: absolute; z-index: 1; left: 12px; top: 12px; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rk-glass-bg); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--rk-on-media); }
.jf-play svg { width: 18px; height: 18px; fill: currentColor; margin-left: 2px; }
.jf-dauer, .jf-zaehler { position: absolute; z-index: 1; right: 12px; top: 12px; padding: 4px 10px; border-radius: var(--rk-radius-pill); background: var(--rk-glass-bg); color: var(--rk-on-media); font-size: var(--rk-fs-xs); font-variant-numeric: tabular-nums; }
.jf-karte--karussell .jf-karte__medium { aspect-ratio: 4 / 5; border-radius: var(--rk-wow-r-md) var(--rk-wow-r-md) 0 0; }
.jf-karte--karussell .jf-karte__link { position: relative; overflow: visible; }
.jf-karte--karussell .jf-karte__link::before, .jf-karte--karussell .jf-karte__link::after { content: ""; position: absolute; z-index: -1; left: 10px; right: 10px; top: 0; height: 40px; border-radius: var(--rk-wow-r-md); border: 1px solid var(--rk-wow-line); background: var(--rk-wow-card); transform: translateY(-6px); }
.jf-karte--karussell .jf-karte__link::after { left: 20px; right: 20px; transform: translateY(-11px); opacity: .7; }
.jf-feed > .jf-karte--karussell { padding-top: 11px; isolation: isolate; }
.jf-punkte { position: absolute; z-index: 1; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 6px; }
.jf-punkte i { width: 6px; height: 6px; border-radius: 50%; background: var(--jf-punkt); box-shadow: 0 0 0 1px var(--jf-punkt-rand); }
.jf-punkte i.is-an { background: var(--rk-on-media); width: 16px; border-radius: 3px; }
.jf-karte--beitrag .jf-karte__medium { aspect-ratio: 4 / 5; }
.jf-karte--beitrag .jf-karte__text { padding: 16px 18px 18px; }
@container (max-width: 250px) {
  .jf-karte .jf-karte__text { padding: 10px 12px 12px; gap: 6px; }
  .jf-karte .jf-karte__kurz { display: none; }
  .jf-karte .jf-karte__titel { font-size: 1.0625rem; line-height: 1.25; }
  .jf-format__mehr { display: none; }
  .jf-karte__fuss { padding-top: 8px; gap: 6px; }
  .jf-kanaele li:nth-child(n+2):not(.jf-kanaele__mehr) { display: none; }
  .jf-kanaele li.jf-kanaele__mehr { display: block; }
  .jf-tag { display: none; }
}
.jf-karte--cta { grid-column: 1 / -1; }
@media (min-width: 900px) { .jf-karte--cta { grid-column: span 2; } .jf-karte--cta.rk-wow-cta { grid-template-columns: 1fr; gap: 20px; } .jf-karte--cta .rk-wow-cta__side { justify-items: start; } }
.jf-karte--cta .rk-wow-cta__text { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); }
.jf-leer { display: grid; justify-items: start; gap: 12px; padding: 32px; border: 1px dashed var(--rk-wow-line-strong); border-radius: var(--rk-wow-r-card); }
.jf-leer p { margin: 0; color: var(--text-secondary); }
.jf-seiten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: clamp(24px, 3vw, 40px); padding-top: 20px; border-top: 1px solid var(--rk-line); }
.jf-seiten__stand { margin: 0; color: var(--text-muted); font-size: var(--rk-fs-meta); }
.jf-seiten__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 599px) { .jf-seiten__knoepfe, .jf-seiten .rk-btn { width: 100%; } }

/* Was du hier siehst */
.jf-was { padding-top: clamp(64px, 8vw, 120px); display: grid; gap: clamp(28px, 4vw, 48px); }
.jf-bento__copy { display: grid; gap: 12px; }
@media (min-width: 720px) { .jf-bento { grid-template-columns: 1fr 1fr; } .jf-bento .rk-wow-bento__cell--hero { grid-column: 1 / -1; } .jf-bento > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) {
  .jf-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
  .jf-bento > :last-child { grid-column: auto; }
  .jf-bento .rk-wow-bento__cell--hero { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; column-gap: clamp(32px, 4vw, 64px); }
  .jf-bento .rk-wow-bento__cell--hero > .rk-wow-bento__top { grid-column: 1 / -1; }
}
.jf-bento .jr-chipreihe { gap: 8px; }
@media (max-width: 599px) { .jf-bento .rk-wow-bento__top { flex-direction: column; align-items: flex-start; } }

/* Handlungsband: alle Kontaktwege */
.jf-kontakt { position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(48px, 6vw, 88px); padding: clamp(24px, 4vw, 56px); border-radius: var(--rk-wow-r-card); border: 1px solid transparent; box-shadow: var(--rk-wow-dark-sh);
  background: radial-gradient(80% 120% at 0% 100%, var(--rk-wow-dark-glow), transparent 60%) padding-box, radial-gradient(60% 100% at 100% 0%, var(--rk-wow-dark-glow), transparent 62%) padding-box, linear-gradient(var(--rk-wow-dark-bg), var(--rk-wow-dark-bg)) padding-box, linear-gradient(120deg, color-mix(in srgb, var(--rk-wow-dark-gold) 70%, transparent), color-mix(in srgb, var(--rk-wow-dark-gold) 8%, transparent) 40%, color-mix(in srgb, var(--rk-wow-dark-gold) 55%, transparent)) border-box;
  display: grid; gap: clamp(28px, 4vw, 48px); }
.jf-kontakt::after { content: ""; position: absolute; z-index: -1; right: -60px; top: -60px; width: 180px; height: 180px; border: 1px solid var(--rk-wow-dark-gold); opacity: .18; transform: rotate(18deg); pointer-events: none; }
.jf-kontakt > * { min-width: 0; }
.jf-kontakt__kopf { display: grid; gap: 18px; align-content: start; }
.jf-kontakt__titel { margin: 0; font-size: var(--rk-wow-fs-big); line-height: 1.06; letter-spacing: -.03em; color: var(--text-primary); text-wrap: balance; }
.jf-kontakt__text { margin: 0; color: var(--text-secondary); max-width: 46ch; }
.jf-kontakt__kopf .rk-btn { min-height: 56px; justify-self: start; }
.jf-wege { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.jf-weg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 14px 14px 14px 16px; border-radius: 18px; border: 1px solid var(--rk-wow-dark-line); background: color-mix(in srgb, var(--rk-wow-dark-card) 85%, transparent); text-decoration: none; color: var(--text-primary); transition: transform .45s var(--rk-wow-ease), border-color .45s var(--rk-wow-ease), background-color .45s var(--rk-wow-ease); }
@media (hover: hover) { .jf-weg:hover { transform: translateY(-2px); border-color: var(--rk-wow-dark-line-strong); background: var(--rk-wow-dark-raised); } }
.jf-weg:focus-visible { outline: 2px solid var(--rk-focus-color); outline-offset: 3px; }
.jf-weg__ico { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; border: 1px solid var(--rk-wow-dark-line-strong); color: var(--text-primary); }
.jf-weg__ico svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.jf-weg__text { display: grid; gap: 2px; min-width: 0; }
.jf-weg__art { font-size: var(--rk-wow-fs-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--rk-gold-text); }
.jf-weg__wert { font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); letter-spacing: -.01em; color: var(--text-primary); overflow-wrap: anywhere; }
.jf-weg__zusatz { font-size: var(--rk-fs-sm); color: var(--text-muted); }
.jf-weg .rk-btn { min-height: 44px; }
.jf-kontakt__kanaele { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--rk-wow-dark-line); }
@media (max-width: 599px) {
  .jf-weg { gap: 12px; padding: 12px; }
  .jf-weg .rk-btn--arrow { width: 44px; min-width: 44px; padding: 0; border-radius: 50%; }
  .jf-weg .rk-btn--arrow > span:first-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .jf-weg .rk-btn--arrow::before { clip-path: circle(16px at 50% 50%); }
  .jf-weg .rk-btn--arrow .rk-btn__dot { right: 12px; }
  .jf-kontakt__kopf .rk-btn { width: 100%; }
}
@media (min-width: 960px) { .jf-kontakt { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .jf-kontakt__kanaele { grid-column: 1 / -1; grid-template-columns: auto 1fr; align-items: center; column-gap: 24px; } }

/* ═════════════ Beitragsseite /journal/<slug>/ ═════════════ */
.jf-beitrag { display: grid; gap: clamp(24px, 4vw, 56px); padding: clamp(12px, 2vw, 28px) 0 0; align-items: start; }
.jf-beitrag > * { min-width: 0; }
.jf-buehne { display: grid; justify-items: center; align-content: center; gap: 14px; padding: clamp(14px, 2.4vw, 28px); background: var(--rk-wow-tint); border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-card); min-width: 0; }
.jf-quer, .jf-reel { position: relative; margin: 0; width: 100%; display: grid; justify-items: center; }
.jf-quer img { width: auto; max-width: 100%; max-height: min(78dvh, 760px); border-radius: var(--rk-radius-md); box-shadow: var(--rk-wow-sh-3); }
.jf-video { display: block; width: auto; max-width: 100%; height: min(78dvh, 760px); aspect-ratio: 9 / 16; object-fit: contain; background: var(--jf-video-bg); border-radius: var(--rk-radius-md); box-shadow: var(--rk-wow-sh-3); }
.jf-buehne__hinweis { margin: 0; max-width: 46ch; font-size: var(--rk-fs-sm); color: var(--text-muted); text-align: center; }
.jf-folien { display: flex; gap: 12px; width: 100%; max-width: 600px; margin: 0; padding: 0; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: var(--rk-radius-md); }
.jf-folien::-webkit-scrollbar { display: none; }
.jf-folien:focus-visible { outline: 3px solid var(--rk-focus-color); outline-offset: 3px; }
.jf-folie { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.jf-folie img { width: 100%; height: auto; border-radius: var(--rk-radius-md); }
.jf-steuer { display: flex; align-items: center; justify-content: center; gap: 12px; }
.jf-steuer__knopf { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--rk-line-strong); background: var(--surface-card); color: var(--text-primary); cursor: pointer; transition: background-color var(--rk-t-base) var(--rk-ease), color var(--rk-t-base) var(--rk-ease); }
.jf-steuer__knopf:hover:not(:disabled) { background: var(--rk-btn-primary-bg); color: var(--rk-btn-primary-fg); }
.jf-steuer__knopf:disabled { opacity: .4; cursor: default; }
.jf-steuer__knopf:focus-visible { outline: 2px solid var(--rk-focus-color); outline-offset: 3px; }
.jf-steuer__knopf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jf-steuer__stand { min-width: 64px; text-align: center; font-size: var(--rk-fs-meta); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.jf-steuer__stand b { font-weight: 400; color: var(--text-primary); }
.jf-wisch { margin: 0; font-size: var(--rk-fs-sm); color: var(--text-muted); }
.jf-text { display: grid; gap: 18px; align-content: start; min-width: 0; }
.jf-beitrag__titel { margin: 0; font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); line-height: 1.05; letter-spacing: -.03em; color: var(--text-primary); text-wrap: balance; hyphens: auto; overflow-wrap: break-word; }
.jf-beitrag__meta { display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; font-size: var(--rk-fs-meta); color: var(--text-muted); }
.jf-beitrag__meta > * + *::before { content: "·"; margin: 0 10px; }
.jf-beitrag__teaser { margin: 0; font-size: var(--rk-wow-fs-lead); line-height: 1.5; color: var(--text-secondary); max-width: 58ch; text-wrap: pretty; }
.jf-fach { display: grid; gap: 14px; max-width: 64ch; padding-top: 18px; border-top: 1px solid var(--rk-line); }
.jf-fach h2 { margin: 10px 0 0; display: flex; align-items: center; gap: 10px; font-size: var(--rk-fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; color: var(--rk-gold-text); }
.jf-fach h2::before { content: ""; width: 20px; height: 2px; flex: none; background: var(--accent-orange); border-radius: 2px; }
.jf-fach p { margin: 0; color: var(--text-primary); line-height: var(--rk-lh-body); }
.jf-leistung { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); box-shadow: var(--rk-wow-sh-1); }
.jf-leistung__label { margin: 0; font-size: var(--rk-wow-fs-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--text-secondary); }
.jf-leistung .rk-wow-btnrow { gap: 10px; }
.jf-begleit { border-left: 2px solid var(--accent); background: var(--rk-wow-tint); border-radius: 0 var(--rk-radius-md) var(--rk-radius-md) 0; }
.jf-begleit > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 4px 16px; cursor: pointer; list-style: none; font-size: var(--rk-fs-meta); color: var(--text-secondary); }
.jf-begleit > summary::-webkit-details-marker { display: none; }
.jf-begleit > summary svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: transform var(--rk-t-base) var(--rk-ease); }
.jf-begleit[open] > summary svg { transform: rotate(180deg); }
.jf-begleit > summary:focus-visible { outline: 2px solid var(--rk-focus-color); outline-offset: 2px; }
.jf-begleit blockquote { margin: 0; padding: 0 18px 16px; }
.jf-begleit p { margin: 0 0 8px; font-size: var(--rk-fs-meta); line-height: 1.55; color: var(--text-secondary); }
.jf-beitrag__kanaele { display: grid; gap: 10px; }
.jf-beitrag__klabel { margin: 0; font-size: var(--rk-fs-sm); color: var(--text-secondary); }
.jf-themen { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.jf-beitrag__kopf { display: grid; gap: 14px; align-content: start; min-width: 0; }
.jf-beitrag__kopf .rk-wow-kicker { margin: 0; }
@media (max-width: 959px) { .jf-beitrag { gap: 20px; } }
@media (min-width: 960px) {
  .jf-beitrag { grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr); grid-template-areas: "buehne kopf" "buehne text"; grid-template-rows: auto 1fr; row-gap: 22px; }
  .jf-beitrag > .jf-beitrag__kopf { grid-area: kopf; }
  .jf-beitrag > .jf-text { grid-area: text; }
  .jf-beitrag > .jf-buehne { grid-area: buehne; position: sticky; top: var(--jf-kopf-abstand); align-self: start; }
}
@media (max-width: 599px) {
  .jf-video { height: auto; width: min(100%, calc(70dvh * 9 / 16)); }
  .jf-text .rk-wow-btnrow .rk-btn { width: 100%; }
}
/* Vorheriger / nächster Beitrag */
.jf-nachbarn { display: grid; gap: 12px; margin-top: clamp(40px, 5vw, 72px); }
.jf-nachbar { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 96px; padding: 12px; border: 1px solid var(--rk-wow-line); border-radius: var(--rk-wow-r-md); background: var(--rk-wow-card); text-decoration: none; color: inherit; box-shadow: var(--rk-wow-sh-1); transition: transform .45s var(--rk-wow-ease), box-shadow .45s var(--rk-wow-ease); }
@media (hover: hover) { .jf-nachbar:hover { transform: translateY(-3px); box-shadow: var(--rk-wow-sh-3); } }
.jf-nachbar:focus-visible { outline: 3px solid var(--rk-focus-color); outline-offset: 3px; }
.jf-nachbar img { width: 72px; height: 90px; object-fit: cover; border-radius: var(--rk-radius-sm); }
.jf-nachbar__text { display: grid; gap: 4px; min-width: 0; }
.jf-nachbar__richtung { font-size: var(--rk-wow-fs-tag); letter-spacing: .14em; text-transform: uppercase; color: var(--rk-gold-text); }
.jf-nachbar__titel { font-size: var(--rk-fs-small); line-height: 1.3; color: var(--text-primary); }
@media (min-width: 720px) { .jf-nachbarn { grid-template-columns: 1fr 1fr; } .jf-nachbar--weiter { grid-template-columns: minmax(0, 1fr) 72px; text-align: right; } .jf-nachbar--weiter img { order: 2; } }
.jf-zurueck { margin-top: 20px; }

/* Beitrag im Mac-Fenster (nur mit JS, Inhalt wird von der Beitragsseite geholt) */
dialog.rk-mac.jf-dlg { width: min(1180px, calc(100vw - 32px)); max-width: min(1180px, calc(100vw - 32px)); }
.jf-dlg .jf-beitrag__titel { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.4rem); }
.jf-dlg__inhalt { padding: clamp(14px, 2.4vw, 28px); }
.jf-dlg__inhalt .jf-beitrag { padding-top: 0; }
.jf-dlg__inhalt .jf-buehne { position: static; }
.jf-dlg .rk-mac__tool { gap: 4px; align-items: center; }
@media (min-width: 960px) {
  dialog.jf-dlg { overflow: hidden; }
  .jf-dlg__inhalt { max-height: calc(100dvh - 96px); overflow: auto; overscroll-behavior: contain; }
  .jf-dlg__inhalt .jf-beitrag > .jf-buehne { position: sticky; top: 0; }
  .jf-dlg__inhalt .jf-video { height: min(70dvh, 700px); }
}
@media (max-width: 599px) {
  dialog.rk-mac.jf-dlg { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; border: 0; }
  .jf-dlg .jf-mac-knopf { display: none; }
}

/* App-Ansicht der Website (Handy): flacher und kürzer */
html[data-view="app"] .jf-hero { padding-bottom: 40px; }
html[data-view="app"] .jf-hero .rk-wow-statement__sub { font-size: var(--rk-fs-body); }
html[data-view="app"] .jf-was { padding-top: 56px; }

/* Bewegung aus */
@media (prefers-reduced-motion: reduce) { .jr-chip, .jr-chip *, .jr-chip *::after, .jf-karte__link, .jf-karte__medium img, .jf-weg, .jf-nachbar { animation: none !important; transition: none !important; } }
html.no-motion .jr-chip, html.no-motion .jr-chip *, html.no-motion .jr-chip *::after, html.no-motion .jf-karte__link, html.no-motion .jf-karte__medium img, html.no-motion .jf-weg, html.no-motion .jf-nachbar,
[data-motion="reduced"] .jr-chip, [data-motion="reduced"] .jr-chip *, [data-motion="reduced"] .jr-chip *::after, [data-motion="reduced"] .jf-karte__link, [data-motion="reduced"] .jf-karte__medium img, [data-motion="reduced"] .jf-weg, [data-motion="reduced"] .jf-nachbar { animation: none !important; transition: none !important; }