/**
 * custom.css – HSV Vorarlberg
 * Version: 1.7.1
 * Updated: 2025-09-02
 */

/* ============================================================================
   0) Basis-Variablen (Typo, Farben, Abstände)
   ============================================================================ */
@font-face {
  font-family: 'Montserrat';
  src: url('/templates/shaper_helixultimate/fonts/Montserrat-Regular.woff2') format('woff2'),
       url('/templates/shaper_helixultimate/fonts/Montserrat-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('/templates/shaper_helixultimate/fonts/Montserrat-Bold.woff2') format('woff2'),
       url('/templates/shaper_helixultimate/fonts/Montserrat-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/templates/shaper_helixultimate/fonts/Roboto-Regular.woff2') format('woff2'),
       url('/templates/shaper_helixultimate/fonts/Roboto-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Roboto';
  src: url('/templates/shaper_helixultimate/fonts/Roboto-Bold.woff2') format('woff2'),
       url('/templates/shaper_helixultimate/fonts/Roboto-Bold.woff') format('woff');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* 1) Preloader komplett abschalten (blockiert die Anzeige bis "window.load") */
.sp-pre-loader { display: none !important; }

/* 2) Hero/Header-Bilder nicht lazy laden (nur Stil-Fallback – die eigentliche Umstellung ist unten im HTML) */
.article-full-image img,
.logo img { opacity: 1; }


/* Bootstrap/Global */
:root{
  --bs-body-font-family:'Roboto',Arial,sans-serif;
  --font-headline:'Montserrat',Arial,sans-serif;
  --font-body:'Roboto',Arial,sans-serif;

  /* HSV Farbwelt */
  --color-primary:#D60000;          /* HSV Rot */
  --color-secondary:#C7A358;        /* Gold */
  --color-text:#333;
  --color-headline:#000;
  --color-bg:#fff;
  --color-bg-alt:#F5F5F5;
  --brand-color: #c21e1e;
  --brand-shadow: rgba(194, 30, 30, .35);

  /* UI Tokens */
  --radius:12px;
  --shadow-sm:0 1px 4px rgba(0,0,0,.05);
  --shadow-md:0 4px 12px rgba(0,0,0,.12);
  --shadow-lg:0 8px 20px rgba(0,0,0,.2);
  --gap:1.5rem;

  /* Fancybox Buttons */
  --f-button-bg:rgba(0,0,0,.5);
  --f-button-hover-bg:rgba(0,0,0,.8);
  --f-button-active-bg:rgba(0,0,0,.8);
}

/* Basis */
body{scroll-behavior:smooth;color:var(--color-text);background:var(--color-bg);font-family:var(--font-body);}
h1,h2,h3,h4,h5{font-family:var(--font-headline);}
#sp-header{margin-bottom:15px;}
.view-featured .blog .article-list .article .featured-article-badge,
.article-list .article .featured-article-badge{display:none!important;}

/* ============================================================================
   1) Grids (Newsstream, Sektionen)
   ============================================================================ */
.mod-custom.custom .newsstream-grid{
  display:grid!important; gap:var(--gap)!important;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr))!important;
  margin-bottom:2rem!important;
}
.mod-custom.custom .newsstream-grid .news-teaser{width:100%!important;}

.sektionen-grid{
  display:grid; gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  justify-items:center;
}
.sektionen-grid .kachel{width:100%;max-width:360px;}
.sektionen-grid>*{justify-self:center;}

/* ============================================================================
   2) Navigation
   ============================================================================ */
.sp-megamenu-parent>li>a,.sp-megamenu-parent>li>span{
  font:500 16px/1 var(--font-headline);
  transition:color .2s ease,transform .2s ease,text-decoration-color .2s ease;
}
.sp-megamenu-parent>li>a:hover,.sp-megamenu-parent>li>span:hover{
  color:var(--color-secondary);
  text-decoration:underline;
  transform:translateY(-2px);
}

/* ============================================================================
   3) Cards/Teaser
   ============================================================================ */
.mod-custom.custom .news-teaser{
  position:relative;background:var(--sektion-bg,var(--color-bg-alt));
  border:1px solid rgba(0,0,0,.12); border-radius:var(--radius);
  padding:1rem; overflow:hidden;
  transition:transform .3s ease, box-shadow .3s ease;
}
.mod-custom.custom .news-teaser::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; height:100%;
  background:transparent; border-top-left-radius:var(--radius); border-bottom-left-radius:var(--radius);
  transition:background-color .3s ease;
}
.mod-custom.custom .news-teaser:hover{transform:translateY(-4px); box-shadow:var(--shadow-md);}
.mod-custom.custom .news-teaser:hover::before{background:var(--sektion-color,var(--color-primary));}
.mod-custom.custom .news-teaser img{
  display:block;width:100%;height:auto;max-height:350px;object-fit:cover;object-position:center;
  margin-bottom:.75rem;border-radius:8px;
}

.kachel{
  background:var(--color-bg-alt); text-align:center;
  border:1px solid rgba(0,0,0,.12); border-radius:var(--radius);
  padding:1rem; box-shadow:var(--shadow-sm);
  transition:transform .4s ease, box-shadow .4s ease; position:relative; overflow:hidden;
}
.kachel::before{
  content:""; position:absolute; left:0; top:0; width:5px; height:100%;
  background:transparent; border-top-left-radius:var(--radius); border-bottom-left-radius:var(--radius);
  transition:background-color .3s ease;
}
.kachel:hover{transform:translateY(-5px); box-shadow:var(--shadow-lg);}
.kachel:hover::before{background:var(--sektion-color,var(--color-primary));}

/* Artikel-Auflistung mit Sektionsmarker */
.article-item{border-left:4px solid transparent;padding-left:1rem;margin-bottom:2rem;transition:border-color .3s ease, box-shadow .3s ease;}
.article-item:hover{box-shadow:var(--shadow-md);}
.article-item[class*="sektion-"]{border-left-color:var(--sektion-color);} /* generisch für alle Sektionen */

/* ============================================================================
   4) Artikel-Layout: Bilder mit Textfluss
   ============================================================================ */
/* Figure als Inline-Block, damit Text sauber fließt */
.article-img{max-width:45%;margin:0 1.5rem 1rem 0;display:inline-block;vertical-align:top;}
.article-img.right{float:right;margin:0 0 1rem 1.5rem;}
.article-img.left{float:left;margin:0 1.5rem 1rem 0;}
.article-img img{border-radius:var(--radius);width:100%;height:auto;display:block;}
.article-img figcaption{font-size:.9rem;font-style:italic;color:#666;margin-top:.4rem;line-height:1.4;}
/* Clearfix für Container, der floating Figures enthält */
.com-content-article::after{content:"";display:block;clear:both;}
/* Mobile: Bilder unter Text (volle Breite) */
@media (max-width: 768px){
  .article-img,.article-img.left,.article-img.right{float:none;max-width:100%;margin:0 0 1rem 0;display:block;}
}

/* Introbild zentriert (Joomla Standardklasse) */
.article-full-image.float-img-center{ text-align:center; margin:20px 0; }
.article-full-image.float-img-center img{ display:inline-block; vertical-align:middle; border-radius:var(--radius); }

/* ============================================================================
   5) Buttons/CTAs
   ============================================================================ */
.btn-hsv-contact{
  --hsv-red:#D60000; --hsv-gold:#C7A358; --hsv-text:#fff;
  display:inline-flex; align-items:center; gap:.5rem;
  background:var(--hsv-red); color:var(--hsv-text); border:2px solid var(--hsv-gold);
  padding:.65rem 1.1rem; border-radius:999px; font-weight:700; letter-spacing:.2px; text-decoration:none;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
  transition:transform .12s ease, box-shadow .12s ease, background .2s ease;
}
.btn-hsv-contact:hover,.btn-hsv-contact:focus{ background:#b80000; box-shadow:0 8px 22px rgba(0,0,0,.22); transform:translateY(-1px); color:#fff; text-decoration:none; }
.btn-hsv-contact:active{ transform:translateY(0); }
.btn-hsv-contact.btn-sm{ padding:.45rem .9rem; font-size:.95rem; }
.btn-hsv-contact.btn-lg{ padding:.85rem 1.25rem; font-size:1.05rem; }

/* ============================================================================
   6) Fancybox (Slider-Buttons)
   ============================================================================ */
/* Fancybox Buttons (halbtransparent, Hover dunkler) */
.fancybox__button{ background-color:var(--f-button-bg)!important; transition:background-color .3s ease; }
.fancybox__button:hover{ background-color:var(--f-button-hover-bg)!important; }
.fancybox__button:active{ background-color:var(--f-button-active-bg)!important; }

/* ============================================================================
   7) Akkordeon
   ============================================================================ */
.accordion-item{border:1px solid #ddd;border-radius:5px;margin-bottom:1rem;background:#fff;overflow:hidden;}
.accordion-button{font-weight:600;font-size:1.05rem;border:0;transition:all .3s ease;color:#111;}
.accordion-button:focus{box-shadow:none;}
.accordion-body{padding:1rem 1.25rem;font-size:.95rem;line-height:1.6;color:#333;}

/* ============================================================================
   8) Kachel-Artikel (Beiträge – Kategorie)
   ============================================================================ */
.hsv-kacheln{ --accent:var(--sektion-color,var(--color-primary)); --shadow:var(--sektion-shadow,rgba(0,0,0,.18)); --card-h:320px; --body-h:120px; }
.hsv-kacheln.kachel-grid{
  display:grid; gap:20px; grid-template-columns:repeat(3,1fr);

  /* NEU: Container Query aktivieren */
  container-type:inline-size;       /* erlaubt @container auf Basis Innenbreite */
  container-name:kachelgrid;        /* benannter Container */
}
@media (min-width:1200px){ .hsv-kacheln.kachel-grid.kachel-4{ grid-template-columns:repeat(4,1fr);} }
@media (max-width:991px){ .hsv-kacheln.kachel-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:575px){ .hsv-kacheln.kachel-grid{ grid-template-columns:1fr; } }

.hsv-card{
  position:relative; display:flex; flex-direction:column; height:var(--card-h);
  background:#fff; border-radius:var(--radius); overflow:hidden; text-decoration:none;
  box-shadow:0 8px 24px -8px var(--shadow); transition:transform .18s ease, box-shadow .18s ease;
}
.hsv-card:hover{ transform:translateY(-2px); box-shadow:0 12px 32px -8px var(--shadow); }
.hsv-card__stripe{ position:absolute; inset:0 auto 0 0; width:8px; background:var(--sektion-color,var(--accent)); }
.hsv-card__image{ height:calc(var(--card-h) - var(--body-h)); background:#f2f2f2; flex:0 0 auto; }
.hsv-card__image img{ width:100%; height:100%; object-fit:cover; display:block; }
.hsv-card__body{ height:var(--body-h); padding:12px 14px 14px 16px; display:flex; flex-direction:column; gap:8px; background:var(--sektion-bg,rgba(0,0,0,.04)); }
.hsv-card__title{ font-size:1.05rem; line-height:1.25; color:#111; margin:0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.hsv-card__intro{ margin:0; color:#444; font-size:.95rem; line-height:1.35; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; }
.hsv-card__btn{ margin-top:auto; align-self:flex-start; display:inline-block; padding:.35rem .7rem; border-radius:8px; font-size:.9rem; border:1px solid var(--accent); color:var(--accent); background:transparent; }
.hsv-card:hover .hsv-card__btn{ background:var(--accent); color:#fff; }
.hsv-kacheln.card-h-280{ --card-h:280px; --body-h:100px; }
.hsv-kacheln.card-h-320{ --card-h:320px; --body-h:110px; }
.hsv-kacheln.card-h-360{ --card-h:360px; --body-h:140px; }
.hsv-kacheln.card-h-400{ --card-h:400px; --body-h:160px; }

/* ============================================================================
   9) DPCalendar – HSV Theme
   ============================================================================ */
/* Buttons */
.fc .fc-button,.dpc-button,button.dpc-btn,a.dpc-btn{
  background:#D60000;border:0;color:#fff;border-radius:10px;padding:.5rem .9rem;font-weight:600;
}
.fc .fc-button:hover,.dpc-button:hover,button.dpc-btn:hover,a.dpc-btn:hover{ background:#006D77; }
.fc .fc-button-primary:disabled{ opacity:.6; }
/* Titel & Filter */
.dpc-calendar .fc-toolbar-title,.dpc-calendar .dpc-heading{ font-weight:800; letter-spacing:.3px; color:#2C2C2C; }
.dpc-calendar .dpc-filters select,.dpc-calendar .dpc-filters input[type="search"],.dpc-calendar .dpc-filters .chosen-container{
  border-radius:10px;border:1px solid #ddd;background:#FAFAFA;
}
/* Kategorie-Badge (Default) */
.dpc-category-badge,.dpc-event__category{
  border-radius:999px;padding:.2rem .7rem;font-size:.82rem;font-weight:600;color:#fff;background:#006D77;
  box-shadow:0 0 0 1px rgba(0,0,0,.03), 0 2px 6px rgba(0,0,0,.06);
}
/* Monat */
.fc-theme-standard .fc-scrollgrid, .fc-theme-standard td, .fc-theme-standard th{ border-color:#eee; }
.fc .fc-daygrid-day-number{ font-weight:700; color:#2C2C2C; }
.fc .fc-daygrid-day-frame{ padding:6px; }
.fc .fc-daygrid-event{ background:#006D77;color:#fff;border:0;border-radius:8px;padding:2px 6px;box-shadow:0 1px 4px rgba(0,0,0,.05); }
.fc .fc-daygrid-event:hover{ background:#B8860B; color:#fff; }
.fc .fc-daygrid-day.fc-day-today{ background:rgba(184,134,11,.08); }
/* Listen */
.dpc-event-list .dpc-event,.dpc-events .dpc-event{
  background:#FAFAFA;border:1px solid #eee;border-left:5px solid #D60000;border-radius:12px;padding:1rem;margin-bottom:.9rem;box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.dpc-event .dpc-title a{ color:#2C2C2C; font-weight:800; }
.dpc-event .dpc-title a:hover{ color:#006D77; }
.dpc-event .dpc-meta{ color:#555; } .dpc-event .dpc-meta i{ opacity:.7; }
/* Detail */
.dpc-event-detail .dpc-title{ font-weight:900; color:#2C2C2C; }
.dpc-event-detail .dpc-actions a,.dpc-event-detail .dpc-actions button{ background:#006D77;color:#fff;border:0;border-radius:10px;padding:.55rem .95rem; }
.dpc-event-detail .dpc-actions a:hover,.dpc-event-detail .dpc-actions button:hover{ background:#B8860B; }
.dpc-event-detail hr{ border:0; border-top:2px solid rgba(184,134,11,.2); margin:1rem 0; }
/* Karten */
.dpc-map{ min-height:340px; border-radius:var(--radius); overflow:hidden; border:1px solid #eee; }
.leaflet-control-zoom a{ background:#006D77;color:#fff!important;border:0;box-shadow:0 2px 6px rgba(0,0,0,.15); }
.leaflet-control-zoom a:hover{ background:#B8860B; }
/* Formulare */
.dpc-form input[type="text"],.dpc-form input[type="email"],.dpc-form input[type="number"],.dpc-form input[type="datetime-local"],.dpc-form select,.dpc-form textarea{
  background:#FAFAFA;border:1px solid #ddd;border-radius:10px;padding:.55rem .7rem;
}
.dpc-form input:focus,.dpc-form select:focus,.dpc-form textarea:focus{ outline:none; border-color:#006D77; box-shadow:0 0 0 3px rgba(0,109,119,.15); }
.dpc-form .btn-primary,.dpc-booking button[type="submit"]{ background:#D60000;color:#fff;border:0;border-radius:10px;padding:.6rem 1rem;font-weight:700; }
.dpc-form .btn-primary:hover,.dpc-booking button[type="submit"]:hover{ background:#006D77; }
/* Links */
.dpc-calendar a,.dpc-events a{ color:#D60000; }
.dpc-calendar a:hover,.dpc-events a:hover{ color:#006D77; text-decoration:underline; }

/* Kategorie-spezifische Badge-Farben */
.dpc-event--category-hsv-fischen .dpc-category-badge,
.dpc-event[data-category-alias="hsv-fischen"] .dpc-category-badge{ background:var(--sektion-color,#1e88e5); box-shadow:0 0 6px var(--sektion-shadow,rgba(30,136,229,.3)); }
.dpc-event--category-hsv-bogenschiessen .dpc-category-badge,
.dpc-event[data-category-alias="hsv-bogenschiessen"] .dpc-category-badge{ background:var(--sektion-color,#8e24aa); box-shadow:0 0 6px var(--sektion-shadow,rgba(142,36,170,.3)); }
.dpc-event--category-hsv-schiessen .dpc-category-badge,
.dpc-event[data-category-alias="hsv-schiessen"] .dpc-category-badge{ background:var(--sektion-color,#c62828); box-shadow:0 0 6px var(--sektion-shadow,rgba(198,40,40,.3)); }
.dpc-event--category-hsv-alpin .dpc-category-badge,
.dpc-event[data-category-alias="hsv-alpin"] .dpc-category-badge{ background:var(--sektion-color,#2e7d32); box-shadow:0 0 6px var(--sektion-shadow,rgba(46,125,50,.3)); }
.dpc-event--category-hsv-dart .dpc-category-badge,
.dpc-event[data-category-alias="hsv-dart"] .dpc-category-badge{ background:var(--sektion-color,#f9a825); color:#111; box-shadow:0 0 6px var(--sektion-shadow,rgba(249,168,37,.3)); }
.dpc-event--category-hsv-fussball .dpc-category-badge,
.dpc-event[data-category-alias="hsv-fussball"] .dpc-category-badge{ background:var(--sektion-color,#1565c0); box-shadow:0 0 6px var(--sektion-shadow,rgba(21,101,192,.3)); }
.dpc-event--category-hsv-gymnastik .dpc-category-badge,
.dpc-event[data-category-alias="hsv-gymnastik"] .dpc-category-badge{ background:var(--sektion-color,#d81b60); box-shadow:0 0 6px var(--sektion-shadow,rgba(216,27,96,.3)); }
.dpc-event--category-hsv-hundesport .dpc-category-badge,
.dpc-event[data-category-alias="hsv-hundesport"] .dpc-category-badge{ background:var(--sektion-color,#5d4037); box-shadow:0 0 6px var(--sektion-shadow,rgba(93,64,55,.3)); }
.dpc-event--category-hsv-paddeln .dpc-category-badge,
.dpc-event[data-category-alias="hsv-paddeln"] .dpc-category-badge{ background:var(--sektion-color,#00897b); box-shadow:0 0 6px var(--sektion-shadow,rgba(0,137,123,.3)); }
.dpc-event--category-hsv-tauchen .dpc-category-badge,
.dpc-event[data-category-alias="hsv-tauchen"] .dpc-category-badge{ background:var(--sektion-color,#00acc1); box-shadow:0 0 6px var(--sektion-shadow,rgba(0,172,193,.3)); }

/* Monatskalender – Hinterlegung in Sektions-Ton */
.sektion-fischen     .fc .fc-daygrid-event{ background:var(--sektion-bg,rgba(30,136,229,.08)); }
.sektion-bogenschiessen .fc .fc-daygrid-event{ background:var(--sektion-bg,rgba(142,36,170,.08)); }
.sektion-schiessen   .fc .fc-daygrid-event{ background:var(--sektion-bg,rgba(198,40,40,.08)); }
.sektion-alpin       .fc .fc-daygrid-event{ background:var(--sektion-bg,rgba(46,125,50,.08)); }
.sektion-dart        .fc .fc-daygrid-event{ background:var(--sektion-bg,rgba(249,168,37,.08)); color:#111; }
.sektion-fussball    .fc .fc-daygrid-event{ background:var(--sektion-bg,rgba(21,101,192,.08)); }
.sektion-gymnastik   .fc .fc-daygrid-event{ background:var(--sektion-bg,rgba(216,27,96,.08)); }
.sektion-hundesport  .fc .fc-daygrid-event{ background:var(--sektion-bg,rgba(93,64,55,.08)); }
.sektion-paddeln     .fc .fc-daygrid-event{ background:var(--sektion-bg,rgba(0,137,123,.08)); }
.sektion-tauchen     .fc .fc-daygrid-event{ background:var(--sektion-bg,rgba(0,172,193,.08)); }

/* Dark Mode (optional) */
html.dark .dpc-event-list .dpc-event{ background:#111; border-color:#222; }
html.dark .dpc-event .dpc-title a{ color:#fff; }
html.dark .fc-theme-standard .fc-scrollgrid{ border-color:#2a2a2a; }
html.dark .fc .fc-daygrid-day-number{ color:#eee; }
html.dark .fc .fc-daygrid-event{ box-shadow:none; }

/* ============================================================================
   10) Sektionen-Design Tokens
   ============================================================================ */
.sektion-fischen       { --sektion-color:#1e88e5; --sektion-shadow:rgba(30,136,229,.3); --sektion-bg:rgba(30,136,229,.08); }
.sektion-bogenschiessen{ --sektion-color:#8e24aa; --sektion-shadow:rgba(142,36,170,.3); --sektion-bg:rgba(142,36,170,.08); }
.sektion-schiessen     { --sektion-color:#c62828; --sektion-shadow:rgba(198,40,40,.3); --sektion-bg:rgba(198,40,40,.08); }
.sektion-alpin         { --sektion-color:#2e7d32; --sektion-shadow:rgba(46,125,50,.3); --sektion-bg:rgba(46,125,50,.08); }
.sektion-dart          { --sektion-color:#f9a825; --sektion-shadow:rgba(249,168,37,.3); --sektion-bg:rgba(249,168,37,.08); }
.sektion-fussball      { --sektion-color:#1565c0; --sektion-shadow:rgba(21,101,192,.3); --sektion-bg:rgba(21,101,192,.08); }
.sektion-gymnastik     { --sektion-color:#d81b60; --sektion-shadow:rgba(216,27,96,.3); --sektion-bg:rgba(216,27,96,.08); }
.sektion-hundesport    { --sektion-color:#5d4037; --sektion-shadow:rgba(93,64,55,.3); --sektion-bg:rgba(93,64,55,.08); }
.sektion-paddeln       { --sektion-color:#00897b; --sektion-shadow:rgba(0,137,123,.3); --sektion-bg:rgba(0,137,123,.08); }
.sektion-tauchen       { --sektion-color:#00acc1; --sektion-shadow:rgba(0,172,193,.3); --sektion-bg:rgba(0,172,193,.08); }

/* ============================================================================
   11) Misc
   ============================================================================ */
/* Fehlerseite – Hintergrund abdunkeln */
body.error-page::before{content:"";background:inherit;opacity:.5;position:fixed;inset:0;z-index:-1;}

/* Utilities Mobile Tweaks */
@media (max-width:768px){
  .mod-custom.custom .newsstream-grid{ grid-template-columns:1fr!important; }
  .sektion-teaser,.news-teaser,.article-item{ padding:1rem; }
}

/* ============================================================================
   12) Container Queries – Komponenten reagieren auf ihren Container
   ============================================================================ */
/* 12.1 Kachel-Grid: Spalten & Höhen je Containerbreite */
@container kachelgrid (max-width: 520px){
  .hsv-kacheln.kachel-grid{ grid-template-columns:1fr; gap:14px; }
  .hsv-kacheln{ --card-h:300px; --body-h:120px; }
  .hsv-card__title{ -webkit-line-clamp:3; }
}
@container kachelgrid (min-width: 521px) and (max-width: 900px){
  .hsv-kacheln.kachel-grid{ grid-template-columns:repeat(2,1fr); gap:18px; }
  .hsv-kacheln{ --card-h:340px; --body-h:130px; }
}
@container kachelgrid (min-width: 901px){
  .hsv-kacheln.kachel-grid{ grid-template-columns:repeat(3,1fr); gap:20px; }
  .hsv-kacheln{ --card-h:360px; --body-h:140px; }
}

/* 12.2 Artikelcontainer: Bilder bei schmalen Spalten automatisch unter den Text */
.com-content-article{
  container-type:inline-size;   /* macht den Artikelbereich zum Container */
  container-name:article;
}
@container article (max-width: 620px){
  .article-img,.article-img.left,.article-img.right{
    float:none; max-width:100%; margin:0 0 1rem 0; display:block;
  }
}

/* ============================================================================
   13) A11y: Reduced Motion Support
   ============================================================================ */
@media (prefers-reduced-motion: reduce){
  /* Globale Animationen/Transitions minimieren */
  *{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  /* Konkrete UI-Elemente ohne Lift/Shadow-Sprünge */
  .kachel:hover,
  .mod-custom.custom .news-teaser:hover,
  .hsv-card:hover,
  .btn-hsv-contact:hover,
  .btn-hsv-contact:focus{
    transform:none !important;
    box-shadow:none !important;
  }
}


/* BLOG (Kategorieansicht) – kompakter, aufgeräumt */
:is(.hsv-blog, .hu.view-category.layout-blog .category-blog) {
  --title: clamp(1rem, 0.55vw + 0.95rem, 1.25rem);
  --meta: .9rem;
  --body: .97rem;
  --radius: 12px; /* hier den Bild-/Kartenradius zentral ändern */
}

/* Karten-Layout + Typo */
:is(.hsv-blog, .hu.view-category.layout-blog) .card {
  border-radius: var(--radius);
}
:is(.hsv-blog, .hu.view-category.layout-blog) .card .card-title a{
  font-size: var(--title);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .2px;
}
:is(.hsv-blog, .hu.view-category.layout-blog) .card .small{ font-size: var(--meta); }
:is(.hsv-blog, .hu.view-category.layout-blog) .card .card-text{
  font-size: var(--body);
  line-height: 1.55;
  max-width: 65ch;
  /* bessere Teaser-Lesbarkeit (3 Zeilen) */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}
:is(.hsv-blog, .hu.view-category.layout-blog) .card .card-body{ padding: .9rem 1rem 1rem; }

/* Bildcontainer + Bilder */
:is(.hsv-blog, .hu.view-category.layout-blog) .ratio{
  background:#f2f3f5;
  overflow: hidden; /* wichtig fürs Abrunden */
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}
:is(.hsv-blog, .hu.view-category.layout-blog) .ratio > img,
:is(.hsv-blog, .hu.view-category.layout-blog) .card-img-top{
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: block;
  border-top-left-radius: var(--radius);
  border-top-right-radius: var(--radius);
}

/* „Featured“-Badge in der Übersicht ausblenden */
.hu.view-category.layout-blog .badge.bg-danger{ display:none; }


/* -------------------------------------------
   CTA-Buttons: Sektion normal, Verein beim Hover
   Änderung: 2025-09-05 – default = --sektion-color,
             hover/focus = --brand-color
------------------------------------------- */

/* 1) Falls noch nicht vorhanden: globale Vereinsfarben 
ganz oben!! 

/* 2) Bootstrap-Buttons, die zusätzlich eine "sektion-*" Klasse tragen */
.btn.btn-primary[class*="sektion-"]{
  /* Hol dir die Sektionenwerte, fallback = Vereinsfarbe */
  --cta-color:  var(--sektion-color, var(--brand-color));
  --cta-shadow: var(--sektion-shadow, var(--brand-shadow));

  background-color: var(--cta-color);
  border-color:     var(--cta-color);
  color:#fff;

  box-shadow: 0 6px 16px var(--cta-shadow);
  transition: background-color .2s ease,
              border-color .2s ease,
              box-shadow .2s ease,
              transform .05s ease;
}

/* Hover/Fokus -> allgemeine Vereinsfarbe */
.btn.btn-primary[class*="sektion-"]:hover,
.btn.btn-primary[class*="sektion-"]:focus{
  background-color: var(--brand-color);
  border-color:     var(--brand-color);
  box-shadow: 0 10px 24px var(--brand-shadow);
  transform: translateY(-1px);
}

/* Active/pressed */
.btn.btn-primary[class*="sektion-"]:active{
  transform: translateY(0);
  box-shadow: 0 6px 16px var(--brand-shadow);
}


/* Sticky-Header Fallback */
#sp-header.is-sticky{
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  background: var(--bs-body-bg, #fff);
  box-shadow: 0 6px 18px rgba(0,0,0,.08);
}
.sticky-header-placeholder{ transition: height .2s ease; }

/* "Nach oben" Fallback / Verbesserung */
.sp-scroll-up{
  position: fixed;
  right: 16px; bottom: 16px;
  width: 44px; height: 44px;
  border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-color, #c21e1e);
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 1040;
}
.sp-scroll-up.show{ opacity: 1; visibility: visible; transform: translateY(0); }
.sp-scroll-up .fas{ font-size: 18px; line-height: 1; }