/* ===========================================
   USER.CSS – Isarauen Kategorie 20 Theme + TOC Toggle
   Joomla 6 / Cassiopeia
   - Default: vampire-bg (repeat)
   - catid-20: isarauen.png (repeat) + dunkelblau/weißes Farbschema
   - JO Table Of Contents (JewelOsman): Styling + einklappbar (CSS-only Look)
     Hinweis: Einklappen benötigt JS (toc-toggle.js), CSS bildet nur das Design ab.
   =========================================== */

/* ==================================================
   0) Variablen / Themes
   ================================================== */

/* Default Theme (alle Kategorien) */
@import url("ventrue-accordion-clan.css");

:root{
  /* TOC */
  --toc-bg: rgba(0, 0, 0, 0.68);
  --toc-border: rgba(179, 0, 0, 0.25);
  --toc-title-bg-1: #7b0000;
  --toc-title-bg-2: #a00000;
  --toc-title-text: #ffffff;
  --toc-text: #ffffff;
  --toc-link: #ffffff;
  --toc-link-hover: #b30000;

  /* Backend Dropdowns */
  --dd-bg: #2b0000;
  --dd-bg-hover: #4a0000;
  --dd-text: #ffffff;
  --dd-border: rgba(255,255,255,0.18);
}

/* Kategorie 20 Theme */
body.catid-20{
  --isarauen-primary: #0b1b3a;
  --isarauen-secondary: #102a5a;
  --isarauen-surface: rgba(11,27,58,0.80);
  --isarauen-border: rgba(255,255,255,0.12);
  --isarauen-link: #ffffff;
  --isarauen-link-hover: #a9c7ff;

  /* TOC nur über Variablen umschalten */
  --toc-bg: var(--isarauen-surface);
  --toc-border: var(--isarauen-border);
  --toc-title-bg-1: var(--isarauen-primary);
  --toc-title-bg-2: var(--isarauen-secondary);
  --toc-title-text: #ffffff;
  --toc-text: #ffffff;
  --toc-link: var(--isarauen-link);
  --toc-link-hover: var(--isarauen-link-hover);
}

/* ==================================================
   1) GLOBAL: Hintergrund-Layer
   ================================================== */

html{
  position: relative;
  min-height: 100%;
}

html::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image: url("../images/hintergrund/vampire-bg.jpg");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}

/* Kategorie 20: eigener Background */
body.catid-20::before{
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;

  background-image: url("../images/hintergrund/isarauen.png");
  background-repeat: repeat;
  background-position: top left;
  background-size: auto;
}

body{
  margin: 0;
  color: #fff;
  font-family: Arial, sans-serif;
  font-size: 1rem;
  background: transparent !important;
}

/* ==================================================
   2) Grundlayout – transparent halten
   ================================================== */

.site,
.site-content,
.grid-child{
  background: transparent !important;
}

/* ==================================================
   3) Header & Footer: transparent (Pseudolayer weg)
   ================================================== */

header,
.container-header,
.header,
.container-top,
footer,
.container-footer,
.footer{
  background: transparent !important;
}

.container-header::before,
.container-header::after,
.container-footer::before,
.container-footer::after,
header::before,
header::after,
footer::before,
footer::after{
  content: none !important;
  display: none !important;
}

/* Kategorie 20: Header/Footer leicht blau */
body.catid-20 .container-header,
body.catid-20 header,
body.catid-20 .container-footer,
body.catid-20 footer{
  background-color: rgba(11,27,58,0.65) !important;
  backdrop-filter: blur(2px);
}

/* ==================================================
   4) Content-Overlay / Karten
   ================================================== */

.container-component,
.container-sidebar-right,
.moduletable,
.card{
  background-color: rgba(0,0,0,0.68);
  border-radius: 10px;
  box-shadow: 0 0 18px rgba(179,0,0,0.25);
}

body.catid-20 .container-component,
body.catid-20 .container-sidebar-right,
body.catid-20 .moduletable,
body.catid-20 .card{
  background-color: var(--isarauen-surface);
  box-shadow: 0 0 18px rgba(0,0,0,0.35);
  border: 1px solid var(--isarauen-border);
  color: #fff;
}

/* Cards & Module Details */
.card,
.moduletable{
  border-radius: 8px;
  padding: 1rem;
}

/* Card Header */
.card-header{
  background-color: #7b0000;
  color: #fff;
  border-bottom: 1px solid #b30000;
  font-family: "MyFont", serif;
}

body.catid-20 .card-header{
  background-color: var(--isarauen-primary);
  border-bottom: 1px solid var(--isarauen-border);
  color: #fff;
}

/* ==================================================
   5) MAIN-TOP: Module nebeneinander
   ================================================== */

.container-top,
.container-top .grid-child,
.container-top .container,
.container-top .moduletable-parent{
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 1rem !important;
  align-items: center !important;
}

.container-top > *,
.container-top .grid-child > *,
.container-top .container > *{
  width: auto !important;
  max-width: none !important;
  flex: 0 0 auto !important;
  margin: 0 !important;
}

.container-top .moduletable,
.container-top .mod-menu,
.container-top .mod-custom{
  width: auto !important;
  flex: 0 0 auto !important;
}

/* Logo ausblenden */
.navbar-brand{ display: none !important; }

/* Frontend-Edit Icon sichtbar lassen */
.jmodedit{
  display: inline-block !important;
  visibility: visible !important;
}

/* ==================================================
   6) Schrift (Überschriften)
   ================================================== */

@font-face{
  font-family: "MyFont";
  src: url("../media/fonts/FlaemischeKanzleischrift.woff2") format("woff2"),
       url("../media/fonts/FlaemischeKanzleischrift.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

h1,h2,h3,h4,h5,h6{ font-family: "MyFont", serif; }

/* ==================================================
   7) TOC (JewelOsman) – EIN Block, robustes Collapse
   ================================================== */

.com-content-article__body .toc{
  background: var(--toc-bg) !important;
  border: 1px solid var(--toc-border) !important;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin: 1.25rem 0 1.5rem;
  color: var(--toc-text) !important;
}

/* Titelzeile */
.com-content-article__body .toc > p{
  margin: 0 !important;
  cursor: pointer;
  user-select: none;
}

.com-content-article__body .toc > p span{
  color: var(--toc-title-text) !important;
  font-family: "MyFont", serif;
  font-size: 1.1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.65rem 0.9rem;
  border-radius: 10px;
  width: 100%;
  background: linear-gradient(90deg, var(--toc-title-bg-1), var(--toc-title-bg-2));
}

/* Links */
.com-content-article__body .toc a{
  color: var(--toc-link) !important;
  text-decoration: none;
}
.com-content-article__body .toc a:hover{
  color: var(--toc-link-hover) !important;
  text-decoration: underline;
}

/* Einträge (Plugin rendert divs) */
.com-content-article__body .toc > div > div{
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  line-height: 1.35;
  margin: 0.2rem 0;
  color: var(--toc-text) !important;
}

/* Bullet Icon */
.com-content-article__body .toc .fa-circle{
  font-size: 0.45em;
  opacity: 0.75;
  transform: translateY(-0.05em);
}

/* Collapse: wirklich NUR Titel anzeigen */
.com-content-article__body .toc.toc-collapsed > :not(p):not(script):not(style){
  display: none !important;
}
.com-content-article__body .toc.toc-open > :not(p):not(script):not(style){
  display: block !important;
}

/* ==================================================
   8) Sidebar Fix
   ================================================== */

.grid-child.container-sidebar-right{
  background: transparent !important;
  box-shadow: none !important;
  align-self: flex-start !important;
  position: relative;
  z-index: 1;
}
.grid-child.container-component{
  position: relative;
  z-index: 2;
}

/* ==================================================
   9) Links / Buttons / Forms (Frontend)
   ================================================== */

a{
  color: #fff;
  text-decoration: none;
  transition: color 0.3s ease;
}
a:hover{ color: #b30000; }

body.catid-20 a{ color: var(--isarauen-link); }
body.catid-20 a:hover{ color: var(--isarauen-link-hover); }

/* Buttons */
button,
.btn,
input[type="submit"]{
  background-color: #7b0000;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0.6rem 1.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
button:hover,
.btn:hover,
input[type="submit"]:hover{ background-color: #a00000; }

body.catid-20 button,
body.catid-20 .btn,
body.catid-20 input[type="submit"]{
  background-color: var(--isarauen-secondary);
  color: #fff;
  border: 1px solid var(--isarauen-border);
}
body.catid-20 button:hover,
body.catid-20 .btn:hover,
body.catid-20 input[type="submit"]:hover{
  background-color: var(--isarauen-primary);
}

/* Frontend Inputs (dein Theme-Stil) */
input,
textarea,
select{
  background-color: #111;
  color: #fff;
  border: 1px solid #333;
  border-radius: 5px;
  padding: 0.5rem 0.8rem;
}

input:focus,
textarea:focus,
select:focus{
  border-color: #b30000;
  box-shadow: 0 0 10px rgba(179,0,0,0.6);
  outline: none;
}

body.catid-20 input:focus,
body.catid-20 textarea:focus,
body.catid-20 select:focus{
  border-color: var(--isarauen-link-hover);
  box-shadow: 0 0 10px rgba(169,199,255,0.35);
}

/* ==================================================
   10) Tabellen / Systemmeldungen / Footer
   ================================================== */

table, th, td{
  color: #fff;
  border: 1px solid #333;
  padding: 0.5rem;
}

/* Kategorie-Table (optional) */
.com-content-category__table th,
.com-content-category__table td{
  background-color: #7b0000;
  border-color: #b30000;
}

body.catid-20 table th,
body.catid-20 table td{
  border-color: var(--isarauen-border);
}
body.catid-20 table thead th,
body.catid-20 table tr:first-child th{
  background-color: var(--isarauen-primary);
  color: #fff;
}

joomla-alert,
.alert,
.alert-wrapper,
.system-message{
  background-color: rgba(0,0,0,0.7);
  border-left: 4px solid #b30000;
  color: #fff;
  padding: 1rem;
  border-radius: 6px;
}
body.catid-20 joomla-alert,
body.catid-20 .alert,
body.catid-20 .alert-wrapper,
body.catid-20 .system-message{
  border-left-color: var(--isarauen-link-hover);
}

footer{
  background: transparent;
  color: #fff;
}

/* ==================================================
   11) VISFORMS – Dropdowns lesbar
   ================================================== */

.visforms select option{
  background-color: #0b1b3a !important;
  color: #ffffff !important;
}
.visforms select option:hover,
.visforms select option:checked{
  background-color: #102a5a !important;
  color: #ffffff !important;
}

.visforms .choices__list--dropdown,
.visforms .choices__list[aria-expanded]{
  background-color: #0b1b3a !important;
  border: 1px solid rgba(255,255,255,0.15) !important;
}
.visforms .choices__item--selectable{
  background-color: #0b1b3a !important;
  color: #ffffff !important;
}
.visforms .choices__item--selectable.is-highlighted{
  background-color: #102a5a !important;
  color: #ffffff !important;
}
.visforms .choices__placeholder{
  color: rgba(255,255,255,0.6) !important;
}

/* ==================================================
   12) BACKEND / EDIT-FORM – Dropdowns + Dark Panels
   ================================================== */

/* Normal SELECTs (Backend) */
select.form-select,
select.form-control{
  background: var(--dd-bg) !important;
  color: var(--dd-text) !important;
  border-color: var(--dd-border) !important;
}
select.form-select option,
select.form-control option{
  background: var(--dd-bg) !important;
  color: var(--dd-text) !important;
}

/* Joomla Fancy Select (Choices.js) */
.joomla-field-fancy-select .choices__inner,
joomla-field-fancy-select .choices__inner,
.choices .choices__inner{
  background: rgba(0,0,0,0.25) !important;
  color: var(--dd-text) !important;
  border: 1px solid var(--dd-border) !important;
}
.joomla-field-fancy-select .choices__list--dropdown,
joomla-field-fancy-select .choices__list--dropdown,
.choices .choices__list--dropdown{
  background: var(--dd-bg) !important;
  border: 1px solid var(--dd-border) !important;
}
.joomla-field-fancy-select .choices__item--choice,
joomla-field-fancy-select .choices__item--choice,
.choices .choices__item--choice{
  background: var(--dd-bg) !important;
  color: var(--dd-text) !important;
}
.joomla-field-fancy-select .choices__item--choice.is-highlighted,
joomla-field-fancy-select .choices__item--choice.is-highlighted,
.choices .choices__item--choice.is-highlighted{
  background: var(--dd-bg-hover) !important;
  color: var(--dd-text) !important;
}
.joomla-field-fancy-select .choices__item--choice.is-selected,
joomla-field-fancy-select .choices__item--choice.is-selected,
.choices .choices__item--choice.is-selected{
  background: rgba(255,255,255,0.10) !important;
  color: var(--dd-text) !important;
}

/* Labels (Backend) */
.control-label,
.control-label label,
.control-group .control-label{
  background: rgba(0,0,0,0.45) !important;
  border: 1px solid rgba(255,255,255,0.12);
  color: #fff !important;
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
}

/* --- Dark Panel Blöcke: Publishing + attrib-fields-* + Editor --- */
#publishing,
[id^="attrib-fields-"],
joomla-tab-element#editor{
  background: rgba(0,0,0,0.75) !important;
  border-radius: 12px;
  padding: 1rem 1.25rem;
}

/* Panels innen neutralisieren */
#publishing .tab-pane,
#publishing .tab-content,
[id^="attrib-fields-"] .tab-pane,
[id^="attrib-fields-"] .tab-content,
joomla-tab-element#editor [role="tabpanel"],
joomla-tab-element#editor .tab-pane,
joomla-tab-element#editor .tab-content{
  background: transparent !important;
}

/* Fieldsets: fieldset-fields-* + Editor-fieldsets */
[id^="fieldset-fields-"],
joomla-tab-element#editor fieldset{
  background: rgba(0,0,0,0.45) !important;
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(255,255,255,0.08);
}

/* Legends einheitlich */
[id^="fieldset-fields-"] > legend,
joomla-tab-element#editor fieldset > legend{
  background: rgba(0,0,0,0.85) !important;
  color: #fff !important;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  box-shadow: 0 0 8px rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.12);
  width: auto;
  display: inline-block;
}

/* Platz für Legend */
[id^="fieldset-fields-"]{ padding-top: 1.25rem; }

/* Gruppen/Controls neutralisieren (Backend) – aber OHNE Inputs zu zerstören */
#publishing .control-group,
#publishing .controls,
[id^="attrib-fields-"] .control-group,
[id^="attrib-fields-"] .controls,
[id^="fieldset-fields-"] .control-group,
[id^="fieldset-fields-"] .controls,
joomla-tab-element#editor .control-group,
joomla-tab-element#editor .controls,
joomla-tab-element#editor .form-check{
  background: transparent !important;
}

/* Labels im Panel */
#publishing label,
[id^="attrib-fields-"] label,
[id^="fieldset-fields-"] label,
joomla-tab-element#editor label,
joomla-tab-element#editor .form-label{
  color: #fff !important;
  font-weight: 500;
  background: transparent !important;
  border: 0 !important;
}

/* Dezente Linien (best effort) */
#publishing .control-group,
[id^="attrib-fields-"] .control-group,
[id^="fieldset-fields-"] .control-group,
joomla-tab-element#editor .control-group,
joomla-tab-element#editor .mb-3,
joomla-tab-element#editor .row.mb-3{
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
#publishing .control-group:last-child,
[id^="attrib-fields-"] .control-group:last-child,
[id^="fieldset-fields-"] .control-group:last-child,
joomla-tab-element#editor .control-group:last-child,
joomla-tab-element#editor .mb-3:last-child,
joomla-tab-element#editor .row.mb-3:last-child{
  border-bottom: none;
}

/* FIX: Editor Inputs sollen WEISS bleiben (z.B. #jform_title) */
joomla-tab-element#editor input.form-control,
joomla-tab-element#editor textarea.form-control,
joomla-tab-element#editor select.form-select,
joomla-tab-element#editor input[type="text"],
joomla-tab-element#editor input[type="search"],
joomla-tab-element#editor input[type="email"],
joomla-tab-element#editor input[type="url"]{
  background: #ffffff !important;
  color: #000000 !important;
  border: 1px solid #ccc !important;
}
joomla-tab-element#editor input.form-control:focus,
joomla-tab-element#editor textarea.form-control:focus,
joomla-tab-element#editor select.form-select:focus{
  background: #ffffff !important;
  color: #000000 !important;
  border-color: #5b9dd9 !important;
  box-shadow: 0 0 0 0.2rem rgba(91,157,217,.25);
}

/* ==================================================
   13) Responsive
   ================================================== */

@media (max-width: 768px){
  .container-top{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Ventrue Accordion – Final (Joomla-safe)
   - Text always white
   - Links dark red
   - Indentation via --lvl (depth)
*/
.vacc-wrap, .vacc-wrap * { box-sizing: border-box; }
.vacc-wrap { color:#fff !important; }
.vacc-wrap a { color:#7a0000 !important; text-decoration: underline; text-underline-offset: 2px; }
.vacc-wrap a:hover { color:#a10000 !important; }

.vacc-header { margin: 0 0 1rem; }
.vacc-header h1 { margin: 0 0 .35rem; font-size: clamp(1.6rem, 3vw, 2.4rem); }
.vacc-header .subtitle { margin: 0 0 .5rem; opacity:.9; }
.vacc-header .legend { display:flex; gap:.6rem; flex-wrap:wrap; }
.vacc-header .leg { font: 12px/1 system-ui; padding:.25rem .55rem; border:1px solid rgba(255,255,255,.25); border-radius:999px; opacity:.9; }

.vacc details.branch{
  border:1px solid rgba(255,255,255,.22);
  border-radius: 16px;
  padding: .55rem .75rem;
  margin: .85rem 0;
  background: rgba(0,0,0,.35);
  color:#fff !important;
}

.vacc summary{
  cursor:pointer;
  font-weight: 800;
  display:flex;
  align-items: baseline;
  gap: .75rem;
  flex-wrap: wrap;
  color:#fff !important;
}
.vacc summary::-webkit-details-marker{ display:none; }
.vacc summary::before{
  content:"▸";
  display:inline-block;
  width:1.2em;
  opacity:.85;
}
.vacc details[open] > summary::before{ content:"▾"; }
.branch-title{ font-size: 1.05rem; }

.vacc .cards{
  list-style:none;
  padding: 0;
  margin: .75rem 0 0;
  display: grid;
  gap: .55rem;
}

.vacc .card{
  border:1px solid rgba(255,255,255,.22);
  border-radius: 14px;
  padding: .7rem .8rem;
  background: rgba(0,0,0,.28);
  color:#fff !important;

  /* indentation */
  margin-left: calc(var(--lvl, 0) * 18px);
}

.vacc .card.diab{ border-color: rgba(225,29,72,.9); }
.vacc .card.unk{ border-color: rgba(245,158,11,.9); }

.vacc .head{
  display:flex;
  gap: .6rem;
  align-items: baseline;
  flex-wrap: wrap;
  color:#fff !important;
}

.vacc .gen{
  font-weight: 900;
  padding: .12rem .5rem;
  border:1px solid rgba(255,255,255,.22);
  border-radius: 10px;
  min-width: 2.2rem;
  text-align: center;
}

.vacc .name{ font-weight: 900; color:#fff !important; }
.vacc .meta{ opacity:.85; font-size:.92em; color:#fff !important; }

.vacc .badge{
  margin-left:auto;
  font-size:.8em;
  padding: .12rem .45rem;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.22);
  opacity: .95;
  color:#fff !important;
}
.vacc .badge.diab{ border-color: rgba(225,29,72,.95); }
.vacc .badge.unk{ border-color: rgba(245,158,11,.95); }

.vacc .rel{
  margin-top: .45rem;
  padding: .35rem .55rem;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px dashed rgba(255,255,255,.22);
  font-size: .92em;
  color:#fff !important;
}
.vacc .rel.root{ opacity:.75; border-style: dotted; }
.vacc .sire{ opacity:.95; }

@media (max-width: 520px){
  .vacc .card{ margin-left: calc(var(--lvl, 0) * 12px); }
  .vacc .meta{ width:100%; }
}