/*
 * GRUNDGESTALTUNG DES AKKORDEONS
 *
 * ERZEUGT von scripts/grundgestaltung.py — nicht von Hand ändern.
 * Die Quelle ist templates/mvrhamburg/css/mvr.css.
 *
 * WOZU
 *
 * Damit das Akkordeon auf einer fremden Website nicht als schlichte
 * Liste erscheint. Es nimmt dort die Farben und Schriften des
 * jeweiligen Templates an (über die Bootstrap-Variablen, die Joomla
 * mitbringt) und fällt auf feste Werte zurück, wenn auch die fehlen.
 *
 * ⚠ WARUM @layer
 *
 * Auf DIESER Website darf sich nichts ändern. Eine Regel in einem
 * Layer verliert immer gegen eine Regel außerhalb — unabhängig von
 * Reihenfolge und Spezifität. Das Template gewinnt also weiterhin in
 * jedem Fall.
 *
 * Am 07.09.2026 im Browser gemessen, nicht angenommen.
 */

@layer mvr-grund {

  .mvr-knopf, .mvr-liste-kachel, .mvr-akkordeon-balken, .mvr-nav-link, .mvr-verweis, .mvr-toc-link { transition:transform .16s ease, background-color .16s ease, color .16s ease, border-color .16s ease }
  .mvr-knopf:hover, .mvr-liste-kachel:hover, .mvr-akkordeon-balken:hover, .mvr-nav-link:hover, .mvr-verweis:hover, .mvr-toc-link:hover { transform:translateY(-2px) }
@media (prefers-reduced-motion:reduce) {
    .mvr-knopf, .mvr-liste-kachel, .mvr-akkordeon-balken, .mvr-nav-link, .mvr-verweis, .mvr-toc-link { transition:none }
    .mvr-knopf:hover, .mvr-liste-kachel:hover, .mvr-akkordeon-balken:hover, .mvr-nav-link:hover, .mvr-verweis:hover, .mvr-toc-link:hover { transform:none }
}

  .mvr-nur-vorlesen { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0 }
  .mvr-inhalt { max-width:var(--mvr-inhalt, 1120px); margin:0 auto; padding-inline:0 }
  .mvr-leistungen { padding:0 var(--mvr-rand, 20px) 96px }
  .mvr-leistungen-kopf { display:flex; align-items:baseline; justify-content:space-between; gap:40px; border-top:1px solid var(--mvr-linie, var(--bs-border-color, #D0B798)); padding-top:40px; margin-bottom:36px }
  .mvr-leistungen-kopf h2 { margin:0; font:400 38px/1.2 var(--mvr-serif, var(--body-font-family, var(--bs-body-font-family, "Source Serif 4",Georgia,serif))); color:var(--mvr-text-stark, var(--template-special-color, var(--bs-emphasis-color, #1D3849))) }
  .mvr-leistungen-zahlen { font-size:15px; color:var(--mvr-text-leise, var(--body-color, var(--bs-secondary-color, #475F6F))) }
  .mvr-akkordeon { display:flex; flex-direction:column; gap:10px }
  .mvr-akkordeon-balken { min-height:68px; background:var(--mvr-flaeche-dunkel, var(--template-special-color, var(--bs-dark, #1D3849))); color:var(--mvr-schrift-auf-dunkel, var(--template-text-light, var(--bs-light, #FBEAD4))); padding:22px 28px; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:24px; list-style:none }
  .mvr-akkordeon-balken::-webkit-details-marker { display:none }
  .mvr-akkordeon-balken:hover { background:var(--mvr-flaeche-dunkel-2, var(--template-contrast, var(--bs-secondary, #324958))) }
  .mvr-akkordeon-nr { width:26px; height:26px; flex:none; display:flex; align-items:center; justify-content:center; border:1px solid var(--mvr-linie-dunkel, var(--bs-border-color, #475F6F)); font-size:14px; color:var(--mvr-schrift-auf-dunkel-2, var(--template-sidebar-font-color, var(--bs-light, #D0B798))); margin-right:18px }
  .mvr-akkordeon-titel { font-size:21px; line-height:1.3 }
  .mvr-akkordeon-anzahl { font-size:14px; letter-spacing:.08em; color:var(--mvr-schrift-auf-dunkel-2, var(--template-sidebar-font-color, var(--bs-light, #D0B798))) }
  .mvr-akkordeon-zeichen { width:16px; text-align:center; font-size:20px; color:var(--mvr-schrift-auf-dunkel-2, var(--template-sidebar-font-color, var(--bs-light, #D0B798))) }
  .mvr-akkordeon-zeichen::after { content:"+" }
  details[open] .mvr-akkordeon-zeichen::after { content:"\2013" }
  .mvr-akkordeon-fach { border:1px solid var(--mvr-linie, var(--bs-border-color, #D0B798)); border-top:0; padding:32px 28px 36px }
  .mvr-akkordeon-hinweis { font-size:14px; font-style:italic; color:var(--mvr-akzent, var(--link-color, var(--bs-link-color, #725229))); margin-bottom:24px }
  .mvr-liste { column-count:2; column-gap:56px; margin:0; padding:0; list-style:none }
  .mvr-liste-zeile { break-inside:avoid; padding:9px 0; display:flex; gap:10px; align-items:baseline; font-size:var(--mvr-lesen, 16px); line-height:1.45 }
  .mvr-liste-linie { flex:1; min-width:24px; border-bottom:1px dotted var(--mvr-zier, var(--bs-border-color, #AD906B)); transform:translateY(-5px) }
  .mvr-liste-auch { flex:none; display:flex; gap:4px }
  .mvr-liste-kachel { width:22px; height:22px; padding:0; box-sizing:border-box; display:flex; align-items:center; justify-content:center; flex:none; background:var(--mvr-grund-sand, var(--template-bg-light, var(--bs-tertiary-bg, #FBEAD4))); border:1px solid var(--mvr-linie, var(--bs-border-color, #D0B798)); font:400 var(--mvr-klein, 13px)/1 var(--mvr-sans, var(--body-font-family, var(--bs-body-font-family, "Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif))); color:var(--mvr-akzent, var(--link-color, var(--bs-link-color, #725229))); text-decoration:none; cursor:pointer }
  .mvr-liste-kachel:hover { background:var(--mvr-flaeche-dunkel, var(--template-special-color, var(--bs-dark, #1D3849))); border-color:var(--mvr-flaeche-dunkel, var(--template-special-color, var(--bs-dark, #1D3849))); color:var(--mvr-schrift-auf-dunkel, var(--template-text-light, var(--bs-light, #FBEAD4))) }
  .mvr-liste-kachel:focus-visible { outline:2px solid var(--mvr-akzent, var(--link-color, var(--bs-link-color, #725229))); outline-offset:2px }
  .mvr-leistungen-hinweis { margin:0 0 28px; font-size:var(--mvr-bedien, 17px); line-height:1.65; color:var(--mvr-text-leise, var(--body-color, var(--bs-secondary-color, #475F6F))); max-width:88ch }
  .mvr-leistungen-hinweis > :first-child { margin-top:0 }
  .mvr-leistungen-hinweis > :last-child { margin-bottom:0 }
  .mvr-leistungen-hinweis p { margin:0 0 .85em }
  .mvr-leistungen-hinweis ul, .mvr-leistungen-hinweis ol { margin:0 0 .85em; padding-left:1.4em }
  .mvr-leistungen-hinweis li { margin:0 0 .3em }
  .mvr-leistungen-hinweis a { color:var(--mvr-akzent, var(--link-color, var(--bs-link-color, #725229))) }
@media (max-width:1023px) {
    .mvr-leistungen-kopf h2 { font-size:32px }
}

@media (max-width:767px) {
    .mvr-leistungen { padding:8px 20px 44px }
    .mvr-leistungen-kopf { flex-direction:column; align-items:flex-start; gap:8px; padding-top:24px }
    .mvr-leistungen-kopf h2 { font-size:30px }
    .mvr-akkordeon { gap:8px }
    .mvr-akkordeon-balken { min-height:56px; padding:16px 18px; gap:12px }
    .mvr-akkordeon-nr { width:24px; height:24px; font-size:13px; margin-right:0 }
    .mvr-akkordeon-balken > span:first-child { min-width:0 }
    .mvr-akkordeon-titel { font-size:17px; overflow-wrap:anywhere }
    .mvr-akkordeon-anzahl { font-size:13px }
    .mvr-akkordeon-anzahl span { display:none }
    .mvr-akkordeon-fach { padding:20px 18px 24px }
    .mvr-liste { column-count:1 }
    .mvr-liste-zeile { display:block; padding:10px 0; border-bottom:1px solid var(--mvr-linie-leise, var(--bs-border-color-translucent, #FBEAD4)) }
    .mvr-liste-linie { display:none }
    .mvr-liste-auch { display:flex; justify-content:flex-end; margin-top:1px; margin-right:-6px }
    .mvr-liste-kachel { width:44px; height:44px; background:none; border:0 }
    .mvr-liste-kachel span { width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:var(--mvr-grund-sand, var(--template-bg-light, var(--bs-tertiary-bg, #FBEAD4))); border:1px solid var(--mvr-linie, var(--bs-border-color, #D0B798)); font-size:14px }
    .mvr-liste-kachel:hover { background:none }
    .mvr-liste-kachel:hover span { background:var(--mvr-flaeche-dunkel, var(--template-special-color, var(--bs-dark, #1D3849))); border-color:var(--mvr-flaeche-dunkel, var(--template-special-color, var(--bs-dark, #1D3849))); color:var(--mvr-schrift-auf-dunkel, var(--template-text-light, var(--bs-light, #FBEAD4))) }
    .mvr-leistungen-hinweis { font-size:16px; line-height:1.6; margin-bottom:22px }
}

@media print {
    .mvr-buehne-titel, .mvr-kontakt-titel, .mvr-akkordeon-titel, .mvr-akkordeon-nr, .mvr-akkordeon-anzahl { color:#000 }
    .mvr-akkordeon-balken { background:#fff; color:#000; border-bottom:1px solid #000 }
    .mvr-akkordeon-fach { display:block !important; border:0; padding-inline:0 }
    .mvr-liste { column-count:2 }
    .mvr-knopf, .mvr-akkordeon-zeichen { display:none }
}

  .mvr-akkordeon-fach { border-color: #8997A1; background: #FFFFFF }
  /* ⚠ KEINE FLAECHE ALS VORGABE — 10.09.2026.
     Hier stand `background:#E9EEF1`. Damit hatte jedes
     Akkordeon eine graue Flaeche, die sich ueber die
     Oberflaeche nicht abstellen liess: Wer das Feld in der
     Ansicht leerte, bekam wieder diese Vorgabe.
     Wer eine Flaeche will, traegt sie in der Ansicht ein.
     Der Abstand bleibt — er ist Abstand, keine Farbe. */
  .mvr-leistungen { padding-top:56px }
  .mvr-leistungen-kopf { border-top:0; padding-top:0 }
  .mvr-akkordeon { gap: 18px }
  .mvr-akkordeon details, .mvr-akkordeon > details { box-shadow: 14px 10px 28px -8px rgba(29, 56, 73, .32),
              26px 20px 54px -16px rgba(29, 56, 73, .22) }
  .mvr-akkordeon-titel { margin-right: auto }
  .mvr-akkordeon-anzahl { text-align: right; min-width: 8.5em; margin-right: 18px }
@media (max-width: 900px) {
    .mvr-akkordeon { gap: 12px }
    .mvr-akkordeon-anzahl { min-width: 0; margin-right: 10px }
    .mvr-akkordeon details { box-shadow: 5px 4px 10px -4px rgba(29, 56, 73, .26) }
}

  .mvr-akkordeon-balken { background: linear-gradient(152deg, #314957 0%, #1D3849 62%); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14),
              inset -1px -1px 0 rgba(0, 0, 0, .20) }
  .mvr-akkordeon-balken:hover { background: linear-gradient(152deg, #3A5464 0%, #253F52 62%) }
  .mvr-liste { column-count: auto; display: grid; grid-auto-flow: column; grid-template-rows: repeat(var(--reihen, 10), auto); grid-template-columns: 1fr 1fr; column-gap: 56px }
  .mvr-erklaer-huelle { position: relative; flex: none; display: flex }
  .mvr-erklaer-marke { width: 18px; height: 18px; padding: 0; flex: none; border: 0; background: none; display: flex; align-items: center; justify-content: center; font: 400 14px/1 var(--mvr-serif, var(--body-font-family, var(--bs-body-font-family, "Source Serif 4",Georgia,serif))); font-style: italic; color: var(--mvr-zier, var(--bs-border-color, #AD906B)); cursor: default }
  .mvr-erklaer-marke--aktiv { cursor: help }
  .mvr-erklaer-marke--aktiv:hover, .mvr-erklaer-marke--aktiv:focus-visible { color: var(--mvr-akzent, var(--link-color, var(--bs-link-color, #725229))); outline: none }
  .mvr-erklaer-fenster { position: absolute; right: -4px; bottom: calc(100% + 8px); z-index: 30; width: min(400px, 78vw); padding: 18px 20px 16px; text-align: left; background: #FFFFFF; border: 1px solid #8997A1; box-shadow: 10px 8px 24px -8px rgba(29, 56, 73, .36); font: 400 14px/1.55 var(--mvr-sans, var(--body-font-family, var(--bs-body-font-family, "Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif))); color: var(--mvr-text, var(--body-color, var(--bs-body-color, #324958))); opacity: 0; visibility: hidden; transition: opacity .16s ease, visibility .16s }
  .mvr-erklaer-fenster > b { display: block; margin-bottom: 8px; font-weight: 600; color: var(--mvr-text-stark, var(--template-special-color, var(--bs-emphasis-color, #1D3849))); font-size: 15px }
  .mvr-erklaer-frage { display: block; margin: 0 0 10px; font: 400 var(--mvr-lesen, 16px)/1.45 var(--mvr-serif, var(--body-font-family, var(--bs-body-font-family, "Source Serif 4",Georgia,serif))); font-style: italic; color: var(--mvr-akzent, var(--link-color, var(--bs-link-color, #725229))) }
  .mvr-erklaer-text { display: block }
  .mvr-erklaer-titel { display: block; margin: 14px 0 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--mvr-text-leise, var(--body-color, var(--bs-secondary-color, #475F6F))) }
  .mvr-erklaer-abgrenzung { display: block; margin-bottom: 5px; font-size: var(--mvr-klein, 13px); line-height: 1.45 }
  .mvr-erklaer-abgrenzung b { font-weight: 600; color: var(--mvr-text-stark, var(--template-special-color, var(--bs-emphasis-color, #1D3849))); margin-right: 6px }
  .mvr-erklaer-fehlt { display: block; font-style: italic; color: #B0574B }
  .mvr-erklaer-zu { display: none }
@media (hover: hover) {
    .mvr-erklaer-marke--aktiv:hover + .mvr-erklaer-fenster, .mvr-erklaer-marke--aktiv:focus-visible + .mvr-erklaer-fenster, .mvr-erklaer-fenster:hover { opacity: 1; visibility: visible }
}

@media (hover: none) {
    .mvr-erklaer-huelle.offen .mvr-erklaer-fenster { opacity: 1; visibility: visible }
    .mvr-erklaer-zu { display: block; margin: 14px 0 0 auto; padding: 9px 15px; background: var(--mvr-flaeche-dunkel, var(--template-special-color, var(--bs-dark, #1D3849))); color: var(--mvr-schrift-auf-dunkel, var(--template-text-light, var(--bs-light, #FBEAD4))); border: 0; font: 400 13px/1 var(--mvr-sans, var(--body-font-family, var(--bs-body-font-family, "Source Sans 3","Helvetica Neue",Helvetica,Arial,sans-serif))); cursor: pointer }
}

  body.mvr-verwaltung .mvr-erklaer-huelle[data-leer] .mvr-erklaer-marke { color: #B0574B; cursor: help }
@media (max-width: 900px) {
    .mvr-liste { display: block; column-count: 1 }
    .mvr-erklaer-fenster { width: min(400px, 86vw) }
}

  .mvr-erklaer-marke { width: 24px; height: 24px; font-size: var(--mvr-bedien, 17px); color: var(--mvr-akzent, var(--link-color, var(--bs-link-color, #725229))); border-radius: 50%; transition: color .18s ease, background-color .18s ease, transform .18s ease }
  .mvr-erklaer-marke--aktiv:hover, .mvr-erklaer-marke--aktiv:focus-visible { color: var(--mvr-schrift-auf-dunkel, var(--template-text-light, var(--bs-light, #FBEAD4))); background-color: var(--mvr-flaeche-dunkel, var(--template-special-color, var(--bs-dark, #1D3849))); transform: scale(1.16) }
@media (prefers-reduced-motion: reduce) {
    .mvr-erklaer-marke { transition: color .18s ease, background-color .18s ease }
    .mvr-erklaer-marke--aktiv:hover, .mvr-erklaer-marke--aktiv:focus-visible { transform: none }
}

  .mvr-liste-zeile { padding: 7px 0 }
  .mvr-erklaer-marke { border: 1px solid var(--mvr-linie, var(--bs-border-color, #D0B798)); background-color: transparent; transform: none }
@media (hover: hover) {
    .mvr-erklaer-marke--aktiv:hover, .mvr-erklaer-marke--aktiv:focus-visible { background-color: var(--mvr-flaeche-dunkel, var(--template-special-color, var(--bs-dark, #1D3849))); border-color: var(--mvr-flaeche-dunkel, var(--template-special-color, var(--bs-dark, #1D3849))); color: var(--mvr-schrift-auf-dunkel, var(--template-text-light, var(--bs-light, #FBEAD4))); transform: none }
    body.mvr-verwaltung .mvr-erklaer-huelle[data-leer] .mvr-erklaer-marke:hover, body.mvr-verwaltung .mvr-erklaer-huelle[data-leer] .mvr-erklaer-marke:focus-visible { background-color: var(--mvr-akzent, var(--link-color, var(--bs-link-color, #725229))); border-color: var(--mvr-akzent, var(--link-color, var(--bs-link-color, #725229))); color: var(--mvr-knopf-text, var(--template-text-light, var(--bs-light, #FBEAD4))) }
}

  body.mvr-verwaltung .mvr-erklaer-huelle[data-leer] .mvr-erklaer-marke { color: var(--mvr-akzent, var(--link-color, var(--bs-link-color, #725229))); cursor: help }
  .mvr-erklaer-fenster[data-frei] { position: fixed; right: auto; bottom: auto; z-index: 120; overflow-y: auto; overscroll-behavior: contain; max-width: calc(100vw - 20px) }

}