/* ══════════════════════════════════════════════════════════════════════════ PN-EVENTS — Termine im Spielkarten-Design ────────────────────────────────────────────────────────────────────────── Reiter "Termine" (index_new.html), diskutierte Termine im Community-Reiter, Vormerk-Liste, Termin-Detailseite sowie Melden/Bearbeiten. Karten, Knoepfe, Formularfelder und Seitenkopf kommen aus pn-ui.css; hier steht nur, was ein Termin zusaetzlich braucht, und die Neutralisierung der alten Termin-Regeln aus theme.v2.css. Geladen im (head_extra), pn-ui.css folgt spaeter aus header.html — bei gleicher Spezifitaet gewinnt also pn-ui.css. Alles ist auf body.pn-ui begrenzt; ohne diese Klasse bleibt jede Seite unveraendert. Grundsaetze: Live-Farben, genau EIN Rahmen pro Karte/Flaeche, keine Rahmen innerhalb, Touch-Ziele >= 44px, Metadaten >= 12px, kein Ueberlauf ab 320px, Titel nie gekuerzt, kein !important. ══════════════════════════════════════════════════════════════════════════ */ /* ══ Seitenrahmen des Reiters ════════════════════════════════════════════ */ body.pn-ui .pn-events { max-width: var(--pn-max); margin: 0 auto; padding: 0 var(--pn-gutter) 2rem; box-sizing: border-box; } /* theme.v2.css setzt unter 600px #eventsCalendar { padding; overflow:hidden } */ body.pn-ui #eventsCalendar.pn-events { width: auto; padding: 0 var(--pn-gutter) 2rem; overflow: visible; } /* Seitenkopf: Kicker + Georgia-Titel links, Aktionen rechts */ body.pn-ui .pn-events__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 1.5rem; margin: 2rem 0 1.25rem; } body.pn-ui .pn-events__intro { flex: 1 1 22rem; min-width: 0; } body.pn-ui .pn-events__intro .pn-heading { margin-bottom: 0.5rem; } body.pn-ui .pn-events__intro .pn-lead { margin-bottom: 0; } body.pn-ui .pn-events__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; min-width: 0; } body.pn-ui .pn-events__actions .pn-chip { gap: 0.4rem; white-space: normal; } body.pn-ui .pn-events__actions .pn-chip span { color: var(--accent); } /* Kompakter Kopf fuer "Termine mit Diskussion" im Community-Reiter */ body.pn-ui .pn-events--talk { padding-bottom: 0.5rem; } body.pn-ui .pn-events__head--compact { margin: 1.5rem 0 1rem; } body.pn-ui .pn-events__title { margin: 0; font-family: var(--pn-serif); font-weight: 400; font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--bsn); overflow-wrap: break-word; } /* ══ Filter: gleiche Felder wie die Feed-Suche, ohne eigenen Rahmen ══════ */ body.pn-ui .pn-events__filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin: 0 0 1rem; } body.pn-ui .pn-events__field { display: flex; flex-direction: column; gap: 0.35rem; flex: 1 1 11rem; min-width: 0; } body.pn-ui .pn-events__field--city { flex: 2 1 16rem; } body.pn-ui .pn-events__field .pn-input, body.pn-ui .pn-events__field .pn-select { width: 100%; } body.pn-ui .pn-events__label { font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--muted); } body.pn-ui .pn-events__submit { display: flex; flex-wrap: wrap; gap: 0.5rem; flex: 0 0 auto; } @media (max-width: 560px) { body.pn-ui .pn-events__field { flex-basis: 100%; } body.pn-ui .pn-events__submit { flex: 1 1 100%; } body.pn-ui .pn-events__submit .pn-btn { flex: 1 1 auto; } body.pn-ui .pn-events__actions { flex: 1 1 100%; } body.pn-ui .pn-events__actions > * { flex: 1 1 auto; justify-content: center; text-align: center; } } /* ══ Kalender-Aufklapper: EIN ruhiger Rahmen, innen nur Flaechen ════════ */ body.pn-ui .pn-events .events-calendar-toggle { margin: 0 0 1.5rem; background: var(--card); border: 1px solid var(--border); border-radius: var(--pn-radius); box-shadow: none; } body.pn-ui .pn-events .events-calendar-toggle > summary { display: flex; align-items: center; gap: 0.6rem; min-height: 48px; padding: 0.5rem 1rem; border-radius: var(--pn-radius); color: var(--bsn); font-size: 0.9375rem; font-weight: 700; cursor: pointer; list-style: none; } body.pn-ui .pn-events .events-calendar-toggle > summary::-webkit-details-marker { display: none; } body.pn-ui .pn-events .events-calendar-toggle > summary::before { content: "+"; display: inline-flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; margin: 0; background: var(--bg); color: var(--bsn); border: 0; border-radius: 50%; font-size: 1.1rem; line-height: 1; } body.pn-ui .pn-events .events-calendar-toggle[open] > summary::before { content: "\2212"; } body.pn-ui .pn-events .events-calendar-toggle > summary:hover::before { background: #FFF1E6; } body.pn-ui .pn-events .events-calendar-toggle > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.pn-ui .pn-events .events-calendar { padding: 0 1rem 1rem; } body.pn-ui .pn-events .events-calendar__nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 0.5rem; margin: 0 0 0.75rem; } body.pn-ui .pn-events .events-calendar__month { margin: 0; font-family: var(--pn-serif); font-weight: 400; font-size: 1.2rem; color: var(--pn-ink); text-align: center; } body.pn-ui .pn-events .events-calendar__nav-btn { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: var(--bg); color: var(--bsn); border: 0; border-radius: var(--pn-radius-sm); font-size: 1.4rem; font-weight: 700; line-height: 1; text-decoration: none; } body.pn-ui .pn-events .events-calendar__nav-btn:hover { background: #FFF1E6; } body.pn-ui .pn-events .events-calendar__nav-btn:focus-visible, body.pn-ui .pn-events a.events-calendar__cell:focus-visible, body.pn-ui .pn-events .events-calendar__sheet-list a:focus-visible, body.pn-ui .pn-events .events-calendar__today:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.pn-ui .pn-events .events-calendar__today { display: inline-flex; align-items: center; min-height: 44px; margin: 0 0 0.5rem; color: var(--bsn); font-size: 0.875rem; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } body.pn-ui .pn-events .events-calendar__weekdays { color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; } body.pn-ui .pn-events .events-calendar__cell { min-height: 44px; padding: 0.25rem; background: var(--bg); color: #374151; border: 0; border-radius: 8px; font-size: 0.875rem; box-shadow: none; } body.pn-ui .pn-events a.events-calendar__cell { background: #FFF1E6; color: var(--bsn); font-weight: 700; } body.pn-ui .pn-events a.events-calendar__cell:hover { background: #FFE2CC; outline: 0; } body.pn-ui .pn-events .events-calendar__cell.is-muted { background: transparent; color: #9CA3AF; } body.pn-ui .pn-events a.events-calendar__cell.is-muted { background: var(--bg); color: var(--muted); } body.pn-ui .pn-events .events-calendar__cell i { background: var(--accent); } /* Heute: Unterstreichung statt Ring — kein Rahmen im Rahmen */ body.pn-ui .pn-events .events-calendar__cell.is-today { font-weight: 800; color: var(--bsn); } body.pn-ui .pn-events .events-calendar__cell.is-today > span { text-decoration: underline 2px var(--accent); text-underline-offset: 4px; } body.pn-ui .pn-events .events-calendar__sheet-list { border-top: 1px solid var(--border); } body.pn-ui .pn-events .events-calendar__sheet-list a { align-items: center; min-height: 44px; padding: 0.4rem 0.6rem; color: #374151; font-size: 0.875rem; border-radius: 8px; } body.pn-ui .pn-events .events-calendar__sheet-list a:hover { background: var(--bg); } body.pn-ui .pn-events .events-calendar__sheet-list a > span { overflow-wrap: anywhere; min-width: 0; } body.pn-ui .pn-events .events-calendar__sheet-list b { color: var(--bsn); font-size: 0.8125rem; font-weight: 700; } body.pn-ui .pn-events .events-calendar__sheet-list em { color: var(--muted); font-size: 0.8125rem; } body.pn-ui .pn-events .events-calendar__sheet-empty { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.875rem; } @media (max-width: 600px) { body.pn-ui .pn-events .events-calendar { padding: 0 0.5rem 0.75rem; } body.pn-ui .pn-events .events-calendar__weekdays, body.pn-ui .pn-events .events-calendar__grid { gap: 0.2rem; } body.pn-ui .pn-events .events-calendar__cell { min-height: 44px; font-size: 0.8125rem; } body.pn-ui .pn-events .events-calendar__weekdays { font-size: 0.75rem; letter-spacing: 0; } } /* Sehr schmale Screens (320px): Sieben 44px-Tage passen nur randabfallend. Der Aufklapper reicht bis an den Bildschirmrand, der eine Rahmen bleibt. */ @media (max-width: 374px) { body.pn-ui .pn-events .events-calendar-toggle { margin-left: calc(-1 * var(--pn-gutter)); margin-right: calc(-1 * var(--pn-gutter)); border-radius: 0; } body.pn-ui .pn-events .events-calendar { padding: 0 0 0.75rem; } body.pn-ui .pn-events .events-calendar__nav, body.pn-ui .pn-events .events-calendar__today, body.pn-ui .pn-events .events-calendar__sheet-list, body.pn-ui .pn-events .events-calendar__sheet-empty { margin-left: 0.5rem; margin-right: 0.5rem; } body.pn-ui .pn-events .events-calendar__weekdays, body.pn-ui .pn-events .events-calendar__grid { gap: 1px; } body.pn-ui .pn-events .events-calendar__cell { padding: 0.2rem 0; border-radius: 4px; } } /* ══ Tagesmarken: Georgia-Datum, feine Linie, Zaehler als Pille ══════════ */ body.pn-ui .pn-events .events-feed { display: block; } body.pn-ui .pn-events .events-daymark { display: flex; align-items: center; gap: 0.75rem; width: auto; max-width: none; margin: 2rem 0 1rem; padding: 0; font: inherit; scroll-margin-top: 5rem; } body.pn-ui .pn-events .events-feed > .events-daymark:first-child { margin-top: 0.5rem; } body.pn-ui .pn-events .events-daymark__day { flex: 0 1 auto; min-width: 0; font-family: var(--pn-serif); font-weight: 400; font-size: 1.3rem; line-height: 1.2; letter-spacing: 0; color: var(--bsn); white-space: normal; overflow-wrap: break-word; } body.pn-ui .pn-events .events-daymark__line { flex: 1 1 1rem; height: 1px; min-width: 1rem; background: var(--border); } body.pn-ui .pn-events .events-daymark__count { flex: 0 0 auto; min-width: 1.75rem; padding: 0.2rem 0.6rem; background: #FFF1E6; color: var(--bsn); border-radius: 999px; font-family: inherit; font-size: 0.8125rem; font-weight: 700; line-height: 1.3; text-align: center; } /* ══ Terminkarte (components/event_card.html) ════════════════════════════ Grundform: .story-card.pn-card aus pn-ui.css. */ body.pn-ui .pn-events__grid { margin: 0; } body.pn-ui .pn-card.event-card .media-crop { position: relative; overflow: hidden; background: var(--bg); } body.pn-ui .pn-card.event-card .media-crop img { display: block; width: 100%; height: 100%; object-fit: cover; } body.pn-ui .pn-card.event-card .card-content { gap: 0.45rem; } body.pn-ui .pn-card.event-card:not(.has-media) .card-content { padding-top: 0.2rem; } /* Zeit und Ort: ruhig unter dem Titel */ body.pn-ui .pn-card.event-card .event-card__when, body.pn-ui .pn-card.event-card .event-card__where { display: flex; align-items: center; flex-wrap: wrap; gap: 0.2rem 0.45rem; margin: 0; font-size: 0.875rem; line-height: 1.4; color: var(--pn-text); overflow-wrap: anywhere; } body.pn-ui .pn-card.event-card .event-card__when { margin-top: 0.15rem; } body.pn-ui .pn-card.event-card .event-card__glyph { flex: 0 0 auto; width: 16px; height: 16px; color: var(--muted); } body.pn-ui .pn-card.event-card .event-card__when > time { color: var(--bsn); font-size: 0.875rem; font-weight: 700; letter-spacing: 0; } body.pn-ui .pn-card.event-card .event-card__time { color: var(--pn-text); font-size: 0.875rem; font-weight: 600; } body.pn-ui .pn-card.event-card .event-card__time::before { content: "\00B7"; margin-right: 0.45rem; color: var(--muted); } body.pn-ui .pn-card.event-card .event-card__flag { font-size: 1rem; line-height: 1; } body.pn-ui .pn-card.event-card .event-card__city { color: var(--pn-ink); font-weight: 600; } body.pn-ui .pn-card.event-card .event-card__country { color: var(--muted); font-size: 0.8125rem; } body.pn-ui .pn-card.event-card .event-card__venue { margin: -0.2rem 0 0; padding-left: calc(16px + 0.45rem); color: var(--muted); font-size: 0.8125rem; line-height: 1.4; overflow-wrap: anywhere; } body.pn-ui .pn-card.event-card.has-text .story-preview { -webkit-line-clamp: 3; margin-top: 0.2rem; } /* Kommentar-Auszug: Flaeche statt Seitenlinie — kein Rahmen in der Karte */ body.pn-ui .pn-card.event-card .event-card__talk { margin: 0.2rem 0 0; padding: 0.65rem 0.8rem; background: var(--bg); border: 0; border-radius: 8px; } body.pn-ui .pn-card.event-card .event-card__talk-line { margin: 0; color: var(--pn-text); font-size: 0.8125rem; line-height: 1.45; overflow-wrap: anywhere; } body.pn-ui .pn-card.event-card .event-card__talk-line + .event-card__talk-line { margin-top: 0.3rem; } body.pn-ui .pn-card.event-card .event-card__talk-line b { color: var(--pn-ink); font-weight: 700; } /* Vergangene Termine (Vormerk-Liste): Titel gedaempft, Bild entsaettigt */ body.pn-ui .pn-card.event-card.is-past .pn-card__title { color: var(--muted); } body.pn-ui .pn-card.event-card.is-past .media-crop img { filter: grayscale(1); } /* Meta-Zeile: Quelle links, Kommentare/Vormerken rechts in EINER Zeile */ body.pn-ui .pn-card.event-card .meta-author { flex: 1 1 7rem; } body.pn-ui .pn-card.event-card .meta-author .author-avatar { background: #FFF1E6; color: var(--bsn); } body.pn-ui .pn-card.event-card .pn-card__actions { flex: 0 1 auto; justify-content: flex-end; margin-left: auto; } body.pn-ui .pn-card.event-card .event-bm-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0; background: none; color: var(--muted); border: 0; border-radius: 999px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease, color 0.15s ease; } body.pn-ui .pn-card.event-card .event-bm-btn svg { fill: none; stroke: currentColor; } body.pn-ui .pn-card.event-card .event-bm-btn:hover { background: var(--bg); color: var(--bsn); } body.pn-ui .pn-card.event-card .event-bm-btn[aria-pressed="true"] { color: var(--bsn); } body.pn-ui .pn-card.event-card .event-bm-btn[aria-pressed="true"] svg { fill: var(--bsn); } body.pn-ui .pn-card.event-card .event-bm-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.pn-ui .pn-card.event-card .pn-card__comments:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ══ Vormerk-Liste ═══════════════════════════════════════════════════════ */ body.pn-ui .pn-events-list .pn-events__head { margin-top: 0.5rem; } body.pn-ui .pn-events-list .empty-state { max-width: none; margin: 1rem 0; } /* ══ Detailseite, Melden, Bearbeiten ═════════════════════════════════════ */ body.pn-ui .pn-events-back { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; margin: 0 0 0.75rem; color: var(--bsn); font-size: 0.9rem; font-weight: 600; text-decoration: none; } body.pn-ui .pn-events-back:hover { text-decoration: underline; text-underline-offset: 3px; } body.pn-ui .pn-events-back:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } body.pn-ui .event-detail__card { position: relative; } body.pn-ui .event-detail__card .pn-kicker { flex-wrap: wrap; } body.pn-ui .event-detail__media { margin: 0 0 1.25rem; overflow: hidden; border-radius: var(--pn-radius-sm); background: var(--bg); } body.pn-ui .event-detail__media img { display: block; width: 100%; height: auto; } body.pn-ui .event-detail__when { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 1.25rem; color: var(--bsn); font-size: 1rem; font-weight: 700; line-height: 1.4; } body.pn-ui .event-detail__when svg { flex: 0 0 auto; width: 18px; height: 18px; color: var(--muted); } body.pn-ui .event-detail__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.9rem 1.25rem; margin: 0 0 1.25rem; padding: 1rem 1.1rem; background: var(--bg); border: 0; border-radius: var(--pn-radius-sm); } body.pn-ui .event-detail__facts div { min-width: 0; } body.pn-ui .event-detail__facts dt { color: var(--muted); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } body.pn-ui .event-detail__facts dd { margin: 0.2rem 0 0; color: var(--pn-ink); font-size: 0.95rem; line-height: 1.45; overflow-wrap: anywhere; } @media (max-width: 560px) { body.pn-ui .event-detail__facts { grid-template-columns: minmax(0, 1fr); } } body.pn-ui .event-detail .event-richtext { color: var(--pn-text); font-size: 1rem; line-height: 1.65; overflow-wrap: break-word; } body.pn-ui .event-detail .event-richtext table { display: block; overflow-x: auto; } body.pn-ui .event-detail .event-richtext th, body.pn-ui .event-detail .event-richtext td { border: 0; border-bottom: 1px solid var(--border); } body.pn-ui .event-detail .event-richtext th { background: var(--bg); } body.pn-ui .event-detail__more { margin: 1.25rem 0 0; padding-top: 0.5rem; border-top: 1px solid var(--border); color: var(--pn-text); font-size: 0.9375rem; line-height: 1.6; } body.pn-ui .event-detail__more > summary { display: flex; align-items: center; min-height: 44px; color: var(--bsn); font-weight: 700; cursor: pointer; } body.pn-ui .event-detail__more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } body.pn-ui .event-detail__more .event-richtext { white-space: pre-line; } body.pn-ui .event-detail__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin: 1.5rem 0 0; } body.pn-ui .event-detail__hint { flex: 1 1 100%; margin: 0; color: var(--muted); font-size: 0.8125rem; line-height: 1.5; } /* Vormerken als Knopf mit Zustand (aria-pressed / .is-active aus dem JS) */ body.pn-ui .event-detail__actions .event-bookmark-btn { width: auto; height: auto; color: var(--bsn); font-size: 0.9rem; } body.pn-ui .event-detail__actions .event-bookmark-btn svg { fill: none; stroke: currentColor; } body.pn-ui .event-detail__actions .event-bookmark-btn[aria-pressed="true"] { background: var(--bsn); border-color: var(--bsn); color: #fff; } body.pn-ui .event-detail__actions .event-bookmark-btn[aria-pressed="true"] svg { fill: currentColor; } /* Kommentare: eigene Flaeche unter der Karte */ body.pn-ui .event-detail__comments { max-width: none; margin: 1.25rem 0 0; } body.pn-ui .event-detail__comments .comments-heading { margin: 0 0 1rem; font-family: var(--pn-serif); font-weight: 400; font-size: 1.4rem; color: var(--bsn); } body.pn-ui .event-detail__comments .comment-item { margin: 0 0 0.6rem; padding: 0.8rem 1rem; background: var(--bg); border: 0; border-radius: var(--pn-radius-sm); } body.pn-ui .event-detail__comments .comment-nested { margin: 0.6rem 0 0 0.75rem; padding: 0.6rem 0 0 0.75rem; background: transparent; border-radius: 0; } body.pn-ui .event-detail__comments .comment-header { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.5rem; } body.pn-ui .event-comment__avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 auto; background: var(--bsn); color: #fff; border-radius: 50%; font-size: 0.75rem; font-weight: 700; } body.pn-ui .event-comment__badge { display: inline-block; padding: 0.1rem 0.55rem; background: var(--accent); color: var(--bsn); border-radius: 999px; font-size: 0.75rem; font-weight: 700; } body.pn-ui .event-detail__comments .comment-date { color: var(--muted); font-size: 0.8125rem; } body.pn-ui .event-detail__comments .comment-text { margin: 0.4rem 0 0; color: var(--pn-ink); font-size: 0.95rem; line-height: 1.55; overflow-wrap: anywhere; } body.pn-ui .event-comment__edit { display: inline-flex; align-items: center; gap: 0.35rem; min-height: 44px; padding: 0 0.25rem; color: var(--bsn); font-size: 0.8125rem; font-weight: 600; text-decoration: none; } body.pn-ui .event-comment__edit:hover { text-decoration: underline; } body.pn-ui .event-detail__comments .comment-form { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.25rem; } body.pn-ui .event-detail__comments .comment-textarea { width: 100%; min-height: 110px; resize: vertical; } body.pn-ui .event-detail__comments .comment-form .pn-btn { align-self: flex-end; } body.pn-ui .event-detail__status { margin: 0.5rem 0 0; padding: 0.6rem 0.8rem; background: #FEF2F2; color: #B91C1C; border-radius: 8px; font-size: 0.875rem; } body.pn-ui .event-detail__status[hidden] { display: none; } body.pn-ui .event-detail__login { display: inline-flex; margin-top: 0.5rem; } /* Formulare: pn-surface, Felder aus pn-ui */ body.pn-ui .event-form.pn-surface { display: flex; flex-direction: column; gap: 1rem; max-width: none; margin: 0; } body.pn-ui .event-form label { display: flex; flex-direction: column; gap: 0.35rem; min-width: 0; color: var(--pn-ink); font-size: 0.875rem; font-weight: 600; letter-spacing: 0; text-transform: none; } body.pn-ui .event-form .pn-input { width: 100%; font-weight: 400; } body.pn-ui .event-form textarea.pn-input { min-height: 120px; resize: vertical; } body.pn-ui .event-form input[type="file"].pn-input { padding: 0.6rem 0.85rem; cursor: pointer; } body.pn-ui .event-form .event-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } @media (max-width: 560px) { body.pn-ui .event-form .event-form__row { grid-template-columns: minmax(0, 1fr); } } body.pn-ui .event-form .event-form__check { flex-direction: row; align-items: center; gap: 0.65rem; min-height: 44px; font-weight: 500; } body.pn-ui .event-form .event-form__check input { flex: 0 0 auto; width: 1.25rem; height: 1.25rem; min-height: 0; margin: 0; padding: 0; accent-color: var(--bsn); } body.pn-ui .event-form .event-form__hint, body.pn-ui .pn-events-page .event-form__hint { margin: 0; color: var(--muted); font-size: 0.875rem; line-height: 1.5; } body.pn-ui .event-form .event-form__current-img { display: block; max-width: min(240px, 100%); height: auto; border-radius: var(--pn-radius-sm); } body.pn-ui .event-form .event-form__submit { align-self: flex-start; min-height: 48px; padding: 0 1.5rem; } body.pn-ui .pn-events-page .event-form__error { margin: 0 0 1rem; padding: 0.75rem 0.9rem; background: #FEF2F2; color: #B91C1C; border: 0; border-radius: var(--pn-radius-sm); font-size: 0.9rem; } body.pn-ui .event-reported__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; } /* ══ Reduzierte Bewegung ═════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { body.pn-ui .pn-card.event-card .event-bm-btn { transition: none; } body.pn-ui .pn-events .events-daymark { scroll-margin-top: 5rem; } }