/* =========================================================
   SV Laufen – user.css (clean, Joomla 6, Cassiopeia-nah)
   ========================================================= */

/* ---------- Variablen / Grundlayout ---------- */
:root{
  --svl-red: var(--brandColor, #FA0202); /* SVL Rot */
  --svl-dark: #0f172a;
  --svl-bg: #f6f7f9;
  --svl-card: #ffffff;
  --svl-radius: 16px;
  --svl-shadow: 0 10px 30px rgba(0,0,0,.07);
}

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

/* “Modul bearbeiten …” / Frontend-Edit-Links optisch 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; }

/* ---------- Hero (Banner) FULL WIDTH ---------- */
.svl-hero{
  margin:0;
  width:100%;
}

/* Wenn Hero-Modul einfach <img> ausgibt */
.svl-hero img{
  width:100%;
  height: clamp(360px, 45vw, 640px);
  object-fit: cover;
  object-position: center 40%;
  display:block;
}

/* Optionaler Wrapper */
.svl-hero .svl-hero-media img{
  width:100%;
  height: clamp(360px, 45vw, 640px);
  object-fit: cover;
  object-position: center 40%;
  display:block;
}

/* ---------- Main spacing ---------- */
.svl-main{
  padding-top: 2rem;
  padding-bottom: 2rem;
}

/* ---------- Beiträge / Blog: 2 Spalten, Cards ---------- */
.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);
  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;
}

/* Readmore Button */
.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: über gesamte Breite ---------- */
/* Da svl_content_bottom nun außerhalb der Row liegt, brauchen wir nur noch “cleanes” Styling */
.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;
}

.svl-footer .mod-title,
.svl-footer h3,
.svl-footer h4{
  color:#fff;
  font-weight: 900;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-size: 1rem;
  margin: 0 0 .75rem 0;
}

/* 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;
}
.svl-footer ul a{
  display: inline-block;
  color: #fff;
  text-decoration: none;
}
.svl-footer ul a:hover{
  text-decoration: underline;
}

/* Copyright-Zeile */
.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;
}

/* ---------- 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 übernommen)
   (UNVERÄNDERT übernommen – nur hier am Ende belassen)
   ========================================================= */

/* --- 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 }

/* =========================================================
   HEADER MENU – clean (wie Screenshot 2) + Dropdowns
   ========================================================= */

.svl-header .mod-menu{
  list-style: none;
  display: flex;
  gap: 1.25rem;              /* mehr Luft zwischen Punkten */
  margin: 0;
  padding: 0;
  align-items: center;
  flex-wrap: wrap;
}

/* Top-Level Links */
.svl-header .mod-menu > li{
  position: relative;        /* nötig für Dropdown-Position */
}

.svl-header .mod-menu > li > a{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .35rem 0;         /* clean: kein Pill-Padding */
  border-radius: 0;          /* wichtig: keine Pills */
  background: transparent;   /* wichtig */
  font-weight: 800;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--svl-dark);
  text-decoration: none;
  border-bottom: 2px solid transparent; /* Active-Line */
  transition: color .15s ease, border-color .15s ease;
}

/* Hover */
.svl-header .mod-menu > li > a:hover,
.svl-header .mod-menu > li > a:focus{
  color: var(--svl-red);
  border-bottom-color: color-mix(in srgb, var(--svl-red) 55%, transparent);
}

/* Active (current/active je nach Joomla Output) */
.svl-header .mod-menu > li.active > a,
.svl-header .mod-menu > li.current > a{
  color: var(--svl-red);
  border-bottom-color: var(--svl-red);
}

/* Dropdown-Caret (Joomla hängt meist ein <span class="icon-angle-down"> o.ä. an)
   Wir geben bei Parent-Items einen kleinen Pfeil via CSS dazu */
.svl-header .mod-menu > li.parent > a::after{
  content: "▾";
  font-size: .9em;
  line-height: 1;
  opacity: .75;
  transform: translateY(-1px);
}

/* =========================================================
   Dropdown / Submenu (Joomla: ul.nav-child)
   ========================================================= */

.svl-header .mod-menu ul,
.svl-header .mod-menu .nav-child{
  list-style: none;
  margin: 0;
  padding: .55rem;
}

/* Submenu Container */
.svl-header .mod-menu > li > ul,
.svl-header .mod-menu > li > .nav-child{
  position: absolute;
  top: calc(100% + .65rem);
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
  display: none;             /* default zu */
  z-index: 1000;
}

/* Dropdown Items */
.svl-header .mod-menu > li > ul a,
.svl-header .mod-menu > li > .nav-child a{
  display: block;
  padding: .55rem .65rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--svl-dark);
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: none;      /* Unterpunkte normal lesbar */
  border: 0;
}

/* Hover in Dropdown */
.svl-header .mod-menu > li > ul a:hover,
.svl-header .mod-menu > li > .nav-child a:hover{
  background: color-mix(in srgb, var(--svl-red) 10%, transparent);
  color: var(--svl-red);
}

/* Active im Dropdown */
.svl-header .mod-menu > li > ul li.active > a,
.svl-header .mod-menu > li > .nav-child li.active > a{
  background: color-mix(in srgb, var(--svl-red) 14%, transparent);
  color: var(--svl-red);
}

/* Desktop: Dropdown bei Hover oder Tastatur-Fokus öffnen */
@media (min-width: 992px){
  .svl-header .mod-menu > li:hover > ul,
  .svl-header .mod-menu > li:hover > .nav-child,
  .svl-header .mod-menu > li:focus-within > ul,
  .svl-header .mod-menu > li:focus-within > .nav-child{
    display: block;
  }
}

/* Mobile: Dropdowns nicht per Hover erzwingen (Joomla/Bootstrap Klick bleibt möglich) */
@media (max-width: 991.98px){
  .svl-header .mod-menu{
    gap: .75rem;
  }
  .svl-header .mod-menu > li > ul,
  .svl-header .mod-menu > li > .nav-child{
    position: static;
    display: block;          /* auf mobil einfach untereinander */
    box-shadow: none;
    border: 0;
    padding: 0;
    margin-top: .35rem;
  }
  .svl-header .mod-menu > li > ul a,
  .svl-header .mod-menu > li > .nav-child a{
    padding: .45rem 0;
    border-radius: 0;
  }
}

/* ---------- Header / Menü (clean wie Screenshot 2) ---------- */
.svl-header{
  background:#fff;
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* Header-Layout (Logo links, Menü rechts) */
.svl-header .svl-header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
}

/* Falls du ein Logo-Modul mit Klasse svl-logo nutzt */
.svl-logo img{
  height:56px;
  width:auto;
  display:block;
}

/* ======= MAIN MENU (Joomla mod-menu) ======= */
.svl-nav .mod-menu{
  list-style:none;
  display:flex;
  gap: 1.8rem;                 /* “luftiger”, wie dein Screenshot */
  margin:0;
  padding:0;
  align-items:center;
  flex-wrap:wrap;
}

/* Einheitliche Schrift – KEINE zufälligen Fettschriften */
.svl-nav .mod-menu > li > a{
  display:inline-block;
  padding: .25rem 0;           /* kein Pill/Block */
  border-radius: 0;
  font-weight: 600;            /* überall gleich */
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--svl-dark);
  text-decoration:none;
  background: transparent !important;
  box-shadow:none !important;
  outline: none;
}

/* Hover + Focus: nur Farbe, kein rotes Rechteck */
.svl-nav .mod-menu > li > a:hover,
.svl-nav .mod-menu > li > a:focus{
  color: var(--svl-red);
  background: transparent !important;
}

/* Active/Current: nur Farbe, leicht stärker – aber nicht “fett fett” */
.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;
  background: transparent !important;
}

/* verhindert den roten Block beim Klicken (active state) */
.svl-nav .mod-menu a:active{
  background: transparent !important;
}

/* ======= DROPDOWNS / SUBMENÜS ======= */
.svl-nav .mod-menu li{
  position:relative;
}

/* Submenu-Container */
.svl-nav .mod-menu li > ul{
  list-style:none;
  margin:0;
  padding: .55rem 0;
  min-width: 220px;

  position:absolute;
  top: calc(100% + 10px);
  left: 0;
  z-index: 9999;

  display:none;                /* default zu */
  background:#fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(15,23,42,.12);
}

/* Submenu-Links */
.svl-nav .mod-menu li > ul > li > a{
  display:block;
  padding: .55rem 1rem;
  font-weight: 600;
  letter-spacing: .2px;
  text-transform:none;         /* Submenu normal lesbar */
  color: var(--svl-dark);
  text-decoration:none;
  white-space:nowrap;
}

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

/* Desktop: Dropdown öffnet per Hover (und schließt wenn man weggeht) */
@media (min-width: 992px){
  .svl-nav .mod-menu li:hover > ul,
  .svl-nav .mod-menu li:focus-within > ul{
    display:block;
  }
}

/* Mobile: Dropdowns nicht absolut (damit es nicht “überlappt”) */
@media (max-width: 991.98px){
  .svl-nav .mod-menu{
    gap: .9rem;
  }

  .svl-nav .mod-menu li > ul{
    position:static;
    box-shadow:none;
    border: 0;
    border-left: 2px solid rgba(0,0,0,.10);
    border-radius: 0;
    margin-top: .35rem;
    padding: .25rem 0 .25rem .75rem;
  }

  /* auf Mobile öffnet per Fokus (tap) */
  .svl-nav .mod-menu li:focus-within > ul{
    display:block;
  }
}

/* =========================================
   FOOTER – Abstand zwischen Modulen
   ========================================= */

/* jedes Footer-Modul bekommt Abstand nach unten */
.svl-footer .moduletable{
  margin-bottom: 2.75rem;
}

/* optional: letzter Block ohne Abstand */
.svl-footer .moduletable:last-child{
  margin-bottom: 0;
}