/* ==========================================================================
   HFW Villach - Template "hfw" (Joomla 4.4 / 5 / 6)
   Basis: Bootstrap 5 aus dem Joomla-Core (media/vendor/bootstrap).
   Danach laedt die bestehende Design-Schicht (custom.css, hfw-fresh-a/b/c.css,
   hfw-mobile.css) und zuletzt hfw-after.css.
   Mobile-first: Grundregeln fuer Handy, Erweiterungen per min-width.
   ========================================================================== */

/* ---------- Design-Tokens ---------- */
:root {
  --hfw-red: #c00d0e;
  --hfw-red-hover: #a30b0c;
  --hfw-red-light: #fff2f2;
  --hfw-dark: #1f272c;
  --hfw-footer: #1d2429;
  --hfw-footer-bar: #171d21;
  --hfw-text: #333;
  --hfw-text-strong: #2b3338;
  --hfw-muted: #6b7378;
  --hfw-surface: #f5f6f7;
  --hfw-border: #eceff1;
  --hfw-border-strong: #d5dadd;
  --hfw-topbar: #f5f5f5;
  --hfw-menu: #999;
  --hfw-radius: 8px;
  --hfw-radius-lg: 10px;
  --hfw-shadow: 0 2px 10px rgba(0, 0, 0, .08);
  --hfw-shadow-lg: 0 10px 26px rgba(0, 0, 0, .16);
  --hfw-header-h: 70px;
  --hfw-font: "Helvetica Neue", Helvetica, Arial, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Bootstrap-5-Variablen auf HFW-Werte */
  --bs-body-font-family: var(--hfw-font);
  --bs-body-font-size: 14px;
  --bs-body-line-height: 24px;
  --bs-body-color: var(--hfw-text);
  --bs-link-color: var(--hfw-red);
  --bs-link-hover-color: var(--hfw-red-hover);
  --bs-link-color-rgb: 192, 13, 14;
  --bs-link-hover-color-rgb: 163, 11, 12;
  --bs-primary: var(--hfw-red);
  --bs-primary-rgb: 192, 13, 14;
}

/* ---------- Basis ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--hfw-font);
  font-size: 14px;
  line-height: 24px;
  color: var(--hfw-text);
  background: #fff;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
a { color: var(--hfw-red); text-decoration: none; transition: color .3s, background-color .3s; }
a:hover, a:focus { color: var(--hfw-red-hover); text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
label { font-weight: normal; }
legend { padding-bottom: 10px; }
h1, h2, h3, h4, h5, h6 { font-family: var(--hfw-font); font-weight: 500; color: inherit; margin-top: 0; }
:focus-visible { outline: 3px solid rgba(192, 13, 14, .55); outline-offset: 2px; }

@media (min-width: 1400px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl { max-width: 1140px; }
}

.hfw-skip { position: absolute; left: 16px; top: 8px; z-index: 100000; background: var(--hfw-red); color: #fff !important; padding: 8px 16px; border-radius: 999px; font-weight: 600; }

.body-wrapper, .body-innerwrapper { position: relative; }
/* wie bisher (Helix): nichts darf seitlich aus der Seite ragen */
.body-innerwrapper { overflow-x: hidden; overflow-x: clip; }

/* ---------- Bootstrap-3-Kompatibilitaet fuer Alt-Inhalte ---------- */
.pull-left { float: left !important; }
.pull-right { float: right !important; }
.img-responsive { display: block; max-width: 100%; height: auto; }
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
.center { text-align: center; }
.btn-default { color: #333; background: #fff; border: 1px solid #ccc; }
.btn-default:hover { background: #e6e6e6; }
@media (max-width: 767.98px) { .hidden-xs { display: none !important; } }
@media (min-width: 768px) { .visible-xs { display: none !important; } }
@media (min-width: 768px) {
  .col-md-offset-1 { margin-left: 8.333333%; }
  .col-md-offset-2 { margin-left: 16.666667%; }
  .col-md-offset-3 { margin-left: 25%; }
}
@media (min-width: 992px) {
  .col-lg-offset-1 { margin-left: 8.333333%; }
  .col-lg-offset-2 { margin-left: 16.666667%; }
  .col-lg-offset-3 { margin-left: 25%; }
}

/* Formularfelder kompakt wie bisher (Bootstrap-3-Masse) */
.form-control { min-height: 34px; padding: 6px 12px; font-size: 14px; line-height: 1.43; color: #555; border: 1px solid #ccc; border-radius: 4px; }
.form-control:focus { border-color: var(--hfw-red); box-shadow: 0 0 0 .2rem rgba(192, 13, 14, .15); }
.btn-primary { --bs-btn-bg: var(--hfw-red); --bs-btn-border-color: var(--hfw-red); --bs-btn-hover-bg: var(--hfw-red-hover); --bs-btn-hover-border-color: var(--hfw-red-hover); --bs-btn-active-bg: var(--hfw-red-hover); --bs-btn-active-border-color: var(--hfw-red-hover); }

/* Formularfelder und Absende-Knoepfe wie bisher (aus dem frueheren Template uebernommen,
   die Design-Schicht baut darauf auf: 53px hohe Felder, 3px Radius) */
body.site .uneditable-input,body.site input[type=color],body.site input[type=date],body.site input[type=datetime-local],body.site input[type=datetime],body.site input[type=email],body.site input[type=month],body.site input[type=number],body.site input[type=password],body.site input[type=search],body.site input[type=tel],body.site input[type=text],body.site input[type=time],body.site input[type=url],body.site input[type=week],body.site select,body.site textarea{display:block;height:34px;padding:6px 12px;font-size:14px;line-height:1.428571429;color:#555;background-color:#fff;background-image:none;border:1px solid #ccc;border-radius:4px;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;border-radius:3px;-webkit-box-shadow:none;box-shadow:none;height:53px!important;padding:6px 15px!important;border:1px solid #d9d9d9!important;-webkit-transition:.3s;-o-transition:.3s;transition:.3s}body.site .uneditable-input:focus,body.site input[type=color]:focus,body.site input[type=date]:focus,body.site input[type=datetime-local]:focus,body.site input[type=datetime]:focus,body.site input[type=email]:focus,body.site input[type=month]:focus,body.site input[type=number]:focus,body.site input[type=password]:focus,body.site input[type=search]:focus,body.site input[type=tel]:focus,body.site input[type=text]:focus,body.site input[type=time]:focus,body.site input[type=url]:focus,body.site input[type=week]:focus,body.site select:focus,body.site textarea:focus{border-color:#66afe9;outline:0;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);box-shadow:inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)}body.site .uneditable-input::-moz-placeholder,body.site input[type=color]::-moz-placeholder,body.site input[type=date]::-moz-placeholder,body.site input[type=datetime-local]::-moz-placeholder,body.site input[type=datetime]::-moz-placeholder,body.site input[type=email]::-moz-placeholder,body.site input[type=month]::-moz-placeholder,body.site input[type=number]::-moz-placeholder,body.site input[type=password]::-moz-placeholder,body.site input[type=search]::-moz-placeholder,body.site input[type=tel]::-moz-placeholder,body.site input[type=text]::-moz-placeholder,body.site input[type=time]::-moz-placeholder,body.site input[type=url]::-moz-placeholder,body.site input[type=week]::-moz-placeholder,body.site select::-moz-placeholder,body.site textarea::-moz-placeholder{color:#999;opacity:1}body.site .uneditable-input:-ms-input-placeholder,body.site input[type=color]:-ms-input-placeholder,body.site input[type=date]:-ms-input-placeholder,body.site input[type=datetime-local]:-ms-input-placeholder,body.site input[type=datetime]:-ms-input-placeholder,body.site input[type=email]:-ms-input-placeholder,body.site input[type=month]:-ms-input-placeholder,body.site input[type=number]:-ms-input-placeholder,body.site input[type=password]:-ms-input-placeholder,body.site input[type=search]:-ms-input-placeholder,body.site input[type=tel]:-ms-input-placeholder,body.site input[type=text]:-ms-input-placeholder,body.site input[type=time]:-ms-input-placeholder,body.site input[type=url]:-ms-input-placeholder,body.site input[type=week]:-ms-input-placeholder,body.site select:-ms-input-placeholder,body.site textarea:-ms-input-placeholder{color:#999}body.site .uneditable-input::-webkit-input-placeholder,body.site input[type=color]::-webkit-input-placeholder,body.site input[type=date]::-webkit-input-placeholder,body.site input[type=datetime-local]::-webkit-input-placeholder,body.site input[type=datetime]::-webkit-input-placeholder,body.site input[type=email]::-webkit-input-placeholder,body.site input[type=month]::-webkit-input-placeholder,body.site input[type=number]::-webkit-input-placeholder,body.site input[type=password]::-webkit-input-placeholder,body.site input[type=search]::-webkit-input-placeholder,body.site input[type=tel]::-webkit-input-placeholder,body.site input[type=text]::-webkit-input-placeholder,body.site input[type=time]::-webkit-input-placeholder,body.site input[type=url]::-webkit-input-placeholder,body.site input[type=week]::-webkit-input-placeholder,body.site select::-webkit-input-placeholder,body.site textarea::-webkit-input-placeholder{color:#999}body.site .uneditable-input[disabled],body.site .uneditable-input[readonly],body.site input[type=color][disabled],body.site input[type=color][readonly],body.site input[type=date][disabled],body.site input[type=date][readonly],body.site input[type=datetime-local][disabled],body.site input[type=datetime-local][readonly],body.site input[type=datetime][disabled],body.site input[type=datetime][readonly],body.site input[type=email][disabled],body.site input[type=email][readonly],body.site input[type=month][disabled],body.site input[type=month][readonly],body.site input[type=number][disabled],body.site input[type=number][readonly],body.site input[type=password][disabled],body.site input[type=password][readonly],body.site input[type=search][disabled],body.site input[type=search][readonly],body.site input[type=tel][disabled],body.site input[type=tel][readonly],body.site input[type=text][disabled],body.site input[type=text][readonly],body.site input[type=time][disabled],body.site input[type=time][readonly],body.site input[type=url][disabled],body.site input[type=url][readonly],body.site input[type=week][disabled],body.site input[type=week][readonly],body.site select[disabled],body.site select[readonly],body.site textarea[disabled],body.site textarea[readonly],fieldset[disabled] body.site .uneditable-input,fieldset[disabled] body.site input[type=color],fieldset[disabled] body.site input[type=date],fieldset[disabled] body.site input[type=datetime-local],fieldset[disabled] body.site input[type=datetime],fieldset[disabled] body.site input[type=email],fieldset[disabled] body.site input[type=month],fieldset[disabled] body.site input[type=number],fieldset[disabled] body.site input[type=password],fieldset[disabled] body.site input[type=search],fieldset[disabled] body.site input[type=tel],fieldset[disabled] body.site input[type=text],fieldset[disabled] body.site input[type=time],fieldset[disabled] body.site input[type=url],fieldset[disabled] body.site input[type=week],fieldset[disabled] body.site select,fieldset[disabled] body.site textarea{cursor:not-allowed;background-color:#eee;opacity:1}textareabody.site .uneditable-input,textareabody.site input[type=color],textareabody.site input[type=date],textareabody.site input[type=datetime-local],textareabody.site input[type=datetime],textareabody.site input[type=email],textareabody.site input[type=month],textareabody.site input[type=number],textareabody.site input[type=password],textareabody.site input[type=search],textareabody.site input[type=tel],textareabody.site input[type=text],textareabody.site input[type=time],textareabody.site input[type=url],textareabody.site input[type=week],textareabody.site select,textareabody.site textarea{height:auto}body.site .uneditable-input:focus,body.site input[type=color]:focus,body.site input[type=date]:focus,body.site input[type=datetime-local]:focus,body.site input[type=datetime]:focus,body.site input[type=email]:focus,body.site input[type=month]:focus,body.site input[type=number]:focus,body.site input[type=password]:focus,body.site input[type=search]:focus,body.site input[type=tel]:focus,body.site input[type=text]:focus,body.site input[type=time]:focus,body.site input[type=url]:focus,body.site input[type=week]:focus,body.site select:focus,body.site textarea:focus{-webkit-box-shadow:none!important;box-shadow:none!important;outline:0!important}body.site .sppb-form-control,body.site a.btn[title=Cancel],body.site button[name=Search],body.site button[type=submit]{border-radius:3px;-webkit-box-shadow:none;box-shadow:none;height:53px;line-height:41px;padding:6px 30px}

/* ==========================================================================
   Obere Leiste (Position top2: Suche, Barrierefreiheit, Notruf 122)
   ========================================================================== */
/* Masse wie bisher (Helix): 34px hoch, 6px oben, Module inline mit 20px Abstand */
#sp-top-bar { background: var(--hfw-topbar); color: var(--hfw-menu); font-size: 13px; line-height: 24px; height: 34px; padding: 6px 0 0; }
.hfw-topbar__inner { display: block; }
.hfw-topbar__right { display: block; text-align: right; font-size: 0; }
#sp-top-bar .sp-module { display: inline-block; margin: 0 0 0 20px; font-size: 13px; }
#sp-top-bar p { margin: 0; }
#sp-top-bar a { color: var(--hfw-red); }
@media (max-width: 767.98px) { .hfw-topbar__right { text-align: center; } #sp-top-bar .sp-module { margin: 0; } }
#sp-top-bar .mod-finder { margin: 0; }

/* ==========================================================================
   Kopf: Logo-Kasten, Hauptmenue, Burger
   ========================================================================== */
#sp-header {
  position: relative;
  z-index: 100;
  background: #fff;
  height: var(--hfw-header-h);
  box-shadow: 0 3px 3px rgba(0, 0, 0, .05);
}
.hfw-header__inner { position: relative; display: flex; align-items: center; height: var(--hfw-header-h); }
.hfw-header__logo { flex: 0 0 auto; }
#sp-header .logo { display: flex; align-items: center; height: var(--hfw-header-h); }
#sp-header .logo img { height: 65px; width: auto; }

/* Hauptmenue (nur Desktop sichtbar, darunter Burger + Off-Canvas) */
.hfw-nav { display: none; margin-left: auto; }
.hfw-nav ul { list-style: none; margin: 0; padding: 0; }

.hfw-burger {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; height: var(--hfw-header-h); padding: 0; margin-right: 0;
  border: 0; background: transparent; color: #333; font-size: 20px; line-height: 1;
  border-radius: 0; cursor: pointer;
}
@media (max-width: 991.98px) { .hfw-burger { padding: 0 12px; margin-right: -12px; font-size: 24px; } }
.hfw-burger:hover, .hfw-burger:focus-visible { color: var(--hfw-red); }

@media (min-width: 1200px) {
  /* Logo als weisser Kasten, der in das Banner ragt (wie bisher) */
  .hfw-header__logo { position: relative; width: 153px; align-self: flex-start; height: var(--hfw-header-h); }
  #sp-header .logo {
    position: absolute; z-index: 2; top: 0; left: 0;
    width: 153px; height: 101px; padding: 18px 20px;
    background: #fff;
    box-shadow: 0 6px 14px rgba(0, 0, 0, .08);
  }
  #sp-header .logo img { height: 65px; width: auto; }

  .hfw-nav { display: block; }
  .hfw-burger { width: auto; height: var(--hfw-header-h); margin: 0 0 0 15px; padding: 0; font-size: 20px; border-radius: 0; }

  .hfw-nav__list { display: flex; align-items: stretch; }
  .hfw-nav__list > li { position: relative; display: flex; align-items: stretch; margin-left: 1px; }
  .hfw-nav__list > li.visible-xs { display: none !important; }
  .hfw-nav__list > li > a,
  .hfw-nav__list > li > .nav-header {
    display: flex; align-items: center;
    height: var(--hfw-header-h);
    padding: 0 15px;
    font-size: 14px; text-transform: uppercase;
    color: var(--hfw-menu);
    transition: color .3s, background-color .3s;
  }
  .hfw-nav__list > li.has-sub > a { padding-right: 4px; }
  .hfw-nav__list > li > .hfw-sub-toggle {
    display: flex; align-items: center; padding: 0 12px 0 2.4px; margin: 0;
    border: 0; background: transparent; color: var(--hfw-menu); font-size: 14px; cursor: pointer;
    transition: color .3s, background-color .3s, transform .2s;
  }
  .hfw-nav__list > li.active > a, .hfw-nav__list > li.active > .hfw-sub-toggle,
  .hfw-nav__list > li:hover > a, .hfw-nav__list > li:hover > .hfw-sub-toggle,
  .hfw-nav__list > li:focus-within > a, .hfw-nav__list > li:focus-within > .hfw-sub-toggle,
  .hfw-nav__list > li.is-open > a, .hfw-nav__list > li.is-open > .hfw-sub-toggle {
    background: var(--hfw-red); color: #fff;
  }

  /* Dropdowns: hover, Tastatur (focus-within) und Klick (is-open) */
  .hfw-nav .hfw-sub {
    position: absolute; z-index: 999; top: 100%; left: 0;
    min-width: 240px; padding: 8px 0;
    background: var(--hfw-red);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
    border-radius: 0 0 6px 6px;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
  }
  .hfw-nav__list > li:last-child > .hfw-sub,
  .hfw-nav__list > li:nth-last-child(2) > .hfw-sub { left: auto; right: 0; }
  .hfw-nav li:hover > .hfw-sub,
  .hfw-nav li:focus-within > .hfw-sub,
  .hfw-nav li.is-open > .hfw-sub {
    opacity: 1; visibility: visible; transform: none;
    transition: opacity .18s ease, transform .18s ease, visibility 0s;
  }
  .hfw-nav .hfw-sub li { position: relative; display: flex; align-items: stretch; }
  .hfw-nav .hfw-sub li > a,
  .hfw-nav .hfw-sub li > .nav-header {
    flex: 1 1 auto; display: block; padding: 9px 18px;
    color: #fff; font-size: 14px; line-height: 1.45; text-transform: none;
  }
  .hfw-nav .hfw-sub li > .hfw-sub-toggle {
    border: 0; background: transparent; color: #fff; padding: 0 14px; cursor: pointer;
  }
  .hfw-nav .hfw-sub li > .hfw-sub-toggle .fa::before { content: "\f105"; }
  .hfw-nav .hfw-sub li:hover > a, .hfw-nav .hfw-sub li:focus-within > a,
  .hfw-nav .hfw-sub li.active > a, .hfw-nav .hfw-sub li.is-open > a,
  .hfw-nav .hfw-sub li:hover > .hfw-sub-toggle, .hfw-nav .hfw-sub li.active > .hfw-sub-toggle {
    background: #fff; color: var(--hfw-red);
  }
  .hfw-nav .hfw-sub .hfw-sub { top: -8px; left: 100%; border-radius: 0 6px 6px 6px; }
  .hfw-nav__list > li:last-child .hfw-sub .hfw-sub,
  .hfw-nav__list > li:nth-last-child(2) .hfw-sub .hfw-sub { left: auto; right: 100%; }
}

/* ==========================================================================
   Off-Canvas (Position offcanvas: Suche + Menue)
   ========================================================================== */
.hfw-offcanvas {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 99999;
  width: min(340px, 88vw);
  background: var(--hfw-dark); color: #fff;
  overflow-y: auto; overscroll-behavior: contain;
  transform: translateX(100%); visibility: hidden;
  transition: transform .3s ease, visibility 0s linear .3s;
  box-shadow: -10px 0 30px rgba(0, 0, 0, .25);
}
body.offcanvas-active .hfw-offcanvas { transform: none; visibility: visible; transition: transform .3s ease, visibility 0s; }
body.offcanvas-active { overflow: hidden; }
.hfw-offcanvas-backdrop { position: fixed; inset: 0; z-index: 99998; background: rgba(15, 20, 23, .55); }
.hfw-offcanvas-backdrop[hidden] { display: none; }

.hfw-offcanvas .close-offcanvas {
  position: absolute; top: 12px; right: 12px; z-index: 1;
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .35); background: transparent; color: #fff; font-size: 18px; cursor: pointer;
}
.hfw-offcanvas .close-offcanvas:hover { background: var(--hfw-red); border-color: var(--hfw-red); }
.hfw-offcanvas .offcanvas-inner { padding: 70px 0 30px; }
.hfw-offcanvas .sp-module { margin: 0 0 18px; }
.hfw-offcanvas .sp-module-title { color: #fff; font-size: 14px; text-transform: uppercase; padding: 0 20px; }
.hfw-offcanvas .mod-finder { padding: 0 20px; }
.hfw-offcanvas .mod-finder .form-control,
.hfw-offcanvas input.form-control { height: 44px; font-size: 16px; border-radius: 999px; border: 0; padding: 0 18px; }

/* Menue im Off-Canvas: Markup des mod_menu-Overrides (identisch zu shaper_doctor,
   damit der Modul-Cache zwischen beiden Templates kompatibel bleibt):
   li.deeper > a + span.offcanvas-menu-toggler[data-bs-toggle=collapse] + ul.collapse */
.hfw-offcanvas ul { list-style: none; margin: 0; padding: 0; }
.hfw-offcanvas ul.menu, .hfw-offcanvas ul.nav { display: block; flex-wrap: nowrap; }
.hfw-offcanvas ul.menu li { display: block; width: 100%; }
.hfw-offcanvas ul.menu li { position: relative; border-bottom: 1px solid rgba(255, 255, 255, .07); }
.hfw-offcanvas ul.menu li > a,
.hfw-offcanvas ul.menu li > .nav-header,
.hfw-offcanvas ul.menu li > span.separator {
  display: flex; align-items: center; min-height: 48px;
  padding: 10px 20px; color: #fff; font-size: 15px; font-weight: 500; text-transform: uppercase; line-height: 1.35;
}
.hfw-offcanvas ul.menu li.deeper > a { padding-right: 64px; }
.hfw-offcanvas ul.menu li > a:hover, .hfw-offcanvas ul.menu li > a:focus-visible { background: rgba(255, 255, 255, .06); color: #fff; }
.hfw-offcanvas ul.menu li.current > a { background: var(--hfw-red); }
.hfw-offcanvas ul.menu li.active:not(.current) > a { color: #ff9a9b; }
.hfw-offcanvas .offcanvas-menu-toggler {
  position: absolute; top: 0; right: 0; width: 52px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-left: 1px solid rgba(255, 255, 255, .07); color: #fff; font-size: 20px; cursor: pointer;
}
.hfw-offcanvas .offcanvas-menu-toggler:hover, .hfw-offcanvas .offcanvas-menu-toggler:focus-visible { background: rgba(255, 255, 255, .08); }
.hfw-offcanvas .offcanvas-menu-toggler .open-icon { display: none; }
.hfw-offcanvas .offcanvas-menu-toggler .close-icon { display: inline; }
.hfw-offcanvas .offcanvas-menu-toggler.collapsed .open-icon { display: inline; }
.hfw-offcanvas .offcanvas-menu-toggler.collapsed .close-icon { display: none; }
.hfw-offcanvas ul.menu ul { background: rgba(0, 0, 0, .2); }
.hfw-offcanvas ul.menu ul li > a { text-transform: none; font-size: 15px; padding-left: 32px; }
.hfw-offcanvas ul.menu ul ul li > a { padding-left: 44px; font-size: 14px; }
.hfw-offcanvas ul.menu li:last-child { border-bottom: 0; }

/* ==========================================================================
   Seitentitel-Banner (#sp-page-title wie bisher, damit hfw-fresh-c greift)
   ========================================================================== */
#sp-page-title .sp-page-title {
  position: relative;
  padding: 44px 0;
  background-color: var(--hfw-red);
  background-repeat: no-repeat; background-position: 50% 50%; background-size: cover;
}
#sp-page-title .sp-page-title::before {
  content: ""; position: absolute; inset: 0;
  background: rgba(29, 29, 29, .85);
}
#sp-page-title .sp-page-title .container { padding-left: 24px; padding-right: 24px; position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; column-gap: 24px; }
#sp-page-title .sp-page-title h2 {
  margin: 0; padding: 0; color: #fff;
  font-size: 18px; line-height: 1; font-weight: 600; text-transform: uppercase; letter-spacing: .9px;
}
#sp-page-title .sp-page-title h3 { margin: 6px 0 0; padding: 0; color: rgba(255, 255, 255, .85); font-size: 15px; font-weight: 400; line-height: 1.4; }
#sp-page-title .breadcrumb { --bs-breadcrumb-divider-color: #fff; --bs-breadcrumb-item-active-color: rgba(255, 255, 255, .8); background: transparent; padding: 0; margin: 8px 0 0; flex-wrap: wrap; flex-basis: 100%; }
#sp-page-title .breadcrumb li, #sp-page-title .breadcrumb a { color: #fff; font-weight: 400; }
#sp-page-title .breadcrumb a:hover { color: #ffb3b3; }
#sp-page-title .breadcrumb li.active { color: #fff; }
#sp-page-title .breadcrumb li:first-child { display: none; }
#sp-page-title .breadcrumb li:nth-child(2)::before { display: none; }
@media (min-width: 768px) {
  #sp-page-title .sp-page-title { padding: 115px 0; }
  /* wie bisher: 500px breiter, rechtsbuendiger Kasten, Eintraege linksbuendig darin */
  #sp-page-title .breadcrumb { flex: 0 0 500px; max-width: 50%; height: 25px; margin: 0 0 0 auto; }
  #sp-page-title .sp-page-title h3 { font-size: 18px; }
}
@media (min-width: 1200px) and (hover: hover) {
  #sp-page-title .sp-page-title { background-attachment: fixed; }
}

/* ==========================================================================
   Inhalt
   ========================================================================== */
#sp-main-body { padding: 40px 0; }
#sp-main-body:focus { outline: 0; }
.com-sppagebuilder #sp-main-body { padding: 0; }
.hfw-container-full { width: 100%; padding: 0; }
.hfw-container-full > .row { margin: 0; }
.hfw-container-full > .row > #sp-component { padding: 0; }

#sp-main-body p { margin: 0 0 10px; }
#sp-main-body h1, #sp-main-body h2, #sp-main-body h3, #sp-main-body h4, #sp-main-body h5, #sp-main-body h6 { margin-bottom: 10px; }
#sp-main-body table { max-width: 100%; }
#sp-main-body iframe, #sp-main-body video { max-width: 100%; }
#sp-main-body blockquote { border-left: 4px solid var(--hfw-red); padding: 6px 0 6px 16px; margin: 0 0 16px; color: #555; }

/* Systemmeldungen */
#system-message-container joomla-alert { border-radius: var(--hfw-radius); }

/* Artikel / Blog (Klassen aus den uebernommenen Overrides) */
.entry-header { position: relative; margin-bottom: 18px; overflow: hidden; }
.entry-header h2 { margin: 0 0 20px; font-size: 24px; line-height: 1.2; clear: both; }
.entry-header h2 a { color: #333; }
.entry-header h2 a:hover { color: var(--hfw-red); }
body.view-article article .entry-header { margin-bottom: 30px; }
body.view-article article .entry-header h2 { font-size: 46px; margin-bottom: 30px; line-height: 1.2; }
@media (max-width: 767.98px) { body.view-article article .entry-header h2 { font-size: 28px; line-height: 1.15; } }
body.view-article article .entry-image img { border-radius: 3px; }

.article-info { margin: 0; line-height: 12px; }
.article-info > dd { font-size: 14px; color: #565656; text-transform: uppercase; margin: 0 20px 7px 0; float: left; }
.article-info > dd > i { display: inline-block; margin-right: 6px; }
.article-info > dd a { color: #565656; }
body:not(.view-article) article .article-info > dd { color: #000; display: inline-block; float: none; text-transform: capitalize; }

body:not(.view-article) article.item { position: relative; margin-bottom: 30px; }
body:not(.view-article) article.item .entry-image { width: 100%; margin-bottom: 0; }
body:not(.view-article) article.item .entry-image a { position: relative; display: block; overflow: hidden; }
body:not(.view-article) article.item .blog-info-wrapper { background: #f7f7f7; border-radius: 0 0 3px 3px; padding: 20px 30px 25px; }
body:not(.view-article) article.item p { color: #565656; font-size: 14px; line-height: 1.5; }
body:not(.view-article) article.item .readmore { margin-top: 20px; }

.tags { display: inline-block; }
.tags a { font-size: 14px; color: #000; padding: 0 3px; }

/* Blog-Galerie (Beitragsformat "Galerie") */
.entry-gallery { position: relative; }
.entry-gallery .carousel-item img { width: 100%; }
.carousel-left, .carousel-right {
  position: absolute; top: 50%; z-index: 2;
  width: 40px; height: 40px; margin-top: -20px; opacity: 1;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; color: #fff; background: rgba(0, 0, 0, .5); border-radius: 50%;
  transition: background .3s;
}
.carousel-left { left: 10px; }
.carousel-right { right: 10px; }
.carousel-left:hover, .carousel-right:hover, .carousel-left:focus, .carousel-right:focus { color: #fff; background: var(--hfw-red); }

/* Seitennavigation */
/* Seitennavigation wie bisher (Bootstrap-Standard, links, aktive Seite blau) - nur Bootstrap-5.3-Unterschiede angleichen */
.pagination { --bs-pagination-disabled-bg: #fff; --bs-pagination-disabled-color: #6c757d; --bs-pagination-color: #333; --bs-pagination-hover-color: #333; --bs-pagination-focus-color: #333; }
.pagenavigation .pagination { justify-content: space-between; }
div.pagination { margin-top: 30px; }
.pagination .page-link { font-size: inherit; line-height: 1.5; }
/* wie bisher (Helix): in Blog-Uebersichten inaktive Pfeile ausblenden */
.pagination-wrapper .pagination li.disabled, .com-content-category__pagination .pagination li.disabled { display: none; }

/* Listen in Modulen */
.category-module, .categories-module, .archive-module, .latestnews, .newsflash-horiz, .mostread, .list-striped { list-style: none; padding: 0; margin: 0; }

/* ==========================================================================
   Module (Chrome sp_xhtml: .sp-module / .sp-module-title / .sp-module-content)
   ========================================================================== */
.sp-module + .sp-module { margin-top: 30px; }
.sp-module .sp-module-title { margin: 0 0 16px; font-size: 14px; text-transform: uppercase; line-height: 1.2; }

/* Seitenleiste */
#sp-left .sp-module, #sp-right .sp-module { background: var(--hfw-surface); border-radius: var(--hfw-radius); padding: 0 0 12px; overflow: hidden; }
#sp-left .sp-module .sp-module-title, #sp-right .sp-module .sp-module-title { color: var(--hfw-dark); font-size: 18px; font-weight: 600; text-transform: none; padding: 20px 24px 0; border-left: 4px solid var(--hfw-red); }
#sp-left .sp-module .sp-module-content, #sp-right .sp-module .sp-module-content { padding: 0 24px; }
#sp-left .sp-module ul.menu, #sp-right .sp-module ul.menu { display: block; list-style: none; margin: 0 -24px; padding: 0; }
#sp-left .sp-module ul.menu li a, #sp-right .sp-module ul.menu li a { display: block; padding: 11px 24px; color: #222; border-bottom: 1px solid var(--hfw-border); }
#sp-left .sp-module ul.menu li a:hover, #sp-right .sp-module ul.menu li a:hover,
#sp-left .sp-module ul.menu li.current > a, #sp-right .sp-module ul.menu li.current > a { color: var(--hfw-red); background: #fff; }
#sp-left .hfw-sub-toggle, #sp-right .hfw-sub-toggle { display: none; }
@media (max-width: 991.98px) { #sp-left, #sp-right { margin-top: 30px; } }

/* Social Wall ueber dem Fuss */
.hfw-socialwall { background: var(--hfw-surface); padding: 40px 0; }

/* ==========================================================================
   Fuss: #sp-bottom (4 Spalten) und #sp-footer
   (Feinschliff kommt aus hfw-fresh-c.css)
   ========================================================================== */
#sp-bottom { background: var(--hfw-dark); border-top: 4px solid var(--hfw-red); color: #c9ced2; padding: 40px 0 16px; font-size: 14px; }
#sp-bottom .row > div { margin-bottom: 26px; }
#sp-bottom .sp-module { margin: 0; }
#sp-bottom p { margin: 0 0 14px; }
#sp-bottom img { display: inline-block; }
@media (min-width: 768px) { #sp-bottom { padding: 56px 0 40px; } }
@media (min-width: 992px) { #sp-bottom .row > div { margin-bottom: 0; } }

#sp-footer { background: var(--hfw-footer-bar); color: #c9ced2; padding: 22px 0; font-size: 14px; }
#sp-footer a { line-height: 1.5; }
#sp-footer ul.menu li a { display: inline-block; }
#sp-footer .sp-column { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; }
#sp-footer ul.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; }
#sp-footer a { color: #c9ced2; }
#sp-footer a:hover { color: #fff; }
#sp-footer p { margin: 0; }
@media (max-width: 767.98px) { #sp-footer .sp-column { flex-direction: column; align-items: flex-start; } }

/* ==========================================================================
   Komponenten von Drittanbietern
   ========================================================================== */
/* Smart Search (Ergebnisseite)
   com_finder setzt ".com-finder > * + * { margin-top: 1.5em }" - die Body-Klasse heisst
   ebenfalls com-finder, daher Abstand fuer direkte Body-Kinder zuruecksetzen. */
body.com-finder > * + * { margin-top: 0; }
.com-finder #search-form .input-group, .finder .word .input-group { max-width: 560px; }
.com-finder .search-results .result-title a { font-size: 18px; }

/* Leaflet-Karten (Einsatzkomponente): Bilder nicht als Block/100% darstellen */
.leaflet-container img, .leaflet-container .leaflet-tile { display: inline; max-width: none !important; max-height: none !important; }

/* Druck */
@media print {
  #sp-top-bar, #sp-header .hfw-nav, .hfw-burger, .hfw-offcanvas, #sp-bottom, #redim-cookiehint-bottom { display: none !important; }
  #sp-page-title .sp-page-title { padding: 10px 0; background: none !important; }
  #sp-page-title .sp-page-title::before { display: none; }
  #sp-page-title .sp-page-title h2 { color: #000; }
}