/* =========================
   Überschriften
   Sachlich, klar, gut lesbar
   ========================= */

h1 {
  font-size: 2rem;
}

h2 {
  font-size: 1.6rem;
}

h3 {
  font-size: 1.3rem;
}

/* Startseite / allgemeine Lesbarkeit */
.container-component p,
.container-component li,
.container-component dd,
.container-component dt {
  font-size: 1.05rem;
  line-height: 1.65;
}

.container-component .lead {
  font-size: 1.15rem;
  line-height: 1.6;
}

/* =========================
   Header / Navigation
   Gelb bleibt als prägnanter Akzent
   ========================= */

.container-header {
  z-index: 10;
  background-color: #ffc200;
  background-image: none;
  background-origin: padding-box;
  border-bottom: 2px solid #e8b200;
  text-transform: uppercase;
  text-align: left;
}

.container-header .mod-menu {
  color: #000;
  list-style: none;
}

.mod-menu li:hover > ul {
  display: block !important;
}

/* =========================
   Karten / Main-Top
   ========================= */

.card {
  --card-border-color: #fff;
}

/* Abstand zwischen Navigation und Inhalt reduzieren */
.card-body {
  --card-spacer-y: 0rem !important;
  --card-spacer-x: 0rem !important;
}

.container-component > :first-child {
  margin-top: 0 !important;
  margin-bottom: 1rem !important;
}

/* =========================
   Footer – Finalversion
   Sachlich, behördentauglich, vertrauenswürdig
   ========================= */

.footer {
  background: #3a3f45 !important;
  color: #fff;
  padding: 1.6rem 0 1.2rem 0;
  margin-top: 1.2rem;
  font-size: 1.02rem;
  text-align: left;
  width: 100%;
  min-width: 0;
  margin-left: 0;
  box-sizing: border-box;
}

.footer-simple {
  width: 100%;
  box-sizing: border-box;
}

.footer-row {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 2.4rem;
  max-width: 1280px;
  margin: 0 auto 1.2rem auto;
  flex-wrap: wrap;
  width: 100%;
  box-sizing: border-box;
  padding: 0 1rem;
}

.footer-col {
  flex: 1 1 190px;
  min-width: 170px;
  max-width: 260px;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
}

.footer-label {
  color: #ffffff;
  opacity: 0.92;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.04em;
  margin-bottom: 0.65em;
  text-transform: uppercase;
}

.footer-col a {
  color: #ffffff;
  text-decoration: none;
  margin-bottom: 0.16em;
  padding: 0.08em 0;
  transition: color 0.17s ease;
  font-size: 1em;
  opacity: 0.95;
  line-height: 1.5;
}

.footer-col a:hover,
.footer-col a:focus {
  color: #ffd24d;
  text-decoration: underline;
  opacity: 1;
}

.footer-contact {
  margin-top: 0.35em;
  font-size: 1em;
  line-height: 1.8;
}

.footer-contact div {
  margin-bottom: 0.18em;
}

.footer-contact span {
  color: #ffd24d;
  font-weight: 600;
  text-transform: uppercase;
  margin-right: 0.45em;
  opacity: 1;
}

.footer-contact a {
  color: #ffffff;
  text-decoration: none;
}

.footer-contact a:hover,
.footer-contact a:focus {
  color: #ffd24d;
  text-decoration: underline;
}

.footer-copy {
  color: #ffffff;
  border-top: 1px solid rgba(255, 255, 255, 0.7);
  font-size: 0.96rem;
  margin-top: 1.1rem;
  padding: 0.9rem 1rem 0 1rem;
  text-align: center;
  letter-spacing: 0.01em;
  opacity: 0.88;
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5;
}

.footer .grid-child {
  justify-content: space-between;
  align-items: center;
  padding: 0;
}

/* =========================
   Responsive Footer
   ========================= */

@media (max-width: 1150px) {
  .footer-row {
    gap: 1.5rem;
  }

  .footer-col {
    min-width: 200px;
    max-width: 100%;
  }
}

@media (max-width: 900px) {
  .footer-row {
    flex-direction: column;
    gap: 1.25rem;
    padding: 0 0.9rem;
  }

  .footer-col {
    min-width: 0;
    max-width: 100%;
  }

  .footer-copy {
    padding-left: 0.9rem;
    padding-right: 0.9rem;
  }
}

/* =========================
   Buttons allgemein
   Zurückhaltend, seriös, klar
   ========================= */

.btn-primary {
  background-color: #3a3f45;
  border-color: #3a3f45;
  color: #fff;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: #4a5057;
  border-color: #4a5057;
  color: #fff;
}

/* =========================
   Anfang Beitrag Baummarken
   ========================= */
/* Baummarken – ruhigere Kartenüberschriften */

.baumkarte h2.h5,
.baumkarte .h5 {
  font-size: 1.15rem;
  line-height: 1.35;
  margin-bottom: 0.7rem;
}

/* Lesbarkeit Text */
.container-component p,
.container-component li,
.container-component dd,
.container-component dt {
  font-size: 1.05rem;
  line-height: 1.65;
}


.baumkarten-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 32px 18px;
  width: 100%;
  max-width: 1170px;
  margin-bottom: 20px;
}

.baumkarte {
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 3px 18px 0 rgba(32, 38, 73, 0.09), 0 1.5px 6px 0 rgba(32, 38, 73, 0.03);
  padding: 22px 16px 20px 16px;
  flex: 1 1 280px;
  max-width: 350px;
  min-width: 230px;
  min-height: 510px;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow 0.25s, transform 0.21s;
  position: relative;
}

/* Hover etwas dezenter für eine sachliche Anmutung */
.baumkarte:hover,
.baumkarte:focus-within {
  box-shadow: 0 6px 24px 0 rgba(58, 63, 69, 0.14), 0 2px 10px 0 rgba(58, 63, 69, 0.08);
  transform: translateY(-4px);
  z-index: 2;
}

.baumkarte h2 {
  font-size: 1.13em;
  font-weight: 700;
  color: #222;
  margin: 0 0 8px 0;
  line-height: 1.24;
  letter-spacing: 0.01em;
  text-align: center;
}

.baumprodukt-bilder img {
  display: block;
  margin: 0 auto 12px auto;
  box-shadow: none !important;
  border: none !important;
  background: none !important;
  max-width: 120px;
  max-height: 120px;
  width: 100%;
  height: auto;
  border-radius: 0 !important;
}

@media (max-width: 600px) {
  .baumprodukt-bilder img {
    max-width: 86px;
    max-height: 86px;
  }
}

.baumkarte-text {
  font-size: 1.09em;
  color: #2f343a;
  margin: 14px 0 0 0;
  text-align: center;
  flex: 1 1 auto;
  min-height: 64px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.baumkarte-btn {
  width: 100%;
  margin-top: auto;
  text-align: center;
  padding-top: 18px;
}

.baumkarte-btn .btn-primary {
  background: #3a3f45;
  border-color: #3a3f45;
  color: #fff;
  font-weight: 600;
  border-radius: 7px;
  font-size: 1.09em;
  padding: 9px 24px;
  transition: background 0.18s, border-color 0.18s;
}

.baumkarte-btn .btn-primary:hover,
.baumkarte-btn .btn-primary:focus {
  background: #4a5057;
  border-color: #4a5057;
  color: #fff;
}

@media (max-width: 1050px) {
  .baumkarte {
    max-width: 48%;
    min-width: 210px;
  }

  .baumkarten-row {
    gap: 24px 10px;
  }
}

@media (max-width: 770px) {
  .baumkarte {
    max-width: 98%;
    min-width: 150px;
  }

  .baumkarten-row {
    flex-direction: column;
    gap: 22px 0;
  }
}

/* Grundbildgröße für alle */
.baumkarte-bild {
  display: block;
  margin: 0 auto 12px auto;
  max-width: 200px;
  max-height: 250px;
  width: 100%;
  height: auto;
  border: none;
  background: none;
}

/* Nur für Rechteck/Dreieck-Karten */
.baumkarte-bild-sonderform {
  max-width: 200px;
  max-height: 250px;
}

@media (max-width: 600px) {
  .baumkarte-bild {
    max-width: 150px;
    max-height: 150px;
  }

  .baumkarte-bild-sonderform {
    max-width: 150px;
    max-height: 150px;
  }
}

/* =========================
   Ende Baummarken
   ========================= */

/* =========================
   Anfang Hundesteuermarken
   Relaunch 2026
   ========================= */

/* Kartenraster */
.hundemarken-cards-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;

  width: 100%;
  max-width: 1170px;

  margin: 28px auto 36px;
}

/* Einzelkarte */
.hundemarke-card {
  position: relative;

  display: flex;
  flex-direction: column;
  align-items: center;

  min-width: 0;
  min-height: 365px;

  margin: 0;
  padding: 18px 16px 16px;

  background: #fff;

  border: 1px solid #dfe5e1;
  border-radius: 14px;

  box-shadow:
    0 3px 12px rgba(23, 43, 32, 0.06);

  transition:
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    transform 0.18s ease;
}

@media (hover: hover) {
  .hundemarke-card:hover,
  .hundemarke-card:focus-within {
    transform: translateY(-2px);

    border-color: #cbd7d0;

    box-shadow:
      0 8px 22px rgba(23, 43, 32, 0.10);
  }
}

/* kleine Formnummer oben */
.hundemarke-card h3 {
  margin: 0 0 12px;

  color: #5f666d;

  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.25;

  text-align: center;
}

/* Produktabbildung */
.hundemarke-card img {
  display: block;

  width: auto;
  max-width: 180px;
  max-height: 185px;
  height: auto;

  margin: 0 auto 12px;

  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Zubehörbilder innerhalb derselben Struktur */
.hundemarke-zubehoer-img {
  width: auto;
  max-width: 165px;
  max-height: 165px;
  height: auto;
}

/* Beschreibung */
.hundemarke-text {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;

  width: 100%;

  margin: 4px 0 0;

  color: #5f666d;

  font-size: 1rem;
  line-height: 1.45;

  text-align: center;
}

/* Formname = wichtigste Bezeichnung */
.hundemarke-formname {
  display: block;

  margin-top: 5px;

  color: #202428;

  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
}

/* CTA */
.hundemarke-btn {
  width: 100%;

  margin-top: auto;
  padding-top: 16px;

  text-align: center;
}

.hundemarke-btn .btn,
.hundemarke-btn .btn-primary {
  min-height: 40px;

  padding: 8px 16px;

  color: #fff;

  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.2;

  background: #075c2d;

  border: 1px solid #075c2d;
  border-radius: 7px;

  box-shadow: none;
}

.hundemarke-btn .btn:hover,
.hundemarke-btn .btn:focus,
.hundemarke-btn .btn-primary:hover,
.hundemarke-btn .btn-primary:focus {
  color: #fff;

  background: #064b25;
  border-color: #064b25;
}

/* sauberer Tastaturfokus */
.hundemarke-card a:focus-visible {
  outline: 3px solid rgba(7, 92, 45, 0.25);
  outline-offset: 3px;
}

/* Tablet */
@media (max-width: 980px) {
  .hundemarken-cards-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .hundemarke-card {
    min-height: 350px;
  }
}

/* Smartphone */
@media (max-width: 600px) {
  .hundemarken-cards-row {
    grid-template-columns: 1fr;
    gap: 16px;

    margin-top: 22px;
  }

  .hundemarke-card {
    min-height: 0;
    padding: 18px;
  }

  .hundemarke-card img {
    max-width: 170px;
    max-height: 175px;
  }
}

/* =========================
   Ende Hundesteuermarken
   ========================= */

/* =========================
   Anfang Beitrag Zubehör
   ========================= */

/* Zubehör – Beschreibungstext in Karten */
.zubehoer-text {
  text-align: center;
  font-size: 1.02rem;
  color: #2f343a;
  line-height: 1.55;
  margin: 0.5rem 0 0 0;
  flex: 1 1 auto;
}

.zubehoer-cards-wrapper {
  width: 100%;
  max-width: 1300px;
  margin: 0 auto 30px auto;
  padding: 0 10px;
}

.zubehoer-cards-row {
  display: flex;
  flex-wrap: wrap;
  gap: 28px 22px;
  justify-content: flex-start;
  align-items: stretch;
}

.zubehoer-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 3px 18px 0 rgba(32, 38, 73, 0.08), 0 1.5px 6px 0 rgba(32, 38, 73, 0.04);
  padding: 18px 16px 18px 16px;
  flex: 1 1 250px;
  max-width: 330px;
  min-width: 210px;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 425px;
  transition: box-shadow 0.21s, transform 0.18s;
  position: relative;
}

.zubehoer-card:hover,
.zubehoer-card:focus-within {
  box-shadow: 0 6px 24px 0 rgba(58, 63, 69, 0.14), 0 2px 10px 0 rgba(58, 63, 69, 0.08);
  transform: translateY(-3px);
  z-index: 2;
}

.zubehoer-title {
  font-size: 1.05em;
  margin-bottom: 9px;
  color: #222;
  font-weight: 700;
  text-align: center;
  line-height: 1.26;
}

.zubehoer-formname {
  display: block;
  font-size: 1.01em;
  color: #2f343a;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin-top: 2px;
  text-transform: none;
}

.zubehoer-img {
  display: block;
  margin: 0 auto 10px auto;
  max-width: 200px;
  max-height: 200px;
  width: 100%;
  height: auto;
  border: none;
  box-shadow: none;
  background: none;
}

.baum-zubehoer-img {
  max-width: 200px;
  max-height: 200px;
  width: 100%;
  height: auto;
}

.zubehoer-card-btn {
  width: 100%;
  margin-top: auto;
  text-align: center;
  padding-top: 16px;
}

.zubehoer-card-btn .btn-primary {
  background: #3a3f45;
  border-color: #3a3f45;
  color: #fff;
  font-weight: 600;
  border-radius: 7px;
  font-size: 1.06em;
  padding: 9px 24px;
  transition: background 0.18s, border-color 0.18s;
}

.zubehoer-card-btn .btn-primary:hover,
.zubehoer-card-btn .btn-primary:focus {
  background: #4a5057;
  border-color: #4a5057;
}

@media (max-width: 950px) {
  .zubehoer-cards-row {
    gap: 18px 8px;
  }

  .zubehoer-card {
    max-width: 48%;
    min-width: 190px;
  }
}

@media (max-width: 680px) {
  .zubehoer-cards-row {
    flex-direction: column;
    gap: 20px 0;
  }

  .zubehoer-card {
    max-width: 99%;
    min-width: 130px;
  }
}

/* =========================
   Ende Beitrag Zubehör
   ========================= */
/* ==========================================================
   H24 RELAUNCH 2026
   Globale Designbasis
   ========================================================== */

:root {
  --h24-gold: #ffc200;
  --h24-gold-dark: #e8b200;

  --h24-green: #0b5d32;
  --h24-green-hover: #084b28;
  --h24-green-soft: #edf7f1;

  --h24-text: #202428;
  --h24-text-soft: #5f666d;

  --h24-bg: #ffffff;
  --h24-bg-soft: #f7f9f7;

  --h24-border: #dfe5e1;

  --h24-radius-sm: 8px;
  --h24-radius-md: 14px;
  --h24-radius-lg: 18px;

  --h24-shadow-soft: 0 4px 18px rgba(23, 43, 32, 0.08);
}


/* ==========================================================
   Grundfarben und Typografie
   ========================================================== */

body {
  color: var(--h24-text);
  background-color: var(--h24-bg);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--h24-text);
  font-weight: 700;
}

h1 {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.15;
}

h2 {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.25rem, 2vw, 1.55rem);
  line-height: 1.3;
}

.container-component p,
.container-component li,
.container-component dd,
.container-component dt {
  font-size: 1.04rem;
  line-height: 1.68;
}


/* ==========================================================
   Links
   ========================================================== */

.container-component a {
  color: var(--h24-green);
}

.container-component a:hover,
.container-component a:focus-visible {
  color: var(--h24-green-hover);
}


/* ==========================================================
   Header
   Gold bleibt Markenfarbe
   ========================================================== */

.container-header {
  background: var(--h24-gold) !important;
  background-image: none !important;
  border-bottom: 1px solid var(--h24-gold-dark);
  box-shadow: none;
  color: #111;
  text-transform: none;
}


/* Logo */

.container-header .navbar-brand {
  color: #111;
}

.container-header .brand-logo,
.container-header .brand-logo:hover,
.container-header .brand-logo:focus {
  color: #111;
  text-decoration: none;
}


/* ==========================================================
   Navigation
   ========================================================== */

.container-header .container-nav {
  align-items: center;
}

.container-header .mod-menu {
  color: #111;
}

.container-header .mod-menu > li > a {
  color: #111 !important;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--h24-radius-sm);
  padding: 0.55rem 0.8rem;

  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  color: #fff !important;
  background-color: var(--h24-green);
}


/* Dropdown-Menü */

.container-header .mod-menu ul {
  background-color: #fff;
  border: 1px solid var(--h24-border);
  border-radius: var(--h24-radius-sm);
  box-shadow: var(--h24-shadow-soft);
}

.container-header .mod-menu ul a {
  color: var(--h24-text) !important;
  text-decoration: none;
}

.container-header .mod-menu ul a:hover,
.container-header .mod-menu ul a:focus-visible {
  color: #fff !important;
  background-color: var(--h24-green);
}


/* ==========================================================
   Buttons
   Grün = Aktion
   ========================================================== */

.btn-primary {
  background-color: var(--h24-green) !important;
  border-color: var(--h24-green) !important;
  color: #fff !important;

  border-radius: var(--h24-radius-sm);

  font-weight: 700;

  padding: 0.7rem 1.15rem;

  box-shadow: none;

  transition:
    background-color 0.18s ease,
    border-color 0.18s ease,
    transform 0.18s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  background-color: var(--h24-green-hover) !important;
  border-color: var(--h24-green-hover) !important;
  color: #fff !important;
}

.btn-primary:active {
  transform: translateY(1px);
}


/* ==========================================================
   Fokus / Barrierefreiheit
   ========================================================== */

a:focus-visible,
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(11, 93, 50, 0.32);
  outline-offset: 2px;
}


/* ==========================================================
   Inhaltsbereich
   ========================================================== */

.site-grid {
  background-color: var(--h24-bg);
}

.container-component {
  color: var(--h24-text);
}


/* ==========================================================
   Footer
   Dunkelgrün = Vertrauen / Abschluss
   ========================================================== */

.footer,
.container-footer {
  background: var(--h24-green) !important;
  color: #fff;
}

.footer a,
.container-footer a {
  color: #fff;
}

.footer a:hover,
.footer a:focus-visible,
.container-footer a:hover,
.container-footer a:focus-visible {
  color: var(--h24-gold);
}

.footer-label {
  color: #fff;
}

.footer-contact span {
  color: var(--h24-gold);
}

.footer-copy {
  color: #fff;
  border-top-color: rgba(255, 255, 255, 0.35);
}


/* ==========================================================
   Responsive Basis
   ========================================================== */

@media (max-width: 991px) {

  .container-header .container-nav {
    width: 100%;
  }

  .container-header .mod-menu > li > a {
    padding: 0.7rem 0.8rem;
  }

}

@media (max-width: 600px) {

  h1 {
    font-size: 1.9rem;
  }

  h2 {
    font-size: 1.55rem;
  }

  .container-component p,
  .container-component li,
  .container-component dd,
  .container-component dt {
    font-size: 1rem;
    line-height: 1.62;
  }

}

/* ==========================================================
   ENDE H24 RELAUNCH 2026
   ========================================================== */


/* ==========================================================
   H24 RELAUNCH 2026
   Header-Feinschliff Desktop
   ========================================================== */

.container-header {
  padding-top: 0;
  padding-bottom: 0;
}

.container-header .grid-child {
  max-width: 1320px;
  margin-left: auto;
  margin-right: auto;
}

/* Logo-Zeile etwas kompakter und sauber zentriert */
.container-header .navbar-brand {
  display: flex;
  align-items: center;
  padding-top: 1rem;
  padding-bottom: 0.8rem;
  margin-right: 0;
}

.container-header .navbar-brand img {
  display: block;
  width: auto;
  height: auto;
  max-height: 54px;
}

/* Navigation horizontal ausrichten */
.container-header .container-nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 0.35rem;
  padding-bottom: 0.85rem;
}

.container-header .mod-menu {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.45rem;
  width: 100%;
  margin: 0;
}

/* Hauptmenü */
.container-header .mod-menu > li {
  margin: 0;
}

.container-header .mod-menu > li > a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 42px;

  padding: 0.55rem 0.85rem;

  color: #151515 !important;

  font-size: 1rem;
  font-weight: 700;
  line-height: 1.2;

  text-transform: uppercase;
  letter-spacing: 0.01em;

  border-radius: 8px;

  transition:
    background-color 0.18s ease,
    color 0.18s ease;
}

/* Hover */
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible {
  background-color: rgba(11, 93, 50, 0.10);
  color: var(--h24-green) !important;
}

/* Aktiver Menüpunkt */
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  background-color: var(--h24-green);
  color: #fff !important;
  text-decoration: none;
}

/* eventuell vorhandene Unterstreichungen entfernen */
.container-header .mod-menu > li > a::before,
.container-header .mod-menu > li > a::after {
  text-decoration: none;
}

/* Abstand zwischen Header und Inhalt */
.site-grid {
  padding-top: 1.6rem;
}

/* Überschriftenbereich auf großen Bildschirmen ruhiger */
.container-component > * {
  max-width: 100%;
}

.container-component h1 {
  max-width: 1180px;
}

/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 1050px) {

  .container-header .mod-menu {
    gap: 0.15rem;
  }

  .container-header .mod-menu > li > a {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
    font-size: 0.94rem;
  }

}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 991px) {

  .container-header .navbar-brand {
    padding-top: 0.8rem;
    padding-bottom: 0.65rem;
  }

  .container-header .navbar-brand img {
    max-height: 46px;
  }

  .container-header .container-nav {
    justify-content: space-between;
    padding-top: 0;
    padding-bottom: 0.65rem;
  }

  .container-header .mod-menu {
    align-items: stretch;
    gap: 0;
  }

  .container-header .mod-menu > li > a {
    min-height: 44px;
    padding: 0.7rem 0.8rem;
    border-radius: 6px;
  }

  .site-grid {
    padding-top: 1.15rem;
  }

}

/* ==========================================================
   ENDE Header-Feinschliff
   ========================================================== */




/* ==========================================================
   H24 RELAUNCH 2026 – HEADER FINAL
   Gold = Marke
   Grün = Aktion / Vertrauen
   Weiß = Navigation / Fläche
   ========================================================== */


/* ----------------------------------------------------------
   Farbvariablen
   ---------------------------------------------------------- */

:root {
  --h24-gold: #ffc200;
  --h24-gold-dark: #e4ad00;

  --h24-green: #075c2d;
  --h24-green-hover: #064b25;
  --h24-green-soft: #eef7f1;

  --h24-text: #202428;
  --h24-text-soft: #62686d;

  --h24-white: #ffffff;
  --h24-light: #f7f9f7;
  --h24-border: #dde3df;

  --h24-radius: 9px;
}


/* ==========================================================
   HEADER – GOLDENER MARKENBEREICH
   ========================================================== */

.container-header {
  background: var(--h24-gold) !important;
  background-image: none !important;

  color: var(--h24-text);

  border: 0;
  border-bottom: 0;

  box-shadow: none;

  padding: 0;
}


/* ----------------------------------------------------------
   Logo-Zeile
   ---------------------------------------------------------- */

.container-header .grid-child:first-of-type {
  position: relative;
}

.container-header .navbar-brand {
  display: flex;
  align-items: center;

  margin: 0;

  padding-top: 18px;
  padding-bottom: 17px;

  color: var(--h24-text);
}

.container-header .navbar-brand a {
  display: inline-flex;
  align-items: center;

  color: var(--h24-text);

  text-decoration: none;
}

.container-header .navbar-brand img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 64px;
}


/* ==========================================================
   NAVIGATION – WEISSER BALKEN
   ========================================================== */

.container-header .container-nav {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;

  padding-top: 8px;
  padding-bottom: 8px;

  background: var(--h24-white);

  /* Weiß über komplette Bildschirmbreite */
  box-shadow:
    0 0 0 100vmax var(--h24-white),
    0 1px 0 var(--h24-border);

  clip-path: inset(0 -100vmax);
}


/* ----------------------------------------------------------
   Hauptmenü
   ---------------------------------------------------------- */

.container-header .mod-menu {
  display: flex;
  align-items: center;

  gap: 4px;

  margin: 0;
  padding: 0;

  color: var(--h24-text);
}

.container-header .mod-menu > li {
  margin: 0;
  padding: 0;
}

.container-header .mod-menu > li > a {
  display: flex;
  align-items: center;

  min-height: 44px;

  padding: 9px 13px;

  color: var(--h24-text) !important;

  background: transparent;

  border-radius: var(--h24-radius);

  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.2;

  letter-spacing: 0;

  text-transform: none;

  text-decoration: none !important;

  transition:
    color 0.16s ease,
    background-color 0.16s ease;
}


/* Hover */

.container-header .mod-menu > li > a:hover {
  color: var(--h24-green) !important;

  background: var(--h24-green-soft);
}


/* Tastatur-Fokus */

.container-header .mod-menu > li > a:focus-visible {
  color: var(--h24-green) !important;

  background: var(--h24-green-soft);

  outline: 3px solid rgba(7, 92, 45, 0.24);
  outline-offset: 2px;
}


/* Aktive Seite */

.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  color: #fff !important;

  background: var(--h24-green);

  font-weight: 700;
}


/* ==========================================================
   DROPDOWN
   ========================================================== */

.container-header .mod-menu > li > ul {
  margin-top: 6px;

  padding: 7px;

  background: #fff;

  border: 1px solid var(--h24-border);

  border-radius: 10px;

  box-shadow: 0 12px 30px rgba(20, 35, 27, 0.13);
}

.container-header .mod-menu > li > ul li {
  margin: 0;
}

.container-header .mod-menu > li > ul a {
  display: block;

  padding: 9px 12px;

  color: var(--h24-text) !important;

  background: transparent;

  border-radius: 7px;

  font-weight: 550;

  text-decoration: none !important;
}

.container-header .mod-menu > li > ul a:hover,
.container-header .mod-menu > li > ul a:focus-visible {
  color: #fff !important;

  background: var(--h24-green);
}


/* ==========================================================
   ALLGEMEINE BUTTONS
   ========================================================== */

.btn-primary,
button.btn-primary,
input.btn-primary {
  color: #fff !important;

  background: var(--h24-green) !important;

  border: 1px solid var(--h24-green) !important;

  border-radius: var(--h24-radius);

  padding: 0.72rem 1.18rem;

  font-weight: 700;

  box-shadow: none;

  text-decoration: none;

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    transform 0.16s ease;
}

.btn-primary:hover,
.btn-primary:focus-visible {
  color: #fff !important;

  background: var(--h24-green-hover) !important;

  border-color: var(--h24-green-hover) !important;
}

.btn-primary:active {
  transform: translateY(1px);
}


/* ==========================================================
   INHALTSBEREICH
   ========================================================== */

body {
  color: var(--h24-text);

  background: var(--h24-white);
}

.site-grid {
  padding-top: 28px;

  background: var(--h24-white);
}

.container-component {
  color: var(--h24-text);
}

.container-component h1 {
  margin-bottom: 1.1rem;

  color: var(--h24-text);

  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 750;
  line-height: 1.13;

  letter-spacing: -0.02em;
}

.container-component h2 {
  color: var(--h24-text);

  font-size: clamp(1.55rem, 2.25vw, 2.05rem);
  font-weight: 720;
  line-height: 1.2;
}

.container-component h3 {
  color: var(--h24-text);

  font-weight: 700;
}

.container-component p,
.container-component li,
.container-component dd,
.container-component dt {
  color: var(--h24-text);

  font-size: 1.04rem;
  line-height: 1.68;
}


/* Textlinks */

.container-component a:not(.btn) {
  color: var(--h24-green);
}

.container-component a:not(.btn):hover {
  color: var(--h24-green-hover);
}


/* ==========================================================
   FOOTER
   ========================================================== */

.container-footer,
.footer {
  color: #fff !important;

  background: var(--h24-green) !important;
  background-image: none !important;
}

.container-footer a,
.footer a {
  color: #fff !important;
}

.container-footer a:hover,
.container-footer a:focus-visible,
.footer a:hover,
.footer a:focus-visible {
  color: var(--h24-gold) !important;
}

.footer-label {
  color: #fff !important;
}

.footer-contact span {
  color: var(--h24-gold) !important;
}

.footer-copy {
  color: rgba(255, 255, 255, 0.88);

  border-top-color: rgba(255, 255, 255, 0.28);
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

  .container-header .navbar-brand {
    padding-top: 15px;
    padding-bottom: 14px;
  }

  .container-header .navbar-brand img {
    max-height: 56px;
  }

  .container-header .mod-menu {
    gap: 1px;
  }

  .container-header .mod-menu > li > a {
    padding-left: 10px;
    padding-right: 10px;

    font-size: 0.93rem;
  }

}


/* ==========================================================
   MOBILE / OFFCANVAS
   ========================================================== */

@media (max-width: 991px) {

  .container-header .navbar-brand {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .container-header .navbar-brand img {
    max-height: 50px;
  }

  .container-header .container-nav {
    min-height: 58px;

    padding-top: 7px;
    padding-bottom: 7px;
  }

  /* Hamburger sauber zentrieren */

  .container-header .navbar-toggler {
    align-self: center;

    margin: 0;

    color: var(--h24-green);

    background: #fff;

    border: 1px solid var(--h24-border);

    border-radius: 8px;
  }

  .container-header .navbar-toggler:hover {
    background: var(--h24-green-soft);
  }

  /* Mobile-Menü */

  .container-header .mod-menu {
    align-items: stretch;

    gap: 2px;

    width: 100%;
  }

  .container-header .mod-menu > li > a {
    min-height: 46px;

    padding: 11px 12px;

    font-size: 1rem;

    border-radius: 7px;
  }

  .site-grid {
    padding-top: 20px;
  }

}


/* ==========================================================
   KLEINE SMARTPHONES
   ========================================================== */

@media (max-width: 600px) {

  .container-header .navbar-brand img {
    max-height: 44px;
  }

  .container-component h1 {
    font-size: 1.9rem;

    line-height: 1.16;
  }

  .container-component h2 {
    font-size: 1.5rem;
  }

  .container-component p,
  .container-component li,
  .container-component dd,
  .container-component dt {
    font-size: 1rem;

    line-height: 1.62;
  }

}


/* ==========================================================
   Bewegungsreduktion
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .container-header .mod-menu a,
  .btn-primary {
    transition: none;
  }

}


/* ==========================================================
   ENDE H24 RELAUNCH 2026 – HEADER FINAL
   ========================================================== */



/* ==========================================================
   H24 RELAUNCH 2026
   Korrektur Markenheader + Navigationszeile
   ========================================================== */

/* Gesamter Header wieder Gold */
.container-header {
  position: relative;
  background: var(--h24-gold) !important;
  background-image: none !important;
}

/* Logo-Bereich bleibt eindeutig auf Gold */
.container-header .navbar-brand {
  position: relative;
  z-index: 2;

  padding-top: 18px;
  padding-bottom: 17px;

  background: transparent !important;
}

/* Navigationszeile */
.container-header .container-nav {
  position: relative;
  z-index: 2;

  background: #fff !important;

  padding-top: 8px;
  padding-bottom: 8px;

  box-shadow: none !important;
  clip-path: none !important;
}

/* Weiß nur hinter der Navigationszeile über volle Browserbreite */
.container-header .container-nav::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  transform: translateX(-50%);

  background: #fff;

  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid var(--h24-border);

  pointer-events: none;
}

/* Logo darf nicht von der weißen Nav-Fläche übermalt werden */
.container-header .navbar-brand::before {
  content: none !important;
}


/* ==========================================================
   ENDE Korrektur Markenheader
   ========================================================== */



/* ==========================================================
   H24 RELAUNCH 2026
   Korrektur Markenheader + Navigationszeile
   ========================================================== */

/* Gesamter Header wieder Gold */
.container-header {
  position: relative;
  background: var(--h24-gold) !important;
  background-image: none !important;
}

/* Logo-Bereich bleibt eindeutig auf Gold */
.container-header .navbar-brand {
  position: relative;
  z-index: 2;

  padding-top: 18px;
  padding-bottom: 17px;

  background: transparent !important;
}

/* Navigationszeile */
.container-header .container-nav {
  position: relative;
  z-index: 2;

  background: #fff !important;

  padding-top: 8px;
  padding-bottom: 8px;

  box-shadow: none !important;
  clip-path: none !important;
}

/* Weiß nur hinter der Navigationszeile über volle Browserbreite */
.container-header .container-nav::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  transform: translateX(-50%);

  background: #fff;

  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid var(--h24-border);

  pointer-events: none;
}

/* Logo darf nicht von der weißen Nav-Fläche übermalt werden */
.container-header .navbar-brand::before {
  content: none !important;
}


/* ==========================================================
   ENDE Korrektur Markenheader
   ========================================================== */


/* ==========================================================
   H24 RELAUNCH 2026
   Header-Aufteilung: Gold oben / Weiß unten
   ========================================================== */

.container-header {
  position: relative;
  background: #ffc200 !important;
  background-image: none !important;
}

/* Logo-Bereich als echte goldene Zone */
.container-header .navbar-brand {
  position: relative;
  z-index: 3;

  display: flex;
  align-items: center;

  min-height: 88px;

  padding-top: 14px;
  padding-bottom: 14px;

  background: transparent !important;
}

/* Navigation klar davon trennen */
.container-header .container-nav {
  position: relative;
  z-index: 4;

  display: flex;
  align-items: center;

  min-height: 62px;

  padding-top: 8px;
  padding-bottom: 8px;

  background: #fff !important;

  border-top: 1px solid rgba(0, 0, 0, 0.04);
  border-bottom: 1px solid #dde3df;

  box-shadow: none !important;
  clip-path: none !important;
}

/* weiße Navigationsfläche über volle Breite */
.container-header .container-nav::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  transform: translateX(-50%);

  background: #fff;
}

/* Goldfläche hinter dem Logo über volle Breite */
.container-header .navbar-brand::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: 0;
  bottom: 0;
  left: 50%;

  width: 100vw;

  transform: translateX(-50%);

  background: #ffc200;
}

/* Logo */
.container-header .navbar-brand img {
  display: block;

  width: auto;
  height: auto;

  max-height: 58px;
}

/* ==========================================================
   Tablet
   ========================================================== */

@media (max-width: 1050px) {

  .container-header .navbar-brand {
    min-height: 78px;
  }

  .container-header .navbar-brand img {
    max-height: 52px;
  }

}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 991px) {

  .container-header .navbar-brand {
    min-height: 70px;

    padding-top: 10px;
    padding-bottom: 10px;
  }

  .container-header .navbar-brand img {
    max-height: 46px;
  }

  .container-header .container-nav {
    min-height: 56px;
  }

}

/* ==========================================================
   ENDE Header-Aufteilung
   ========================================================== */


/* ==========================================================
   H24 RELAUNCH 2026
   Header korrekt trennen
   Gold oben / Weiß Navigation
   ========================================================== */

/* Gesamter Header neutral */
.container-header {
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
}

/* Oberer Bereich mit Logo = Gold */
.container-header > .grid-child:not(.container-nav) {
  position: relative;

  background: #ffc200 !important;

  box-shadow:
    0 0 0 100vmax #ffc200;

  clip-path: inset(0 -100vmax);
}

/* Logo sauber im Goldbereich */
.container-header .navbar-brand {
  min-height: 82px;

  display: flex;
  align-items: center;

  padding-top: 12px;
  padding-bottom: 12px;

  background: transparent !important;
}

/* alle alten Pseudo-Hintergründe deaktivieren */
.container-header .navbar-brand::before,
.container-header .container-nav::before {
  content: none !important;
  display: none !important;
}

/* Navigation = eigene weiße Zeile */
.container-header .container-nav {
  position: relative;

  width: 100%;

  min-height: 60px;

  display: flex;
  align-items: center;

  padding-top: 8px;
  padding-bottom: 8px;

  background: #ffffff !important;

  border-top: 0;
  border-bottom: 1px solid #dde3df;

  box-shadow:
    0 0 0 100vmax #ffffff;

  clip-path: inset(0 -100vmax);
}

/* Navigation kompakt */
.container-header .mod-menu {
  display: flex;
  align-items: center;

  gap: 10px;

  margin: 0;
}

/* Menülinks */
.container-header .mod-menu > li > a {
  min-height: 44px;

  display: flex;
  align-items: center;

  padding: 9px 14px;

  border-radius: 9px;

  color: #202428 !important;
  background: transparent;

  font-size: 0.98rem;
  font-weight: 650;

  text-decoration: none !important;
}

/* Hover */
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible {
  color: #075c2d !important;
  background: #eef7f1;
}

/* aktiv */
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li.current > a {
  color: #ffffff !important;
  background: #075c2d;
}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 991px) {

  .container-header .navbar-brand {
    min-height: 68px;
  }

  .container-header .container-nav {
    min-height: 56px;
  }

}

/* ==========================================================
   ENDE Header korrekt trennen
   ========================================================== */


/* ==========================================================
   H24 FIX – Cassiopeia Header wirklich zweizeilig
   ========================================================== */

/* Header selbst neutral */
body .container-header {
  display: block !important;
  background: transparent !important;
  background-image: none !important;
  padding: 0 !important;
}

/* Der Cassiopeia-Grid-Container, der das Logo enthält */
body .container-header > .grid-child:has(.navbar-brand) {
  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 1320px;

  min-height: 88px;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-top: 12px;
  padding-bottom: 12px;

  background: #ffc200 !important;

  box-shadow: 0 0 0 100vmax #ffc200 !important;
  clip-path: inset(0 -100vmax) !important;
}

/* Logo selbst */
body .container-header .navbar-brand {
  display: flex !important;
  align-items: center !important;

  min-height: 0 !important;

  margin: 0 !important;
  padding: 0 !important;

  background: transparent !important;

  box-shadow: none !important;
  clip-path: none !important;
}

body .container-header .navbar-brand::before,
body .container-header .navbar-brand::after {
  display: none !important;
  content: none !important;
}

body .container-header .navbar-brand img {
  display: block;

  width: auto;
  height: auto;

  max-height: 58px;
}


/* ----------------------------------------------------------
   Navigation zwingend als zweite weiße Zeile
   ---------------------------------------------------------- */

body .container-header > .container-nav,
body .container-header > .grid-child.container-nav {
  display: flex !important;
  align-items: center !important;

  width: 100% !important;
  max-width: 1320px;

  min-height: 60px;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-top: 8px !important;
  padding-bottom: 8px !important;

  background: #fff !important;

  border: 0 !important;
  border-bottom: 1px solid #dde3df !important;

  box-shadow: 0 0 0 100vmax #fff !important;
  clip-path: inset(0 -100vmax) !important;
}

body .container-header .container-nav::before,
body .container-header .container-nav::after {
  display: none !important;
  content: none !important;
}


/* ----------------------------------------------------------
   Menü
   ---------------------------------------------------------- */

body .container-header .mod-menu {
  display: flex;
  align-items: center;

  gap: 6px;

  margin: 0;
  padding: 0;
}

body .container-header .mod-menu > li > a {
  display: flex;
  align-items: center;

  min-height: 42px;

  padding: 9px 14px;

  color: #202428 !important;
  background: transparent !important;

  border-radius: 9px;

  font-size: 0.98rem;
  font-weight: 650;

  text-decoration: none !important;
}

body .container-header .mod-menu > li > a:hover,
body .container-header .mod-menu > li > a:focus-visible {
  color: #075c2d !important;
  background: #eef7f1 !important;
}

body .container-header .mod-menu > li.active > a,
body .container-header .mod-menu > li.current > a {
  color: #fff !important;
  background: #075c2d !important;
}


/* ----------------------------------------------------------
   Mobile
   ---------------------------------------------------------- */

@media (max-width: 991px) {

  body .container-header > .grid-child:has(.navbar-brand) {
    min-height: 70px;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  body .container-header .navbar-brand img {
    max-height: 46px;
  }

}


/* ==========================================================
   ENDE H24 FIX
   ========================================================== */


/* ==========================================================
   H24 RELAUNCH 2026
   FINALER HEADER AUF BASIS DER ECHTEN HTML-STRUKTUR

   .container-nav
     ├── #mod-custom106  = Logo
     └── nav.moduletable = Hauptnavigation
   ========================================================== */


/* ----------------------------------------------------------
   Gesamten Cassiopeia-Header neutralisieren
   ---------------------------------------------------------- */

body .container-header {
  display: block !important;

  padding: 0 !important;

  background: transparent !important;
  background-image: none !important;

  border: 0 !important;
  box-shadow: none !important;
}


/* ----------------------------------------------------------
   container-nav wird zweizeilig:
   Logo oben / Navigation unten
   ---------------------------------------------------------- */

body .container-header .container-nav {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;

  width: 100% !important;
  max-width: 1320px;

  margin: 0 auto !important;
  padding: 0 !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;
  clip-path: none !important;
}


/* alte Pseudo-Hintergründe vollständig deaktivieren */

body .container-header .container-nav::before,
body .container-header .container-nav::after {
  display: none !important;
  content: none !important;
}


/* ==========================================================
   LOGOBEREICH – GOLD
   ========================================================== */

body .container-header #mod-custom106 {
  position: relative;

  display: flex;
  align-items: center;

  width: 100%;

  min-height: 88px;

  padding: 14px 0;

  background: #ffc200 !important;

  /* Gold über komplette Browserbreite */
  box-shadow: 0 0 0 100vmax #ffc200 !important;
  clip-path: inset(0 -100vmax);
}


/* Joomla-Custom-Modul erzeugt ein <p> um das Logo */

body .container-header #mod-custom106 p {
  display: flex;
  align-items: center;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;
}


/* Logo-Link */

body .container-header #mod-custom106 a {
  display: inline-flex;
  align-items: center;

  margin: 0;
  padding: 0;

  text-decoration: none;
}


/* Logo-Bild */

body .container-header #mod-custom106 img {
  display: block !important;
  float: none !important;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 58px;

  margin: 0 !important;
}


/* ==========================================================
   NAVIGATIONSZEILE – WEISS
   ========================================================== */

/*
   Das erste nav ist das Joomla-Modul,
   darin liegt nochmals nav.navbar.
*/

body .container-header .container-nav > nav.moduletable {
  position: relative;

  display: block;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  background: #fff !important;

  border-bottom: 1px solid #dde3df;

  /* Weiß über komplette Browserbreite */
  box-shadow: 0 0 0 100vmax #fff !important;
  clip-path: inset(0 -100vmax);
}


/* Bootstrap-Navigation */

body .container-header .container-nav > nav.moduletable > .navbar {
  display: flex;
  align-items: center;

  width: 100%;

  min-height: 62px;

  margin: 0;
  padding: 8px 0;

  background: #fff !important;
}


/* ==========================================================
   HAUPTMENÜ DESKTOP
   ========================================================== */

body .container-header .navbar-collapse {
  width: 100%;
}

body .container-header .mod-menu {
  display: flex;
  flex-direction: row;
  align-items: center;

  gap: 6px;

  width: 100%;

  margin: 0 !important;
  padding: 0 !important;

  color: #202428;
}


/* Menüpunkt */

body .container-header .mod-menu > li {
  margin: 0 !important;
  padding: 0 !important;
}

body .container-header .mod-menu > li > a {
  display: flex;
  align-items: center;

  min-height: 44px;

  padding: 9px 14px;

  color: #202428 !important;
  background: transparent !important;

  border-radius: 9px;

  font-size: 0.98rem;
  font-weight: 650;
  line-height: 1.2;

  text-transform: none;

  text-decoration: none !important;

  transition:
    color 0.16s ease,
    background-color 0.16s ease;
}


/* Hover */

body .container-header .mod-menu > li > a:hover,
body .container-header .mod-menu > li > a:focus-visible {
  color: #075c2d !important;

  background: #eef7f1 !important;
}


/* Aktive Seite */

body .container-header .mod-menu > li.current > a,
body .container-header .mod-menu > li.active > a {
  color: #fff !important;

  background: #075c2d !important;

  font-weight: 700;
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 991px) {

  body .container-header #mod-custom106 {
    min-height: 70px;

    padding-top: 10px;
    padding-bottom: 10px;
  }

  body .container-header #mod-custom106 img {
    max-height: 46px;
  }

  body .container-header .container-nav > nav.moduletable > .navbar {
    min-height: 58px;

    padding-top: 7px;
    padding-bottom: 7px;
  }


  /* Hamburger */

  body .container-header .navbar-toggler {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 46px;
    height: 44px;

    margin: 0;

    color: #075c2d;

    background: #fff;

    border: 1px solid #d7ded9;

    border-radius: 8px;

    box-shadow: none;
  }


  /* ausgeklapptes mobiles Menü */

  body .container-header .navbar-collapse {
    width: 100%;

    padding-top: 8px;
  }

  body .container-header .mod-menu {
    flex-direction: column;
    align-items: stretch;

    gap: 3px;

    width: 100%;
  }

  body .container-header .mod-menu > li {
    width: 100%;
  }

  body .container-header .mod-menu > li > a {
    width: 100%;

    min-height: 46px;

    padding: 11px 12px;

    font-size: 1rem;
  }

}


/* ==========================================================
   KLEINE SMARTPHONES
   ========================================================== */

@media (max-width: 600px) {

  body .container-header #mod-custom106 {
    min-height: 64px;
  }

  body .container-header #mod-custom106 img {
    max-height: 42px;
  }

}


/* ==========================================================
   ENDE FINALER H24 HEADER
   ========================================================== */


/* ==========================================================
   H24 RELAUNCH 2026
   Header Feinschliff nach finaler Struktur
   ========================================================== */

/* Navigation links am gleichen Raster wie das Logo */
body .container-header .container-nav > nav.moduletable > .navbar {
  justify-content: flex-start !important;

  min-height: 54px;

  padding-top: 5px;
  padding-bottom: 5px;
}

/* Collapse nicht nach rechts schieben */
body .container-header .navbar-collapse {
  flex-grow: 0 !important;
  width: auto !important;
}

/* Menü kompakter */
body .container-header .mod-menu {
  justify-content: flex-start !important;

  gap: 5px;

  width: auto !important;
}

/* Menübuttons etwas ruhiger */
body .container-header .mod-menu > li > a {
  min-height: 40px;

  padding: 8px 13px;

  font-size: 0.96rem;
}

/* nur eine saubere Linie unter der Navigation */
body .container-header .container-nav > nav.moduletable {
  border-bottom: 1px solid #dde3df !important;
}

body .container-header .container-nav {
  border-bottom: 0 !important;
}

/* eventuelle zusätzliche Cassiopeia-Linie entfernen */
body .container-header + .site-grid,
body .container-header + * {
  border-top: 0 !important;
}

/* Logo-Bereich leicht kompakter */
body .container-header #mod-custom106 {
  min-height: 82px;

  padding-top: 12px;
  padding-bottom: 12px;
}

/* ==========================================================
   Mobile
   ========================================================== */

@media (max-width: 991px) {

  body .container-header .navbar-collapse {
    width: 100% !important;
  }

  body .container-header .mod-menu {
    width: 100% !important;
  }

}

/* ==========================================================
   ENDE Header Feinschliff
   ========================================================== */


/* ==========================================================
   H24 RELAUNCH 2026
   Korrektur: Nav-Position + nur eine Linie
   ========================================================== */

/* Alle zusätzlichen Linien entfernen */
body .container-header,
body .container-header .container-nav,
body .container-header .container-nav > nav.moduletable,
body .container-header .container-nav > nav.moduletable > .navbar {
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
}

/* Nur eine einzige Linie unter der weißen Navigation */
body .container-header .container-nav > nav.moduletable::after {
  content: "";

  position: absolute;

  left: 50%;
  bottom: 0;

  width: 100vw;
  height: 1px;

  transform: translateX(-50%);

  background: #dde3df;

  pointer-events: none;
}

/* Navigation leicht nach rechts versetzen */
body .container-header .container-nav > nav.moduletable > .navbar {
  padding-left: 18px !important;
}

/* Desktop etwas mehr Abstand */
@media (min-width: 1200px) {
  body .container-header .container-nav > nav.moduletable > .navbar {
    padding-left: 28px !important;
  }
}

/* Tablet etwas weniger */
@media (max-width: 1050px) {
  body .container-header .container-nav > nav.moduletable > .navbar {
    padding-left: 12px !important;
  }
}

/* Mobile wieder bündig */
@media (max-width: 991px) {
  body .container-header .container-nav > nav.moduletable > .navbar {
    padding-left: 0 !important;
  }
}

/* ==========================================================
   ENDE Korrektur
   ========================================================== */


/* ==========================================================
   H24 RELAUNCH 2026
   Letzter Header-Feinschliff
   ========================================================== */

/* Navigation noch etwas nach rechts */
@media (min-width: 1200px) {
  body .container-header .container-nav > nav.moduletable > .navbar {
    padding-left: 42px !important;
  }
}

/* Zusätzliche Linie unterhalb des Headers entfernen */
body .site-grid,
body .container-component,
body main,
body .grid-child {
  border-top: 0 !important;
}

/* Nur die definierte Header-Trennlinie behalten */
body .container-header .container-nav > nav.moduletable::after {
  height: 1px;
  background: #dfe4e1;
}

/* ==========================================================
   ENDE letzter Header-Feinschliff
   ========================================================== */


/* ==========================================================
   H24 TEST – horizontale Linie im Content entfernen
   ========================================================== */

.container-component hr {
  display: none !important;
}


/* ==========================================================
   H24 FIX – doppelte Navigationslinie entfernen
   ========================================================== */

body .container-header > .container-nav,
body .container-header > .grid-child.container-nav {
  border-bottom: 0 !important;
}

/* ==========================================================
   ENDE H24 FIX
   ========================================================== */


/* ==========================================================
   H24 HEADER – letzter Feinschliff
   ========================================================== */

/* Goldbereich etwas kompakter */
body .container-header #mod-custom106 {
  min-height: 66px !important;
  padding-top: 8px !important;
  padding-bottom: 8px !important;
}

/* Navigation etwas weiter nach rechts */
@media (min-width: 1200px) {
  body .container-header .container-nav > nav.moduletable > nav.navbar {
    padding-left: 72px !important;
  }
}

/* ==========================================================
   ENDE
   ========================================================== */


/* ==========================================================
   H24 RELAUNCH 2026
   STARTSEITE – HERO
   ========================================================== */


/* ----------------------------------------------------------
   Joomla-Ausgabe auf der Startseite neutralisieren
   Hero enthält bereits das einzige sichtbare H1.
   ---------------------------------------------------------- */

body:has(.h24-hero) .container-component > h1.page-header {
  display: none !important;
}

body:has(.h24-hero) .container-component {
  margin-top: 0 !important;
}

body:has(.h24-hero) .container-component > .card {
  margin-top: 0 !important;

  background: transparent !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;
}

body:has(.h24-hero) .container-component > .card > .card-body {
  padding: 0 !important;
}


/* ==========================================================
   HERO – VOLLE BREITE
   ========================================================== */

.h24-hero {
  position: relative;

  left: 50%;

  width: 100vw;

  margin:
    0
    0
    clamp(50px, 6vw, 86px)
    -50vw;

  padding:
    clamp(52px, 6vw, 84px)
    24px
    clamp(56px, 7vw, 94px);

  overflow: hidden;

  background: #ffffff;
}


.h24-hero__inner {
  position: relative;
  z-index: 1;

  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, 0.85fr);

  align-items: center;

  gap: clamp(46px, 7vw, 94px);

  width: 100%;
  max-width: 1272px;

  margin: 0 auto;
}


/* ==========================================================
   TEXT
   ========================================================== */

.h24-hero__content {
  max-width: 750px;
}


.h24-hero__eyebrow {
  display: inline-flex;

  margin:
    0
    0
    20px !important;

  padding:
    7px
    12px;

  color: #075c2d !important;

  background: #edf7f1;

  border-radius: 999px;

  font-size: 0.86rem !important;
  font-weight: 750;

  line-height: 1.3 !important;
}


.h24-hero__title {
  max-width: 780px;

  margin:
    0
    0
    22px !important;

  color: #202428 !important;

  font-size: clamp(2.6rem, 4.5vw, 4.55rem) !important;
  font-weight: 800 !important;

  line-height: 1.02 !important;

  letter-spacing: -0.045em;
}


.h24-hero__title span {
  display: block;

  margin-top: 8px;

  color: #075c2d;
}


.h24-hero__lead {
  max-width: 680px;

  margin:
    0
    0
    30px !important;

  color: #5f666d !important;

  font-size: clamp(1.08rem, 1.35vw, 1.22rem) !important;
  line-height: 1.65 !important;
}


/* ==========================================================
   BUTTONS
   ========================================================== */

.h24-hero__actions {
  display: flex;
  flex-wrap: wrap;

  gap: 12px;

  margin-bottom: 36px;
}


.h24-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 49px;

  padding:
    12px
    21px;

  border-radius: 9px;

  font-size: 0.98rem;
  font-weight: 750;

  line-height: 1.2;

  text-decoration: none !important;

  transition:
    background-color 0.16s ease,
    border-color 0.16s ease,
    color 0.16s ease;
}


.h24-btn--primary {
  color: #fff !important;

  background: #075c2d !important;

  border: 1px solid #075c2d !important;
}


.h24-btn--primary:hover,
.h24-btn--primary:focus-visible {
  color: #fff !important;

  background: #064b25 !important;

  border-color: #064b25 !important;
}


.h24-btn--secondary {
  color: #202428 !important;

  background: #fff !important;

  border: 1px solid #cbd5cf !important;
}


.h24-btn--secondary:hover,
.h24-btn--secondary:focus-visible {
  color: #075c2d !important;

  background: #f5f8f6 !important;

  border-color: #075c2d !important;
}


.h24-btn:focus-visible {
  outline: 3px solid rgba(255, 194, 0, 0.65);
  outline-offset: 3px;
}


/* ==========================================================
   VERTRAUENSZAHLEN
   ========================================================== */

.h24-hero__facts {
  display: flex;
  flex-wrap: wrap;

  align-items: flex-start;
}


.h24-hero__fact {
  display: flex;
  flex-direction: column;

  min-width: 145px;

  padding:
    0
    22px;

  border-left: 1px solid #dce4df;
}


.h24-hero__fact:first-child {
  padding-left: 0;

  border-left: 0;
}


.h24-hero__fact strong {
  margin-bottom: 3px;

  color: #202428;

  font-size: 1rem;
  font-weight: 800;

  line-height: 1.3;
}


.h24-hero__fact span {
  color: #69716c;

  font-size: 0.86rem;

  line-height: 1.4;
}


/* ==========================================================
   PRODUKTVISUAL
   ========================================================== */

.h24-hero__visual {
  display: flex;

  justify-content: center;
  align-items: center;
}


.h24-hero__image-card {
  position: relative;

  width: min(100%, 420px);

  padding:
    28px
    28px
    22px;

  background: #fff;

  border: 1px solid #e0e6e2;
  border-radius: 18px;

  box-shadow:
    0 20px 55px rgba(23, 43, 32, 0.13);
}


/* goldene Karte hinter Produkt */

.h24-hero__image-card::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: 22px;
  right: -20px;

  width: 91%;
  height: 96%;

  background: #ffc200;

  border-radius: 18px;

  transform: rotate(3deg);
}


.h24-hero__badge {
  display: inline-flex;

  margin-bottom: 20px;

  padding:
    6px
    10px;

  color: #202428;

  background: #ffc200;

  border-radius: 7px;

  font-size: 0.78rem;
  font-weight: 800;
}


.h24-hero__image-wrap {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 270px;

  padding: 10px;
}


.h24-hero__image-wrap img {
  display: block;

  width: auto !important;
  height: auto !important;

  max-width: 100% !important;
  max-height: 300px !important;

  margin: 0 auto !important;

  object-fit: contain;
}


.h24-hero__image-meta {
  margin-top: 20px;

  padding-top: 17px;

  color: #66706a;

  border-top: 1px solid #e2e7e4;

  font-size: 0.84rem;

  line-height: 1.5;
}


.h24-hero__image-meta span {
  margin:
    0
    5px;

  color: #ffc200;

  font-weight: 900;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

  .h24-hero__inner {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(285px, 0.72fr);

    gap: 42px;
  }


  .h24-hero__title {
    font-size: clamp(2.35rem, 5vw, 3.6rem) !important;
  }


  .h24-hero__fact {
    min-width: 130px;

    padding-left: 16px;
    padding-right: 16px;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 770px) {

  .h24-hero {
    padding:
      42px
      18px
      62px;
  }


  .h24-hero__inner {
    grid-template-columns: 1fr;

    gap: 48px;
  }


  .h24-hero__content {
    max-width: none;
  }


  .h24-hero__title {
    font-size: clamp(2.15rem, 9vw, 3.15rem) !important;

    letter-spacing: -0.035em;
  }


  .h24-hero__visual {
    justify-content: flex-start;
  }


  .h24-hero__image-card {
    width: min(100%, 470px);
  }

}


/* ==========================================================
   KLEINE SMARTPHONES
   ========================================================== */

@media (max-width: 600px) {

  .h24-hero {
    padding-top: 34px;
  }


  .h24-hero__eyebrow {
    margin-bottom: 16px !important;
  }


  .h24-hero__title {
    margin-bottom: 18px !important;
  }


  .h24-hero__lead {
    font-size: 1.04rem !important;
  }


  .h24-hero__actions {
    display: grid;

    grid-template-columns: 1fr;

    margin-bottom: 32px;
  }


  .h24-btn {
    width: 100%;
  }


  .h24-hero__facts {
    display: grid;

    grid-template-columns: 1fr;

    gap: 13px;
  }


  .h24-hero__fact,
  .h24-hero__fact:first-child {
    min-width: 0;

    padding:
      0
      0
      0
      13px;

    border-left: 3px solid #ffc200;
  }


  .h24-hero__image-card {
    padding: 22px;
  }


  .h24-hero__image-card::before {
    right: -9px;
  }


  .h24-hero__image-wrap {
    min-height: 220px;
  }

}


/* ==========================================================
   REDUCED MOTION
   ========================================================== */

@media (prefers-reduced-motion: reduce) {

  .h24-btn {
    transition: none;
  }

}


/* ==========================================================
   ENDE H24 STARTSEITE – HERO
   ========================================================== */


/* ==========================================================
   H24 HERO – PRODUKTKOMPOSITION
   01 Rund / 03 Dreieck / 09 Raute
   ========================================================== */


/* Karte großzügiger und näher am Referenzentwurf */

.h24-hero__image-card {
  position: relative;

  width: min(100%, 470px);

  min-height: 440px;

  padding: 28px;

  overflow: visible;

  background: #fff;

  border: 1px solid #e2e7e4;
  border-radius: 20px;

  box-shadow:
    0 22px 60px rgba(25, 45, 34, 0.13);
}


/* kräftigere goldene Fläche hinter der weißen Karte */

.h24-hero__image-card::before {
  content: "";

  position: absolute;
  z-index: -1;

  top: 30px;
  right: -26px;

  width: 88%;
  height: 92%;

  background: #ffc200;

  border-radius: 22px;

  transform: rotate(3deg);
}


/* Badge */

.h24-hero__badge {
  position: relative;
  z-index: 10;

  display: inline-flex;

  margin: 0;

  padding: 7px 11px;

  color: #202428;

  background: #ffc200;

  border-radius: 8px;

  font-size: 0.79rem;
  font-weight: 800;
}


/* ----------------------------------------------------------
   Bühne für die drei Produktbilder
   ---------------------------------------------------------- */

.h24-hero__product-stage {
  position: relative;

  width: 100%;
  height: 300px;

  margin-top: 12px;
}


/* alle Produktbilder */

.h24-hero__product {
  position: absolute;

  display: block;

  width: auto !important;
  height: auto !important;

  margin: 0 !important;

  object-fit: contain;

  filter:
    drop-shadow(0 12px 14px rgba(23, 32, 27, 0.16));

  transition:
    transform 0.2s ease;
}


/* Runde Marke – Hauptmotiv vorne */

.h24-hero__product--round {
  z-index: 4;

  left: 50%;
  top: 54px;

  width: 205px !important;
  max-width: 52% !important;

  transform:
    translateX(-50%)
    rotate(-3deg);
}


/* Dreieck – links hinten */

.h24-hero__product--triangle {
  z-index: 2;

  left: 12px;
  top: 36px;

  width: 175px !important;
  max-width: 43% !important;

  transform: rotate(-10deg);
}


/* Raute – rechts hinten */

.h24-hero__product--diamond {
  z-index: 3;

  right: 5px;
  top: 48px;

  width: 175px !important;
  max-width: 43% !important;

  transform: rotate(9deg);
}


/* dezenter Hover nur auf Geräten mit Maus */

@media (hover: hover) {

  .h24-hero__image-card:hover
  .h24-hero__product--round {
    transform:
      translateX(-50%)
      translateY(-4px)
      rotate(-3deg);
  }

}


/* untere Produktinfo */

.h24-hero__image-meta {
  position: relative;
  z-index: 5;

  margin-top: 6px;

  padding-top: 17px;

  color: #626b66;

  border-top: 1px solid #e2e7e4;

  font-size: 0.84rem;
  line-height: 1.5;
}


/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1050px) {

  .h24-hero__image-card {
    min-height: 400px;
  }

  .h24-hero__product-stage {
    height: 265px;
  }

  .h24-hero__product--round {
    width: 180px !important;
  }

  .h24-hero__product--triangle,
  .h24-hero__product--diamond {
    width: 150px !important;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 600px) {

  .h24-hero__image-card {
    min-height: 365px;

    padding: 20px;
  }

  .h24-hero__product-stage {
    height: 235px;
  }

  .h24-hero__product--round {
    top: 48px;

    width: 165px !important;
  }

  .h24-hero__product--triangle {
    left: 0;
    top: 34px;

    width: 135px !important;
  }

  .h24-hero__product--diamond {
    right: 0;
    top: 44px;

    width: 135px !important;
  }

  .h24-hero__image-card::before {
    right: -10px;
  }

}


/* Reduced motion */

@media (prefers-reduced-motion: reduce) {

  .h24-hero__product {
    transition: none;
  }

}

/* ==========================================================
   ENDE H24 HERO – PRODUKTKOMPOSITION
   ========================================================== */










/* ==========================================================
   H24 STARTSEITE – FULL WIDTH HERO 2026
   ========================================================== */

.h24-hero {
  position: relative;

  width: 100vw;
  min-height: 620px;

  left: 50%;
  margin-left: -50vw;
  margin-bottom: clamp(50px, 6vw, 86px);

  padding:
    0
    24px
    clamp(64px, 7vw, 96px);

  display: flex;
  align-items: center;

  overflow: hidden;

  background:
    linear-gradient(
      90deg,
      rgba(255,255,255,0.96) 0%,
      rgba(255,255,255,0.93) 28%,
      rgba(255,255,255,0.70) 44%,
      rgba(255,255,255,0.18) 62%,
      rgba(255,255,255,0) 76%
    ),
    url("/images/Hero/Hundemarken-im-sonnigen-Park.webp")
    center center / cover no-repeat;
}

/* alte Kreis-/Deko-Geometrie entfernen */
.h24-hero::before,
.h24-hero::after {
  content: none !important;
  display: none !important;
}

.h24-hero__inner {
  display: block;

  width: 100%;
  max-width: 1272px;

  margin: 0 auto;
}

.h24-hero__content {
  position: relative;
  z-index: 2;

  width: min(100%, 650px);
  max-width: 650px;

  padding: 0;
}

.h24-hero__eyebrow {
  background: rgba(255,255,255,0.88);
  backdrop-filter: blur(4px);
}

.h24-hero__title {
  max-width: 640px;
}

.h24-hero__lead {
  max-width: 610px;
}

/* keine alte rechte Bildspalte mehr */
.h24-hero__visual,
.h24-hero__visual--photo {
  display: none !important;
}

/* Tablet */
@media (max-width: 1050px) {

  .h24-hero {
    min-height: 560px;

    background:
      linear-gradient(
        90deg,
        rgba(255,255,255,0.97) 0%,
        rgba(255,255,255,0.93) 34%,
        rgba(255,255,255,0.62) 52%,
        rgba(255,255,255,0.08) 72%
      ),
      url("/images/Hero/Hundemarken-im-sonnigen-Park.webp")
      62% center / cover no-repeat;
  }

}

/* Mobile */
@media (max-width: 800px) {

  .h24-hero {
    min-height: 620px;

    padding:
      42px
      18px
      52px;

    align-items: flex-end;

    background:
      linear-gradient(
        0deg,
        rgba(255,255,255,0.98) 0%,
        rgba(255,255,255,0.94) 38%,
        rgba(255,255,255,0.55) 62%,
        rgba(255,255,255,0.05) 82%
      ),
      url("/images/Hero/Hundemarken-im-sonnigen-Park.webp")
      67% center / cover no-repeat;
  }

  .h24-hero__content {
    width: 100%;
    max-width: none;
  }

}

/* Kleine Smartphones */
@media (max-width: 600px) {

  .h24-hero {
    min-height: 680px;

    background:
      linear-gradient(
        0deg,
        rgba(255,255,255,0.98) 0%,
        rgba(255,255,255,0.95) 42%,
        rgba(255,255,255,0.50) 68%,
        rgba(255,255,255,0.04) 84%
      ),
      url("/images/Hero/Hundemarken-im-sonnigen-Park.webp")
      70% center / cover no-repeat;
  }

}

/* ==========================================================
   ENDE H24 STARTSEITE – FULL WIDTH HERO 2026
   ========================================================== */


/* H24 Startseite – Hero direkt unter Navigation */
body:has(.h24-hero) .site-grid {
  padding-top: 0 !important;
}

body:has(.h24-hero) .container-component,
body:has(.h24-hero) main,
body:has(.h24-hero) .com-content-article,
body:has(.h24-hero) .com-content-article__body {
  margin-top: 0 !important;
  padding-top: 0 !important;
}


/* H24 VISFORMS CHECKBOX FIX START */
.visforms-form .form-check {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding-left: 0;
}

.visforms-form input.form-check-input[type="checkbox"],
.visforms-form input.form-check-input[type="radio"] {
    appearance: auto;
    -webkit-appearance: auto;
    display: inline-block;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin: 3px 0 0;
    padding: 0;
    accent-color: #075c2d;
    cursor: pointer;
}

.visforms-form .form-check-label {
    margin: 0;
    line-height: 1.5;
    cursor: pointer;
}
/* H24 VISFORMS CHECKBOX FIX END */

/* H24 VISFORMS FORM10 TRENNLINIEN START */

/* Bereichstrenner trotz allgemeiner HR-Ausblendung anzeigen */
.container-component .visforms-form hr#field495,
.container-component .visforms-form hr#field512 {
    display: block !important;
    visibility: visible;
    width: 100%;
    height: 0;
    margin: 26px 0 20px;
    padding: 0;
    border: 0;
    border-top: 2px solid #d9e2dc;
    opacity: 1;
}

/* H24 VISFORMS FORM10 TRENNLINIEN ENDE */

/* H24 VISFORMS FORM2 BAUMMARKEN START */

/* Baummarkenformular (Itemid 187): fehlende Trennlinien wieder sichtbar */
body.itemid-187 .container-component .visforms-form hr:not(.vishidden) {
    display: block !important;
    visibility: visible;
    width: 100%;
    height: 0;
    margin: 28px 0 22px;
    padding: 0;
    border: 0;
    border-top: 1px solid #d7ddd8;
    opacity: 1;
}

/* Hauptüberschrift etwas kompakter */
body.itemid-187 .visforms-form h1 {
    font-size: clamp(2rem, 2.7vw, 2.8rem);
    line-height: 1.12;
    margin: 0 0 22px;
    letter-spacing: -0.02em;
}

/* Zwischenüberschriften deutlich ruhiger */
body.itemid-187 .visforms-form h2,
body.itemid-187 .visforms-form h3 {
    font-size: clamp(1.15rem, 1.35vw, 1.55rem);
    line-height: 1.22;
    margin: 0 0 12px;
    font-weight: 700;
}

/* violette Produkt-Überschriften etwas kleiner und sauberer */
body.itemid-187 .visforms-form h2[style*="color"],
body.itemid-187 .visforms-form h3[style*="color"] {
    font-size: clamp(1.08rem, 1.2vw, 1.35rem);
    line-height: 1.2;
    margin-bottom: 10px;
}

/* Abschnittsüberschriften wie "Folgendes Zubehör ..." kompakter */
body.itemid-187 .visforms-form .visCustomText,
body.itemid-187 .visforms-form .field-label,
body.itemid-187 .visforms-form .visforms-fieldsep {
    line-height: 1.35;
}

/* auf kleineren Bildschirmen noch etwas kompakter */
@media (max-width: 900px) {
    body.itemid-187 .visforms-form h1 {
        font-size: clamp(1.7rem, 7vw, 2.2rem);
    }

    body.itemid-187 .visforms-form h2,
    body.itemid-187 .visforms-form h3 {
        font-size: clamp(1.02rem, 4.5vw, 1.25rem);
    }
}

/* H24 VISFORMS FORM2 BAUMMARKEN ENDE */

/* H24 VISFORMS RASTER OHNE SUBSCRIPTION START */
/* Aus gespeicherten Visforms-gridSizes erzeugt. */
/* Keine Änderungen an Visforms oder der Datenbank. */

form#visform2 .visfield-container:not([data-container-field-type="fieldsep"]) > .form-group.row > label[class*="col-"],
form#visform2 .visfield-container:not([data-container-field-type="fieldsep"]) > .form-group.row > div[class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

form#visform2 .visfield-container > .row > [class*='offset-'] {
    margin-left: 0;
}

form#visform4 .visfield-container:not([data-container-field-type="fieldsep"]) > .form-group.row > label[class*="col-"],
form#visform4 .visfield-container:not([data-container-field-type="fieldsep"]) > .form-group.row > div[class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

form#visform4 .visfield-container > .row > [class*='offset-'] {
    margin-left: 0;
}

form#visform10 .visfield-container:not([data-container-field-type="fieldsep"]) > .form-group.row > label[class*="col-"],
form#visform10 .visfield-container:not([data-container-field-type="fieldsep"]) > .form-group.row > div[class*="col-"] {
    flex: 0 0 100%;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
}

form#visform10 .visfield-container > .row > [class*='offset-'] {
    margin-left: 0;
}

form#visform2 .visfield-container.field33,
form#visform2 .visfield-container.field35,
form#visform2 .visfield-container.field34,
form#visform2 .visfield-container.field98,
form#visform2 .visfield-container.field36,
form#visform2 .visfield-container.field39,
form#visform2 .visfield-container.field97,
form#visform2 .visfield-container.field43,
form#visform2 .visfield-container.field297,
form#visform2 .visfield-container.field319,
form#visform2 .visfield-container.field387,
form#visform2 .visfield-container.field320,
form#visform2 .visfield-container.field51,
form#visform2 .visfield-container.field52,
form#visform2 .visfield-container.field53,
form#visform2 .visfield-container.field54,
form#visform2 .visfield-container.field55,
form#visform2 .visfield-container.field56,
form#visform2 .visfield-container.field57,
form#visform2 .visfield-container.field58,
form#visform2 .visfield-container.field59,
form#visform2 .visfield-container.field101,
form#visform2 .visfield-container.field102,
form#visform2 .visfield-container.field60,
form#visform2 .visfield-container.field318,
form#visform2 .visfield-container.field61,
form#visform4 .visfield-container.field305,
form#visform4 .visfield-container.field306,
form#visform4 .visfield-container.field307,
form#visform4 .visfield-container.field137,
form#visform4 .visfield-container.field103,
form#visform4 .visfield-container.field106,
form#visform4 .visfield-container.field108,
form#visform4 .visfield-container.field109,
form#visform4 .visfield-container.field110,
form#visform4 .visfield-container.field111,
form#visform4 .visfield-container.field112,
form#visform4 .visfield-container.field113,
form#visform4 .visfield-container.field114,
form#visform4 .visfield-container.field115,
form#visform4 .visfield-container.field308,
form#visform4 .visfield-container.field117,
form#visform4 .visfield-container.field118,
form#visform4 .visfield-container.field121,
form#visform4 .visfield-container.field122,
form#visform4 .visfield-container.field123,
form#visform4 .visfield-container.field124,
form#visform4 .visfield-container.field125,
form#visform4 .visfield-container.field126,
form#visform4 .visfield-container.field127,
form#visform4 .visfield-container.field128,
form#visform4 .visfield-container.field129,
form#visform4 .visfield-container.field130,
form#visform4 .visfield-container.field131,
form#visform4 .visfield-container.field132,
form#visform10 .visfield-container.field390,
form#visform10 .visfield-container.field391,
form#visform10 .visfield-container.field392,
form#visform10 .visfield-container.field399,
form#visform10 .visfield-container.field400,
form#visform10 .visfield-container.field401,
form#visform10 .visfield-container.field402,
form#visform10 .visfield-container.field403,
form#visform10 .visfield-container.field404,
form#visform10 .visfield-container.field405,
form#visform10 .visfield-container.field406,
form#visform10 .visfield-container.field407,
form#visform10 .visfield-container.field408,
form#visform10 .visfield-container.field409,
form#visform10 .visfield-container.field410,
form#visform10 .visfield-container.field496,
form#visform10 .visfield-container.field497,
form#visform10 .visfield-container.field498,
form#visform10 .visfield-container.field500,
form#visform10 .visfield-container.field501,
form#visform10 .visfield-container.field502,
form#visform10 .visfield-container.field505,
form#visform10 .visfield-container.field506,
form#visform10 .visfield-container.field507,
form#visform10 .visfield-container.field508,
form#visform10 .visfield-container.field509,
form#visform10 .visfield-container.field510,
form#visform10 .visfield-container.field513,
form#visform10 .visfield-container.field514,
form#visform10 .visfield-container.field515,
form#visform10 .visfield-container.field516,
form#visform10 .visfield-container.field517,
form#visform10 .visfield-container.field518,
form#visform10 .visfield-container.field519,
form#visform10 .visfield-container.field520,
form#visform10 .visfield-container.field521,
form#visform10 .visfield-container.field522,
form#visform10 .visfield-container.field523,
form#visform10 .visfield-container.field524,
form#visform10 .visfield-container.field525,
form#visform10 .visfield-container.field526 {
    flex: 0 0 100.000000%;
    width: 100.000000%;
}

@media (min-width: 576px) {
    form#visform2 .visfield-container.field33,
    form#visform2 .visfield-container.field35,
    form#visform2 .visfield-container.field34,
    form#visform2 .visfield-container.field98,
    form#visform2 .visfield-container.field36,
    form#visform2 .visfield-container.field39,
    form#visform2 .visfield-container.field97,
    form#visform2 .visfield-container.field43,
    form#visform2 .visfield-container.field297,
    form#visform2 .visfield-container.field319,
    form#visform2 .visfield-container.field387,
    form#visform2 .visfield-container.field320,
    form#visform2 .visfield-container.field51,
    form#visform2 .visfield-container.field52,
    form#visform2 .visfield-container.field53,
    form#visform2 .visfield-container.field54,
    form#visform2 .visfield-container.field55,
    form#visform2 .visfield-container.field56,
    form#visform2 .visfield-container.field57,
    form#visform2 .visfield-container.field58,
    form#visform2 .visfield-container.field59,
    form#visform2 .visfield-container.field101,
    form#visform2 .visfield-container.field102,
    form#visform2 .visfield-container.field60,
    form#visform2 .visfield-container.field318,
    form#visform2 .visfield-container.field61,
    form#visform4 .visfield-container.field305,
    form#visform4 .visfield-container.field306,
    form#visform4 .visfield-container.field307,
    form#visform4 .visfield-container.field137,
    form#visform4 .visfield-container.field103,
    form#visform4 .visfield-container.field106,
    form#visform4 .visfield-container.field108,
    form#visform4 .visfield-container.field109,
    form#visform4 .visfield-container.field110,
    form#visform4 .visfield-container.field111,
    form#visform4 .visfield-container.field112,
    form#visform4 .visfield-container.field113,
    form#visform4 .visfield-container.field114,
    form#visform4 .visfield-container.field115,
    form#visform4 .visfield-container.field308,
    form#visform4 .visfield-container.field117,
    form#visform4 .visfield-container.field118,
    form#visform4 .visfield-container.field121,
    form#visform4 .visfield-container.field122,
    form#visform4 .visfield-container.field123,
    form#visform4 .visfield-container.field124,
    form#visform4 .visfield-container.field125,
    form#visform4 .visfield-container.field126,
    form#visform4 .visfield-container.field127,
    form#visform4 .visfield-container.field128,
    form#visform4 .visfield-container.field129,
    form#visform4 .visfield-container.field130,
    form#visform4 .visfield-container.field131,
    form#visform4 .visfield-container.field132,
    form#visform10 .visfield-container.field390,
    form#visform10 .visfield-container.field391,
    form#visform10 .visfield-container.field392,
    form#visform10 .visfield-container.field399,
    form#visform10 .visfield-container.field400,
    form#visform10 .visfield-container.field401,
    form#visform10 .visfield-container.field402,
    form#visform10 .visfield-container.field403,
    form#visform10 .visfield-container.field404,
    form#visform10 .visfield-container.field405,
    form#visform10 .visfield-container.field406,
    form#visform10 .visfield-container.field407,
    form#visform10 .visfield-container.field408,
    form#visform10 .visfield-container.field409,
    form#visform10 .visfield-container.field410,
    form#visform10 .visfield-container.field496,
    form#visform10 .visfield-container.field497,
    form#visform10 .visfield-container.field498,
    form#visform10 .visfield-container.field500,
    form#visform10 .visfield-container.field501,
    form#visform10 .visfield-container.field502,
    form#visform10 .visfield-container.field505,
    form#visform10 .visfield-container.field506,
    form#visform10 .visfield-container.field507,
    form#visform10 .visfield-container.field508,
    form#visform10 .visfield-container.field509,
    form#visform10 .visfield-container.field510,
    form#visform10 .visfield-container.field513,
    form#visform10 .visfield-container.field514,
    form#visform10 .visfield-container.field515,
    form#visform10 .visfield-container.field516,
    form#visform10 .visfield-container.field517,
    form#visform10 .visfield-container.field518,
    form#visform10 .visfield-container.field519,
    form#visform10 .visfield-container.field520,
    form#visform10 .visfield-container.field521,
    form#visform10 .visfield-container.field522,
    form#visform10 .visfield-container.field523,
    form#visform10 .visfield-container.field524,
    form#visform10 .visfield-container.field525,
    form#visform10 .visfield-container.field526 {
        flex: 0 0 100.000000%;
        width: 100.000000%;
}

}
@media (min-width: 768px) {
    form#visform2 .visfield-container.field33,
    form#visform2 .visfield-container.field35,
    form#visform2 .visfield-container.field34,
    form#visform2 .visfield-container.field98,
    form#visform2 .visfield-container.field53,
    form#visform2 .visfield-container.field54,
    form#visform2 .visfield-container.field56,
    form#visform2 .visfield-container.field57,
    form#visform2 .visfield-container.field59,
    form#visform2 .visfield-container.field101,
    form#visform2 .visfield-container.field102,
    form#visform2 .visfield-container.field60,
    form#visform4 .visfield-container.field306,
    form#visform4 .visfield-container.field307,
    form#visform4 .visfield-container.field103,
    form#visform4 .visfield-container.field106,
    form#visform4 .visfield-container.field123,
    form#visform4 .visfield-container.field124,
    form#visform4 .visfield-container.field126,
    form#visform4 .visfield-container.field127,
    form#visform4 .visfield-container.field129,
    form#visform4 .visfield-container.field130,
    form#visform4 .visfield-container.field131,
    form#visform4 .visfield-container.field132 {
        flex: 0 0 25.000000%;
        width: 25.000000%;
}

    form#visform2 .visfield-container.field97,
    form#visform2 .visfield-container.field43,
    form#visform2 .visfield-container.field297,
    form#visform2 .visfield-container.field319,
    form#visform2 .visfield-container.field387,
    form#visform2 .visfield-container.field320,
    form#visform4 .visfield-container.field108,
    form#visform4 .visfield-container.field109,
    form#visform4 .visfield-container.field110,
    form#visform4 .visfield-container.field111,
    form#visform4 .visfield-container.field112,
    form#visform4 .visfield-container.field113,
    form#visform4 .visfield-container.field114,
    form#visform4 .visfield-container.field115,
    form#visform4 .visfield-container.field308 {
        flex: 0 0 33.333333%;
        width: 33.333333%;
}

    form#visform2 .visfield-container.field36,
    form#visform2 .visfield-container.field39,
    form#visform2 .visfield-container.field51,
    form#visform2 .visfield-container.field52,
    form#visform2 .visfield-container.field55,
    form#visform2 .visfield-container.field58,
    form#visform2 .visfield-container.field318,
    form#visform2 .visfield-container.field61,
    form#visform4 .visfield-container.field305,
    form#visform4 .visfield-container.field137,
    form#visform4 .visfield-container.field117,
    form#visform4 .visfield-container.field118,
    form#visform4 .visfield-container.field121,
    form#visform4 .visfield-container.field122,
    form#visform4 .visfield-container.field125,
    form#visform4 .visfield-container.field128,
    form#visform10 .visfield-container.field399,
    form#visform10 .visfield-container.field400,
    form#visform10 .visfield-container.field401,
    form#visform10 .visfield-container.field402,
    form#visform10 .visfield-container.field403,
    form#visform10 .visfield-container.field404,
    form#visform10 .visfield-container.field405,
    form#visform10 .visfield-container.field406,
    form#visform10 .visfield-container.field407,
    form#visform10 .visfield-container.field408,
    form#visform10 .visfield-container.field409,
    form#visform10 .visfield-container.field410 {
        flex: 0 0 50.000000%;
        width: 50.000000%;
}

    form#visform10 .visfield-container.field390,
    form#visform10 .visfield-container.field391,
    form#visform10 .visfield-container.field392,
    form#visform10 .visfield-container.field496,
    form#visform10 .visfield-container.field497,
    form#visform10 .visfield-container.field498,
    form#visform10 .visfield-container.field500,
    form#visform10 .visfield-container.field501,
    form#visform10 .visfield-container.field502,
    form#visform10 .visfield-container.field505,
    form#visform10 .visfield-container.field506,
    form#visform10 .visfield-container.field507,
    form#visform10 .visfield-container.field508,
    form#visform10 .visfield-container.field509,
    form#visform10 .visfield-container.field510,
    form#visform10 .visfield-container.field513,
    form#visform10 .visfield-container.field514,
    form#visform10 .visfield-container.field515,
    form#visform10 .visfield-container.field516,
    form#visform10 .visfield-container.field517,
    form#visform10 .visfield-container.field518,
    form#visform10 .visfield-container.field519,
    form#visform10 .visfield-container.field520,
    form#visform10 .visfield-container.field521,
    form#visform10 .visfield-container.field522,
    form#visform10 .visfield-container.field523,
    form#visform10 .visfield-container.field524,
    form#visform10 .visfield-container.field525,
    form#visform10 .visfield-container.field526 {
        flex: 0 0 100.000000%;
        width: 100.000000%;
}

}
@media (min-width: 992px) {
    form#visform10 .visfield-container.field390 {
        flex: 0 0 16.666667%;
        width: 16.666667%;
}

    form#visform2 .visfield-container.field33,
    form#visform2 .visfield-container.field35,
    form#visform2 .visfield-container.field34,
    form#visform2 .visfield-container.field98,
    form#visform2 .visfield-container.field53,
    form#visform2 .visfield-container.field54,
    form#visform2 .visfield-container.field56,
    form#visform2 .visfield-container.field57,
    form#visform2 .visfield-container.field59,
    form#visform2 .visfield-container.field101,
    form#visform2 .visfield-container.field102,
    form#visform2 .visfield-container.field60,
    form#visform4 .visfield-container.field306,
    form#visform4 .visfield-container.field307,
    form#visform4 .visfield-container.field103,
    form#visform4 .visfield-container.field106,
    form#visform4 .visfield-container.field123,
    form#visform4 .visfield-container.field124,
    form#visform4 .visfield-container.field126,
    form#visform4 .visfield-container.field127,
    form#visform4 .visfield-container.field129,
    form#visform4 .visfield-container.field130,
    form#visform4 .visfield-container.field131,
    form#visform4 .visfield-container.field132,
    form#visform10 .visfield-container.field392,
    form#visform10 .visfield-container.field515,
    form#visform10 .visfield-container.field516,
    form#visform10 .visfield-container.field518,
    form#visform10 .visfield-container.field519,
    form#visform10 .visfield-container.field521,
    form#visform10 .visfield-container.field522,
    form#visform10 .visfield-container.field523,
    form#visform10 .visfield-container.field524 {
        flex: 0 0 25.000000%;
        width: 25.000000%;
}

    form#visform2 .visfield-container.field97,
    form#visform2 .visfield-container.field43,
    form#visform2 .visfield-container.field297,
    form#visform2 .visfield-container.field319,
    form#visform2 .visfield-container.field387,
    form#visform2 .visfield-container.field320,
    form#visform4 .visfield-container.field108,
    form#visform4 .visfield-container.field109,
    form#visform4 .visfield-container.field110,
    form#visform4 .visfield-container.field111,
    form#visform4 .visfield-container.field112,
    form#visform4 .visfield-container.field113,
    form#visform4 .visfield-container.field114,
    form#visform4 .visfield-container.field115,
    form#visform4 .visfield-container.field308,
    form#visform10 .visfield-container.field496,
    form#visform10 .visfield-container.field497,
    form#visform10 .visfield-container.field498,
    form#visform10 .visfield-container.field500,
    form#visform10 .visfield-container.field501,
    form#visform10 .visfield-container.field502,
    form#visform10 .visfield-container.field505,
    form#visform10 .visfield-container.field506,
    form#visform10 .visfield-container.field507,
    form#visform10 .visfield-container.field508,
    form#visform10 .visfield-container.field509,
    form#visform10 .visfield-container.field510 {
        flex: 0 0 33.333333%;
        width: 33.333333%;
}

    form#visform10 .visfield-container.field391 {
        flex: 0 0 41.666667%;
        width: 41.666667%;
}

    form#visform2 .visfield-container.field36,
    form#visform2 .visfield-container.field39,
    form#visform2 .visfield-container.field51,
    form#visform2 .visfield-container.field52,
    form#visform2 .visfield-container.field55,
    form#visform2 .visfield-container.field58,
    form#visform2 .visfield-container.field318,
    form#visform2 .visfield-container.field61,
    form#visform4 .visfield-container.field305,
    form#visform4 .visfield-container.field137,
    form#visform4 .visfield-container.field117,
    form#visform4 .visfield-container.field118,
    form#visform4 .visfield-container.field121,
    form#visform4 .visfield-container.field122,
    form#visform4 .visfield-container.field125,
    form#visform4 .visfield-container.field128,
    form#visform10 .visfield-container.field399,
    form#visform10 .visfield-container.field400,
    form#visform10 .visfield-container.field401,
    form#visform10 .visfield-container.field402,
    form#visform10 .visfield-container.field403,
    form#visform10 .visfield-container.field404,
    form#visform10 .visfield-container.field405,
    form#visform10 .visfield-container.field406,
    form#visform10 .visfield-container.field407,
    form#visform10 .visfield-container.field408,
    form#visform10 .visfield-container.field409,
    form#visform10 .visfield-container.field410,
    form#visform10 .visfield-container.field513,
    form#visform10 .visfield-container.field514,
    form#visform10 .visfield-container.field517,
    form#visform10 .visfield-container.field520,
    form#visform10 .visfield-container.field525,
    form#visform10 .visfield-container.field526 {
        flex: 0 0 50.000000%;
        width: 50.000000%;
}

}
@media (min-width: 1200px) {
    form#visform10 .visfield-container.field390 {
        flex: 0 0 16.666667%;
        width: 16.666667%;
}

    form#visform2 .visfield-container.field33,
    form#visform2 .visfield-container.field35,
    form#visform2 .visfield-container.field34,
    form#visform2 .visfield-container.field98,
    form#visform2 .visfield-container.field53,
    form#visform2 .visfield-container.field54,
    form#visform2 .visfield-container.field56,
    form#visform2 .visfield-container.field57,
    form#visform2 .visfield-container.field59,
    form#visform2 .visfield-container.field101,
    form#visform2 .visfield-container.field102,
    form#visform2 .visfield-container.field60,
    form#visform4 .visfield-container.field306,
    form#visform4 .visfield-container.field307,
    form#visform4 .visfield-container.field103,
    form#visform4 .visfield-container.field106,
    form#visform4 .visfield-container.field123,
    form#visform4 .visfield-container.field124,
    form#visform4 .visfield-container.field126,
    form#visform4 .visfield-container.field127,
    form#visform4 .visfield-container.field129,
    form#visform4 .visfield-container.field130,
    form#visform4 .visfield-container.field131,
    form#visform4 .visfield-container.field132,
    form#visform10 .visfield-container.field392,
    form#visform10 .visfield-container.field515,
    form#visform10 .visfield-container.field516,
    form#visform10 .visfield-container.field518,
    form#visform10 .visfield-container.field519,
    form#visform10 .visfield-container.field521,
    form#visform10 .visfield-container.field522,
    form#visform10 .visfield-container.field523,
    form#visform10 .visfield-container.field524 {
        flex: 0 0 25.000000%;
        width: 25.000000%;
}

    form#visform2 .visfield-container.field97,
    form#visform2 .visfield-container.field43,
    form#visform2 .visfield-container.field297,
    form#visform2 .visfield-container.field319,
    form#visform2 .visfield-container.field387,
    form#visform2 .visfield-container.field320,
    form#visform4 .visfield-container.field108,
    form#visform4 .visfield-container.field109,
    form#visform4 .visfield-container.field110,
    form#visform4 .visfield-container.field111,
    form#visform4 .visfield-container.field112,
    form#visform4 .visfield-container.field113,
    form#visform4 .visfield-container.field114,
    form#visform4 .visfield-container.field115,
    form#visform4 .visfield-container.field308,
    form#visform10 .visfield-container.field496,
    form#visform10 .visfield-container.field497,
    form#visform10 .visfield-container.field498,
    form#visform10 .visfield-container.field500,
    form#visform10 .visfield-container.field501,
    form#visform10 .visfield-container.field502,
    form#visform10 .visfield-container.field505,
    form#visform10 .visfield-container.field506,
    form#visform10 .visfield-container.field507,
    form#visform10 .visfield-container.field508,
    form#visform10 .visfield-container.field509,
    form#visform10 .visfield-container.field510 {
        flex: 0 0 33.333333%;
        width: 33.333333%;
}

    form#visform10 .visfield-container.field391 {
        flex: 0 0 41.666667%;
        width: 41.666667%;
}

    form#visform2 .visfield-container.field36,
    form#visform2 .visfield-container.field39,
    form#visform2 .visfield-container.field51,
    form#visform2 .visfield-container.field52,
    form#visform2 .visfield-container.field55,
    form#visform2 .visfield-container.field58,
    form#visform2 .visfield-container.field318,
    form#visform2 .visfield-container.field61,
    form#visform4 .visfield-container.field305,
    form#visform4 .visfield-container.field137,
    form#visform4 .visfield-container.field117,
    form#visform4 .visfield-container.field118,
    form#visform4 .visfield-container.field121,
    form#visform4 .visfield-container.field122,
    form#visform4 .visfield-container.field125,
    form#visform4 .visfield-container.field128,
    form#visform10 .visfield-container.field399,
    form#visform10 .visfield-container.field400,
    form#visform10 .visfield-container.field401,
    form#visform10 .visfield-container.field402,
    form#visform10 .visfield-container.field403,
    form#visform10 .visfield-container.field404,
    form#visform10 .visfield-container.field405,
    form#visform10 .visfield-container.field406,
    form#visform10 .visfield-container.field407,
    form#visform10 .visfield-container.field408,
    form#visform10 .visfield-container.field409,
    form#visform10 .visfield-container.field410,
    form#visform10 .visfield-container.field513,
    form#visform10 .visfield-container.field514,
    form#visform10 .visfield-container.field517,
    form#visform10 .visfield-container.field520,
    form#visform10 .visfield-container.field525,
    form#visform10 .visfield-container.field526 {
        flex: 0 0 50.000000%;
        width: 50.000000%;
}

}
@media (min-width: 1400px) {
    form#visform10 .visfield-container.field390 {
        flex: 0 0 16.666667%;
        width: 16.666667%;
}

    form#visform2 .visfield-container.field33,
    form#visform2 .visfield-container.field35,
    form#visform2 .visfield-container.field34,
    form#visform2 .visfield-container.field98,
    form#visform2 .visfield-container.field53,
    form#visform2 .visfield-container.field54,
    form#visform2 .visfield-container.field56,
    form#visform2 .visfield-container.field57,
    form#visform2 .visfield-container.field59,
    form#visform2 .visfield-container.field101,
    form#visform2 .visfield-container.field102,
    form#visform2 .visfield-container.field60,
    form#visform4 .visfield-container.field306,
    form#visform4 .visfield-container.field307,
    form#visform4 .visfield-container.field103,
    form#visform4 .visfield-container.field106,
    form#visform4 .visfield-container.field123,
    form#visform4 .visfield-container.field124,
    form#visform4 .visfield-container.field126,
    form#visform4 .visfield-container.field127,
    form#visform4 .visfield-container.field129,
    form#visform4 .visfield-container.field130,
    form#visform4 .visfield-container.field131,
    form#visform4 .visfield-container.field132,
    form#visform10 .visfield-container.field392,
    form#visform10 .visfield-container.field515,
    form#visform10 .visfield-container.field516,
    form#visform10 .visfield-container.field518,
    form#visform10 .visfield-container.field519,
    form#visform10 .visfield-container.field521,
    form#visform10 .visfield-container.field522,
    form#visform10 .visfield-container.field523,
    form#visform10 .visfield-container.field524 {
        flex: 0 0 25.000000%;
        width: 25.000000%;
}

    form#visform2 .visfield-container.field97,
    form#visform2 .visfield-container.field43,
    form#visform2 .visfield-container.field297,
    form#visform2 .visfield-container.field319,
    form#visform2 .visfield-container.field387,
    form#visform2 .visfield-container.field320,
    form#visform4 .visfield-container.field108,
    form#visform4 .visfield-container.field109,
    form#visform4 .visfield-container.field110,
    form#visform4 .visfield-container.field111,
    form#visform4 .visfield-container.field112,
    form#visform4 .visfield-container.field113,
    form#visform4 .visfield-container.field114,
    form#visform4 .visfield-container.field115,
    form#visform4 .visfield-container.field308,
    form#visform10 .visfield-container.field496,
    form#visform10 .visfield-container.field497,
    form#visform10 .visfield-container.field498,
    form#visform10 .visfield-container.field500,
    form#visform10 .visfield-container.field501,
    form#visform10 .visfield-container.field502,
    form#visform10 .visfield-container.field505,
    form#visform10 .visfield-container.field506,
    form#visform10 .visfield-container.field507,
    form#visform10 .visfield-container.field508,
    form#visform10 .visfield-container.field509,
    form#visform10 .visfield-container.field510 {
        flex: 0 0 33.333333%;
        width: 33.333333%;
}

    form#visform10 .visfield-container.field391 {
        flex: 0 0 41.666667%;
        width: 41.666667%;
}

    form#visform2 .visfield-container.field36,
    form#visform2 .visfield-container.field39,
    form#visform2 .visfield-container.field51,
    form#visform2 .visfield-container.field52,
    form#visform2 .visfield-container.field55,
    form#visform2 .visfield-container.field58,
    form#visform2 .visfield-container.field318,
    form#visform2 .visfield-container.field61,
    form#visform4 .visfield-container.field305,
    form#visform4 .visfield-container.field137,
    form#visform4 .visfield-container.field117,
    form#visform4 .visfield-container.field118,
    form#visform4 .visfield-container.field121,
    form#visform4 .visfield-container.field122,
    form#visform4 .visfield-container.field125,
    form#visform4 .visfield-container.field128,
    form#visform10 .visfield-container.field399,
    form#visform10 .visfield-container.field400,
    form#visform10 .visfield-container.field401,
    form#visform10 .visfield-container.field402,
    form#visform10 .visfield-container.field403,
    form#visform10 .visfield-container.field404,
    form#visform10 .visfield-container.field405,
    form#visform10 .visfield-container.field406,
    form#visform10 .visfield-container.field407,
    form#visform10 .visfield-container.field408,
    form#visform10 .visfield-container.field409,
    form#visform10 .visfield-container.field410,
    form#visform10 .visfield-container.field513,
    form#visform10 .visfield-container.field514,
    form#visform10 .visfield-container.field517,
    form#visform10 .visfield-container.field520,
    form#visform10 .visfield-container.field525,
    form#visform10 .visfield-container.field526 {
        flex: 0 0 50.000000%;
        width: 50.000000%;
}

}
/* H24 VISFORMS RASTER OHNE SUBSCRIPTION ENDE */

/* H24 VISFORMS TRENNLINIEN VOLLBREITE START */

/* Alle drei Anfrageformulare: Trennfelder nicht auf 75 % begrenzen */
:is(#visform2, #visform4, #visform10)
.visfield-container[data-container-field-type="fieldsep"]
> .form-group.row > div[class*="col-"] {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
}

/* Sichtbare Trennlinien über die gesamte Breite */
.container-component
:is(#visform2, #visform4, #visform10)
.visfield-container[data-container-field-type="fieldsep"]
hr:not(.vishidden) {
    display: block !important;
    width: 100% !important;
    max-width: 100%;
    height: 0;
    margin: 24px 0 18px;
    padding: 0;
    border: 0;
    border-top: 2px solid #d9e2dc;
    opacity: 1;
}

/* Verborgene Visforms-Trennfelder verborgen lassen */
:is(#visform2, #visform4, #visform10)
.visfield-container.vishidden {
    display: none !important;
}

/* H24 VISFORMS TRENNLINIEN VOLLBREITE ENDE */

/* H24 HOME FAQ ACCORDION START */

.h24-home-faq {
    margin: 36px 0 42px;
}

.h24-home-faq > h2 {
    margin-bottom: 22px;
    color: #075c2d;
    font-size: clamp(1.4rem, 2.5vw, 1.9rem);
    font-weight: 700;
}

.h24-home-faq .h24-faq-item {
    margin-bottom: 12px;
    border: 1px solid #d9e2dc;
    border-radius: 10px;
    background: #f7f9f7;
    overflow: hidden;
}

.h24-home-faq .h24-faq-item summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 20px;
    color: #075c2d;
    font-size: 1.05rem;
    font-weight: 650;
    line-height: 1.5;
    cursor: pointer;
    list-style: none;
}

.h24-home-faq .h24-faq-item summary::-webkit-details-marker {
    display: none;
}

.h24-home-faq .h24-faq-item summary::after {
    content: "+";
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #075c2d;
    color: #ffc200;
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1;
}

.h24-home-faq .h24-faq-item[open] summary::after {
    content: "−";
}

.h24-home-faq .h24-faq-item[open] summary {
    border-bottom: 2px solid #ffc200;
    background: #edf4ee;
}

.h24-home-faq .h24-faq-item summary:hover {
    background: #edf4ee;
}

.h24-home-faq .h24-faq-item summary:focus-visible {
    outline: 3px solid #ffc200;
    outline-offset: -3px;
}

.h24-home-faq .h24-faq-answer {
    padding: 16px 20px 20px;
    color: #253b2d;
    line-height: 1.7;
}

.h24-home-faq .h24-faq-answer p {
    margin: 0;
}

@media (max-width: 575px) {
    .h24-home-faq .h24-faq-item summary {
        padding: 14px 15px;
        font-size: 1rem;
    }

    .h24-home-faq .h24-faq-answer {
        padding: 14px 15px 18px;
    }
}

/* H24 HOME FAQ ACCORDION END */


/* =========================================================
   H24 MODERN HEADER – TEMPLATE 28
   ========================================================= */

@media (min-width: 992px) {

  body .h24-modern-header {
    background: #ffffff !important;
    color: #243c30 !important;
  }

  body .h24-modern-header .h24-modern-nav {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 18px 30px;
    background: #ffffff !important;
  }

  /* Vorhandenes Logo: Modul 106 */
  body .h24-modern-header #mod-custom106 {
    flex: 0 0 auto;
    min-height: 0 !important;
    padding: 0 !important;
    background: transparent !important;
  }

  body .h24-modern-header #mod-custom106 img {
    display: block;
    float: none !important;
    max-width: 270px;
    height: auto;
  }

  /* Bestehendes Joomla-Menü */
  body .h24-modern-header .h24-modern-nav > nav.moduletable {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    border: 0 !important;
  }

  body .h24-modern-header .h24-modern-nav > nav.moduletable::after {
    display: none !important;
  }

  body .h24-modern-header .h24-modern-nav > nav.moduletable > .navbar {
    padding: 0 !important;
    background: transparent !important;
  }

  body .h24-modern-header .mod-menu {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: transparent !important;
  }

  body .h24-modern-header .mod-menu > li > a {
    color: #243c30 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 10px 12px !important;
    box-shadow: none !important;
  }

  body .h24-modern-header .mod-menu > li > a:hover,
  body .h24-modern-header .mod-menu > li.current > a {
    background: #edf3ee !important;
    color: #075c2d !important;
  }

  body .h24-modern-header .h24-modern-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 13px 22px;
    border-radius: 7px;
    background: #df842d;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    white-space: nowrap;
  }

  body .h24-modern-header .h24-modern-cta:hover {
    background: #bd6517;
    color: #ffffff;
  }
}

/* Mobil und Tablet */
@media (max-width: 991px) {

  body .h24-modern-header {
    background: #ffffff !important;
  }

  body .h24-modern-header .h24-modern-nav {
    background: #ffffff !important;
    padding: 12px 16px;
  }

  body .h24-modern-header #mod-custom106 {
    min-height: 0 !important;
    padding: 8px 0 !important;
  }

  body .h24-modern-header #mod-custom106 img {
    float: none !important;
    max-width: min(270px, 80vw);
    height: auto;
  }

  body .h24-modern-header .h24-modern-cta {
    display: inline-block;
    margin: 12px 0;
    padding: 11px 18px;
    background: #df842d;
    color: #ffffff;
    border-radius: 7px;
    text-decoration: none;
    font-weight: 700;
  }
}

/* =========================================================
   ENDE H24 MODERN HEADER
   ========================================================= */


/* H24 MODERN HEADER LAYOUTFIX 2026 */

/* Alten goldenen Hintergrund vollständig neutralisieren */
body .container-header.h24-modern-header {
    display: block !important;
    background: #ffffff !important;
    background-image: none !important;
    box-shadow: 0 2px 12px rgba(0,0,0,.06) !important;
    color: #263142 !important;
}

body .h24-modern-header .h24-modern-nav {
    background: #ffffff !important;
    background-image: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Gemeinsame Desktop-Zeile */
@media (min-width: 992px) {

    body .container-header.h24-modern-header
    > .grid-child.container-nav.h24-modern-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 24px !important;
        width: min(100%, 1440px) !important;
        max-width: 1440px !important;
        min-height: 100px !important;
        margin: 0 auto !important;
        padding: 16px 30px !important;
    }

    /* Logo-Modul */
    body .h24-modern-header .h24-modern-nav #mod-custom106 {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        clip-path: none !important;
    }

    body .h24-modern-header #mod-custom106 p {
        width: auto !important;
        margin: 0 !important;
    }

    body .h24-modern-header #mod-custom106 img {
        width: auto !important;
        max-width: 290px !important;
        max-height: 55px !important;
        height: auto !important;
        float: none !important;
    }

    /* Joomla-Menümodul */
    body .h24-modern-header .h24-modern-nav
    > nav.moduletable {
        display: block !important;
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
        clip-path: none !important;
    }

    body .h24-modern-header .h24-modern-nav
    > nav.moduletable::after {
        content: none !important;
        display: none !important;
    }

    body .h24-modern-header .h24-modern-nav
    > nav.moduletable > nav.navbar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        background: transparent !important;
    }

    body .h24-modern-header .mod-menu {
        justify-content: center !important;
        width: auto !important;
        gap: 4px !important;
    }

    body .h24-modern-header .mod-menu > li > a {
        white-space: nowrap;
        font-size: .94rem !important;
        color: #263142 !important;
        background: transparent !important;
        border: 0 !important;
        box-shadow: none !important;
    }

    body .h24-modern-header .mod-menu > li.current > a,
    body .h24-modern-header .mod-menu > li.active > a {
        background: #fff2e6 !important;
        color: #c66d18 !important;
    }

    /* Anfrage rechts */
    body .h24-modern-header .h24-modern-cta {
        display: inline-flex !important;
        flex: 0 0 auto !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 !important;
        padding: 13px 20px !important;
        background: #ef7915 !important;
        color: #ffffff !important;
        border-radius: 9px !important;
        font-weight: 700 !important;
        text-decoration: none !important;
        white-space: nowrap;
    }
}

/* Kleine Bildschirme: keine gelben Flächen */
@media (max-width: 991px) {
    body .h24-modern-header #mod-custom106,
    body .h24-modern-header .h24-modern-nav > nav.moduletable {
        background: transparent !important;
        box-shadow: none !important;
        clip-path: none !important;
    }

    body .h24-modern-header .h24-modern-nav
    > nav.moduletable::after {
        display: none !important;
    }
}

/* ENDE H24 MODERN HEADER LAYOUTFIX 2026 */


/* H24 SERVICELEISTE MIT PFOTEN 2026 */

/* Obere Informationsleiste */
body .h24-modern-header .h24-servicebar {
    width: 100%;
    background: #f7f3ee !important;
    border-bottom: 1px solid #eee5dc;
    color: #414b48;
}

body .h24-modern-header .h24-servicebar-inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 10px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

body .h24-modern-header .h24-servicebar-inner > span {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 0.83rem;
    font-weight: 500;
    line-height: 1.4;
}

/* Hundepfote: einheitlich orange über SVG */
body .h24-modern-header .h24-servicebar-inner > span::before {
    content: "";
    display: inline-block;
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    background-color: #ef7915;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5' cy='7' rx='2' ry='3'/%3E%3Cellipse cx='10' cy='4.5' rx='2' ry='3'/%3E%3Cellipse cx='15.5' cy='5' rx='2' ry='3'/%3E%3Cellipse cx='20' cy='8.5' rx='2' ry='3'/%3E%3Cpath d='M12 10c-2.5 0-3.5 2.3-5.6 4.7C4.5 17 5.7 21 9 21c1.3 0 2-.6 3-.6s1.7.6 3 .6c3.3 0 4.5-4 2.6-6.3C15.5 12.3 14.5 10 12 10z'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='5' cy='7' rx='2' ry='3'/%3E%3Cellipse cx='10' cy='4.5' rx='2' ry='3'/%3E%3Cellipse cx='15.5' cy='5' rx='2' ry='3'/%3E%3Cellipse cx='20' cy='8.5' rx='2' ry='3'/%3E%3Cpath d='M12 10c-2.5 0-3.5 2.3-5.6 4.7C4.5 17 5.7 21 9 21c1.3 0 2-.6 3-.6s1.7.6 3 .6c3.3 0 4.5-4 2.6-6.3C15.5 12.3 14.5 10 12 10z'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Logo vergrößern und alte Größenbegrenzung überschreiben */
@media (min-width: 1200px) {
    body .h24-modern-header .h24-modern-nav #mod-custom106 img {
        width: 330px !important;
        max-width: 330px !important;
        max-height: none !important;
        height: auto !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    body .h24-modern-header .h24-modern-nav #mod-custom106 img {
        width: 260px !important;
        max-width: 260px !important;
        max-height: none !important;
        height: auto !important;
    }

    body .h24-modern-header .h24-modern-nav {
        gap: 12px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

/* Mobil: platzsparende Serviceleiste */
@media (max-width: 991px) {
    body .h24-modern-header .h24-servicebar-inner {
        padding: 9px 15px;
        justify-content: center;
        gap: 9px 18px;
    }

    body .h24-modern-header .h24-servicebar-inner > span {
        font-size: 0.75rem;
    }

    body .h24-modern-header .h24-servicebar-inner > span:nth-child(n+3) {
        display: none;
    }

    body .h24-modern-header .h24-servicebar-inner > span::before {
        width: 14px;
        height: 14px;
        flex-basis: 14px;
    }
}

/* ENDE H24 SERVICELEISTE MIT PFOTEN 2026 */

/* H24 SERVICELEISTE TELEFON */
body .h24-modern-header .h24-service-phone {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #263142 !important;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

body .h24-modern-header .h24-service-phone::before {
    content: "✆";
    color: #243c30;
    font-size: 1rem;
    font-weight: 700;
}

body .h24-modern-header .h24-service-phone:hover {
    color: #ef7915 !important;
}

@media (max-width: 991px) {
    body .h24-modern-header .h24-service-phone {
        font-size: 0.8rem;
    }
}
/* ENDE H24 SERVICELEISTE TELEFON */


/* H24 TELEFON RECHTS – TEMPLATE 28 */

body .h24-modern-header .h24-servicebar-inner {
    justify-content: space-between !important;
}

body .h24-modern-header .h24-service-phone {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    color: #263142 !important;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
}

body .h24-modern-header .h24-service-phone::before {
    content: "☎";
    color: #ef7915;
    font-size: 1.15rem;
}

body .h24-modern-header .h24-service-phone:hover {
    color: #ef7915 !important;
}

@media (max-width: 991px) {
    body .h24-modern-header .h24-service-phone {
        font-size: 0.8rem;
    }
}

/* ENDE H24 TELEFON RECHTS */


/* H24 TELEFONHOERER SVG FINAL */
body .h24-modern-header .h24-service-phone::before {
    content: "" !important;
    display: inline-block !important;
    width: 17px !important;
    height: 17px !important;
    flex: 0 0 17px !important;
    background-color: #263142 !important;
    background-image: none !important;
    font-size: 0 !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24c1.12.37 2.33.56 3.57.56a1 1 0 011 1V20a1 1 0 01-1 1C10.61 21 3 13.39 3 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.56 3.57a1 1 0 01-.25 1.02z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24c1.12.37 2.33.56 3.57.56a1 1 0 011 1V20a1 1 0 01-1 1C10.61 21 3 13.39 3 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.56 3.57a1 1 0 01-.25 1.02z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
/* ENDE H24 TELEFONHOERER SVG FINAL */

/* H24 SERVICE PHONE FINAL START */
body .h24-modern-header .h24-service-phone {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    color: #2f3440 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
}

body .h24-modern-header .h24-service-phone:hover,
body .h24-modern-header .h24-service-phone:focus {
    color: #2f3440 !important;
    text-decoration: none !important;
}

body .h24-modern-header .h24-service-phone::before {
    content: "" !important;
    display: inline-block !important;
    width: 15px !important;
    height: 15px !important;
    flex: 0 0 15px !important;
    background-color: #df842d !important;
    background-image: none !important;
    font-size: 0 !important;
    vertical-align: middle !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24c1.12.37 2.33.56 3.57.56a1 1 0 011 1V20a1 1 0 01-1 1C10.61 21 3 13.39 3 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.56 3.57a1 1 0 01-.25 1.02z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M6.62 10.79a15.05 15.05 0 006.59 6.59l2.2-2.2a1 1 0 011.02-.24c1.12.37 2.33.56 3.57.56a1 1 0 011 1V20a1 1 0 01-1 1C10.61 21 3 13.39 3 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.45.56 3.57a1 1 0 01-.25 1.02z'/%3E%3C/svg%3E") center / contain no-repeat !important;
}
/* H24 SERVICE PHONE FINAL END */

/* H24 TELEFONHOERER GROESSER */
body .h24-modern-header .h24-service-phone::before {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px !important;
    background-color: #ef7915 !important;
}

body .h24-modern-header .h24-service-phone {
    gap: 6px !important;
}
/* ENDE H24 TELEFONHOERER GROESSER */


/* H24 DOG OFFER COMPACT 2026 */
.h24-dog-offer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 180px;
    align-items: center;
    gap: 24px;
    margin: 20px 0 30px;
    padding: 24px 30px;
    border: 1px solid #e0e8e0;
    border-radius: 14px;
    background: #f6f9f6;
}

.h24-dog-offer__eyebrow {
    margin: 0 0 8px;
    color: #17633a;
    font-size: .8rem;
    font-weight: 700;
}

.h24-dog-offer__headline {
    margin: 0 0 10px;
    color: #253b2e;
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.3;
}

.h24-dog-offer__description {
    margin: 0 0 18px;
    color: #46544a;
    line-height: 1.5;
}

.h24-dog-offer__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    padding: 13px 20px;
    border-radius: 9px;
    background: #e98224;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
}

.h24-dog-offer__button:hover,
.h24-dog-offer__button:focus-visible {
    background: #c66b17;
    color: #fff !important;
}

.h24-dog-offer__visual img {
    display: block;
    width: 100%;
    max-width: 180px;
    height: auto;
    object-fit: contain;
}

@media (max-width: 700px) {
    .h24-dog-offer {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        padding: 20px;
    }

    .h24-dog-offer__visual {
        display: none;
    }

    .h24-dog-offer__headline {
        font-size: 1.2rem;
    }

    .h24-dog-offer__button {
        display: flex;
        width: 100%;
    }
}
/* ENDE H24 DOG OFFER COMPACT 2026 */


/* H24 DOG FINAL CTA 2026 */
.h24-dog-final-cta {
    margin: 34px 0 28px;
    padding: 30px 24px;
    border: 1px solid #dfe8df;
    border-radius: 14px;
    background: #f6f9f6;
    text-align: center;
}

.h24-dog-final-cta h2 {
    margin: 0 0 12px;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    color: #253b2e;
}

.h24-dog-final-cta p {
    max-width: 690px;
    margin: 0 auto 20px;
    line-height: 1.6;
    color: #46544a;
}

.h24-dog-final-cta__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 22px;
    border-radius: 9px;
    background: #e98224;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
}

.h24-dog-final-cta__button:hover,
.h24-dog-final-cta__button:focus-visible {
    background: #c66b17;
    color: #fff !important;
}

@media (max-width: 700px) {
    .h24-dog-final-cta {
        padding: 24px 18px;
    }

    .h24-dog-final-cta__button {
        display: flex;
        width: 100%;
    }
}
/* ENDE H24 DOG FINAL CTA 2026 */


/* H24 DOG OFFER IMAGE PLUS 20 2026 */
@media (min-width: 992px) {
    .h24-dog-offer__visual {
        flex: 0 0 264px;
        max-width: 264px;
    }

    .h24-dog-offer__visual img {
        width: 264px;
        max-width: 100%;
        height: auto;
    }
}
/* ENDE H24 DOG OFFER IMAGE PLUS 20 2026 */


/* H24 DOG OFFER IMAGE GRID FIX 2026 */
@media (min-width: 992px) {
    .h24-dog-offer {
        grid-template-columns: minmax(0, 1fr) 216px;
    }

    .h24-dog-offer__visual {
        width: 216px;
        max-width: 100%;
    }

    .h24-dog-offer__visual img {
        display: block;
        width: 216px;
        max-width: 100%;
        height: auto;
    }
}
/* ENDE H24 DOG OFFER IMAGE GRID FIX 2026 */


/* H24 MOBILE STICKY REPAIR 2026 */
@media (max-width: 991px) {
    body > .container-header.h24-modern-header,
    body > header.container-header.h24-modern-header {
        position: sticky !important;
        top: 0 !important;
        z-index: 1050 !important;
        overflow: visible !important;
    }

    body .h24-modern-header .h24-servicebar-inner {
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
    }

    body .h24-modern-header .h24-servicebar-inner > span {
        display: none !important;
    }

    body .h24-modern-header .h24-service-phone {
        margin-right: auto !important;
        order: -1 !important;
    }
}
/* ENDE H24 MOBILE STICKY REPAIR 2026 */


/* H24 MOBILE EXTRA CTA HIDE 2026 */
@media (max-width: 991px) {
    body .h24-modern-header .h24-modern-cta {
        display: none !important;
    }
}
/* ENDE H24 MOBILE EXTRA CTA HIDE 2026 */


/* H24 MOBILE LOGO TOGGLE ONE ROW 2026 */
@media (max-width: 991px) {

    body .h24-modern-header .h24-modern-nav {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        padding: 10px 15px !important;
    }

    body .h24-modern-header #mod-custom106 {
        flex: 1 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .h24-modern-header #mod-custom106 img {
        display: block !important;
        max-width: min(240px, 58vw) !important;
        height: auto !important;
    }

    body .h24-modern-header .h24-modern-nav > nav.moduletable {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    body .h24-modern-header .h24-modern-nav > nav.moduletable > nav.navbar {
        margin: 0 !important;
        padding: 0 !important;
    }

    body .h24-modern-header .h24-modern-cta {
        display: none !important;
    }
}
/* ENDE H24 MOBILE LOGO TOGGLE ONE ROW 2026 */


/* H24 FORM10 MARKENRASTER 6-4 2026 */

/* Nur die 12 Markenformen im Visforms-Formular 10 */
body #visform10 .field388 div[id="row justify-content-end align-items-center"] {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px !important;
    align-items: center !important;
    justify-items: center !important;
    width: 100% !important;
}

/* Bilder passen sich den Rasterzellen an */
body #visform10 .field388 div[id="row justify-content-end align-items-center"] > img {
    display: block !important;
    width: 100% !important;
    max-width: 100px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Smartphone: vier Marken pro Zeile */
@media (max-width: 767px) {
    body #visform10 .field388 div[id="row justify-content-end align-items-center"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 6px !important;
    }
}

/* ENDE H24 FORM10 MARKENRASTER 6-4 2026 */


/* H24 FORM10 BILDABSTAENDE UND HINWEIS 2026 */

/* Markenübersicht: gleichmäßige, kompakte Abstände */
body #visform10 .field388 div[id="row justify-content-end align-items-center"] {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 4px !important;
    row-gap: 12px !important;
    justify-items: center !important;
    align-items: center !important;
}

/* Marken vollständig anzeigen */
body #visform10 .field388 div[id="row justify-content-end align-items-center"] > img {
    width: 100% !important;
    max-width: 100px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Hundemotive: kleinere Abstände zwischen den Bildern */
body #visform10 .field389 h3 {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 12px !important;
    margin: 0 !important;
}

body #visform10 .field389 h3 img {
    display: block !important;
    max-width: 80px !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
}

/* Pflichtfeld-Hinweis verkleinern */
body #visform10 .field388 span[style*="color: #ff0000"] {
    font-size: 14px !important;
    line-height: 1.5 !important;
    font-weight: 600 !important;
}

/* Smartphone */
@media (max-width: 767px) {
    body #visform10 .field388 div[id="row justify-content-end align-items-center"] {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        column-gap: 4px !important;
        row-gap: 10px !important;
    }

    body #visform10 .field389 h3 {
        gap: 10px !important;
    }

    body #visform10 .field389 h3 img {
        max-width: 65px !important;
    }
}

/* ENDE H24 FORM10 BILDABSTAENDE UND HINWEIS 2026 */


/* H24 FORM10 BILDER VOLLE BREITE IPHONE 2026 */

/* Nur Bildbereiche der Marken und Hundemotive */
body #visform10 .field388 > .row > [class*="offset-"],
body #visform10 .field389 > .row > [class*="offset-"] {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 12 Marken: gleichmäßig über die gesamte Breite */
body #visform10 .field388 div[id="row justify-content-end align-items-center"] {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 14px !important;
    justify-items: center !important;
    align-items: center !important;
}

/* Markenbilder */
body #visform10 .field388 div[id="row justify-content-end align-items-center"] > img {
    display: block !important;
    width: 100% !important;
    max-width: 100px !important;
    height: auto !important;
    object-fit: contain !important;
}

/* Hundemotive A-F und Pfote: gleichmäßiges Raster */
body #visform10 .field389 h3 {
    display: grid !important;
    width: 100% !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 16px !important;
    justify-items: center !important;
    align-items: center !important;
    margin: 0 !important;
}

/* Motive vollständig anzeigen */
body #visform10 .field389 h3 > img {
    display: block !important;
    width: 100% !important;
    max-width: 90px !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* iPhone: vier Bilder pro Zeile */
@media (max-width: 767px) {
    body #visform10 .field388 div[id="row justify-content-end align-items-center"],
    body #visform10 .field389 h3 {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        column-gap: 8px !important;
        row-gap: 14px !important;
    }
}

/* ENDE H24 FORM10 BILDER VOLLE BREITE IPHONE 2026 */


/* H24 FORM10 DESKTOP MARKEN PLUS 20 PROZENT 2026 */
@media (min-width: 1200px) {
    body #visform10 .field388 div[id="row justify-content-end align-items-center"] > img {
        width: 120% !important;
        max-width: 120px !important;
        height: auto !important;
        object-fit: contain !important;
    }
}
/* ENDE H24 FORM10 DESKTOP MARKEN PLUS 20 PROZENT 2026 */


/* H24 FORM10 DESKTOP HUNDEMOTIVE 7 SPALTEN 2026 */
@media (min-width: 1200px) {

    body #visform10 .field389 h3 {
        display: grid !important;
        grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
        column-gap: 12px !important;
        row-gap: 0 !important;
        justify-items: center !important;
        align-items: center !important;
        width: 100% !important;
    }

    body #visform10 .field389 h3 > img {
        display: block !important;
        width: 100% !important;
        max-width: 100px !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
    }
}
/* ENDE H24 FORM10 DESKTOP HUNDEMOTIVE 7 SPALTEN 2026 */


/* H24 FORM10 HUNDEMOTIVE ALLE GERAETE EINZEILIG 2026 */

/* Sieben Motive auf jedem Gerät nebeneinander */
body #visform10 .field389 h3 {
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    column-gap: 8px !important;
    row-gap: 0 !important;
    justify-items: center !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

/* Bildgröße automatisch an die Spalten anpassen */
body #visform10 .field389 h3 > img {
    display: block !important;
    width: 100% !important;
    max-width: 100px !important;
    min-width: 0 !important;
    height: auto !important;
    object-fit: contain !important;
    margin: 0 !important;
}

/* iPhone: kleinere Zwischenräume für sieben Motive */
@media (max-width: 767px) {
    body #visform10 .field389 h3 {
        column-gap: 3px !important;
    }
}

/* ENDE H24 FORM10 HUNDEMOTIVE ALLE GERAETE EINZEILIG 2026 */


/* H24 FORM10 DESKTOP MARKEN 144PX 2026 */
@media (min-width: 1200px) {
    body #visform10 .field388
    div[id="row justify-content-end align-items-center"] > img {
        width: 100% !important;
        max-width: 144px !important;
        height: auto !important;
        object-fit: contain !important;
    }
}
/* ENDE H24 FORM10 DESKTOP MARKEN 144PX 2026 */


/* H24 FORM10 HUNDEMOTIVE DESKTOP IPAD MINUS20 2026 */

/* Desktop und iPad: Hundemotive 20 % kleiner */
@media (min-width: 768px) {
    body #visform10 .field389 h3 > img {
        width: 80% !important;
        max-width: 80px !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
    }
}

/* ENDE H24 FORM10 HUNDEMOTIVE DESKTOP IPAD MINUS20 2026 */


/* H24 FORM10 HUNDEMOTIVE DESKTOP IPAD 64PX 2026 */
@media (min-width: 768px) {
    body #visform10 .field389 h3 > img {
        width: 64% !important;
        max-width: 64px !important;
        height: auto !important;
        object-fit: contain !important;
        margin: 0 !important;
    }
}
/* ENDE H24 FORM10 HUNDEMOTIVE DESKTOP IPAD 64PX 2026 */


/* H24 FOOTER DUNKELGRUEN 07572E 2026 */
body .container-footer,
body footer.container-footer {
    background: #07572E !important;
    background-image: none !important;
}
/* ENDE H24 FOOTER DUNKELGRUEN 07572E 2026 */