/* Reise-Journal (Neubau 24.09.2026) — Leitfarbe Goldgelb, damit man immer weiß, wo man ist.
   Glas: durchscheinende Flächen mit Verlauf und feiner Lichtkante über einem weichgezeichneten Foto der eigenen
   letzten Reisen. Aufbau: Weltkarte als Bühne → Reisen → Reisepass → Rückblick → Poster; Blatt zum Eintragen. */

:root {
  --font: 'Inter Tight', system-ui, sans-serif;
  --font-brand: 'Unbounded', 'Inter Tight', system-ui, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --gold: #FFD278;
  --jn: #F4B740;                     /* Leitfarbe Reise-Journal (wie die Kappe in der Kopfleiste) */
  --jn-hell: #FFE7A8;
  --jn-tief: #E8892B;
  --jn-verlauf: linear-gradient(135deg, #FFE7A8 0%, #F7C258 45%, #E8892B 100%);
  --jn-verlauf-text: linear-gradient(100deg, #FFF1C9 0%, #FFD278 40%, #F4B740 70%, #FF9F4A 100%);
  --jn-glas: linear-gradient(155deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.05) 38%, rgba(255,220,150,0.05) 100%), rgba(10,12,26,0.54);
  --jn-glas-dicht: linear-gradient(155deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.04) 45%), rgba(12,16,32,0.62);
  --jn-kante: inset 0 1px 0 rgba(255,240,200,0.32), inset 0 0 0 1px rgba(255,214,140,0.24);
  --jn-kante-gold: inset 0 1px 0 rgba(255,236,190,0.45), inset 0 0 0 1px rgba(255,210,120,0.38);
  --jn-schatten: 0 28px 70px -18px rgba(0,0,0,0.72);
  --jn-blur: blur(22px) saturate(1.5);
  --text: #F6F3EC;
  --text2: rgba(246,240,228,0.76);
  --text3: rgba(246,240,228,0.54);
  --papier: #F4EEDF;
  --r-l: 28px; --r-m: 20px; --r-s: 14px;
  --breite: 1240px;
  --rand: clamp(16px, 4vw, 40px);
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 140px; }
body.jn-seite-body { margin: 0; min-height: 100vh; background: #040914; color: var(--text); font: 400 15px/1.55 var(--font); overflow-x: hidden; -webkit-font-smoothing: antialiased; }
html.jn-blatt-offen, html.jn-blatt-offen body { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; text-decoration: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg { flex: none; }

/* ── Hintergrund: dasselbe Prinzip wie Entdecken — ein ruhiges, stark abgedunkeltes Foto hinter der ganzen Seite ── */
[hidden] { display: none !important; }
/* Getönt in der Farbe des Journals (Martin 24.09.2026): ein warmer Gold-Schleier über dem Foto statt neutralem Dunkelblau */
.jn-grund { position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 50% 0%, rgba(255,196,80,0.32), transparent 75%),
    radial-gradient(ellipse 90% 60% at 50% 110%, rgba(244,183,64,0.26), transparent 70%),
    linear-gradient(180deg, rgba(84,52,6,0.8) 0%, rgba(100,64,8,0.66) 40%, rgba(72,46,8,0.72) 72%, rgba(24,16,8,0.92) 100%),
    url('/assets/st-grund-journal-1600.webp') center 40% / cover no-repeat, #040914;
  background-blend-mode: normal, normal, normal, luminosity, normal; }

.jn { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand) 120px; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(64px, 8vw, 110px); }

/* ── Bausteine ─────────────────────────────────────────────────────────────────────────────────── */
.jn-kicker { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 700 11.5px/1 var(--font); letter-spacing: 0.24em; text-transform: uppercase; background: var(--jn-verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jn-kicker-ico { width: 18px; height: 18px; border-radius: 6px; background: var(--jn-verlauf); box-shadow: 0 0 18px rgba(255,190,90,0.6);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 3.5A1 1 0 0 1 3.5 2.5h9a1 1 0 0 1 1 1V13.5l-5-2-5 2V3.5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 3.5A1 1 0 0 1 3.5 2.5h9a1 1 0 0 1 1 1V13.5l-5-2-5 2V3.5Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat; }

.jn-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 44px; padding: 0 20px; border: 0; border-radius: 999px; font: 650 14px/1 var(--font); white-space: nowrap; transition: transform .16s ease, box-shadow .2s ease, background .2s ease, filter .2s ease; }
.jn-knopf svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.jn-knopf:active { transform: scale(.97); }
.jn-knopf:disabled { opacity: .45; cursor: default; filter: grayscale(.4); }
.jn-knopf:focus-visible, .jn-chip:focus-visible, .jn-reise:focus-visible, .jn-stempel:focus-visible { outline: 2px solid var(--jn-hell); outline-offset: 3px; }
.jn-knopf.gold { color: #2A1A04; background: var(--jn-verlauf); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 10px 28px -8px rgba(244,183,64,0.75); }
.jn-knopf.gold:not(:disabled):hover { box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 14px 36px -8px rgba(244,183,64,0.95); filter: brightness(1.05); }
.jn-knopf.gold svg path[d^="M8 5"] { fill: currentColor; stroke: none; }
.jn-knopf.glas { color: var(--text); background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--jn-kante); }
.jn-knopf.glas:not(:disabled):hover { background: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.08)); box-shadow: var(--jn-kante-gold); }
.jn-knopf.glas svg path[d^="M8 5"] { fill: var(--jn); stroke: none; }
.jn-knopf.leise { color: var(--text2); background: none; padding: 0 12px; }
.jn-knopf.leise:hover { color: #FF9C9C; }
.jn-knopf.rot { color: #fff; background: linear-gradient(135deg, #E8475F, #B8243C); }
.jn-knopf.gross { height: 52px; padding: 0 26px; font-size: 15px; }
.jn-knopf.klein { height: 36px; padding: 0 15px; font-size: 13px; }
.jn-knopf.laeuft { box-shadow: var(--jn-kante-gold), 0 0 24px rgba(255,200,100,0.35); }
.jn-klein { font-weight: 500; color: var(--text3); font-size: 12.5px; }
.jn-aktionen { display: flex; flex-wrap: wrap; gap: 12px; }

.jn-chip { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 15px; border: 0; border-radius: 999px; color: var(--text2); font: 600 13px/1 var(--font);
  background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
.jn-chip i { font-style: normal; color: var(--text3); font-variant-numeric: tabular-nums; }
.jn-chip:hover { background: rgba(255,255,255,0.13); color: var(--text); }
.jn-chip[aria-pressed="true"] { color: #2A1A04; background: var(--jn-verlauf); box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 18px -6px rgba(244,183,64,0.7); }
.jn-chip[aria-pressed="true"] i { color: rgba(42,26,4,0.65); }
.jn-chip.klein { height: 30px; padding: 0 12px; font-size: 12px; }
.jn-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.jn-balken { position: relative; display: block; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.1); overflow: hidden; }
.jn-balken > span { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--jn-verlauf); box-shadow: 0 0 12px rgba(255,200,100,0.6); transition: width .8s cubic-bezier(.2,.8,.2,1); }

.jn-suche { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 380px; }
.jn-suche svg { position: absolute; left: 14px; width: 17px; height: 17px; fill: none; stroke: var(--text3); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.jn-suche input { width: 100%; height: 42px; padding: 0 16px 0 40px; border: 0; border-radius: 999px; color: var(--text); font: 500 14px var(--font);
  background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.jn-suche input::placeholder { color: var(--text3); }
.jn-suche input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--jn), 0 0 0 4px rgba(244,183,64,0.16); }
.jn-hinweis { margin: 0; color: var(--text3); font-size: 14px; }
.jn-hinweis.gross { padding: 30px; border-radius: var(--r-m); background: var(--jn-glas); box-shadow: var(--jn-kante); font-size: 15px; color: var(--text2); }

/* ── 1 · Kopf und Weltkarte ────────────────────────────────────────────────────────────────────── */
.jn-held { position: relative; display: grid; gap: 26px; }
.jn-held-kopf { position: relative; isolation: isolate; margin: 0 calc(50% - 50vw + var(--sbw, 0px) / 2); padding: clamp(90px, 12vw, 150px) max(var(--rand), calc(50vw - 620px)) 40px; min-height: min(560px, 72vh); }
.jn-held-foto, .jn-held-foto img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.jn-held-kopf::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(4,9,20,0.30) 0%, rgba(4,9,20,0.10) 30%, rgba(4,9,20,0.66) 72%, rgba(24,16,8,0.5) 100%),
              linear-gradient(90deg, rgba(4,9,20,0.70) 0%, rgba(4,9,20,0.15) 65%, transparent 100%); }
/* Weicher Übergang in den goldenen Seitenhintergrund: die Kopffotos laufen nach unten aus, statt an einer Kante zu enden */
.jn-held-kopf::after { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 98%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 98%, transparent 100%); }
.jn-held-foto, .jn-held-wechsel { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 98%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 98%, transparent 100%); }
.jn-held-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 34px; align-content: end; }
.jn-held-text { display: grid; gap: 18px; align-content: end; }
.jn-titel { margin: 0; font: 500 clamp(36px, 5.4vw, 68px)/1.04 var(--font-brand); letter-spacing: -0.035em; color: #fff; text-wrap: balance; text-shadow: 0 6px 40px rgba(0,0,0,0.35); }
.jn-titel em { font-style: normal; background: var(--jn-verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 24px rgba(244,183,64,0.35)); }
.jn-unter { margin: 0; max-width: 560px; font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.55; color: var(--text2); }

/* Kennzahlen wie bei Entdecken: frei stehend statt Kasten — große Ziffern, feine auslaufende Trennlinien, Ring, Rang in Gold */
.jn-zahlen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 18px 0; margin-top: 6px; }
.jn-zahlen > div { position: relative; display: grid; gap: 6px; padding: 0 30px; }
.jn-zahlen > div:first-child { padding-left: 0; }
.jn-zahlen > div + div::before { content: ''; position: absolute; left: 0; top: 4px; bottom: 4px; width: 1px; background: linear-gradient(180deg, transparent, rgba(255,255,255,0.28) 30%, rgba(255,255,255,0.28) 70%, transparent); }
.jn-zahlen b { font: 600 36px/1 var(--font-brand); color: #fff; letter-spacing: -0.03em; text-shadow: 0 4px 24px rgba(0,0,0,0.45); font-variant-numeric: tabular-nums; white-space: nowrap; }
.jn-zahlen b small { margin-left: 2px; font-size: 16px; font-weight: 500; color: #FFD278; letter-spacing: 0; }
.jn-zahlen span { font: 700 10.5px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236,244,255,0.62); white-space: nowrap; }
.jn-z-welt { grid-template-columns: 52px auto; align-items: center; gap: 14px !important; }
.jn-z-welt svg { width: 52px; height: 52px; filter: drop-shadow(0 4px 14px rgba(0,0,0,0.4)); }
.jn-z-welt .grund { fill: none; stroke: rgba(255,255,255,0.16); stroke-width: 5; }
.jn-z-welt .wert { fill: none; stroke: #FFD278; stroke-width: 5; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255,200,100,0.6)); transition: stroke-dasharray 1s cubic-bezier(.2,.8,.2,1); }
.jn-z-welt > div { display: grid; gap: 6px; }
.jn-z-rang b { background: var(--jn-verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none; filter: drop-shadow(0 4px 18px rgba(244,183,64,0.35)); }
.jn-z-rang .jn-balken { position: absolute; left: 30px; right: 0; bottom: -12px; height: 3px; }
.jn-z-rang .jn-balken > i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--jn-verlauf); box-shadow: 0 0 10px rgba(255,200,100,0.7); transition: width .8s cubic-bezier(.2,.8,.2,1); }

.jn-buehne { position: relative; border-radius: calc(var(--r-l) + 6px); overflow: hidden; aspect-ratio: 960 / 470;
  background:
    radial-gradient(ellipse 60% 70% at 50% 45%, rgba(255,210,140,0.07), transparent 70%),
    linear-gradient(170deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02) 40%), rgba(8,10,24,0.56);
  -webkit-backdrop-filter: blur(10px) saturate(1.3); backdrop-filter: blur(10px) saturate(1.3);
  box-shadow: var(--jn-kante), 0 40px 90px -30px rgba(0,0,0,0.7); }
#journal-map, #journal-map svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#journal-map svg { cursor: grab; touch-action: pan-y; }
#journal-map svg:active { cursor: grabbing; }
.jm-netz { fill: none; stroke: rgba(255,255,255,0.05); stroke-width: 0.4; pointer-events: none; }
.jm-country { fill: rgba(255,255,255,0.1); stroke: rgba(255,255,255,0.22); stroke-width: 0.35; cursor: pointer; transition: fill .35s ease; }
.jm-country:hover { fill: rgba(255,255,255,0.22); }
.jm-country.visited { fill: url(#jn-gold); stroke: rgba(255,240,200,0.8); filter: url(#jn-glut); }
.jm-country.visited:hover { fill: #FFE7A8; }
.jm-country.transit { fill: rgba(255,210,120,0.34); stroke: rgba(255,220,150,0.6); }
.jm-country.aufleuchten { animation: jn-leuchten 1s ease-out; }
@keyframes jn-leuchten { 0% { fill: #FFFFFF; } 100% { } }
.jm-stadt { cursor: pointer; }
.jm-stadt-hof { fill: rgba(255,255,255,0.25); }
.jm-stadt-punkt { fill: #fff; stroke: #E8892B; stroke-width: 0.6; }
.jm-heim-punkt { fill: #3DE0FF; stroke: #fff; stroke-width: 0.8; }
.jm-heim-puls { fill: rgba(61,224,255,0.3); animation: jn-puls 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes jn-puls { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }
.jn-kartenfehler { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; color: var(--text3); margin: 0; }

.jm-tooltip { position: absolute; left: 0; top: 0; z-index: 5; min-width: 160px; max-width: 260px; padding: 10px 13px; border-radius: 14px; pointer-events: none;
  background: var(--jn-glas-dicht); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--jn-kante), 0 14px 34px rgba(0,0,0,0.45);
  opacity: 0; transition: opacity .12s ease; font-size: 13px; }
.jm-tooltip.an { opacity: 1; }
.jm-tooltip b { display: flex; align-items: center; gap: 8px; font-weight: 700; color: #fff; }
.jm-tooltip small { display: block; margin-top: 4px; color: var(--text2); font-size: 12px; }

.jn-karten-oben { position: absolute; top: 16px; right: 16px; }
.jn-legende { position: absolute; left: 16px; bottom: 16px; display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 0; padding: 9px 14px; list-style: none; border-radius: 999px;
  background: var(--jn-glas-dicht); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--jn-kante); font-size: 12px; color: var(--text2); }
.jn-legende li { display: inline-flex; align-items: center; gap: 7px; }
.jn-legende i { width: 10px; height: 10px; border-radius: 3px; }
.jn-legende .l-gold { background: var(--jn-verlauf); box-shadow: 0 0 8px rgba(255,200,100,0.7); }
.jn-legende .l-transit { background: rgba(255,210,120,0.38); }
.jn-legende .l-stadt { border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #E8892B; width: 8px; height: 8px; }
.jn-legende .l-heim { border-radius: 50%; background: #3DE0FF; box-shadow: 0 0 8px #3DE0FF; }
.jn-zoom { position: absolute; right: 16px; bottom: 16px; display: grid; gap: 1px; border-radius: 14px; overflow: hidden;
  background: rgba(255,255,255,0.08); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--jn-kante); }
.jn-zoom button { width: 38px; height: 36px; border: 0; background: rgba(12,16,32,0.5); color: var(--text); font-size: 18px; display: grid; place-items: center; }
.jn-zoom button:hover { background: rgba(255,210,120,0.2); }
.jn-zoom svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.jn-buehne:not(.gezoomt) [data-zoom="welt"] { display: none; }
.jn-jahrzahl { position: absolute; left: 24px; top: 16px; font: 800 clamp(34px, 6vw, 70px)/1 var(--font-brand); letter-spacing: -0.04em; background: var(--jn-verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0; transition: opacity .3s ease; pointer-events: none; filter: drop-shadow(0 4px 30px rgba(244,183,64,0.45)); }
.jn-jahrzahl.an { opacity: 1; }
.jn-zoomhinweis { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 11px 18px; border-radius: 999px; background: var(--jn-glas-dicht); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--jn-kante); font-size: 13.5px; opacity: 0; transition: opacity .2s ease; pointer-events: none; }
.jn-zoomhinweis.an { opacity: 1; }
.jn-grund-hinweis { justify-self: end; margin-top: -12px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 9px; border: 0; border-radius: 999px; font-size: 12.5px; color: var(--text2);
  background: rgba(255,255,255,0.06); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.jn-grund-hinweis b { color: var(--text); font-weight: 650; }
.jn-grund-hinweis:hover { box-shadow: var(--jn-kante-gold); }

/* ── Leiste ───────────────────────────────────────────────────────────────────────────────────── */
.jn-leiste { position: sticky; top: calc(var(--neu-nav, 62px) + 12px); z-index: 40; justify-self: center; display: flex; align-items: center; gap: 6px; align-self: start; margin: calc(-1 * clamp(20px, 4vw, 50px)) 0; padding: 6px 6px 6px 8px; max-width: 100%; border-radius: 999px;
  background: linear-gradient(160deg, rgba(255,255,255,0.14), rgba(255,255,255,0.04)), rgba(12,16,32,0.45); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: var(--jn-kante), 0 18px 40px -14px rgba(0,0,0,0.6); transition: box-shadow .3s ease; }
.jn-leiste.schwebt { box-shadow: var(--jn-kante-gold), 0 18px 40px -14px rgba(0,0,0,0.7), 0 0 30px -8px rgba(244,183,64,0.35); }
.jn-leiste-links { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; }
.jn-leiste-links::-webkit-scrollbar { display: none; }
.jn-leiste a { position: relative; padding: 10px 16px; border-radius: 999px; font: 600 13.5px/1 var(--font); color: var(--text2); white-space: nowrap; transition: color .15s ease, background .15s ease; }
.jn-leiste a:hover { color: #fff; background: rgba(255,255,255,0.08); }
.jn-leiste a.aktiv { color: #fff; background: linear-gradient(135deg, rgba(255,210,120,0.28), rgba(232,137,43,0.16)); box-shadow: inset 0 0 0 1px rgba(255,210,120,0.45); }
.jn-leiste a.aktiv::after { content: ''; position: absolute; left: 50%; bottom: 3px; width: 14px; height: 2px; margin-left: -7px; border-radius: 2px; background: var(--jn-verlauf); box-shadow: 0 0 8px var(--jn); }

/* ── Abschnitte ───────────────────────────────────────────────────────────────────────────────── */
.jn-abschnitt { display: grid; gap: 26px; scroll-margin-top: 140px; }
.jn-abschnitt-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; }
.jn-abschnitt-kopf > div { display: grid; gap: 12px; }
.jn-abschnitt h2 { margin: 0; font: 700 clamp(28px, 3.4vw, 44px)/1.08 var(--font-brand); letter-spacing: -0.03em; color: #fff; text-wrap: balance; }
.jn-abschnitt-text { margin: 0; max-width: 620px; color: var(--text2); line-height: 1.6; }
.jn-zaehler { padding: 8px 14px; border-radius: 999px; font-size: 13px; color: var(--text2); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.jn-zaehler:empty { display: none; }
.jn-zaehler b { color: var(--jn-hell); font-weight: 650; }

/* ── 2 · Reisen ───────────────────────────────────────────────────────────────────────────────── */
.jn-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.jn-filter:empty { display: none; }
.jn-sort { margin-left: auto; }
.jn-sort svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.jn-sort[aria-pressed] { color: var(--text2); background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); }
#timeline-out { display: grid; gap: 38px; }
.jn-jahr { display: grid; gap: 16px; }
.jn-jahr > header { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 16px; }
.jn-jahr h3 { margin: 0; font: 800 clamp(30px, 3.6vw, 46px)/1 var(--font-brand); letter-spacing: -0.04em; background: var(--jn-verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jn-jahr > header span { font-size: 13.5px; color: var(--text2); }
.jn-reisen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); gap: 16px; }
.jn-reise { position: relative; display: flex; flex-direction: column; justify-content: flex-end; min-height: 230px; padding: 0; border: 0; border-radius: var(--r-m); overflow: hidden; text-align: left; isolation: isolate;
  background: rgba(12,16,32,0.4); box-shadow: var(--jn-kante), 0 16px 40px -18px rgba(0,0,0,0.7); transition: transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease; }
.jn-reise:hover { transform: translateY(-4px); box-shadow: var(--jn-kante-gold), 0 26px 50px -18px rgba(0,0,0,0.8), 0 0 36px -12px rgba(244,183,64,0.45); }
.jn-reise-bild { position: absolute; inset: 0; z-index: -2; background: var(--bild) center / cover no-repeat; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.jn-reise:hover .jn-reise-bild { transform: scale(1.06); }
.jn-reise::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,10,20,0.1) 0%, rgba(7,10,20,0.05) 35%, rgba(7,10,20,0.78) 80%, rgba(7,10,20,0.92) 100%); }
.jn-reise.ohne-foto { background: linear-gradient(155deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03)), rgba(12,16,32,0.3); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.jn-reise.ohne-foto .jn-reise-bild { display: grid; place-items: center; overflow: hidden; }
.jn-reise.ohne-foto .jn-reise-bild .flag-wrap { width: 150% !important; height: 150% !important; filter: blur(26px) saturate(1.4); opacity: .55; }
.jn-reise.ohne-foto::after { background: linear-gradient(180deg, transparent 30%, rgba(7,10,20,0.55) 100%); }
.jn-reise-oben { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; gap: 9px; }
.jn-wann { padding: 5px 10px; border-radius: 999px; font: 650 12px/1 var(--font); color: #fff; background: rgba(10,12,24,0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.jn-reise-text { display: grid; gap: 8px; padding: 18px; }
.jn-reise-text b { font: 700 22px/1.1 var(--font-brand); letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.5); }
.jn-reise-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: 12.5px; color: var(--text2); }
.jn-art { padding: 4px 9px; border-radius: 999px; font-weight: 650; font-size: 11.5px; color: #2A1A04; background: var(--jn-verlauf); }
.jn-art.a-business { color: #04202A; background: linear-gradient(135deg, #9FF0FF, #3DE0FF); }
.jn-art.a-transit { color: #fff; background: rgba(255,255,255,0.18); }
.jn-art.a-resident { color: #1A0B2E; background: linear-gradient(135deg, #E6D4FF, #B78CFF); }
.jn-art.a-other { color: #fff; background: rgba(255,255,255,0.14); }
.jn-staedte { color: var(--text); }
.jn-notiz { font: italic 400 14px/1.45 var(--font-display); color: rgba(255,244,220,0.85); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jn-mehr { justify-self: center; }
.jn-leer { display: grid; justify-items: center; gap: 12px; padding: 48px 24px; text-align: center; border-radius: var(--r-l); background: var(--jn-glas); -webkit-backdrop-filter: var(--jn-blur); backdrop-filter: var(--jn-blur); box-shadow: var(--jn-kante); }
.jn-leer-ico { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; font-size: 28px; color: #2A1A04; background: var(--jn-verlauf); box-shadow: 0 0 40px rgba(244,183,64,0.5); }
.jn-leer b { font: 700 20px/1.2 var(--font-brand); }
.jn-leer p { margin: 0; max-width: 440px; color: var(--text2); }

/* Flagge */
.flag-wrap { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; overflow: hidden; border-radius: 3px; vertical-align: middle;
  background: linear-gradient(135deg, #8A5A14, #F4B740); font-family: var(--font-mono); font-weight: 700; color: #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.35); }
.flag-wrap img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ── 3 · Reisepass ────────────────────────────────────────────────────────────────────────────── */
.jn-pass { position: relative; display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; align-items: center; gap: 14px; outline: none; }
.jn-pass-pfeil { width: 52px; height: 52px; border: 0; border-radius: 50%; display: grid; place-items: center; color: var(--text);
  background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.05)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: var(--jn-kante); transition: box-shadow .2s ease, opacity .2s ease; }
.jn-pass-pfeil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.jn-pass-pfeil:not(:disabled):hover { box-shadow: var(--jn-kante-gold), 0 0 24px -6px rgba(244,183,64,0.6); }
.jn-pass-pfeil:disabled { opacity: .25; cursor: default; }
.jn-pass-rahmen { position: relative; justify-self: center; width: min(900px, 100%); container-type: inline-size; perspective: 2600px; padding: 1.6% 1.4% 2.2%; }
.jn-pass-deckel { position: absolute; inset: 0; border-radius: 3.4cqw; transform: rotateX(4deg);
  background:
    radial-gradient(ellipse at 25% 15%, rgba(255,210,150,0.2), transparent 55%),
    radial-gradient(ellipse at 30% 20%, #7C2438, #4E1322 60%, #360B17);
  box-shadow: inset 0 0 0 1px rgba(255,210,150,0.2), inset 0 -8px 16px rgba(0,0,0,0.4), 0 50px 80px -30px rgba(0,0,0,0.85), 0 0 80px -30px rgba(244,183,64,0.35); }
.jn-pass-deckel::after { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2.2%; transform: translateX(-50%); background: linear-gradient(90deg, rgba(0,0,0,0.4), rgba(255,255,255,0.07), rgba(0,0,0,0.4)); }
.jn-pass-buch { position: relative; display: flex; aspect-ratio: 176 / 125; transform: rotateX(4deg); transform-style: preserve-3d; }
.jn-pass-buch.ruck { animation: jn-ruck .5s ease; }
@keyframes jn-ruck { 0%, 100% { transform: rotateX(4deg) translateY(0); } 30% { transform: rotateX(4deg) translateY(0.8cqw); } 60% { transform: rotateX(4deg) translateY(-0.2cqw); } }
.jn-blatt-l, .jn-blatt-r { position: relative; flex: 1; min-width: 0; display: flex; }
.jn-seite { position: relative; flex: 1; overflow: hidden; color: #3B3024;
  background-color: var(--papier);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='36' viewBox='0 0 120 36'%3E%3Cg fill='none' stroke-width='0.7'%3E%3Cpath d='M0 18 Q15 4 30 18 T60 18 T90 18 T120 18' stroke='%23C9973A' stroke-opacity='0.22'/%3E%3Cpath d='M0 18 Q15 32 30 18 T60 18 T90 18 T120 18' stroke='%23C56A86' stroke-opacity='0.16'/%3E%3Cpath d='M0 9 Q15 -3 30 9 T60 9 T90 9 T120 9' stroke='%2350A89A' stroke-opacity='0.12'/%3E%3Cpath d='M0 27 Q15 39 30 27 T60 27 T90 27 T120 27' stroke='%23C9973A' stroke-opacity='0.12'/%3E%3C/g%3E%3C/svg%3E"), radial-gradient(ellipse at 50% 45%, #FBF7EE 0%, #F2EBDA 70%, #E7DDC6 100%);
  background-size: 120px 36px, 100% 100%; }
.jn-blatt-l .jn-seite { border-radius: 2.4cqw 0.4cqw 0.4cqw 2.4cqw; box-shadow: -1px 1px 0 #E6DCC6, -2px 2px 0 #D9CDB3, -3px 3px 0 #E6DCC6, -4px 4px 0 #CFC2A6; }
.jn-blatt-r .jn-seite { border-radius: 0.4cqw 2.4cqw 2.4cqw 0.4cqw; box-shadow: 1px 1px 0 #E6DCC6, 2px 2px 0 #D9CDB3, 3px 3px 0 #E6DCC6, 4px 4px 0 #CFC2A6; }
.jn-blatt-l .jn-seite::after, .jn-blatt-r .jn-seite::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 4; }
.jn-blatt-l .jn-seite::after { background: linear-gradient(90deg, transparent 78%, rgba(70,45,20,0.1) 92%, rgba(50,30,10,0.32) 100%), linear-gradient(180deg, rgba(255,255,255,0.3), transparent 28%); }
.jn-blatt-r .jn-seite::after { background: linear-gradient(270deg, transparent 78%, rgba(70,45,20,0.1) 92%, rgba(50,30,10,0.32) 100%), linear-gradient(180deg, rgba(255,255,255,0.3), transparent 28%); }
.jn-seite-kopf { position: absolute; left: 7%; right: 7%; top: 4.5%; display: flex; justify-content: space-between; font: 700 clamp(7px, 1.05cqw, 10px)/1 var(--font-mono); letter-spacing: 0.22em; text-transform: uppercase; color: rgba(90,70,50,0.62); }
.jn-blatt-r .jn-seite-kopf { flex-direction: row-reverse; }

/* Datenseite */
.jn-seite.daten { padding: 13% 7% 20%; }
.jn-daten-wappen { position: absolute; right: 7%; top: 10%; display: grid; justify-items: center; gap: 4px; color: rgba(160,110,30,0.55); font: 700 clamp(6px, 0.9cqw, 9px)/1 var(--font-mono); letter-spacing: 0.2em; text-transform: uppercase; }
.jn-daten-wappen svg { width: clamp(28px, 5cqw, 52px); height: auto; }
.jn-daten { display: grid; grid-template-columns: 34% 1fr; gap: 6%; align-items: start; margin-top: 8%; }
.jn-daten-bild { position: relative; aspect-ratio: 35 / 45; border-radius: 0.8cqw; overflow: hidden; background: linear-gradient(160deg, #EFE2C2, #D9C7A0); box-shadow: inset 0 0 0 1px rgba(90,70,50,0.25), 0 2px 6px rgba(60,40,20,0.2); }
.jn-daten-bild img { width: 100%; height: 100%; object-fit: cover; filter: sepia(.25) saturate(.9); }
.jn-holo { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(255,210,120,0.35) 45%, rgba(120,220,255,0.3) 55%, transparent 70%); mix-blend-mode: overlay; background-size: 250% 100%; animation: jn-holo 6s ease-in-out infinite; }
@keyframes jn-holo { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.jn-daten dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.6cqw 3%; }
.jn-daten dl div { grid-column: 1 / -1; display: grid; gap: 0.3cqw; }
.jn-daten dl div.halb { grid-column: auto; }
.jn-daten dt { font: 700 clamp(5.5px, 0.85cqw, 8.5px)/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(90,70,50,0.6); }
.jn-daten dd { margin: 0; font: 700 clamp(9px, 1.55cqw, 16px)/1.15 var(--font-mono); color: #2B2418; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jn-daten dd.gold { color: #A86A10; }
.jn-mrz { position: absolute; left: 6%; right: 6%; bottom: 6%; padding-top: 2%; border-top: 1px dashed rgba(90,70,50,0.25); font: 600 clamp(6px, 1.08cqw, 11px)/1.55 var(--font-mono); letter-spacing: 0.08em; color: rgba(43,36,24,0.75); white-space: nowrap; overflow: hidden; }

/* Stempel */
.jn-stempel-raster { position: absolute; inset: 11% 5% 5%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 2%; }
.jn-stempel { position: relative; display: grid; place-items: center; padding: 0; border: 0; background: none; transform: translate(var(--dx), var(--dy)) rotate(var(--r)); transition: transform .2s ease; }
.jn-stempel svg { width: 88%; max-height: 100%; height: auto; opacity: .88; mix-blend-mode: multiply;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .55 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E") center / 160px;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='k'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='4'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 .55 1 1 1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23k)'/%3E%3C/svg%3E") center / 160px; }
.jn-stempel .jn-st-rund { width: 66%; }
.jn-stempel .jn-st-sechs { width: 70%; }
.jn-stempel:hover { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) scale(1.07); z-index: 2; }
.jn-stempel:hover svg { opacity: 1; }
.jn-stempel.frisch, .einstempeln .jn-stempel { animation: jn-stempeln .6s cubic-bezier(.3,1.4,.5,1) both; }
.einstempeln .jn-stempel { animation-delay: calc(var(--i) * 0.18s + 0.2s); }
@keyframes jn-stempeln {
  0% { opacity: 0; transform: translate(var(--dx), calc(var(--dy) - 14%)) scale(1.7) rotate(calc(var(--r) - 12deg)); filter: blur(3px); }
  55% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(.93) rotate(var(--r)); filter: blur(0); }
  75% { transform: translate(var(--dx), var(--dy)) scale(1.03) rotate(var(--r)); }
  100% { opacity: 1; transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--r)); }
}
.jn-erster { grid-column: 1 / -1; grid-row: 1 / -1; align-self: center; justify-self: center; display: grid; justify-items: center; gap: 1.4cqw; width: 70%; aspect-ratio: 2 / 1; border: 2px dashed rgba(168,106,16,0.45); border-radius: 2cqw; background: rgba(255,210,120,0.08); color: rgba(90,60,20,0.8); place-content: center; font: 600 clamp(10px, 1.7cqw, 17px)/1.3 var(--font); }
.jn-erster i { font-style: normal; padding: 0.8cqw 1.8cqw; border-radius: 999px; color: #2A1A04; background: var(--jn-verlauf); font-size: 0.8em; }
.jn-seite-leer { position: absolute; inset: 40% 12% auto; margin: 0; text-align: center; font: 500 clamp(10px, 1.4cqw, 15px)/1.45 var(--font); color: rgba(90,70,50,0.65); }

/* Visa */
.jn-visa-raster { position: absolute; inset: 12% 6% 6%; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 5% 6%; }
.jn-visum { position: relative; display: grid; align-content: center; justify-items: center; gap: 0.6cqw; padding: 1.4cqw; text-align: center; border-radius: 1.6cqw; overflow: hidden; transform: rotate(var(--r));
  background:
    linear-gradient(125deg, rgba(255,255,255,0) 20%, rgba(255,255,255,0.45) 40%, rgba(160,230,255,0.25) 50%, rgba(255,200,255,0.2) 58%, rgba(255,255,255,0) 75%),
    linear-gradient(160deg, #1B2A4E, #0D1730);
  background-size: 300% 100%, 100% 100%;
  box-shadow: 0 0 0 1px rgba(255,210,120,0.35), 0 8px 18px rgba(60,40,20,0.35);
  animation: jn-folie 7s ease-in-out infinite; color: #fff; }
@keyframes jn-folie { 0%, 100% { background-position: 100% 0, 0 0; } 50% { background-position: 0 0, 0 0; } }
.jn-visum::before { content: ''; position: absolute; inset: 0.7cqw; border: 1px dashed rgba(255,210,120,0.35); border-radius: 1.1cqw; pointer-events: none; }
.jn-visum-ico { font-size: clamp(16px, 3.6cqw, 36px); line-height: 1; filter: drop-shadow(0 0 1.4cqw rgba(255,210,120,0.5)); }
.jn-visum b { font: 700 clamp(8px, 1.4cqw, 14px)/1.15 var(--font-brand); background: var(--jn-verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jn-visum small { font-size: clamp(6px, 0.95cqw, 10px); line-height: 1.35; color: rgba(223,235,255,0.65); }
.jn-visum-stufe { font: 700 clamp(5px, 0.8cqw, 8px)/1 var(--font-mono); letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,210,120,0.7); }
.jn-visum.stufe-easy { box-shadow: 0 0 0 1px rgba(79,214,188,0.5), 0 8px 18px rgba(60,40,20,0.35); }
.jn-visum.stufe-hard { box-shadow: 0 0 0 1px rgba(255,120,150,0.55), 0 8px 18px rgba(60,40,20,0.35); }

/* Umblättern */
.jn-dreh { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; transition: transform .74s cubic-bezier(.45,.05,.3,1); z-index: 5; }
.jn-dreh.vor { right: 0; transform-origin: left center; }
.jn-dreh.zurueck { left: 0; transform-origin: right center; }
.jn-dreh.vor.los { transform: rotateY(-180deg); }
.jn-dreh.zurueck.los { transform: rotateY(180deg); }
.jn-dreh > div { position: absolute; inset: 0; display: flex; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.jn-dreh .hinten { transform: rotateY(180deg); }
.jn-dreh.vor .vorne .jn-seite, .jn-dreh.zurueck .hinten .jn-seite { border-radius: 0.4cqw 2.4cqw 2.4cqw 0.4cqw; }
.jn-dreh.vor .hinten .jn-seite, .jn-dreh.zurueck .vorne .jn-seite { border-radius: 2.4cqw 0.4cqw 0.4cqw 2.4cqw; }
.jn-dreh > div::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0,0,0,0.18), transparent 30%, transparent 70%, rgba(0,0,0,0.12)); }
.jn-pass-buch.weg-links { transition: transform .2s ease, opacity .2s ease; transform: rotateX(4deg) translateX(-8%) rotateY(18deg); opacity: 0; }
.jn-pass-buch.weg-rechts { transition: transform .2s ease, opacity .2s ease; transform: rotateX(4deg) translateX(8%) rotateY(-18deg); opacity: 0; }
.jn-pass-buch.von-rechts { animation: jn-von-rechts .26s ease; }
.jn-pass-buch.von-links { animation: jn-von-links .26s ease; }
@keyframes jn-von-rechts { from { transform: rotateX(4deg) translateX(8%); opacity: 0; } }
@keyframes jn-von-links { from { transform: rotateX(4deg) translateX(-8%); opacity: 0; } }

.jn-pass-stand { display: flex; justify-content: center; gap: 8px; margin-top: -8px; }
.jn-pass-stand button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 999px; background: rgba(255,255,255,0.22); transition: width .25s ease, background .25s ease; }
.jn-pass-stand button[aria-current] { width: 26px; background: var(--jn-verlauf); box-shadow: 0 0 10px rgba(244,183,64,0.6); }

/* Meilensteine unter dem Pass */
#achievements-out { display: grid; gap: 22px; margin-top: 10px; }
.jn-naechste { display: grid; gap: 14px; }
.jn-naechste h3, .jn-unterkopf h3 { margin: 0; font: 700 19px/1.2 var(--font-brand); color: #fff; }
.jn-me-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.jn-meilenstein { display: grid; grid-template-columns: 48px 1fr; gap: 6px 14px; align-items: center; padding: 16px; border-radius: var(--r-m);
  background: var(--jn-glas); -webkit-backdrop-filter: var(--jn-blur); backdrop-filter: var(--jn-blur); box-shadow: var(--jn-kante); }
.jn-me-ico { grid-row: span 2; width: 48px; height: 48px; display: grid; place-items: center; font-size: 24px; border-radius: 14px; background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); filter: grayscale(.7); }
.jn-meilenstein.ok .jn-me-ico { filter: none; background: radial-gradient(circle at 30% 25%, rgba(255,231,168,0.5), rgba(244,183,64,0.18)); box-shadow: inset 0 0 0 1px rgba(255,210,120,0.5), 0 0 22px -4px rgba(244,183,64,0.6); }
.jn-me-text { display: grid; gap: 2px; }
.jn-me-text b { font-weight: 700; color: #fff; }
.jn-me-text small { color: var(--text2); font-size: 12.5px; }
.jn-me-weg { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
.jn-me-weg i { font-style: normal; font-size: 12px; color: var(--text2); font-variant-numeric: tabular-nums; }
.jn-me-ok { justify-self: start; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 650; color: #2A1A04; background: var(--jn-verlauf); }
.jn-me-alle { display: grid; gap: 14px; justify-items: start; }
.jn-me-raster.voll { width: 100%; }

/* ── 4 · Rückblick ────────────────────────────────────────────────────────────────────────────── */
#stats-out { display: grid; gap: 22px; }
.jn-momente { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.jn-moment { position: relative; min-height: 190px; display: flex; align-items: flex-end; padding: 18px; border: 0; border-radius: var(--r-m); overflow: hidden; isolation: isolate; text-align: left;
  box-shadow: var(--jn-kante), 0 16px 40px -18px rgba(0,0,0,0.7); transition: transform .25s ease, box-shadow .25s ease; }
.jn-moment:hover { transform: translateY(-3px); box-shadow: var(--jn-kante-gold), 0 22px 46px -18px rgba(0,0,0,0.8); }
.jn-bild { position: absolute; inset: 0; z-index: -2; background: var(--bild) center / cover no-repeat; transition: transform .6s ease; }
.jn-moment:hover .jn-bild, .jn-idee:hover .jn-bild { transform: scale(1.05); }
.jn-bild.flagge { display: grid; place-items: center; overflow: hidden; background: rgba(12,16,32,0.4); }
.jn-bild.flagge .flag-wrap { width: 140% !important; height: 140% !important; filter: blur(22px) saturate(1.3); opacity: .6; }
.jn-moment::after, .jn-idee::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(7,10,20,0) 25%, rgba(7,10,20,0.85) 100%); }
.jn-moment-text { display: grid; gap: 3px; }
.jn-moment-text small { font: 700 10.5px/1 var(--font); letter-spacing: 0.18em; text-transform: uppercase; background: var(--jn-verlauf-text); -webkit-background-clip: text; background-clip: text; color: transparent; }
.jn-moment-text b { font: 700 20px/1.15 var(--font-brand); color: #fff; }
.jn-moment-text span { font-size: 13px; color: var(--text2); }

.jn-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.jn-kachel { display: grid; align-content: start; gap: 16px; padding: 22px; border-radius: var(--r-l);
  background: var(--jn-glas); -webkit-backdrop-filter: var(--jn-blur); backdrop-filter: var(--jn-blur); box-shadow: var(--jn-kante), var(--jn-schatten); }
.jn-kachel.breit { grid-column: 1 / -1; }
.jn-kachel > header { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 12px; }
.jn-kachel h3 { margin: 0; font: 700 17px/1.2 var(--font-brand); color: #fff; }
.jn-kachel > header span { font-size: 12.5px; color: var(--text2); }
.jn-fuss { margin: 0; font-size: 12.5px; color: var(--text3); }
.jn-saeulen { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: clamp(4px, 1vw, 12px); height: 190px; align-items: end; }
.jn-saeule { position: relative; display: grid; grid-template-rows: auto 1fr auto; height: 100%; justify-items: center; gap: 6px; }
.jn-saeule i { font-style: normal; font-size: 12px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; min-height: 14px; }
.jn-saeule span { align-self: end; width: 100%; max-width: 38px; min-height: 3px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, rgba(255,231,168,0.85), rgba(244,183,64,0.55) 60%, rgba(232,137,43,0.3)); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); }
.jn-saeule.null span { background: rgba(255,255,255,0.1); box-shadow: none; }
.jn-saeule.spitze span { background: var(--jn-verlauf); box-shadow: inset 0 1px 0 rgba(255,255,255,0.6), 0 0 22px rgba(244,183,64,0.55); }
.jn-saeule em { font-style: normal; font-size: 11.5px; color: var(--text3); font-variant-numeric: tabular-nums; }
.jn-arten { display: grid; grid-template-columns: 130px 1fr; gap: 18px; align-items: center; }
.jn-donut { position: relative; width: 130px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 30px -6px rgba(244,183,64,0.35); }
.jn-donut::before { content: ''; position: absolute; inset: 16px; border-radius: 50%; background: rgba(12,16,32,0.82); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); }
.jn-donut span { position: relative; display: grid; justify-items: center; }
.jn-donut b { font: 700 20px/1 var(--font-brand); color: #fff; }
.jn-donut small { font-size: 11px; color: var(--text2); }
.jn-arten ul, .jn-kont, .jn-stadtliste { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.jn-arten li { display: grid; grid-template-columns: 10px 1fr auto; align-items: center; gap: 9px; font-size: 13.5px; color: var(--text2); }
.jn-arten li i { width: 10px; height: 10px; border-radius: 3px; }
.jn-arten li b { color: #fff; font-variant-numeric: tabular-nums; }
.jn-kont li { display: grid; grid-template-columns: 96px 1fr 26px; align-items: center; gap: 4px 10px; font-size: 13.5px; }
.jn-kont li b { text-align: right; font-variant-numeric: tabular-nums; }
.jn-kont li.offen { color: var(--text3); }
.jn-kont-flaggen { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.jn-kont-flaggen button { padding: 0; border: 0; background: none; line-height: 0; border-radius: 3px; transition: transform .15s ease; }
.jn-kont-flaggen button:hover { transform: translateY(-2px); }
.jn-kont-flaggen em { font-style: normal; font-size: 12px; color: var(--text3); }
.jn-stadtliste button { width: 100%; display: grid; grid-template-columns: 22px auto 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border: 0; border-radius: 12px; background: rgba(255,255,255,0.04); text-align: left; }
.jn-stadtliste button:hover { background: rgba(255,210,120,0.1); }
.jn-stadtliste span { display: grid; font-weight: 650; }
.jn-stadtliste small { font-weight: 400; font-size: 12px; color: var(--text3); }
.jn-platz { font: 700 13px/1 var(--font-brand); color: var(--jn); }
.jn-unterkopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 12px 0 14px; }
.jn-unterkopf span { font-size: 13px; color: var(--text2); }
.jn-ideen-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.jn-idee { position: relative; min-height: 250px; display: flex; align-items: flex-end; border-radius: var(--r-m); overflow: hidden; isolation: isolate; box-shadow: var(--jn-kante), 0 16px 40px -18px rgba(0,0,0,0.7); }
.jn-idee-text { display: grid; gap: 6px; padding: 18px; }
.jn-idee-text > span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--text2); }
.jn-idee-text b { font: 700 19px/1.15 var(--font-brand); color: #fff; }
.jn-idee-text p { margin: 0; font-size: 13px; color: var(--text2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.jn-idee-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.jn-weiter { flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: 8px; padding: 20px; background: linear-gradient(150deg, rgba(255,210,120,0.28), rgba(232,137,43,0.12) 50%, rgba(255,255,255,0.04)), rgba(12,16,32,0.3); -webkit-backdrop-filter: var(--jn-blur); backdrop-filter: var(--jn-blur); transition: box-shadow .25s ease, transform .25s ease; }
.jn-weiter::after { display: none; }
.jn-weiter:hover { transform: translateY(-3px); box-shadow: var(--jn-kante-gold), 0 20px 50px -18px rgba(244,183,64,0.5); }
.jn-weiter-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; font-size: 22px; color: #2A1A04; background: var(--jn-verlauf); margin-bottom: auto; }
.jn-weiter b { font: 700 20px/1.15 var(--font-brand); color: #fff; }
.jn-weiter p { margin: 0; font-size: 13.5px; color: var(--text2); }

/* ── 5 · Poster ───────────────────────────────────────────────────────────────────────────────── */
.jn-poster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 400px); gap: clamp(24px, 5vw, 64px); align-items: center; padding: clamp(22px, 4vw, 44px); border-radius: calc(var(--r-l) + 6px);
  background: var(--jn-glas); -webkit-backdrop-filter: var(--jn-blur); backdrop-filter: var(--jn-blur); box-shadow: var(--jn-kante), var(--jn-schatten); }
.jn-poster-text { display: grid; gap: 16px; align-content: start; }
.jn-klein-titel { margin: 8px 0 0; font: 700 11px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--text3); }
.jn-stile { display: grid; gap: 8px; }
.jn-stil-gruppe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pt-theme { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 12px 0 6px; border: 0; border-radius: 14px; font-weight: 600; font-size: 13.5px; color: var(--text2); background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1); transition: box-shadow .15s ease, color .15s ease; }
.pt-theme span { width: 36px; height: 36px; border-radius: 10px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.pt-theme:hover { color: #fff; }
.pt-theme[aria-checked="true"] { color: #fff; box-shadow: inset 0 0 0 1.5px var(--jn), 0 0 20px -6px rgba(244,183,64,0.6); background: rgba(255,210,120,0.1); }
.jn-schalter-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.jn-schalter { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 14px; cursor: pointer; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); font-size: 13.5px; color: var(--text2); }
.jn-schalter input { position: absolute; opacity: 0; pointer-events: none; }
.jn-schalter i { position: relative; flex: none; width: 40px; height: 23px; border-radius: 999px; background: rgba(255,255,255,0.16); box-shadow: inset 0 1px 3px rgba(0,0,0,0.3); transition: background .2s ease; }
.jn-schalter i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 17px; height: 17px; border-radius: 50%; background: linear-gradient(180deg, #fff, #EDE3CF); box-shadow: 0 2px 6px rgba(0,0,0,0.35); transition: transform .2s cubic-bezier(.3,1.4,.5,1); }
.jn-schalter input:checked ~ i { background: var(--jn-verlauf); box-shadow: 0 0 14px rgba(244,183,64,0.45); }
.jn-schalter input:checked ~ i::after { transform: translateX(17px); }
.jn-schalter input:checked ~ span { color: #fff; }
.jn-schalter input:focus-visible ~ i { outline: 2px solid var(--jn-hell); outline-offset: 2px; }
.jn-poster-bild { display: grid; place-items: center; }
.jn-telefon { position: relative; width: min(100%, 330px); aspect-ratio: 9 / 16; padding: 10px; border-radius: 40px;
  background: linear-gradient(160deg, rgba(255,255,255,0.22), rgba(255,255,255,0.04)); box-shadow: var(--jn-kante), 0 50px 90px -30px rgba(0,0,0,0.85), 0 0 70px -20px rgba(244,183,64,0.35); }
.jn-telefon canvas { width: 100%; height: 100%; border-radius: 31px; display: block; background: rgba(0,0,0,0.3); opacity: 0; transition: opacity .4s ease; }
.jn-telefon.fertig canvas { opacity: 1; }
.jn-telefon.poster-animated { animation: jn-schweben 6s ease-in-out infinite; }
@keyframes jn-schweben { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-10px) rotate(1deg); } }

/* ── Blatt ────────────────────────────────────────────────────────────────────────────────────── */
.jn-blatt { position: fixed; inset: 0; z-index: 200; display: flex; justify-content: flex-end; background: rgba(4,6,14,0); transition: background .28s ease; }
.jn-blatt.offen { background: rgba(4,6,14,0.5); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.jn-blatt-karte { position: relative; display: flex; flex-direction: column; width: min(520px, 100%); height: 100%; overflow: hidden;
  background: linear-gradient(170deg, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 30%), rgba(14,16,30,0.72); -webkit-backdrop-filter: blur(34px) saturate(1.6); backdrop-filter: blur(34px) saturate(1.6);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.2), -30px 0 80px rgba(0,0,0,0.5); transform: translateX(104%); transition: transform .32s cubic-bezier(.2,.8,.2,1); }
.jn-blatt.offen .jn-blatt-karte { transform: none; }
.jb-kopf { position: relative; flex: none; min-height: 190px; display: flex; align-items: flex-end; padding: 22px 24px; isolation: isolate; overflow: hidden; }
.jb-kopf::before { content: ''; position: absolute; inset: 0; z-index: -2; background: var(--bild) center / cover no-repeat; }
.jb-kopf::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10,12,24,0.1) 0%, rgba(10,12,24,0.35) 45%, rgba(14,16,30,0.96) 100%); }
.jb-kopf.ohne-foto { min-height: 130px; }
.jb-kopf.ohne-foto::before { background: radial-gradient(ellipse at 20% 0%, rgba(255,210,120,0.35), transparent 60%), radial-gradient(ellipse at 100% 100%, rgba(232,137,43,0.2), transparent 60%); }
.jb-kopf-text { display: flex; align-items: center; gap: 14px; }
.jb-flagge { line-height: 0; }
.jb-kicker { margin: 0 0 6px; font: 700 10.5px/1 var(--font); letter-spacing: 0.2em; text-transform: uppercase; color: var(--jn-hell); }
.jb-kopf h2 { margin: 0; font: 700 clamp(24px, 4vw, 30px)/1.05 var(--font-brand); letter-spacing: -0.02em; color: #fff; text-shadow: 0 2px 20px rgba(0,0,0,0.5); }
.jb-zu { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(10,12,24,0.45); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2); }
.jb-zu svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.jb-lage { position: absolute; top: 20px; left: 22px; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(10,12,24,0.5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.18); }
.jb-lage::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--f); box-shadow: 0 0 8px var(--f); }
.jb-rumpf { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 8px 24px 24px; display: grid; align-content: start; gap: 22px; }
.jb-feld { display: grid; gap: 10px; }
.jb-feld > label, .jb-label { font: 700 11px/1 var(--font); letter-spacing: 0.16em; text-transform: uppercase; color: var(--text2); }
.jb-label small { letter-spacing: 0; text-transform: none; font-weight: 500; color: var(--text3); margin-left: 6px; }
.jb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-monate { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.jb-monate .jn-chip { justify-content: center; padding: 0; }
.jn-chip.art[aria-pressed="true"] { color: #1A1204; background: linear-gradient(135deg, #fff 0%, var(--f) 70%); }
.jb-jahr-frei { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 6px 0 14px; border-radius: 999px; background: rgba(255,255,255,0.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); font-size: 13px; color: var(--text2); }
.jb-jahr-frei.an { box-shadow: inset 0 0 0 1.5px var(--jn); color: #fff; }
.jb-jahr-frei input { width: 92px; height: 28px; border: 0; border-radius: 999px; padding: 0 10px; color: #fff; background: rgba(0,0,0,0.25); font: 600 13px var(--font); }
input[type=number] { -moz-appearance: textfield; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.jb-dauer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jb-stufe { width: 40px; height: 40px; border: 0; border-radius: 50%; font-size: 20px; background: rgba(255,255,255,0.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.jb-stufe:hover { box-shadow: var(--jn-kante-gold); }
.jb-dauer label { display: inline-flex; align-items: baseline; gap: 6px; }
.jb-dauer input { width: 64px; height: 40px; border: 0; border-radius: 12px; text-align: center; color: #fff; background: rgba(0,0,0,0.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); font: 700 18px var(--font-brand); }
.jb-dauer input:focus, .jb-rumpf textarea:focus, .jb-rumpf input[type=search]:focus, .jb-jahr-frei input:focus { outline: none; box-shadow: inset 0 0 0 1.5px var(--jn), 0 0 0 4px rgba(244,183,64,0.15); }
.jb-dauer label span { color: var(--text2); font-size: 13px; }
.jb-schnell { display: flex; flex-wrap: wrap; gap: 6px; margin-left: 4px; }
.jb-staedte { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.jb-stadt { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 6px 0 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: #2A1A04; background: var(--jn-verlauf); }
.jb-stadt button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(42,26,4,0.15); color: #2A1A04; line-height: 1; }
.jb-stadtsuche { position: relative; flex: 1 1 200px; }
.jb-rumpf input[type=search], .jb-rumpf textarea { width: 100%; border: 0; border-radius: 14px; padding: 11px 14px; color: #fff; background: rgba(0,0,0,0.25); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); font: 500 14px/1.5 var(--font); resize: vertical; }
.jb-rumpf input::placeholder, .jb-rumpf textarea::placeholder { color: var(--text3); }
.jb-rumpf input:disabled { opacity: .5; }
#jb-stadt-treffer { display: grid; gap: 2px; margin-top: 6px; }
#jb-stadt-treffer button { display: grid; gap: 1px; padding: 9px 12px; border: 0; border-radius: 12px; text-align: left; background: rgba(255,255,255,0.05); }
#jb-stadt-treffer button:hover { background: rgba(255,210,120,0.14); }
#jb-stadt-treffer small { color: var(--text3); font-size: 12px; }
#jb-stadt-treffer .frei { color: var(--text2); font-size: 13px; }
.jb-laedt { margin: 0; padding: 8px 4px; color: var(--text3); font-size: 13px; }
.jb-landwahl { position: relative; }
#jb-treffer { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 5; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: rgba(18,20,36,0.96); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: var(--jn-kante), 0 20px 50px rgba(0,0,0,0.5); }
#jb-treffer li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px; cursor: pointer; }
#jb-treffer li span { flex: 1; font-weight: 600; }
#jb-treffer li small { color: var(--text3); font-size: 12px; }
#jb-treffer li[aria-selected="true"], #jb-treffer li:hover { background: rgba(255,210,120,0.14); }
#jb-treffer li.leer { color: var(--text3); cursor: default; }
.jb-fuss { flex: none; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; padding: 16px 24px calc(16px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid rgba(255,255,255,0.08); background: rgba(10,12,24,0.35); }
.jb-status { margin-right: auto; font-size: 13px; color: var(--text2); }
.jb-loeschen { display: flex; align-items: center; gap: 8px; margin-right: auto; }
.jb-loeschen + .jb-status { margin-right: 0; }
.jb-frage { font-size: 13px; color: #FFB3B3; }
.jb-liste { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.jb-liste button { width: 100%; display: grid; grid-template-columns: 110px 1fr auto; gap: 12px; align-items: center; padding: 14px 16px; border: 0; border-radius: 16px; text-align: left; background: rgba(255,255,255,0.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); transition: box-shadow .15s ease, background .15s ease; }
.jb-liste button:hover { background: rgba(255,210,120,0.1); box-shadow: var(--jn-kante-gold); }
.jb-wann { font: 700 14px/1.2 var(--font-brand); color: var(--jn-hell); }
.jb-was { display: grid; gap: 3px; font-size: 13.5px; color: var(--text); }
.jb-was small { font: italic 13px/1.4 var(--font-display); color: var(--text2); }
.jb-pfeil { font-size: 12px; color: var(--text3); }
.jb-links { display: flex; flex-wrap: wrap; gap: 8px; }
.jb-erklaer { margin: 0; color: var(--text2); font-size: 14px; }
.jb-mehr-leiste { display: grid; gap: 10px; position: sticky; top: -8px; z-index: 2; padding: 8px 0; background: linear-gradient(180deg, rgba(20,22,36,0.98) 70%, transparent); }
.jb-mehr-leiste .jn-suche { max-width: none; }
.jb-laender { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.jb-land { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 9px 11px; border: 0; border-radius: 12px; text-align: left; font-size: 13.5px; font-weight: 600; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.jb-land i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.3); }
.jb-land[aria-pressed="true"] { background: rgba(255,210,120,0.16); box-shadow: inset 0 0 0 1.5px var(--jn); }
.jb-land[aria-pressed="true"] i { background: var(--jn-verlauf) ; box-shadow: 0 0 8px rgba(244,183,64,0.7); }
.jb-land[aria-pressed="true"] i::after { content: '✓'; display: grid; place-items: center; height: 100%; font-size: 11px; font-weight: 800; color: #2A1A04; font-style: normal; }
.jb-land.drin { opacity: .45; cursor: default; }
.jb-land.drin i { background: rgba(255,210,120,0.4); box-shadow: none; }

/* ── Meldung ──────────────────────────────────────────────────────────────────────────────────── */
.jn-toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 300; display: flex; align-items: center; gap: 14px; max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px 12px 12px; border-radius: 20px;
  background: linear-gradient(160deg, rgba(255,255,255,0.16), rgba(255,255,255,0.04)), rgba(16,18,32,0.78); -webkit-backdrop-filter: blur(24px) saturate(1.5); backdrop-filter: blur(24px) saturate(1.5);
  box-shadow: var(--jn-kante), 0 24px 60px rgba(0,0,0,0.55); transform: translate(-50%, 140%); opacity: 0; transition: transform .4s cubic-bezier(.2,1.2,.3,1), opacity .3s ease; pointer-events: none; }
.jn-toast.an { transform: translate(-50%, 0); opacity: 1; pointer-events: auto; }
.jn-toast.gold { box-shadow: var(--jn-kante-gold), 0 24px 60px rgba(0,0,0,0.55), 0 0 50px -10px rgba(244,183,64,0.6); }
.jn-toast-ico { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; font-size: 18px; font-weight: 800; color: #2A1A04; background: var(--jn-verlauf); }
.jn-toast.gold .jn-toast-ico { animation: jn-funkeln 1.4s ease-out; }
@keyframes jn-funkeln { 0% { transform: scale(.4) rotate(-90deg); box-shadow: 0 0 0 0 rgba(255,210,120,0.8); } 60% { transform: scale(1.15) rotate(10deg); box-shadow: 0 0 0 16px rgba(255,210,120,0); } 100% { transform: none; } }
.jn-toast-text { display: grid; gap: 2px; min-width: 0; }
.jn-toast-text b { font-weight: 700; color: #fff; }
.jn-toast-text small { color: var(--text2); font-size: 12.5px; }

/* ── Handy und schmale Fenster ────────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .jn-held-kopf { grid-template-columns: 1fr; }
  .jn-bento { grid-template-columns: 1fr 1fr; }
  .jn-poster { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 120px; }
  .jn { gap: 64px; padding-bottom: 100px; }
  .jn-held { gap: 18px; padding-top: 26px; }
  .jn-aktionen .jn-knopf.gross { flex: 1 1 100%; }
  .jn-zahlen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 0; width: 100%; }
  .jn-zahlen > div { padding: 0 16px; }
  .jn-zahlen > div:nth-child(3n+1) { padding-left: 0; }
  .jn-zahlen > div:nth-child(3n+1)::before { display: none; }
  .jn-zahlen b { font-size: clamp(19px, 6.2vw, 25px); }
  /* Nichts darf aus der Spalte laufen: Beschriftungen brechen um, statt über die Trennlinie zu wandern */
  .jn-zahlen > div { min-width: 0; }
  .jn-zahlen span { white-space: normal; line-height: 1.25; letter-spacing: 0.1em; overflow-wrap: anywhere; }
  .jn-z-welt { grid-template-columns: 38px auto; gap: 9px !important; }
  .jn-z-welt svg { width: 38px; height: 38px; }
  .jn-zahlen > .jn-z-rang { grid-column: 1 / -1; padding-left: 0; }
  .jn-zahlen > .jn-z-rang::before { display: none; }
  .jn-z-rang .jn-balken { left: 0; right: auto; width: 70%; }
  .jn-buehne { aspect-ratio: 960 / 560; margin: 0 calc(-1 * var(--rand) + 6px); border-radius: 22px; }
  .jn-legende { left: 10px; bottom: 10px; padding: 7px 11px; gap: 4px 10px; font-size: 11px; }
  .jn-legende li:nth-child(n+3) { display: none; }
  .jn-karten-oben { top: 10px; right: 10px; }
  .jn-karten-oben .jn-knopf { height: 32px; padding: 0 12px; font-size: 12px; }
  .jn-zoom { right: 10px; bottom: 10px; }
  .jn-zoom button { width: 34px; height: 32px; }
  .jn-grund-hinweis { justify-self: stretch; justify-content: center; margin-top: -6px; }
  .jn-leiste { justify-self: stretch; top: calc(var(--neu-nav, 62px) + 8px); padding: 5px; }
  .jn-leiste a { padding: 9px 12px; font-size: 13px; }
  .jn-leiste .jn-knopf span { display: none; }
  .jn-leiste .jn-knopf { width: 38px; height: 38px; padding: 0; flex: none; }
  .jn-sort { margin-left: 0; }
  .jn-reisen-raster { grid-template-columns: 1fr; }
  .jn-reise { min-height: 200px; }
  .jn-pass { grid-template-columns: 1fr; }
  .jn-pass-pfeil { display: none; }
  .jn-pass-rahmen { width: min(440px, 100%); padding: 2.4% 2.8% 3.4%; }
  .jn-pass-buch { aspect-ratio: 88 / 125; }
  .jn-blatt-l.einzeln .jn-seite { border-radius: 2.4cqw; box-shadow: 2px 2px 0 #E6DCC6, 4px 4px 0 #CFC2A6; }
  .jn-blatt-l.einzeln .jn-seite::after { background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent 28%); }
  .jn-pass-deckel::after { display: none; }
  .jn-seite-kopf { font-size: 2cqw; }
  .jn-daten dt { font-size: 1.9cqw; }
  .jn-daten dd { font-size: 3.4cqw; }
  .jn-mrz { font-size: 2.15cqw; }
  .jn-daten-wappen { font-size: 1.8cqw; }
  .jn-daten-wappen svg { width: 10cqw; }
  .jn-visum b { font-size: 3cqw; }
  .jn-visum small { font-size: 2.1cqw; }
  .jn-visum-ico { font-size: 7cqw; }
  .jn-visum-stufe { font-size: 1.7cqw; }
  .jn-erster { font-size: 3.6cqw; }
  .jn-seite-leer { font-size: 3.2cqw; }
  .jn-bento { grid-template-columns: 1fr; }
  .jn-arten { grid-template-columns: 110px 1fr; }
  .jn-donut { width: 110px; }
  .jn-stil-gruppe { grid-template-columns: 1fr 1fr 1fr; }
  .pt-theme { flex-direction: column; justify-content: center; height: auto; padding: 8px 4px; gap: 6px; font-size: 12px; }
  .jn-blatt { align-items: flex-end; }
  .jn-blatt-karte { width: 100%; height: auto; max-height: 94vh; border-radius: 26px 26px 0 0; transform: translateY(104%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25), 0 -20px 60px rgba(0,0,0,0.5); }
  .jb-kopf { min-height: 150px; padding: 18px 18px; }
  .jb-rumpf { padding: 6px 18px 20px; }
  .jb-fuss { padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 0px)); }
  .jb-fuss .jn-knopf.gold { flex: 1 1 auto; }
  .jb-monate { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .jb-liste button { grid-template-columns: 1fr; gap: 6px; }
  .jb-pfeil { display: none; }
  .jb-laender { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  html { scroll-behavior: auto; }
}

/* Beim offenen Blatt tritt der Spenden-Knopf zurück; die Suche im Blatt behält ihr Symbol */
html.jn-blatt-offen #donate-btn { opacity: 0; pointer-events: none; }
.jb-rumpf .jn-suche input[type=search] { padding: 0 16px 0 40px; height: 42px; border-radius: 999px; }
.jb-rumpf { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 760px) { .jb-laender { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jb-land span { overflow: hidden; text-overflow: ellipsis; } }

/* ── Knöpfe und Chips: die Knopf-Familie der ganzen Seite (ui-neu.css), hier in der Journal-Farbe ──────────── */
html[data-neu] body.jn-seite-body .btn-primary { background: linear-gradient(90deg, rgba(244,183,64,0.26), rgba(232,137,43,0.12)) !important; box-shadow: inset 0 0 0 1px rgba(255,210,120,0.3) !important; }
html[data-neu] body.jn-seite-body .btn-primary:hover { background: linear-gradient(90deg, rgba(244,183,64,0.36), rgba(232,137,43,0.18)) !important; box-shadow: inset 0 0 0 1px rgba(255,210,120,0.5), 0 8px 20px rgba(0,0,0,0.35) !important; }
html[data-neu] body.jn-seite-body .btn-ghost { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
html[data-neu] body.jn-seite-body .jn-glas { background: rgba(10,14,28,0.55) !important; }
html[data-neu] body.jn-seite-body .chip[aria-pressed="true"] {
  background: linear-gradient(90deg, color-mix(in srgb, var(--journal, #F4B740) 28%, transparent), color-mix(in srgb, var(--journal, #F4B740) 12%, transparent)) !important;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--journal, #F4B740) 62%, transparent) !important; }
html[data-neu] body.jn-seite-body .chip::before { background-color: var(--journal, #F4B740); }
.jn-chip i { font-style: normal; margin-left: 6px; color: var(--text3); font-variant-numeric: tabular-nums; }
.jn-chip.klein { height: 30px !important; padding: 0 12px !important; font-size: 12px !important; }
.jn-chip.art[aria-pressed="true"] { color: #fff !important; }
.jb-monate .chip { justify-content: center; padding: 0 !important; }
.jn-leiste .btn-primary span { display: inline; }
@media (max-width: 760px) {
  .jn-held-kopf { padding-top: 60px; min-height: 0; }
  .jn-aktionen .btn-primary, .jn-aktionen .btn-ghost { flex: 1 1 100%; justify-content: center; }
  .jn-leiste .btn-primary { padding: 0 44px 0 0 !important; width: 48px; flex: none; }
  .jn-leiste .btn-primary span { display: none; }
  .jb-fuss .btn-primary { flex: 1 1 auto; }
}

/* Foto-Wechsel im Kopf: die letzten Reiseländer, scharf, mit Land und Datum */
.jn-held-wechsel i { position: absolute; inset: 0; z-index: -2; background: center 45% / cover no-repeat; opacity: 0; transition: opacity 1.6s ease; transform: scale(1.04); }
.jn-held-wechsel i.an { opacity: 1; animation: jn-zoom 9s ease-out both; }
@keyframes jn-zoom { from { transform: scale(1.08); } to { transform: scale(1.02); } }
.jn-foto-hinweis { position: absolute; right: max(var(--rand), calc(50vw - 620px)); bottom: 40px; display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px 7px 9px; border: 0; border-radius: 999px; font-size: 12.5px; color: var(--text2);
  background: rgba(10,14,28,0.5); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.jn-foto-hinweis b { color: #fff; font-weight: 650; }
.jn-foto-hinweis:hover { box-shadow: inset 0 0 0 1px rgba(255,210,120,0.5); }
@media (max-width: 980px) { .jn-foto-hinweis { position: static; justify-self: start; margin-top: 18px; } }
.jn-held-wechsel { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.jn-held-wechsel i { z-index: 0; }
.jn-held-kopf { margin-top: -16px; }
@media (min-width: 981px) { .jn-foto-hinweis { top: 28px; bottom: auto; } }
.jn-jahrzahl { display: grid; gap: 4px; }
.jn-jahrzahl b { font: inherit; background: inherit; -webkit-background-clip: text; background-clip: text; }
.jn-jahrzahl span { font: 600 clamp(15px, 1.6vw, 22px)/1.2 var(--font); letter-spacing: 0; color: #fff; -webkit-text-fill-color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,0.6); }
.jm-country.visited, .jm-country.transit { transition: fill .5s ease; }

/* ── Poster-Studio ──────────────────────────────────────────────────────────────────────────── */
.jn-studio { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: clamp(24px, 4vw, 56px); align-items: start; padding: clamp(20px, 3vw, 36px); border-radius: calc(var(--r-l) + 6px);
  background: var(--jn-glas); -webkit-backdrop-filter: var(--jn-blur); backdrop-filter: var(--jn-blur); box-shadow: var(--jn-kante), var(--jn-schatten); }
.jn-studio-steuer { display: grid; gap: 18px; align-content: start; min-width: 0; }
.jn-motive { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.jn-motiv { display: grid; gap: 8px; padding: 8px; border: 0; border-radius: 18px; text-align: center; background: rgba(255,255,255,0.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.jn-motiv canvas { width: 100%; height: auto; aspect-ratio: 9 / 16; border-radius: 11px; background: rgba(0,0,0,0.3); box-shadow: 0 8px 20px -8px rgba(0,0,0,0.6); }
.jn-motiv b { font: 650 13px/1.2 var(--font); color: var(--text2); }
.jn-motiv:hover { transform: translateY(-3px); background: rgba(255,255,255,0.09); }
.jn-motiv[aria-checked="true"] { background: rgba(244,183,64,0.12); box-shadow: inset 0 0 0 2px var(--jn), 0 12px 30px -12px rgba(244,183,64,0.6); }
.jn-motiv[aria-checked="true"] b { color: #fff; }
.jn-farben { display: flex; flex-wrap: wrap; gap: 10px; }
.jn-farben .jn-stil-gruppe { display: flex; gap: 10px; }
.jn-farben .pt-theme { width: 46px; height: 46px; padding: 4px; border-radius: 50%; background: rgba(255,255,255,0.06); }
.jn-farben .pt-theme span { width: 38px; height: 38px; border-radius: 50%; }
.jn-farben .pt-theme[aria-checked="true"] { box-shadow: inset 0 0 0 2px var(--jn), 0 0 18px -4px rgba(244,183,64,0.7); }
.jn-studio-zeile { display: flex; flex-wrap: wrap; gap: 18px 32px; }
.jn-studio-zeile > div { display: grid; gap: 10px; }
.jn-studio-zeile .jn-klein-titel, .jn-studio-steuer > .jn-klein-titel { margin: 0; }
.jn-studio .chip:disabled { opacity: .35; cursor: default; }
.jn-schalter[hidden] { display: none !important; }
.jn-schalter:has(input:disabled) { opacity: .5; }
.jn-studio-status { margin: 0; min-height: 20px; font-size: 13px; color: var(--jn-hell); }
.jn-telefon.beitrag { aspect-ratio: 4 / 5; border-radius: 30px; }
.jn-telefon.beitrag canvas { border-radius: 22px; }
.jn-studio .jn-poster-bild { position: sticky; top: 150px; }
@media (max-width: 980px) {
  .jn-studio { grid-template-columns: 1fr; }
  .jn-studio .jn-poster-bild { position: static; order: -1; }
}
@media (max-width: 760px) {
  .jn-motive { grid-template-columns: repeat(5, 110px); overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .jn-telefon { width: min(100%, 300px); }
}
.jn-klein-titel small { margin-left: 6px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text3); }
.jn-laenderwahl { display: grid; gap: 10px; }
.jn-laenderwahl .jn-schalter small { margin-left: 6px; color: var(--text3); font-size: 12px; }
.jn-laender-auf { border-radius: 16px; background: rgba(255,255,255,0.04); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.09); }
.jn-laender-auf summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; cursor: pointer; list-style: none; font-size: 14px; }
.jn-laender-auf summary::-webkit-details-marker { display: none; }
.jn-laender-auf summary::after { content: ''; width: 9px; height: 9px; border-right: 2px solid var(--text2); border-bottom: 2px solid var(--text2); transform: rotate(45deg); margin-left: 4px; transition: transform .2s ease; }
.jn-laender-auf[open] summary::after { transform: rotate(-135deg); }
.jn-laender-auf summary span { margin-left: auto; color: var(--jn-hell); font-size: 13px; }
.jn-laender-auf .chips { padding: 0 14px 14px; max-height: 260px; overflow-y: auto; }
.jn-land-chip { gap: 8px; }
.jn-land-chip .flag-wrap { border-radius: 2px; }
.jn-land-chip[aria-pressed="false"] { opacity: .5; text-decoration: line-through; }
/* Sehr schmale Handys: der Ring hat neben der Zahl keinen Platz mehr — die Zahl bleibt, der Ring geht */
@media (max-width: 380px) {
  .jn-z-welt { grid-template-columns: auto; }
  .jn-z-welt svg { display: none; }
}