/* ==========================================================================
   CASANOVA CITY – REGELSEITE (ergaenzt site.css; Klassen aus den bisherigen Inhalten)
   ========================================================================== */

/* Kopf */
.rhero { position: relative; padding: calc(76px + var(--cc-space-8)) 0 var(--cc-space-7); overflow: hidden; }
.rhero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(50% 80% at 85% 0%, rgba(var(--cc-red-rgb), 0.16), transparent 70%); pointer-events: none; }
.rhero::after { content: "§"; position: absolute; right: var(--cc-gutter); bottom: -0.18em; font: 900 clamp(10rem, 6rem + 14vw, 22rem)/1 var(--cc-font-display); color: transparent; -webkit-text-stroke: 1px var(--cc-line-strong); pointer-events: none; }
.rhero .wrap { position: relative; z-index: 1; }
.rhero__t { font: 900 clamp(2.5rem, 1.4rem + 4.4vw, 5.25rem)/0.98 var(--cc-font-display); letter-spacing: -0.035em; max-width: 14ch; text-wrap: balance; }

/* Werkzeugleiste: Tabs + Suche, klebt unter dem Header */
.rbar { position: sticky; top: 76px; z-index: 20; background: color-mix(in srgb, var(--cc-ink-950) 86%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-block: 1px solid var(--cc-line); }
.rbar__in { display: flex; align-items: center; gap: var(--cc-space-4); padding-block: var(--cc-space-3); }
.rtabs { display: flex; gap: 4px; padding: 4px; border-radius: var(--cc-radius-md); background: var(--cc-ink-900); border: 1px solid var(--cc-line); flex: none; }
.rtabs .nav_item { display: inline-flex; align-items: center; gap: var(--cc-space-2); min-height: 40px; padding: 0 var(--cc-space-4); border-radius: var(--cc-radius-sm); font-size: var(--cc-text-sm); font-weight: 700; color: var(--cc-text-muted); transition: background-color var(--cc-dur-base), color var(--cc-dur-base); }
.rtabs .nav_item i { font-size: 0.85em; }
.rtabs .nav_item:hover { color: var(--cc-text); background: var(--cc-ink-800); }
.rtabs .nav_item.active { background: var(--cc-red-600); color: var(--cc-text); }
.rtabs .nav_item:focus-visible { outline: none; box-shadow: var(--cc-focus-ring); }
.search_wrapper { position: relative; flex: 1; min-width: 0; }
.search_icon { position: absolute; left: var(--cc-space-4); top: 50%; transform: translateY(-50%); color: var(--cc-text-dim); font-size: 0.9rem; pointer-events: none; }
#global_search_input { width: 100%; min-height: 48px; padding: 0 48px 0 44px; border-radius: var(--cc-radius-md); background: var(--cc-ink-800); border: 1px solid var(--cc-line-strong); color: var(--cc-text); font: inherit; font-size: var(--cc-text-base); -webkit-appearance: none; appearance: none; }
#global_search_input::placeholder { color: var(--cc-text-dim); }
#global_search_input::-webkit-search-cancel-button { display: none; }
#global_search_input:focus-visible { outline: none; border-color: var(--cc-red-500); box-shadow: 0 0 0 3px var(--cc-red-tint); }
.clear_search_btn { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: none; place-items: center; color: var(--cc-text-muted); border-radius: var(--cc-radius-md); }
.clear_search_btn:hover { color: var(--cc-text); }

/* Inhalt */
.rules__body { padding-top: var(--cc-space-7); padding-bottom: var(--cc-section-y); outline: none; }
.js .tab_page { display: none; }
.js .tab_page.active { display: block; animation: tabIn var(--cc-dur-slow) var(--cc-ease-out); }
@keyframes tabIn { from { opacity: 0; transform: translateY(8px); } }
.highlight_orange { color: var(--cc-red-500); }

.page_header { margin-bottom: var(--cc-space-7); max-width: 820px; }
.header_badge { display: inline-flex; align-items: center; gap: var(--cc-space-2); padding: 5px 12px; border-radius: var(--cc-radius-full); background: var(--cc-red-tint); border: 1px solid var(--cc-red-line); color: var(--cc-red-400); font-size: var(--cc-text-xs); font-weight: 700; letter-spacing: 0.1em; }
.page_header h1 { font-size: var(--cc-text-3xl); font-weight: 900; letter-spacing: -0.03em; margin: var(--cc-space-4) 0 var(--cc-space-3); }
.page_header p { color: var(--cc-text-muted); font-size: var(--cc-text-lg); }

.rules_layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--cc-space-7); align-items: start; }
.sidebar_nav { position: sticky; top: 168px; padding: var(--cc-space-4); border-radius: var(--cc-radius-lg); background: var(--cc-ink-900); border: 1px solid var(--cc-line); }
.sidebar_nav h3 { font: 700 var(--cc-text-xs)/1 var(--cc-font-body); letter-spacing: var(--cc-tracking-eyebrow); text-transform: uppercase; color: var(--cc-text-muted); padding: var(--cc-space-2) var(--cc-space-3) var(--cc-space-3); }
.side_link { display: flex; align-items: center; gap: var(--cc-space-2); min-height: 40px; padding: 0 var(--cc-space-3); border-radius: var(--cc-radius-sm); font-size: var(--cc-text-sm); font-weight: 600; color: var(--cc-text-muted); transition: background-color var(--cc-dur-base), color var(--cc-dur-base); }
.side_link i { font-size: 0.65em; color: var(--cc-text-dim); transition: transform var(--cc-dur-base) var(--cc-ease-out), color var(--cc-dur-base); }
.side_link:hover { color: var(--cc-text); background: var(--cc-ink-800); }
.side_link.active { color: var(--cc-text); background: var(--cc-ink-800); box-shadow: inset 2px 0 0 var(--cc-red-500); }
.side_link.active i { color: var(--cc-red-500); transform: translateX(2px); }

.rule_block { margin-bottom: var(--cc-space-8); scroll-margin-top: 170px; }
.block_header { display: flex; align-items: center; justify-content: space-between; gap: var(--cc-space-4); flex-wrap: wrap; padding-bottom: var(--cc-space-4); margin-bottom: var(--cc-space-4); border-bottom: 1px solid var(--cc-line-strong); }
.block_header h2 { font-size: var(--cc-text-2xl); font-weight: 800; letter-spacing: -0.02em; }
.badge_orange { padding: 4px 10px; border-radius: var(--cc-radius-full); border: 1px solid var(--cc-line-strong); color: var(--cc-text-muted); font-size: var(--cc-text-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }

.rule_card { position: relative; display: grid; grid-template-columns: 76px minmax(0, 1fr) 44px; gap: var(--cc-space-4); align-items: start; padding: var(--cc-space-4) var(--cc-space-4) var(--cc-space-4) var(--cc-space-5); margin-bottom: var(--cc-space-2); border-radius: var(--cc-radius-md); background: var(--cc-ink-850); border: 1px solid var(--cc-line); cursor: copy; scroll-margin-top: 180px; transition: border-color var(--cc-dur-base), background-color var(--cc-dur-base); }
.rule_card:hover { border-color: var(--cc-line-strong); background: var(--cc-ink-800); }
.rule_card.is-hit { border-color: var(--cc-red-500); box-shadow: var(--cc-shadow-glow); }
.rule_tag { font: 800 var(--cc-text-sm)/1.6 var(--cc-font-display); color: var(--cc-red-400); white-space: nowrap; }
.rule_text { color: var(--cc-text); font-size: var(--cc-text-base); line-height: 1.65; }
.rule_text strong { font-weight: 700; color: var(--cc-text); }
.rule_text code { font-family: var(--cc-font-mono); font-size: 0.88em; padding: 2px 6px; border-radius: 6px; background: var(--cc-ink-950); border: 1px solid var(--cc-line); }
.copy_btn { width: 44px; height: 44px; margin: -10px -6px 0 0; display: grid; place-items: center; border-radius: var(--cc-radius-sm); color: var(--cc-text-dim); transition: color var(--cc-dur-base), background-color var(--cc-dur-base); }
.rule_card:hover .copy_btn, .copy_btn:focus-visible { color: var(--cc-text); background: var(--cc-ink-700); }

.blacklisted_box { padding: var(--cc-space-5); border-radius: var(--cc-radius-md); border: 1px solid var(--cc-red-line); background: linear-gradient(160deg, color-mix(in srgb, var(--cc-red-900) 60%, var(--cc-ink-900)), var(--cc-ink-900) 70%); }
.blacklisted_intro { color: var(--cc-text-muted); margin-bottom: var(--cc-space-4); }
.blacklisted_list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--cc-space-2); }
.blacklisted_list li { display: flex; align-items: baseline; gap: var(--cc-space-3); padding: var(--cc-space-3) var(--cc-space-4); border-radius: var(--cc-radius-sm); background: color-mix(in srgb, var(--cc-ink-950) 60%, transparent); font-size: var(--cc-text-sm); font-weight: 600; }
.blacklisted_list i { color: var(--cc-red-500); }

/* Gesetzbuch */
.law_overview_card { display: flex; gap: var(--cc-space-5); align-items: flex-start; padding: var(--cc-space-6); margin-bottom: var(--cc-space-6); border-radius: var(--cc-radius-xl); background: linear-gradient(110deg, var(--cc-ink-850), var(--cc-ink-900)); border: 1px solid var(--cc-line); }
.law_icon { flex: none; width: 56px; height: 56px; display: grid; place-items: center; border-radius: var(--cc-radius-lg); background: var(--cc-red-tint); border: 1px solid var(--cc-red-line); color: var(--cc-red-500); font-size: 1.4rem; }
.law_overview_text h3 { font-size: var(--cc-text-xl); margin-bottom: var(--cc-space-2); }
.law_overview_text p { color: var(--cc-text-muted); max-width: 75ch; }
.law_catalog_grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-space-4); align-items: start; }
.law_category_box { border-radius: var(--cc-radius-lg); background: var(--cc-ink-850); border: 1px solid var(--cc-line); overflow: hidden; }
.law_cat_header { display: flex; align-items: center; gap: var(--cc-space-3); padding: var(--cc-space-4) var(--cc-space-5); border-bottom: 1px solid var(--cc-line); background: var(--cc-ink-900); }
.law_cat_header i { color: var(--cc-red-500); }
.law_cat_header h3 { font-size: var(--cc-text-lg); }
.law_entry { display: grid; grid-template-columns: auto 1fr; gap: 2px var(--cc-space-3); padding: var(--cc-space-4) var(--cc-space-5); border-bottom: 1px solid var(--cc-line); scroll-margin-top: 180px; transition: background-color var(--cc-dur-base); }
.law_entry:last-child { border-bottom: 0; }
.law_entry:hover { background: var(--cc-ink-800); }
.law_entry.is-hit { background: var(--cc-red-tint); box-shadow: inset 2px 0 0 var(--cc-red-500); }
.law_code { font: 800 var(--cc-text-xs)/1.6 var(--cc-font-display); color: var(--cc-red-400); white-space: nowrap; letter-spacing: 0.02em; }
.law_title { font-weight: 600; font-size: var(--cc-text-sm); }
.law_penalty { grid-column: 2; font-family: var(--cc-font-mono); font-size: var(--cc-text-xs); color: var(--cc-text-muted); }

/* Suchergebnisse */
.search_results_container { margin-bottom: var(--cc-space-7); padding: var(--cc-space-5); border-radius: var(--cc-radius-xl); background: var(--cc-ink-900); border: 1px solid var(--cc-red-line); box-shadow: var(--cc-shadow-raised); }
.search_results_container.hidden { display: none; }
.search_results_header { display: flex; justify-content: space-between; align-items: center; gap: var(--cc-space-4); flex-wrap: wrap; margin-bottom: var(--cc-space-4); }
.search_results_header h3 { font-size: var(--cc-text-lg); font-weight: 700; }
.search_results_header h3 i { color: var(--cc-red-500); margin-right: 6px; font-size: 0.9em; }
.results_count_badge { padding: 4px 10px; border-radius: var(--cc-radius-full); background: var(--cc-red-tint); border: 1px solid var(--cc-red-line); color: var(--cc-red-400); font-size: var(--cc-text-xs); font-weight: 700; }
.search_results_list { display: grid; gap: var(--cc-space-2); max-height: 60vh; overflow-y: auto; overscroll-behavior: contain; }
.search_result_item { display: block; width: 100%; text-align: left; padding: var(--cc-space-4); border-radius: var(--cc-radius-md); background: var(--cc-ink-850); border: 1px solid var(--cc-line); transition: border-color var(--cc-dur-base), background-color var(--cc-dur-base); }
.search_result_item:hover, .search_result_item:focus-visible { border-color: var(--cc-red-line); background: var(--cc-ink-800); }
.search_res_category { font-size: var(--cc-text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cc-red-400); }
.search_res_title { font: 700 var(--cc-text-base)/1.4 var(--cc-font-display); margin: 2px 0 4px; }
.search_res_snippet { font-size: var(--cc-text-sm); color: var(--cc-text-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.search_res_snippet mark { background: var(--cc-red-tint); color: var(--cc-text); border-radius: 3px; padding: 0 2px; box-shadow: inset 0 -1px 0 var(--cc-red-500); }
.search_empty { text-align: center; padding: var(--cc-space-5); color: var(--cc-text-muted); }

@media (max-width: 1080px) {
  .rules_layout { grid-template-columns: minmax(0, 1fr); gap: var(--cc-space-5); }
  .sidebar_nav { position: static; padding: var(--cc-space-2); min-width: 0; }
  .sidebar_nav h3 { display: none; }
  .category_list { display: flex; gap: var(--cc-space-2); overflow-x: auto; scrollbar-width: none; }
  .category_list::-webkit-scrollbar { display: none; }
  .side_link { white-space: nowrap; background: var(--cc-ink-850); }
  .side_link i { display: none; }
  .side_link.active { box-shadow: inset 0 -2px 0 var(--cc-red-500); }
  .law_catalog_grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .rhero { padding: calc(76px + var(--cc-space-6)) 0 var(--cc-space-5); }
  .rhero::after { font-size: 9rem; opacity: 0.6; }
  .rbar__in { flex-direction: column; align-items: stretch; gap: var(--cc-space-2); }
  .rtabs .nav_item { flex: 1; justify-content: center; padding: 0 var(--cc-space-2); }
  .rtabs .nav_item i { display: none; }
  .rule_card { grid-template-columns: minmax(0, 1fr) 44px; gap: var(--cc-space-1) var(--cc-space-3); padding: var(--cc-space-4); }
  .rule_tag { grid-column: 1; }
  .rule_text { grid-column: 1 / -1; grid-row: 2; font-size: var(--cc-text-sm); }
  .copy_btn { grid-column: 2; grid-row: 1; margin: -10px -8px -6px 0; }
  .rule_block, .rule_card, .law_entry { scroll-margin-top: 230px; }
  .law_overview_card { flex-direction: column; padding: var(--cc-space-5); }
}