/* ===========================================================================
   OMC Roleplay - eigenes Stylesheet fuer /roleplay/
   ===========================================================================
   Wird NUR auf RP-Seiten geladen (siehe inc/omc-roleplay.php). style.css bleibt
   unangetastet - deshalb kann an den bestehenden OMC-Seiten hier auch nichts
   kaputtgehen.

   Alle Klassen tragen das Praefix .rp- , und alles ist zusaetzlich unter .rp
   verschachtelt gedacht. Farben kommen aus den vorhandenen OMC-Variablen
   (--bg, --card, --line, --accent ...); neu sind nur die Amber-Toene, und die
   gelten ausschliesslich fuer LIVE, STREAM, CREATOR und die Haupt-Handlungen.
   =========================================================================== */

.rp{
  /* Blau bleibt die Struktur, Amber ist der Akzent dieses Bereichs. */
  --rp:#f5a524;
  --rp2:#ffc45e;
  --rp-glow:rgba(245,165,36,.42);
  --rp-weich:rgba(245,165,36,.10);
  --rp-rand:rgba(245,165,36,.32);
  --ic:#7ec8a9;
  --ooc:#7fb0ff;
  display:block;
}

/* ------------------------------------------------------------- Grundraster */
.rp-wrap{max-width:1280px;margin:0 auto;padding:0 40px 90px}
.rp-sect{margin-top:52px}
.rp-sect-h{display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  border-bottom:1px solid var(--line);padding-bottom:12px;margin-bottom:20px;flex-wrap:wrap}
.rp-sect-h h2{font-family:'Saira',sans-serif;font-weight:700;font-size:20px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt);margin:0;display:flex;align-items:center;gap:11px}
.rp-mehr{font-family:'Saira',sans-serif;font-weight:600;font-size:12px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--mut2);border-bottom:1px solid transparent}
.rp-mehr:hover{color:var(--rp2);border-bottom-color:var(--rp-rand)}
.rp-sect-lead{color:var(--mut2);font-size:15px;line-height:1.65;max-width:78ch;margin:0 0 20px}
.rp-lead{color:var(--mut2);font-size:16.5px;line-height:1.7;max-width:78ch;margin:14px 0 0}
.rp .mut{color:var(--mut)}
.rp-fussnote{font-size:12.5px;line-height:1.6;margin-top:14px}

/* ------------------------------------------------------- Unternavigation ---
   Zwei Ausgaben, immer genau eine sichtbar. Die waagerecht scrollende Leiste
   wuerde auf dem Handy mit jedem neuen Bereich schlechter - dort steht deshalb
   ein aufklappbares Feld mit vollbreiten Flaechen. */
.rp-subnav{position:sticky;top:0;z-index:6;background:rgba(7,11,18,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}

/* breit */
.rp-subnav-breit{display:block}
.rp-subnav-in{max-width:1280px;margin:0 auto;padding:0 40px;display:flex;gap:2px;flex-wrap:wrap}
.rp-subnav-in a{font-family:'Saira',sans-serif;font-weight:600;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);padding:15px 13px;white-space:nowrap;
  border-bottom:2px solid transparent}
.rp-subnav-in a:hover{color:var(--txt)}
.rp-subnav-in a.an{color:var(--rp2);border-bottom-color:var(--rp)}

/* schmal */
.rp-subnav-schmal{display:none}
.rp-subnav-schmal>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:14px 18px;font-family:'Saira',sans-serif;font-weight:600;font-size:13px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.rp-subnav-schmal>summary::-webkit-details-marker{display:none}
.rp-subnav-schmal>summary .lbl{color:var(--mut);opacity:.75}
.rp-subnav-schmal>summary .jetzt{color:var(--rp2);flex:1;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.rp-subnav-schmal>summary svg{width:16px;height:16px;flex:none;transition:transform .16s}
.rp-subnav-schmal[open]>summary svg{transform:rotate(180deg)}
.rp-subnav-schmal[open]>summary{border-bottom:1px solid var(--line)}
.rp-subnav-gitter{display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:10px 12px 14px}
.rp-subnav-gitter a{font-family:'Saira',sans-serif;font-weight:600;font-size:12.5px;
  letter-spacing:.08em;text-transform:uppercase;color:var(--mut2);
  padding:13px 12px;border-radius:8px;border:1px solid var(--line);
  display:flex;align-items:center;min-height:46px;line-height:1.2}
.rp-subnav-gitter a.an{color:var(--rp2);border-color:var(--rp-rand);background:var(--rp-weich)}

/* -------------------------------------------------------------------- Hero */
.rp-hero{position:relative;overflow:hidden;padding:76px 40px 54px;
  background-color:#0a1422;
  background-image:
    linear-gradient(90deg, rgba(6,10,17,.95) 0%, rgba(6,10,17,.82) 32%, rgba(6,10,17,.42) 62%, rgba(6,10,17,.15) 100%),
    linear-gradient(180deg, rgba(6,10,17,.2) 0%, rgba(6,10,17,0) 34%, rgba(6,10,17,.6) 76%, var(--bg) 100%),
    url('../hero.jpg');
  background-size:cover;background-position:center 30%;background-repeat:no-repeat}
.rp-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--rp),transparent);opacity:.55}
.rp-hero-in{position:relative;max-width:1280px;margin:0 auto}
.rp-eyebrow{font-family:'Saira',sans-serif;font-weight:600;font-size:12px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rp2);display:flex;align-items:center;gap:9px}
.rp-hero h1{font-family:'Saira',sans-serif;font-weight:800;font-size:64px;line-height:.98;
  letter-spacing:.02em;margin:12px 0 0;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.rp-hero-sub{font-family:'Saira',sans-serif;font-weight:600;color:var(--accent2);font-size:22px;
  letter-spacing:.03em;margin-top:10px}
.rp-hero-lead{max-width:600px;color:var(--mut2);margin-top:20px;font-size:15.5px;line-height:1.65}
.rp-hero-actions{display:flex;gap:14px;margin-top:30px;flex-wrap:wrap}

.rp-zahlen{display:flex;gap:34px;margin-top:38px;flex-wrap:wrap}
.rp-zahl .w{font-family:'Saira',sans-serif;font-weight:700;font-size:30px;line-height:1;color:var(--txt)}
.rp-zahl .l{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
  margin-top:6px;font-weight:600;display:flex;align-items:center;gap:7px}

/* ----------------------------------------------------------- Schaltflaechen */
.rp-btn{font-family:'Saira',sans-serif;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  font-size:12.5px;border-radius:7px;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;gap:9px;transition:.15s;border:1px solid transparent;padding:12px 20px}
.rp-btn svg{width:15px;height:15px;flex:none}
.rp-btn-amber{background:var(--rp);color:#180d00;box-shadow:0 6px 22px -8px var(--rp-glow);font-weight:700}
.rp-btn-amber:hover{background:var(--rp2)}
.rp-btn-ghost{border-color:var(--line2);color:var(--mut2);background:transparent}
.rp-btn-ghost:hover{border-color:var(--rp);color:var(--rp2);background:var(--rp-weich)}
.rp-btn[disabled]{opacity:.42;cursor:not-allowed;box-shadow:none}
.rp-btn[disabled]:hover{background:var(--rp);color:#180d00}
.rp-btn-ghost[disabled]:hover{background:transparent;border-color:var(--line2);color:var(--mut2)}
.rp-btn-voll{width:100%;margin-bottom:9px}
.rp-btnzeile{display:flex;gap:12px;flex-wrap:wrap;margin-top:18px}

/* ---------------------------------------------------------- DEMO-Kennzeichen */
.rp-demo{display:inline-block;font-family:'Saira',sans-serif;font-weight:800;font-size:9.5px;
  letter-spacing:.16em;padding:3px 7px;border-radius:4px;background:rgba(245,165,36,.16);
  color:var(--rp2);border:1px solid var(--rp-rand);vertical-align:middle;white-space:nowrap}
.rp-demobanner{margin:30px 0 0;padding:15px 20px;border:1px solid var(--rp-rand);
  border-left-width:4px;border-radius:0 10px 10px 0;background:var(--rp-weich);
  color:var(--mut2);font-size:14px;line-height:1.65}
.rp-demobanner strong{color:var(--txt)}
.rp-demobanner em{color:var(--rp2);font-style:normal;font-weight:600}

/* ------------------------------------------------------------- Brotkrume */
.rp-krume{padding:26px 0 0;font-family:'Saira',sans-serif;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut)}
.rp-krume a{color:var(--mut2)}
.rp-krume a:hover{color:var(--rp2)}
.rp-krume span{opacity:.5;margin:0 5px}
.rp-krume b{color:var(--txt);font-weight:600}

/* --------------------------------------------------------------- Seitenkopf */
.rp-kopf{padding:30px 0 8px;max-width:80ch}
.rp-kopf h1{font-family:'Saira',sans-serif;font-weight:800;font-size:40px;line-height:1.06;
  letter-spacing:.01em;margin:10px 0 0}
.rp-kopf-rolle,.rp-kopf-citizen{display:flex;gap:22px;align-items:flex-start;max-width:none}
.rp-kopf-ic{width:62px;height:62px;flex:none;border-radius:14px;display:grid;place-items:center;
  background:var(--rp-weich);border:1px solid var(--rp-rand);color:var(--rp2)}
.rp-kopf-ic svg{width:32px;height:32px}
.rp-avatar{width:62px;height:62px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#27416a,#16263f);border:1px solid var(--line2);
  font-family:'Saira',sans-serif;font-weight:800;font-size:26px;color:var(--mut2)}
.rp-kurz-gross{color:var(--accent2);font-size:17px;margin:10px 0 0;font-family:'Saira',sans-serif;font-weight:600}

/* ------------------------------------------------------------ Rollenkacheln */
.rp-rollen-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:14px}
.rp-rollen-klein{grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.rp-rolle{display:flex;flex-direction:column;gap:9px;background:var(--card);
  border:1px solid var(--line);border-radius:12px;padding:18px;transition:.16s;position:relative}
.rp-rolle:hover{border-color:var(--rp-rand);background:var(--card2);transform:translateY(-2px);
  box-shadow:0 12px 30px -18px var(--rp-glow)}
.rp-rolle .ic{width:34px;height:34px;color:var(--accent);opacity:.9}
.rp-rolle:hover .ic{color:var(--rp2)}
.rp-rolle .ic svg{width:34px;height:34px}
.rp-rolle .nm{font-family:'Saira',sans-serif;font-weight:700;font-size:16px;line-height:1.2;color:var(--txt)}
.rp-rolle .kz{font-size:13px;color:var(--mut);line-height:1.5}
.rp-rolle .mehr{margin-top:auto;padding-top:10px;font-family:'Saira',sans-serif;font-weight:600;
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);
  display:flex;align-items:center;gap:7px}
.rp-rolle:hover .mehr{color:var(--rp2)}
.rp-rolle .mehr svg{width:13px;height:13px}

/* -------------------------------------------------------------------- Karten */
.rp-grid{display:grid;gap:16px}
.rp-grid-2{grid-template-columns:repeat(2,1fr)}
.rp-grid-3{grid-template-columns:repeat(3,1fr)}
.rp-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;
  display:flex;flex-direction:column;gap:12px}
.rp-card.ist-stream{border-color:var(--rp-rand)}
.rp-card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.rp-card-top h3{font-family:'Saira',sans-serif;font-weight:700;font-size:18px;margin:0;line-height:1.25}
.rp-card-top h3 a:hover{color:var(--rp2)}
.rp-kurz{color:var(--mut2);font-size:13.5px;line-height:1.6;margin:0}
.rp-ic-kurz{color:var(--mut);font-size:13px;line-height:1.6;margin:0;
  border-left:2px solid var(--line2);padding-left:12px}
.rp-card .rp-btn{margin-top:auto}

.rp-termin{display:flex;align-items:baseline;gap:12px;font-family:'Saira',sans-serif}
.rp-termin .tag{font-weight:700;font-size:15px;color:var(--txt)}
.rp-termin .uhr{font-weight:700;font-size:15px;color:var(--rp2)}
.rp-termin .dauer{font-size:12px;color:var(--mut)}

/* ----------------------------------------------------------------- Merkposten */
.rp-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rp-chips-gross{margin-top:14px}
.rp-chip{display:inline-block;font-family:'Saira',sans-serif;font-weight:600;font-size:11px;
  letter-spacing:.06em;padding:4px 9px;border-radius:5px;background:rgba(120,150,190,.10);
  border:1px solid var(--line);color:var(--mut2);white-space:nowrap}
a.rp-chip:hover{border-color:var(--accent);color:var(--accent2)}
.rp-chip.ok{background:rgba(57,217,138,.12);border-color:rgba(57,217,138,.3);color:var(--green)}
.rp-chip.warn{background:rgba(242,78,94,.12);border-color:rgba(242,78,94,.3);color:var(--red)}
.rp-chip.stream{background:var(--rp-weich);border-color:var(--rp-rand);color:var(--rp2)}
.rp-chip-rolle{background:rgba(61,155,255,.10);border-color:rgba(61,155,255,.24);color:var(--accent2)}
.rp-chip-such{background:var(--rp-weich);border-color:var(--rp-rand);color:var(--rp2)}
.rp-chip-twitch{background:rgba(145,70,255,.14);border-color:rgba(145,70,255,.34);color:#c4a2ff}
.rp-chip-yt{background:rgba(255,60,60,.12);border-color:rgba(255,60,60,.3);color:#ff9a9a}

/* -------------------------------------------------------------- Belegung */
.rp-belegung .bar{height:6px;border-radius:3px;background:rgba(120,150,190,.14);overflow:hidden}
.rp-belegung .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),var(--rp));border-radius:3px}
.rp-belegung .txt{font-size:12px;color:var(--mut);margin-top:7px;display:flex;gap:12px;flex-wrap:wrap}
.rp-belegung .txt b{color:var(--txt);font-family:'Saira',sans-serif}
.rp-belegung .frei{color:var(--green)}
.rp-belegung .creator-frei{color:var(--rp2)}

.rp-gesucht{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.rp-gesucht .lbl{font-family:'Saira',sans-serif;font-weight:600;font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);margin-right:4px}

/* ------------------------------------------------------------ Schluessel/Wert */
.rp-kv{display:flex;gap:14px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);
  font-size:13.5px;flex-wrap:wrap}
.rp-kv:last-child{border-bottom:none}
.rp-kv .k{color:var(--mut);flex:0 0 34%;max-width:180px;font-size:12.5px;
  font-family:'Saira',sans-serif;letter-spacing:.06em}
.rp-kv .v{color:var(--txt);flex:1;min-width:0;display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ------------------------------------------------------------------ Citizen */
.rp-handle{font-size:13px;color:var(--mut);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rp-handle b{color:var(--txt);font-family:'Saira',sans-serif}
.rp-verif{font-family:'Saira',sans-serif;font-weight:700;font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;padding:3px 7px;border-radius:4px;white-space:nowrap}
.rp-verif.ja{background:rgba(57,217,138,.14);color:var(--green);border:1px solid rgba(57,217,138,.32)}
.rp-verif.nein{background:rgba(126,138,160,.12);color:var(--mut);border:1px solid var(--line2);cursor:help}

/* ------------------------------------------------------------------- Gesuch */
.rp-von{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--txt);flex-wrap:wrap}
.rp-von .art{font-family:'Saira',sans-serif;font-weight:800;font-size:9.5px;letter-spacing:.14em;
  padding:3px 7px;border-radius:4px}
.rp-von .art.suche{background:rgba(245,165,36,.16);color:var(--rp2);border:1px solid var(--rp-rand)}
.rp-von .art.biete{background:rgba(57,217,138,.14);color:var(--green);border:1px solid rgba(57,217,138,.3)}
.rp-von .typ{font-size:11px;color:var(--mut);text-transform:uppercase;letter-spacing:.1em}

/* ------------------------------------------------------ Zweispaltiges Layout */
.rp-spalten{display:grid;grid-template-columns:1fr 340px;gap:26px;margin-top:34px;align-items:start}
.rp-haupt{min-width:0;display:flex;flex-direction:column;gap:16px}
.rp-seite{display:flex;flex-direction:column;gap:16px;position:sticky;top:64px}
.rp-box{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px}
.rp-box h3{font-family:'Saira',sans-serif;font-weight:700;font-size:13px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut2);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.rp-box p{font-size:13px;line-height:1.6;margin:0 0 8px}
.rp-box-verse{border-color:var(--rp-rand);background:linear-gradient(180deg,var(--rp-weich),transparent)}
.rp-minliste{list-style:none;padding:0;margin:0}
.rp-minliste li{padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px;
  display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.rp-minliste li:last-child{border-bottom:none}
.rp-minliste a{color:var(--txt);font-family:'Saira',sans-serif;font-weight:600}
.rp-minliste a:hover{color:var(--rp2)}
.rp-minliste .mut,.rp-minliste .such{font-size:11.5px;color:var(--mut)}
.rp-minliste .such{color:var(--rp2)}

/* --------------------------------------------------------------- Textbloecke */
.rp-block{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:24px 26px}
.rp-block h2{font-family:'Saira',sans-serif;font-weight:700;font-size:19px;margin:0 0 12px;color:var(--txt)}
.rp-block h3{font-family:'Saira',sans-serif;font-weight:700;font-size:15px;margin:20px 0 7px;color:var(--txt)}
.rp-block p{color:var(--mut2);font-size:14.5px;line-height:1.7;margin:0 0 12px}
.rp-block a{color:var(--accent2);text-decoration:underline;text-underline-offset:2px}
.rp-block a.rp-btn{text-decoration:none;color:inherit}
.rp-block-amber{border-color:var(--rp-rand);background:linear-gradient(180deg,var(--rp-weich),var(--card) 60%)}
.rp-blockkopf{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.rp-blockkopf h2{margin:0}

.rp-liste{list-style:none;padding:0;margin:6px 0 0}
.rp-liste li{position:relative;padding:7px 0 7px 26px;color:var(--mut2);font-size:14px;line-height:1.6}
.rp-liste li::before{content:"";position:absolute;left:4px;top:15px;width:7px;height:7px;
  border-radius:2px;background:var(--accent);opacity:.7;transform:rotate(45deg)}
.rp-liste-nein li::before{background:var(--red);opacity:.6}
.rp-zweispalt{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.rp-zweispalt h3:first-child{margin-top:0}

/* ------------------------------------------------------------------- IC/OOC */
.rp-marke{font-family:'Saira',sans-serif;font-weight:800;font-size:10px;letter-spacing:.18em;
  padding:4px 9px;border-radius:5px;flex:none}
.rp-marke.ooc{background:rgba(127,176,255,.14);color:var(--ooc);border:1px solid rgba(127,176,255,.32)}
.rp-marke.ic{background:rgba(126,200,169,.14);color:var(--ic);border:1px solid rgba(126,200,169,.32)}
.rp-icooc,.rp-gegenueber{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:34px}
.rp-ooc{border-top:2px solid rgba(127,176,255,.4)}
.rp-ic{border-top:2px solid rgba(126,200,169,.4)}
.rp-missionstitel{font-family:'Saira',sans-serif;font-size:18px;color:var(--ic);margin:16px 0 8px}
.rp-briefing{color:var(--mut2);font-size:14.5px;line-height:1.75;font-style:italic;
  border-left:2px solid rgba(126,200,169,.4);padding-left:14px}
.rp-bsp{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.rp-bsp-k{background:var(--card2);border:1px solid var(--line);border-radius:10px;padding:16px}
.rp-bsp-k p{font-size:13.5px;line-height:1.65;margin:10px 0 0;color:var(--mut2)}

/* ------------------------------------------------------------------ Hinweise */
.rp-hinweis{border-left:3px solid var(--accent);background:rgba(61,155,255,.07);
  padding:14px 18px;border-radius:0 8px 8px 0;color:var(--mut2);margin:16px 0;
  font-size:14px;line-height:1.65}
.rp-hinweis b{color:var(--txt)}
.rp-hinweis-amber{border-left-color:var(--rp);background:var(--rp-weich)}
.rp-hinweis-verif{margin-top:22px}

/* ---------------------------------------------------------------- Leerzustand */
.rp-leer{background:var(--card);border:1px dashed var(--line2);border-radius:12px;
  padding:30px;color:var(--mut2);font-size:14.5px;line-height:1.7;text-align:center}
.rp-leer p{margin:0 0 10px;max-width:70ch;margin-left:auto;margin-right:auto}
.rp-leer b{color:var(--txt)}
.rp-leer a{color:var(--accent2)}
/* Knoepfe im Leerzustand behalten ihre eigene Farbe - ".rp-leer a" ist
   spezifischer als ".rp-btn-amber" und faerbte den Text sonst blau auf Amber. */
.rp-leer a.rp-btn-amber{color:#180d00}
.rp-leer a.rp-btn-ghost{color:var(--mut2)}
.rp-leer a.rp-btn-ghost:hover{color:var(--rp2)}
.rp-leer .rp-btnzeile{justify-content:center}
.rp-leer-gross{padding:56px 30px}
.rp-leer-gross h2{font-family:'Saira',sans-serif;font-size:22px;color:var(--txt);margin:0 0 14px}
.rp-leer-ic{width:56px;height:56px;margin:0 auto 18px;color:var(--mut);opacity:.5}
.rp-leer-ic svg{width:56px;height:56px}

/* ------------------------------------------------------------------ Live/Stream */
.rp-livedot{width:9px;height:9px;border-radius:50%;background:var(--red);flex:none;
  box-shadow:0 0 9px var(--red);animation:omcpulse 1.4s infinite;display:inline-block}
.rp-sect-amber .rp-sect-h{border-bottom-color:var(--rp-rand)}
.rp-sect-vorschau{opacity:.94}
.rp-card-live.vorschau{border-style:dashed}
.rp-pov{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.rp-povname{font-family:'Saira',sans-serif;font-weight:700;font-size:14px;color:var(--rp2)}
.rp-streamblock .rp-sect-h{align-items:center}
.rp-consent{background:var(--card);border:1px solid var(--rp-rand);border-radius:12px;padding:22px 24px}
.rp-consent p{color:var(--mut2);font-size:14px;line-height:1.7;margin:0 0 10px}
.rp-consent p.gross{font-size:16px;color:var(--txt)}
.rp-consentliste{list-style:none;padding:0;margin:14px 0}
.rp-consentliste li{padding:8px 0;border-bottom:1px solid var(--line);font-size:14px;color:var(--mut2);
  display:flex;align-items:center;gap:11px}
.rp-consentliste li:last-child{border-bottom:none}
.rp-consentliste input{accent-color:var(--rp);width:16px;height:16px}
.rp-streammerkmale{display:flex;gap:7px;flex-wrap:wrap;margin:18px 0}
.rp-povs{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px}
.rp-povkarte{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;
  display:flex;flex-direction:column;gap:9px}
.rp-povkarte .nm{font-family:'Saira',sans-serif;font-weight:700;font-size:16px}

/* ------------------------------------------------------------------- Filter */
.rp-filter{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:20px 22px;margin-top:26px}
.rp-filter-zeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:14px}
.rp-feld{display:flex;flex-direction:column;gap:7px}
.rp-feld>span{font-family:'Saira',sans-serif;font-weight:600;font-size:11px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--mut)}
.rp-feld select{background:var(--card2);border:1px solid var(--line2);border-radius:8px;
  color:var(--txt);padding:11px 12px;font-family:'Inter',system-ui,sans-serif;font-size:14px;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237e8aa0' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;background-size:15px;padding-right:36px}
.rp-feld select:focus{outline:none;border-color:var(--rp);box-shadow:0 0 0 3px var(--rp-weich)}
.rp-filter-fuss{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:15px}
.rp-treffer{font-family:'Saira',sans-serif;font-size:13px;color:var(--mut2);letter-spacing:.04em}
.rp-treffer b{color:var(--rp2)}

/* -------------------------------------------------------- Schritte / Regeln */
.rp-schritte,.rp-regeln{list-style:none;counter-reset:s;padding:0;margin:0;
  display:flex;flex-direction:column;gap:14px}
.rp-schritte li,.rp-regeln li{position:relative;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:20px 24px 20px 74px}
.rp-schritte li::before,.rp-regeln li::before{counter-increment:s;content:counter(s);
  position:absolute;left:22px;top:20px;width:34px;height:34px;border-radius:50%;
  background:var(--rp-weich);border:1px solid var(--rp-rand);color:var(--rp2);
  font-family:'Saira',sans-serif;font-weight:700;display:grid;place-items:center;font-size:15px}
.rp-schritte h3,.rp-regeln h3{font-family:'Saira',sans-serif;font-weight:700;font-size:16.5px;
  margin:0 0 7px;color:var(--txt)}
.rp-schritte p,.rp-regeln p{color:var(--mut2);font-size:14px;line-height:1.65;margin:0 0 12px}
.rp-regeln p{margin-bottom:0}
.rp-schritte a:not(.rp-btn),.rp-regeln a{color:var(--accent2);text-decoration:underline}

/* ------------------------------------------------------------ Suchpillen */
.rp-suchleiste{display:flex;gap:11px;flex-wrap:wrap}
.rp-suchpille{display:flex;flex-direction:column;gap:3px;background:var(--card);
  border:1px solid var(--rp-rand);border-radius:10px;padding:13px 18px;transition:.15s}
.rp-suchpille:hover{background:var(--rp-weich);transform:translateY(-1px)}
.rp-suchpille b{font-family:'Saira',sans-serif;font-weight:700;font-size:14.5px;color:var(--rp2)}
.rp-suchpille span{font-size:12px;color:var(--mut)}

/* ------------------------------------------------------------ Abschluss-Block */
.rp-neu{margin-top:52px}
.rp-neu-in{background:linear-gradient(135deg,rgba(16,24,38,.9),rgba(10,15,24,.9));
  border:1px solid var(--line2);border-radius:14px;padding:34px 36px}
.rp-neu-in h2{font-family:'Saira',sans-serif;font-weight:700;font-size:24px;margin:0 0 12px}
.rp-neu-in p{color:var(--mut2);font-size:15px;line-height:1.7;margin:0;max-width:82ch}
.rp-neu-in a:not(.rp-btn){color:var(--accent2);text-decoration:underline}

/* -------------------------------------------------------------- Living Verse */
.rp-verse-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:13px}
.rp-verse-k{background:var(--card2);border:1px dashed var(--line2);border-radius:11px;padding:16px}
.rp-verse-k .nm{font-family:'Saira',sans-serif;font-weight:700;font-size:15px;color:var(--mut2);
  display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.rp-verse-k .tx{font-size:12.5px;color:var(--mut);line-height:1.55;margin-top:7px}
.rp-bald{font-family:'Saira',sans-serif;font-weight:600;font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut);border:1px solid var(--line2);border-radius:4px;
  padding:2px 6px;white-space:nowrap}

/* ================================= Schmal ================================= */
@media(max-width:1100px){
  .rp-wrap,.rp-subnav-in,.rp-meldeband{padding-left:26px;padding-right:26px}
  .rp-hero{padding-left:26px;padding-right:26px}
  .rp-hero h1{font-size:48px}
  .rp-spalten{grid-template-columns:1fr}
  .rp-seite{position:static}
  .rp-grid-3{grid-template-columns:repeat(2,1fr)}
  .rp-bsp{grid-template-columns:1fr}
}
@media(max-width:820px){
  .rp-icooc,.rp-gegenueber,.rp-zweispalt{grid-template-columns:1fr}
}
@media(max-width:680px){
  .rp-wrap,.rp-subnav-in,.rp-meldeband{padding-left:18px;padding-right:18px}
  .rp-hero{padding:52px 18px 40px}
  .rp-hero h1{font-size:35px}
  .rp-hero-sub{font-size:17px}
  .rp-kopf h1{font-size:29px}
  .rp-grid-2,.rp-grid-3{grid-template-columns:1fr}
  .rp-rollen-grid{grid-template-columns:1fr}
  .rp-zahlen{gap:22px}
  .rp-zahl .w{font-size:25px}
  .rp-kopf-rolle,.rp-kopf-citizen{gap:16px}
  .rp-kopf-ic,.rp-avatar{width:48px;height:48px}
  .rp-kopf-ic svg{width:25px;height:25px}
  .rp-block{padding:20px}
  .rp-neu-in{padding:24px 20px}
  .rp-schritte li,.rp-regeln li{padding:18px 18px 18px 62px}
  .rp-schritte li::before,.rp-regeln li::before{left:16px;top:17px;width:30px;height:30px;font-size:14px}
  .rp-kv .k{flex:0 0 100%;max-width:none}
  .rp-btnzeile .rp-btn{flex:1 1 auto}
}

/* .rp-card ist display:flex - das ueberschreibt das hidden-Attribut. Ohne diese
   Zeile blendet der Finder nichts aus. (Klassischer Stolperstein.) */
.rp .rp-card[hidden],.rp [hidden]{display:none !important}


/* ===========================================================================
   Runde 2 (03.09.2026) - Startseite, Live-Leerzustand, Event-Karte, Finder
   =========================================================================== */

/* --------------------------------------------------------- Hero-Feinschliff */
.rp-btn-gross{padding:15px 26px;font-size:13.5px}
.rp-hero-sub{font-size:24px;color:var(--rp2);text-shadow:0 2px 18px rgba(0,0,0,.6)}
.rp-hero-lead{max-width:660px;font-size:16px}
.rp-hero-lead b{color:var(--txt);font-weight:600}
.rp-zahlen{gap:0;margin-top:42px;border-top:1px solid var(--line);padding-top:22px}
.rp-zahl{padding-right:34px;margin-right:34px;border-right:1px solid var(--line)}
.rp-zahl:last-child{border-right:none;margin-right:0;padding-right:0}

/* ------------------------------------------------- "Gerade ist es ruhig" --- */
.rp-ruhig{display:grid;grid-template-columns:1.5fr 1fr;gap:0;
  border:1px solid var(--rp-rand);border-radius:14px;overflow:hidden;
  background:linear-gradient(135deg,rgba(245,165,36,.09),rgba(12,18,28,.9) 55%)}
.rp-ruhig-text{padding:32px 34px}
.rp-ruhig-gross .rp-ruhig-text{padding:44px 40px}
.rp-ruhig-kicker{font-family:'Saira',sans-serif;font-weight:600;font-size:11.5px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--rp2)}
.rp-ruhig h3{font-family:'Saira',sans-serif;font-weight:700;font-size:26px;line-height:1.2;
  margin:12px 0 14px;color:var(--txt)}
.rp-ruhig p{color:var(--mut2);font-size:14.5px;line-height:1.7;margin:0 0 12px;max-width:62ch}
.rp-ruhig p.klein{font-size:13.5px;color:var(--mut)}
.rp-ruhig-next{padding:32px 30px;border-left:1px solid var(--line);
  background:rgba(7,11,18,.5);display:flex;flex-direction:column;gap:9px}
.rp-ruhig-next .lbl{font-family:'Saira',sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut);
  display:flex;align-items:center;gap:8px;margin-top:6px}
.rp-ruhig-next .lbl:first-child{margin-top:0}
.rp-ruhig-next .tt{font-family:'Saira',sans-serif;font-weight:700;font-size:18px;line-height:1.25}
.rp-ruhig-next .tt a:hover{color:var(--rp2)}
.rp-ruhig-next .dt{font-family:'Saira',sans-serif;font-size:14px;color:var(--rp2)}
.rp-ruhig-next .mk{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.rp-ruhig-next .mk span{font-family:'Saira',sans-serif;font-size:10.5px;letter-spacing:.08em;
  padding:4px 8px;border-radius:5px;background:var(--rp-weich);border:1px solid var(--rp-rand);
  color:var(--rp2);white-space:nowrap}
.rp-ruhig-next .cr{font-size:12.5px;color:var(--mut);margin-top:6px}
.rp-ruhig-next .cr b{color:var(--txt)}
.rp-ruhig-zahlen{display:flex;gap:26px;margin:4px 0 8px}
.rp-ruhig-zahlen div{display:flex;flex-direction:column;gap:3px}
.rp-ruhig-zahlen b{font-family:'Saira',sans-serif;font-size:26px;line-height:1;color:var(--rp2)}
.rp-ruhig-zahlen span{font-size:11px;color:var(--mut);line-height:1.35;max-width:14ch}

/* ------------------------------------------------------------ Event-Karte --- */
.rp-ev-kopf{display:flex;gap:16px;align-items:flex-start}
.rp-ev-termin{flex:none;width:62px;border-radius:10px;overflow:hidden;text-align:center;
  border:1px solid var(--line2);background:var(--card2)}
.rp-ev-termin .t{display:block;background:rgba(61,155,255,.14);color:var(--accent2);
  font-family:'Saira',sans-serif;font-weight:800;font-size:13px;letter-spacing:.1em;padding:5px 0}
.rp-ev-termin .u{display:block;font-family:'Saira',sans-serif;font-weight:700;font-size:17px;
  color:var(--txt);padding:8px 0}
.rp-card-event.ist-stream .rp-ev-termin .t{background:var(--rp-weich);color:var(--rp2)}
.rp-ev-titel{flex:1;min-width:0}
.rp-ev-titel h3{font-family:'Saira',sans-serif;font-weight:700;font-size:19px;margin:0;line-height:1.2}
.rp-ev-titel h3 a:hover{color:var(--rp2)}
.rp-ev-unter{font-size:12.5px;color:var(--mut);margin-top:5px}

.rp-ev-streamband{display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  padding:9px 12px;border-radius:8px;background:var(--rp-weich);border:1px solid var(--rp-rand)}
.rp-ev-streamband b{font-family:'Saira',sans-serif;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rp2)}
.rp-ev-streamband span{font-family:'Saira',sans-serif;font-size:10.5px;letter-spacing:.06em;
  color:var(--mut2);padding:2px 7px;border-radius:4px;background:rgba(255,255,255,.04)}

.rp-ev-zahlen{display:flex;gap:22px;flex-wrap:wrap;align-items:flex-start;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:12px 0}
.rp-ev-zahlen .z{display:flex;flex-direction:column;gap:3px;min-width:74px}
.rp-ev-zahlen .w{font-family:'Saira',sans-serif;font-weight:700;font-size:21px;line-height:1;color:var(--txt)}
.rp-ev-zahlen .w i{font-style:normal;font-size:13px;color:var(--mut);font-weight:600}
.rp-ev-zahlen .w2{font-family:'Saira',sans-serif;font-weight:700;font-size:15px;line-height:1.3;color:var(--txt)}
.rp-ev-zahlen .w3{font-family:'Saira',sans-serif;font-weight:700;font-size:21px;line-height:1;color:var(--green)}
.rp-ev-zahlen .l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.rp-ev-zahlen .l .pvp{color:var(--red);font-weight:700}
.rp-ev-zahlen .bar{display:block;height:4px;width:100%;border-radius:2px;
  background:rgba(120,150,190,.16);overflow:hidden;margin-top:3px}
.rp-ev-zahlen .bar span{display:block;height:100%;background:var(--accent);border-radius:2px}
.rp-ev-zahlen .creator .w{color:var(--rp2)}
.rp-ev-zahlen .creator .bar span{background:var(--rp)}
.rp-ev-zahlen .text{flex:1;min-width:130px}
.rp-ic-kurz{display:flex;gap:11px;align-items:flex-start;border-left:none;padding-left:0}
.rp-ic-kurz .rp-marke{margin-top:2px}

/* ---------------------------------------------------------- Creator-Band --- */
.rp-creator-band{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--rp-rand);
  border-radius:12px;background:var(--rp-weich);overflow:hidden;margin-bottom:20px}
.rp-cb-zahl{flex:1;min-width:170px;padding:18px 22px;border-right:1px solid var(--rp-rand);
  display:flex;flex-direction:column;gap:6px}
.rp-cb-zahl:last-child{border-right:none}
.rp-cb-zahl .w{font-family:'Saira',sans-serif;font-weight:700;font-size:30px;line-height:1;color:var(--rp2)}
.rp-cb-zahl .l{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);
  display:flex;align-items:center;gap:7px;flex-wrap:wrap;line-height:1.4}

.rp-cc{margin-bottom:20px}
.rp-cc-kopf{font-family:'Saira',sans-serif;font-weight:700;font-size:13px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--rp2);margin-bottom:12px}
.rp-cc-leer{background:var(--card);border:1px dashed var(--rp-rand);border-radius:12px;
  padding:22px;color:var(--mut2);font-size:13.5px;line-height:1.65;
  display:flex;flex-direction:column;justify-content:center;gap:6px}
.rp-cc-leer b{color:var(--txt)}
.rp-cc-leer .rp-btn{margin-top:10px;align-self:flex-start}

.rp-mehrzeile{display:flex;justify-content:center;margin-top:18px}

/* ---------------------------------------------------------------- Finder --- */
.rp-frage-zeile{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:16px}
.rp-frage{display:flex;flex-direction:column;gap:4px}
.rp-frage .nr{font-family:'Saira',sans-serif;font-weight:800;font-size:20px;letter-spacing:.04em;
  color:var(--rp2);line-height:1.1}
.rp-frage .fr{font-size:13px;color:var(--mut);margin-bottom:6px}
.rp-frage select{background:var(--card2);border:1px solid var(--line2);border-radius:9px;
  color:var(--txt);padding:14px 14px;font-family:'Inter',system-ui,sans-serif;font-size:15px;
  appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc45e' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px;padding-right:40px}
.rp-frage select:focus{outline:none;border-color:var(--rp);box-shadow:0 0 0 3px var(--rp-weich)}

.rp-mehrfilter{margin-top:18px;border-top:1px solid var(--line);padding-top:6px}
.rp-mehrfilter>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:11px 0;font-family:'Saira',sans-serif;font-weight:600;font-size:12px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--mut2)}
.rp-mehrfilter>summary::-webkit-details-marker{display:none}
.rp-mehrfilter>summary:hover{color:var(--rp2)}
.rp-mehrfilter>summary .hint{flex:1;font-family:'Inter',system-ui,sans-serif;font-weight:400;
  font-size:12px;letter-spacing:0;text-transform:none;color:var(--mut);opacity:.8}
.rp-mehrfilter>summary svg{width:15px;height:15px;flex:none;transition:transform .16s}
.rp-mehrfilter[open]>summary svg{transform:rotate(180deg)}
.rp-mehrfilter .rp-filter-zeile{margin:6px 0 12px}
.rp-filter-fuss{justify-content:flex-start;gap:18px}

/* ============================ Schmal, Runde 2 ============================ */
@media(max-width:1100px){
  .rp-ruhig{grid-template-columns:1fr}
  .rp-ruhig-next{border-left:none;border-top:1px solid var(--line)}
  .rp-frage-zeile{grid-template-columns:1fr 1fr}
}
@media(max-width:820px){
  .rp-subnav-breit{display:none}
  .rp-subnav-schmal{display:block}
  .rp-frage-zeile{grid-template-columns:1fr}
}
@media(max-width:680px){
  .rp-hero h1{font-size:35px}
  .rp-hero-sub{font-size:19px}
  .rp-zahlen{gap:18px 0}
  .rp-zahl{padding-right:18px;margin-right:18px}
  .rp-zahl:nth-child(3){border-right:none}
  .rp-ruhig-text,.rp-ruhig-gross .rp-ruhig-text{padding:24px 20px}
  .rp-ruhig-next{padding:22px 20px}
  .rp-ruhig h3{font-size:21px}
  .rp-ev-zahlen{gap:16px}
  .rp-cb-zahl{border-right:none;border-bottom:1px solid var(--rp-rand);min-width:100%}
  .rp-cb-zahl:last-child{border-bottom:none}
}

/* Zahlenreihe auf dem Handy: als Raster statt als Flex-Reihe, sonst entstehen
   durch die Trennstriche unregelmaessige Zeilen (2 / 1 / 2). */
@media(max-width:680px){
  .rp-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:16px 0;padding-top:18px}
  .rp-zahl{padding-right:14px;margin-right:0;border-right:1px solid var(--line)}
  .rp-zahl:nth-child(2n){border-right:none;padding-right:0;padding-left:14px}
  .rp-zahl:last-child{border-right:none}
  .rp-zahl .w{font-size:24px}
}

/* ===========================================================================
   B2 - Formulare, Tabellen, Konto, Moderation
   ===========================================================================
   Ab hier steht alles, was erst mit der echten Plattform dazugekommen ist:
   Eingabefelder, Listen mit Handlungen, die Kontoleiste und die
   Moderationsansicht. Bewusst nuechtern gehalten - Amber bleibt der Hauptaktion
   vorbehalten, alles andere ist Struktur.
   =========================================================================== */

/* ------------------------------------------------------------- Formulare ---
   Ein Feld ist immer ein <label> mit drei Teilen: Beschriftung, Eingabe und
   optional ein kleiner Erklaersatz darunter. Dadurch trifft jeder Klick auf die
   Beschriftung auch das Feld, ohne dass irgendwo eine id vergeben werden muss. */
.rp-formular{display:flex;flex-direction:column;gap:16px}
.rp-formular>.rp-btnzeile{margin-top:4px}

.rp-feld{display:flex;flex-direction:column;gap:6px;min-width:0}
.rp-feld>span{font-family:'Saira',sans-serif;font-weight:600;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mut2)}
.rp-feld>small{font-size:12.5px;line-height:1.55;color:var(--mut)}
.rp-feld>small b{color:var(--mut2)}
.rp-feld code{font-size:12px;background:var(--card2);border:1px solid var(--line);border-radius:4px;
  padding:1px 5px;color:var(--mut2)}

.rp-feld input[type=text],.rp-feld input[type=url],.rp-feld input[type=number],
.rp-feld input[type=datetime-local],.rp-feld select,.rp-feld textarea{
  background:var(--card2);border:1px solid var(--line2);border-radius:9px;color:var(--txt);
  padding:12px 13px;font-family:'Inter',system-ui,sans-serif;font-size:15px;width:100%;
  box-sizing:border-box}
.rp-feld textarea{resize:vertical;line-height:1.6;min-height:76px}
.rp-feld select{appearance:none;cursor:pointer;padding-right:38px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffc45e' stroke-width='2.4'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center;background-size:16px}
.rp-feld input:focus,.rp-feld select:focus,.rp-feld textarea:focus{
  outline:none;border-color:var(--rp);box-shadow:0 0 0 3px var(--rp-weich)}
.rp-feld input::placeholder,.rp-feld textarea::placeholder{color:var(--mut);opacity:.62}
.rp-feld input:invalid:not(:placeholder-shown){border-color:rgba(242,78,94,.5)}

/* Mehrere Felder nebeneinander. Kein festes Raster - die Felder legen selbst
   um, sobald weniger als 210px je Feld bleiben. */
.rp-feldgruppe{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px}

/* Ankreuzfeld: die ganze Zeile ist anklickbar, der Text bleibt lesbar gross. */
.rp-check{display:flex;align-items:flex-start;gap:11px;cursor:pointer;padding:5px 0;
  font-size:14.5px;line-height:1.55;color:var(--mut2)}
.rp-check input[type=checkbox]{accent-color:var(--rp);width:17px;height:17px;flex:none;margin-top:1px;
  cursor:pointer}
.rp-check:hover{color:var(--txt)}

.rp-fieldset{border:1px solid var(--line);border-radius:11px;padding:16px 18px 18px;margin:4px 0 0;
  display:flex;flex-direction:column;gap:10px;min-width:0}
.rp-fieldset>legend{font-family:'Saira',sans-serif;font-weight:700;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--mut2);padding:0 8px;display:flex;align-items:center;gap:9px}
.rp-fieldset>p{margin:2px 0 0;font-size:13px;line-height:1.6}

/* Kleines, ruhiges Formular am Seitenende (Melden). Es soll da sein, aber
   nicht mit der Hauptaktion der Seite um Aufmerksamkeit ringen. */
.rp-melden{gap:12px;max-width:640px}
.rp-melden .rp-feld>span{font-size:11px}

/* -------------------------------------------------------------- Rollenwahl --
   Dieselben Kacheln wie auf der Rollenseite, nur als Ankreuzfeld. Der Haken
   selbst ist ausgeblendet - gewaehlt sieht man am Rahmen. */
.rp-rollenwahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.rp-rollenkasten{position:relative;display:flex;flex-direction:column;gap:6px;cursor:pointer;
  background:var(--card2);border:1px solid var(--line2);border-radius:11px;padding:15px 16px;
  transition:border-color .14s,background .14s}
.rp-rollenkasten input{position:absolute;opacity:0;width:0;height:0}
.rp-rollenkasten .ic{width:22px;height:22px;color:var(--mut2)}
.rp-rollenkasten .ic svg{width:22px;height:22px}
.rp-rollenkasten .nm{font-family:'Saira',sans-serif;font-weight:700;font-size:15.5px;color:var(--txt)}
.rp-rollenkasten .kz{font-size:12.5px;line-height:1.5;color:var(--mut)}
.rp-rollenkasten:hover{border-color:var(--line2);background:var(--card)}
.rp-rollenkasten:has(input:checked){border-color:var(--rp);background:var(--rp-weich)}
.rp-rollenkasten:has(input:checked) .ic{color:var(--rp2)}
.rp-rollenkasten:has(input:focus-visible){box-shadow:0 0 0 3px var(--rp-weich)}
/* Ohne :has() (aeltere Browser) bleibt die Kachel sichtbar und bedienbar,
   nur die Hervorhebung fehlt - deshalb steht der Haken dort zusaetzlich. */
@supports not selector(:has(*)){
  .rp-rollenkasten input{position:static;opacity:1;width:17px;height:17px;accent-color:var(--rp)}
}

/* --------------------------------------------------------- Rollenbedarf ---
   Viele kleine Zahlenfelder. Nicht schoen, aber ehrlich: es geht um Anzahlen. */
.rp-bedarfsgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:9px}
.rp-bedarf{display:flex;align-items:center;justify-content:space-between;gap:10px;
  background:var(--card2);border:1px solid var(--line);border-radius:9px;padding:8px 10px 8px 13px}
.rp-bedarf>span{font-size:13.5px;color:var(--mut2);min-width:0;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.rp-bedarf input{width:64px;flex:none;background:var(--bg);border:1px solid var(--line2);border-radius:7px;
  color:var(--txt);padding:7px 8px;font-family:'Inter',system-ui,sans-serif;font-size:14px;text-align:center}
.rp-bedarf input:focus{outline:none;border-color:var(--rp)}

/* ---------------------------------------------------------------- Consent --
   Die Punkte stehen untereinander mit Haken links; der Erklaersatz gehoert
   sichtbar zum jeweiligen Punkt, nicht zum Kasten. */
.rp-consentliste li{align-items:flex-start}
.rp-consentliste input{margin-top:3px;flex:none;cursor:pointer}
.rp-consentliste label{display:block;cursor:pointer;min-width:0}
.rp-consentliste label b{color:var(--txt);font-weight:600}
.rp-consentliste .erl{display:block;font-size:12.5px;line-height:1.55;color:var(--mut);margin-top:3px}
.rp-pflicht{display:inline-block;margin-left:8px;font-family:'Saira',sans-serif;font-weight:700;
  font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;padding:2px 7px;border-radius:4px;
  background:var(--rp-weich);border:1px solid var(--rp-rand);color:var(--rp2);vertical-align:2px}

/* --------------------------------------------------------------- Tabellen --
   Listen mit Handlungen. Schmal genug, dass sie nicht wie ein Verwaltungsprogramm
   wirken, aber mit klarer Kopfzeile. */
.rp-tabelle{width:100%;border-collapse:collapse;font-size:14px}
.rp-tabelle th{font-family:'Saira',sans-serif;font-weight:600;font-size:11px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--mut);text-align:left;padding:0 12px 9px 0;
  border-bottom:1px solid var(--line2);white-space:nowrap}
.rp-tabelle td{padding:11px 12px 11px 0;border-bottom:1px solid var(--line);color:var(--mut2);
  vertical-align:middle}
.rp-tabelle tr:last-child td{border-bottom:none}
.rp-tabelle th:last-child,.rp-tabelle td:last-child{padding-right:0;text-align:right;white-space:nowrap}
.rp-tabelle a{color:var(--txt);font-family:'Saira',sans-serif;font-weight:600;text-decoration:none}
.rp-tabelle a:hover{color:var(--rp2)}
.rp-notiz{max-width:260px;white-space:normal}

/* Statuswort in einer Zeile. Die Farbe sagt nur: laeuft / ist vorbei / ist
   abgelehnt - alles andere bleibt grau, damit die Liste ruhig bleibt. */
.rp-status{display:inline-block;font-family:'Saira',sans-serif;font-weight:600;font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 8px;border-radius:5px;
  background:rgba(126,138,160,.12);border:1px solid var(--line2);color:var(--mut)}
.rp-status.aktiv,.rp-status.veroeffentlicht,.rp-status.offen,.rp-status.angemeldet{
  background:rgba(57,217,138,.12);border-color:rgba(57,217,138,.3);color:var(--green)}
.rp-status.abgesagt,.rp-status.abgelehnt,.rp-status.gesperrt{
  background:rgba(242,78,94,.12);border-color:rgba(242,78,94,.3);color:var(--red)}
.rp-status.in_pruefung,.rp-status.wartet{
  background:var(--rp-weich);border-color:var(--rp-rand);color:var(--rp2)}

/* Kleiner Knopf in Tabellen. Ein Wort, kein Rahmenwerk. */
.rp-inline{display:inline}
.rp-inline+.rp-inline{margin-left:6px}
.rp-mini{font-family:'Saira',sans-serif;font-weight:600;font-size:11px;letter-spacing:.09em;
  text-transform:uppercase;background:transparent;border:1px solid var(--line2);border-radius:7px;
  color:var(--mut2);padding:6px 11px;cursor:pointer;transition:border-color .14s,color .14s}
.rp-mini:hover{border-color:var(--rp);color:var(--rp2);background:var(--rp-weich)}

/* ---------------------------------------------------------- Blockueberschrift
   Ueberschrift links, die eine zugehoerige Handlung rechts. */
.rp-blockkopf-zeile{display:flex;align-items:center;justify-content:space-between;gap:14px;
  flex-wrap:wrap;margin-bottom:14px}
.rp-blockkopf-zeile h2{margin:0}

/* ----------------------------------------------------------------- Tabs ---- */
.rp-tabs{display:flex;gap:2px;flex-wrap:wrap;border-bottom:1px solid var(--line);margin:26px 0 18px}
.rp-tabs a{font-family:'Saira',sans-serif;font-weight:600;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--mut);padding:11px 14px;border-bottom:2px solid transparent}
.rp-tabs a:hover{color:var(--txt)}
.rp-tabs a.an{color:var(--rp2);border-bottom-color:var(--rp)}

/* ---------------------------------------------------------- Rueckmeldungen --
   Eine Zeile ueber dem Inhalt, nach dem Speichern. Sie verschwindet beim
   naechsten Seitenaufruf von selbst (einmalige Meldung im Server). */
/* Das Band liegt zwischen Unternavigation und Inhalt und richtet sich an
   derselben Kante aus wie .rp-wrap. */
.rp-meldeband{max-width:1280px;margin:0 auto;padding:0 40px}
.rp-melde{border-radius:10px;padding:13px 16px;font-size:14.5px;line-height:1.6;margin:22px 0 0;
  border:1px solid var(--line2);background:var(--card);color:var(--mut2)}
.rp-melde.ok{border-color:rgba(57,217,138,.34);background:rgba(57,217,138,.09);color:#a7e9c8}
.rp-melde.warn{border-color:var(--rp-rand);background:var(--rp-weich);color:var(--rp2)}
.rp-melde.fehler{border-color:rgba(242,78,94,.36);background:rgba(242,78,94,.09);color:#ffb3ba}

/* ------------------------------------------------------------- Testzugang --
   Muss auf den ersten Blick als Test erkennbar sein - deshalb gestrichelter
   Rand und ein Wort, das man nicht uebersieht. Produktiv gibt es das nicht. */
.rp-testmarke{display:inline-block;font-family:'Saira',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;padding:4px 10px;border-radius:5px;
  background:repeating-linear-gradient(135deg,rgba(242,78,94,.16) 0 8px,rgba(242,78,94,.07) 8px 16px);
  border:1px solid rgba(242,78,94,.42);color:#ffb3ba;margin-bottom:12px}
.rp-testmarke.klein{margin:0;padding:2px 7px;font-size:9px;letter-spacing:.12em}
.rp-block-test{border-style:dashed;border-color:rgba(242,78,94,.34)}

/* ------------------------------------------------------------ Kontoleiste --
   Rechts in der Unternavigation. Ein Punkt, kein zweites Menue. */
.rp-konto-link{font-family:'Saira',sans-serif;font-weight:700;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--rp2);padding:15px 13px;white-space:nowrap;
  border-bottom:2px solid transparent;display:flex;align-items:center;gap:7px}
.rp-konto-link:hover{border-bottom-color:var(--rp-rand)}
.rp-subnav-in .rp-konto-link.rechts{margin-left:auto}
.rp-subnav-in .rp-konto-link.rechts~.rp-konto-link.rechts{margin-left:0}
.rp-subnav-gitter .rp-konto-link{grid-column:1/-1;justify-content:center;padding:13px 12px;
  border:1px solid var(--rp-rand);border-radius:8px;background:var(--rp-weich);margin-top:8px}
.rp-badge{display:inline-block;font-family:'Saira',sans-serif;font-weight:800;font-size:10px;
  letter-spacing:.06em;min-width:18px;text-align:center;padding:2px 6px;border-radius:9px;
  background:var(--red);color:#1a0507}
.rp-badge.test{background:transparent;border:1px solid rgba(242,78,94,.42);color:#ffb3ba;
  letter-spacing:.12em}

/* --------------------------------------------------- "Was wir nicht speichern"
   Dieselbe Miniliste, nur mit einem Strich statt eines Hakens davor. */
.rp-minliste.rp-nein li{color:var(--mut);padding-left:18px;position:relative}
.rp-minliste.rp-nein li::before{content:"";position:absolute;left:0;top:calc(50% - 1px);width:10px;
  height:2px;border-radius:1px;background:var(--line2)}

/* ============================== Schmal, B2 ============================== */
@media(max-width:900px){
  /* Tabellen duerfen scrollen statt die Seite zu sprengen. */
  .rp-tabelle{display:block;overflow-x:auto;white-space:nowrap;-webkit-overflow-scrolling:touch}
  .rp-notiz{white-space:nowrap;max-width:200px;overflow:hidden;text-overflow:ellipsis}
}
@media(max-width:680px){
  .rp-block{padding:20px 18px}
  .rp-feldgruppe{grid-template-columns:1fr}
  .rp-rollenwahl{grid-template-columns:1fr 1fr}
  .rp-bedarfsgitter{grid-template-columns:1fr}
  .rp-blockkopf-zeile{align-items:flex-start}
  .rp-tabs{overflow-x:auto;flex-wrap:nowrap}
  .rp-tabs a{padding:11px 11px;white-space:nowrap}
}
@media(max-width:420px){
  .rp-rollenwahl{grid-template-columns:1fr}
}

/* Der leise Streifen im Datenbank-Modus: gleiche Form, aber ohne Amber -
   "hier ist noch nichts" ist keine Warnung. */
.rp-demobanner.leise{border-color:var(--line2);background:var(--card);color:var(--mut)}

/* ===========================================================================
   B2.1 - Tageskarten
   ===========================================================================
   Drei Karten, von denen man eine waehlt. Die Rueckseite darf schoen sein,
   aber sie darf NICHTS verraten - deshalb steht auf ihr nur eine Zahl und das
   Wort "Verdeckt". Kein Symbol, das auf eine Rolle hindeutet, keine Farbe je
   Schwierigkeit, kein Schimmer, der bei der wertvollen Karte anders aussieht.

   Ebenso bewusst NICHT: Spielkartenoptik, Chips, Muenzen, goldene Rahmen,
   Konfetti, Trommelwirbel. Das hier ist eine taegliche Ueberraschung, kein
   Automat - und es soll sich auch nicht so anfuehlen.
   =========================================================================== */

.rp-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:26px;
  align-items:stretch}
.rp-karten-lead{margin-bottom:4px}

/* Eine Karte ist ein <button> im Formular - ohne JavaScript vollstaendig
   bedienbar, und die Tastatur bekommt den Fokus geschenkt statt nachgebaut. */
.rp-karte{position:relative;display:block;width:100%;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-align:left;cursor:pointer;perspective:1200px;
  min-height:340px}
/* display:block ist hier keine Kosmetik: Die geschlossene Karte ist ein
   <button>, und ein Button darf nur Textinhalt enthalten - also stehen darin
   <span>s. Ein <span> ist von Haus aus inline, und ein inline-Element hat
   keine Hoehe. Ohne diese Zeile waere die Rueckseite (position:absolute,
   inset:0) auf null Hoehe gespannt, und die Karte waere unsichtbar. */
.rp-karte-innen{display:block;position:relative;height:100%;min-height:340px;
  transition:transform .16s cubic-bezier(.2,.7,.3,1),box-shadow .16s}

/* ------------------------------------------------------------- Rueckseite */
.rp-karte-rueck{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;border-radius:14px;
  border:1px solid var(--line2);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(61,155,255,.10), transparent 60%),
    linear-gradient(160deg, #0e1725 0%, #0a111c 55%, #0c1421 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
/* Ein feines Raster als Struktur - kein Motiv, das etwas bedeuten koennte. */
.rp-karte-rueck::before{content:"";position:absolute;inset:1px;border-radius:13px;
  background-image:linear-gradient(rgba(127,176,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(127,176,255,.055) 1px, transparent 1px);
  background-size:22px 22px;opacity:.8;pointer-events:none}
.rp-karte-rueck::after{content:"";position:absolute;inset:9px;border-radius:9px;
  border:1px solid rgba(127,176,255,.13);pointer-events:none}
.rp-karte-siegel{display:block;width:64px;height:64px;color:var(--mut2);opacity:.62;position:relative}
.rp-karte-siegel svg{width:64px;height:64px}
.rp-karte-nr{display:block;font-family:'Saira',sans-serif;font-weight:700;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--mut);position:relative;white-space:nowrap}
.rp-karte-wort{display:block;font-family:'Saira',sans-serif;font-weight:800;font-size:20px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--mut2);position:relative;white-space:nowrap}

/* Beim Zeigen hebt sich die Karte an - mehr Rueckmeldung braucht es nicht. */
.rp-karte-zu:not(.rp-karte-gesperrt):hover .rp-karte-innen{transform:translateY(-6px)}
.rp-karte-zu:not(.rp-karte-gesperrt):hover .rp-karte-rueck{border-color:var(--rp-rand);
  box-shadow:0 18px 40px -22px var(--rp-glow)}
.rp-karte-zu:not(.rp-karte-gesperrt):hover .rp-karte-siegel{color:var(--rp2);opacity:.85}
.rp-karte:focus-visible{outline:none}
.rp-karte:focus-visible .rp-karte-rueck{border-color:var(--rp);box-shadow:0 0 0 3px var(--rp-weich)}
.rp-karte-zu:not(.rp-karte-gesperrt):active .rp-karte-innen{transform:translateY(-2px)}

/* Gesperrt: die beiden nicht gewaehlten. Sichtbar, aber erkennbar zu Ende. */
.rp-karte-gesperrt{cursor:default}
.rp-karte-gesperrt .rp-karte-rueck{opacity:.4;filter:saturate(.5)}
.rp-karte-gesperrt .rp-karte-wort{font-size:15px;letter-spacing:.14em}

/* ------------------------------------------------------------ Vorderseite */
.rp-karte-auf{cursor:default;min-height:340px}
.rp-karte-vorder{position:relative;height:100%;border-radius:14px;padding:24px 24px 22px;
  border:1px solid var(--rp-rand);
  background:linear-gradient(165deg, rgba(245,165,36,.10) 0%, var(--card) 42%, var(--card) 100%);
  box-shadow:0 24px 50px -30px var(--rp-glow);display:flex;flex-direction:column;gap:10px}
.rp-karte-zug{font-family:'Saira',sans-serif;font-weight:800;font-size:26px;letter-spacing:.1em;
  line-height:1.05;color:var(--rp2)}
.rp-karte-rolle{display:flex;align-items:center;gap:8px;font-family:'Saira',sans-serif;
  font-weight:600;font-size:12px;letter-spacing:.13em;text-transform:uppercase;color:var(--mut2);
  padding-bottom:12px;border-bottom:1px solid var(--line)}
.rp-karte-rolle svg{width:17px;height:17px;flex:none;color:var(--mut2)}
.rp-karte-vorder h2{font-family:'Saira',sans-serif;font-weight:700;font-size:23px;line-height:1.2;
  margin:4px 0 0;color:var(--txt)}
.rp-karte-sit{font-size:14px;line-height:1.6;color:var(--mut);font-style:italic;margin:0}
.rp-karte-text{font-size:15px;line-height:1.72;color:var(--mut2);margin-top:2px}
.rp-karte-vorder .rp-chips{margin-top:auto;padding-top:14px}

/* Die Drehung. Nur einmal, direkt nach dem Aufdecken - danach steht die Karte
   einfach da. Wer weniger Bewegung eingestellt hat, bekommt keine. */
@keyframes rp-karte-dreh{
  0%   {transform:rotateY(180deg) translateY(-6px);opacity:0}
  55%  {opacity:1}
  100% {transform:rotateY(0) translateY(0);opacity:1}
}
.rp-karte-auf .rp-karte-innen{transform-style:preserve-3d;
  animation:rp-karte-dreh .62s cubic-bezier(.22,.68,.24,1.01) both}
@media (prefers-reduced-motion: reduce){
  .rp-karte-auf .rp-karte-innen{animation:none}
  .rp-karte-innen{transition:none}
}

/* --------------------------------------------------- Nach dem Aufdecken --- */
.rp-karten-fertig{align-items:start}
.rp-karte-aktionen{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:22px}

.rp-abschluss{margin-top:24px;border:1px solid var(--rp-rand);border-radius:14px;
  background:linear-gradient(180deg,var(--rp-weich),var(--card) 70%);padding:30px 28px}
.rp-abschluss h2{font-family:'Saira',sans-serif;font-weight:700;font-size:26px;margin:6px 0 8px;
  color:var(--txt)}
.rp-abschluss p{color:var(--mut2);font-size:15px;line-height:1.7;margin:0 0 16px}

/* --------------------------------------------------------- Startseite ---- */
.rp-sect-auftrag .rp-karten{margin-top:18px}
.rp-auftrag-werbung{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:center}
.rp-auftrag-text h3{font-family:'Saira',sans-serif;font-weight:700;font-size:24px;margin:0 0 10px;
  color:var(--txt)}
.rp-auftrag-text p{color:var(--mut2);font-size:15.5px;line-height:1.7;margin:0 0 10px}
.rp-auftrag-text .klein{font-size:13px}
.rp-karten-klein .rp-karte,.rp-karten-klein .rp-karte-innen{min-height:210px}
.rp-karten-klein .rp-karte-siegel,.rp-karten-klein .rp-karte-siegel svg{width:40px;height:40px}
.rp-karten-klein .rp-karte-wort{font-size:14px}
/* Die Schaukarten sind Bild, keine Bedienung - kein Zeiger, kein Anheben. */
.rp-karten-schau .rp-karte{cursor:default}

.rp-auftrag-heute{margin-top:18px}
.rp-auftrag-karte{border:1px solid var(--rp-rand);border-radius:14px;padding:24px 26px;
  background:linear-gradient(165deg, rgba(245,165,36,.09) 0%, var(--card) 45%);
  display:flex;flex-direction:column;gap:8px;max-width:760px}
.rp-auftrag-karte .rp-karte-zug{font-size:20px}
.rp-auftrag-karte h3{font-family:'Saira',sans-serif;font-weight:700;font-size:21px;margin:2px 0 0;
  color:var(--txt)}
.rp-auftrag-karte p{color:var(--mut2);font-size:15px;line-height:1.7;margin:0}

/* ============================ Schmal, B2.1 ============================ */
@media(max-width:900px){
  .rp-auftrag-werbung{grid-template-columns:1fr;gap:20px}
}
@media(max-width:760px){
  /* Auf dem Handy untereinander: drei nebeneinander waeren drei Streifen,
     auf die man nicht zielen kann. */
  .rp-karten{grid-template-columns:1fr;gap:12px}
  /* Flacher als auf dem Desktop: drei Karten a 200px passen nicht auf einen
     Handy-Bildschirm, und die dritte darf nicht unter der Falte verschwinden -
     sonst waehlt man in der Praxis nur zwischen zweien. */
  .rp-karte,.rp-karte-innen{min-height:132px}
  .rp-karte-auf,.rp-karte-auf .rp-karte-innen{min-height:0}
  .rp-karte-rueck{flex-direction:row;justify-content:flex-start;gap:16px;padding:0 22px}
  .rp-karte-siegel,.rp-karte-siegel svg{width:38px;height:38px}
  .rp-karte-wort{font-size:16px}
  .rp-karte-nr{margin-left:auto}
  .rp-karte-zug{font-size:22px}
  .rp-karte-vorder{padding:20px 18px}
  .rp-karte-vorder h2{font-size:20px}
}

/* Ein gesperrtes Feld muss auch gesperrt aussehen - sonst tippt jemand hinein
   und wundert sich, dass nichts passiert. */
.rp-feld input[readonly]{background:var(--bg);color:var(--mut2);cursor:default;
  border-style:dashed}
.rp-feld input[readonly]:focus{border-color:var(--line2);box-shadow:none}

/* ===========================================================================
   Vorschau-Modus ("Bauzaun")
   ===========================================================================
   Zwei Zustaende, zwei Bilder:

   Der Administrator sieht einen Streifen, der ihn daran erinnert, dass er
   allein ist. Bewusst kraeftiger als der Demo-Hinweis - man soll ihn nicht
   nach zehn Minuten Klicken wegblenden, sondern jedes Mal wieder bemerken.

   Alle anderen sehen die Hinweisseite: dieselbe Leerzustands-Karte wie
   ueberall sonst, nur groesser. Keine Absperrbaender, keine Bagger-Symbolik.
   =========================================================================== */

.rp-vorschaubanner{margin:30px 0 0;padding:14px 20px;border-radius:10px;
  border:1px solid var(--rp-rand);border-left:4px solid var(--rp);
  background:linear-gradient(90deg,var(--rp-weich),transparent 70%);
  color:var(--mut2);font-size:14px;line-height:1.65}
.rp-vorschaubanner strong{color:var(--rp2)}
.rp-vorschaubanner code{font-family:ui-monospace,'SFMono-Regular',Menlo,monospace;
  font-size:12.5px;color:var(--txt);background:var(--bg);
  border:1px solid var(--line2);border-radius:5px;padding:1px 6px;white-space:nowrap}

/* Die Hinweisseite traegt eine h1, nicht wie sonst eine h2. */
.rp-leer-gross h1{font-family:'Saira',sans-serif;font-weight:800;font-size:34px;
  line-height:1.1;color:var(--txt);margin:8px 0 16px}
.rp-leer-gross .rp-eyebrow{justify-content:center}
.rp-leer-gross .rp-lead{font-size:16px;color:var(--mut2);max-width:60ch;
  margin-left:auto;margin-right:auto}

/* Der Admin-Kasten in der Moderation hat dort keine Seitenspalte, in der er
   sitzen koennte - also bekommt er eine eigene, schmale Bahn. */
.rp-adminzeile{max-width:380px}