/* ── Diff-Optik wie Berlin: nur Tag-Selektoren ───────────────── */

.intro-text {margin-bottom: 40px;}

/* facetting */
.modul-facetingform .facetingform__container {
    background-color: #fff !important;
}

/* Degug für korrigierte Listen und Tabellen */
/* Grundfarben als Variablen – bei Bedarf anpassen */
:root{
  --vs-col-alpha-paren:    rgba(255, 99, 132, .12);
  --vs-col-alpha-dot:      rgba(54, 162, 235, .12);
  --vs-col-paren-numeric:  rgba(255, 206, 86,  .12);
  --vs-col-nested-colon:   rgba(75, 192, 192, .12);
  --vs-col-split-ending:   rgba(153, 102, 255,.12);
  --vs-col-ul-normalized:  rgba(201, 203, 207,.12);

  --vs-col-table-colspan:  rgba(255, 159, 64,  .12);
  --vs-col-table-rowspan:  rgba(255, 99, 132, .12);
  --vs-col-table-headers:  rgba(54, 162, 235, .12);
  --vs-col-table-repaired: rgba(75, 192, 192, .12);

  --vs-border:             1px solid rgba(0,0,0,.15);
  --vs-border-strong:      1px dashed rgba(0,0,0,.35);
}

/* ===== LISTEN (Block) ===== */
.vs-list{ position: relative; }

/* a) a), b) … → alphabetisch mit Klammer */
.vs-list--alpha-parenthesis{
  background: var(--vs-col-alpha-paren);
  border-left: 4px solid rgba(255, 99, 132, .5);
  padding: .4rem .6rem;
}

/* a. a., b. … → alphabetisch mit Punkt */
.vs-list--alpha-dot{
  background: var(--vs-col-alpha-dot);
  border-left: 4px solid rgba(54, 162, 235, .5);
  padding: .4rem .6rem;
}

/* (1) (2) … aus Absatz konvertiert */
.vs-list--parenthesis-numeric{
  background: var(--vs-col-paren-numeric);
  border-left: 4px solid rgba(255, 206, 86, .6);
  padding: .4rem .6rem;
}

/* „…:“ gefolgt von direkt verschachtelter Liste */
.vs-list--nested-by-colon{
  background: var(--vs-col-nested-colon);
  border-left: 4px solid rgba(75, 192, 192, .6);
  padding: .4rem .6rem;
}

/* Letztes Listenelement endet auf „:“ */
.vs-list__item--ends-with-colon{
  outline: var(--vs-border-strong);
  background: rgba(75, 192, 192, .08);
}

/* Das nachträglich eingehängte Kind */
.vs-list__child{
  margin-top: .35rem;
  outline: var(--vs-border);
}

/* Am Ende gesplittete Liste (Rest in neuem Absatz) */
.vs-list--split-ending{
  background: var(--vs-col-split-ending);
  border-left: 4px solid rgba(153, 102, 255, .6);
  padding: .4rem .6rem;
}

/* Normierte ULs (list-style gesetzt) */
.vs-list--ul-normalized{
  background: var(--vs-col-ul-normalized);
  border-left: 4px solid rgba(201, 203, 207, .8);
  padding: .4rem .6rem;
}

/* ===== TABELLEN ===== */
.vs-table{
  border: var(--vs-border);
  border-collapse: collapse;
}
.vs-table th, .vs-table td{
  border: var(--vs-border);
  padding: .35rem .5rem;
}

/* Sammelflags (auf dem <table>) */
.vs-table--colspan-fixed   { box-shadow: inset 0 0 0 3px var(--vs-col-table-colspan); }
.vs-table--rowspan-merged  { outline: 2px dashed rgba(255, 99, 132, .5); }
.vs-table--headers-linked  { background: var(--vs-col-table-headers); }
.vs-table--repaired        { background-image: linear-gradient(45deg, rgba(0,0,0,.05) 25%, transparent 25%, transparent 50%, rgba(0,0,0,.05) 50%, rgba(0,0,0,.05) 75%, transparent 75%, transparent); background-size: 16px 16px; }

/* Zellen, die angefasst wurden */
.vs-table__cell--colspan-adjusted{
  background: var(--vs-col-table-colspan);
}
.vs-table__cell--rowspan-merged{
  background: var(--vs-col-table-rowspan);
}

/* ===== Druck: dezente Ränder, falls Farbe fehlt ===== */
@media print{
  .vs-list,
  .vs-table{ background: none !important; }
  .vs-list,
  .vs-table,
  .vs-list__item--ends-with-colon{ outline: 1px dotted #888; }
}


/* Pagination und doc-list-animation */
/* assets/custom.css
   Flex-Ausrichtung + neue Animations-Variante:
   - KEINE per-Item Height-Transitions mehr.
   - Container (#doclist) fährt in der Höhe, Items faden nur in.
*/

:root {
  --doclist-dur: 120ms;   /* bleibt ggf. für andere Komponenten */
  --doclist-stagger: 30ms;
  --doclist-shift: 8px;
}

/* Pagination + Button sauber nebeneinander */
.list-controls {
  display: flex;
  align-items: center;
  column-gap: 1rem;
  row-gap: .5rem;
  flex-wrap: wrap;
}
.list-controls .pagination { display: inline-flex; }
.list-controls .pagination > ul {
  display: inline-flex;
  align-items: stretch;
  margin: 0;
  padding: 0;
}

.list-controls .pagination a,
.list-controls .pagination span {
  align-items: center;
  justify-content: center;
  line-height: 1;
  text-decoration: none;
}

.list-controls .pagination a.is-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}
.list-controls .button {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  white-space: nowrap;
  padding-block: .55rem;
  padding-inline: 1rem;
}

.button.button--light {
	min-height: 40px;
	border: 1px solid #555555 !important;
}

.pill--filter.active {
    padding: 6px 11px;
}

/* Motion prefs */
@media (prefers-reduced-motion: reduce) {
  #doclist, #doclist li { transition: none !important; animation: none !important; }
}

/* Wir animieren NICHT mehr per-Item Höhe.
   Das Height-Transitioning des Containers wird komplett im JS gesetzt. */

/* Items: nur Opacity-Fade (Transition wird im JS gesetzt) */
#doclist li { will-change: opacity;  }





.doc-counter__visible {
  font-weight: bold;
}

/* List Ruler Items - Dokumenten-Liste auf Startseite */
.list--ruler > li > p:first-child {
  margin-bottom: 0;
  font-size: 0.85em;
  padding-top: 10px;
}

.list--ruler > li > h3.title {
  cursor: pointer;
  display: block;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.list--ruler > li > a.more {
  display: block;
  margin-top: 0.5rem;
}


/* Einrückung Überschriften-Nummerierungen - nur in Dokumenten */
.document-body h2,
.document-body h3,
.document-body h4,
.document-body h5,
.document-body h6 {
    display: flex;
    align-items: baseline;
  }

  .document-body .heading__prefix {
    flex-shrink: 0;
    width: var(--prefix-col-rem, 2rem);
    margin-left: calc(-1 * var(--prefix-col-rem, 2rem));
    text-align: right;
    padding-right: 0.5em;
    font-feature-settings: 'tnum' 1; /* tabular numbers für bessere Ausrichtung */
  }


/* Document styles */
.document-body ul,
.document-body ol {
    margin-top: 1em;
}
/* ==========================================================================
   Heading-Abstufungen für Dokumenten-Inhalte
   Überschreibt Berlin Design System mit höherer Spezifität
   
   Typografische Grundregeln:
   - Je größer die Schrift, desto kleiner der relative Zeilenabstand
   - WCAG 2.1 empfiehlt mindestens 1.5 für Fließtext
   - Headlines: 1.1 - 1.35 je nach Größe
   ========================================================================== */

/* H1 Dokument-Titel (liegt außerhalb von .document-body) */
#layout-grid__area--maincontent #document-title,
#layout-grid__area--maincontent main > h1,
h1#document-title {
  font-size: 1.4em !important;
  line-height: 1.2 !important;
}

/* H2 - Hauptabschnitte */
#layout-grid__area--maincontent .document-body h2,
#layout-grid__area--maincontent .document-body h2.title {
  font-size: 1.25em !important;
  line-height: 1.25 !important;
}

/* H3 - Unterabschnitte */
#layout-grid__area--maincontent .document-body h3,
#layout-grid__area--maincontent .document-body h3.title {
  font-size: 1.15em !important;
  line-height: 1.3 !important;
}

/* H4 - Unter-Unterabschnitte */
#layout-grid__area--maincontent .document-body h4,
#layout-grid__area--maincontent .document-body h4.title {
  font-size: 1.1em !important;
  line-height: 1.35 !important;
}

/* H5, H6 - wie Body, aber bold */
#layout-grid__area--maincontent .document-body h5,
#layout-grid__area--maincontent .document-body h5.title,
#layout-grid__area--maincontent .document-body h6,
#layout-grid__area--maincontent .document-body h6.title {
  font-size: 1em !important;
  line-height: 1.4 !important;
}

h3#weitere-informationen {
  margin-bottom:30px;
}

/* Version Comparison UI */

.version-comparison__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: flex-end;
}

.version-comparison__field {
  flex: 1 1 0;
  min-width: 0;
}

.version-comparison__button {
  flex: 0 0 auto;
}

.version-comparison__button .button {
  min-width: 180px;
  text-align: center;
}

#reset-comparison {
  padding-left: 3em;
  padding-right: 1rem;
}

/* Mobile: Untereinander */
@media (max-width: 767px) {
  .version-comparison__field,
  .version-comparison__button {
    flex: 1 1 100%;
  }
  
  .version-comparison__button .button {
    width: 100%;
  }
}

.version-comparison .button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.version-comparison .button--secondary {
  background: #666;
  color: white;
}

.version-comparison .button--secondary:hover:not(:disabled) {
  background: #444;
}

/* ===== Card-Layout: Flexbox für einheitliche Footer-Höhe ===== */
/* Gilt für ALLE .modul-card - Links sitzen immer unten */

/* Parent-Container müssen flex oder grid-items als flex behandeln */
.recent-updates-grid > article,
.card-grid > article {
  display: flex;
}

.modul-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.card__header {
  flex-shrink: 0;
}

.card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card__body > p:last-child {
  margin-top: auto;
}

.modul-card .card__header .title {
  font-size: 1.15em;
	overflow-wrap: break-word;
	width: -webkit-fill-available;
}

/* Card Hover Effect - nur Hintergrundfarbe aufhellen */

.modul-card {
  transition: background-color 0.2s ease;
}

.modul-card:hover {
  background-color: #f7f7f7;
}

/* ===== Accessibility: visually-hidden Elemente komplett ausblenden ===== */
.visually-hidden {
  display: none !important;
}

#searchForm,
.doc-counter-line {margin:0}

.pill--filter {margin-right: 10px;}



.doc-counter__visible {
  font-weight: bold;
}

/* ============================================================
   DIFF INTEGRATION STYLES
   ============================================================ */

/* Screen Reader Only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ============================================================
   SPINNER OVERLAY - Minimal (Corporate Design)
   ============================================================ */
.spinner-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* Wenn .spinner-overlay und .overlay--fullscreen nicht im Corporate Design sind: */
.overlay--fullscreen {
  background: rgba(0, 0, 0, 0.7);
}

/* ============================================================
   COMPARISON SUMMARY STYLES
   ============================================================ */

.comparison-summary {
  background: #f0f7ff;
  border: 2px solid #2196F3;
  border-radius: 0.5rem;
  padding: 1.5rem;
  margin-bottom: 2rem;
  outline: none;
}

.comparison-summary:focus {
  box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.3);
}

.comparison-summary h2 {
  margin: 0 0 1rem 0;
  font-size: 1.25rem;
  color: #1565C0;
}

.summary-stats {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
}



.stat-item {
  margin: 0 0.5rem;
}

.stat-separator {
  color: #999;
}

.summary-hint {
  margin: 0;
  font-size: 0.875rem;
  color: #666;
}

.summary-hint ins {
  background: #e6ffea;
  color: #007a00;
  padding: 0.125rem 0.25rem;
  border-radius: 0.2rem;
  text-decoration: none;
}

.summary-hint del {
  background: #ffeaea;
  color: #b30000;
  padding: 0.125rem 0.25rem;
  border-radius: 0.2rem;
  text-decoration: none;
}

ins {
display: inline-block;
border: 1px solid #ccc;
padding: 2px 4px;
margin: 2px;
background: #efe;
}

del {
display: inline-block;
border: 1px solid #ccc;
padding: 2px 4px;
margin: 2px;
background: #fee;
}

/* ============================================================
   PAGINATION DISABLED STATE - A11y Fix
   ============================================================
   Ersetzt aria-disabled auf <a> Tags (nicht erlaubt)
   mit .disabled Klasse (wird von JavaScript gesetzt)
*/

.pagination a.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
  color: #999;
}

.pagination a.disabled:hover {
  background: transparent;
  color: #999;
}

#content-header .breadcrumb ol > li a, #content-header .breadcrumb ol > li:last-child, #content-header .breadcrumb ol > li:last-child a {
    color: #000000 !important;
}

.homehaus,
#content-header a,
.pagination a {
  color: #000000 !important; /* WCAG AAA - Force über Berlin.de CSS */
}

#content-header > nav > ol > li:nth-child(1) > a {
  color: #000000 !important; /* WCAG AAA - Force über Berlin.de CSS */
}




/* ============================================================================
   Search Highlighting
   ========================================================================== */

mark.search-highlight,
.search-highlight {
  background-color: #e40422;
  color: #ffffff;
  padding: 0.125rem 0.25rem;
  border-radius: 2px;
  font-weight: inherit;
}


/* pa11y - Charts */
/* Achsenticks & Legende im Chart: ausreichend dunkler Text auf Weiß */
#pa11y-trends-chart text,
#pa11y-trends-chart .tick text {
  fill: #111;           /* hoher Kontrast */
}
#pa11y-trends-chart .legend text {
  fill: #111;
}


#pa11y-errors-list {
  margin-top: 1.5rem;
  font-size: 0.9rem;
}
#pa11y-errors-list h4 {
  margin-top: 1rem;
  border-bottom: 1px solid #ccc;
  font-size: 1rem;
}
#pa11y-errors-list h5 {
  margin: 0.5rem 0 0.25rem;
  font-size: 0.9rem;
  color: #333;
}
#pa11y-errors-list li {
  margin-left: 1rem;
  margin-bottom: 0.4rem;
}
#pa11y-errors-list code {
  background: #f8f8f8;
  padding: 2px 4px;
  border-radius: 3px;
}

.pa11y-tooltip {
  position: absolute;
  background: #fff;
  border: 1px solid #999;
  border-radius: 6px;
  padding: 6px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  font-size: 0.8rem;
  color: #111;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease-in-out;
  z-index: 9999;
}


/**
 * Ordered List Styles - BEM
 * 
 * Klassen für verschiedene Nummerierungsformate in <ol>-Listen.
 * Verwendung: <ol class="ol--alpha-paren">...</ol>
 */

/* ==========================================================================
   Basis-Reset für alle ol-Varianten
   ========================================================================== */

ol[class^="ol--"],
ol[class*=" ol--"] {
  list-style: none;
  padding-left: 1.1em;
  margin-left: 0;
  counter-reset: list-counter;
}

ol[class^="ol--"] > li,
ol[class*=" ol--"] > li {
  counter-increment: list-counter;
  position: relative;
  padding-left: 0;
  margin-left: 0;
  margin-bottom: 0.5em;
}

ol[class^="ol--"] > li::before,
ol[class*=" ol--"] > li::before {
  position: absolute;
  left: -1.2em;
  width: 1.2em;
}

/* ==========================================================================
   Kleinbuchstaben mit Klammer: a), b), c)
   ========================================================================== */

.ol--alpha-paren {
  counter-reset: list-counter;
}

.ol--alpha-paren > li::before {
  content: counter(list-counter, lower-alpha) ") ";
}

/* ==========================================================================
   Kleinbuchstaben mit Punkt: a., b., c.
   ========================================================================== */

.ol--alpha-dot {
  counter-reset: list-counter;
}

.ol--alpha-dot > li::before {
  content: counter(list-counter, lower-alpha) ". ";
}

/* ==========================================================================
   Kleinbuchstaben nur: a b c
   ========================================================================== */

.ol--alpha {
  counter-reset: list-counter;
}

.ol--alpha > li::before {
  content: counter(list-counter, lower-alpha) " ";
}

/* ==========================================================================
   Großbuchstaben mit Klammer: A), B), C)
   ========================================================================== */

.ol--alpha-upper-paren {
  counter-reset: list-counter;
}

.ol--alpha-upper-paren > li::before {
  content: counter(list-counter, upper-alpha) ") ";
}

/* ==========================================================================
   Großbuchstaben mit Punkt: A., B., C.
   ========================================================================== */

.ol--alpha-upper-dot {
  counter-reset: list-counter;
}

.ol--alpha-upper-dot > li::before {
  content: counter(list-counter, upper-alpha) ". ";
}

/* ==========================================================================
   Großbuchstaben in Klammern: (A), (B), (C)
   ========================================================================== */

.ol--alpha-upper-parens {
  counter-reset: list-counter;
}

.ol--alpha-upper-parens > li::before {
  content: "(" counter(list-counter, upper-alpha) ") ";
}

/* ==========================================================================
   Römisch klein: i, ii, iii, iv
   ========================================================================== */

.ol--roman {
  counter-reset: list-counter;
  padding-left: 2.5em; /* Etwas mehr Platz für römische Zahlen */
}

.ol--roman > li::before {
  content: counter(list-counter, upper-roman) ". ";
  left: -2.5em;
  width: 2.5em;
}

/* ==========================================================================
   Römisch groß: I, II, III, IV
   ========================================================================== */

.ol--roman-upper {
  counter-reset: list-counter;
  padding-left: 2.5em;
}

.ol--roman-upper > li::before {
  content: counter(list-counter, upper-roman) ". ";
  left: -2.5em;
  width: 2.5em;
}

/* ==========================================================================
   Zahlen mit Punkt: 1., 2., 3.
   ========================================================================== */

.ol--numeric-dot {
  counter-reset: list-counter;
}

.ol--numeric-dot > li::before {
  content: counter(list-counter) ". ";
}

/* ==========================================================================
   Zahlen mit Klammer: 1), 2), 3)
   ========================================================================== */

.ol--numeric-paren {
  counter-reset: list-counter;
}

.ol--numeric-paren > li::before {
  content: counter(list-counter) ") ";
}

/* ==========================================================================
   Zahlen in Klammern: (1), (2), (3)
   ========================================================================== */

.ol--numeric-parens {
  counter-reset: list-counter;
}

.ol--numeric-parens > li::before {
  content: "(" counter(list-counter) ") ";
}

/* ==========================================================================
   Zahlen mit Doppelpunkt: 1:, 2:, 3:
   ========================================================================== */

.ol--numeric-colon {
  counter-reset: list-counter;
}

.ol--numeric-colon > li::before {
  content: counter(list-counter) ": ";
}

/* ==========================================================================
   Zahlen nur: 1 2 3
   ========================================================================== */

.ol--numeric {
  counter-reset: list-counter;
}

.ol--numeric > li::before {
  content: counter(list-counter) " ";
}

/* ==========================================================================
   Doppelte Kleinbuchstaben mit Klammer: aa), bb), cc)
   Für verschachtelte Listen (z.B. unter a) kommt aa), bb), cc))
   ========================================================================== */

.ol--alpha-double-paren {
  counter-reset: list-counter;
  padding-left: 2em;
}

.ol--alpha-double-paren > li::before {
  /* CSS kann keine doppelten Buchstaben direkt generieren, 
     daher verwenden wir den gleichen Buchstaben zweimal */
  content: counter(list-counter, lower-alpha) counter(list-counter, lower-alpha) ") ";
  left: -2em;
  width: 2em;
}

/* ==========================================================================
   Doppelte Kleinbuchstaben mit Punkt: aa., bb., cc.
   ========================================================================== */

.ol--alpha-double-dot {
  counter-reset: list-counter;
  padding-left: 2em;
}

.ol--alpha-double-dot > li::before {
  content: counter(list-counter, lower-alpha) counter(list-counter, lower-alpha) ". ";
  left: -2em;
  width: 2em;
}

/* ==========================================================================
   Doppelte Großbuchstaben mit Klammer: AA), BB), CC)
   ========================================================================== */

.ol--alpha-double-upper-paren {
  counter-reset: list-counter;
  padding-left: 2em;
}

.ol--alpha-double-upper-paren > li::before {
  content: counter(list-counter, upper-alpha) counter(list-counter, upper-alpha) ") ";
  left: -2em;
  width: 2em;
}

/* ==========================================================================
   Start-Attribut Support
   Wenn <ol start="3"> verwendet wird, muss der Counter angepasst werden.
   Das passiert automatisch durch den Browser bei korrektem start-Attribut.
   ========================================================================== */

/* Für Listen die nicht bei 1/a/i starten - der Browser handhabt das 
   automatisch wenn das start-Attribut gesetzt ist */