:root {
  --bsn: #2a333f;
  --accent: #FF6D02;
  --border: #E5E7EB;
  --muted: #6B7280;
  --bg: #F7F8FA;
  --card: #FFFFFF;
  --hover-shadow: rgba(42,51,63,0.25);
}
* { margin:0; padding:0; box-sizing:border-box; }
  body { font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; background:#F9FAFB; color:#1F2937; min-height:100vh; -webkit-font-smoothing:antialiased; }

  /* === Fokus sichtbar (WCAG 2.4.7) === */
  :focus-visible { outline:2px solid var(--accent,#FF6D02); outline-offset:2px; border-radius:8px; }
  .clickable-card:focus-visible, .story-card:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
  .filter-toggle-btn:focus-visible, .nav-toggle:focus-visible, .login-toggle-btn:focus-visible { outline:2px solid #fff; outline-offset:2px; }

  /* === Header === */
  .site-header { background:#1F2937; padding:0.75rem 1.2rem; display:flex; align-items:center; flex-wrap:wrap; gap:0.5rem; position:sticky; top:0; z-index:100; box-shadow:0 1px 3px rgba(0,0,0,0.08); }
  .site-logo { display:flex; align-items:center; gap:0.5rem; text-decoration:none; color:#F9FAFB; min-width:0; flex-shrink:1; }
  .site-logo .logo-icon { width:36px; height:36px; background:#374151; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:1.3rem; flex-shrink:0; }
  .site-logo .logo-text { font-weight:800; font-size:1.05rem; letter-spacing:-0.01em; color:#F9FAFB; white-space:nowrap; }
  .site-logo .logo-sub { font-weight:400; color:#9CA3AF; font-size:0.75rem; }
  .logo-img { height:38px; width:auto; display:block; }
  .site-logo-sub { font-size:0.68rem; font-weight:500; color:#9CA3AF; letter-spacing:0.03em; margin-left:0.3rem; white-space:normal; word-break:break-word; }
  .nav-toggle { background:none; border:none; color:#D1D5DB; cursor:pointer; padding:.5rem .6rem; min-width:44px; min-height:44px; border-radius:10px; margin-right:0.5rem; display:inline-flex; align-items:center; justify-content:center; transition:opacity 0.2s; }
  .nav-toggle:hover { opacity:0.7; }

  /* === Index Grid & Cards === */
  .main-grid { max-width:640px; margin:1rem auto; padding:0 0.8rem; display:flex; flex-direction:column; gap:1rem; }
  .story-card { background:#fff; border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.04); transition:box-shadow 0.2s ease, transform 0.2s ease; position:relative; }
  .story-card:hover { box-shadow:0 12px 36px rgba(42,51,63,0.25),0 6px 16px rgba(0,0,0,0.12); transform:translateY(-4px); }
  .story-card img { width:100%; height:100%; object-fit:cover; display:block; }
  .story-card video { width:100%; height:auto; max-height:600px; object-fit:contain; display:block; background:#000; }
  .story-card audio { width:100%; margin-top:0.5rem; }
  .story-halle-badge { position:absolute; top:0.5rem; right:0.5rem; background:#1F2937; color:#F9FAFB; padding:0.2rem 0.55rem; border-radius:6px; font-size:0.72rem; font-weight:600; letter-spacing:0.02em; z-index:5; }
  .story-ausverkauft-badge { position:absolute; top:0; left:0; right:0; z-index:7; background:linear-gradient(180deg,#EF4444 0%,#DC2626 100%); color:#fff; padding:0.4rem 1rem; font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-align:center; box-shadow:0 2px 8px rgba(220,38,38,0.3); display:flex; align-items:center; justify-content:center; gap:0.4rem; flex-wrap:wrap; }
  .card-content { padding:0.75rem 1rem 0.7rem; display:flex; flex-direction:column; gap:0.35rem; }
  .story-time { font-size:0.7rem; color:#9CA3AF; font-weight:400; letter-spacing:0.01em; }
  .story-preview { display:none; }
  .text-only .story-preview { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-size:0.85rem; line-height:1.55; color:#4B5563; margin-bottom:0; }
  /* Medien-Cards MIT Text: Vorschau unter dem Medium anzeigen (3 Zeilen) */
  .has-text .story-preview { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; font-size:0.85rem; line-height:1.55; color:#4B5563; margin-bottom:0; }
  .card-link { text-decoration:none; color:inherit; display:block; }
  .author-avatar { width:24px; height:24px; border-radius:50%; background:#E5E7EB; color:#6B7280; display:inline-flex; align-items:center; justify-content:center; font-size:0.65rem; font-weight:700; letter-spacing:0.02em; flex-shrink:0; }
  .card-meta { display:flex; align-items:center; gap:0.5rem; padding-top:0.5rem; margin-top:0.35rem; border-top:1px solid #F3F4F6; flex-wrap:wrap; }
  .card-meta-item { display:flex; align-items:center; gap:0.2rem; font-size:0.72rem; color:#9CA3AF; }
  .meta-author { display:flex; align-items:center; gap:0.35rem; color:#6B7280; font-size:0.75rem; font-weight:500; }
  .meta-spacer { flex:1; }
  .stat-like-btn { background:none; border:none; border-radius:999px; padding:0.25rem 0.6rem; font-size:0.72rem; cursor:pointer; color:#9CA3AF; font-family:inherit; transition:all 0.15s; display:flex; align-items:center; gap:0.2rem; -webkit-tap-highlight-color:transparent; min-width:44px; min-height:36px; justify-content:center; }
  .stat-like-btn svg, .stat-like-btn svg path { stroke:#9CA3AF !important; fill:none !important; }
  .stat-like-btn.liked svg, .stat-like-btn.liked svg path { stroke:#EF4444 !important; fill:#EF4444 !important; }
  .stat-like-btn:active { transform:scale(0.96); }
  .bm-btn { background:none; border:none; outline:none; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
  .bm-btn:active { transform:scale(0.96); }
  .fw-btn { background:none; border:none; outline:none; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
  .fw-btn:active { transform:scale(0.96); }

  /* Touch-Ziele >= 44px */
  .stat-like-btn, .bm-btn, .fw-btn { min-width:44px; min-height:44px; }
  .card-meta { gap:.35rem; padding-top:.6rem; }

  /* === Ad Banner Cards === */
  .ad-banner-card { background:linear-gradient(135deg,#F7F8FA 0%,#EEF0F4 100%); border-radius:16px; overflow:hidden; box-shadow:0 1px 3px rgba(42,51,63,0.08),0 1px 2px rgba(0,0,0,0.04); transition:box-shadow 0.2s ease, transform 0.2s ease; position:relative; border:1px solid rgba(42,51,63,0.12); display:flex; flex-direction:column; }
    .ad-banner-card:hover { box-shadow:0 12px 36px rgba(42,51,63,0.25),0 6px 16px rgba(0,0,0,0.12); transform:translateY(-4px); }
    .ad-banner-label-top { text-align:center; font-family:'Inter','Space Grotesk',system-ui,sans-serif; font-size:0.68rem; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; color:#9CA3AF; padding:0.4rem 0 0.3rem; background:rgba(255,255,255,0.5); border-bottom:1px solid rgba(42,51,63,0.06); }
    .ad-banner-link { display:flex; flex-direction:column; text-decoration:none; color:inherit; padding:1rem; gap:0.5rem; position:relative; flex:1; align-items:center; justify-content:center; min-height:200px; }
    .ad-banner-body { display:flex; flex-direction:column; gap:0.3rem; align-items:center; text-align:center; }
    .ad-banner-title { font-family:'Inter','Space Grotesk',system-ui,sans-serif; font-size:0.95rem; font-weight:700; color:var(--bsn); }
    .ad-banner-text { font-family:'Inter',system-ui,sans-serif; font-size:0.78rem; line-height:1.5; color:#4B5563; }
    .ad-banner-cta { font-family:'Inter',system-ui,sans-serif; font-size:0.78rem; font-weight:600; color:var(--bsn); margin-top:0.2rem; }
    .ad-banner-img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:8px; }

  /* === Toast Notification === */
  .submit-toast { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(100px); background:#FEF2F2; border:2px solid #DC2626; border-radius:12px; padding:1rem 1.5rem; display:flex; align-items:center; gap:0.6rem; box-shadow:0 8px 24px rgba(0,0,0,0.15); z-index:100001; opacity:0; transition:transform 0.3s ease, opacity 0.3s ease; pointer-events:none; max-width:90vw; }
  .submit-toast.show { transform:translateX(-50%) translateY(0); opacity:1; }
  .submit-toast-icon { font-size:1.2rem; flex-shrink:0; }
  .submit-toast-msg { font-size:0.9rem; color:#991B1B; font-weight:600; }

  /* === Filter === */
  .frontend-filter { max-width:640px; margin:0.5rem auto 0; padding:0 0.8rem; display:flex; gap:0.4rem; flex-wrap:wrap; align-items:center; }
  .frontend-filter a { display:inline-block; padding:0.35rem 0.8rem; border-radius:999px; text-decoration:none; font-size:0.78rem; font-weight:500; transition:all 0.15s; border:1.5px solid transparent; }
  .frontend-filter a.filter-pill { background:#fff; color:#6B7280; border-color:#E5E7EB; }
  .frontend-filter a.filter-pill.active { background:#1F2937; color:#fff; border-color:#1F2937; font-weight:700; }
  .filter-toggle-btn { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:#D1D5DB; font-size:0.78rem; font-weight:600; cursor:pointer; padding:0.35rem 0.7rem; line-height:1.3; transition:all 0.15s; margin-left:0.5rem; font-family:inherit; }
  .filter-toggle-btn:hover { background:rgba(255,255,255,0.15); border-color:rgba(255,255,255,0.25); }
  .filter-toggle-btn.active { background:rgba(255,255,255,0.2); border-color:#D1D5DB; }
  .notif-bell { position:relative; display:inline-flex; align-items:center; cursor:pointer; margin-left:0.3rem; color:#D1D5DB; appearance:none; -webkit-appearance:none; border:none; background:none; }
  .notif-bell:hover { color:#fff; }
  .notif-badge { position:absolute; top:-4px; right:-6px; background:#EF4444; color:#fff; font-size:0.62rem; font-weight:700; min-width:16px; height:16px; border-radius:8px; display:flex; align-items:center; justify-content:center; padding:0 4px; line-height:1; }
  .filter-collapsed { display:none; }
  .filter-backdrop { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,0.2); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); display:none; }
  .filter-backdrop.open { display:flex; align-items:flex-start; justify-content:center; padding-top:4rem; }
  .filter-overlay { background:#fff; border-radius:16px; box-shadow:0 12px 48px rgba(0,0,0,0.12); padding:1.2rem 1.5rem; width:90vw; max-width:600px; animation:fadeDown 0.2s ease; }
  .filter-overlay-title { font-size:1.1rem; font-weight:700; color:#1F2937; margin:0 0 1.2rem; }
  .filter-section { margin-bottom:1.1rem; }
  .filter-section-label { display:block; font-size:0.72rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; color:#9CA3AF; margin-bottom:0.35rem; }
  .filter-select { width:100%; box-sizing:border-box; padding:0.5rem 0.8rem; min-height:48px; border:1.5px solid #E5E7EB; border-radius:10px; font-size:0.95rem; font-family:inherit; color:#1F2937; background:#FAFAFA; -webkit-appearance:none; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 0.8rem center; padding-right:2.2rem; }
  .filter-select:focus { outline:none; border-color:var(--bsn); background:#fff; }
  .filter-actions { display:flex; gap:0.75rem; margin-top:1.5rem; }
  .filter-apply-btn { flex:1; padding:0.85rem; min-height:48px; background:var(--bsn); color:#fff; border:none; border-radius:10px; font-size:0.95rem; font-weight:700; cursor:pointer; font-family:inherit; }
  .filter-apply-btn:active { background:#181c6e; }
  .filter-reset-btn { padding:0.85rem 1.25rem; min-height:48px; background:#F3F4F6; color:#374151; border:none; border-radius:10px; font-size:0.95rem; font-weight:600; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; font-family:inherit; }
  .filter-reset-btn:hover { background:#E5E7EB; }
  .filter-close-btn { display:block; width:100%; margin-top:0.8rem; padding:0.7rem; min-height:44px; background:none; border:1.5px solid #E5E7EB; border-radius:10px; font-size:0.85rem; font-weight:600; color:#6B7280; cursor:pointer; font-family:inherit; }
  .filter-close-btn:active { background:#F3F4F6; }
  .filter-checkbox-label { display:flex; align-items:center; gap:0.5rem; font-size:0.9rem; color:#374151; cursor:pointer; padding:0.3rem 0; min-height:34px; }
  .filter-checkbox-label input[type=checkbox] { width:18px; height:18px; accent-color:var(--bsn); flex-shrink:0; }

  /* Suchfeld im Filter — optisch wie die Auswahlfelder */
  .filter-input { width:100%; box-sizing:border-box; padding:0.5rem 0.8rem; min-height:48px; border:1.5px solid #E5E7EB; border-radius:10px; font-size:0.95rem; font-family:inherit; color:#1F2937; background:#FAFAFA; }
  .filter-input:focus { outline:none; border-color:var(--bsn); background:#fff; }

  /* === Aktive Filter als Chips ueber dem Feed ===
     Machen sichtbar, was gerade eingeschraenkt ist; ein Klick entfernt genau
     diesen einen Filter. */
  .filter-chips { max-width:640px; margin:0.8rem auto 0; padding:0 0.8rem; display:flex; flex-wrap:wrap; gap:0.4rem; align-items:center; }
  .filter-chip { display:inline-flex; align-items:center; gap:0.35rem; background:#fff; border:1.5px solid var(--border); border-radius:999px; padding:0.3rem 0.7rem; font-size:0.78rem; font-weight:600; color:#374151; text-decoration:none; min-height:32px; transition:border-color .15s, background .15s; }
  .filter-chip:hover { border-color:var(--bsn); background:#F9FAFB; }
  .filter-chip-x { font-size:1rem; line-height:1; color:#9CA3AF; }
  .filter-chip:hover .filter-chip-x { color:var(--bsn); }
  .filter-chip-clear { font-size:0.78rem; font-weight:600; color:var(--bsn); text-decoration:none; margin-left:0.2rem; }
  .filter-chip-clear:hover { text-decoration:underline; }

  /* Zaehler am Filter-Knopf: zeigt die Anzahl aktiver Filter */
  .filter-count-badge { display:inline-flex; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; margin-left:0.35rem; border-radius:999px; background:var(--accent); color:#fff; font-size:0.68rem; font-weight:800; }

  /* === Footer === */
  .site-footer { text-align:center; padding:2rem; border-top:1px solid #E5E7EB; margin-top:2rem; }
  .site-footer p { color:#9CA3AF; font-size:0.8rem; }
  .site-footer a { color:#6B7280; text-decoration:none; font-weight:600; }
  .site-footer a:hover { text-decoration:underline; }

  /* === Chat & Submit Bubbles === */
  /* — BSN-Assistent-Design v2 (Juli 2026) — */

  /* Floating Cube Button */
  .chat-bubble { position:fixed; bottom:1.5rem; right:1.5rem; z-index:9999; width:64px; height:64px; border-radius:50%; background:transparent; border:none; cursor:pointer; transition:opacity .2s; display:flex; align-items:center; justify-content:center; animation:floaty 5s ease-in-out infinite; }
  .chat-bubble svg { width:40px; height:40px; display:block; }
  .chat-bubble.hidden { opacity:0; pointer-events:none; }
  .chat-bubble:hover { transform:scale(1.12); animation:none; }
  .chat-bubble:active { transform:scale(.92); }

  @keyframes floaty { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-8px) rotate(-3deg); } }
  @keyframes floaty-center-v2 { 0%,100% { transform:translateX(-50%) translateY(0); } 50% { transform:translateX(-50%) translateY(-8px); } }
  @keyframes floaty-center { 0%,100% { transform:translateX(calc(-50% + 32px)) translateY(0); } 50% { transform:translateX(calc(-50% + 32px)) translateY(-8px); } }
  @keyframes floaty-left { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }
  @keyframes pulse { 0% { box-shadow:0 0 0 0 rgba(47,181,116,.45); } 70% { box-shadow:0 0 0 7px rgba(47,181,116,0); } 100% { box-shadow:0 0 0 0 rgba(47,181,116,0); } }

  /* Slide-In Welcome Label (Hover/Touch) */
  .chat-welcome-label { position:fixed; bottom:1.8rem; right:5.2rem; z-index:9998; max-width:270px; padding:16px 18px; background:rgba(255,255,255,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-radius:16px; box-shadow:0 2px 4px rgba(22,22,43,.06),0 8px 24px rgba(22,22,43,.08); font-family:'Space Grotesk','Inter',system-ui,sans-serif; font-size:14px; line-height:1.35; color:#16162B; opacity:0; transform:translateX(12px); transition:opacity .25s,transform .25s cubic-bezier(.4,0,.2,1); pointer-events:none; white-space:normal; }
  .chat-welcome-label .wl-title { display:block; font-weight:600; font-size:15px; margin-bottom:4px; }
  .chat-welcome-label .wl-title em { color:var(--bsn); font-style:normal; }
  .chat-welcome-label .wl-sub { display:block; font-size:12px; color:#6A6A80; }
  .chat-welcome-label.visible { opacity:1; transform:translateX(0); }

  /* Milchglas-Backdrop für Welcome-Label */
  .chat-welcome-glass { position:fixed; inset:0; z-index:9997; background:rgba(246,246,251,.3); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .3s; }
  .chat-welcome-glass.visible { opacity:1; }

  /* Chat Overlay */
  .chat-overlay { position:fixed; bottom:5.5rem; right:1.5rem; z-index:10001; width:min(420px, calc(100vw - 2rem)); max-height:560px; background:#fff; border-radius:20px; box-shadow:0 2px 4px rgba(22,22,43,.06),0 16px 40px rgba(42,51,63,.12); display:none; flex-direction:column; overflow:hidden; }
  .chat-overlay.open { display:flex; animation:riseIn .25s cubic-bezier(.2,.7,.3,1); }
  .chat-overlay.fullscreen { position:fixed; top:0; right:0; bottom:0; left:0; width:100vw; height:100dvh; max-width:none; max-height:none; border-radius:0; }
  .chat-overlay.fullscreen .chat-body { max-height:none; padding:1.4rem 1.6rem; }
  .chat-overlay.fullscreen .chat-footer { padding:14px 16px 18px; }
  .chat-overlay.fullscreen .chat-footer input { font-size:16px; padding:13px 18px; }
  .chat-overlay.fullscreen .chat-footer button { font-size:15px; padding:12px 22px; }
  .chat-overlay.fullscreen .chat-header { padding:1rem 1.4rem; font-size:1.05rem; }
  .chat-fs-btn { background:none; border:none; color:rgba(255,255,255,.7); font-size:1.1rem; cursor:pointer; transition:color .15s; padding:0; line-height:1; display:flex; align-items:center; }
  .chat-fs-btn:hover, .chat-fs-btn.active { color:#fff; }
  @keyframes riseIn { from{opacity:0;transform:translateY(10px);} to{opacity:1;transform:translateY(0);} }
  .chat-backdrop { position:fixed; inset:0; z-index:10000; background:rgba(22,22,43,.1); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; height:100dvh; }
  .chat-backdrop.open { display:block; }

  /* Chat Header */
  .chat-header { background:var(--bsn); color:#fff; padding:0.85rem 1.2rem; font-family:'Space Grotesk','Inter',system-ui,sans-serif; font-weight:600; font-size:0.9rem; display:flex; align-items:center; gap:9px; justify-content:space-between; }
  .chat-header .ch-title { display:flex; align-items:center; gap:9px; }
  .chat-header .ch-status { font-size:10px; color:rgba(255,255,255,.7); font-weight:400; font-family:'Inter',system-ui,sans-serif; display:flex; align-items:center; gap:5px; }
  .chat-header .ch-status .pulse-dot { width:6px; height:6px; border-radius:50%; background:#10B981; display:inline-block; }
  .chat-header button { background:none; border:none; color:rgba(255,255,255,.7); font-size:1.2rem; cursor:pointer; transition:color .15s; padding:0; line-height:1; }
  .chat-header button:hover { color:#fff; }

  /* Chat Body */
  .chat-body { flex:1; overflow-y:auto; padding:1rem 1.1rem; display:flex; flex-direction:column; gap:16px; max-height:380px; background:#F6F6FB; }

  /* Message Bubbles */
  .chat-msg { display:flex; gap:10px; animation:msgRise .3s cubic-bezier(.2,.7,.3,1); max-width:88%; }
  @keyframes msgRise { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }
  .chat-msg .msg-av { width:28px; height:28px; border-radius:8px; flex-shrink:0; display:grid; place-items:center; font-weight:600; font-size:11px; }
  .chat-msg.user { align-self:flex-end; flex-direction:row-reverse; }
  .chat-msg.user .msg-av { background:var(--bsn); color:#fff; }
  .chat-msg.assistant .msg-av { background:transparent; box-shadow:none; }
  .chat-msg.assistant .msg-av img { width:26px; height:26px; border-radius:7px; object-fit:cover; display:block; }
  .chat-msg .msg-body { display:flex; flex-direction:column; gap:2px; }
  .chat-msg .msg-sender { font-size:10px; color:#9CA3AF; font-weight:500; margin:0 4px 3px; }
  .chat-msg.user .msg-sender { text-align:right; }
  .chat-msg .msg-bubble { padding:11px 14px; border-radius:15px; font-size:13.5px; line-height:1.55; word-break:break-word; }
  .chat-msg.user .msg-bubble { background:var(--bsn); color:#fff; border-top-right-radius:5px; }
  .chat-msg.assistant .msg-bubble { background:#fff; color:#16162B; border:1px solid #E6E6EF; border-top-left-radius:5px; }
  .chat-msg.assistant .msg-bubble p + p { margin-top:8px; }
  .chat-msg.assistant .msg-bubble strong { font-weight:600; }
  .chat-msg.assistant .msg-bubble code { font-family:'JetBrains Mono',monospace; font-size:12px; background:#F3F4F6; padding:1px 5px; border-radius:4px; }
  .chat-msg.assistant .msg-bubble ul { margin:6px 0 2px; padding-left:0; list-style:none; }
  .chat-msg.assistant .msg-bubble li { padding-left:18px; position:relative; margin-bottom:4px; }
  .chat-msg.assistant .msg-bubble li::before { content:""; position:absolute; left:2px; top:7px; width:5px; height:5px; border-radius:2px; background:#E8A13A; }

  /* Typing Indicator */
  .chat-msg.typing .msg-bubble { display:inline-flex; gap:4px; padding:13px 15px; min-width:52px; justify-content:center; }
  .chat-msg.typing .msg-bubble i { width:6px; height:6px; border-radius:50%; background:#9CA3AF; animation:dotBounce 1.4s infinite both; display:block; }
  .chat-msg.typing .msg-bubble i:nth-child(2) { animation-delay:.2s; }
  .chat-msg.typing .msg-bubble i:nth-child(3) { animation-delay:.4s; }
  @keyframes dotBounce { 0%,80%,100%{opacity:.25;transform:translateY(0);} 40%{opacity:1;transform:translateY(-3px);} }

  /* Game Chips (structured output) */
  .game-chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; }
  .game-chip { display:inline-flex; align-items:center; gap:6px; padding:5px 10px 5px 7px; background:#FBF1DF; border-radius:999px; font-size:12px; font-weight:500; color:#16162B; }
  .game-chip .gc-icon { width:16px; height:16px; border-radius:4px; background:#E8A13A; display:grid; place-items:center; color:#fff; font-size:9px; font-family:'JetBrains Mono',monospace; font-weight:700; }

  /* Chat Footer */
  .chat-footer { padding:10px 12px 12px; border-top:1px solid #E6E6EF; display:flex; gap:9px; align-items:flex-end; background:#fff; }
  .chat-footer input { flex:1; border:1.5px solid #E6E6EF; border-radius:18px; padding:9px 14px; font-size:14px; font-family:'Inter',system-ui,sans-serif; outline:none; transition:border-color .18s,box-shadow .18s; background:#F6F6FB; }
  .chat-footer input:focus { border-color:var(--bsn); box-shadow:0 0 0 3px rgba(42,51,63,.08); }
  .chat-footer button { background:var(--bsn); color:#fff; border:none; border-radius:999px; padding:9px 16px; font-weight:600; font-size:13px; cursor:pointer; transition:background .15s; font-family:'Inter',system-ui,sans-serif; white-space:nowrap; }
  .chat-footer button:hover { background:var(--bsn); }
  .chat-footer button:active { transform:scale(.96); }
  .chat-footer button:disabled { opacity:.4; cursor:default; }
  .chat-hint { text-align:center; font-size:10px; color:#B0B0C0; margin-top:6px; }
  .chat-hint kbd { font-family:'JetBrains Mono',monospace; background:#F3F4F6; padding:1px 5px; border-radius:3px; font-size:10px; }

  .submit-bubble { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); z-index:9999; width:56px; height:56px; border-radius:50%; background:var(--accent); color:#fff; border:none; cursor:pointer; font-size:1.8rem; font-weight:300; line-height:1; box-shadow:0 10px 26px rgba(255,109,2,.38); transition:box-shadow 0.2s,opacity 0.2s; display:flex; align-items:center; justify-content:center; animation:floaty-center-v2 5s ease-in-out infinite; }
  .submit-bubble.hidden { opacity:0; pointer-events:none; animation:none; }
  .submit-bubble:hover { box-shadow:0 12px 36px rgba(255,109,2,.5); }
  .submit-bubble:active { animation-play-state:paused; transform:translateX(-50%) scale(0.95); }

  /* === Welcome Overlay === */
  .welcome-backdrop { position:fixed; inset:0; z-index:100000; background:rgba(0,0,0,0.3); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; }
  .welcome-backdrop.open { display:flex; align-items:center; justify-content:center; padding:1rem; }
  .welcome-dialog { background:#fff; border-radius:18px; box-shadow:0 16px 64px rgba(0,0,0,0.15); max-width:480px; width:100%; max-height:90vh; overflow-y:auto; animation:fadeUp 0.3s ease; }
  .welcome-header { background:#1F2937; color:#F9FAFB; padding:1.2rem 1.5rem; border-radius:18px 18px 0 0; font-weight:800; font-size:1.1rem; display:flex; align-items:center; gap:0.5rem; }
  .welcome-body { padding:1.5rem; color:#374151; line-height:1.7; font-size:0.88rem; }
  .welcome-footer { padding:0.8rem 1.5rem 1.2rem; border-top:1px solid #E5E7EB; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; }
  .welcome-footer label { font-size:0.78rem; color:#9CA3AF; display:flex; align-items:center; gap:0.4rem; cursor:pointer; user-select:none; }
  .welcome-footer button { background:#1F2937; color:#F9FAFB; border:none; border-radius:10px; padding:0.55rem 1.4rem; font-size:0.85rem; font-weight:700; cursor:pointer; font-family:inherit; transition:background 0.15s; }

  /* ═══════════════════════════════════════════════════════════
     DETAIL PAGE  (/beitrag/<id>)
     ═══════════════════════════════════════════════════════════ */
  .detail-container { max-width:720px; margin:1.5rem auto; padding:0 1.5rem; }
  .back-link { display:inline-block; color:var(--bsn); text-decoration:none; font-weight:600; margin-bottom:1.2rem; font-size:0.88rem; }
  .back-link:hover { text-decoration:underline; }
  .detail-card { background:#fff; border-radius:16px; padding:2rem; box-shadow:0 4px 20px rgba(0,0,0,0.06); position:relative; overflow:hidden; }
  .detail-ausverkauft-banner { position:absolute; top:0; left:0; right:0; z-index:2; background:linear-gradient(180deg,#dc3545 0%,#b02a37 100%); color:#fff; padding:0.5rem 1rem; font-size:0.8rem; font-weight:800; letter-spacing:0.12em; text-align:center; display:flex; align-items:center; justify-content:center; gap:0.5rem; flex-wrap:wrap; }
  .detail-ausverkauft-banner .badge-title { font-weight:500; letter-spacing:0.02em; font-size:0.72rem; opacity:0.9; }
  .detail-halle { display:inline-block; background:var(--bsn); color:#fff; padding:0.35rem 0.8rem; border-radius:6px; font-size:0.85rem; font-weight:700; margin-bottom:1rem; }
  .detail-card.has-banner .detail-halle { margin-top:2.8rem; }
  .detail-meta { display:flex; align-items:center; gap:0.8rem; margin-bottom:1.5rem; flex-wrap:wrap; }
  .detail-type { font-size:1.5rem; }
  .detail-author { font-weight:700; color:var(--bsn); font-size:1rem; }
  .detail-date { color:#999; font-size:0.8rem; margin-left:auto; }
  .detail-media { margin-bottom:1.2rem; }
  .detail-media-img { width:100%; height:auto; border-radius:12px; margin:0.5rem 0; }
  .detail-media-video { width:100%; max-height:80vh; border-radius:12px; margin:0.5rem 0; background:#000; }
  .detail-media-audio { width:100%; margin:0.5rem 0; }
  .detail-content { font-size:1.05rem; line-height:1.7; color:#333; white-space:pre-wrap; word-break:break-word; margin-bottom:1rem; }
  .detail-footer { display:flex; align-items:center; gap:1rem; margin-top:1.5rem; padding-top:1rem; border-top:1px solid #f0ede6; }
  .detail-views { font-size:0.8rem; color:#999; }
  .detail-like-btn { background:none; border:none; border-radius:999px; padding:0.15rem 0.5rem; font-size:0.68rem; cursor:pointer; color:#999; font-family:inherit; transition:all 0.15s; display:inline-flex; align-items:center; -webkit-tap-highlight-color:transparent; }
  .detail-like-btn svg, .detail-like-btn svg path { stroke:#9CA3AF !important; fill:none !important; }
  .detail-like-btn:hover { opacity:0.8; }
  .detail-like-btn.liked svg, .detail-like-btn.liked svg path { stroke:#EF4444 !important; fill:#EF4444 !important; }
  .detail-like-btn:active { transform:scale(0.94); }
  .detail-bm-btn { background:none; border:none; outline:none; cursor:pointer; display:inline-flex; align-items:center; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
  .detail-bm-btn:active { transform:scale(0.94); }
  .detail-id-line { text-align:center; padding:1rem 1.5rem 2.5rem; font-size:0.7rem; color:#aaa; max-width:720px; margin:0 auto; }

  /* === Comments === */
  .comments-section { max-width:720px; margin:1.5rem auto; padding:0 1.5rem; }
  .comments-heading { font-size:1rem; font-weight:700; color:#1a1a2e; margin-bottom:1rem; }
  .comment-item { background:#f8f6f0; border-radius:10px; padding:0.8rem 1rem; margin-bottom:0.6rem; }
  .comment-header { display:flex; align-items:baseline; gap:0.5rem; margin-bottom:0.3rem; }
  .comment-author { font-size:0.85rem; color:var(--bsn); }
  .comment-date { font-size:0.7rem; color:#aaa; }
  .comment-text { font-size:0.9rem; color:#333; line-height:1.5; white-space:pre-wrap; word-break:break-word; }
  .comment-form { margin-top:1.5rem; display:flex; flex-direction:column; gap:0.6rem; }
  .comment-input { padding:0.6rem 0.9rem; border:1.5px solid #ddd; border-radius:10px; font-size:0.85rem; font-family:inherit; }
  .comment-input:focus { outline:none; border-color:var(--bsn); }
  .comment-textarea { padding:0.6rem 0.9rem; border:1.5px solid #ddd; border-radius:10px; font-size:0.85rem; font-family:inherit; min-height:80px; resize:vertical; }
  .comment-textarea:focus { outline:none; border-color:var(--bsn); }
  .comment-email, .comment-phone { padding:0.6rem 0.9rem; border:1.5px solid #ddd; border-radius:10px; font-size:0.85rem; font-family:inherit; }
  .comment-email:focus, .comment-phone:focus { outline:none; border-color:var(--bsn); }
  .comment-field-hint { font-size:0.7rem; color:#999; margin-top:-0.3rem; margin-bottom:0.3rem; }
  .comment-submit-btn { align-self:flex-end; background:var(--bsn); color:#fff; border:none; border-radius:10px; padding:0.55rem 1.5rem; font-size:0.85rem; font-weight:600; cursor:pointer; font-family:inherit; transition:background 0.15s; }
  .comment-submit-btn:hover { background:#161e6e; }
  .comment-submit-btn:active { transform:scale(0.97); }
  .comment-submit-btn:disabled { opacity:0.6; pointer-events:none; }
  .reply-btn { background:none; border:1px solid #ccc; border-radius:6px; padding:0.2rem 0.6rem; font-size:0.72rem; color:#666; cursor:pointer; margin-top:0.3rem; font-family:inherit; transition:all 0.15s; }
  .reply-btn:hover { border-color:var(--bsn); color:var(--bsn); background:rgba(42,51,63,0.04); }
  .comment-actions { display:flex; align-items:center; gap:0.4rem; margin-top:0.4rem; }
  .comment-children { margin-top:0.5rem; padding-left:0.5rem; border-left:2px solid #E5E7EB; }
  .toggle-replies { font-size:0.78rem; color:var(--bsn); background:none; border:none; cursor:pointer; padding:0.2rem 0.4rem; }
  .toggle-replies:hover { text-decoration:underline; }
  .comment-nested { background:#FAFAFC; border-radius:8px; padding:0.5rem; margin-top:0.3rem; }
  .comment-media { margin-top:0.4rem; }
  .comment-media-img { max-width: min(280px, 100%); max-height:200px; border-radius:8px; cursor:pointer; transition:opacity 0.15s; object-fit:cover; }
  .comment-media-img:hover { opacity:0.9; }
  .comment-image-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:8px; border:1.5px solid #D1D5DB; color:#6B7280; cursor:pointer; transition:all 0.15s; }
  .comment-image-btn:hover { border-color:var(--bsn); color:var(--bsn); }
  .comment-like-btn { background:none; border:none; border-radius:999px; padding:0.15rem 0.5rem; font-size:0.68rem; cursor:pointer; color:#888; font-family:inherit; transition:all 0.15s; display:inline-flex; align-items:center; -webkit-tap-highlight-color:transparent; }
  .comment-like-btn:hover { opacity:0.8; }
  .comment-like-btn.liked svg, .comment-like-btn.liked svg path { stroke:#EF4444 !important; fill:#EF4444 !important; }
  .reply-info { font-size:0.75rem; color:var(--bsn); margin-bottom:0.3rem; font-weight:600; display:none; }

  /* ═══════════════════════════════════════════════════════════
     SUBMIT PAGE  (/submit)
     ═══════════════════════════════════════════════════════════ */
  .submit-container { max-width:500px; margin:1.5rem auto; padding:0 1.5rem; }
  .submit-card { background:#fff; border-radius:16px; padding:2rem; box-shadow:0 4px 20px rgba(0,0,0,0.06); }
  .submit-title { font-size:1.2rem; font-weight:800; color:#1F2937; margin-bottom:1.5rem; text-align:center; }
  .submit-form { display:flex; flex-direction:column; gap:1rem; }
  .form-group { display:flex; flex-direction:column; gap:0.3rem; }
  .form-label { font-size:0.7rem; font-weight:600; color:#6B7280; text-transform:uppercase; letter-spacing:0.03em; }
  .form-select { width:100%; padding:0.55rem 0.8rem; border:1.5px solid #E5E7EB; border-radius:8px; font-size:0.9rem; font-family:inherit; background:#fff; outline:none; transition:border-color 0.15s; -webkit-appearance:none; appearance:none; }
  .form-select:focus { border-color:#6B7280; }
  .form-input { width:100%; padding:0.55rem 0.8rem; border:1.5px solid #E5E7EB; border-radius:8px; font-size:16px; font-family:inherit; background:#fff; outline:none; transition:border-color 0.15s; }
  .form-input:focus { border-color:#6B7280; }
  .form-textarea { width:100%; padding:0.55rem 0.8rem; border:1.5px solid #E5E7EB; border-radius:8px; font-size:16px; font-family:inherit; resize:vertical; outline:none; transition:border-color 0.15s; }
  .form-textarea:focus { border-color:#6B7280; }
  .submit-btn { width:100%; background:#1F2937; color:#F9FAFB; border:none; border-radius:10px; padding:0.7rem; font-weight:700; font-size:0.9rem; cursor:pointer; margin-top:0.5rem; transition:background 0.15s; font-family:inherit; }
  .submit-btn:hover { background:#374151; }
  .submit-btn:active { transform:scale(0.98); }
  .submit-msg { text-align:center; margin-top:1rem; font-size:0.85rem; font-weight:600; }

  /* ═══════════════════════════════════════════════════════════
     LEGAL PAGES  (/impressum, /datenschutz, /agb)
     ═══════════════════════════════════════════════════════════ */
  .legal-container { max-width:720px; margin:1.5rem auto; padding:0 1.5rem; }
  .legal-card { background:#fff; border-radius:16px; padding:2rem; box-shadow:0 4px 20px rgba(0,0,0,0.06); line-height:1.8; color:#374151; }
  .legal-title { font-size:1.4rem; font-weight:800; color:#1F2937; margin-bottom:1.5rem; }
  .legal-card p { margin-bottom:1rem; font-size:0.92rem; }
  .legal-card strong { color:#1F2937; }
  .legal-card h2 { font-size:1.12rem; font-weight:700; color:#1F2937; margin:1.8rem 0 0.6rem; }
  .legal-card h3 { font-size:0.95rem; font-weight:600; color:#374151; margin:1.3rem 0 0.4rem; }
  .legal-card ul, .legal-card ol { padding-left:1.3rem; margin-bottom:1rem; }
  .legal-card li { margin-bottom:0.4rem; font-size:0.92rem; }
  .legal-card a { color:var(--bsn); text-decoration:none; }
  .legal-card a:hover { text-decoration:underline; }
  .legal-note { background:#F7F8FA; border-left:4px solid var(--bsn); padding:1rem 1.2rem; margin:1.5rem 0; border-radius:4px; font-size:0.92rem; }
  .legal-note.warning { background:#fff6e5; border-left-color:#f59e0b; }

  /* ═══════════════════════════════════════════════════════════
     DETAIL FOOTER BAR
     ═══════════════════════════════════════════════════════════ */
  .detail-footer-bar { text-align:center; padding:2rem; border-top:1px solid #E5E7EB; margin-top:2rem; }
  .detail-footer-bar p { color:#9CA3AF; font-size:0.8rem; }
  .detail-footer-bar a { color:#6B7280; text-decoration:none; font-weight:600; }
  .detail-footer-bar a:hover { text-decoration:underline; }

  /* ═══════════════════════════════════════════════════════════
     RESPONSIVE
     ═══════════════════════════════════════════════════════════ */
  @media(min-width:768px) {
    .main-grid { max-width:1300px; padding:0 1rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:1.2rem; align-items:start; }
    .story-card { margin-bottom:0; }
    .clickable-card { cursor:pointer; }
  }
  @media(max-width:1100px) { .main-grid { grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); } }
  @media(max-width:750px) { .main-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:0.8rem; padding:0 0.7rem; } }

  /* V3: 2-Spalten-Masonry auf schmalen Screens (601-760px) + Card-Thumb medial richtig
     (Snippet 1:1 aus pimpen-plan #3) */
  .main-grid { transition:padding .2s ease; }
  @media(min-width:601px) and (max-width:760px) {
    .main-grid { max-width:none; display:grid; grid-template-columns:repeat(2,1fr); gap:1rem; padding:0 .8rem; align-items:start; }
    .story-card img, .story-card video { aspect-ratio:auto; }
  }
  .media-crop { aspect-ratio:4/3; height:auto !important; background:#eef0f4; }
  .media-crop img { animation:imgIn .4s ease; }
  @keyframes imgIn { from{opacity:0;filter:blur(6px);} to{opacity:1;filter:blur(0);} }
  @media(max-width:600px) {
    .detail-card { padding:1.2rem; }
    .site-header { padding:0.8rem 1rem; }
    .legal-card { padding:1.2rem; }
    .submit-card { padding:1.2rem; }
  }
  @media(max-width:500px) {
    .main-grid { grid-template-columns:1fr; padding:0 0.8rem; display:flex; flex-direction:column; gap:1rem; }
    .site-header { padding:0.6rem 0.8rem; gap:0.4rem; }
    .site-logo-sub { font-size:0.62rem; }
    .chat-bubble { bottom:1rem; right:1rem; }
    .chat-welcome-label { bottom:5rem; right:auto; left:50%; transform:translate(-50%,12px); max-width:280px; }
    .chat-welcome-label.visible { transform:translate(-50%,0); }
    /* Einreichen-Plus links unten (Feedback Daniel 16.09.2026) — gespiegelt zum
       Chat-Wuerfel rechts; kein X-Versatz mehr, deshalb floaty-left. */
    .submit-bubble { bottom:1rem; right:auto; left:1rem; transform:none; animation:floaty-left 5s ease-in-out infinite; }
    .submit-bubble:active { transform:scale(0.95); }
    /* Chat: Bottom-Sheet statt freischwebend — deckt ALLE Handys, nie breiter als Viewport (Feedback Daniel 01.09.2026). safe-area für iOS-Notch. */
    .chat-overlay { bottom:calc(5.2rem + env(safe-area-inset-bottom, 0px)); right:0.75rem; left:0.75rem; width:auto; max-width:none; max-height:min(72dvh, 640px); }
  }

  /* === Login Dropdown (im Header) === */
    .login-dropdown { position:relative; display:inline-block; }
  .login-toggle-btn { background:var(--bsn); border:1.5px solid var(--bsn); border-radius:10px; color:#F9FAFB; padding:0.4rem 0.75rem; font-size:0.8rem; font-weight:600; cursor:pointer; font-family:inherit; transition:all 0.15s; white-space:nowrap; line-height:1.4; display:inline-flex; align-items:center; gap:0.35rem; }
  .login-toggle-btn:hover { background:#181e6b; border-color:#181e6b; }
  .login-toggle-btn.active { background:#fff; color:var(--bsn); border-color:#E5E7EB; box-shadow:0 2px 8px rgba(0,0,0,0.08); }
  .login-toggle-btn.active svg { stroke:var(--bsn); }
  .login-dropdown-menu { display:none; position:absolute; right:0; top:calc(100% + 6px); background:#fff; border:1px solid #E5E7EB; border-radius:14px; box-shadow:0 4px 24px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04); min-width:220px; z-index:300; overflow:hidden; padding:4px 0; }
  .login-dropdown-menu.open { display:block; animation:menuSlide 0.15s ease; }
  @keyframes menuSlide { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:translateY(0); } }
  .dropdown-user-header { display:flex; align-items:center; gap:0.6rem; padding:0.6rem 1rem 0.7rem; border-bottom:1px solid #F3F4F6; margin-bottom:2px; }
  .dropdown-user-header img { width:36px; height:36px; border-radius:50%; object-fit:cover; border:2px solid #E5E7EB; }
  .dropdown-user-header .user-info { line-height:1.3; }
  .dropdown-user-header .user-name { font-weight:700; color:#1F2937; font-size:0.85rem; }
  .dropdown-user-header .user-email { color:#9CA3AF; font-size:0.7rem; }
  .login-dropdown-menu .dropdown-item { display:flex; align-items:center; gap:0.55rem; padding:0.6rem 1rem; color:#1F2937; text-decoration:none; font-size:0.82rem; font-weight:500; transition:all 0.12s; cursor:pointer; }
  .login-dropdown-menu .dropdown-item:hover { background:#F3F4F6 color:var(--bsn); }
  .login-dropdown-menu .dropdown-item svg { flex-shrink:0; stroke:currentColor; }
  .dropdown-item-danger { color:#DC2626 !important; }
  .dropdown-item-danger:hover { background:#FEF2F2 !important; color:#B91C1C !important; }
  .dropdown-divider { height:1px; background:#F3F4F6; margin:4px 0; }
  .login-dropdown-form { padding:0.8rem 1rem 0.5rem; }
  .login-dropdown-form input { width:100%; padding:0.5rem 0.7rem; margin:0.3rem 0; border:1.5px solid #E5E7EB; border-radius:8px; font-size:0.82rem; font-family:inherit; outline:none; box-sizing:border-box; transition:border-color 0.15s; background:#fff; }
  .login-dropdown-form input:focus { border-color:var(--bsn); }
  .login-dropdown-form button { width:100%; padding:0.55rem; background:#1F2937; color:#F9FAFB; border:none; border-radius:8px; font-size:0.82rem; font-weight:600; cursor:pointer; font-family:inherit; margin-top:0.4rem; transition:background 0.15s; }
  .login-dropdown-form button:hover { background:#374151; }
  .login-dropdown-register { display:block; border-top:1px solid #E5E7EB; padding:0.65rem 1rem; font-size:0.78rem; color:#6B7280; text-decoration:none; text-align:center; font-weight:500; transition:all 0.12s; }
  .login-dropdown-register:hover { background:#F3F4F6 color:var(--bsn); }
.header-bsn-link { color:#D1D5DB; text-decoration:none; font-size:0.78rem; font-weight:500; transition:all 0.2s; display:inline-flex; align-items:center; padding:0.3rem 0.7rem; border-radius:999px; border:1px solid rgba(255,255,255,0.15); background:rgba(255,255,255,0.05); white-space:nowrap; }
  .header-bsn-link:hover { color:#fff; background:rgba(255,255,255,0.12); border-color:rgba(255,255,255,0.3); }

  /* === Offcanvas — modernes dunkles Panel (P1-Redesign 31.07.2026) === */
  .offcanvas-backdrop { position:fixed; inset:0; background:rgba(10,11,40,0.45); backdrop-filter:blur(2px); z-index:200; opacity:0; pointer-events:none; transition:opacity 0.3s ease; }
  .offcanvas-backdrop.open { opacity:1; pointer-events:auto; }
  .offcanvas-nav {
    position:fixed; top:0; left:0; width:300px; max-width:85vw; height:100%; height:100dvh;
    background:var(--bsn);
    z-index:201; transform:translateX(-102%);
    transition:transform 0.32s cubic-bezier(0.32,0.72,0.24,1);
    box-shadow:8px 0 32px rgba(10,11,40,0.35);
    display:flex; flex-direction:column;
  }
  .offcanvas-nav.open { transform:translateX(0); }
  .offcanvas-nav-header {
    padding:1.3rem 1.2rem 1.1rem; display:flex; align-items:flex-start; justify-content:space-between;
    border-bottom:1px solid rgba(255,255,255,0.1);
  }
  .oc-brand { display:flex; align-items:center; gap:0.75rem; min-width:0; }
  .oc-brand-mark {
    display:flex; align-items:center; justify-content:center;
    width:42px; height:42px; border-radius:12px;
    background:rgba(255,255,255,0.12); flex-shrink:0;
  }
  .oc-brand-text { display:flex; flex-direction:column; gap:1px; min-width:0; }
  .oc-brand-text strong { color:#fff; font-size:1.02rem; font-weight:700; letter-spacing:0.01em; }
  .oc-brand-text small { color:rgba(255,255,255,0.55); font-size:0.72rem; line-height:1.25; }
  .nav-close-btn {
    background:rgba(255,255,255,0.1); border:none; color:rgba(255,255,255,0.85);
    width:34px; height:34px; border-radius:10px; font-size:1rem; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
    transition:background 0.15s; flex-shrink:0; line-height:1;
  }
  .nav-close-btn:hover { background:rgba(255,255,255,0.22); color:#fff; }
  .offcanvas-nav-links { list-style:none; padding:0.9rem 0.7rem; margin:0; flex:1; overflow-y:auto; }
  .offcanvas-nav-links li { padding:0; }
  .offcanvas-nav-links a {
    display:flex; align-items:center; gap:0.85rem;
    min-height:48px; padding:0.7rem 0.85rem; margin-bottom:2px;
    color:rgba(255,255,255,0.88); text-decoration:none;
    font-size:0.95rem; font-weight:500; border-radius:12px;
    transition:background 0.15s, color 0.15s;
  }
  .offcanvas-nav-links a svg { flex-shrink:0; opacity:0.75; transition:opacity 0.15s; }
  .offcanvas-nav-links a:hover { background:rgba(255,255,255,0.12); color:#fff; }
  .offcanvas-nav-links a:hover svg { opacity:1; }
  .offcanvas-nav-links a:active { background:rgba(255,255,255,0.18); }
  .offcanvas-nav-links .nav-section-label {
    padding:0.6rem 0.85rem 0.35rem; font-size:0.68rem; font-weight:700;
    text-transform:uppercase; letter-spacing:0.14em; color:rgba(255,255,255,0.45);
  }
  .offcanvas-nav-links .nav-section-separator {
    border-top:1px solid rgba(255,255,255,0.12); margin-top:0.6rem; padding-top:1rem;
  }
  .offcanvas-nav-footer {
    padding:0.95rem 1.2rem; border-top:1px solid rgba(255,255,255,0.1);
    font-size:0.72rem; color:rgba(255,255,255,0.45);
  }
  .offcanvas-nav-footer p { margin:0; }

  /* === Animations === */
  @keyframes fadeUp { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
  @keyframes fadeDown { from{opacity:0;transform:translateY(-8px);} to{opacity:1;transform:translateY(0);} }

  /* === Empty State === */
  .empty-state { text-align:center; padding:4rem 2rem; }
  .empty-state .empty-icon { font-size:3rem; margin-bottom:1rem; }
  .empty-state h2 { color:#1F2937; font-size:1.8rem; font-weight:800; margin-bottom:0.5rem; }
  .empty-state p { color:#9CA3AF; max-width:400px; margin:0 auto; line-height:1.6; }

  /* === Submit Overlay (floating) === */
  .submit-overlay { position:fixed; bottom:5.5rem; right:1.5rem; z-index:10001;
    width:400px; max-width:calc(100vw - 2rem); max-height:85vh;
    background:#fff; border-radius:18px; box-shadow:0 12px 48px rgba(0,0,0,0.12);
    display:none; flex-direction:column; overflow:hidden; }
  .submit-overlay.open { display:flex; }
  .submit-header { background:#1F2937; color:#F9FAFB; padding:0.9rem 1.2rem;
    font-weight:700; font-size:0.9rem; display:flex; align-items:center; justify-content:space-between; }
  .submit-header button { background:none; border:none; color:#D1D5DB; font-size:1.3rem;
    cursor:pointer; opacity:0.8; padding:0; line-height:1; }
  .submit-header button:hover { opacity:1; }
  .submit-body { flex:1; overflow-y:auto; padding:1rem; max-height:75vh; background:#F9FAFB; }
  .submit-body .hint { font-size:0.75rem; color:#6B7280; margin-bottom:1rem; line-height:1.5; }
  .submit-body label { display:block; font-size:0.7rem; font-weight:600; color:#6B7280;
    text-transform:uppercase; letter-spacing:0.03em; margin-bottom:0.2rem; margin-top:0.8rem; }
  .submit-body label:first-of-type { margin-top:0; }
  .submit-body input, .submit-body textarea { width:100%; border:1.5px solid #E5E7EB;
    border-radius:10px; padding:0.55rem 0.8rem; font-size:16px; font-family:inherit;
    outline:none; transition:border-color 0.15s; background:#fff; box-sizing:border-box; }
  .submit-body textarea { resize:vertical; min-height:70px; }
  .submit-body input:focus, .submit-body textarea:focus { border-color:#6B7280; }
  .submit-body input[type="file"] { padding:0.4rem 0; border:none; font-size:0.78rem; }
  .submit-body .submit-btn { width:100%; background:#1F2937; color:#F9FAFB; border:none;
    border-radius:10px; padding:0.7rem; font-weight:700; font-size:0.88rem;
    cursor:pointer; margin-top:1rem; transition:background 0.15s; font-family:inherit; }
  .submit-body .submit-btn:hover { background:#374151; }
  .submit-body .submit-btn:disabled { opacity:0.5; cursor:default; }
  .submit-body .status-msg { text-align:center; font-size:0.8rem; margin-top:0.6rem;
    min-height:1.2rem; }
  .capture-row { display:flex; gap:1.4rem; margin-top:0.3rem; justify-content:center; align-items:flex-start; }
  .capture-item { display:flex; flex-direction:column; align-items:center; gap:0.4rem; }
  .capture-btn, label.capture-btn { display:flex; align-items:center; justify-content:center; background:#fff; border:2px solid #E5E7EB; border-radius:50%; width:76px; height:76px; cursor:pointer; transition:all 0.15s; -webkit-tap-highlight-color:transparent; touch-action:manipulation; padding:0; }
  .capture-btn svg { display:block; width:28px; height:28px; }
  .capture-btn:active { transform:scale(0.92); background:#F3F4F6; border-color:#6B7280; }
  .capture-label { font-size:0.62rem; font-weight:600; color:#9CA3AF; text-transform:uppercase; letter-spacing:0.04em; text-align:center; }

  /* === Language Dropdown === */
  .lang-dropdown { position:relative; display:inline-flex; align-items:center; }
  .lang-toggle { background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.12); border-radius:8px; color:#D1D5DB; font-size:0.9rem; cursor:pointer; padding:0.3rem 0.5rem; font-family:inherit; transition:all 0.15s; }
  .lang-toggle:hover { background:rgba(255,255,255,0.15); }
  .lang-menu { display:none; position:absolute; top:110%; left:0; background:#fff; border-radius:10px; box-shadow:0 6px 24px rgba(0,0,0,0.12); min-width:130px; z-index:300; overflow:hidden; }
  .lang-menu.open { display:block; animation:fadeDown 0.2s ease; }
  .lang-menu a { display:block; padding:0.55rem 0.9rem; color:#1F2937; text-decoration:none; font-size:0.82rem; font-weight:500; transition:background 0.15s; }
  .lang-menu a:hover { background:#F3F4F6; }
  .lang-menu a.active { background:#F7F8FA; color:var(--bsn); font-weight:700; }
  @media(max-width:500px) {
    .submit-overlay { bottom:5rem; right:0.5rem; left:0.5rem; width:auto; max-height:85vh; }
  }

  /* ═══════════════════════════════════════════════════════════
     ADMIN DASHBOARD  (iOS-26 Dark/Light Theme)
     ═══════════════════════════════════════════════════════════ */

  /* Admin Header */
  .admin-header { background:#1F2937; color:#F9FAFB; padding:0.8rem 1.5rem; display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:0.5rem; position:sticky; top:0; z-index:200; box-shadow:0 2px 8px rgba(0,0,0,0.15); border-bottom:1px solid rgba(255,255,255,0.08); }
  .admin-header-left { display:flex; align-items:center; gap:0.8rem; }
  .admin-logo { font-weight:800; font-size:1.1rem; letter-spacing:-0.01em; }
  .admin-badge { background:rgba(255,255,255,0.12); color:#D1D5DB; padding:0.2rem 0.6rem; border-radius:6px; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.04em; }
  .admin-header-right { display:flex; align-items:center; gap:0.8rem; }
  .admin-nav-link { color:#9CA3AF; text-decoration:none; font-size:0.82rem; font-weight:500; transition:color 0.15s; }
  .admin-nav-link:hover { color:#F9FAFB; }
  .admin-logout { color:#EF4444; }
  .admin-logout:hover { color:#FCA5A5; }

  /* Stats Bar */
  .admin-stats-bar { display:flex; gap:0.8rem; padding:1.2rem 1.5rem; flex-wrap:wrap; background:#F9FAFB; border-bottom:1px solid #E5E7EB; }
  .admin-stat-card { background:#fff; border-radius:12px; padding:0.9rem 1.2rem; display:flex; align-items:center; gap:0.8rem; min-width:140px; flex:1; box-shadow:0 1px 2px rgba(0,0,0,0.03); border:1px solid #F3F4F6; }
  .admin-stat-card .stat-icon { font-size:1.4rem; }
  .admin-stat-card .stat-info { display:flex; flex-direction:column; }
  .admin-stat-card .stat-value { font-size:1.5rem; font-weight:800; color:#1F2937; line-height:1.2; }
  .admin-stat-card .stat-label { font-size:0.7rem; color:#9CA3AF; text-transform:uppercase; letter-spacing:0.04em; font-weight:600; }
  .stat-new .stat-value { color:#6B7280; }
  .stat-published .stat-value { color:#059669; }
  .stat-flagged .stat-value { color:#D97706; }
  .stat-total .stat-value { color:var(--bsn); }

  /* Table */
  .admin-table-wrap { overflow-x:auto; padding:0 1.5rem 2rem; }
  .admin-table { width:100%; border-collapse:separate; border-spacing:0; font-size:0.82rem; }
  .admin-table thead { }
  .admin-table th { background:#F3F4F6; color:#6B7280; font-weight:700; font-size:0.68rem; text-transform:uppercase; letter-spacing:0.05em; padding:0.6rem 0.8rem; text-align:left; border-bottom:2px solid #E5E7EB; white-space:nowrap; }
  .admin-table td { padding:0.55rem 0.8rem; border-bottom:1px solid #F3F4F6; color:#374151; white-space:nowrap; }
  .admin-row { transition:background 0.12s; }
  .admin-row:hover { background:#F7F8FA; }
  .admin-row.row-new { background:#FFFBEB; }
  .admin-row.row-new:hover { background:#FEF3C7; }
  .cell-id { font-family:'SF Mono','Fira Code',monospace; font-size:0.75rem; color:#9CA3AF; }
  .cell-content { max-width:250px; overflow:hidden; text-overflow:ellipsis; }
  .cell-spiel { font-weight:600; color:var(--bsn); }
  .cell-date { font-size:0.75rem; color:#9CA3AF; }

  /* Badges */
  .channel-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:4px; font-size:0.68rem; font-weight:600; text-transform:uppercase; }
  .channel-whatsapp { background:#E8F5E9; color:#2E7D32; }
  .channel-telegram { background:#E3F2FD; color:#1565C0; }
  .channel-web { background:#F3E5F5; color:#7B1FA2; }
  .triage-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:4px; font-size:0.68rem; font-weight:600; }
  .triage-live { background:#D1FAE5; color:#065F46; }
  .triage-pending { background:#FEF3C7; color:#92400E; }
  .triage-blocked { background:#FEE2E2; color:#991B1B; }
  .triage-none { background:#F3F4F6; color:#6B7280; }
  .status-badge { display:inline-block; padding:0.15rem 0.5rem; border-radius:4px; font-size:0.68rem; font-weight:600; }
  .status-published { background:#DBEAFE; color:#1E40AF; }
  .status-new { background:#FEF3C7; color:#92400E; }
  .status-flagged { background:#FEE2E2; color:#991B1B; }

  /* Admin Footer */
/* === Admin Submission Detail === */  .admin-detail-grid { display:grid; grid-template-columns:1fr 340px; gap:1.5rem; padding:1.5rem; max-width:1400px; margin:0 auto; }  .admin-detail-main { min-width:0; }  .admin-detail-sidebar { display:flex; flex-direction:column; gap:1rem; }  .admin-media-preview { background:#1F2937; border-radius:12px; overflow:hidden; margin-bottom:1rem; }  .admin-media-img { width:100%; max-height:500px; object-fit:contain; display:block; }  .admin-media-video { width:100%; max-height:500px; display:block; }  .admin-media-audio { width:100%; padding:2rem; }  .admin-media-unknown { padding:3rem; text-align:center; color:#9CA3AF; font-size:1rem; }  .admin-content-card { background:#fff; border-radius:12px; padding:1.5rem; border:1px solid #E5E7EB; margin-bottom:1rem; }  .admin-content-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:0.8rem; }  .admin-content-label { font-weight:700; font-size:0.85rem; color:#374151; }  .admin-content-type { display:flex; align-items:center; gap:0.5rem; }  .type-badge { background:#F3F4F6 color:#374151; padding:0.15rem 0.55rem; border-radius:6px; font-size:0.68rem; font-weight:600; text-transform:uppercase; }  .admin-content-body { color:#1F2937; line-height:1.7; font-size:0.92rem; white-space:pre-wrap; word-break:break-word; }  .no-content { color:#9CA3AF; }  .admin-comments-section { margin-top:0.5rem; }  .admin-section-title { font-size:0.9rem; font-weight:700; color:#1F2937; margin-bottom:0.75rem; }  .admin-comment-card { background:#fff; border-radius:10px; padding:0.9rem 1.1rem; border:1px solid #F3F4F6; margin-bottom:0.5rem; }  .admin-comment-header { display:flex; align-items:center; gap:0.6rem; font-size:0.78rem; margin-bottom:0.4rem; }  .admin-comment-header strong { color:#1F2937; }  .admin-comment-date { color:#9CA3AF; font-size:0.7rem; }  .admin-comment-body { font-size:0.85rem; color:#374151; line-height:1.55; }  .admin-panel { background:#fff; border-radius:12px; padding:1.2rem; border:1px solid #E5E7EB; }  .admin-panel-title { font-size:0.8rem; font-weight:700; color:#374151; margin-bottom:0.9rem; text-transform:uppercase; letter-spacing:0.03em; }  .admin-form { display:flex; flex-direction:column; gap:0.7rem; }  .admin-field { display:flex; flex-direction:column; gap:0.25rem; }  .admin-field label { font-size:0.7rem; font-weight:600; color:#6B7280; text-transform:uppercase; letter-spacing:0.03em; }  .admin-select, .admin-input { width:100%; padding:0.5rem 0.7rem; border:1px solid #D1D5DB; border-radius:8px; font-size:0.82rem; color:#1F2937; background:#fff; font-family:inherit; transition:border-color 0.15s; }  .admin-select:focus, .admin-input:focus { outline:none; border-color:var(--bsn); box-shadow:0 0 0 3px rgba(42,51,63,0.1); }  .admin-btn { display:inline-flex; align-items:center; justify-content:center; gap:0.35rem; padding:0.5rem 1rem; border:none; border-radius:8px; font-size:0.8rem; font-weight:600; cursor:pointer; text-decoration:none; font-family:inherit; transition:all 0.15s; }  .admin-btn-primary { background:var(--bsn); color:#fff; }  .admin-btn-primary:hover { background:#1F2937; }  .admin-btn-danger { background:#FEF2F2; color:#DC2626; border:1px solid #FECACA; }  .admin-btn-danger:hover { background:#FEE2E2; }  .admin-btn-publish { background:var(--bsn); color:#fff; }  .admin-btn-publish:hover { background:#1F2937; }  .admin-btn-unpublish { background:#F3F4F6; color:#6B7280; border:1px solid #D1D5DB; }  .admin-btn-unpublish:hover { background:#E5E7EB; color:#374151; }  .admin-actions-stack { display:flex; flex-direction:column; gap:0.6rem; }  .admin-meta { font-size:0.7rem; color:#9CA3AF; }  .admin-dl { display:grid; grid-template-columns:auto 1fr; gap:0.3rem 0.8rem; font-size:0.78rem; }  .admin-dl dt { color:#6B7280; font-weight:600; }  .admin-dl dd { color:#1F2937; margin:0; }  .admin-dl .mono { font-family:"SF Mono","Fira Code",monospace; font-size:0.7rem; color:#6B7280; word-break:break-all; }  .admin-empty { color:#9CA3AF; font-size:0.82rem; font-style:italic; }  .admin-back-link { color:#9CA3AF; text-decoration:none; font-size:0.82rem; font-weight:600; transition:color 0.15s; }  .admin-back-link:hover { color:#fff; }  @media(max-width:800px) { .admin-detail-grid { grid-template-columns:1fr; padding:0.8rem; } .admin-detail-sidebar { gap:0.7rem; } }  /* === Ende Admin Detail === */
  .admin-footer { text-align:center; padding:1rem; border-top:1px solid #E5E7EB; font-size:0.72rem; color:#9CA3AF; display:flex; align-items:center; justify-content:center; gap:0.5rem; }

  /* Admin Feedback */
  .admin-filter-bar { display:flex; gap:0.5rem; padding:1rem 1.5rem 0.5rem; flex-wrap:wrap; }
  .admin-filter-link { padding:0.4rem 0.9rem; border-radius:999px; font-size:0.78rem; font-weight:600; color:#6B7280; background:#F3F4F6; text-decoration:none; }
  .admin-filter-link.active { background:var(--bsn); color:#fff; }
  .admin-feedback-list { padding:1rem 1.5rem 2rem; display:flex; flex-direction:column; gap:0.8rem; max-width:1000px; }
  .feedback-card { background:#fff; border:1px solid #E5E7EB; border-left:4px solid #9CA3AF; border-radius:12px; padding:1rem 1.2rem; }
  .feedback-card.card-new { border-left-color:#F59E0B; }
  .feedback-card.card-progress { border-left-color:#3B82F6; }
  .feedback-card.card-done { border-left-color:#10B981; opacity:0.75; }
  .feedback-head { display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap; margin-bottom:0.5rem; }
  .feedback-type { padding:0.15rem 0.55rem; border-radius:6px; font-size:0.68rem; font-weight:700; text-transform:uppercase; background:#F3F4F6 color:#374151; }
  .feedback-type.type-suggestion { background:#FCE8F2; color:#9D174D; }
  .feedback-title { font-weight:700; color:#1F2937; font-size:0.95rem; }
  .feedback-date { font-size:0.75rem; color:#9CA3AF; margin-left:auto; }
  .feedback-body p { color:#374151; line-height:1.6; font-size:0.88rem; margin:0 0 0.5rem; white-space:pre-wrap; }
  .feedback-meta { font-size:0.72rem; color:#9CA3AF; margin-top:0.2rem; }
  .feedback-meta code { background:#F3F4F6; padding:0.05rem 0.3rem; border-radius:4px; font-size:0.7rem; }
  .feedback-status-form { display:flex; gap:0.5rem; margin-top:0.6rem; align-items:center; }
  .feedback-status-select { padding:0.42rem 0.6rem; border:1px solid #E5E7EB; border-radius:8px; font-size:0.82rem; color:#374151; background:#fff; }
  .admin-empty { padding:2rem; text-align:center; color:#9CA3AF; }

  /* ═══════════════════════════════════════════════════════════
     LOGIN PAGE
     ═══════════════════════════════════════════════════════════ */
  .login-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:1.5rem; background:linear-gradient(135deg,#1F2937 0%,#111827 100%); }
  .login-card { background:#fff; border-radius:18px; padding:2.5rem 2rem; width:100%; max-width:420px; box-shadow:0 16px 64px rgba(0,0,0,0.2); }
  .login-header { text-align:center; margin-bottom:2rem; }
  .login-logo { font-size:2.5rem; margin-bottom:0.5rem; }
  .login-header h1 { font-size:1.4rem; font-weight:800; color:#1F2937; margin-bottom:0.3rem; }
  .login-header p { color:#9CA3AF; font-size:0.85rem; }
  .login-error { background:#FEE2E2; color:#991B1B; padding:0.6rem 0.9rem; border-radius:8px; font-size:0.82rem; margin-bottom:1rem; text-align:center; font-weight:500; }
  .login-form { display:flex; flex-direction:column; gap:1rem; }
  .login-form .form-group { display:flex; flex-direction:column; gap:0.3rem; }
  .login-form label { font-size:0.72rem; font-weight:700; color:#6B7280; text-transform:uppercase; letter-spacing:0.04em; }
  .login-form input { width:100%; padding:0.65rem 0.9rem; border:1.5px solid #E5E7EB; border-radius:10px; font-size:1rem; font-family:inherit; outline:none; transition:border-color 0.15s; background:#fff; box-sizing:border-box; }
  .login-form input:focus { border-color:var(--bsn); box-shadow:0 0 0 3px rgba(42,51,63,0.08); }
  .login-submit { width:100%; padding:0.7rem; background:#1F2937; color:#F9FAFB; border:none; border-radius:10px; font-size:0.9rem; font-weight:700; cursor:pointer; transition:background 0.15s; font-family:inherit; margin-top:0.5rem; }
  .login-submit:hover { background:#374151; }
  .login-submit:active { transform:scale(0.98); }
  .login-footer-text { text-align:center; margin-top:1.5rem; font-size:0.8rem; color:#9CA3AF; }
  .login-footer-text a { color:var(--bsn); text-decoration:none; font-weight:600; }
  .login-footer-text a:hover { text-decoration:underline; }

  /* Mobile */
  @media(max-width:600px) {
    .admin-stats-bar { padding:0.8rem; gap:0.5rem; }
    .admin-stat-card { min-width:0; padding:0.6rem 0.8rem; }
    .admin-stat-card .stat-value { font-size:1.2rem; }
    .admin-table td, .admin-table th { padding:0.4rem 0.5rem; font-size:0.72rem; }
    .admin-header { padding:0.6rem 0.8rem; }
    .admin-logo { font-size:0.95rem; }
  }


/* ═══════════════════════════════════════════════════════════════════
   PROFILE SIDEBAR — rechts persistent auf allen Seiten
   ═══════════════════════════════════════════════════════════════════ */
.app-layout {
  display: flex;
  min-height: 100vh;
  max-width: 1400px;
  margin: 0 auto;
}

.app-main {
  flex: 1;
  min-width: 0;
  padding: 0;
}

.profile-sidebar {
  width: 260px;
  flex-shrink: 0;
  background: #F9FAFB;
  border-left: 1px solid var(--border);
  padding: 1.25rem;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}

.sidebar-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.sidebar-avatar-link {
  display: block;
  margin-bottom: .5rem;
  text-decoration: none;
}

.sidebar-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--bsn, var(--bsn));
  transition: transform .2s;
}

.sidebar-avatar-img:hover {
  transform: scale(1.05);
}

.sidebar-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--bsn, var(--bsn));
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  border: 2px solid var(--bsn, var(--bsn));
}

.sidebar-name {
  font-weight: 700;
  font-size: 1rem;
  color: #111827;
  text-decoration: none;
  margin-bottom: .35rem;
}

.sidebar-name:hover {
  color: var(--bsn, var(--bsn));
}

.sidebar-tier {
  display: inline-block;
  padding: .15em .6em;
  border-radius: 12px;
  font-size: .7rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: .5px;
}

.sidebar-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem;
  width: 100%;
  padding: .75rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  margin-bottom: 1rem;
}

.sidebar-stat {
  text-align: center;
}

.sidebar-stat-num {
  display: block;
  font-size: 1.1rem;
  font-weight: 700;
  color: #111827;
}

.sidebar-stat-label {
  display: block;
  font-size: .68rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .3px;
}

.sidebar-link {
  display: block;
  width: 100%;
  padding: .5rem .75rem;
  margin-bottom: .3rem;
  text-decoration: none;
  color: #374151;
  font-size: .85rem;
  border-radius: 6px;
  text-align: left;
  transition: background .15s;
}

.sidebar-link:hover {
  background: #E5E7EB;
  color: #111827;
}

.sidebar-logout {
  color: #EF4444;
  margin-top: .5rem;
}

.sidebar-logout:hover {
  background: #FEE2E2;
  color: #DC2626;
}

/* ── Mobile: Sidebar versteckt, togglebar ── */
@media (max-width: 1024px) {
  .app-layout {
    flex-direction: column;
  }
  
  .profile-sidebar {
    position: fixed;
    right: -280px;
    top: 0;
    width: 280px;
    height: 100vh;
    z-index: 1000;
    transition: right .3s ease;
    box-shadow: -4px 0 20px rgba(0,0,0,.15);
  }
  
  .profile-sidebar.sidebar-open {
    right: 0;
  }
}

/* Header-Rechts: Benutzermenü ans rechte Ende */
.header-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* BSN-Blau Header */
.site-header {
  background: var(--bsn) !important;
}


/* === Mobile Overlays (≤400px): Vollbild === */
@media(max-width: 400px) {
  /* Offcanvas-Nav: volle Breite */
  .offcanvas-nav {
    width: 100%;
    height: 100dvh;
  }

  /* Filter-Overlay: Vollbild */
  .filter-backdrop.open {
    align-items: stretch;
    padding-top: 0;
  }
  .filter-overlay {
    width: 100vw;
    max-width: 100vw;
    height: 100dvh;
    border-radius: 0;
    padding: 1rem;
    overflow-y: auto;
  }

  /* Chat-Overlay: bleibt Bottom-Sheet (≤500px-Regel weiter oben) — KEIN
     Vollbild mehr, damit es nie breiter als der Handy-Viewport wirkt.
     (Feedback Daniel 01.09.2026: "Chat-Fenster breiter als Handyauflösung") */

  /* Submit-Overlay: Vollbild */
  .submit-overlay {
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    width: 100vw;
    max-width: 100vw;
    max-height: 100dvh;
    border-radius: 0;
  }
  .submit-body {
    max-height: calc(100dvh - 120px);
  }

  /* Willkommens-Dialog: volle Breite (bleibt zentriert) */
  .welcome-dialog {
    max-width: 100vw;
    border-radius: 0;
    max-height: 100dvh;
  }
}

.detail-fw-btn { background:none; border:none; outline:none; cursor:pointer; display:inline-flex; align-items:center; -webkit-appearance:none; appearance:none; -webkit-tap-highlight-color:transparent; }
.detail-fw-btn:active { transform:scale(0.94); }

/* Notification Toast + Popup Animationen */
@keyframes toastSlide { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes notifPopIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.notif-toast { background:#fff; border:2px solid var(--bsn); border-radius:12px; padding:0.8rem 1.2rem; box-shadow:0 8px 24px rgba(42,51,63,0.2); font-size:0.88rem; pointer-events:auto; animation:toastSlide 0.3s ease; cursor:pointer; }

/* iOS Safe-Area (Standalone-PWA mit Notch/Statusleiste):
   Sticky-Header + Offcanvas-Navi dürfen nicht unter die Statusleiste
   (Uhrzeit/WLAN/Kamera/Notch) rutschen. env() = iOS 11.2+,
   constant() = iOS 11.0-11.1 als Fallback. In normalen Browsern ist
   safe-area-inset-top = 0 → kein Effekt. */
.site-header {
  padding-top: calc(0.75rem + constant(safe-area-inset-top));
  padding-top: calc(0.75rem + env(safe-area-inset-top));
}
.offcanvas-nav-header {
  padding-top: calc(1.3rem + constant(safe-area-inset-top));
  padding-top: calc(1.3rem + env(safe-area-inset-top));
}

/* === Reduced Motion (Vestibular-/Epilepsie-Schutz) === */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
  .chat-bubble, .submit-bubble { animation:none !important; }
  .story-card:hover { transform:none; }
}


/* ══════════════════════════════════════════════════════════════════════════
   PN-SHEET — Fenster-System für Einreichen & KI-Chat  (Redesign 13.09.2026)
   ──────────────────────────────────────────────────────────────────────────
   Grundsätze:
   · KEIN vh/vw/dvh für die Fenstergröße — die Maße kommen aus
     window.visualViewport und stehen in --pn-vh / --pn-vw / --pn-vtop
     (gesetzt von static/js/pn-sheet.js). Fallbacks für alte Browser inline.
   · EIN Breakpoint bei 720px. Darunter Vollflächen-Sheet (alle iPhones
     gleich), darüber angedocktes Fenster.
   · Jedes Eingabefeld >= 16px, sonst zoomt iOS beim Fokus herein und das
     Fenster wirkt zu breit.
   ══════════════════════════════════════════════════════════════════════════ */

/* Hintergrund während ein Sheet offen ist (ergänzt bsnScrollLock) */
html.pn-locked { overflow: hidden; overscroll-behavior: none; }

/* ── Hülle ─────────────────────────────────────────────────────────────── */
dialog.pn-sheet {
  position: fixed;
  top: 0; left: 0; right: auto; bottom: auto;
  margin: 0; padding: 0; border: 0;
  max-width: none; max-height: none;
  background: transparent; color: inherit; overflow: visible;
  width:  var(--pn-vw, 100%);
  height: var(--pn-vh, 100dvh);
  transform: translateY(var(--pn-vtop, 0px));
  display: none;
}
dialog.pn-sheet[open] { display: flex; align-items: flex-end; justify-content: center; }
dialog.pn-sheet::backdrop {
  background: rgba(22, 22, 43, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
/* Fallback ohne <dialog>-Unterstützung: eigene Abdunklung + eigener Stapel */
dialog.pn-sheet:not(:modal)[open] { z-index: 100010; background: rgba(22, 22, 43, 0.28); }

.pn-sheet__panel {
  display: flex; flex-direction: column; min-height: 0;
  width: 100%; height: 100%;
  background: #fff;
  outline: none;
  transition: transform 0.22s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.pn-sheet.is-entering .pn-sheet__panel { animation: pnSheetUp 0.24s cubic-bezier(0.2, 0.7, 0.3, 1); }
@keyframes pnSheetUp { from { transform: translateY(14px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

/* Wischgriff — nur auf dem Handy sichtbar */
.pn-sheet__grip {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  height: 22px; cursor: grab; touch-action: none;
  padding-top: env(safe-area-inset-top);
  background: var(--bsn);
}
.pn-sheet__grip::before { content: ""; width: 38px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); }

/* ── Kopfzeile ─────────────────────────────────────────────────────────── */
.pn-sheet__head {
  flex: 0 0 auto; display: flex; align-items: center; gap: 10px;
  padding: 0.75rem 1rem 0.8rem;
  background: var(--bsn); color: #fff;
}
.pn-sheet__titles { flex: 1 1 auto; min-width: 0; }
.pn-sheet__title {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-weight: 600; font-size: 1rem; line-height: 1.2; margin: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pn-sheet__sub { display: block; font-size: 11px; color: rgba(255, 255, 255, 0.68); margin-top: 2px; }
.pn-sheet__sub .pulse-dot { width: 6px; height: 6px; border-radius: 50%; background: #10B981; display: inline-block; margin-right: 4px; }
.pn-sheet__btn {
  flex: 0 0 auto; display: grid; place-items: center;
  width: 40px; height: 40px; margin: -8px -6px -8px 0;
  background: none; border: 0; border-radius: 10px;
  color: rgba(255, 255, 255, 0.75); cursor: pointer;
  font-size: 1.25rem; line-height: 1;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background 0.15s, color 0.15s;
}
.pn-sheet__btn:hover, .pn-sheet__btn.is-active { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* ── Scrollbereich ─────────────────────────────────────────────────────── */
.pn-sheet__scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  background: #F7F8FA;
  padding: 1rem;
}

/* ── Fußleiste — bleibt IMMER über der Tastatur ────────────────────────── */
.pn-sheet__foot {
  flex: 0 0 auto;
  background: #fff; border-top: 1px solid var(--border);
  padding: 0.7rem 1rem calc(0.7rem + env(safe-area-inset-bottom));
}
/* Bei offener Tastatur ist safe-area-inset-bottom 0 — sonst klafft eine Lücke. */
html.pn-kb .pn-sheet__foot { padding-bottom: 0.7rem; }
html.pn-kb .pn-sheet__grip { display: none; }

/* ── Angedocktes Fenster ab 720px ──────────────────────────────────────── */
@media (min-width: 720px) {
  dialog.pn-sheet[open] { align-items: flex-end; justify-content: flex-end; padding: 0 1.5rem 5.5rem; }
  .pn-sheet__panel {
    width: var(--pn-panel-w, 420px); height: auto;
    max-height: min(660px, calc(var(--pn-vh, 100dvh) - 7.5rem));
    border-radius: 20px; overflow: hidden;
    box-shadow: 0 2px 4px rgba(22, 22, 43, 0.06), 0 18px 48px rgba(42, 51, 63, 0.18);
  }
  .pn-sheet__grip { display: none; }
  .pn-sheet__head { padding: 0.85rem 1.2rem; }
  .pn-sheet__foot { padding: 0.75rem 1.1rem; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Formularbausteine (Einreichen-Fenster)
   ══════════════════════════════════════════════════════════════════════════ */

.pn-lead { font-size: 0.82rem; line-height: 1.5; color: var(--muted); margin-bottom: 0.9rem; }
.pn-lead strong { color: #1F2937; }

.pn-field { margin-bottom: 0.9rem; }
.pn-field > label {
  display: block; font-size: 0.72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem;
}
.pn-field > label .pn-req { color: #DC2626; margin-left: 2px; }

/* 16px ist Pflicht: darunter zoomt iOS beim Fokus herein. */
.pn-input, .pn-textarea {
  display: block; width: 100%;
  border: 1.5px solid var(--border); border-radius: 12px;
  padding: 0.7rem 0.85rem;
  font-size: 16px; line-height: 1.45; font-family: inherit; color: #1F2937;
  background: #fff; outline: none; box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s;
  -webkit-appearance: none; appearance: none;
}
.pn-input:focus, .pn-textarea:focus { border-color: var(--bsn); box-shadow: 0 0 0 3px rgba(42, 51, 63, 0.09); }
.pn-textarea { resize: none; overflow-y: auto; min-height: 108px; max-height: 46vh; }
.pn-input[aria-invalid="true"], .pn-textarea[aria-invalid="true"] { border-color: #DC2626; }

.pn-err { display: none; font-size: 0.76rem; color: #DC2626; margin-top: 0.3rem; font-weight: 500; }
.pn-err.is-shown { display: block; }
.pn-count { text-align: right; font-size: 0.7rem; color: #9CA3AF; margin-top: 0.25rem; font-variant-numeric: tabular-nums; }
.pn-count.is-warn { color: #DC2626; font-weight: 600; }

/* Medien-Chips — ersetzen die drei 76px-Kreise plus nacktes File-Input */
/* Flexibel statt festes 4er-Raster: passt sich der Zahl der Chips an. */
.pn-media { display: flex; gap: 0.5rem; }
.pn-media > .pn-chip { flex: 1 1 0; min-width: 0; }
.pn-chip {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
  min-height: 68px; padding: 0.55rem 0.25rem;
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
  cursor: pointer; color: var(--bsn);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.pn-chip:hover { border-color: var(--bsn); }
.pn-chip:active { transform: scale(0.95); background: #F3F4F6; }
.pn-chip:focus-within { border-color: var(--bsn); box-shadow: 0 0 0 3px rgba(42, 51, 63, 0.09); }
.pn-chip svg { width: 22px; height: 22px; display: block; }
.pn-chip span { font-size: 0.66rem; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pn-chip input[type="file"] { position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; }

.pn-previews { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.65rem; }
.pn-preview { position: relative; width: 68px; height: 68px; border-radius: 10px; overflow: hidden; border: 2px solid var(--bsn); flex-shrink: 0; background: #F3F4F6; }
.pn-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-preview__del {
  position: absolute; top: 2px; right: 2px; width: 22px; height: 22px;
  display: grid; place-items: center;
  background: rgba(220, 38, 38, 0.94); color: #fff; border: 0; border-radius: 50%;
  font-size: 0.7rem; font-weight: 700; cursor: pointer; line-height: 1;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pn-filecard {
  display: none; align-items: center; gap: 0.6rem; margin-top: 0.65rem;
  padding: 0.6rem 0.75rem; background: #EEF2FF; border-radius: 12px;
  font-size: 0.78rem; color: #1F2937; font-weight: 500;
}
.pn-filecard.is-shown { display: flex; }
.pn-filecard button { margin-left: auto; background: none; border: 0; color: #DC2626; font-weight: 700; cursor: pointer; font-size: 0.9rem; padding: 4px 6px; }

/* ── Sprachaufnahme im Einreich-Formular ────────────────────────────── */
.pn-rec {
  margin-top: 0.7rem; padding: 0.85rem 0.9rem;
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
}
.pn-rec[hidden] { display: none; }
.pn-rec__top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.7rem; }
.pn-rec__title { font-size: 0.72rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.03em; }
.pn-rec__x {
  margin-left: auto; background: none; border: 0; color: var(--muted);
  font-size: 0.9rem; cursor: pointer; padding: 4px 6px; line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.pn-rec__stage { display: flex; align-items: center; gap: 0.8rem; }
.pn-rec__mic {
  flex-shrink: 0; width: 56px; height: 56px; display: grid; place-items: center;
  background: var(--bsn); color: #fff; border: 0; border-radius: 50%;
  cursor: pointer; transition: background 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pn-rec__mic svg { width: 24px; height: 24px; display: block; }
.pn-rec__mic:active { transform: scale(0.94); }
/* Laufende Aufnahme: rot plus ruhiger Puls — Stopp-Symbol statt Mikrofon.
   Der Puls laeuft ueber ein Pseudo-Element mit transform/opacity: beides
   uebernimmt der Compositor, waehrend animiertes box-shadow jeden Frame neu
   gezeichnet haette. */
.pn-rec__mic.is-rec { background: #DC2626; }
.pn-rec__mic.is-rec svg { display: none; }
.pn-rec__mic.is-rec::after { content: ""; width: 18px; height: 18px; background: #fff; border-radius: 3px; z-index: 1; }
.pn-rec__mic.is-rec::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: rgba(220, 38, 38, 0.4); animation: pn-rec-pulse 1.5s ease-out infinite;
}
@keyframes pn-rec-pulse {
  from { transform: scale(1);   opacity: 0.55; }
  to   { transform: scale(1.7); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .pn-rec__mic.is-rec::before { animation: none; opacity: 0; }
}
/* Pegelanzeige — feste Hoehe, Ausschlag ueber scaleY.
   Frueher wurde je Frame die Hoehe gesetzt, auf der zugleich ein Uebergang
   lag: das erzwang dauerndes Neu-Layout und lief sichtbar zaeh. transform
   loest kein Layout aus. */
.pn-rec__meter { flex: 1 1 auto; display: flex; align-items: center; gap: 3px; height: 30px; min-width: 0; }
.pn-rec__meter i {
  flex: 1 1 0; min-width: 0; height: 100%; background: var(--bsn); border-radius: 2px;
  opacity: 0.22; transform: scaleY(0.13); transform-origin: center; will-change: transform;
}
.pn-rec__meter.is-live i { opacity: 1; }
.pn-rec__time { flex-shrink: 0; font-size: 0.85rem; font-weight: 700; color: var(--bsn); font-variant-numeric: tabular-nums; }
.pn-rec__hint { margin: 0.65rem 0 0; font-size: 0.72rem; color: #9CA3AF; line-height: 1.45; }
.pn-rec__hint.is-err { color: #DC2626; }
.pn-rec__play { display: block; width: 100%; margin-top: 0.7rem; }
.pn-rec__play[hidden] { display: none; }
.pn-rec__foot { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.7rem; }
.pn-rec__link {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-size: 0.74rem; font-weight: 600; color: var(--muted); text-decoration: underline;
}
.pn-rec__del {
  margin-left: auto; background: none; border: 0; cursor: pointer;
  font-size: 0.74rem; font-weight: 700; color: #DC2626; padding: 4px 6px;
}
.pn-rec__del[hidden] { display: none; }

/* Aufklappbare Zonen — Optionales bleibt zunächst verborgen */
.pn-group { border: 1px solid var(--border); border-radius: 14px; background: #fff; margin-bottom: 0.75rem; overflow: hidden; }
.pn-group > summary {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.85rem 1rem; cursor: pointer; list-style: none;
  font-size: 0.85rem; font-weight: 600; color: #1F2937;
  -webkit-tap-highlight-color: transparent;
}
.pn-group > summary::-webkit-details-marker { display: none; }
.pn-group > summary::after {
  content: ""; margin-left: auto; width: 8px; height: 8px;
  border-right: 2px solid #9CA3AF; border-bottom: 2px solid #9CA3AF;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.18s;
}
.pn-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.pn-group__body { padding: 0 1rem 0.85rem; }
.pn-badge { font-size: 0.66rem; font-weight: 700; color: var(--muted); background: #F3F4F6; border-radius: 999px; padding: 2px 8px; text-transform: uppercase; letter-spacing: 0.03em; }

/* Fußleiste des Einreichen-Fensters */
.pn-trust { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; color: #9CA3AF; margin-bottom: 0.5rem; justify-content: center; }
.pn-trust svg { width: 13px; height: 13px; flex-shrink: 0; }
.pn-cta {
  position: relative; width: 100%; min-height: 50px;
  background: var(--bsn); color: #fff; border: 0; border-radius: 14px;
  font-size: 1rem; font-weight: 700; font-family: inherit; cursor: pointer;
  overflow: hidden; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background 0.15s, opacity 0.15s;
}
.pn-cta:hover:not(:disabled) { background: #374151; }
.pn-cta:active:not(:disabled) { transform: scale(0.99); }
.pn-cta:disabled { opacity: 0.45; cursor: default; }
.pn-cta__label { position: relative; z-index: 1; }
.pn-cta__bar { position: absolute; inset: 0 100% 0 0; background: rgba(255, 255, 255, 0.22); transition: right 0.25s linear; }

/* Erfolgs-Bildschirm */
.pn-done { display: none; text-align: center; padding: 2rem 1rem; }
.pn-done.is-shown { display: block; }
.pn-done__mark { width: 66px; height: 66px; margin: 0 auto 1rem; border-radius: 50%; background: #DCFCE7; display: grid; place-items: center; }
.pn-done__mark svg { width: 32px; height: 32px; stroke: #16A34A; }
.pn-done h3 { font-size: 1.2rem; color: #1F2937; margin-bottom: 0.5rem; }
.pn-done p { font-size: 0.86rem; color: var(--muted); line-height: 1.55; margin-bottom: 1rem; }
.pn-done__id {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'JetBrains Mono', 'SF Mono', monospace; font-size: 1.05rem; font-weight: 700; color: var(--bsn);
  background: #fff; border: 1.5px dashed var(--border); border-radius: 10px; padding: 0.5rem 0.9rem; margin-bottom: 1.2rem;
  cursor: pointer;
}
.pn-done__acts { display: flex; flex-direction: column; gap: 0.5rem; }
.pn-btn-ghost {
  width: 100%; min-height: 46px; background: #fff; color: var(--bsn);
  border: 1.5px solid var(--border); border-radius: 12px;
  font-size: 0.92rem; font-weight: 600; font-family: inherit; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.pn-btn-ghost:hover { border-color: var(--bsn); }

/* ══════════════════════════════════════════════════════════════════════════
   Chatfenster
   ══════════════════════════════════════════════════════════════════════════ */

.pn-chat__log {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  padding: 1rem 1rem 0.5rem;
  display: flex; flex-direction: column; gap: 14px;
  background: #F6F6FB;
}
/* Die Blasen selbst nutzen weiter .chat-msg/.msg-bubble aus dem Chat-Block oben. */
.pn-chat__log .chat-msg .msg-bubble { font-size: 15px; }
.pn-chat__log .chat-msg .msg-bubble a { color: var(--bsn); text-decoration: underline; word-break: break-word; }

/* Vorschläge beim ersten Öffnen — gegen die leere Seite */
.pn-sugg { display: flex; flex-direction: column; gap: 0.45rem; margin-top: 0.35rem; }
.pn-sugg__btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  min-height: 46px; padding: 0.6rem 0.9rem; text-align: left;
  background: #fff; border: 1px solid #E6E6EF; border-radius: 14px;
  font-size: 0.88rem; font-family: inherit; color: #16162B; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: border-color 0.15s, transform 0.1s;
}
.pn-sugg__btn:hover { border-color: var(--bsn); }
.pn-sugg__btn:active { transform: scale(0.985); }
.pn-sugg__btn .pn-sugg__ico { font-size: 1.05rem; line-height: 1; flex-shrink: 0; }

/* Aktionen unter einer Antwort */
.pn-msg-acts { display: flex; gap: 2px; margin: 4px 0 0 2px; }
.pn-msg-acts button {
  background: none; border: 0; padding: 5px 7px; border-radius: 7px;
  font-size: 0.72rem; color: #9CA3AF; cursor: pointer; font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.pn-msg-acts button:hover { color: var(--bsn); background: rgba(42, 51, 63, 0.06); }
.pn-msg-acts button.is-on { color: var(--bsn); font-weight: 700; }

/* Fehlerblase mit Wiederholung */
.pn-retry {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 8px;
  background: #fff; border: 1.5px solid #FECACA; color: #DC2626; border-radius: 999px;
  padding: 6px 13px; font-size: 0.78rem; font-weight: 600; font-family: inherit; cursor: pointer;
}

/* „Neue Antwort"-Pille, wenn der Nutzer weiter oben liest */
.pn-newmsg {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%) translateY(8px);
  background: var(--bsn); color: #fff; border: 0; border-radius: 999px;
  padding: 7px 15px; font-size: 0.78rem; font-weight: 600; font-family: inherit;
  box-shadow: 0 6px 20px rgba(42, 51, 63, 0.3); cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.2s, transform 0.2s; z-index: 2;
}
.pn-newmsg.is-shown { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.pn-chat__logwrap { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }

/* Verfasser-Bereich */
.pn-composer { display: flex; align-items: flex-end; gap: 8px; }
.pn-composer__ta {
  flex: 1 1 auto; min-width: 0;
  border: 1.5px solid #E6E6EF; border-radius: 20px;
  padding: 11px 15px;
  font-size: 16px; /* Pflicht — verhindert iOS-Auto-Zoom */
  line-height: 1.4; font-family: inherit; color: #16162B;
  background: #F6F6FB; outline: none; resize: none;
  max-height: 8.5rem; overflow-y: auto;
  transition: border-color 0.18s, box-shadow 0.18s;
  -webkit-appearance: none; appearance: none;
}
.pn-composer__ta:focus { border-color: var(--bsn); box-shadow: 0 0 0 3px rgba(42, 51, 63, 0.08); background: #fff; }
.pn-composer__send {
  flex: 0 0 auto; width: 44px; height: 44px; display: grid; place-items: center;
  background: var(--bsn); color: #fff; border: 0; border-radius: 50%; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background 0.15s, opacity 0.15s, transform 0.1s;
}
.pn-composer__send svg { width: 19px; height: 19px; display: block; }
.pn-composer__send:disabled { opacity: 0.35; cursor: default; }
.pn-composer__send:active:not(:disabled) { transform: scale(0.93); }
.pn-composer__send.is-stop { background: #DC2626; }
.pn-chat__hint { text-align: center; font-size: 10px; color: #B0B0C0; margin-top: 7px; }
.pn-offline { display: none; background: #FEF2F2; color: #DC2626; font-size: 0.76rem; font-weight: 600; text-align: center; padding: 6px 10px; }
.pn-offline.is-shown { display: block; }

/* Sichtbar nur für Screenreader */
.pn-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (prefers-reduced-motion: reduce) {
  .pn-sheet.is-entering .pn-sheet__panel { animation: none; }
  .pn-sheet__panel { transition: none; }
}


/* ── Ergänzungen zum PN-Sheet-System ───────────────────────────────────── */

/* Panelbreiten am Desktop */
#submitSheet { --pn-panel-w: 440px; }
#chatSheet   { --pn-panel-w: 420px; }

/* Nur am Desktop sichtbare Kopfzeilen-Knöpfe (z.B. Vollbild) */
.pn-desktop-only { display: none; }
@media (min-width: 720px) { .pn-desktop-only { display: grid; } }

/* Vollbild am Desktop */
@media (min-width: 720px) {
  dialog.pn-sheet.is-full[open] { padding: 0; align-items: stretch; justify-content: stretch; }
  .pn-sheet.is-full .pn-sheet__panel { width: 100%; height: 100%; max-height: none; border-radius: 0; }
}

/* Bubbles ausblenden, solange ein Fenster offen ist */
body.pn-sheet-open .chat-bubble,
body.pn-sheet-open .submit-bubble { opacity: 0; pointer-events: none; }

/* Formular-Kleinteile */
.pn-field__caption {
  display: block; font-size: 0.72rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 0.3rem;
}
.pn-field--last { margin-bottom: 0; }
.pn-mediahint { font-size: 0.72rem; color: #9CA3AF; margin-top: 0.5rem; line-height: 1.45; }
.pn-req { color: #DC2626; margin-left: 2px; }
.pn-group .pn-field > label { margin-bottom: 0.3rem; }

/* Erfolgs-Bildschirm: der zweite CTA braucht keine Fortschrittsleiste */
.pn-done .pn-cta { min-height: 46px; font-size: 0.95rem; }


/* [hidden] muss die display:block-Regel der Composer-Icons schlagen,
   sonst liegen Pfeil und Stopp-Quadrat uebereinander. */
.pn-composer__send svg[hidden] { display: none; }
/* Mindesthoehe, falls das Textfeld beim Start noch nicht vermessen ist. */
.pn-composer__ta { min-height: 44px; }


/* [hidden] muss auch die display:flex-Regel der Vorschlagsliste schlagen. */
.pn-sugg[hidden] { display: none; }
/* Beim Nutzer steht "Du" schon im Avatar — die Zeile darueber entfaellt. */
.pn-chat__log .chat-msg.user .msg-sender { display: none; }
.pn-chat__log .chat-msg.assistant .msg-bubble em { font-style: italic; }


/* Reserviert die Scrollbar-Rinne dauerhaft: verhindert den Layout-Sprung
   auf dem Desktop, wenn beim Öffnen eines Fensters overflow:hidden greift.
   Auf iOS (Overlay-Scrollbars) ohne Wirkung. */
html { scrollbar-gutter: stable; }


/* ── Hervorgehobene Kopf-Felder im Einreichen-Fenster ──────────────────────
   Spieltitel (und waehrend der Messe die Halle) stehen ueber dem Textfeld.
   Sie bekommen eine Klartext-Beschriftung statt des kleinen Grossbuchstaben-
   Labels und eine schmale Akzentkante, damit sie gelesen werden, bevor der
   Nutzer mit dem Schreiben beschaeftigt ist. */
.pn-field--lead {
  padding-left: 0.7rem;
  border-left: 3px solid var(--accent);
  margin-bottom: 1.05rem;
}
.pn-field--lead > label {
  font-size: 0.95rem; font-weight: 600; color: #1F2937;
  text-transform: none; letter-spacing: 0; margin-bottom: 0.4rem;
}
.pn-fieldhint { font-size: 0.74rem; color: #9CA3AF; margin-top: 0.35rem; line-height: 1.45; }

/* ── Daumen-Wertung im Chat (13.09.2026) ─────────────────────────────────
   Nach der Wertung bleiben beide Daumen sichtbar, aber blockiert — der
   gewaehlte bleibt blau; rechts daneben der Danke-Hinweis. */
.pn-msg-acts button:disabled { cursor: default; opacity: 0.55; }
.pn-msg-acts button.pn-vote.is-on:disabled { opacity: 1; }
.pn-thanks { align-self: center; margin-left: 6px; font-size: 0.7rem;
  font-weight: 600; color: var(--bsn); }

  /* === Reiter-Navigation (09/2026) ==================================
     Steuert, welche Inhaltsart die Startseite zeigt: Community, News,
     SPIEL 26, Termine. Siehe services/feed_tabs.py und
     templates/index_new.html.

     Der aktive Reiter wird doppelt ausgezeichnet - Farbe UND Unterstrich.
     Farbe allein waere fuer Menschen mit Farbsehschwaeche kein Signal
     (WCAG 1.4.1). Den Fokus-Ring liefert die globale :focus-visible-Regel
     weiter oben.

     Auf schmalen Bildschirmen scrollt die Leiste waagerecht, statt
     umzubrechen: Vier Reiter in zwei Zeilen lesen sich wie zwei getrennte
     Navigationen. */
  .feed-tabs { max-width:1200px; margin:0.75rem auto 0; padding:0 1rem; }
  .feed-tabs__list {
    display:flex; gap:0.25rem; list-style:none; margin:0; padding:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch;
    border-bottom:2px solid #E5E7EB; scrollbar-width:none;
  }
  .feed-tabs__list::-webkit-scrollbar { display:none; }
  .feed-tabs__item { flex:0 0 auto; }
  .feed-tabs__link {
    display:block; padding:0.75rem 1.1rem; text-decoration:none;
    font-weight:600; font-size:0.95rem; color:#4B5563; white-space:nowrap;
    border-bottom:3px solid transparent; margin-bottom:-2px;
    /* 44px Mindesthoehe: sichere Trefferflaeche am Touchscreen. */
    min-height:44px; transition:color 0.15s ease, border-color 0.15s ease;
  }
  .feed-tabs__link:hover { color:#20228a; border-bottom-color:#C7D2FE; }
  .feed-tabs__link.is-active { color:#20228a; border-bottom-color:#20228a; }

  /* === Termine-Ansicht (Reiter "Termine") === */
  .events { max-width:1300px; margin:1rem auto; padding:0 1rem; }
  .events__title { font-size:1.35rem; font-weight:700; color:#1F2937; margin-bottom:1rem; }
  .event-sources { margin-bottom:1rem; padding:0.75rem 1rem; background:#F9FAFB; border:1px solid #E5E7EB; border-radius:10px; color:#4B5563; font-size:0.82rem; line-height:1.5; }
  .event-sources summary { cursor:pointer; color:#20228a; font-weight:700; }
  .event-sources ul { margin:0.6rem 0 0 1.1rem; padding:0; }
  .event-sources a { color:#20228a; font-weight:600; }
  .events__filter {
    display:flex; align-items:center; gap:0.6rem; flex-wrap:wrap;
    background:#fff; border:1px solid #E5E7EB; border-radius:12px;
    padding:0.75rem 1rem; margin-bottom:1.25rem;
  }
  .events__filter-label { font-size:0.85rem; font-weight:600; color:#374151; }
  .events__filter-select {
    flex:1 1 12rem; min-height:44px; padding:0.5rem 0.75rem;
    border:1px solid #D1D5DB; border-radius:8px; font-size:0.95rem;
    background:#fff; color:#1F2937;
  }
  .events__filter-btn {
    min-height:44px; padding:0.5rem 1.25rem; border:none; border-radius:8px;
    background:#20228a; color:#fff; font-weight:700; font-size:0.9rem;
    cursor:pointer;
  }
  .events__filter-btn:hover { background:#181a6e; }
  .events__list { list-style:none; margin:0; padding:0; }

  /* === Like-Toast (Fix 09/2026): Fehler-Meldung + Rückgängig === */
  .pn-toast { position:fixed; left:50%; bottom:1.2rem; transform:translate(-50%, 0.6rem); display:flex; align-items:center; gap:0.8rem; background:#2a333f; color:#fff; padding:0.65rem 1rem; border-radius:12px; font-size:0.85rem; box-shadow:0 6px 20px rgba(0,0,0,0.25); opacity:0; pointer-events:none; transition:opacity 0.2s ease, transform 0.2s ease; z-index:1000; max-width:min(92vw, 26rem); }
  .pn-toast.show { opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
  .pn-toast-undo { background:transparent; border:1px solid rgba(255,255,255,0.55); color:#fff; border-radius:10px; padding:0.3rem 0.75rem; font:inherit; font-weight:600; cursor:pointer; min-height:32px; flex-shrink:0; }
  .pn-toast-undo:hover { background:rgba(255,255,255,0.14); }
  @media (prefers-reduced-motion: reduce) { .pn-toast { transition:none; } }


/* Interne Eventdetails verwenden dieselbe Detailkartengröße wie Beiträge. */
 .event-detail-container { max-width:720px; }
 .event-detail-card { padding:2rem; }
 .event-back-link { display:inline-block; margin-bottom:1rem; color:var(--bsn); text-decoration:none; font-size:0.85rem; font-weight:700; }
 .event-back-link:hover { text-decoration:underline; }
 .event-detail-media { margin-top:0.5rem; }
 .event-detail-date { margin:0 0 0.4rem; color:var(--bsn); font-size:0.82rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; }
 .event-detail-card .detail-heading { margin:0 0 1.2rem; font-size:2rem; line-height:1.2; color:#1F2937; }
 .event-detail-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0.8rem; margin:0 0 1.4rem; padding:0.9rem 0; border-top:1px solid #E5E7EB; border-bottom:1px solid #E5E7EB; }
 .event-detail-facts div { min-width:0; }
 .event-detail-facts dt { color:#6B7280; font-size:0.72rem; font-weight:800; text-transform:uppercase; letter-spacing:0.04em; }
 .event-detail-facts dd { margin:0.2rem 0 0; color:#1F2937; font-size:0.92rem; line-height:1.4; overflow-wrap:anywhere; }
 .event-detail-description { margin-top:0.5rem; }
 .event-detail-facts-block { margin-top:1.1rem; padding-top:0.9rem; border-top:1px solid #E5E7EB; color:#4B5563; font-size:0.88rem; line-height:1.6; white-space:pre-line; }
 .event-detail-facts-block summary { cursor:pointer; color:var(--bsn); font-weight:800; }
 .event-detail-facts-block div { margin-top:0.8rem; overflow-wrap:anywhere; }
 .event-detail-source { margin:1.4rem 0 0; }
 .event-detail-source a { display:inline-flex; align-items:center; gap:0.25rem; padding:0.65rem 0.9rem; border-radius:8px; background:var(--bsn); color:#fff; font-size:0.82rem; font-weight:800; text-decoration:none; }
 .event-detail-source a:hover { background:#1F2937; }
 @media(max-width:600px) {
   .event-detail-card { padding:1.2rem; }
   .event-detail-card .detail-heading { font-size:1.55rem; }
   .event-detail-facts { grid-template-columns:1fr; }
 }

  /* Feste Eventgrafik-Regel: 1600x1200 / 4:3, damit Text im Homepage-Grid vollständig bleibt. */
  .event-graphic { position:relative; width:100%; aspect-ratio:4/3; overflow:hidden; border-radius:8px; background:#eef0f4; }
  .event-graphic__img { display:block; width:100%; height:100%; object-fit:cover; }

  /* Eventfacts: gerenderte Überschrift, Tabelle, Listen und Quellenlinks statt Markdown-Quelltext. */
  .event-richtext h2 { margin:1.1rem 0 0.55rem; font-size:1.2rem; line-height:1.3; color:#1F2937; }
  .event-richtext h3 { margin:0.9rem 0 0.45rem; font-size:1rem; color:#1F2937; }
  .event-richtext p { margin:0.55rem 0; }
  .event-richtext ul { margin:0.55rem 0 0.75rem 1.25rem; padding:0; }
  .event-richtext li { margin:0.25rem 0; }
  .event-richtext table { width:100%; border-collapse:collapse; margin:0.8rem 0 1rem; font-size:0.88rem; line-height:1.45; }
  .event-richtext th { text-align:left; background:#F3F4F6; color:#374151; font-weight:800; }
  .event-richtext th, .event-richtext td { padding:0.55rem 0.65rem; border:1px solid #E5E7EB; vertical-align:top; }
  .event-richtext td:first-child { width:25%; font-weight:700; color:#374151; }
  .event-richtext a { color:var(--bsn); font-weight:700; text-decoration:underline; overflow-wrap:anywhere; }

  /* Terminorientierung: prominenter, umbruchfähiger Datumsblock innerhalb der Standardkarte. */
  .event-card-date { display:flex; flex-direction:column; gap:0.15rem; margin:0 0 0.7rem; padding:0.6rem 0.7rem; border-left:4px solid var(--bsn); border-radius:8px; background:#F3F4F6; }
  .event-card-date__label { color:#6B7280; font-size:0.68rem; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
  .event-card-date time { color:#20228a; font-size:0.98rem; font-weight:800; line-height:1.35; overflow-wrap:anywhere; }


  /* Termine Contentbereich: kalenderartige Tagesagenda mit Stadt-/Länderfiltern. */
  /* Breite steuert jetzt .events (siehe Termine im Community-Design). */
  #eventsCalendar .events__header { display:flex; align-items:center; justify-content:space-between; margin:1rem 0; }
  #eventsCalendar .events__title { margin:0; }
  .events__filters { display:grid; grid-template-columns:minmax(220px,2fr) minmax(150px,1fr) minmax(150px,1fr) auto auto; gap:.65rem; align-items:end; margin:0 0 1.2rem; padding:1rem; background:#fff; border:1px solid rgba(42,51,63,.1); border-radius:16px; box-shadow:0 1px 3px rgba(42,51,63,.08),0 1px 2px rgba(0,0,0,.04); }
  .events__filter-field { display:flex; flex-direction:column; gap:.3rem; min-width:0; }
  .events__filter-field > span { color:#6B7280; font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; }
  .events__filter-field input, .events__filter-field select { width:100%; min-height:44px; padding:.55rem .7rem; color:#1F2937; background:#FAFAFA; border:1.5px solid #E5E7EB; border-radius:9px; font:inherit; }
  .events__filter-field input:focus, .events__filter-field select:focus { outline:2px solid rgba(32,34,138,.25); border-color:var(--bsn); background:#fff; }
  .events__filters .events__filter-btn { min-height:44px; padding:0 1rem; border:0; border-radius:9px; background:var(--bsn); color:#fff; font-weight:800; cursor:pointer; }
  .events__filter-reset { align-self:center; color:var(--bsn); font-size:.82rem; font-weight:700; white-space:nowrap; }
  /* Die alte Agenda-Optik (eigene Kartenform, Datumsspalte, Farbbalken)
     ist entfallen: Termine nutzen jetzt main-grid + story-card wie
     Community und News. Siehe Abschnitt "Termine im Community-Design". */
  @media(max-width:850px) { .events__filters { grid-template-columns:repeat(2,minmax(0,1fr)); } .events__filter-field--city { grid-column:1 / -1; } .events__filters .events__filter-btn { width:100%; } }
  @media(max-width:600px) { #eventsCalendar { width:100%; padding:0 .7rem 1.5rem; overflow:hidden; } #eventsCalendar .events__header { margin:.7rem 0 .9rem; } .events__filters { grid-template-columns:1fr; padding:.8rem; } .events__filter-field--city { grid-column:auto; } .events__filter-reset { justify-self:start; } }


  /* Aufklappbarer Monatskalender: kompakt geschlossen, touchfreundlich offen. */
  .events-calendar-toggle { margin:0 0 1.2rem; background:#fff; border:1px solid rgba(42,51,63,.1); border-radius:16px; box-shadow:0 1px 3px rgba(42,51,63,.08),0 1px 2px rgba(0,0,0,.04); }
  .events-calendar-toggle > summary { display:flex; align-items:center; min-height:48px; padding:.7rem 1rem; color:var(--bsn); font-weight:800; cursor:pointer; list-style:none; }
  .events-calendar-toggle > summary::-webkit-details-marker { display:none; }
  .events-calendar-toggle > summary::before { content:"+"; display:inline-flex; align-items:center; justify-content:center; width:1.5rem; height:1.5rem; margin-right:.55rem; border:1px solid currentColor; border-radius:50%; font-size:1.1rem; line-height:1; }
  .events-calendar-toggle[open] > summary::before { content:"−"; }
  .events-calendar-toggle__hide { display:none; }
  .events-calendar-toggle[open] .events-calendar-toggle__show { display:none; }
  .events-calendar-toggle[open] .events-calendar-toggle__hide { display:inline; }
  .events-calendar { padding:0 1rem 1rem; }
  .events-calendar__month { margin:0 0 .8rem; color:#1F2937; font-size:1.05rem; font-weight:800; }
  .events-calendar__weekdays, .events-calendar__grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:.35rem; }
  .events-calendar__weekdays { margin-bottom:.35rem; color:#6B7280; font-size:.68rem; font-weight:800; letter-spacing:.06em; text-align:center; text-transform:uppercase; }
  .events-calendar__cell { display:flex; flex-direction:column; align-items:center; justify-content:center; min-height:48px; padding:.3rem; color:#374151; background:#FAFBFC; border:1px solid transparent; border-radius:9px; font-size:.84rem; text-decoration:none; }
  a.events-calendar__cell { color:var(--bsn); background:#EEF0F8; border-color:#D7D9F1; font-weight:800; }
  a.events-calendar__cell:hover, a.events-calendar__cell:focus-visible { background:#E1E3F7; border-color:var(--bsn); outline:2px solid rgba(32,34,138,.2); outline-offset:1px; }
  .events-calendar__cell.is-muted { color:#B7BCC6; background:#fff; }
  a.events-calendar__cell.is-muted { color:#8E93A4; background:#F7F7FB; }
  .events-calendar__cell i { display:block; width:5px; height:5px; margin-top:.25rem; background:var(--bsn); border-radius:50%; }
  @media(max-width:600px) { .events-calendar { padding:0 .65rem .75rem; } .events-calendar__weekdays, .events-calendar__grid { gap:.2rem; } .events-calendar__cell { min-height:40px; padding:.2rem; font-size:.78rem; } .events-calendar__weekdays { font-size:.6rem; } }


  /* ── Termin-Ausbau 09/2026 ──────────────────────────────────────
     Monatsnavigation, Mehrtages-Badges, Vormerken und Kommentare. */

  /* Kopf des Kalenderblatts: Pfeile links/rechts, Monat mittig. Die Pfeile
     sind Links (ohne JS blaetterbar) und erfuellen mit 44px die
     Touch-Mindestgroesse. */
  .events-calendar__nav { display:grid; grid-template-columns:44px minmax(0,1fr) 44px; align-items:center; gap:.5rem; margin:0 0 .8rem; }
  .events-calendar__nav .events-calendar__month { margin:0; text-align:center; }
  .events-calendar__nav-btn { display:flex; align-items:center; justify-content:center; width:44px; height:44px; color:var(--bsn); background:#EEF0F8; border:1px solid #D7D9F1; border-radius:10px; font-size:1.4rem; font-weight:800; line-height:1; text-decoration:none; }
  .events-calendar__nav-btn:hover, .events-calendar__nav-btn:focus-visible { background:#E1E3F7; border-color:var(--bsn); outline:2px solid rgba(32,34,138,.2); outline-offset:1px; }
  .events-calendar__today { display:inline-block; margin:0 0 .7rem; color:var(--bsn); font-size:.8rem; font-weight:700; text-decoration:underline; }
  .events-calendar__cell.is-today { border-color:var(--accent,#FF6D02); box-shadow:inset 0 0 0 1px var(--accent,#FF6D02); font-weight:800; }

  /* Kurzliste unter dem Raster: zeigt, was im gewaehlten Monat ansteht -
     auch dann, wenn der Monat ausserhalb der Agenda-Liste liegt. */
  .events-calendar__sheet-list { list-style:none; margin:.9rem 0 0; padding:.85rem 0 0; border-top:1px solid #EDEFF3; display:flex; flex-direction:column; gap:.4rem; }
  .events-calendar__sheet-list a { display:flex; flex-wrap:wrap; align-items:baseline; gap:.5rem; padding:.4rem .55rem; border-radius:9px; color:#374151; font-size:.85rem; text-decoration:none; }
  .events-calendar__sheet-list a:hover { background:#F4F5F9; }
  .events-calendar__sheet-list b { color:var(--bsn); font-size:.78rem; font-weight:800; white-space:nowrap; }
  .events-calendar__sheet-list em { color:#8E93A4; font-style:normal; font-size:.76rem; }
  .events-calendar__sheet-empty { margin:.9rem 0 0; padding:.85rem 0 0; border-top:1px solid #EDEFF3; color:#6B7280; font-size:.86rem; text-align:center; }

  /* Kopfzeile des Reiters: Merkliste und "Termin melden". */
  .events__header-actions { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
  .events__action-link { color:var(--bsn); font-size:.85rem; font-weight:700; text-decoration:none; white-space:nowrap; }
  .events__action-link:hover { text-decoration:underline; }
  .events__report-btn { display:inline-flex; align-items:center; min-height:40px; padding:0 .9rem; background:var(--accent,#FF6D02); border-radius:9px; color:#fff; font-size:.85rem; font-weight:800; text-decoration:none; white-space:nowrap; }
  .events__report-btn:hover { filter:brightness(.94); }

  /* Badges an der Terminkarte. */
  .events-calendar__item-meta .is-multiday { color:#0F766E; background:#DCF5F1; font-weight:700; }
  .events-calendar__item-meta .has-comments { color:var(--bsn); background:#E7E8FB; font-weight:700; }
  .events-calendar__item-side { display:flex; flex-direction:column; align-items:flex-end; gap:.45rem; }

  /* Vormerken-Stern: unauffaellig, bis er gesetzt ist. */
  .event-bookmark-btn { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; color:#B7BCC6; background:transparent; border:1px solid #E5E7EB; border-radius:50%; font-size:1.05rem; line-height:1; cursor:pointer; transition:color .15s ease, background .15s ease, border-color .15s ease; }
  .event-bookmark-btn:hover { color:var(--accent,#FF6D02); border-color:var(--accent,#FF6D02); }
  .event-bookmark-btn.is-active { color:#fff; background:var(--accent,#FF6D02); border-color:var(--accent,#FF6D02); }
  .event-bookmark-btn:focus-visible { outline:2px solid rgba(32,34,138,.3); outline-offset:2px; }

  /* Termin-Kommentare nutzen die Klassen von detail.html (comments-section,
     comment-item, comment-form) - eigene Regeln sind daher entfallen. */

  /* Formulare fuer Melden und Bearbeiten. */
  /* Gleiche Kartenform wie .submit-card und .legal-card - ein Formular
     soll auf dieser Seite immer gleich aussehen. */
  .event-form { display:flex; flex-direction:column; gap:.9rem; max-width:720px; margin:0 auto; padding:2rem; background:#fff; border-radius:16px; box-shadow:0 4px 20px rgba(0,0,0,0.06); }
  .event-form label { display:flex; flex-direction:column; gap:.3rem; font-size:.78rem; font-weight:800; color:#6B7280; letter-spacing:.04em; text-transform:uppercase; }
  .event-form input, .event-form select, .event-form textarea { width:100%; min-height:44px; padding:.55rem .7rem; color:#1F2937; background:#FAFAFA; border:1.5px solid #E5E7EB; border-radius:9px; font:inherit; font-weight:400; letter-spacing:normal; text-transform:none; }
  .event-form textarea { min-height:110px; resize:vertical; }
  .event-form input:focus, .event-form select:focus, .event-form textarea:focus { outline:2px solid rgba(32,34,138,.25); border-color:var(--bsn); background:#fff; }
  .event-form__row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.9rem; }
  .event-form__submit { min-height:48px; padding:0 1.4rem; background:var(--accent,#FF6D02); border:0; border-radius:10px; color:#fff; font-size:.95rem; font-weight:800; cursor:pointer; }
  .event-form__hint { margin:0; color:#6B7280; font-size:.85rem; line-height:1.5; }
  .event-form__error { margin:0; padding:.7rem .9rem; background:#FEF2F2; border:1px solid #FCA5A5; border-radius:9px; color:#B91C1C; font-size:.88rem; }
  .event-form__current-img { max-width:200px; border-radius:9px; }
  @media(max-width:600px) { .event-form__row { grid-template-columns:1fr; } .events__header-actions { width:100%; } }


  /* Kommentar-Vorschau auf der Terminkarte im Community-Reiter.
     Die Karte selbst ist eine gewoehnliche story-card - nur dieser
     Auszug zeigt, worueber gerade gesprochen wird. */



  /* ══════════════════════════════════════════════════════════════
     Termine im Community-Design (09/2026)
     Die Terminliste benutzt main-grid und story-card wie Community und
     News. Hier stehen nur die Ergaenzungen, die ein Termin zusaetzlich
     braucht: Tagestrenner, Datumszeile, Laufzeit-Band und Ort.
     ══════════════════════════════════════════════════════════════ */

  /* Kopfleiste und Filter sitzen auf der Breite des Kartenrasters. */
  .events { max-width:640px; margin:0 auto; padding:0 .8rem; }
  .events__bar { margin:1rem 0 .2rem; }
  #eventsCalendar .events__header { display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin:0 0 .9rem; }
  #eventsCalendar .events__title { margin:0; font-size:1.35rem; font-weight:700; color:#1F2937; }

  /* Tagestrenner zwischen den Karten: leicht, aber eindeutig. Er traegt
     die Sprungmarke, die der Kalender anspringt. */
  .events-daymark { display:flex; align-items:center; gap:.6rem; margin:.6rem 0 -.2rem; scroll-margin-top:5rem; }
  .events-daymark:first-child { margin-top:0; }
  .events-daymark__day { color:var(--bsn); font-size:.78rem; font-weight:800; letter-spacing:.03em; white-space:nowrap; }
  .events-daymark__line { flex:1; height:1px; background:#E5E7EB; }
  .events-daymark__count { min-width:20px; padding:.1rem .45rem; background:#EEF0F8; border-radius:999px; color:var(--bsn); font-size:.7rem; font-weight:800; text-align:center; }

  /* Die Karte selbst ist eine story-card; nur das Innenleben ist eigen. */
  .event-card__media { aspect-ratio:16/9; overflow:hidden; background:#F3F4F6; }
  .event-card__media img { width:100%; height:100%; object-fit:cover; display:block; }
  .event-card__ribbon { position:absolute; top:.5rem; left:.5rem; z-index:6; padding:.2rem .55rem; background:#0F766E; border-radius:6px; color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.02em; }
  .event-card__when { display:flex; align-items:baseline; gap:.45rem; flex-wrap:wrap; }
  .event-card__when > time { color:var(--bsn); font-size:.78rem; font-weight:800; letter-spacing:.02em; }
  .event-card__time { color:#6B7280; font-size:.75rem; font-weight:600; }
  .event-card__tag { padding:.1rem .45rem; background:#E7E8FB; border-radius:999px; color:var(--bsn); font-size:.68rem; font-weight:700; }
  .event-card__title { margin:.1rem 0 0; color:#1F2937; font-size:1rem; font-weight:700; line-height:1.35; overflow-wrap:anywhere; }
  /* Der Ort ist die zweite Frage nach dem "Wann" - er steht deshalb
     hervorgehoben und nicht als blasse Nebenzeile. Die Flagge beantwortet
     das Land auf einen Blick, ohne den Namen lesen zu muessen. */
  .event-card__where { display:flex; align-items:baseline; flex-wrap:wrap; gap:.4rem; margin:.4rem 0 0; font-size:.86rem; line-height:1.35; overflow-wrap:anywhere; }
  .event-card__flag { flex:none; font-size:1.05rem; line-height:1; letter-spacing:.06em; }
  .event-card__city { color:#1F2937; font-weight:700; }
  .event-card__country { color:#6B7280; font-size:.78rem; }
  .event-card__venue { margin:.15rem 0 0; color:#9CA3AF; font-size:.76rem; line-height:1.4; overflow-wrap:anywhere; }
  .event-card .story-preview { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:.85rem; line-height:1.55; color:#4B5563; margin:0; }
  .event-bm-btn { background:none; border:none; padding:0; cursor:pointer; }

  /* Ohne Bild braucht die Karte oben etwas Luft, damit das Band nicht
     auf dem Datum klebt. */
  .event-card:not(:has(.event-card__media)) .event-card__ribbon { position:static; display:inline-block; margin:.75rem 1rem 0; }

  /* Kalender: gleiche Kartenoptik wie die Beitragskarten. */
  .events-calendar-toggle { margin:0 0 1rem; background:#fff; border:0; border-radius:16px; box-shadow:0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04); }

  /* Jeder Tag ist ein eigener Abschnitt: Trenner, darunter ein eigenes
     main-grid mit den Karten dieses Tages.

     Der erste Versuch stellte den Trenner als vollbreites Element IN das
     Raster (`grid-column: 1 / -1`). Das funktioniert bei `auto-fill` nicht
     verlaesslich - `-1` zaehlt nur bis zur letzten *expliziten* Linie, und
     die Karten landeten jeweils allein in einer Zeile. Getrennte Raster je
     Tag sind eindeutig und brauchen keine Sonderregel. */
  .events-feed { display:flex; flex-direction:column; }
  .events-feed .main-grid { margin-top:.35rem; margin-bottom:0; }
  .events-feed .events-daymark { max-width:640px; margin:1.1rem auto .1rem; padding:0 .8rem; width:100%; }
  .events-feed > .events-daymark:first-child { margin-top:.4rem; }

  /* Ab 768px ist main-grid ein Raster (siehe RESPONSIVE); die Termin-Leiste
     folgt genau dieser Breite, damit Filter und Karten buendig stehen. */
  @media(min-width:768px) {
    .events { max-width:1300px; padding:0 1rem; }
    .events-feed .events-daymark { max-width:1300px; padding:0 1rem; }
  }
  @media(max-width:600px) {
    .events { padding:0 .7rem; }
    #eventsCalendar .events__header { margin:.7rem 0 .8rem; }
    #eventsCalendar .events__title { font-size:1.15rem; }
    .events__header-actions { width:100%; }
  }



  /* Umschalter in der Merkliste (Profil, Reiter "Gemerkt").
     Uebernimmt die Pillen-Optik der Startseiten-Filter (.frontend-filter),
     damit auf der Seite nur EINE Sprache fuer Filter existiert. */
  .bm-filter { display:flex; gap:.45rem; flex-wrap:wrap; margin:.2rem 0 1.4rem; }
  .bm-filter__btn { display:inline-flex; align-items:center; gap:.4rem; min-height:44px; padding:.4rem .95rem; background:#fff; border:1.5px solid #E5E7EB; border-radius:999px; color:#6B7280; font:inherit; font-size:.82rem; font-weight:600; line-height:1.2; cursor:pointer; transition:background .15s ease, border-color .15s ease, color .15s ease; -webkit-tap-highlight-color:transparent; }
  .bm-filter__btn:hover { border-color:#D1D5DB; color:#374151; }
  .bm-filter__btn:focus-visible { outline:2px solid rgba(32,34,138,.3); outline-offset:2px; }
  .bm-filter__num { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 .35rem; background:#F3F4F6; border-radius:999px; color:#6B7280; font-size:.7rem; font-weight:700; }
  .bm-filter__btn.is-active { background:#1F2937; border-color:#1F2937; color:#fff; font-weight:700; }
  .bm-filter__btn.is-active .bm-filter__num { background:rgba(255,255,255,.22); color:#fff; }
  .bm-group + .bm-group { margin-top:1.8rem; }
  .bm-group[hidden] { display:none; }
  .bm-group > h2 { margin:0 0 .9rem; font-size:1.05rem; font-weight:700; color:#1F2937; }
  @media(max-width:500px) { .bm-filter__btn { flex:1 1 auto; justify-content:center; } }


  /* Kommentar-Auszug auf einer Terminkarte im Community-Reiter. */
  .event-card__talk { margin:.55rem 0 0; padding:.55rem .65rem; background:#F7F8FA; border-left:3px solid var(--accent,#FF6D02); border-radius:0 8px 8px 0; }
  .event-card__talk-line { margin:0; color:#4B5563; font-size:.8rem; line-height:1.45; overflow-wrap:anywhere; }
  .event-card__talk-line + .event-card__talk-line { margin-top:.3rem; }
  .event-card__talk-line b { color:#1F2937; font-weight:700; }