/* „Unterwegs“: Feed, Kalender, Tag-Seite · Bea (Webdesign) · 2026-10-26 (js/unterwegs.js)
   Christoph 26.10.: „Kalender in den Homepagefarben, cinematisch … gewesene Termine → Seite des Tages mit Bildern … Feed wie bei Instagram … coole Bewegungseffekte“.
   Nutzt die Farben der Seite (--k, --hl, --g, --g2, --r, --t2, --disp). Bei „Bewegung reduzieren“ ruhig. */

/* Einblenden beim Scrollen: Beiträge fahren von unten ins Licht */
.uw-rv { opacity: 0; transform: translateY(40px) scale(.97); filter: brightness(.6); transition: opacity .9s ease, transform 1s cubic-bezier(.2,.7,.1,1), filter 1.2s ease; }
.uw-rv.is-on { opacity: 1; transform: none; filter: none; }

/* Umschalter Feed / Kalender */
.uw-umsch { display: inline-flex; border-radius: 99px; background: rgba(0,0,0,.25); padding: 4px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.uw-umsch button, .uw-umsch a { all: unset; cursor: pointer; padding: 10px 20px; border-radius: 99px; font: 700 14px Inter, sans-serif; color: var(--t2); transition: background .3s, color .3s; }
.uw-umsch .is-an { background: var(--g); color: #02160c; }
.uw-umsch :focus-visible { outline: 2px solid var(--g2); outline-offset: 2px; }

/* ---------- Feed ---------- */
.uw-feed { display: grid; gap: 28px; max-width: 640px; margin: 0 auto; }
.uw-feed.is-reihe { max-width: none; grid-template-columns: repeat(3, 1fr); align-items: start; }   /* Startseite PC: drei nebeneinander */
.uw-post { border-radius: 22px; overflow: hidden; background: rgba(255,255,255,.07); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 30px 70px rgba(0,0,0,.35); }
.uw-pk { display: flex; align-items: center; gap: 12px; padding: 12px 14px; }
.uw-ring { flex: none; width: 46px; height: 46px; border-radius: 50%; padding: 2px; background: conic-gradient(var(--g2), var(--g), var(--r), var(--g2)); }
.uw-ring img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid var(--k); display: block; background: #0c2f20; }
.uw-pk b { display: block; font-size: 15px; } .uw-pk small { color: var(--t2); font-size: 12px; }
.uw-dat { margin-left: auto; text-align: center; line-height: .9; flex: none; }
.uw-dat b { font: 900 30px var(--disp); color: var(--g2); } .uw-dat small { display: block; font: 800 12px var(--disp); letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.uw-bilder { position: relative; aspect-ratio: 4 / 5; background: #0c2f20; }
.uw-band { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.uw-band::-webkit-scrollbar { display: none; }
.uw-band img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; display: block; }
.uw-anz { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 700; padding: 5px 10px; border-radius: 99px; background: rgba(0,0,0,.55); pointer-events: none; }
.uw-pkt { position: absolute; bottom: 12px; left: 0; right: 0; display: flex; justify-content: center; gap: 6px; pointer-events: none; }
.uw-pkt i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.5); transition: background .3s, width .3s; } .uw-pkt i.is-an { background: #fff; width: 18px; border-radius: 4px; }
.uw-pfeil { all: unset; cursor: pointer; position: absolute; top: 50%; translate: 0 -50%; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.45); color: #fff; font-size: 20px; opacity: 0; transition: opacity .3s; }
.uw-bilder:hover .uw-pfeil { opacity: 1; } .uw-pfeil.l { left: 10px; } .uw-pfeil.r { right: 10px; }
.uw-txt { padding: 14px 16px 18px; } .uw-txt b { display: block; font: 900 26px/1 var(--disp); text-transform: uppercase; margin-bottom: 8px; }
.uw-txt p { margin: 0 0 10px; color: var(--t2); font-size: 15px; line-height: 1.55; white-space: pre-line; }
.uw-txt a { color: var(--g2); font-weight: 700; font-size: 14px; text-decoration: none; } .uw-txt a:hover { color: #fff; }
.uw-post.is-termin .uw-bilder { aspect-ratio: auto; height: 150px; display: grid; place-items: center; text-align: center; overflow: hidden;
  background: radial-gradient(ellipse at 50% 0%, rgba(109,255,192,.45), transparent 70%), linear-gradient(120deg, #1f8a58, #0f3b28); }
.uw-post.is-termin .uw-bilder span { font: 900 34px/1 var(--disp); text-transform: uppercase; color: #fff; text-shadow: 0 0 30px rgba(109,255,192,.6); }
.uw-post.is-termin .uw-bilder small { display: block; font: 700 12px Inter; letter-spacing: .2em; color: var(--g2); margin-bottom: 6px; }
.uw-leer { text-align: center; color: var(--t2); padding: 30px 0; } .uw-feed.is-reihe .uw-leer { grid-column: 1 / -1; }

/* ---------- Kalender ---------- */
.uw-kal { position: relative; }
.uw-kk { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; flex-wrap: wrap; }
.uw-monat { display: flex; align-items: center; gap: 16px; }
.uw-monat b { font: 900 clamp(32px, 3.4vw, 50px)/1 var(--disp); text-transform: uppercase; min-width: 7.5em; text-align: center; }
.uw-monat button { all: unset; cursor: pointer; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; background: rgba(255,255,255,.08); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); transition: background .3s, transform .3s; }
.uw-monat button:hover { background: rgba(109,255,192,.2); transform: scale(1.08); } .uw-monat button:focus-visible { outline: 2px solid var(--g2); outline-offset: 3px; }
.uw-leg { display: flex; gap: 18px; font-size: 13px; color: var(--t2); flex-wrap: wrap; }
.uw-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 4px; margin-right: 6px; vertical-align: -1px; }
.uw-buehne { perspective: 1600px; }
.uw-blatt { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; transform-origin: 50% 0; transform: rotateX(24deg) translateY(30px); opacity: .3; transition: transform 1.2s cubic-bezier(.2,.7,.1,1), opacity 1s; }
.uw-kal.is-on .uw-blatt { transform: rotateX(7deg); opacity: 1; }
.uw-blatt.raus { transition: transform .35s ease-in, opacity .35s; transform: rotateX(-80deg); opacity: 0; }
.uw-blatt.rein { transition: none; transform: rotateX(80deg); opacity: 0; }
.uw-wt { font: 800 14px var(--disp); letter-spacing: .14em; text-transform: uppercase; color: var(--t2); text-align: center; padding-bottom: 4px; }
.uw-z { all: unset; box-sizing: border-box; position: relative; aspect-ratio: 1.25; border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); overflow: hidden;
  opacity: 0; transform: translateY(14px); transition: opacity .6s ease calc(var(--i) * 18ms), transform .7s cubic-bezier(.2,.7,.1,1) calc(var(--i) * 18ms), box-shadow .3s, scale .35s; }
.uw-kal.is-on .uw-z { opacity: 1; transform: none; }
.uw-z.leer { background: transparent; box-shadow: none; }
.uw-z .n { font: 900 26px/1 var(--disp); color: rgba(255,255,255,.5); position: relative; z-index: 2; }
.uw-z.heute { box-shadow: inset 0 0 0 2px var(--g2), 0 0 30px rgba(109,255,192,.4); } .uw-z.heute .n { color: #fff; }
.uw-z.heute::after { content: 'HEUTE'; position: absolute; right: 10px; top: 12px; font-size: 10px; font-weight: 800; letter-spacing: .12em; color: var(--g2); z-index: 2; }
.uw-z.war { cursor: pointer; box-shadow: inset 0 0 0 1px rgba(109,255,192,.55), 0 14px 34px rgba(0,0,0,.4); }
.uw-z.war img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.6); transition: filter .4s, transform .8s; }
.uw-z.war .n { color: #fff; }
.uw-z.war:hover, .uw-z.war:focus-visible { scale: 1.07; z-index: 3; box-shadow: inset 0 0 0 2px var(--g2), 0 0 0 4px rgba(109,255,192,.25), 0 30px 60px rgba(0,0,0,.5); outline: none; }
.uw-z.war:hover img, .uw-z.war:focus-visible img { filter: none; transform: scale(1.08); }
.uw-z .was { position: absolute; z-index: 2; left: 12px; right: 10px; bottom: 9px; font-size: 12px; font-weight: 700; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.uw-z .zahl { position: absolute; z-index: 2; right: 10px; top: 10px; font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 99px; background: rgba(0,0,0,.5); }
.uw-z.kommt { background: linear-gradient(160deg, rgba(109,255,192,.28), rgba(18,194,112,.12)); box-shadow: inset 0 0 0 1px rgba(109,255,192,.45); }
.uw-z.kommt .n { color: #fff; } .uw-z.kommt .was { color: var(--g2); }
.uw-z.kommt.erst::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--g2); box-shadow: 0 0 14px var(--g2); }
.uw-z.kommt::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%); background-size: 250% 100%; animation: uwLicht 3.5s ease-in-out infinite; }
@keyframes uwLicht { from { background-position: 150% 0; } to { background-position: -50% 0; } }
.uw-z.gewesen { box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); } .uw-z.gewesen .was { color: var(--t2); font-weight: 600; }
.uw-vor { position: absolute; z-index: 5; width: 300px; border-radius: 18px; overflow: hidden; background: #0d3524; pointer-events: none;
  box-shadow: 0 0 0 1px rgba(109,255,192,.5), 0 30px 80px rgba(0,0,0,.6); opacity: 0; transform: translateY(10px) scale(.96); transition: opacity .3s, transform .35s cubic-bezier(.2,.7,.1,1); }
.uw-vor.is-an { opacity: 1; transform: none; }
.uw-vor img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.uw-vor div { padding: 12px 14px 14px; } .uw-vor b { display: block; font: 900 22px/1 var(--disp); text-transform: uppercase; margin: 4px 0 6px; }
.uw-vor small { color: var(--g2); font-weight: 700; font-size: 11px; letter-spacing: .06em; } .uw-vor p { margin: 0 0 8px; font-size: 13px; color: var(--t2); }
.uw-vor span { font-size: 13px; font-weight: 700; color: var(--g2); }
.uw-zoom { position: fixed; z-index: 9000; border-radius: 14px; overflow: hidden; background: #0c2f20 center / cover no-repeat; transition: all .75s cubic-bezier(.7,0,.2,1); }

/* ---------- Tag-Seite ---------- */
.uw-th { position: relative; height: 66vh; min-height: 420px; overflow: hidden; }
.uw-th img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); animation: uwKen 14s ease-out both; }
@keyframes uwKen { from { transform: scale(1.18); } to { transform: scale(1.04); } }
.uw-th::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.2) 30%, var(--k)); }
.uw-th .t { position: absolute; z-index: 2; left: 0; right: 0; bottom: 40px; }
.uw-datum { display: flex; align-items: flex-end; gap: 18px; animation: uwHoch 1s cubic-bezier(.2,.7,.1,1) .2s both; }
.uw-datum b { font: 900 clamp(110px, 13vw, 210px)/.8 var(--disp); color: var(--g2); text-shadow: 0 0 40px rgba(109,255,192,.5); }
.uw-datum span { font: 900 clamp(30px, 3.4vw, 56px)/1 var(--disp); text-transform: uppercase; padding-bottom: .1em; }
.uw-th h1 { font-size: clamp(40px, 4.4vw, 76px); margin-top: 14px; animation: uwHoch 1s cubic-bezier(.2,.7,.1,1) .45s both; }
@keyframes uwHoch { from { opacity: 0; transform: translateY(40px); } }
.uw-ti { padding: 34px 0 90px; display: grid; grid-template-columns: 1fr 2fr; gap: 50px; align-items: start; }
.uw-ti .eintrag + .eintrag { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); }
.uw-ti h2 { font: 900 28px/1 var(--disp); text-transform: uppercase; margin: 0 0 10px; }
.uw-ti p { color: var(--t2); line-height: 1.7; font-size: 17px; margin: 0 0 14px; white-space: pre-line; }
.uw-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 99px; background: rgba(255,255,255,.1); margin: 0 6px 6px 0; }
.uw-gal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.uw-gal button { all: unset; cursor: zoom-in; border-radius: 12px; overflow: hidden; aspect-ratio: 1; }
.uw-gal button:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.uw-gal img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s, filter .4s; }
.uw-gal button:hover img { transform: scale(1.06); } .uw-gal button:focus-visible { outline: 3px solid var(--g2); outline-offset: 2px; }
.uw-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.uw-nav a { color: var(--g2); font-weight: 700; text-decoration: none; } .uw-nav a:hover { color: #fff; }
.uw-lb { position: fixed; inset: 0; z-index: 9500; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; border: 0; padding: 0; background: rgba(2,10,6,.94); display: grid; place-items: center; }
.uw-lb:not([open]) { display: none; }
.uw-lb img { max-width: 92vw; max-height: 86vh; border-radius: 12px; box-shadow: 0 0 0 1px rgba(109,255,192,.4), 0 30px 90px rgba(0,0,0,.8); }
.uw-lb button { all: unset; cursor: pointer; position: absolute; width: 50px; height: 50px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; color: #fff; background: rgba(255,255,255,.1); }
.uw-lb .zu { top: 18px; right: 18px; } .uw-lb .l { left: 18px; top: 50%; } .uw-lb .r { right: 18px; top: 50%; }

@media (max-width: 1100px) { .uw-feed.is-reihe { grid-template-columns: 1fr 1fr; } .uw-feed.is-reihe .uw-post:nth-child(3) { display: none; } }
@media (max-width: 760px) {
  .uw-feed.is-reihe { grid-template-columns: 1fr; } .uw-feed.is-reihe .uw-post:nth-child(3) { display: block; }
  .uw-blatt { gap: 5px; } .uw-z { aspect-ratio: .85; padding: 6px; border-radius: 9px; } .uw-z .n { font-size: 18px; }
  .uw-z .was, .uw-z .zahl, .uw-z.heute::after { display: none; } .uw-wt { font-size: 11px; letter-spacing: .04em; }
  .uw-ti { grid-template-columns: 1fr; gap: 26px; } .uw-gal { grid-template-columns: 1fr 1fr; }
  .uw-th { height: 54vh; } .uw-monat b { min-width: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .uw-rv, .uw-z, .uw-blatt, .uw-kal.is-on .uw-blatt { opacity: 1; transform: none; filter: none; transition: none; }
  .uw-z.kommt::after, .uw-th img, .uw-datum, .uw-th h1 { animation: none; }
  .uw-zoom { transition: none; }
}

/* ---------- christoph-rickels.de (26.10.): Nachtblau statt FT-Grün, Inter statt Big Shoulders; Rot nur fürs Herz ---------- */
.uw-cr { --k: #070b16; --hl: #14306e; --g: #2a72ff; --g2: #9cc2ff; --r: #5b8cff; --t2: #c3cbd9; --disp: "Inter", system-ui, sans-serif; }
.uw-cr .uw-umsch .is-an { color: #fff; }
.uw-cr .uw-txt b, .uw-cr .uw-ti h2 { text-transform: none; font: 800 22px/1.15 var(--disp); letter-spacing: -.02em; }
.uw-cr .uw-post.is-termin .uw-bilder span { text-transform: none; font: 900 30px/1 var(--disp); letter-spacing: -.02em; }
.uw-cr .uw-dat b { font: 900 26px var(--disp); letter-spacing: -.03em; } .uw-cr .uw-dat small { font: 800 11px var(--disp); letter-spacing: .08em; }
.uw-cr .uw-z .n { font: 800 22px/1 var(--disp); } .uw-cr .uw-wt { font: 700 12px var(--disp); }
.uw-cr .uw-monat b { font: 900 clamp(28px, 3vw, 44px)/1 var(--disp); text-transform: none; letter-spacing: -.03em; }
.uw-cr .uw-vor b { font: 800 19px/1.15 var(--disp); text-transform: none; }
.uw-cr .uw-datum b { font: 900 clamp(100px, 12vw, 190px)/.8 var(--disp); letter-spacing: -.05em; }
.uw-cr .uw-datum span { font: 800 clamp(26px, 3vw, 46px)/1.05 var(--disp); text-transform: none; }
.uw-cr .uw-post { background: rgba(255,255,255,.05); }
/* Startseite, Bereich „Heute“: Unterwegs ersetzt die Karten „Aktuelle Momente“ (26.10.) */
.uw-heute { margin-top: clamp(40px, 6vw, 80px); }
.uw-heute .moments-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.uw-alle { text-align: center; margin: 26px 0 0; }
.moments-head[hidden], .moments-stage[hidden] { display: none !important; }
/* CR: feste Grüntöne aus der FT-Fassung durch Nachtblau ersetzen */
.uw-cr .uw-bilder, .uw-cr .uw-z.war, .uw-cr .uw-zoom, .uw-cr .uw-vor { background-color: #0e1526; }
.uw-cr .uw-post.is-termin .uw-bilder { background: radial-gradient(ellipse at 50% 0%, rgba(156,194,255,.45), transparent 70%), linear-gradient(120deg, #2a5bd6, #0e1a3d); }
.uw-cr .uw-ring img { border-color: #070b16; background: #0e1526; }
.uw-cr .uw-z.kommt { background: linear-gradient(160deg, rgba(156,194,255,.28), rgba(42,114,255,.12)); box-shadow: inset 0 0 0 1px rgba(156,194,255,.45); }
.uw-cr .uw-z.war { box-shadow: inset 0 0 0 1px rgba(156,194,255,.55), 0 14px 34px rgba(0,0,0,.4); }
.uw-cr .uw-z.war:hover, .uw-cr .uw-z.war:focus-visible { box-shadow: inset 0 0 0 2px var(--g2), 0 0 0 4px rgba(156,194,255,.25), 0 30px 60px rgba(0,0,0,.5); }
.uw-cr .uw-z.heute { box-shadow: inset 0 0 0 2px var(--g2), 0 0 30px rgba(156,194,255,.4); }
.uw-cr .uw-vor { box-shadow: 0 0 0 1px rgba(156,194,255,.5), 0 30px 80px rgba(0,0,0,.6); }
.uw-cr .uw-datum b { text-shadow: 0 0 40px rgba(156,194,255,.5); }
.uw-cr .uw-lb { background: rgba(4,7,13,.94); } .uw-cr .uw-lb img { box-shadow: 0 0 0 1px rgba(156,194,255,.4), 0 30px 90px rgba(0,0,0,.8); }
.uw-cr .uw-leg span:nth-child(2) i { background: #1c3a7a !important; box-shadow: inset 0 0 0 1px var(--g2) !important; }

/* Startseite „Heute“ (26.10., iPhone springt beim Wischen): Platz für eine Karte von Anfang an freihalten (gemessen 336 px, PC und Handy),
   damit nach dem Laden nichts nachrutscht. Ohne Termine und Beiträge steht der Hinweis mittig im selben Platz. */
.uw-heute #unterwegsFeed { min-height: 336px; }
.uw-heute #unterwegsFeed .uw-leer { min-height: 336px; display: grid; place-items: center; padding: 0; margin: 0; }
/* Videos (27.10., SL-022): im Band wie Bilder, in der Galerie mit ▶, im Großbild als Player */
.uw-band video { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; scroll-snap-align: start; display: block; background: #000; }
.uw-gal button { position: relative; background: #0a0f1c; }
.uw-gal button.ist-video::after { content: '▶'; position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: grid; place-items: center; font-size: 20px; color: #fff; background: rgba(0,0,0,.55); box-shadow: 0 0 0 2px rgba(255,255,255,.7); pointer-events: none; }
.uw-lb video { max-width: 92vw; max-height: 86vh; border-radius: 12px; background: #000; }
.uw-lb [hidden] { display: none; }
/* Rahmen A „Band unten“ (27.10., Christoph: auch auf der Homepage, mit Ort · Datum). Maße aus Jennys Vorlage rahmen-cr-a2 (1080 × 1350):
   Bild 1186 px hoch (cover, oben), Band als PNG darüber, „Ort · Datum“ bei x 84, y 1288, Inter 26 px, #b7c0d2. Alles in % / cqw, damit es mitskaliert. */
.uw-r { position: relative; flex: 0 0 100%; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; scroll-snap-align: start; background: #070b16; container-type: inline-size; }
.uw-band .uw-r { height: 100%; aspect-ratio: auto; }
.uw-r > img:first-child, .uw-r > video { position: absolute; left: 0; top: 0; width: 100%; height: 87.85%; object-fit: cover; object-position: 50% 0; display: block; }
.uw-r > video { object-fit: contain; background: #000; }
.uw-r .uw-r-band { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.uw-r-ort { position: absolute; left: 7.78%; top: 95.4%; font: 400 max(11px, 2.41cqw)/1 Inter, system-ui, sans-serif; color: #b7c0d2; white-space: nowrap; pointer-events: none; }
.uw-lb .uw-lb-r { width: min(92vw, calc(86vh * .8)); max-width: 680px; border-radius: 12px; }
.uw-lb .uw-lb-r > img:first-child { max-width: none; max-height: none; border-radius: 0; box-shadow: none; }
.uw-lb .uw-lb-r [hidden] { display: none; }
.uw-bilder:has(.uw-r) .uw-pkt { bottom: auto; top: 18px; }   /* Punkte nicht ins Band */
.uw-bilder:has(.uw-r) .uw-pkt i { box-shadow: 0 0 0 1px rgba(0,0,0,.25), 0 1px 4px rgba(0,0,0,.45); }   /* auf hellen Fotos sichtbar */
.uw-bilder:has(.uw-r) .uw-pkt { left: 50%; right: auto; translate: -50% 0; padding: 5px 8px; border-radius: 99px; background: rgba(0,0,0,.45); }   /* Kapsel wie beim Zähler (Jenny 27.10.) */