/* =========================================================
   SV Laufen – user.css (clean, stabil, Joomla 6)
   ========================================================= */

/* ---------- Tokens / Grundlayout ---------- */
:root{
  /* Rot (kommt aus Template-Parameter brandColor; fallback: Logo-Rot) */
  --svl-red: var(--brandColor, #FA0202);

  --svl-dark: #0f172a;
  --svl-muted: rgba(15,23,42,.72);

  --svl-bg: #f6f7f9;
  --svl-card: #ffffff;

  --svl-radius: 16px;
  --svl-radius-sm: 12px;

  --svl-shadow-soft: 0 14px 40px rgba(15,23,42,.12);
  --svl-shadow-float: 0 18px 55px rgba(15,23,42,.18);
  --svl-shadow-card: 0 10px 30px rgba(0,0,0,.07);
}

body{
  background: var(--svl-bg);
}

/* Frontend-Edit-Links ausblenden */
a.jmodedit,
.btn.jmodedit,
.jmodedit,
.edit-icon,
.joomla-edit-icon,
.joomla-edit-module,
.module-edit,
.module-edit-link{
  display:none !important;
}

/* ---------- Topbar ---------- */
.svl-topbar{
  background: var(--svl-red);
  color:#fff;
}
.svl-topbar a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
}
.svl-topbar a:hover{ text-decoration: underline; }

/* =========================================================
   HEADER (Logo links, Menü rechts)
   ========================================================= */
.svl-header{
  background:#fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

.svl-header .svl-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 1.25rem;
  padding: 14px 0;
}

.svl-header-left{ flex:0 0 auto; }
.svl-header-right{ flex:1 1 auto; display:flex; justify-content:flex-end; align-items:center; gap: 1rem; }

.svl-header-left img{
  height: 58px;
  width:auto;
  display:block;
}

/* =========================================================
   NAV – Desktop (wie Referenz: clean, keine Pills, kein rotes Quadrat)
   ========================================================= */

/* Desktop: Collapse immer sichtbar */
@media (min-width: 992px){
  #svlNav{
    display:block !important;
  }
}

/* Mobile: Collapse normal (Bootstrap steuert) */
.svl-nav-collapse{
  align-items:center;
}

/* UL Reset */
.svl-nav .mod-menu,
.svl-nav .mod-menu ul{
  list-style:none;
  margin:0;
  padding:0;
}

/* Top Level UL */
.svl-nav .mod-menu{
  display:flex;
  align-items:center;
  gap: 1.6rem;               /* Luft wie Screenshot */
  flex-wrap:wrap;
}

/* LI */
.svl-nav .mod-menu > li{
  position:relative;
}

/* Top Level Link – Basis (wichtig: überall gleiche Stärke, Kalender wird nicht “random fett”) */
.svl-nav .mod-menu > li > a{
  display:inline-flex;
  align-items:center;
  gap:.35rem;

  padding: .4rem 0;
  text-decoration:none;

  text-transform: uppercase;
  letter-spacing: .10em;

  font-weight: 600 !important; /* fix gegen “Kalender fett” */
  font-size: .92rem;

  color: var(--svl-dark);
  background: transparent !important;

  position:relative;
  transition: color .18s ease;
}

/* Falls Joomla im Link ein <span> oder <strong> nutzt -> nicht fett machen */
.svl-nav .mod-menu > li > a *,
.svl-nav .mod-menu > li > a strong{
  font-weight: inherit !important;
}

/* Underline Animation */
.svl-nav .mod-menu > li > a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-10px;
  width:0;
  height:2px;
  background: var(--svl-red);
  border-radius: 99px;
  transition: width .18s ease;
  opacity: .95;
}

.svl-nav .mod-menu > li > a:hover{
  color: var(--svl-red);
}
.svl-nav .mod-menu > li > a:hover::after{
  width:100%;
}

/* Active (nur wenn aktuelle Seite) – dezent */
.svl-nav .mod-menu > li.active > a,
.svl-nav .mod-menu > li.current > a,
.svl-nav .mod-menu > li > a[aria-current="page"]{
  color: var(--svl-red);
  font-weight: 700 !important;
}
.svl-nav .mod-menu > li.active > a::after,
.svl-nav .mod-menu > li.current > a::after{
  width:100%;
}

/* Klick-Highlight / rotes Quadrat verhindern */
.svl-nav .mod-menu a:active,
.svl-nav .mod-menu a:focus{
  background: transparent !important;
}
.svl-nav .mod-menu a:focus-visible{
  outline: 2px solid color-mix(in srgb, var(--svl-red) 35%, transparent);
  outline-offset: 4px;
  border-radius: 10px;
}

/* Parent Caret (Top Level) */
.svl-nav .mod-menu > li.parent > a::before{
  content:"▾";
  font-size: .85em;
  line-height: 1;
  opacity: .75;
  margin-left:.35rem;
  transform: translateY(-1px);
}

/* =========================================================
   DROPDOWNS – Hover (Desktop) + Flyout Submenu
   ========================================================= */

/* Submenu Container (1. Ebene) */
.svl-nav .mod-menu > li > ul{
  position:absolute;
  top: calc(100% + 14px);
  left: -14px;

  min-width: 260px;
  background:#fff;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--svl-radius);
  box-shadow: var(--svl-shadow-soft);

  padding: .55rem;
  z-index: 2000;

  opacity:0;
  visibility:hidden;
  transform: translateY(8px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

/* Hover-Bridge, damit Dropdown nicht „abreißt“ */
.svl-nav .mod-menu > li > ul::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-14px;
  height:14px;
}

/* Öffnen: Hover + Tastatur */
@media (min-width: 992px){
  .svl-nav .mod-menu > li:hover > ul,
  .svl-nav .mod-menu > li:focus-within > ul{
    opacity:1;
    visibility:visible;
    transform: translateY(0);
  }
}

/* Dropdown Links */
.svl-nav .mod-menu ul > li{
  position:relative;
}

.svl-nav .mod-menu ul > li > a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;

  padding: .62rem .75rem;
  border-radius: var(--svl-radius-sm);

  text-decoration:none;
  font-weight: 600;
  color: var(--svl-dark);

  background: transparent;
  transition: background .14s ease, transform .14s ease, color .14s ease;
}

/* Hover Dropdown */
.svl-nav .mod-menu ul > li > a:hover{
  background: color-mix(in srgb, var(--svl-red) 9%, transparent);
  color: var(--svl-red);
  transform: translateX(2px);
}

/* Active in Dropdown */
.svl-nav .mod-menu ul > li.active > a,
.svl-nav .mod-menu ul > li.current > a{
  background: color-mix(in srgb, var(--svl-red) 12%, transparent);
  color: var(--svl-red);
  font-weight: 700;
}

/* “Hat Untermenü” Pfeil rechts (fix für „Jugendabteilung“ etc. sauber) */
.svl-nav .mod-menu ul > li.parent > a{
  padding-right: 2.2rem; /* Platz für Pfeil */
}
.svl-nav .mod-menu ul > li.parent > a::after{
  content:"›";
  position:absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .55;
  font-size: 1.05rem;
}

/* Flyout (2. Ebene) */
.svl-nav .mod-menu ul ul{
  position:absolute;
  top: 0;
  left: calc(100% + 10px);

  min-width: 260px;
  background:#fff;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--svl-radius);
  box-shadow: var(--svl-shadow-float);

  padding: .55rem;
  z-index: 2100;

  opacity:0;
  visibility:hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
}

/* Flyout öffnen wenn man auf Parent im Dropdown hover */
@media (min-width: 992px){
  .svl-nav .mod-menu ul > li:hover > ul,
  .svl-nav .mod-menu ul > li:focus-within > ul{
    opacity:1;
    visibility:visible;
    transform: translateY(0);
  }
}

/* =========================================================
   BURGER / MOBILE NAV – sauber & klickbar
   ========================================================= */
.svl-burger{
  display:none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
  box-shadow: 0 10px 26px rgba(15,23,42,.08);
  padding: 10px;
  cursor:pointer;
}
.svl-burger span{
  display:block;
  height: 2px;
  width: 100%;
  background: var(--svl-dark);
  border-radius: 99px;
  margin: 6px 0;
}

@media (max-width: 991.98px){
  .svl-burger{ display:inline-flex; flex-direction:column; justify-content:center; }

  /* Mobile Panel */
  #svlNav{
    position:absolute;
    left: 0;
    right: 0;
    top: 100%;
    background:#fff;
    border-top: 1px solid rgba(0,0,0,.06);
    box-shadow: var(--svl-shadow-float);
    padding: 1rem;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  /* Mobile Menü untereinander */
  .svl-nav .mod-menu{
    width:100%;
    flex-direction:column;
    align-items:stretch;
    gap:.35rem;
  }

  .svl-nav .mod-menu > li > a{
    padding: .85rem .95rem;
    border-radius: 12px;
    background: rgba(0,0,0,.03) !important;
  }
  .svl-nav .mod-menu > li > a::after{ display:none; } /* underline aus */

  /* Mobile Submenus: simpel als Block unterhalb */
  .svl-nav .mod-menu > li > ul,
  .svl-nav .mod-menu ul ul{
    position: static;
    min-width: 0;
    border: 0;
    box-shadow: none;
    padding: .15rem 0 0 0;
    margin: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none; /* standard zu */
  }

  /* Öffnen per focus-within (Touch: tip -> Fokus) */
  .svl-nav .mod-menu li:focus-within > ul{
    display: block;
  }

  /* Mobile Dropdown links */
  .svl-nav .mod-menu ul > li > a{
    padding: .7rem .95rem;
    border-radius: 10px;
  }

  /* Pfeile im Mobile nicht absolut */
  .svl-nav .mod-menu ul > li.parent > a::after{
    position: static;
    transform: none;
    opacity: .6;
    margin-left: .35rem;
  }
}

/* =========================================================
   HERO (Banner) Full Width
   ========================================================= */
.svl-hero{
  margin:0;
  width:100%;
}
.svl-hero img,
.svl-hero .svl-hero-media img{
  width:100%;
  height: clamp(360px, 45vw, 640px);
  object-fit: cover;
  object-position: center 40%;
  display:block;
}

/* =========================================================
   MAIN / Blog Cards (2 / 2 / 2)
   ========================================================= */
.svl-main{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* 2 Spalten Desktop, 1 Spalte Mobile */
.blog-items,
.blog .blog-items,
.blog-featured .blog-items,
.com-content-category-blog__items,
.com-content-featured-blog__items{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin:0;
  padding:0;
}

@media (max-width: 992px){
  .blog-items,
  .blog .blog-items,
  .blog-featured .blog-items,
  .com-content-category-blog__items,
  .com-content-featured-blog__items{
    grid-template-columns: 1fr;
  }
}

/* Karte */
.blog-item,
.blog .item,
.blog-featured .item,
.com-content-category-blog__item,
.com-content-featured-blog__item{
  background: var(--svl-card);
  border-radius: var(--svl-radius);
  overflow:hidden;
  box-shadow: var(--svl-shadow-card);
  border: 1px solid rgba(0,0,0,.06);
}

/* Bild oben */
.blog-item .item-image,
.blog .item-image,
.com-content-category-blog__item .item-image,
.com-content-featured-blog__item .item-image{
  margin:0;
}
.blog-item .item-image img,
.blog .item-image img,
.com-content-category-blog__item .item-image img,
.com-content-featured-blog__item .item-image img{
  width:100%;
  height: 210px;
  object-fit: cover;
  display:block;
}
@media (max-width: 992px){
  .blog-item .item-image img,
  .blog .item-image img,
  .com-content-category-blog__item .item-image img,
  .com-content-featured-blog__item .item-image img{
    height: 240px;
  }
}

/* Inhalt */
.blog-item .item-content,
.blog .item-content,
.com-content-category-blog__item .item-content,
.com-content-featured-blog__item .item-content{
  padding: 1rem 1.15rem 1.15rem 1.15rem;
}

/* Titel */
.blog-item h2,
.blog-item h3,
.blog h2,
.blog h3{
  margin: 0 0 .35rem 0;
  font-weight: 900;
  letter-spacing: .2px;
}
.blog-item h2 a,
.blog-item h3 a,
.blog h2 a,
.blog h3 a{
  color: var(--svl-dark);
  text-decoration:none;
}
.blog-item h2 a:hover,
.blog-item h3 a:hover,
.blog h2 a:hover,
.blog h3 a:hover{
  color: var(--svl-red);
}

/* Meta */
.article-info{
  font-size: .85rem;
  opacity: .75;
  margin-bottom: .5rem;
}

/* Weiterlesen */
.readmore a,
.btn.readmore{
  display:inline-block;
  margin-top: .6rem;
  padding: .6rem 1.05rem;
  border-radius: 999px;
  background: var(--svl-red);
  color:#fff !important;
  text-decoration:none;
  font-weight: 900;
  letter-spacing: .2px;
  transition: filter .15s ease;
}
.readmore a:hover,
.btn.readmore:hover{
  filter: brightness(.92);
}

.pagination{
  margin-top: 1.25rem;
  justify-content:center;
}

/* =========================================================
   Sponsoren / content-bottom Full Width
   ========================================================= */
.svl-content-bottom{
  width: 100%;
}
.svl-sponsor-wide,
.svl-sponsor-wide *{
  text-align:center;
}
.svl-sponsor-wide img{
  max-height: 95px;
  width:auto;
  margin: 0 1.2rem;
  object-fit: contain;
}

/* =========================================================
   Footer
   ========================================================= */
.svl-footer{
  background: var(--svl-red);
  color:#fff;
  padding: 2.5rem 0;
  margin-top: 2rem;
}
.svl-footer a{
  color:#fff;
  text-decoration:none;
}
.svl-footer a:hover{
  text-decoration:underline;
}

/* Footer-Menüs untereinander */
.svl-footer ul,
.svl-footer ul.menu,
.svl-footer ul.mod-menu{
  list-style: none;
  margin: 0;
  padding: 0;
}
.svl-footer ul li{
  margin: 0 0 .5rem 0;
  padding: 0;
}
.svl-footer ul.menu,
.svl-footer ul.mod-menu{
  display: block !important;
}
.svl-footer ul.menu li,
.svl-footer ul.mod-menu li{
  display: block !important;
}

/* Abstand zwischen Footer-Modulen (z.B. WEITERES / SPONSORING) */
.svl-footer .moduletable{
  margin-bottom: 2.25rem;
}
.svl-footer .moduletable:last-child{
  margin-bottom: 0;
}

/* Copyright */
.svl-copyright{
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.25);
  font-size: .9rem;
  opacity: .95;
}
.svl-copyright-sep{
  margin: 0 .5rem;
  opacity: .9;
}

/* =========================================================
   Module Titles – zentriert + doppelte Linie in SVL-Rot
   ========================================================= */
.moduletable > h3,
.module-title,
.mod-title,
h3.mod-title,
h3.module-title{
  text-align:center !important;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  font-size: 1.05rem;
  margin: 0 0 1rem 0;
  position: relative;
  color: var(--svl-dark);
  padding-bottom: .9rem;
}
.moduletable > h3::before,
.moduletable > h3::after,
.module-title::before,
.module-title::after,
.mod-title::before,
.mod-title::after{
  content:"";
  position:absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 84px;
  height: 2px;
  background: var(--svl-red);
  border-radius: 99px;
  opacity: .95;
}
.moduletable > h3::before,
.module-title::before,
.mod-title::before{
  bottom: .35rem;
}
.moduletable > h3::after,
.module-title::after,
.mod-title::after{
  bottom: 0;
  width: 54px;
  opacity: .85;
}

/* =========================================================
   Optional: Container etwas breiter
   ========================================================= */
@media (min-width: 1200px){
  .svl-main.container,
  .svl-footer .container,
  .svl-topbar .container,
  .svl-header .container{
    max-width: 1320px;
  }
}

/* =========================================================
   Legacy Module Styles (aus alter Seite) – komplett drin
   ========================================================= */

/* --- Chronik --- */
.sv-chronik { max-width: 1100px; margin: 0 auto; padding: 10px 15px }
.sv-chronik-title { margin: 0 0 18px; font-weight: 700; line-height: 1.2 }
.sv-chronik-text p { margin: 0 0 12px; line-height: 1.7 }
.sv-chronik-hero,.sv-chronik-img { margin: 18px 0; text-align: center }
.sv-chronik-hero img,.sv-chronik-img img { max-width: 100%; height: auto; border-radius: 10px }
.sv-chronik-hero figcaption,.sv-chronik-img figcaption { margin-top: 8px; opacity: .85; font-style: italic }
.sv-chronik-section { margin-top: 28px; font-weight: 700 }
.sv-chronik-list { margin: 10px 0 0 0; padding-left: 18px; line-height: 1.7 }
.sv-chronik-divider { margin: 28px 0; opacity: .35 }

.sv-timeline { position: relative; padding-left: 22px }
.sv-timeline:before { content: ""; position: absolute; left: 8px; top: 0; bottom: 0; width: 2px; opacity: .25; background: currentColor }

.sv-event { position: relative; display: grid; grid-template-columns: 90px 1fr; gap: 14px; padding: 16px 0 }
.sv-event:before { content: ""; position: absolute; left: 2px; top: 26px; width: 14px; height: 14px; border-radius: 50%; background: currentColor; opacity: .35 }
.sv-year { font-weight: 800; padding: 6px 10px; border-radius: 999px; display: inline-block; text-align: center; opacity: .95; background: rgba(0,0,0,.06) }

.sv-event-body h4 { margin: 0 0 6px; font-weight: 800 }
.sv-event-body p { margin: 0 0 10px; line-height: 1.7 }

.sv-event-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; margin-top: 10px }
.sv-event-grid img { width: 100%; height: auto; border-radius: 10px }
.sv-event-grid figcaption { margin-top: 6px; opacity: .85; font-size: .95em }

@media (max-width: 768px) {
  .sv-event { grid-template-columns:1fr }
  .sv-timeline { padding-left: 16px }
  .sv-event-grid { grid-template-columns: 1fr }
  .sv-year { width: fit-content }
}

/* --- Membership --- */
.sv-membership { max-width: 1100px; margin: 0 auto; padding: 10px 15px }
.sv-membership-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; align-items: start }
.sv-membership-grid--bottom { margin-top: 18px; grid-template-columns: 1fr 1fr }

.sv-card { background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); border-radius: 14px; padding: 18px; box-shadow: 0 6px 18px rgba(0,0,0,.06) }
.sv-card h3 { margin: 0 0 10px; font-weight: 800 }

.sv-note { margin: 0 0 12px; padding: 10px 12px; border-left: 4px solid rgba(0,0,0,.25); background: rgba(0,0,0,.03); border-radius: 10px }

.sv-form-preview { position: relative; display: block; border-radius: 12px; overflow: hidden; border: 1px solid rgba(0,0,0,.10); margin: 10px 0 12px }
.sv-form-preview img { width: 100%; height: auto; display: block }

.sv-form-overlay { position: absolute; inset: auto 12px 12px 12px; padding: 10px 12px; border-radius: 10px; background: rgba(0,0,0,.65); color: #fff; font-weight: 700; text-align: center; opacity: .95 }

.sv-btn { display: inline-block; padding: 10px 14px; border-radius: 999px; background: rgba(0,0,0,.85); color: #fff!important; font-weight: 800; text-decoration: none!important }
.sv-btn:hover { opacity: .9 }

.sv-membership-types { display: grid; gap: 12px; margin-top: 12px }
.sv-type { padding: 12px 12px; border-radius: 12px; background: rgba(255,255,255,.65); border: 1px solid rgba(0,0,0,.06) }
.sv-type h4 { margin: 0 0 6px; font-weight: 800 }

.sv-address { line-height: 1.7; margin: 0 0 10px }
.sv-mail { margin: 0; display: flex; align-items: center; gap: 8px }

.sv-fees { display: grid; gap: 12px }
.sv-fee-block { padding: 12px; border-radius: 12px; background: rgba(255,255,255,.65); border: 1px solid rgba(0,0,0,.06) }
.sv-fee-title { font-weight: 900; margin-bottom: 8px; opacity: .9 }

.sv-fee-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(0,0,0,.08) }
.sv-fee-row:first-child { border-top: none; padding-top: 0 }
.sv-fee-row--single { border-top: none; padding: 10px 0 }

@media (max-width: 900px) {
  .sv-membership-grid,.sv-membership-grid--bottom { grid-template-columns:1fr }
}

/* --- Team --- */
.sv-team { max-width: 1100px; margin: 0 auto; padding: 10px 15px }
.sv-team img { max-width: 100%; height: auto }

.sv-team-hero { margin: 0 0 18px; border-radius: 16px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); background: rgba(0,0,0,.03) }
.sv-team-hero img { display: block; width: 100%; height: auto }

.sv-team-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px }
.sv-team-card h3 { margin: 0 0 8px; font-weight: 800 }
.sv-team-name { margin: 0; font-size: 1.15em; font-weight: 700 }

.sv-training { margin-top: 14px; text-align: center }
.sv-training-time { margin: 0 0 6px; font-weight: 800; font-size: 1.1em }
.sv-training-note { margin: 0; opacity: .85 }

@media (max-width: 768px) { .sv-team-grid { grid-template-columns:1fr } }

.sv-training-list { margin-top: 10px; display: grid; gap: 10px; text-align: left }
.sv-training-row { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.65); border: 1px solid rgba(0,0,0,.06) }
.sv-training-day { font-weight: 900; white-space: nowrap }
.sv-training-info { text-align: right; font-weight: 600; opacity: .95 }

@media (max-width: 600px) {
  .sv-training-row { flex-direction:column; align-items: flex-start }
  .sv-training-info { text-align: left }
}

.sv-contact { margin: 10px 0 0; display: flex; align-items: center; gap: 8px }
.sv-contact img { display: block }

/* --- Legal --- */
.sv-legal { max-width: 1100px; margin: 0 auto; padding: 10px 15px }
.sv-legal-hero { margin: 0 0 14px }
.sv-legal-title { margin: 0 0 6px; font-weight: 900 }
.sv-legal-lead { margin: 0; opacity: .85; line-height: 1.7 }

.sv-legal-toc ul { margin: 0; padding-left: 18px; line-height: 1.8 }
.sv-legal-section h2 { margin-top: 0 }
.sv-legal-divider { margin: 18px 0; opacity: .25 }

.sv-legal-acc { margin-top: 10px; border: 1px solid rgba(0,0,0,.08); border-radius: 12px; background: rgba(255,255,255,.55); padding: 10px 12px }
.sv-legal-acc summary { cursor: pointer; font-weight: 900 }
.sv-legal-acc-body { margin-top: 10px }

.sv-legal-source { margin: 0; opacity: .8; font-size: .95em }

.sv-legal-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; align-items: start }
.sv-legal-card h2 { margin: 0 0 10px; font-weight: 900; font-size: 1.2em }
.sv-legal-center { text-align: center }

@media (max-width: 900px) { .sv-legal-grid { grid-template-columns:1fr } }

.sv-legal-source--small { margin-top: 12px; font-size: .85em; opacity: .75 }

/* Leere Absätze ausblenden */
.sv-chronik p:empty,.sv-membership p:empty,.sv-team p:empty{ display:none }
.sv-chronik p,.sv-membership p,.sv-team p{ margin: 0 0 12px; line-height: 1.7 }

/* =========================================================
   SV LAUFEN – FIXES & ERWEITERUNGEN
   Joomla 6 / Template svlaufen
   ========================================================= */

/* ---------------------------------------------------------
   1) TOPBAR – Social Icons rechts ausrichten
--------------------------------------------------------- */

.svl-topbar > .container,
.svl-topbar > .container-fluid,
.svl-topbar .container,
.svl-topbar .container-fluid{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .75rem;
}

/* Falls UL/LI verwendet wird */
.svl-topbar ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .75rem;
}

.svl-topbar li{
  margin: 0;
}

.svl-topbar img,
.svl-topbar svg{
  display: block;
}


/* ---------------------------------------------------------
   2) HAUPTMENÜ – Aktiver Punkt NICHT fett (z.B. Kalender)
--------------------------------------------------------- */

.svl-nav .mod-menu > li.active > a,
.svl-nav .mod-menu > li.current > a,
.svl-nav .mod-menu > li > a[aria-current="page"]{
  font-weight: 600 !important;
}


/* ---------------------------------------------------------
   3) UNTERMENÜS PER HOVER öffnen (Desktop)
--------------------------------------------------------- */

@media (min-width: 992px){
  .svl-nav .mod-menu > li:hover > ul,
  .svl-nav .mod-menu > li:focus-within > ul{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* --- Bootstrap / Joomla Wrapper (.collapse / .dropdown-menu) --- */

.svl-nav .mod-menu > li > .collapse,
.svl-nav .mod-menu > li > .dropdown-menu{
  position: absolute;
  top: calc(100% + 14px);
  left: -14px;

  min-width: 260px;
  background: #ffffff;

  border: 1px solid rgba(0,0,0,.08);
  border-radius: var(--svl-radius);
  box-shadow: var(--svl-shadow-soft);

  padding: .55rem;
  z-index: 2000;

  display: block !important;
  height: auto !important;

  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .16s ease,
              transform .16s ease,
              visibility .16s ease;
}

@media (min-width: 992px){
  .svl-nav .mod-menu > li:hover > .collapse,
  .svl-nav .mod-menu > li:focus-within > .collapse,
  .svl-nav .mod-menu > li:hover > .dropdown-menu,
  .svl-nav .mod-menu > li:focus-within > .dropdown-menu{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}


/* ---------------------------------------------------------
   4) DROPDOWN – Jugendabteilung korrekt formatieren
      (auch wenn Joomla <span> statt <a> rendert)
--------------------------------------------------------- */

/* Normale Dropdown-Links */
.svl-nav .mod-menu ul > li > a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* Nicht klickbare Elternpunkte (<span> / .nav-header) */
.svl-nav .mod-menu ul > li > span,
.svl-nav .mod-menu ul > li > .nav-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;

  padding: .62rem .75rem;
  border-radius: var(--svl-radius-sm);

  font-weight: 600;
  color: var(--svl-dark);
  background: transparent;
  position: relative;
}

.svl-nav .mod-menu ul > li:hover > span,
.svl-nav .mod-menu ul > li:hover > .nav-header{
  background: color-mix(in srgb, var(--svl-red) 9%, transparent);
  color: var(--svl-red);
}

/* Pfeil für Untermenüs */
.svl-nav .mod-menu ul > li.parent > span,
.svl-nav .mod-menu ul > li.parent > .nav-header{
  padding-right: 2.2rem;
}

.svl-nav .mod-menu ul > li.parent > span::after,
.svl-nav .mod-menu ul > li.parent > .nav-header::after{
  content: "›";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  opacity: .55;
  font-size: 1.05rem;
}

/* =========================================================
   FIX 2026-02: Hover-Dropdowns + "Kalender" nicht fett
   (nur Desktop für Hover; mobile bleibt klickbar)
   ========================================================= */

/* --- (2) Kalender & generell Top-Menü: nie fett --- */
.svl-nav .mod-menu > li > a,
.svl-nav .mod-menu > li > a:link,
.svl-nav .mod-menu > li > a:visited{
  font-weight: 600 !important;
}

/* Falls Joomla/Modul im Link <strong>, <b>, <span> etc. benutzt */
.svl-nav .mod-menu > li > a strong,
.svl-nav .mod-menu > li > a b,
.svl-nav .mod-menu > li > a span,
.svl-nav .mod-menu > li > a em,
.svl-nav .mod-menu > li > a i{
  font-weight: inherit !important;
}

/* Active/Current: auch NICHT fett (nur Farbe/Underline) */
.svl-nav .mod-menu > li.active > a,
.svl-nav .mod-menu > li.current > a,
.svl-nav .mod-menu > li > a[aria-current="page"]{
  font-weight: 600 !important;
}


/* --- (3) Hover Dropdowns auf Desktop erzwingen --- */
@media (min-width: 992px){

  /* Submenüs grundsätzlich „renderbar“ machen (wenn Joomla hidden/none nutzt) */
  .svl-nav .mod-menu > li > ul,
  .svl-nav .mod-menu > li > .collapse,
  .svl-nav .mod-menu > li > .dropdown-menu,
  .svl-nav .mod-menu > li ul[hidden]{
    display: block !important;
    height: auto !important;
    max-height: none !important;
  }

  /* Standardzustand: versteckt (auch wenn display:block) */
  .svl-nav .mod-menu > li > ul,
  .svl-nav .mod-menu > li > .collapse,
  .svl-nav .mod-menu > li > .dropdown-menu{
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity .16s ease, transform .16s ease, visibility .16s ease;
  }

  /* Hover/Focus: sichtbar */
  .svl-nav .mod-menu > li:hover > ul,
  .svl-nav .mod-menu > li:focus-within > ul,
  .svl-nav .mod-menu > li:hover > .collapse,
  .svl-nav .mod-menu > li:focus-within > .collapse,
  .svl-nav .mod-menu > li:hover > .dropdown-menu,
  .svl-nav .mod-menu > li:focus-within > .dropdown-menu{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
}

/* =========================================================
   FIX: Submenüs wieder klickbar + Hover stabil halten
   ========================================================= */

@media (min-width: 992px){

  /* Wichtig: Parent-LI als Bezugspunkt für absolute Dropdowns */
  .svl-nav .mod-menu > li{
    position: relative;
  }

  /* Submenü: kein Hover-Gap (falls vorher mit +14px gearbeitet wurde) */
  .svl-nav .mod-menu > li > ul,
  .svl-nav .mod-menu > li > .dropdown-menu,
  .svl-nav .mod-menu > li > .collapse{
    top: 100% !important;            /* direkt unter dem Menüpunkt */
    left: 0 !important;
    z-index: 9999 !important;
  }

  /* Ganz wichtig: Submenü darf IMMER Klicks bekommen, sobald sichtbar */
  .svl-nav .mod-menu > li > ul,
  .svl-nav .mod-menu > li > .dropdown-menu,
  .svl-nav .mod-menu > li > .collapse{
    pointer-events: auto !important;
  }

  /* Stabil sichtbar halten: nicht nur beim Hover auf dem LI,
     sondern auch wenn man schon im Dropdown ist */
  .svl-nav .mod-menu > li:hover ul,
  .svl-nav .mod-menu > li:focus-within ul,
  .svl-nav .mod-menu > li ul:hover,
  .svl-nav .mod-menu > li:hover .dropdown-menu,
  .svl-nav .mod-menu > li:focus-within .dropdown-menu,
  .svl-nav .mod-menu > li .dropdown-menu:hover,
  .svl-nav .mod-menu > li:hover .collapse,
  .svl-nav .mod-menu > li:focus-within .collapse,
  .svl-nav .mod-menu > li .collapse:hover{
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  /* Links im Submenü: sicher klickbar */
  .svl-nav .mod-menu ul a,
  .svl-nav .mod-menu ul span,
  .svl-nav .mod-menu ul .nav-header{
    pointer-events: auto !important;
  }
}

/* =========================================================
   FIX: Dropdowns wieder klickbar (pointer-events)
   ========================================================= */

@media (min-width: 992px){

  /* 1) Submenu-Container IMMER klickbar machen */
  .svl-nav .mod-menu > li > ul,
  .svl-nav .mod-menu > li > .dropdown-menu,
  .svl-nav .mod-menu > li > .collapse{
    pointer-events: auto !important;
  }

  /* 2) Sicherheit: auch alle Elemente im Dropdown klickbar */
  .svl-nav .mod-menu > li > ul *,
  .svl-nav .mod-menu > li > .dropdown-menu *,
  .svl-nav .mod-menu > li > .collapse *{
    pointer-events: auto !important;
  }
}

/* =========================================================
   FINAL FIX: Desktop-Dropdowns zuverlässig (Hover + klickbar)
   - Ebene 1: Mannschaft -> Dropdown
   - Ebene 2: Jugendabteilung -> Flyout
   ========================================================= */

@media (min-width: 992px){

  /* Bezugspunkt */
  .svl-nav .mod-menu > li,
  .svl-nav .mod-menu ul > li{
    position: relative;
  }

  /* ---------- Ebene 1 Dropdown (Top-Level) ---------- */
  .svl-nav .mod-menu > li > ul{
    /* wir überschreiben alles vorherige */
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;

    position: absolute;
    top: calc(100% + 14px);
    left: -14px;

    min-width: 260px;
    background: #fff;

    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--svl-radius);
    box-shadow: var(--svl-shadow-soft);

    padding: .55rem;
    z-index: 9999;
  }

  /* Hover-Bridge gegen Abriss (Gap zwischen Menüpunkt & Dropdown) */
  .svl-nav .mod-menu > li > ul::before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-14px;
    height:14px;
  }

  /* Öffnen per Hover / Tastatur */
  .svl-nav .mod-menu > li:hover > ul,
  .svl-nav .mod-menu > li:focus-within > ul{
    display: block !important;
  }

  /* Falls Joomla das Submenu mit [hidden] rendert -> trotzdem öffnen */
  .svl-nav .mod-menu > li:hover > ul[hidden],
  .svl-nav .mod-menu > li:focus-within > ul[hidden]{
    display: block !important;
  }


  /* ---------- Ebene 2 Flyout (Untermenü im Dropdown) ---------- */
  .svl-nav .mod-menu ul ul{
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;

    position: absolute;
    top: 0;
    left: calc(100% + 10px);

    min-width: 260px;
    background: #fff;

    border: 1px solid rgba(0,0,0,.08);
    border-radius: var(--svl-radius);
    box-shadow: var(--svl-shadow-float);

    padding: .55rem;
    z-index: 10000;
  }

  /* Flyout öffnen per Hover / Tastatur */
  .svl-nav .mod-menu ul > li:hover > ul,
  .svl-nav .mod-menu ul > li:focus-within > ul{
    display: block !important;
  }

  /* Falls Joomla Ebene 2 mit [hidden] rendert -> trotzdem öffnen */
  .svl-nav .mod-menu ul > li:hover > ul[hidden],
  .svl-nav .mod-menu ul > li:focus-within > ul[hidden]{
    display: block !important;
  }

  /* Sicherheit: Links immer klickbar */
  .svl-nav .mod-menu > li > ul a,
  .svl-nav .mod-menu > li > ul span,
  .svl-nav .mod-menu > li > ul .nav-header,
  .svl-nav .mod-menu > li > ul *{
    pointer-events: auto !important;
  }
}

/* =========================================================
   MOBILE FIX: Burger-Menü (Bootstrap Collapse) wieder aktiv
   ========================================================= */

@media (max-width: 991.98px){

  /* 1) Alles, was wir evtl. an .collapse/.dropdown-menu für Desktop "verbogen" haben,
        auf Mobile zurück auf Bootstrap-Standard */
  .svl-nav .collapse,
  .svl-nav .dropdown-menu{
    position: static !important;
    top: auto !important;
    left: auto !important;

    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;

    box-shadow: none !important;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;

    pointer-events: auto !important;
    z-index: auto !important;
  }

  /* Bootstrap-Collapse-Logik wieder herstellen */
  .svl-nav .collapse{
    display: none !important;
  }
  .svl-nav .collapse.show{
    display: block !important;
  }

  /* 2) Burger-Button sicher klickbar + sichtbar */
  .svl-nav .navbar-toggler{
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 20000 !important;
    pointer-events: auto !important;

    /* damit du nicht nur einen "weißen Button" ohne erkennbare Kanten hast */
    border: 1px solid rgba(0,0,0,.2) !important;
  }

  /* 3) Toggler-Icon wieder anzeigen (falls es durch CSS überschrieben wurde) */
  .svl-nav .navbar-toggler-icon{
    display: inline-block !important;
    width: 1.5em !important;
    height: 1.5em !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 100% 100% !important;
  }
}

/* =========================================================
   MOBILE FIX: Menü soll direkt unter der Navbar aufgehen
   ========================================================= */

@media (max-width: 991.98px){

  /* Navbar als Bezugspunkt */
  .svl-nav,
  .svl-nav .navbar{
    position: relative !important;
    z-index: 30000 !important;
  }

  /* Collapse/Dropdown dürfen auf Mobile nicht irgendwo "im Flow" weit unten landen */
  .svl-nav .navbar-collapse,
  .svl-nav .collapse{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: 100% !important;          /* direkt unter der Navbar */
    width: 100% !important;

    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,.08) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.10) !important;

    padding: .75rem 1rem !important;
  }

  /* Bootstrap-Collapse-Logik: nur wenn show sichtbar */
  .svl-nav .collapse{
    display: none !important;
  }
  .svl-nav .collapse.show{
    display: block !important;
  }
}

/* =========================================================
   MOBILE ONLY: Menü sofort sichtbar (fixed unter Header)
   ========================================================= */

@media (max-width: 991.98px){

  /* 1) Einstellwert: Abstand von oben (Topbar + Header).
        Wenn das Menü zu weit oben/unten sitzt: hier anpassen. */
  :root{
    --svl-mobile-menu-offset: 110px; /* ggf. 90px / 120px */
  }

  /* 2) Collapse/ Menüpanel als Overlay direkt unter dem Header */
  .svl-nav .collapse.show,
  .svl-nav .navbar-collapse.show{
    position: fixed !important;
    top: var(--svl-mobile-menu-offset) !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 99999 !important;

    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.12) !important;

    padding: .75rem 1rem !important;

    /* scrollen im Menü, falls lang */
    max-height: calc(100vh - var(--svl-mobile-menu-offset)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 3) Wenn nicht offen: wie gewohnt unsichtbar */
  .svl-nav .collapse:not(.show),
  .svl-nav .navbar-collapse:not(.show){
    display: none !important;
  }

  /* 4) Burger Button sicher über allem */
  .svl-nav .navbar-toggler{
    position: relative !important;
    z-index: 100000 !important;
  }
}

/* =========================================================
   MOBILE ONLY – Menü-Overlay immer oben anzeigen
   (greift generisch, auch wenn der Collapse im DOM weiter unten liegt)
   ========================================================= */

@media (max-width: 991.98px){

  /* Falls nötig: nur diesen Wert anpassen */
  :root{
    --svl-mobile-menu-offset: 110px; /* Topbar + Header (ggf. 90–130px) */
  }

  /* Wenn das Menü aufgeklappt ist: IMMER als Overlay oben anzeigen */
  body .navbar-collapse.show,
  body .collapse.show{
    position: fixed !important;
    top: var(--svl-mobile-menu-offset) !important;
    left: 0 !important;
    right: 0 !important;

    z-index: 999999 !important;

    background: #fff !important;
    border-top: 1px solid rgba(0,0,0,.10) !important;
    box-shadow: 0 10px 25px rgba(0,0,0,.12) !important;

    padding: .75rem 1rem !important;

    max-height: calc(100vh - var(--svl-mobile-menu-offset)) !important;
    overflow: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Optional: verhindern, dass der geöffnete Container "irgendwo" Platz im Layout zieht */
  body .navbar-collapse,
  body .collapse{
    margin: 0 !important;
  }

  /* Burger Button über allem (damit man wieder schließen kann) */
  .navbar-toggler{
    position: relative !important;
    z-index: 1000000 !important;
  }
}

/* STRICHE Burger

/* =========================================================
   MOBILE: Burger Icon (3 Striche) erzwingen
   ========================================================= */

@media (max-width: 991.98px){

  /* Button optisch klickbar */
  .navbar-toggler{
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 10px;
    background: #fff;
    border: 1px solid rgba(0,0,0,.18);
  }

  /* Standard Bootstrap Icon neutralisieren (falls vorhanden) */
  .navbar-toggler-icon{
    background-image: none !important;
    width: 22px;
    height: 14px;
    position: relative;
    display: inline-block;
  }

  /* Drei Balken zeichnen */
  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after,
  .navbar-toggler-icon span{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: rgba(0,0,0,.75);
    border-radius: 2px;
  }

  .navbar-toggler-icon::before{ top: 0; }
  .navbar-toggler-icon span{ top: 6px; }
  .navbar-toggler-icon::after{ bottom: 0; }

  /* Falls im HTML kein <span> im Icon existiert, erzeugen wir ihn über display:flex Trick */
  .navbar-toggler-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .navbar-toggler-icon::before,
  .navbar-toggler-icon::after{
    transform: none;
  }
}

/* =========================================================
   NAV: Einheitliche Darstellung aller Top-Level Menüpunkte
   (fix für "Einzelner Beitrag" = Kalender/Kalender2)
   ========================================================= */

/* Top-Level Links: gleiche Typo */
.svl-nav .mod-menu > li > a{
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Falls Joomla innerhalb des Links extra Markup nutzt */
.svl-nav .mod-menu > li > a strong,
.svl-nav .mod-menu > li > a b,
.svl-nav .mod-menu > li > a span,
.svl-nav .mod-menu > li > a em,
.svl-nav .mod-menu > li > a i{
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* Active/Current: NICHT fetter als die anderen */
.svl-nav .mod-menu > li.active > a,
.svl-nav .mod-menu > li.current > a,
.svl-nav .mod-menu > li > a[aria-current="page"]{
  font-weight: 600 !important;
}

/* =========================================================
   MOBILE: Burger Icon (immer sichtbar – 3 Balken per Gradient)
   ========================================================= */
@media (max-width: 991.98px){

  /* Button sichtbar & klickbar */
  .navbar-toggler{
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    border-radius: 10px !important;
    background: #fff !important;
    border: 1px solid rgba(0,0,0,.18) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* Icon zeichnen – völlig egal, was Bootstrap/Template macht */
  .navbar-toggler .navbar-toggler-icon,
  .navbar-toggler-icon{
    width: 22px !important;
    height: 16px !important;
    display: inline-block !important;

    background-image:
      linear-gradient(to bottom,
        rgba(0,0,0,.78) 0 2px,
        transparent 2px 7px,
        rgba(0,0,0,.78) 7px 9px,
        transparent 9px 14px,
        rgba(0,0,0,.78) 14px 16px) !important;

    background-repeat: no-repeat !important;
    background-size: 22px 16px !important;
    background-position: center !important;
  }
}

/* =========================================================
   NAV: Einheitliche Top-Level-Menüpunkte (Desktop + Mobile)
   - behebt Unterschiede (z.B. "Einzelner Beitrag" = Kalender/Kalender2)
   ========================================================= */

/* Top-Level Links: alle gleich */
.svl-nav a,
.svl-nav .nav-link,
.svl-nav .navbar-nav > li > a,
.svl-nav .navbar-nav > .nav-item > .nav-link,
.svl-nav .mod-menu > li > a{
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* falls Joomla/Template innerhalb der Links Strong/Span etc. setzt */
.svl-nav a strong,
.svl-nav a b,
.svl-nav a span,
.svl-nav a em,
.svl-nav a i{
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* Active/Current NICHT fetter machen */
.svl-nav .active > a,
.svl-nav .active > .nav-link,
.svl-nav a[aria-current="page"],
.svl-nav .mod-menu > li.active > a,
.svl-nav .mod-menu > li.current > a{
  font-weight: 600 !important;
}

/* =========================================================
   SVL BURGER: 3 Striche sichtbar (svl-burger spans)
   ========================================================= */

.svl-burger{
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.18);
  background: #fff;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}

.svl-burger span{
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(0,0,0,.78);
  border-radius: 2px;
}

/* =========================================================
   NAV TYPO: Alle Top-Level Punkte gleich (auch "Einzelner Beitrag")
   + Toggle-Buttons wie Menüpunkte
   ========================================================= */

/* Top-Level Links */
.svl-nav .mod-menu > li > a{
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;
}

/* Toggle-Buttons (die bei Parent-Items statt <a> erscheinen) wie Links stylen */
.svl-nav .mod-menu > li > .mod-menu__toggle-sub{
  width: 100%;
  text-align: left;

  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  text-transform: uppercase !important;

  background: transparent;
  border: 0;
  padding: .5rem 0;
  cursor: pointer;
}

/* Damit innerhalb vom Toggle (falls dort span/strong etc.) nichts abweicht */
.svl-nav .mod-menu > li > .mod-menu__toggle-sub *{
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* Active/Current NICHT extra fett machen */
.svl-nav .mod-menu > li.active > a,
.svl-nav .mod-menu > li.current > a,
.svl-nav .mod-menu > li > a[aria-current="page"]{
  font-weight: 600 !important;
}
/* =========================================================
   MOBILE SUBMENUS: Anzeige wenn Toggle geöffnet (aria-expanded)
   ========================================================= */

@media (max-width: 991.98px){

  /* Submenu standardmäßig zu */
  .svl-nav .mod-menu__sub[aria-hidden="true"]{
    display: none !important;
  }

  /* Wenn Parent-Button expanded=true -> Submenu anzeigen */
  .svl-nav .mod-menu__toggle-sub[aria-expanded="true"] + .mod-menu__sub{
    display: block !important;
    margin: .35rem 0 .6rem .75rem;
    padding-left: .25rem;
    border-left: 2px solid rgba(0,0,0,.08);
  }

  /* Submenu Links etwas kleiner aber sauber */
  .svl-nav .mod-menu__sub a{
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    display: block;
    padding: .35rem 0;
  }
}

/* =========================================================
   DESKTOP: Burger ausblenden
   ========================================================= */
@media (min-width: 992px){
  .svl-burger{
    display: none !important;
  }
}

/* =========================================================
   MOBILE: Burger (svl-burger) – 3 Striche erzwingen
   ========================================================= */
@media (max-width: 991.98px){

  .svl-burger{
    display: inline-flex !important;
    width: 44px !important;
    height: 44px !important;
    padding: 0 !important;

    background: #fff !important;
    border: 1px solid rgba(0,0,0,.18) !important;
    border-radius: 10px !important;

    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;

    /* falls irgendwo "filter" / "opacity" draufliegt */
    opacity: 1 !important;
  }

  .svl-burger span{
    display: block !important;
    width: 22px !important;
    height: 2px !important;
    min-height: 2px !important;

    background-color: rgba(0,0,0,.80) !important;
    border-radius: 2px !important;

    opacity: 1 !important;
    visibility: visible !important;

    /* falls irgendein Reset transformiert */
    transform: none !important;
  }
}

/* =========================================================
   MOBILE: Top-Level Menüpunkte vereinheitlichen
   (macht "Pills" und normale Links gleich)
   ========================================================= */
@media (max-width: 991.98px){

  /* Container */
  #svlNav.svl-nav-collapse{
    padding: 14px 16px !important;
  }

  /* Top-Level: Links + Toggle-Buttons */
  #svlNav .mod-menu > li > a,
  #svlNav .mod-menu > li > .mod-menu__toggle-sub{
    display: block !important;
    width: 100% !important;

    /* gleiche Typo */
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;

    /* gleiche Abstände */
    padding: 10px 12px !important;
    margin: 6px 0 !important;

    /* gleiche Optik */
    background: transparent !important;
    border: 0 !important;
    border-radius: 10px !important;

    color: inherit !important;
    text-align: left !important;
  }

  /* Entfernt „Button/Pill“-Sonderstyles einzelner Items (wie bei HOME/KALENDER) */
  #svlNav .mod-menu > li > a{
    box-shadow: none !important;
  }

  /* Optional: leichter Hover/Active-Effekt für Touch (sieht sauber aus) */
  #svlNav .mod-menu > li > a:active,
  #svlNav .mod-menu > li > .mod-menu__toggle-sub:active{
    background: rgba(0,0,0,.04) !important;
  }

  /* Active/current nicht größer/fetter als andere */
  #svlNav .mod-menu > li.active > a,
  #svlNav .mod-menu > li.current > a,
  #svlNav .mod-menu > li > a[aria-current="page"]{
    font-weight: 600 !important;
  }
}

/* =========================================================
   MOBILE: Burger Icon Feintuning (zentriert + enger)
   ========================================================= */
@media (max-width: 991.98px){

  .svl-burger{
    width: 44px !important;
    height: 44px !important;

    /* perfekt mittig */
    align-items: center !important;
    justify-content: center !important;

    /* engerer Abstand */
    gap: 0.1px !important;

    /* sorgt für "typische" Optik */
    padding: 0 !important;
  }

  .svl-burger span{
    width: 20px !important;   /* minimal kürzer wirkt sauberer */
    height: 2px !important;
  }
}

/* =========================================================
   MOBILE: Untermenüs auf ALLEN Ebenen aufklappbar machen
   (Mannschaften -> Jugendabteilung -> A/B/C...)
   ========================================================= */
@media (max-width: 991.98px){

  /* Alle Toggle-Buttons (auch in Submenus) wie Menüpunkte stylen */
  #svlNav .mod-menu__toggle-sub{
    display: block !important;
    width: 100% !important;
    text-align: left !important;

    background: transparent !important;
    border: 0 !important;

    padding: 10px 12px !important;
    margin: 6px 0 !important;

    font-size: 0.95rem !important;
    font-weight: 600 !important;
    letter-spacing: .04em !important;
    text-transform: uppercase !important;

    cursor: pointer !important;
  }

  /* Submenus standardmäßig verstecken */
  #svlNav .mod-menu__sub{
    display: none !important;
  }

  /* Wenn ein Toggle geöffnet ist -> direkt folgendes Submenu anzeigen (gilt für jede Ebene) */
  #svlNav .mod-menu__toggle-sub[aria-expanded="true"] + .mod-menu__sub{
    display: block !important;
    margin: .35rem 0 .6rem .9rem !important;
    padding-left: .35rem !important;
    border-left: 2px solid rgba(0,0,0,.08) !important;
  }

  /* Links in Submenus etwas kompakter */
  #svlNav .mod-menu__sub a{
    display: block !important;
    padding: 8px 10px !important;
    margin: 4px 0 !important;

    font-size: 0.92rem !important;
    font-weight: 600 !important;
    letter-spacing: .02em !important;
    text-transform: none !important;
  }

  /* Optional: kleines "Pfeil"-Indiz für Toggle-Buttons */
  #svlNav .mod-menu__toggle-sub{
    position: relative !important;
    padding-right: 34px !important;
  }
  #svlNav .mod-menu__toggle-sub::after{
    content: "›";
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    opacity: .55;
    font-size: 1.1rem;
  }
  #svlNav .mod-menu__toggle-sub[aria-expanded="true"]::after{
    transform: translateY(-50%) rotate(90deg);
    opacity: .8;
  }
}

/* =========================================================
   MOBILE FIX: mod-menu__sub nur verstecken wenn aria-hidden=true
   (damit "Jugendabteilung" + Unterpunkte sichtbar werden)
   ========================================================= */
@media (max-width: 991.98px){

  /* Standard: Wenn Joomla sagt "hidden=true" -> zu */
  #svlNav .mod-menu__sub[aria-hidden="true"]{
    display: none !important;
  }

  /* Wenn Joomla sagt "hidden=false" oder show-menu -> auf */
  #svlNav .mod-menu__sub[aria-hidden="false"],
  #svlNav .mod-menu__sub.show-menu{
    display: block !important;
  }

  /* Falls irgendwo noch eine alte Regel alles ausblendet, überstimmen wir sie hier explizit */
  #svlNav .mod-menu__sub{
    /* KEIN generelles display:none mehr */
  }
}

/* =========================================================
   TOPBAR: Social Icons (SVG)
   ========================================================= */
.svl-topbar-inner{
  display: flex;
  gap: 10px;
}

.svl-topbar-inner a{
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;              /* Farbe der Icons */
  text-decoration: none;
}

.svl-topbar-inner svg{
  width: 16px;
  height: 16px;
  fill: currentColor;      /* übernimmt Farbe von a */
}

/* Optional: Hover-Effekt */
.svl-topbar-inner a:hover{
  opacity: .8;
}

/* =========================================================
   MOBILE LAYOUT FIX: volle Breite, kein "abgeschnittenes" Layout
   ========================================================= */
@media (max-width: 991.98px){

  html, body{
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* häufige Wrapper auf volle Breite zwingen */
  .svl-topbar,
  .svl-header,
  .svl-header-inner,
  .svl-main,
  .svl-footer,
  .site,
  .container,
  .container-fluid{
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Container-Padding sauber */
  .container,
  .container-fluid{
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Medien responsiv */
  img, video, iframe{
    max-width: 100% !important;
    height: auto !important;
  }
}

/* =========================================================
   MOBILE FEINTUNING: Logo & Hero kleiner
   ========================================================= */
@media (max-width: 991.98px){

  /* -------------------------------------------------------
     1) LOGO kleiner
     ------------------------------------------------------- */

  /* falls Logo ein IMG ist */
  .svl-header img,
  .svl-header .logo img{
    max-height: 42px !important;   /* vorher deutlich größer */
    width: auto !important;
  }

  /* falls Logo als SVG/Background kommt */
  .svl-header .logo{
    max-width: 120px !important;
  }

  /* Header insgesamt etwas kompakter */
  .svl-header{
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }


  /* -------------------------------------------------------
     2) HERO / HEADER-BILD kleiner
     ------------------------------------------------------- */

  /* typischer Hero-Wrapper (greift auch bei Slider/Images) */
  .svl-hero,
  .svl-hero img,
  .svl-hero video,
  .svl-hero .hero-image,
  .svl-header + .svl-hero img{
    max-height: 150px !important;   /* 🔧 hier kannst du feinjustieren */
    object-fit: cover !important;
  }

  /* falls Hero über background-image läuft */
  .svl-hero,
  .hero,
  .header-image{
    min-height: 180px !important;
    max-height: 180px !important;
    background-size: cover !important;
    background-position: center !important;
  }
}

/* =========================================================
   MOBILE: Sponsoren Slider kompakter & lesbar
   ========================================================= */
@media (max-width: 991.98px){

  /* Slider-Wrapper allgemein */
  .sponsor-slider,
  .sponsoren-slider,
  .svl-sponsor-slider,
  .svl-sponsors{
    max-height: 150px !important;
    padding: 8px 0 !important;
    overflow: hidden;
  }

  /* Einzelne Slides */
  .sponsor-slider .slide,
  .sponsoren-slider .slide,
  .svl-sponsor-slider .slide,
  .svl-sponsors .slide{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px !important;
  }

  /* Logos selbst */
  .sponsor-slider img,
  .sponsoren-slider img,
  .svl-sponsor-slider img,
  .svl-sponsors img{
    max-height: 85px !important;
    max-width: 80% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
  }
}

/* =========================================================
   DARK MODE DEAKTIVIEREN – CI-FARBEN BEHALTEN (SV LAUFEN)
   ========================================================= */

/* Browser-Hint: Website ist Light only */
html{
  color-scheme: light;
}

/* Dark-Preference ignorieren, aber Designfarben erhalten */
@media (prefers-color-scheme: dark){

  /* Basis: Seite bleibt hell */
  html,
  body{
    background: #fff !important;
    color: var(--svl-dark, #111) !important;
  }

  /* Header & Content bleiben hell */
  .svl-header,
  .svl-main,
  main,
  header,
  nav{
    background: #fff !important;
  }

  /* TOPBAR: MUSS ROT BLEIBEN */
  .svl-topbar{
    background: var(--svl-red, #b10016) !important;
    color: #fff !important;
  }
  .svl-topbar a{
    color: #fff !important;
  }
  .svl-topbar svg{
    fill: currentColor !important;
  }

  /* FOOTER: MUSS ROT BLEIBEN */
  .svl-footer{
    background: var(--svl-red, #b10016) !important;
    color: #fff !important;
  }
  .svl-footer a{
    color: #fff !important;
  }

  /* Keine automatische Invertierung */
  img,
  video,
  iframe{
    filter: none !important;
  }
}

/* =========================================================
   MOBILE: Startseiten-Reihenfolge der Module (CSS order)
   Ziel: nach Hero -> Beiträge -> sidebar-r -> sidebar-l -> sponsoren -> footer
   Greift nur auf Mobile und nur im svl-main Bereich.
   ========================================================= */
@media (max-width: 991.98px){

  /* Die Row wird zum Flex-Container in Spaltenrichtung */
  .svl-main > .row.g-4{
    display: flex !important;
    flex-direction: column !important;
  }

  /* 1) Beiträge / Component */
  .svl-main > .row.g-4 > main#main-content{
    order: 2 !important;
  }

  /* 2) Sidebar rechts (im DOM: letztes <aside>) */
  .svl-main > .row.g-4 > aside:last-of-type{
    order: 3 !important;
  }

  /* 3) Sidebar links (im DOM: erstes <aside>) */
  .svl-main > .row.g-4 > aside:first-of-type{
    order: 4 !important;
  }

  /* 4) Content bottom (hier steckt i.d.R. Sponsoren-Slider) */
  .svl-main > .svl-content-bottom{
    order: 5 !important;
  }
}

/* bis hier alles in Ordnung, weiter mit Thema Beiträge /SSP */

/* =========================================================
   FEATURED BLOG – Clean Cards + Clamp + Button nur bei Overflow
   ========================================================= */

:root{
  --svl-featured-lines: 10;     /* 🔧 Anzahl Zeilen */
  --svl-featured-lh: 1.55;      /* Line-height fürs Messen */
}

/* Grid */
.blog-featured{
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (min-width: 992px){
  .blog-featured{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
  }
}

/* Joomla Wrapper neutralisieren */
.blog-featured .items-leading,
.blog-featured .items-row,
.blog-featured .blog-items{
  display: contents;
}

/* Karte */
.blog-featured .blog-item{
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 25px rgba(0,0,0,.08);
  border: 1px solid rgba(0,0,0,.06);
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Bild oben */
.blog-featured .blog-item .item-image img{
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}

/* Content: Flex damit Button unten klebt */
.blog-featured .blog-item .item-content{
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  height: 100%;
}

/* Meta ausblenden (optional) */
.blog-featured .blog-item .article-info{
  display: none !important;
}

/* Titel */
.blog-featured .item-title,
.blog-featured .item-title h2{
  font-size: 1.25rem !important;
  line-height: 1.35 !important;
  font-weight: 800 !important;
  margin: 0 !important;
}

/* Intro-Text Wrapper: wird per JS erzeugt */
.blog-featured .svl-intro{
  line-height: var(--svl-featured-lh);
  opacity: .92;
}

/* Clamp nur aktiv, wenn JS sagt "hat mehr" */
.blog-featured .blog-item.svl-has-more .svl-intro{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--svl-featured-lines);
  overflow: hidden;
}

/* Button-Container immer nach unten */
.blog-featured .svl-readmore-wrap{
  margin-top: auto;
  padding-top: 8px;
}

/* Button (gilt für echten Joomla Readmore UND unseren Auto-Link) */
.blog-featured .readmore a,
.blog-featured .svl-auto-readmore-link{
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: var(--svl-red, #b10016) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}
.blog-featured .readmore a:hover,
.blog-featured .svl-auto-readmore-link:hover{
  filter: brightness(.95);
}

/* Wenn kein Overflow: Button verstecken (JS entfernt Klasse) */
.blog-featured .blog-item:not(.svl-has-more) .svl-readmore-wrap{
  display: none !important;
}

/* Introtext sauber */
.blog-featured .svl-intro{
  line-height: var(--svl-featured-lh);
}

/* falls Joomla trotzdem noch p drin lässt */
.blog-featured .svl-intro p{
  margin: 0;
}

/* Text kürzen nur wenn zu lang */
.blog-featured .blog-item.svl-has-more .svl-intro{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--svl-clamp-lines, 10);
  overflow: hidden;
}

/* Button nur anzeigen wenn zu lang */
.blog-featured .svl-readmore-wrap{
  display: none;
}

.blog-featured .blog-item.svl-has-more .svl-readmore-wrap{
  display: block;
  margin-top: 12px;
}

/* =========================================================
   FEATURED BLOG: Clamp + Button nur bei langen Texten
   (arbeitet mit JS-Klassen: .svl-intro + .svl-has-more)
   ========================================================= */

/* Card-Layout: Inhalt + Footer (Button) */
.blog-featured .blog-item .item-content{
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
}

/* Intro-Wrapper: Standard = nicht clampen */
.blog-featured .blog-item .svl-intro{
  overflow: visible;
}

/* NUR wenn zu lang -> clamp */
.blog-featured .blog-item.svl-has-more .svl-intro{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--svl-clamp-lines, 10);
  overflow: hidden;
}

/* Readmore-Bereich unten */
.blog-featured .blog-item .svl-readmore-wrap{
  margin-top: auto;          /* drückt den Button nach unten */
  padding-top: 12px;
  display: none;             /* Standard: aus */
}

/* NUR wenn zu lang -> Button zeigen */
.blog-featured .blog-item.svl-has-more .svl-readmore-wrap{
  display: block;
}

/* Wenn Joomla schon einen Readmore hat: als Button stylen */
.blog-featured .blog-item .svl-readmore-wrap .readmore a{
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: var(--svl-red, #b10016) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* Wenn kein Joomla-Readmore existiert: Auto-Link als Button */
.blog-featured .blog-item .svl-readmore-wrap .svl-auto-readmore-link{
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: var(--svl-red, #b10016) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

/* Hover */
.blog-featured .blog-item .svl-readmore-wrap .readmore a:hover,
.blog-featured .blog-item .svl-readmore-wrap .svl-auto-readmore-link:hover{
  filter: brightness(.95);
}

@media (min-width: 992px){
  .blog-featured .blog-item{
    height: 100%;
  }
}

/* Intro-Absätze kompakt */
.blog-featured .svl-intro p{
  margin: 0 0 .6rem 0;
}
.blog-featured .svl-intro p:last-child{
  margin-bottom: 0;
}

/* =========================================================
   FEATURED BLOG – FINAL: nur Intro + Button anzeigen + Text clamp
   ========================================================= */

:root{
  --svl-clamp-lines: 10;  /* hier kannst du 8/10/12 anpassen */
}

/* 1) Wir blenden im Teaser IM item-content alles aus
      außer unserem Intro + Button-Wrap (damit nix doppelt ist) */
/* Nur Teaser-Layout: alles ausblenden, ABER Titel + Meta + Intro + Button behalten */
.blog-featured .blog-item .item-content > :not(h2.item-title):not(h3.item-title):not(.item-title):not(.article-info):not(.svl-intro):not(.svl-readmore-wrap){
  display: none !important;
}

/* 2) Intro optisch sauber */
.blog-featured .svl-intro{
  margin: 0;
}
.blog-featured .svl-intro p{
  margin: 0 0 .6rem 0;
}
.blog-featured .svl-intro p:last-child{
  margin-bottom: 0;
}

/* 3) Clamp wieder aktiv: wir clampen die GANZE Intro-Box */
.blog-featured .blog-item.svl-has-more .svl-intro{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: var(--svl-clamp-lines) !important;
  overflow: hidden !important;
}

/* 4) Button unten wie Button */
.blog-featured .svl-readmore-wrap{
  margin-top: auto;
  padding-top: 12px;
}

.blog-featured .svl-auto-readmore-link{
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: var(--svl-red, #b10016) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.blog-featured .svl-auto-readmore-link:hover{
  filter: brightness(.95);
}

/* =========================================================
   FEATURED BLOG – FINAL LAYOUT: Title (H3) + red divider + intro + button
   ========================================================= */

:root{
  --svl-clamp-lines: 10;          /* 8/10/12 */
  --svl-title-divider: 36px;      /* Länge der roten Linie */
}

/* 1) Im item-content nur Titel + Intro + Button behalten (keine doppelten Inhalte) */
.blog-featured .blog-item .item-content > :not(.item-title):not(h1):not(h2):not(h3):not(.svl-intro):not(.svl-readmore-wrap){
  display: none !important;
}

/* 2) Titel sichtbar + wie H3 */
.blog-featured .blog-item .item-title,
.blog-featured .blog-item h2.item-title,
.blog-featured .blog-item h3.item-title{
  margin: 0 0 .65rem 0 !important;
  font-size: 1.25rem !important;      /* H3 Look */
  line-height: 1.35 !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
}

/* Titel-Link sauber */
.blog-featured .blog-item .item-title a{
  color: var(--svl-dark, #0f172a) !important;
  text-decoration: none !important;
}
.blog-featured .blog-item .item-title a:hover{
  color: var(--svl-red, #b10016) !important;
}

/* 3) Rote Trennlinie unter dem Titel */
.blog-featured .blog-item .item-title::after{
  content:"";
  display:block;
  width: var(--svl-title-divider);
  height: 2px;
  margin-top: .55rem;
  background: var(--svl-red, #b10016);
  border-radius: 99px;
  opacity: .95;
}

/* 4) Intro (Text) sauber */
.blog-featured .svl-intro{
  margin: 0;
}
.blog-featured .svl-intro p{
  margin: 0 0 .6rem 0;
}
.blog-featured .svl-intro p:last-child{
  margin-bottom: 0;
}

/* 5) Clamp nur wenn "svl-has-more" */
.blog-featured .blog-item.svl-has-more .svl-intro{
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: var(--svl-clamp-lines) !important;
  overflow: hidden !important;
}

/* 6) Button */
.blog-featured .svl-readmore-wrap{
  margin-top: auto;
  padding-top: 12px;
}

.blog-featured .svl-auto-readmore-link{
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: var(--svl-red, #b10016) !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700 !important;
}

.blog-featured .svl-auto-readmore-link:hover{
  filter: brightness(.95);
}


/* =========================================================
   FEATURED BLOG – FINAL VISUAL DESIGN
   ========================================================= */

:root{
  --svl-clamp-lines: 10;
}

/* Titel wie H3 */
.blog-featured h2.item-title{
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 0 .5rem 0 !important;
}

.blog-featured h2.item-title a{
  text-decoration: none !important;
  color: var(--svl-dark, #0f172a) !important;
}

.blog-featured h2.item-title a:hover{
  color: var(--svl-red, #b10016) !important;
}

/* Rote Trennlinie */
.blog-featured h2.item-title::after{
  content:"";
  display:block;
  width:40px;
  height:2px;
  margin-top:.5rem;
  background:var(--svl-red,#b10016);
  border-radius:99px;
}

/* Intro */
.blog-featured .svl-intro p{
  margin:0 0 .6rem 0;
  opacity:.92;
}

/* Clamp */
.blog-featured .blog-item.svl-has-more .svl-intro{
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:var(--svl-clamp-lines);
  overflow:hidden;
}

/* Button */
.blog-featured .svl-readmore-wrap{
  margin-top:1rem;
}

.blog-featured .svl-auto-readmore-link{
  display:inline-block;
  padding:10px 14px;
  border-radius:12px;
  background:var(--svl-red,#b10016);
  color:#fff !important;
  font-weight:700;
  text-decoration:none;
}

.blog-featured .svl-auto-readmore-link:hover{
  filter:brightness(.95);
}

/* Title klar erkennbar + rote Linie */
.blog-featured .item-content > h2.item-title{
  display:block !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 0 .6rem 0 !important;
}

.blog-featured .item-content > h2.item-title a{
  color: var(--svl-dark, #0f172a) !important;
  text-decoration: none !important;
}

.blog-featured .item-content > h2.item-title::after{
  content:"";
  display:block;
  width:46px;
  height:2px;
  margin-top:.55rem;
  background: var(--svl-red, #b10016);
  border-radius: 99px;
  opacity: .95;
}

.blog-featured .item-content .item-title{
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 0 .6rem 0 !important;
}

.blog-featured .item-content .item-title a{
  color: var(--svl-dark, #0f172a) !important;
  text-decoration: none !important;
}
.blog-featured .item-content .item-title a:hover{
  color: var(--svl-red, #b30d1a) !important;
}

.blog-featured .item-content .svl-title-divider{
  width: 46px;
  height: 2px;
  background: var(--svl-red, #b30d1a);
  border-radius: 999px;
  margin: .25rem 0 .85rem 0;
  opacity: .95;
}

.blog-featured .svl-intro p{
  margin: 0 0 .6rem 0;
}

.blog-featured .svl-readmore-wrap{
  margin-top: auto;
  padding-top: 10px;
}

.blog-featured .svl-auto-readmore-link{
  display: inline-block;
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--svl-red, #b30d1a);
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 700;
}
.blog-featured .svl-auto-readmore-link:hover{
  filter: brightness(.95);
}

.blog-featured .blog-item .item-content > h2.item-title{
  display: block !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  margin: 0 0 .35rem 0 !important;
}

.blog-featured .blog-item .item-content > h2.item-title a{
  color: #111 !important;
  text-decoration: none !important;
}

.blog-featured .blog-item .item-content > h2.item-title a:hover{
  color: var(--svl-red, #b30d1a) !important;
}

.blog-featured .blog-item .svl-title-divider{
  display: block !important;
  width: 46px !important;
  height: 2px !important;
  background: var(--svl-red, #b30d1a) !important;
  border-radius: 999px !important;
  margin: .25rem 0 .75rem 0 !important;
}

.blog-featured .blog-item .svl-intro p{
  margin: 0 0 .6rem 0 !important;
}

.blog-featured .blog-item .svl-auto-readmore-link{
  display: inline-block !important;
  padding: 10px 14px !important;
  border-radius: 12px !important;
  background: var(--svl-red, #b30d1a) !important;
  color: #fff !important;
  font-weight: 700 !important;
  text-decoration: none !important;
}

/* Titel wie H3 */
.blog-featured .blog-item .item-title{
  display: block !important;
  margin: 0 0 .65rem 0 !important;
  font-size: 1.25rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

/* Rote Trennlinie unter Titel */
.blog-featured .blog-item .item-title::after{
  content:"";
  display:block;
  width: 40px;
  height: 2px;
  margin-top: .55rem;
  background: var(--brandColor, #b30d1a);
  border-radius: 99px;
  opacity: .95;
}

/* Link-Optik */
.blog-featured .blog-item .item-title a{
  color: var(--svl-dark, #0f172a) !important;
  text-decoration: none !important;
}
.blog-featured .blog-item .item-title a:hover{
  color: var(--brandColor, #b30d1a) !important;
}

.blog-featured .svl-image-link{
  display:block;
}
.blog-featured .svl-image-link img{
  transition: transform .18s ease, filter .18s ease;
}
.blog-featured .svl-image-link:hover img{
  transform: scale(1.02);
  filter: brightness(.98);
}
/* ===== Detailseite: Einleitungsbild über der Überschrift ===== */
.com-content-article .svl-article-hero{
  margin: 0 0 18px 0;
}

.com-content-article .svl-article-hero img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

/* optional: kleiner Hover */
.com-content-article .svl-article-hero img{
  transition: transform .2s ease;
}
.com-content-article .svl-article-hero a:hover img{
  transform: scale(1.01);
}
/* Detailseite: Intro-Image über Überschrift */
.com-content-article .svl-article-hero{
  margin: 0 0 18px 0;
}

.com-content-article .svl-article-hero img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 14px;
}

.sv-board-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.sv-board-contact .sv-contact-row {
  margin-bottom: 10px;
}

.sv-board-columns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin-bottom: 40px;
}

.sv-board-column {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.sv-board-title {
  margin-bottom: 10px;
  font-size: 1.3rem;
}

.sv-contact-row {
  margin-bottom: 10px;
}

/* Responsive */
@media (max-width: 992px) {
  .sv-board-columns {
    grid-template-columns: 1fr;
  }
}
.sv-board-columns{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  margin-bottom:40px;
}

.sv-board-column{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.sv-board-title{
  margin:0 0 6px;
  font-size:1.3rem;
}

.sv-board-group{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
}

.sv-board-group--two{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px;
}

/* Kontakt 2/2 */
.sv-contact-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px 24px;
}

.sv-contact-row{
  margin:0;
}

/* Responsive */
@media (max-width: 992px){
  .sv-board-columns{ grid-template-columns:1fr; }
  .sv-board-group--two{ grid-template-columns:1fr; }
  .sv-contact-grid{ grid-template-columns:1fr; }
}
.sv-board-section{
  margin-bottom: 50px;
}

.sv-board-title{
  margin-bottom: 20px;
}

.sv-board-grid{
  display:grid;
  gap: 20px;
  margin-bottom: 20px;
}

.sv-board-grid--3{
  grid-template-columns: repeat(3, 1fr);
}

.sv-board-grid--2{
  grid-template-columns: repeat(2, 1fr);
}

/* Kontakt 2x2 */
.sv-contact-grid{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 30px;
}

/* Responsive */
@media (max-width: 992px){
  .sv-board-grid--3,
  .sv-board-grid--2,
  .sv-contact-grid{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   ABSTÄNDE: Hero -> erster Content / Modulüberschriften
   ========================================================= */

/* Abstand unter dem Hero (damit Überschriften nicht so nah dran kleben) */
.svl-hero {
  margin-bottom: 24px;
}

/* Extra Luft oben im Main-Container (optional, falls Hero trotzdem zu knapp wirkt) */
.container.svl-main {
  padding-top: 8px;
}

/* Modul-Überschriften etwas “luftiger” */
.moduletable > h3 {
  margin-top: 18px;
  margin-bottom: 12px;
}

/* =========================================================
   ABSTAND: Content-Top -> Content-Bottom (Sponsoren Slider Bereich)
   ========================================================= */

/* Bereich vor dem Sponsoren-Slider */
.svl-content-bottom {
  margin-top: 28px;
}

/* Falls du noch mehr Abstand willst: 36px / 44px testen */

/* =========================================
   MEHR ABSTAND zwischen Content-Top
   und svl_content_bottom (Sponsoren etc.)
   ========================================= */

.svl-content-bottom {
  margin-top: 48px;   /* Standard: 28px – wir erhöhen deutlich */
  padding-top: 12px;  /* sorgt für mehr Luft innerhalb */
}

.svl-content-bottom .moduletable > h3 {
  margin-top: 24px;
}

/* =========================================================
   FOOTER: Überschriften + Trennstriche weiß (nur unten im Footer)
   ========================================================= */

.svl-footer .moduletable > h3 {
  color: #fff;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 14px;
}

/* der "Strich" unter der Überschrift */
.svl-footer .moduletable > h3::after {
  content: "";
  display: block;
  height: 3px;
  width: 62px;
  background: #fff;
  margin-top: 10px;
  border-radius: 2px;
}

/* Optional: Footer Links etwas heller */
.svl-footer a {
  color: rgba(255,255,255,0.85);
}
.svl-footer a:hover {
  color: #fff;
}
/* ==============================================
   ARTIKELDETAIL: Intro-Bild über Überschrift
   100% zuverlässig zentriert
   ============================================== */

/* Wrapper wird selbst zentriert */
.com-content-article .svl-article-intro-image{
  max-width: 820px;          /* <- Bildbreite steuern */
  margin: 0 auto 28px;       /* <- zentriert */
  padding: 0;
  text-align: center;        /* Fallback, falls irgendwas inline ist */
  clear: both;               /* falls irgendwo floats reinfunken */
}

/* Standard: Querformat -> crop (sieht modern aus) */
.com-content-article .svl-article-intro-image img{
  width: 100%;
  max-height: 400px;
  object-fit: cover;
  border-radius: 16px;

  display: block;
  margin: 0 auto;
  float: none !important;
}

/* Hochformat: komplettes Bild anzeigen (kein Crop) */
.com-content-article .svl-article-intro-image.is-portrait img{
  max-height: 520px;      /* ggf. anpassen */
  object-fit: contain;
  background: #0f172a0d;  /* dezenter Hintergrund für freie Flächen */
}


/* falls Joomla/Template figure/align Klassen setzt */
.com-content-article .svl-article-intro-image figure,
.com-content-article .svl-article-intro-image .item-image,
.com-content-article .svl-article-intro-image .pull-left,
.com-content-article .svl-article-intro-image .pull-right,
.com-content-article .svl-article-intro-image .left,
.com-content-article .svl-article-intro-image .right{
  float: none !important;
  margin: 0 auto !important;
}

/* =========================================================
   Artikel-Detailseite: Lesebreite schmäler + zentriert
   ========================================================= */

/* Container der Detailansicht */
.com-content-article.item-page{
  max-width: 820px;   /* <- hier kannst du z.B. 760 / 860 testen */
  margin-left: auto;
  margin-right: auto;
}

/* Textblock/Body etwas luftiger (optional) */
.com-content-article__body{
  line-height: 1.7;
}

/* Intro-Bild bleibt zentriert und passt sich an die neue Breite an */
.com-content-article .svl-article-intro-image{
  margin-left: auto;
  margin-right: auto;
}
/* Zugriffe ausblenden (Blog + Artikel) */
dl.article-info dd.hits,
dl.article-info .hits{
  display: none !important;
}

/* =========================================================
   SVL Lightbox (fix: Hochformat nicht abschneiden, Caption optional,
   Fenster etwas kleiner als Viewport)
   ========================================================= */

body.svl-lightbox-open { overflow: hidden; }

.svl-lightbox{
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;

  /* kleineres Fenster */
  --lb-inset: 40px;        /* mehr Abstand zum Rand */
  --lb-maxw: 900px;        /* deutlich schmäler */
  --lb-maxh: 82vh;         /* niemals höher als 82% */
  --lb-caption-h: 0px;
}

.svl-lightbox.is-open{ display: block; }

.svl-lightbox__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.72);
}

/* Caption nur wenn vorhanden */
.svl-lightbox.has-caption{ --lb-caption-h: 84px; }

@media (max-width: 768px){
  .svl-lightbox{
    --lb-inset: 16px;
    --lb-maxw: 94vw;
    --lb-maxh: 86vh;
    --lb-caption-h: 0px;
  }
  .svl-lightbox.has-caption{ --lb-caption-h: 72px; }
}

/* Stage: kein "1fr auto", damit Caption nicht ungewollt Höhe klaut */
.svl-lightbox__stage{
  position: absolute;
  inset: var(--lb-inset);
  display: grid;
  grid-template-rows: auto 1fr auto; /* Close + Viewport + Caption */
  align-items: center;
  justify-items: center;
  pointer-events: none;
}

/* Viewport ist das "Fenster" - bewusst kleiner als Vollbild */
.svl-lightbox__viewport{
  width: 100%;
  max-width: var(--lb-maxw);

  /* Wichtig: genug Platz fürs Bild, abhängig ob Caption da ist */
  max-height: min(var(--lb-maxh), calc(100vh - (var(--lb-inset) * 2) - var(--lb-caption-h) - 30px));

  display: grid;
  place-items: center;
  pointer-events: auto;
  user-select: none;
}

/* Bild: immer contain -> Hochformat nie abschneiden */
.svl-lightbox__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;

  object-fit: contain;

  border-radius: 14px;
  background: rgba(255,255,255,.04);
}

/* Caption nur wenn Inhalt vorhanden */
.svl-lightbox__caption{
  pointer-events: auto;
  margin-top: 10px;
  max-width: min(920px, 100%);
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 14px;
  line-height: 1.35;
  text-align: center;
}

.svl-lightbox__caption:empty{ display: none; }

/* Close / Nav */
.svl-lightbox__close{
  pointer-events: auto;
  position: absolute;
  top: 6px;
  right: 8px;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 12px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 30px;
  line-height: 44px;
  cursor: pointer;
}

.svl-lightbox__nav{
  pointer-events: auto;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: rgba(0,0,0,.55);
  color: #fff;
  font-size: 34px;
  line-height: 48px;
  cursor: pointer;
}

.svl-lightbox__prev{ left: 8px; }
.svl-lightbox__next{ right: 8px; }

@media (max-width: 768px){
  .svl-lightbox__nav{
    width: 44px;
    height: 44px;
    font-size: 30px;
    line-height: 44px;
  }
}
/* Default bleibt wie gehabt */
.svl-lightbox__img{
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Desktop: Portrait deutlich kleiner */
@media (min-width: 769px){
  .svl-lightbox__img.is-portrait{
    max-height: 72vh;   /* kleiner als vorher */
    max-width: 52vw;    /* verhindert „zu breit“ bei sehr großen Portraits */
  }
}

/* Mobile: Portrait darf größer bleiben (da sonst zu klein) */
@media (max-width: 768px){
  .svl-lightbox__img.is-portrait{
    max-height: 82vh;
    max-width: 92vw;
  }
}

/* =========================================================
   ARCHIV / KATEGORIE - PAGINATION LAYOUT FIX
   ========================================================= */

.pagination,
.pagination__wrapper,
nav.pagination__wrapper {
  width: 100%;
}

/* Joomla Pagination Wrapper sauber ausrichten */
.pagination__wrapper,
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap; /* wichtig für Mobil */
  margin-top: 22px;
}

/* Zahlenblock */
ul.pagination {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Einzelne Seiten */
ul.pagination > li > a,
ul.pagination > li > span {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 44px;
  height: 44px;
  padding: 0 14px;

  border-radius: 12px;
  border: 1px solid rgba(15, 23, 42, .12);
  background: #fff;

  font-weight: 700;
  text-decoration: none;
  line-height: 1;
}

/* Hover */
ul.pagination > li > a:hover {
  border-color: rgba(179, 13, 26, .5);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* Aktive Seite */
ul.pagination > li.active > span,
ul.pagination span[aria-current="page"] {
  background: var(--brandColor, #b30d1a);
  border-color: var(--brandColor, #b30d1a);
  color: #fff;
}

/* Seiteninfo (Seite 2 von 26) */
.pagination__pages,
.pagination .counter,
.pagination-counter {
  font-size: 14px;
  color: rgba(15, 23, 42, .75);
  white-space: nowrap;
}

/* Falls Joomla das als div.text-muted ausgibt */
.pagination + .counter,
.pagination ~ .counter {
  margin-left: auto;
}

/* Desktop: Seiteninfo rechts */
@media (min-width: 768px) {
  .pagination__wrapper {
    justify-content: center;
    position: relative;
  }

  .pagination__wrapper .pagination-counter,
  .pagination__wrapper .counter {
    position: absolute;
    right: 0;
  }
}

/* Mobil: alles untereinander mittig */
@media (max-width: 767px) {
  .pagination__wrapper {
    flex-direction: column;
    gap: 14px;
  }

  .pagination__wrapper .pagination-counter,
  .pagination__wrapper .counter {
    position: static;
    text-align: center;
  }

  ul.pagination > li > a,
  ul.pagination > li > span {
    min-width: 38px;
    height: 38px;
    font-size: 14px;
  }
}

/* Pagination-Container sauber layouten */
.com-content-category-blog__navigation {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Seitenzahlen zentrieren */
.com-content-category-blog__navigation ul.pagination {
  margin: 0;
  justify-content: center;
}

/* "Seite x von y" rechts (Desktop) */
.com-content-category-blog__navigation .pagination__counter,
.com-content-category-blog__navigation p.counter,
.com-content-category-blog__navigation .counter {
  margin: 0;
  white-space: nowrap;
}

/* Mobil: alles schön zentriert untereinander */
@media (max-width: 768px) {
  .com-content-category-blog__navigation {
    flex-direction: column;
    gap: 10px;
  }
}

/* Archiv/Kategorieblog: "Links"-Liste (1. 2. 3. 4.) ausblenden */
.com-content-category-blog .com-content-blog__links {
  display: none !important;
}
.pagination .svl-page-first .page-link,
.pagination .svl-page-last .page-link{
  font-weight: 700;
}

/* =========================================================
   SVL Menü: Desktop Hover-Dropdowns stabil (ohne klicken)
   ========================================================= */
@media (hover: hover) and (pointer: fine) {

  /* Untermenüs standardmäßig ausblenden (Desktop) */
  .svl-nav .mod-menu li.deeper.parent > ul.mod-menu__sub{
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
  }

  /* Öffnen bei Hover ODER Tastatur-Fokus */
  .svl-nav .mod-menu li.deeper.parent:hover > ul.mod-menu__sub,
  .svl-nav .mod-menu li.deeper.parent:focus-within > ul.mod-menu__sub{
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Wichtig: Hover-Trigger ist das ganze LI – nicht nur der Button/Text */
  .svl-nav .mod-menu li.deeper.parent{
    position: relative;
  }

  /* Hover-Gap Killer: unsichtbare "Brücke" zwischen Menüpunkt und Dropdown
     -> verhindert das sofortige Zuklappen beim Diagonal-Überfahren */
  .svl-nav .mod-menu li.deeper.parent::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 14px; /* <-- HIER kannst du schrauben: 10-22px */
  }

  /* Falls ein Submenü seitlich aufklappt (2. Ebene), auch dort Hover-Gap abfangen */
  .svl-nav .mod-menu li.deeper.parent > ul.mod-menu__sub > li.deeper.parent{
    position: relative;
  }
  .svl-nav .mod-menu li.deeper.parent > ul.mod-menu__sub > li.deeper.parent::after{
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 100%;
    width: 14px; /* <-- HIER schrauben für seitlichen Gap */
  }

  /* Optional: Buttons auf Desktop "neutralisieren", damit Hover führt.
     (Wir verstecken sie NICHT, damit Mobil nicht leidet – nur Desktop Verhalten) */
  .svl-nav .mod-menu .mod-menu__toggle-sub{
    cursor: default;
  }
}

@media (hover: hover) and (pointer: fine) {

  /* show-menu auf Desktop NICHT dauerhaft offen lassen */
  .svl-nav .mod-menu li.deeper.parent > ul.mod-menu__sub.show-menu{
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }

  /* Untermenüs standardmäßig ausblenden (Desktop) */
  .svl-nav .mod-menu li.deeper.parent > ul.mod-menu__sub{
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, visibility .15s ease;
  }

  /* Öffnen per HOVER */
  .svl-nav .mod-menu li.deeper.parent:hover > ul.mod-menu__sub{
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Öffnen per Tastatur (nur wenn NICHT “mouse mode”) */
  body:not(.svl-using-mouse) .svl-nav .mod-menu li.deeper.parent:focus-within > ul.mod-menu__sub{
    display: block;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  /* Hover-Gap Bridge wie zuvor */
  .svl-nav .mod-menu li.deeper.parent{ position: relative; }
  .svl-nav .mod-menu li.deeper.parent::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;
    height:14px; /* <- hier bei Bedarf 10–22px */
  }

  .svl-nav .mod-menu li.deeper.parent > ul.mod-menu__sub > li.deeper.parent{ position: relative; }
  .svl-nav .mod-menu li.deeper.parent > ul.mod-menu__sub > li.deeper.parent::after{
    content:"";
    position:absolute;
    top:0; bottom:0;
    left:100%;
    width:14px; /* <- hier bei Bedarf 10–22px */
  }
}

/* =========================================================
   Artikel-Detailseite: Sidebars ausblenden + Content volle Breite
   (greift über JS-Klasse .svl-is-article)
   ========================================================= */

body.svl-is-article .svl_sidebar_left,
body.svl-is-article .svl_sidebar_right,
body.svl-is-article .svl-main > .row.g-4 > aside{
  display: none !important;
}

/* Main auf 100% ziehen (Bootstrap Grid überschreiben) */
body.svl-is-article .svl-main > .row.g-4 > main#main-content{
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
}

/* falls Joomla/Template dem main noch col-lg-6 gibt */
body.svl-is-article main#main-content.col-lg-6{
  flex: 0 0 100% !important;
  max-width: 100% !important;
}

/* =========================================================
   Artikel-Body Bilder: niemals über den Rand, Portrait/Huge = contain + max-height
   ========================================================= */


/* Basis: alle Bilder im Artikelbody sauber responsive */
.com-content-article.item-page .com-content-article__body img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 14px auto;
}