/* =========================================================
   Unterseiten kompakt (bereinigt)
   ========================================================= */

/* Tokens */
:root {
  --border-muted: #e0e7ef;
  --card-radius: 12px;
  --hero-safe: 14px;
  --page-max: 1186px;
  /* EINHEITLICHE Breite (an Startseite angeglichen) */
  --page-pad: 0px;
  /* Desktop: bündig; mobil setzen wir unten um */
}

/* =========================================================
   Breite & Container (nur Unterseiten)
   ========================================================= */

/* Äußerer Astroid-Container der Component Area auf Zielbreite bringen */
body.com-content.view-article:not(.startseite-alias) .astroid-component-section>.container {
  max-width: var(--page-max) !important;
  padding-left: var(--page-pad) !important;
  padding-right: var(--page-pad) !important;
}

/* Oberste Row ohne Gutter-Verlust (keine 5mm Differenz) */
body.com-content.view-article:not(.startseite-alias) .astroid-component-section>.container>.astroid-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0 !important;
}

body.com-content.view-article:not(.startseite-alias) .astroid-component-section>.container>.astroid-row>.astroid-column {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Innere Wrapper im Artikel NICHT noch einmal verengen oder polstern */
body.com-content.view-article:not(.startseite-alias) #main .hero-article>.section-inner,
body.com-content.view-article:not(.startseite-alias) #main .seo-module>.section-inner,
body.com-content.view-article:not(.startseite-alias) #main .hero-article>.container,
body.com-content.view-article:not(.startseite-alias) #main .seo-module>.container {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Safety: falls im Content noch ein .container steckt */
body.com-content.view-article:not(.startseite-alias) #main .card .card-body .container {
  max-width: none !important;
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* =========================================================
   Grundkarte
   ========================================================= */
.card-clean {
  background: #fff;
  border: 1px solid var(--border-muted);
  border-radius: var(--card-radius);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  overflow: hidden;
}

/* =========================================================
   SEO-/Landing-Block
   ========================================================= */
.seo-module {
  margin-top: 60px;
}

.seo-module .seo-card {
  background: #fff !important;
  border: 1px solid var(--border-muted) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05) !important;
  overflow: hidden;
  border-top: 4px solid #cfe0f5 !important;
}

.seo-module .seo-card .card-body {
  padding: 28px 24px 24px !important;
}

.seo-module h2,
.seo-module h3,
.seo-module .h5 {
  text-transform: none !important;
}

.seo-module p,
.seo-module li {
  color: #5a6a74;
}

/* JS-freies Akkordeon */
.seo-module .seo-details details {
  border: 1px solid var(--border-muted);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
  margin-bottom: 12px;
  overflow: hidden;
}

.seo-module .seo-details summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  padding: 14px 16px;
  font-weight: 600;
  color: #2f3a40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
  transition: background-color .18s ease;
  border-radius: 10px;
}

.seo-module .seo-details summary::-webkit-details-marker {
  display: none;
}

.seo-module .seo-details details[open]>summary {
  background: rgba(207, 224, 245, .35);
  border-bottom: 1px solid var(--border-muted);
  border-radius: 10px 10px 0 0;
}

.seo-module .seo-details .chevron {
  transition: transform .2s ease;
}

.seo-module .seo-details details[open] .chevron {
  transform: rotate(180deg);
}

.seo-module .seo-details .details-body {
  padding: 12px 16px 14px;
  color: #5a6a74;
  line-height: 1.65;
}

/* CTA in SEO-Karten */
.seo-card .card-body {
  display: flex;
  flex-direction: column;
}

.seo-card .cta-bottom {
  margin-top: auto;
  text-align: center;
}

.seo-card .cta-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}

.seo-card .cta-lead {
  margin: 0;
  color: #5a6a74;
}

.seo-card .card-body> :last-child {
  margin-bottom: 0;
}

/* Karten-Headlines & Akzente */
.card h1 {
  font-size: clamp(1.4rem, 2.2vw, 1.7rem);
  line-height: 1.25;
}

.card h2 {
  font-size: clamp(1.15rem, 1.8vw, 1.3rem);
  line-height: 1.35;
}

.card h3 {
  font-size: clamp(1.05rem, 1.6vw, 1.18rem);
  line-height: 1.4;
}

.card.accent-blue {
  border-top: 4px solid #cfe0f5 !important;
}

.card.accent-green {
  border-top: 4px solid #cfe8cf !important;
}

.card.accent-beige {
  border-top: 4px solid #f0e7cf !important;
}

.card.frame-blue {
  border-color: #cfe0f5 !important;
}

.card.frame-green {
  border-color: #cfe8cf !important;
}

.card.frame-beige {
  border-color: #f0e7cf !important;
}

/* =========================================================
   Generische Elemente (Unterseiten)
   ========================================================= */
/*.page-title-card {
  margin-top: 8px;
}*/
.page-title-card { margin-top: 0 !important; }

.page-title-card h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
  line-height: 1.25;
  font-weight: 600;
}

.btn {
  border-radius: 10px;
  padding: .6rem 1rem;
}

.seo-card p,
.seo-card li {
  color: #5a6a74;
}

.seo-card img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
}

/* Tabellen */
table {
  width: 100%;
  background: #fff;
  border: 1px solid #e0e7ef;
  border-radius: 10px;
  overflow: hidden;
  display: block;
  -webkit-overflow-scrolling: touch;
}

table th,
table td {
  padding: .6rem .75rem;
  border-top: 1px solid #e0e7ef;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

/* Bootstrap-Accordion */
.accordion .accordion-item {
  border: 1px solid #e0e7ef;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04);
}

.accordion .accordion-header .accordion-button {
  font-weight: 600;
  color: #2f3a40;
  background: #fff;
}

.accordion .accordion-button:not(.collapsed) {
  background: rgba(207, 224, 245, .35);
  box-shadow: none;
  border-bottom: 1px solid #e0e7ef;
}

/* Sidebar-Module */
aside .moduletable {
  background: #fff;
  border: 1px solid #e0e7ef;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .05);
  padding: 22px 18px;
  margin-bottom: 16px;
}

/* 2er-Kacheln im SEO-Modul – ohne negative Margins */
.seo-module .row.g-4>[class^="col-"],
.seo-module .row.g-4>[class*=" col-"] {
  margin-bottom: 2rem !important;
}

/* Gleichziehen .mb-4 */
.seo-module .mb-4 {
  margin-bottom: 2rem !important;
}

/* CTA-Links vertikal in Karten */
#kontakt-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  margin-top: 1rem;
}

#kontakt-cta a {
  display: inline-block;
  width: 100%;
  max-width: 320px;
  text-align: center;
  padding: .65rem 1rem;
  border-radius: 10px;
  font-weight: 500;
  line-height: 1.3;
  text-decoration: none;
  transition: all .2s ease;
}

#kontakt-cta a:first-child {
  background: #0d6efd;
  color: #fff;
}

#kontakt-cta a:first-child:hover {
  background: #0b5ed7;
}

#kontakt-cta a:last-child {
  border: 1px solid #0d6efd;
  background: #fff;
  color: #0d6efd;
}

#kontakt-cta a:last-child:hover {
  background: #e6f0ff;
}

/* Diverses */
.related-clean ul {
  margin: 0;
  padding-left: 1.25rem;
}

.related-clean li+li {
  margin-top: .25rem;
}

[id] {
  scroll-margin-top: 90px;
}

/* =========================================================
   Rechtliches / Impressum / Notfall
   ========================================================= */
.privacy-module .page-title-card .card-body,
.imprint-module .page-title-card .card-body,
.credits-module .page-title-card .card-body,
.emergency-module .page-title-card .card-body,
.privacy-module .legal-card .card-body,
.imprint-module .legal-card .card-body,
.credits-module .legal-card .card-body,
.emergency-module .legal-card .card-body {
  padding: 26px 22px !important;
}

@media (min-width: 768px) {

  .privacy-module .page-title-card .card-body,
  .imprint-module .page-title-card .card-body,
  .credits-module .page-title-card .card-body,
  .emergency-module .page-title-card .card-body,
  .privacy-module .legal-card .card-body,
  .imprint-module .legal-card .card-body,
  .credits-module .legal-card .card-body,
  .emergency-module .legal-card .card-body {
    padding: 30px 24px !important;
  }
}

.privacy-module .page-title-card h1,
.imprint-module .page-title-card h1,
.credits-module .page-title-card h1,
.emergency-module .page-title-card h1 {
  margin: 0 !important;
  hyphens: manual;
  word-break: normal;
  overflow-wrap: normal;
}

.privacy-module .legal-card .card-body> :first-child,
.imprint-module .legal-card .card-body> :first-child,
.credits-module .legal-card .card-body> :first-child,
.emergency-module .legal-card .card-body> :first-child {
  margin-top: 0 !important;
}

.privacy-module .legal-card .card-body> :last-child,
.imprint-module .legal-card .card-body> :last-child,
.credits-module .legal-card .card-body> :last-child,
.emergency-module .legal-card .card-body> :last-child {
  margin-bottom: 0 !important;
}

.privacy-module .legal-card h2,
.privacy-module .legal-card h3,
.privacy-module .legal-card h4,
.imprint-module .legal-card h2,
.imprint-module .legal-card h3,
.credits-module .legal-card h2,
.credits-module .legal-card h3,
.emergency-module .legal-card h2,
.emergency-module .legal-card h3 {
  text-transform: none !important;
}

.privacy-module .legal-card p,
.imprint-module .legal-card p,
.credits-module .legal-card p,
.emergency-module .legal-card p {
  color: #5a6a74;
  margin-bottom: .65rem;
}

.credits-module .legal-card li,
.emergency-module .legal-card li {
  color: #5a6a74;
}

.privacy-module .legal-card ul,
.privacy-module .legal-card ol,
.credits-module .legal-card ul,
.credits-module .legal-card ol,
.emergency-module .legal-card ul,
.emergency-module .legal-card ol {
  margin: 0 0 .9rem 1.25rem;
}

.credits-module .legal-card li+li,
.emergency-module .legal-card li+li {
  margin-top: .25rem;
}

.legal-card a {
  text-decoration: underline;
}

.legal-card a:hover {
  text-decoration: none;
}

.credits-module .legal-card a,
.emergency-module .legal-card a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

.privacy-module .legal-card+.legal-card,
.imprint-module .legal-card+.legal-card,
.credits-module .legal-card+.legal-card,
.emergency-module .legal-card+.legal-card {
  margin-top: 14px;
}

/* =========================================================
   Header / Navigation / Footer (Astroid)
   ========================================================= */
#astroid-header,
#astroid-sticky-header {
  position: relative;
  z-index: 1100;
}

#astroid-header .megamenu-container,
#astroid-sticky-header .megamenu-container,
#astroid-header .nav-submenu-container,
#astroid-sticky-header .nav-submenu-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1050;
}

#astroid-header-spacer,
.astroid-header-spacer {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.astroid-header-section+.astroid-section,
.astroid-header-section+.astroid-component-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Artikelkopf */
body.com-content.view-article .astroid-article-title .icons {
  display: none !important;
}

body.com-content.view-article .astroid-article-title {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
}

.astroid-article-full-image:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Footer */
.footer-1-position.moduletable {
  float: left;
  text-align: left;
}

#astroid-footer {
  float: right;
  text-align: right;
}

.astroid-footer::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 991.98px) {

  .footer-1-position.moduletable,
  #astroid-footer {
    text-align: center !important;
  }

  .footer-1-position.moduletable ul {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .8rem;
    padding: 0;
    margin: .25rem 0;
    list-style: none;
  }

  .footer-1-position.moduletable ul li {
    margin: 0;
    padding: 0;
  }
}

/* Buttons */
.btn-primary {
  background-color: #7db7e0 !important;
  border-color: #7db7e0 !important;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: #68a5d1 !important;
  border-color: #68a5d1 !important;
}

/* Fokus im Navbar-Menü */
.astroid-header .navbar a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* =========================================================
   Abstände unterm Menü / Nav-Kosmetik
   ========================================================= */
.astroid-header-section+.astroid-component-section {
  padding-top: 0 !important;
}

section.seo-module[aria-labelledby="page-h1"] {
  margin-top: 0px !important;
}

#astroid-header .megamenu-container,
#astroid-sticky-header .megamenu-container,
#astroid-header .nav-submenu-container,
#astroid-sticky-header .nav-submenu-container {
  border-top: 0 !important;
  box-shadow: none !important;
}

#astroid-header .dropdown-menu,
#astroid-sticky-header .dropdown-menu {
  border-top-width: 0 !important;
}

/* Nav-Link Unterstreichung (Hover/Aktiv) */
#astroid-header .navbar .nav-link,
#astroid-sticky-header .navbar .nav-link {
  position: relative;
}

#astroid-header .navbar .nav-link::after,
#astroid-sticky-header .navbar .nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .18s ease;
}

#astroid-header .navbar .nav-link:hover::after,
#astroid-header .navbar .nav-item.active>.nav-link::after,
#astroid-header .navbar .nav-item.show>.nav-link::after,
#astroid-sticky-header .navbar .nav-link:hover::after,
#astroid-sticky-header .navbar .nav-item.active>.nav-link::after,
#astroid-sticky-header .navbar .nav-item.show>.nav-link::after {
  transform: scaleX(1);
}

/* Sticky-Header */
#astroid-header {
  position: relative !important;
  z-index: 1100 !important;
}

#astroid-sticky-header {
  position: fixed !important;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1100 !important;
  background: #fff !important;
  backdrop-filter: none !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06) !important;
}

body.astroid-sticky #astroid-content,
body.is-sticky #astroid-content,
body.astroid-sticky .astroid-component-section,
body.is-sticky .astroid-component-section {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#astroid-sticky-header .megamenu-container,
#astroid-sticky-header .nav-submenu-container {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 1050;
}

/* =========================================================
   Hero-Block auf Unterseiten (zentral)
   ========================================================= */

/* Abstand unter dem Hero via Spacer (kein Margin-Collapse) */
.hero-article {
  --hero-gap: 35px;
  display: flow-root;
  position: relative;
}

.hero-article::after {
  content: "";
  display: block;
  height: var(--hero-gap);
}

/* Folgeelement nicht zusätzlich oben abstehen lassen */
.hero-article+* {
  margin-top: 0 !important;
}

/* Hero-Text wirklich nach unten (überschreibt p-4 / p-lg-5) */
.hero-article .hero-card .card-body,
.hero-article .hero-card .card-body.p-4,
.hero-article .hero-card .card-body.p-lg-5 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding-top: 0 !important;
  padding-bottom: 5px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
}

/* Hero-Hintergrund/Overlay/Höhe */
.hero-article .hero-card {
  position: relative;
  overflow: hidden;
  border: none !important;
  border-radius: 12px !important;
  isolation: isolate;
  min-height: 320px;
}

@media (min-width: 992px) {
  .hero-article .hero-card {
    min-height: 460px;
  }
}

.hero-article .hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hero-bg) center / cover no-repeat;
  z-index: 0;
  border-radius: inherit;
}

.hero-article .hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, .12), rgba(0, 0, 0, .28));
  z-index: 1;
  border-radius: inherit;
}

.hero-article .hero-card>* {
  position: relative;
  z-index: 2;
}

/* Weißer Text im Hero */
.hero-article .hero-card h1,
.hero-article .hero-card p,
.hero-article .hero-card .lead,
.hero-article .hero-card .subtitle,
.hero-article .hero-card li {
  color: #fff !important;
}

/* Unterseiten (nur Desktop): angenehmer Abstand vor dem Footer */
@media (min-width: 769px) {
  body.com-content.view-article:not(.startseite-alias) .astroid-component-section>.container {
    padding-bottom: 48px !important;
    display: flow-root;
  }
}

/* Unterseiten: Content 10–14px höher unter die Top-Navi ziehen */
@media (min-width: 992px) {
  body.com-content.view-article:not(.startseite-alias) .hero-article {
    margin-top: -14px !important;
  }
}

/* ===== MOBILE BREITE FIX – UNTERSEITEN (ganz ans Dateiende!) ===== */
@media (max-width: 768px) {

  /* 0) Sicherheit: kein Padding auf den äußeren Wrappern */
  body.com-content.view-article:not(.startseite-alias) #astroid-content,
  body.com-content.view-article:not(.startseite-alias) .astroid-component-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 1) ALLE Container auf volle Breite + schlanke Außen-Polsterung */
  body.com-content.view-article:not(.startseite-alias) .astroid-component-section>.container,
  body.com-content.view-article:not(.startseite-alias) .astroid-component-section .container,
  body.com-content.view-article:not(.startseite-alias) #main .container,
  body.com-content.view-article:not(.startseite-alias) .hero-article .container,
  body.com-content.view-article:not(.startseite-alias) .seo-module .container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 8px !important;
    /* bei Bedarf 6px oder 10px */
    padding-right: 8px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 2) KEINE Gutter/Negativmargen in Rows */
  body.com-content.view-article:not(.startseite-alias) .row,
  body.com-content.view-article:not(.startseite-alias) .astroid-row {
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* 3) KEIN Spalten-Padding */
  body.com-content.view-article:not(.startseite-alias) .row>[class^="col-"],
  body.com-content.view-article:not(.startseite-alias) .row>[class*=" col-"],
  body.com-content.view-article:not(.startseite-alias) .astroid-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* 4) Karten innen schlanker (mehr Textbreite) */
  body.com-content.view-article:not(.startseite-alias) .card .card-body {
    padding-left: 12px !important;
    /* ggfs. 10px */
    padding-right: 12px !important;
  }

  /* 5) Listen weniger Einzug → verhindert „Textquetsche“ */
  body.com-content.view-article:not(.startseite-alias) .card ul,
  body.com-content.view-article:not(.startseite-alias) .card ol {
    padding-left: 1rem !important;
    margin-left: 0 !important;
  }

  /* 6) Kein horizontales Scrollen */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ===== UNTERSEITEN: MOBILE VOLLBREITE OHNE SCROLL (≤768px) ===== */
@media (max-width: 768px) {

  /* A) Astroid-Section & Component-Area komplett bündig ziehen */
  body.com-content.view-article:not(.startseite-alias) .astroid-section,
  body.com-content.view-article:not(.startseite-alias) .astroid-component-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* B) Alle Container (auch in Hero/SEO) ohne Außenpolster */
  body.com-content.view-article:not(.startseite-alias) .astroid-section .container,
  body.com-content.view-article:not(.startseite-alias) .astroid-section .container-fluid,
  body.com-content.view-article:not(.startseite-alias) .hero-article>.container,
  body.com-content.view-article:not(.startseite-alias) .seo-module>.container,
  body.com-content.view-article:not(.startseite-alias) .astroid-component-section>.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* C) Reihen: Bootstrap-Negativränder/Gutter sicher neutralisieren */
  body.com-content.view-article:not(.startseite-alias) #main .row,
  body.com-content.view-article:not(.startseite-alias) #main .astroid-row {
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* D) Spalten: keine Innen-Polster an den Kanten */
  body.com-content.view-article:not(.startseite-alias) #main .row>[class^="col-"],
  body.com-content.view-article:not(.startseite-alias) #main .row>[class*=" col-"],
  body.com-content.view-article:not(.startseite-alias) #main .astroid-row>.astroid-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* E) Karten innen sehr kompakt – holt noch ein paar Pixel */
  body.com-content.view-article:not(.startseite-alias) #main .card .card-body {
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  /* F) Lange Inhalte nicht überlaufen lassen */
  body.com-content.view-article:not(.startseite-alias) #main .card {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  /* G) Sicherheitsnetz */
  html,
  body {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* Global sinnvoll: Box-Sizing konsistent (verhindert Überraschungen) */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* === UNTERSEITEN wie STARTSEITE rahmenbreit ================================= */
@media (min-width: 992px) {
  body.com-content.view-article:not(.startseite-alias) .astroid-component-section>.container {
    /*max-width: 1140px !important;*/
    max-width: var(--page-max) !important;
    /* exakt wie Startseiten-Module */
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Wrapper, die in der Component Area seitlich einengen → neutralisieren */
body.com-content.view-article:not(.startseite-alias) .astroid-component,
body.com-content.view-article:not(.startseite-alias) .astroid-component-area,
body.com-content.view-article:not(.startseite-alias) .astroid-article-text,
body.com-contact.view-contact .headline-border {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}



/* manche Styles geben .headline-border zusätzliches Padding → aus */
body.com-content.view-article:not(.startseite-alias) .astroid-component.headline-border {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* === MOBILE: einheitlicher, widerspruchsfreier Block (≤768px) =============== */
@media (max-width: 768px) {

  /* Außen bündig */
  body.com-content.view-article:not(.startseite-alias) .astroid-section,
  body.com-content.view-article:not(.startseite-alias) .astroid-component-section {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Container auf volle Breite + schlanke Außenpolsterung (10px) */
  body.com-content.view-article:not(.startseite-alias) .astroid-section .container,
  body.com-content.view-article:not(.startseite-alias) .astroid-section .container-fluid,
  body.com-content.view-article:not(.startseite-alias) .astroid-component-section>.container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Reihen/Spalten ohne Gutter/Negativränder */
  body.com-content.view-article:not(.startseite-alias) #main .row,
  body.com-content.view-article:not(.startseite-alias) #main .astroid-row {
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  body.com-content.view-article:not(.startseite-alias) #main [class^="col-"],
  body.com-content.view-article:not(.startseite-alias) #main [class*=" col-"] {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Karten innen kompakt (mehr Textbreite) */
  body.com-content.view-article:not(.startseite-alias) #main .card .card-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

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

/* ========= Recht & Infos: Impressum, Datenschutz, Bildmaterial ========= */
:is(.imprint-module, .privacy-module, .credits-module) .page-title-card h1{
  font-size:clamp(1.35rem, 2.1vw, 1.85rem) !important;
  line-height:1.25 !important;
  hyphens:auto !important;
  overflow-wrap:anywhere !important;
  word-break:normal !important;
}

:is(.imprint-module, .privacy-module, .credits-module) .legal-card :is(h2){
  font-size:clamp(1.05rem, 1.6vw, 1.25rem) !important;
  line-height:1.3 !important;
  hyphens:auto !important;
  overflow-wrap:anywhere !important;
}
:is(.imprint-module, .privacy-module, .credits-module) .legal-card :is(h3,h4){
  font-size:clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height:1.3 !important;
  hyphens:auto !important;
  overflow-wrap:anywhere !important;
}

/* Lauftext & Zellen: saubere Umbrüche, auch bei langen Worten/URLs */
:is(.imprint-module, .privacy-module, .credits-module) .legal-card
:is(p, li, td, th, address){
  hyphens:auto;
  overflow-wrap:anywhere;
  word-break:normal;
}

/* Links/URLs nicht aus dem Layout schieben */
:is(.imprint-module, .privacy-module, .credits-module) .legal-card a{
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Optional: Leselänge begrenzen – bei Bedarf auskommentieren */
:is(.imprint-module, .privacy-module, .credits-module) .legal-card .card-body{
  max-width:74ch;
}

/* Kompaktere vertikale Abstände */
:is(.imprint-module, .privacy-module, .credits-module) .legal-card
:is(h1,h2,h3,h4){ margin:.75rem 0 .5rem !important; }
:is(.imprint-module, .privacy-module, .credits-module) .legal-card
:is(p,ul,ol){ margin-bottom:.65rem !important; }

/* ===== Rechtliches: Desktop nicht zweispaltig machen ===== */
@media (min-width: 992px){
  /* Bootstrap-/Astroid-Spalten auf 100% ziehen */
  .imprint-module .row > [class^="col-"],
  .imprint-module .row > [class*=" col-"],
  .imprint-module .astroid-row > .astroid-column,

  .privacy-module .row > [class^="col-"],
  .privacy-module .row > [class*=" col-"],
  .privacy-module .astroid-row > .astroid-column,

  .credits-module .row > [class^="col-"],
  .credits-module .row > [class*=" col-"],
  .credits-module .astroid-row > .astroid-column{
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }

  /* Seitliche Rinnen raus, damit wirklich vollflächig */
  .imprint-module .row,
  .privacy-module .row,
  .credits-module .row{
    --bs-gutter-x: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}


.imprint-module .legal-card .container,
.privacy-module .legal-card .container,
.credits-module .legal-card .container{
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Rechtseiten: Inhalt am Desktop nicht künstlich verengen */
:is(.imprint-module, .privacy-module, .credits-module) .legal-card .card-body{
  max-width: none !important; /* oder: unset */
  /* optional: width:100%; */
}



/* ========= Kontaktseite: gleiche Breite + Felder vollflächig ========= */

/* Desktop: gleiche Max-Breite wie Unterseiten/Startseiten-Module */
body.com-contact.view-contact .astroid-component-section > .container{
  max-width: var(--page-max) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Smartphone: wie Unterseiten (6px Außenpolster, keine Gutter) */
@media (max-width:768px){
  body.com-contact.view-contact #astroid-content,
  body.com-contact.view-contact .astroid-component-section,
  body.com-contact.view-contact .astroid-section{
    padding-left:0 !important;
    padding-right:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  body.com-contact.view-contact .astroid-component-section > .container,
  body.com-contact.view-contact .astroid-section .container,
  body.com-contact.view-contact .astroid-section .container-fluid{
    width:100% !important;
    max-width:100% !important;
    padding-left:6px !important;   /* exakt wie bei den Unterseiten */
    padding-right:6px !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  body.com-contact.view-contact .row,
  body.com-contact.view-contact .astroid-row{
    --bs-gutter-x:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  body.com-contact.view-contact .row > [class^="col-"],
  body.com-contact.view-contact .row > [class*=" col-"],
  body.com-contact.view-contact .astroid-column{
    padding-left:0 !important;
    padding-right:0 !important;
  }
  body.com-contact.view-contact .card .card-body{
    padding-left:12px !important;
    padding-right:12px !important;
  }
  html, body{ max-width:100%; overflow-x:hidden; }
}

/* Formularfelder wirklich rahmenbreit */
body.com-contact.view-contact form input[type="text"],
body.com-contact.view-contact form input[type="email"],
body.com-contact.view-contact form input[type="tel"],
body.com-contact.view-contact form input[type="url"],
body.com-contact.view-contact form input[type="number"],
body.com-contact.view-contact form select,
body.com-contact.view-contact form textarea{
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box;
}

/* "Nachricht": komfortabel mehrzeilig (Desktop & Mobil) */
body.com-contact.view-contact textarea,
body.com-contact.view-contact #jform_contact_message,
body.com-contact.view-contact textarea[name*="message"],
body.com-contact.view-contact textarea[name*="nachricht"]{
  min-height:180px !important;
  resize:vertical;
  line-height:1.45;
}

/* Falls "Nachricht" fälschlich als <input> gerendert wird: Notfall-Workaround */
body.com-contact.view-contact input[name*="message"],
body.com-contact.view-contact input[name*="nachricht"]{
  height:120px !important; /* echtes Mehrzeilig = Textarea im Formular */
}

/* Smartphone: letzte Restabstände am Formular killen */
@media (max-width: 768px){
  /* 1) UA-Defaults: fieldset/legend entmargen & entpolstern */
  body.com-contact.view-contact fieldset,
  body.com-contact.view-contact legend{
    margin:0 !important;
    padding:0 !important;
    border:0;
  }

  /* 2) Joomla/Bootstrap-Wrapper rund ums Formular bündig ziehen */
  body.com-contact.view-contact .contact,
  body.com-contact.view-contact .contact form,
  body.com-contact.view-contact .contact .form-validate{
    margin-left:0 !important;
    margin-right:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
  }

  /* 3) Zeilen/Spalten im Formular selbst: keine Gutter */
  body.com-contact.view-contact form .row{
    --bs-gutter-x:0 !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
  body.com-contact.view-contact form .row > [class^="col-"],
  body.com-contact.view-contact form .row > [class*=" col-"]{
    padding-left:0 !important;
    padding-right:0 !important;
  }
}

/* ========= Kontakt: Typo wie Impressum/Datenschutz/Bildmaterial ========= */

body.com-contact.view-contact {
  /* saubere Silbentrennung & Wortumbruch global */
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Überschriften kompakt & ohne Uppercase */
body.com-contact.view-contact h1 {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem) !important;
  line-height: 1.25;
  text-transform: none !important;
}
body.com-contact.view-contact h2 {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem) !important;
  line-height: 1.35;
  text-transform: none !important;
}
body.com-contact.view-contact h3 {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem) !important;
  line-height: 1.4;
  text-transform: none !important;
}

/* Fließtext, Listen, Labels – gleiches Grau & luftiger */
body.com-contact.view-contact p,
body.com-contact.view-contact li,
body.com-contact.view-contact label {
  color: #5a6a74;
  line-height: 1.65;
}

/* Lange Links/Adressen dürfen umbrechen */
body.com-contact.view-contact a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Karten-Innenabstände: erste/letzte Kante bündig wie bei Rechtsseiten */
body.com-contact.view-contact .card .card-body > :first-child { margin-top: 0 !important; }
body.com-contact.view-contact .card .card-body > :last-child  { margin-bottom: 0 !important; }

/* (optional) Feldgruppen-Überschrift optisch wie H2 */
body.com-contact.view-contact legend {
  font-size: clamp(1.05rem, 1.8vw, 1.25rem);
  font-weight: 600;
  margin-bottom: .5rem;
}

/* ========= Recht & Infos (Impressum, Datenschutz, Bildmaterial, Notfall) === */
:is(.imprint-module, .privacy-module, .credits-module, .emergency-module) .page-title-card h1{
  font-size: clamp(1.35rem, 2.1vw, 1.85rem) !important;
  line-height: 1.25 !important;
  hyphens: auto !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* h2/h3/h4 in den Inhaltskarten angleichen */
:is(.imprint-module, .privacy-module, .credits-module, .emergency-module) .legal-card :is(h2){
  font-size: clamp(1.05rem, 1.6vw, 1.25rem) !important;
  line-height: 1.3 !important;
  hyphens: auto !important;
  overflow-wrap: anywhere !important;
}
:is(.imprint-module, .privacy-module, .credits-module, .emergency-module) .legal-card :is(h3,h4){
  font-size: clamp(1rem, 1.4vw, 1.15rem) !important;
  line-height: 1.3 !important;
  hyphens: auto !important;
  overflow-wrap: anywhere !important;
}

/* Lauftext & Tabellenzellen sauber umbrechen */
:is(.imprint-module, .privacy-module, .credits-module, .emergency-module) .legal-card :is(p, li, td, th, address){
  hyphens: auto;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Lange Links nicht sprengen */
:is(.imprint-module, .privacy-module, .credits-module, .emergency-module) .legal-card a{
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ===== Design-Utilities passend zu deinen Seiten ===== */
:root{
  --pastel-blue:#E6F0FF;
  --pastel-green:#E7F3EA;
  --pastel-beige:#F6F1E7;
  --text-dark:#37474F;
  --border-muted:#e0e7ef;
  --card-radius:12px;
  --site-max:1280px;
}

/* Pastell-Hilfsklassen (wie auf anderen Seiten) */
.bg-pastel-beige{ background: var(--pastel-beige); }
.bg-pastel-green{ background: var(--pastel-green); }
.text-dark-aux{ color: var(--text-dark); }

/* Einheitliche Max-Breite */
.blog .container,
.item-page .container{ max-width: var(--site-max); }

/* ===== Karten-Look wie deine Module (SEO-Card etc.) ===== */
.card.border-0{ border:1px solid var(--border-muted); }
.card{ border-radius: var(--card-radius); box-shadow:0 2px 12px rgba(0,0,0,.04); }

/* ===== Einzelartikel (.item-page) ===== */
.item-page .page-header{ margin-bottom:0; }
.item-page article{ background:#fff; border:1px solid var(--border-muted); border-radius:var(--card-radius); box-shadow:0 2px 12px rgba(0,0,0,.04); overflow:hidden; }
.item-page .img-fulltext{ margin:0; background:var(--pastel-blue); }
.item-page .img-fulltext img{ display:block; width:100%; height:auto; }
.item-page .article-body, 
.item-page .entry-content{ padding:1.25rem 1.25rem 1.5rem; }
.item-page .lead{ color:var(--text-dark); }
.item-page h2, .item-page .h2{ font-size:clamp(1.25rem,2.2vw,1.6rem); }

/* CTA-Karte am Ende wie deine Pastell-Module */
.post-cta .card{ background:var(--pastel-green); box-shadow:0 2px 12px rgba(0,0,0,.03); }

/* ---------- Konsistente Containerbreite ---------- */
:root { --site-max: 1280px; }
.blog .container { max-width: var(--site-max); }

/* ---------- Einspaltige Liste, Karte unter Karte ---------- */
.blog .items-row { display: block !important; }
.blog .items-row > div { width: 100% !important; max-width: 100% !important; }

/* ---------- Karte im Stil card-clean + seo-card ---------- */
.blog article {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--card-radius, 12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  overflow: hidden;
  margin-bottom: 1rem;
}

/* Bild oben wie bei deinen Karten, mit sanftem Fallback */
.blog article .item-image { margin: 0; background: var(--pastel-beige, #F6F1E7); }
.blog article .item-image img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 16/9; object-fit: cover; /* einheitlicher Zuschnitt */
}

/* Innenabstände wie bei seo-card */
.blog article .item-content,
.blog article .content-inner,
.blog article .item-body { padding: 1rem 1rem 1.25rem; }

/* Titel/Introtext */
.blog article .item-title { 
  margin: .25rem 0 .5rem;
  color: var(--text-dark, #37474F);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.2;
}
.blog article .item-title a { text-decoration: none; }
.blog article .item-introtext,
.blog article .intro { color: var(--text-dark, #37474F); margin-bottom: .75rem; }

/* "Weiterlesen" link im Button-Look (btn-outline-primary, sm) */
.blog article .readmore { padding-bottom: 1rem; }
.blog article .readmore a {
  display: inline-block;
  padding: .25rem .6rem;
  border: 1px solid var(--bs-primary, #0d6efd);
  border-radius: var(--card-radius, 12px);
  text-decoration: none;
  line-height: 1.1;
  font-size: .875rem;
}
.blog article .readmore a:hover { 
  background: var(--bs-primary, #0d6efd); color: #fff; 
}

/* Optional: Seitenüberschrift von Joomla (falls aktiv) ausblenden, 
   weil wir das H1 im Intro-Modul haben */
.blog .page-title,
.blog .page-header { display: none; }

.item-page .container { max-width: var(--site-max); }
.item-page article {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--card-radius, 12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  overflow: hidden;
}

/* Bild im Artikelkopf */
.item-page .img-fulltext { margin: 0; background: var(--pastel-blue, #E6F0FF); }
.item-page .img-fulltext img { display: block; width: 100%; height: auto; }

/* Innenabstände wie bei deinen Karten */
.item-page .article-body,
.item-page .entry-content { padding: 1.25rem 1.25rem 1.5rem; }

/* CTA-Karte unten grün pastell (wie deine Module) */
.post-cta .card {
  background: var(--pastel-green, #E7F3EA);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--card-radius, 12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.03);
}

/* ---------- BLOG ÜBERSICHT: Artikel-Teaser als accent-blue ---------- */
.blog article {
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
  border-radius: var(--card-radius, 12px);
  box-shadow: 0 2px 12px rgba(0,0,0,.04);
  overflow: hidden;
  margin-bottom: 1rem;
}

/* Blaue Akzentlinie links + Rahmen wie deine accent-blue-Karten */
.blog article {
  border-left: 6px solid var(--bs-primary, #0d6efd);
}

/* Artikel-Titel/Introtext */
.blog article .item-title {
  margin: .25rem 0 .5rem;
  color: var(--text-dark, #37474F);
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  line-height: 1.2;
}
.blog article .item-title a { text-decoration: none; }
.blog article .item-introtext,
.blog article .intro {
  color: var(--text-dark, #37474F);
  margin-bottom: .75rem;
}

/* Bild (oben) */
.blog article .item-image { margin: 0; background: var(--pastel-beige, #F6F1E7); }
.blog article .item-image img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Innenabstand */
.blog article .item-content,
.blog article .content-inner,
.blog article .item-body {
  padding: 1rem 1rem 1.25rem;
}

/* Weiterlesen-Button */
.blog article .readmore { padding-bottom: 1rem; }
.blog article .readmore a {
  display:inline-block;
  padding:.25rem .6rem;
  border:1px solid var(--bs-primary, #0d6efd);
  border-radius: var(--card-radius, 12px);
  text-decoration:none;
  line-height:1.1;
  font-size:.875rem;
  color: var(--bs-primary, #0d6efd);
}
.blog article .readmore a:hover {
  background: var(--bs-primary, #0d6efd);
  color: #fff;
}

/* Scrollbar-Breite immer reservieren → kein Springen */
html { scrollbar-gutter: stable both-edges; }

/* Fallback für Browser ohne scrollbar-gutter */
@supports not (scrollbar-gutter: stable) {
  html { overflow-y: scroll; }  /* erzwingt immer eine (ggf. inaktive) Scrollbar */
}

/* ===== Inspirationen (Kategorie-Blog) – Hero bündig wie auf Unterseiten ===== */

/* 1) Container oben ohne Extra-Polster (Kategorie-Ansicht) */
body.itemid-351.com-content.view-category .astroid-component-section,
body.itemid-351.com-content.view-category #astroid-content {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* 2) Kategorie-Beschreibung: Margin-Collapse verhindern + Top-Margin nullen */
body.itemid-351.com-content.view-category .com-content-category__description,
body.itemid-351.com-content.view-category .category-desc {
  display: flow-root !important;
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* 3) Ersten Knoten im Hero „entkoppeln“ (meist H1/P/Bild hat margin-top) */
body.itemid-351.com-content.view-category .category-desc > :first-child,
body.itemid-351.com-content.view-category .category-desc .hero-box > :first-child {
  margin-top: 0 !important;
}

/* 4) Desktop-Feintuning: exakt die -14px wie bei view-article anwenden */
@media (min-width: 992px){
  body.itemid-351.com-content.view-category .com-content-category__description,
  body.itemid-351.com-content.view-category .category-desc {
    margin-top: -14px !important;
  }
}
/* Kontaktformular */

/* ===== Kontaktseite: gleiche Außenbreite wie LPs, Innenabstände bleiben erhalten ===== */
body.com-contact.view-contact .astroid-component-section > .container{
  max-width: var(--page-max) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* nur die Astroid-/Artikel-Wrapper neutralisieren, nicht die Karten */
body.com-contact.view-contact .astroid-component,
body.com-contact.view-contact .astroid-component-area,
body.com-contact.view-contact .astroid-article-text,
body.com-contact.view-contact .astroid-component.headline-border{
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* erste Row in der Component Area bündig wie bei den LPs */
body.com-contact.view-contact .astroid-component-section > .container > .astroid-row{
  margin-left: 0 !important;
  margin-right: 0 !important;
  --bs-gutter-x: 0 !important;
}

body.com-contact.view-contact .astroid-component-section > .container > .astroid-row > .astroid-column{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* oberer Abstand unter dem Menü wie bei den LPs */
@media (min-width: 992px){
  body.com-contact.view-contact .astroid-component-section{
    padding-top: 0 !important;
    margin-top: 0 !important;
  }

  
}
/* 1) Weniger Abstand unter dem Hauptmenü 
@media (min-width: 992px){
  body.com-contact.view-contact .com-contact.contact{
    margin-top: -28px !important;
  }
}*/

/* 2) Karten-Innenabstand wie gewünscht zurückholen */
body.com-contact.view-contact .seo-card > .card-body{
  padding: 1.25rem !important;
}

@media (min-width: 768px){
  body.com-contact.view-contact .seo-card > .card-body{
    padding: 1.75rem !important;
  }
}


/* verhindert zusätzlichen Abstand durch erste Row */
body.com-contact.view-contact .astroid-component-section > .container > .astroid-row{
  margin-top: 0 !important;
}
@media (min-width: 992px){
  body.com-contact.view-contact .com-contact.contact{
    position: relative;
    top: -30px !important;   /* bei Bedarf -28px bis -34px feinjustieren */
  }
}

@media (max-width: 768px) {
  .hero-article {
    margin-top: -52px;
  }
}

@media (max-width: 768px){
  body.com-contact.view-contact .astroid-component-section > .container {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

@media (max-width: 768px){
  body.com-contact.view-contact .com-contact.contact{
    position: relative;
    top: -42px;
  }
}

@media (max-width: 768px){
  body.com-content.view-article .imprint-module,
  body.com-content.view-article .privacy-module,
  body.com-content.view-article .credits-module {
    position: relative;
    top: -52px !important;
  }
}