/* Dark City V5 – maßhaltige Regelwerk-/Hilfeseiten nach den bereitgestellten Referenzbildern. */
:root {
  --dc-accent: #b879ff;
  --dc-pink: #e778dd;
  --dc-violet: #9554f7;
  --dc-text: #f4eefa;
  --dc-muted: #c1b2cf;
  --dc-glass: rgba(44, 25, 55, .41);
  --dc-glass-border: rgba(207, 152, 245, .15);
  --dc-glass-hover: rgba(52, 30, 67, .52);
  --dc-gradient: linear-gradient(105deg, #793de2 0%, #a564f9 42%, #d08aff 72%, #8144ed 100%);
}
body { background: #1a0e21; color: var(--dc-text); }
body::after {
  background-image: url('../bilder/876cb4adb7.webp');
  background-size: cover;
  background-position: center;
  filter: blur(10px) saturate(.70) hue-rotate(6deg);
  opacity: .30;
}
body::before {
  background: radial-gradient(ellipse at 15% 48%,rgba(172,90,216,.15),transparent 55%),
              radial-gradient(ellipse at 84% 73%,rgba(166,69,147,.14),transparent 60%),
              linear-gradient(180deg,rgba(17,7,26,.06),rgba(12,7,24,.12));
}
.grid-background { opacity: .12; }
.orb1,.orb2,.orb3 { opacity:.60; }
.hdr { background: rgba(22,10,30,.68)!important; }
.hdr.hdr-scrolled { background: rgba(24,11,33,.83)!important; }
.glas,.rw-regel,.recht-karte,.mitglied,.schritt,.textkarte,.info-card,.phi-zitat,.kontakt-feld {
  background: var(--dc-glass)!important;
  border-color:var(--dc-glass-border)!important;
  -webkit-backdrop-filter: blur(16px) saturate(115%);
  backdrop-filter: blur(16px) saturate(115%);
}
/* Gleiche zentrale Inhaltsbreite für Regeln und Hilfe */
.seite.seite-regelwerk,.seite.seite-yaca { max-width: 1010px; padding-left:20px; padding-right:20px; }
.seite-regelwerk .seite-kopf { margin-bottom: 40px; }
.seite-regelwerk .seite-kopf h1 { font-size: clamp(45px,5.1vw,72px); line-height: 1.1; font-weight:800; letter-spacing:.13em; }
.seite-regelwerk .seite-kopf p { margin-top:16px; font-size:16px; line-height:20px; }
.seite-regelwerk .seite-kopf .strich { margin-top:22px; width:74px; height:3px; background:linear-gradient(90deg,#c85cfa,#e77dd3,#a26bff); }
/* Drei Tabs: 630px wie das Original, nicht über die ganze Seitenbreite gezogen */
.seite-regelwerk .rw-tabs {
  width:min(630px,100%); max-width:100%; height:66px;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:center; gap:7px; padding:7px;
  border-radius:17px; margin:0 auto 12px;
  background:rgba(38,20,46,.44)!important;
  border:1px solid rgba(228,168,244,.12)!important;
  box-shadow:0 12px 40px rgba(0,0,0,.08);
}
.seite-regelwerk .rw-tab {
  min-width:0;width:100%;height:50px;justify-content:center;
  display:flex;flex-direction:row;gap:11px;align-items:center;
  white-space:nowrap;font:800 13px/1 'Segoe UI',Arial,sans-serif;
  letter-spacing:.085em;padding:0 14px;border-radius:12px;
  color:#e0d1e5; background:transparent!important; border:1px solid transparent;
  box-shadow:none!important;transition:background .2s,border-color .2s,color .2s;
}
.seite-regelwerk .rw-tab.aktiv {
  color:#fff;background:linear-gradient(120deg,rgba(161,59,214,.43),rgba(132,51,182,.30))!important;
  border-color:rgba(218,103,241,.54)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 9px 22px rgba(115,43,170,.15)!important;
}
.seite-regelwerk .dc-tab-icon,.rw-kat .k-ico { color:var(--dc-accent); }
.dc-tab-icon { width:17px;height:17px;display:grid;place-items:center;flex:none; }
.dc-tab-icon svg { width:15px;height:15px; }
.rw-tab.aktiv .dc-tab-icon { color: #db8aff; }
.seite-regelwerk .rw-hinweis {
  display:flex;align-items:center;justify-content:center;gap:7px;
  margin:0 auto 20px;min-height:23px;
  text-align:center; color:rgba(228,215,232,.72);font-size:12px;line-height:1.4;
}
.seite-regelwerk .rw-hinweis b {
  margin:0;padding:3px 7px;
  color:#dd8bea; border:1px solid rgba(211,99,225,.36);
  border-radius:5px;font-size:11px;font-weight:750;letter-spacing:.10em;
  background:rgba(153,63,187,.12);
}
/* Ein einziges Input-Rechteck – keine zwei übereinander gezeichneten Borders */
.seite-regelwerk .rw-suche {
  display:block; position:relative;width:100%;height:52px;max-width:none;
  margin:0 0 26px;padding:0;border-radius:14px;
  background:rgba(39,24,49,.40)!important;
  border:1px solid rgba(205,154,213,.13)!important;
  backdrop-filter:blur(15px);box-shadow:none;
}
.seite-regelwerk .rw-suche input {
  position:absolute;inset:0;width:100%;height:100%;
  padding:0 18px 0 47px; font:400 14px/1 'Segoe UI',Arial,sans-serif;
  background:transparent!important;border:0;border-radius:14px;outline:0;
  color:#f3e7f3;backdrop-filter:none;-webkit-backdrop-filter:none;
}
.seite-regelwerk .rw-suche input:focus {box-shadow:0 0 0 1px rgba(198,120,255,.55)}
.seite-regelwerk .rw-suche i.ic {left:18px;color:#cbbdd0;font-size:16px;}
.seite-regelwerk .rw-suche i.ic svg { width:15px;height:15px; }
.seite-regelwerk .rw-suche input::placeholder { color:#b5a5bc; }
/* Genau ein Akkordeon pro Paragraph; die Unterparagraphen sind flache sichtbare Abschnitte */
.seite-regelwerk .rw-regel,.seite-yaca .rw-regel {
  margin:0 0 14px;border-radius:16px!important;
  background:rgba(40,23,48,.43)!important;
  border:1px solid rgba(211,152,224,.14)!important;
  box-shadow:0 5px 20px rgba(12,4,19,.10);
  transition:border-color .2s,background .2s;
}
.seite-regelwerk .rw-regel:hover,.seite-yaca .rw-regel:hover {
  background:var(--dc-glass-hover)!important;
  border-color:rgba(206,138,245,.28)!important;
}
.seite-regelwerk .rw-regel > summary,.seite-yaca .rw-regel > summary {
  display:flex;align-items:center;gap:16px;min-height:80px;
  padding:19px 28px!important;
  font-size:16px;font-weight:700;color:#f7f2f8;
}
.seite-regelwerk .rw-regel > summary > span:not(.r-ico):not(.r-pfeil):not(.rw-count) {font-size:16px!important;font-weight:700!important;}
.rw-regel .r-ico {width:36px;height:36px;border-radius:10px;background:rgba(196,81,219,.15);border:1px solid rgba(209,100,234,.35);color:#d788f4;}
.rw-regel .r-ico i.ic {font-size:17px;color:#cf81eb;}
.rw-regel .r-ico i.ic svg {width:18px;height:18px;fill:none;}
.rw-regel .r-pfeil {flex:none;margin-left:14px;color:#cb83ea;}
.rw-regel .r-pfeil svg {width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round;}
.rw-regel[open] > summary .r-pfeil {transform:rotate(90deg);}
.rw-count {
  display:inline-flex;align-items:center;justify-content:center;
  min-width:65px;padding:4px 8px;margin-left:auto!important;
  font-size:11px;color:rgba(234,218,240,.73);font-weight:500;
  background:rgba(15,10,25,.15);
  border:1px solid rgba(235,205,251,.13);border-radius:999px;
}
.seite-regelwerk .rw-detail-block {
  position:relative;
  margin:0 28px 24px 76px;
  padding:0 0 0 0!important;
  border-left:2px solid rgba(197,105,231,.45);
}
.dc-rule-sub {
  padding:16px 16px 15px;
  margin:0;
  background:transparent;
  border-bottom:1px solid rgba(227,183,233,.075);
}
.dc-rule-sub:last-child {border-bottom:0;padding-bottom:6px;}
.dc-rule-sub h4 {
  font-size:14px;line-height:22px;font-weight:760;
  color:#db81ee;letter-spacing:.01em;margin:0 0 8px;
}
.dc-rule-sub p {
  margin:0;color:#e6d9e8;
  font-size:14px;line-height:1.73;font-weight:400;
}
/* Drei präzise Kategorie-Kacheln in der Fraktionsansicht */
.seite-regelwerk .rw-kats {
  display:flex;flex-wrap:nowrap;justify-content:center;
  gap:14px;margin:29px auto 32px;
}
.seite-regelwerk .rw-kat {
  width:220px;min-width:0;min-height:154px;
  display:flex;align-items:center;justify-content:center;flex-direction:column;
  gap:4px;padding:18px 13px 15px;
  color:#e4d5e6;border-radius:18px;
  background:rgba(38,23,46,.42)!important;
  border:1px solid rgba(221,183,237,.13)!important;
  box-shadow:none;transform:none;
}
.seite-regelwerk .rw-kat .k-ico {
  width:44px;height:44px;margin:0 0 7px;border-radius:12px;
  display:grid;place-items:center;
}
.seite-regelwerk .rw-kat .k-ico i.ic svg {width:19px;height:19px;fill:none;}
.seite-regelwerk .rw-kat b {font-size:14px;letter-spacing:.10em;line-height:1.3;margin:0;}
.seite-regelwerk .rw-kat small {display:block;font-size:11px;margin:2px 0 0;color:#bcaec2;}
.seite-regelwerk .rw-kat small.k-nr {font-size:11px;margin:0;color:#c6b8d0;}
.seite-regelwerk .rw-kat.k-gruen .k-ico {color:#60de9a;}
.seite-regelwerk .rw-kat.k-rot .k-ico {color:#f67891;}
.seite-regelwerk .rw-kat.k-blau .k-ico {color:#76afff;}
.seite-regelwerk .rw-kat.k-rot.aktiv {
  background:linear-gradient(115deg,rgba(114,36,65,.39),rgba(65,25,62,.40))!important;
  border-color:rgba(245,106,128,.56)!important;
  box-shadow:0 7px 25px rgba(135,38,63,.12);
}
.seite-regelwerk .rw-kat.k-gruen.aktiv {background:rgba(28,75,59,.4)!important;border-color:rgba(95,214,164,.55)!important;}
.seite-regelwerk .rw-kat.k-blau.aktiv {background:rgba(32,53,93,.40)!important;border-color:rgba(120,167,250,.55)!important;}
.seite-regelwerk .rw-fraktionsregel > summary {min-height:79px;}
.seite-regelwerk .rw-fraktionsregel .r-text {
  padding:0 28px 23px 84px!important;
  font-size:14px;line-height:1.8;color:#e7dbe8;
}
.seite-regelwerk .rw-fraktionsregel .r-text p {font-size:14px;color:#e6d9e8;}
/* YACA-Hilfe wie die Screenshot-Karten: nur ein Accordion pro Problem */
.seite-yaca .zwischen {margin:35px 0 28px;font-size:32px;letter-spacing:.08em;}
.seite-yaca .rw-regel {margin-bottom:16px;}
.seite-yaca .rw-regel > summary {min-height:74px;gap:16px;padding:20px 28px!important;font-size:17px;}
.seite-yaca .rw-regel .r-text {
  padding:5px 28px 24px 84px!important;
  font-size:14px;line-height:1.85;color:#e1d4e6;
}
.seite-yaca .rw-regel .r-text button.kopieren {font-size:13px;padding:4px 9px;color:#f3e6ff;}
/* Übergang: dezent violettes Overlay, kurzes prägnantes Logo */
#pageLoader {background:rgba(27,11,44,.43)!important;backdrop-filter:blur(9px) saturate(130%);transition:opacity .22s ease!important;}
#pageLoader img {width:112px!important;max-height:160px;filter:drop-shadow(0 0 26px rgba(154,70,248,.75));animation:dcFlash .42s ease-out both!important;}
@keyframes dcFlash {0%{opacity:.35;transform:scale(.86)}50%{opacity:1;transform:scale(1.04)}100%{opacity:.97;transform:scale(1)}}
@media(max-width:900px){
  .seite-regelwerk .rw-tabs {height:auto;min-height:64px;gap:3px;padding:5px;}
  .seite-regelwerk .rw-tab {height:52px;padding:8px 3px;gap:4px;flex-direction:column;font-size:10px;letter-spacing:.04em;}
  .seite-regelwerk .rw-kats {gap:7px;margin-top:19px;}
  .seite-regelwerk .rw-kat {min-height:130px;padding:12px 4px;}
  .seite-regelwerk .rw-kat b {font-size:10px;letter-spacing:.03em;}
  .seite-regelwerk .rw-kat small {font-size:9px;}
  .seite-regelwerk .rw-regel > summary,.seite-yaca .rw-regel > summary {padding:15px!important;gap:10px;min-height:72px;font-size:14px;}
  .seite-regelwerk .rw-regel > summary > span:not(.r-ico):not(.r-pfeil):not(.rw-count) {font-size:14px!important;}
  .rw-regel .r-ico {width:34px;height:34px;}
  .rw-count {font-size:10px;min-width:unset;}
  .rw-regel .r-pfeil {margin-left:1px;}
  .seite-regelwerk .rw-detail-block {margin:0 15px 20px 55px;}
  .dc-rule-sub {padding:14px 10px 14px 12px;}
  .dc-rule-sub h4 {font-size:13px;}
  .dc-rule-sub p {font-size:13px;line-height:1.75;}
  .seite-regelwerk .rw-fraktionsregel .r-text,.seite-yaca .rw-regel .r-text {padding:0 16px 20px 58px!important;font-size:13px;}
  .seite-yaca .zwischen {font-size:26px;}
}
@media(max-width:470px) {
  .rw-count {display:none;}
  .seite-regelwerk .rw-kat small:not(.k-nr) {display:none;}
  .seite-regelwerk .rw-kat .k-ico {width:36px;height:36px;}
  .seite-regelwerk .rw-kat b{font-size:9px;}
  .seite-regelwerk .rw-kat small.k-nr {font-size:8px;}
  .seite-regelwerk .rw-hinweis{font-size:10px;}
}
@media(prefers-reduced-motion:reduce) { #pageLoader img {animation:none!important;} }

/* Pfeile der Fraktions- und Hilfekarten immer am rechten Rand */
.seite-regelwerk .rw-fraktionsregel > summary > .r-pfeil,
.seite-yaca .rw-regel > summary > .r-pfeil {margin-left:auto!important;}
.seite-yaca .rw-regel > summary .r-ico {flex-shrink:0;}