/*
Theme Name: Stadt Dorsten
Theme URI: https://www.dorsten.de
Author: Steffen Kaster (Stadt Dorsten - 16 ITM)
Author URI: https://dorsten.de/
Description: Ein maßgeschneidertes WordPress-Theme für die Stadt Dorsten
Version: 1.21.3
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.2
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: stadt-dorsten
*/

/*======================================
  INHALTSVERZEICHNIS
======================================*/
/* 
   === GRUNDLAGEN ===
   1. CSS-Variablen und Theme-Konfiguration
   2. CSS-Reset und Basis-Styles
   3. Fonts und Font-Faces
   4. Font Awesome Konfiguration
   
   === LAYOUT-BASIS ===
   5. Container und Layout-System
   6. Grid-System und Responsive Design
   
   === KOMPONENTEN ===
   7. Header und Navigation
   8. Hero-Bereich
   9. Hauptbereich und Content
   10. Footer
   
   === CONTENT-BEREICHE ===
   11. Posts Grid und Archive
   12. Kommentare
   13. Suchfunktionen
   14. 404-Seite
   
   === CMS-INTEGRATION ===
   15. WordPress Standard-Klassen
   16. Gutenberg Block-Stile
   17. Gutenberg Editor-Stile
   18. Elementor Anpassungen
   
   === SPEZIALFUNKTIONEN ===
   19. Barrierefreiheit und Anzeigemodi
   20. Print-Styles
   21. Utility-Klassen
*/

/* 
   WICHTIGE ANMERKUNGEN:
   - Die Höhe des Unterseiten-Headers ist jetzt fest definiert (650px Desktop, 400px Mobil)
   - Die Einstellung wirkt sich auf die tatsächliche Höhe des Headers und die Abstände der Inhalte aus
   - Die Höhe ist auch in responsiven Ansichten berücksichtigt
*/

/*======================================
  1. VARIABLEN UND RESET
======================================*/
:root {
    /* Dorsten Standard Farben */
    --farbe-dorsten-gruen: #80B022;
    --farbe-dorsten-grau: #575756;
    --farbe-dorsten-hellgrau: #9d9d9c;
    --farbe-dorsten-sehr-hellgrau: #B9B9bA; /* rgb(185, 185, 186) */
    --farbe-dorsten-blau: #007DBF;
  /* Spezielles Grau für &-Kästchen */
  --farbe-dorsten-andgrau: #70706F;
    
    /* Schriften */
    --schrift-primär: 'Segoe UI', sans-serif;
    --schrift-sekundär: Arial, sans-serif;
    
    /* Typografische Skala */
    --font-size-base: 1rem;
    --font-size-sm: 0.9rem;
    --font-size-xs: 0.8rem;
    --font-size-lg: 1.2rem;
    --font-size-xl: 1.5rem;
    --font-size-xxl: 2rem;
    --font-size-xxxl: 3rem;
    
    /* Abstände */
    --abstand-xs: 0.5rem;
    --abstand-sm: 1rem;
    --abstand-md: 1.5rem;
    --abstand-lg: 2rem;
    --abstand-xl: 3rem;
    
    /* Layout */
    --container-width: 1300px;
    /* Hero-Höhe wird jetzt über PHP gesetzt und ist fest auf 80vh */
    
    /* Feste Header-Höhen für Unterseiten - gestaffelt für bessere Responsivität */
    --subpage-header-height-desktop: 650px;
    --subpage-header-height-laptop: 550px;
    --subpage-header-height-tablet: 450px;
    --subpage-header-height-mobile: 350px;
    --subpage-header-height-small: 300px;
    
    /* Übergänge */
    --transition-speed: 0.3s;
    --transition-easing: ease;
    
    /* Englische Farbvariablen für Kompatibilität */
    --dorsten-color-green: var(--farbe-dorsten-gruen);
    --dorsten-color-blue: var(--farbe-dorsten-blau);
    --dorsten-color-gray: var(--farbe-dorsten-grau);
    --dorsten-color-lightgray: var(--farbe-dorsten-hellgrau);
    --dorsten-color-very-lightgray: var(--farbe-dorsten-sehr-hellgrau);    /* Neue Variable für Link-Farbe */
    --farbe-verlinkung: var(--farbe-dorsten-gruen);
}

/* Grundlegendes Reset/Box-Sizing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/*======================================
  2. GRUNDLEGENDE STYLES
======================================*/
html, body {
    font-family: var(--schrift-primär);
    line-height: 1.5;
    color: var(--farbe-dorsten-grau);
}

html {
  height: 100%;
  overflow-x: hidden; /* Verhindert horizontales Scrollen */
}

body {
  font-family: var(--schrift-primär);
  color: var(--farbe-dorsten-grau);
  background-color: #fff;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Mindesthöhe ist die volle Viewport-Höhe */
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* Verhindert horizontales Scrollen und Ränder */
}

/* Sticky Footer Layout */
#page.site {
  display: flex;
  flex-direction: column;
  flex: 1 0 auto; /* Wächst um den verfügbaren Platz zu füllen */
  min-height: 100vh;
  width: 100%;
}

#content.site-content {
  flex: 1 0 auto; /* Hauptinhalt füllt den restlichen Platz */
}

/* Formatierung nur für Elementor-Text-Editor */
.elementor-widget-text-editor p {
  margin-bottom: 1.2em;
  line-height: 1.6;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

/* Quadratische Aufzählungspunkte nur für Elementor-Text-Editor */
.elementor-widget-text-editor ul {
  list-style-type: square;
  margin: 0 0 1.5em 1.5em;
  padding-left: 1.5em;
}

.elementor-widget-text-editor ol {
  margin: 0 0 1.5em 1.5em;
  padding-left: 1.5em;
}

/* Verschachtelte Listen im Elementor-Text-Editor */
.elementor-widget-text-editor ul ul, 
.elementor-widget-text-editor ol ol, 
.elementor-widget-text-editor ul ol, 
.elementor-widget-text-editor ol ul {
  margin: 0.5em 0 0.5em 1.5em;
}

/* Listen-Elemente im Elementor-Text-Editor */
.elementor-widget-text-editor li {
  margin-bottom: 0.5em;
  line-height: 1.6;
  text-align: justify;
}

/* Definitionslisten im Elementor-Text-Editor */
.elementor-widget-text-editor dl {
  margin: 0 0 1.5em 0;
}

.elementor-widget-text-editor dt {
  font-weight: bold;
  margin-bottom: 0.5em;
}

.elementor-widget-text-editor dd {
  margin: 0 0 1.5em 1.5em;
  line-height: 1.6;
}

/* Einrückung von Blockzitaten im Elementor-Text-Editor */
.elementor-widget-text-editor blockquote {
  margin: 1.5em 0;
  padding: 1em 1.5em;
  border-left: 4px solid var(--farbe-dorsten-gruen);
  background-color: rgba(128, 176, 34, 0.05);
  font-style: italic;
}

.elementor-widget-text-editor blockquote p:last-child {
  margin-bottom: 0;
}

/* Tabellenformatierung im Elementor-Text-Editor */
.elementor-widget-text-editor table {
  margin: 0 0 1.5em;
  width: 100%;
  border-collapse: collapse;
}

.elementor-widget-text-editor th {
  font-weight: bold;
  padding: 0.5em;
  text-align: left;
  border-bottom: 2px solid var(--farbe-dorsten-gruen);
}

.elementor-widget-text-editor td {
  padding: 0.5em;
  border-bottom: 1px solid #eee;
}

/* Gemeinsames Link-Styling */
.elementor-widget-container p a:not(.elementor-button, .elementor-button-link, .elementor-size-xl, .customize-unpreviewable),
.elementskit-card-body a, 
.elementor-widget-container a:not(.elementor-button, .elementor-button-link, .elementor-size-xl, .customize-unpreviewable),
.docs-list a, 
.docs-item-container a, 
.toc-list a, 
.betterdocs-hierarchial-toc a, 
.docs-navigation a, 
.betterdocs-content a,
main a:not(a:has(img)) {
    color: var(--farbe-verlinkung);
    text-decoration: none;
    outline: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.3s ease-in-out;
    padding: 0.1rem 0;
    position: relative;
}

/* Footer Links weiß */
.site-footer a:not(.footer-logo-link) {
    color: #ffffff !important;
}

.elementor-widget-container p a:hover:not(.elementor-button, .elementor-button-link, .elementor-size-xl, .customize-unpreviewable),
.elementor-widget-container p a:focus:not(.elementor-button, .elementor-button-link, .elementor-size-xl, .customize-unpreviewable),
.elementor-widget-container p a:active:not(.elementor-button, .elementor-button-link, .elementor-size-xl, .customize-unpreviewable),
.elementskit-card-body a:hover, 
.docs-list a:hover,
.docs-item-container a:hover,
.toc-list a:hover,
.betterdocs-hierarchial-toc a:hover,
.docs-navigation a:hover,
.betterdocs-content a:hover,
footer a:hover:not(.footer-logo-link):not(.footer-column a):not(.footer-widget a),
main a:hover:not(a:has(img), .button-content) {
    background-size: 100% 1px;
    text-decoration: none;
}

/* Telefon-Links mit Icon */
a[href^="tel:"] {
    color: var(--farbe-verlinkung) !important;
    text-decoration: none !important;
    background-image: none !important;
    transition: text-decoration var(--transition-speed) var(--transition-easing);
}

a[href^="tel:"]:hover {
    text-decoration: underline !important;
}

a[href^="tel:"]::before {
    content: "\f095";
    font-family: var(--dorsten-font-fallback);
    font-weight: 900;
    margin-right: 6px;
    color: var(--farbe-verlinkung);
}

/* E-Mail-Links mit Icon */
a[href^="mailto:"] {
    color: var(--farbe-verlinkung) !important;
    text-decoration: none !important;
    background-image: none !important;
    transition: text-decoration var(--transition-speed) var(--transition-easing);
}

a[href^="mailto:"]:hover {
    text-decoration: underline !important;
}

a[href^="mailto:"]::before {
    content: "\f0e0";
    font-family: var(--dorsten-font-fallback);
    font-weight: 900;
    margin-right: 6px;
    color: var(--farbe-verlinkung);
    display: inline-block;
}

/* Footer-spezifische Anpassungen für Telefon und E-Mail */
/* Telefon-Icon im Footer mit weißem Quadrat-Hintergrund */
.site-footer a[href^="tel:"]::before {
    background-color: #ffffff;
    color: var(--farbe-dorsten-gruen);
    padding: 2px;
    border-radius: 0;
    display: inline-block;
    width: 1em;
    height: 1em;
    text-align: center;
    line-height: 1em;
    margin-right: 8px;
    font-size: 0.9em;
}

/* E-Mail-Icon im Footer ausblenden */
.site-footer a[href^="mailto:"]::before {
    display: none;
}

/* Allgemeines Link-Styling */
a:not(#primary-menu a, 
       .main-navigation a, 
       .nav-links a, 
       .header-links a,
       a:has(img),
       .footer-logo-link,
       .button-content) {
    color: var(--farbe-verlinkung);
    text-decoration: none;
    outline: none;
    background-image: linear-gradient(currentColor, currentColor);
    background-position: 0% 100%;
    background-repeat: no-repeat;
    background-size: 0% 1px;
    transition: background-size 0.3s ease-in-out;
    padding: 0.1rem 0;
}

a:hover:not(#primary-menu a, 
          .main-navigation a, 
          .nav-links a, 
          .header-links a,
          a:has(img),
          .footer-logo-link,
          .button-content),
a:focus:not(#primary-menu a, 
          .main-navigation a, 
          .nav-links a, 
          .header-links a,
          a:has(img),
          .footer-logo-link,
          .button-content),
a:active:not(#primary-menu a, 
          .main-navigation a, 
          .nav-links a, 
          .header-links a,
          a:has(img),
          .footer-logo-link,
          .button-content) {
    background-size: 100% 1px;
    text-decoration: none;
}

/* Links mit Bildern - kein Unterstrich */
a:has(img) {
    background-image: none;
    text-decoration: none;
}

/* Header-Menü-Links */
#primary-menu a,
.main-navigation a,
.nav-links a,
.header-links a {
    text-decoration: none;
    background-image: none;
}

/* Base heading styles */
h1, h2, h3, h4, h5, h6 {
  color: var(--farbe-dorsten-grau);
  font-weight: 600;
  margin-bottom: var(--abstand-sm);
  line-height: 1.2;
}

/* Standard heading sizes (angepasste Skala 2025-09: h3 = 1.75rem Vorgabe) */
/* Neue Skala: h1 3rem, h2 2.25rem, h3 1.75rem, h4 1.4rem, h5 1.15rem, h6 1rem */
h1 { font-size: 3rem; }
h2 { font-size: 2.25rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; }

/* Elementor heading styles */
.elementor-heading-title {
  color: var(--farbe-dorsten-grau);
  font-weight: 600;
  margin-bottom: var(--abstand-sm);
  line-height: 1.2;
}

/* Elementor heading sizes (synchron zur Standard-Skala) */
h1.elementor-heading-title { font-size: 3rem; }
h2.elementor-heading-title { font-size: 2.25rem; }
h3.elementor-heading-title { font-size: 1.75rem; }
h4.elementor-heading-title { font-size: 1.4rem; }
h5.elementor-heading-title { font-size: 1.15rem; }
h6.elementor-heading-title { font-size: 1rem; }

/*======================================
  3. CONTAINER UND LAYOUT
======================================*/
/* Basis-Layout */
header, main, footer {
  max-width: var(--container-width);
  margin: 0 auto;
}

/* Einheitlicher Container für konsistente Abstände */
.container {
  max-width: var(--container-width);
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}

/*======================================
  4. HEADER UND NAVIGATION
======================================*/
/* Header-Wrapper */
.header-wrapper {
  position: relative;
  z-index: 1000;
  /* Gradient von transparent unten nach leicht weiß oben für bessere Lesbarkeit */
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0.2) 75%, rgba(255, 255, 255, 0) 100%);
  padding-bottom: 5rem;
  transition: all var(--transition-speed) var(--transition-easing);
}

/* Startseite: Mehr Abstand wegen höherem Headerbild */
body.home .header-wrapper,
body.front-page .header-wrapper {
  padding-bottom: 13rem;
}

@media screen and (max-width: 768px) {
  .header-wrapper {
    padding-bottom: 3rem;
  }
  
  body.home .header-wrapper,
  body.front-page .header-wrapper {
    padding-bottom: 13rem;
  }
}

@media screen and (max-width: 480px) {
  .header-wrapper {
    padding-bottom: 2rem;
  }
  
  body.home .header-wrapper,
  body.front-page .header-wrapper {
    padding-bottom: 13rem;
  }
}

/* Sticky Header Klasse */
.header-wrapper.sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding-bottom: 10px;
}

/* Startseite: Kein großes Padding im Sticky-Modus */
body.home .header-wrapper.sticky,
body.front-page .header-wrapper.sticky {
  padding-bottom: 10px;
}

/* Sticky Header - Suchfeld Anpassungen */
.header-wrapper.sticky .search-unit {
  margin-right: 10px;
}

.header-wrapper.sticky #search-form {
  transition: width 0.4s ease, opacity 0.4s ease;
}

.header-wrapper.sticky #search-form.active {
  width: 300px;
}

/* Anpassung für WordPress Admin Bar */
.admin-bar .header-wrapper.sticky {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .header-wrapper.sticky {
    top: 46px;
  }
}

/* Top-Header Bar */
.top-header-bar {
  width: 100%;
  background-color: transparent;
  color: var(--farbe-dorsten-grau);
  padding: 0;
  border-bottom: none;
  position: relative;
  z-index: 1000;
}

.top-header-bar .container {
  display: grid !important;
  grid-template-columns: 1fr auto;
  justify-content: unset !important;
  align-items: center;
  gap: 10px;
  padding: 0 var(--abstand-lg);
}

/* Header-Links und Icons */
.header-links {
  display: flex;
  align-items: center;
}

.header-links span {
  margin-right: 15px;
  margin-left: 0;
}

.header-links a {
  color: white;
  text-decoration: none;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  transition: all var(--transition-speed) var(--transition-easing);
  border-radius: 0;
  background-color: var(--farbe-dorsten-andgrau);
  padding: 0 5px;
  font-size: 16px;
}

.header-links a:hover {
  opacity: 1;
  color: white;
  background-size: auto;
}

/* Farbige Quadrate */
.color-squares {
  display: flex;
  align-items: center;
}

.color-square {
  width: 40px;
  height: 40px;
  margin-left: 15px;
  display: block;
}

/* Footer-Squares um 120px nach rechts verschieben für besseres CI-Alignment (nur Desktop) */
@media (min-width: 993px) {
  .footer-squares {
    margin-left: 120px;
  }
}

.color-square.green {
  background-color: #80b022;;
}

.color-square.blue {
  background-color: #007dbf;;
}

.color-square.gray {
  background-color: #575756;
}

/* Hauptheader mit Logo und Navigation */
#masthead.site-header {
  width: 100%;
  position: relative;
  z-index: 1000;
  max-width: 100%;
  padding: 0;
  box-sizing: border-box;
}

.site-header .container {
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--abstand-lg);
}

.site-header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  width: 100%;
  transition: all 0.3s ease;
}

/* Logo */
.site-branding {
  order: 2;
  margin: 0;
  padding: 0;
  margin-left: auto;
  z-index: 1001;
}

.custom-logo-link, 
.default-logo-link {
  display: block;
  margin: 0;
}

.custom-logo, 
.default-logo {
  display: block;
  margin: 0;
  margin-top: -46px;
}

/* Navigation */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0.5rem var(--abstand-lg);
}

.main-navigation {
  order: 1;
  margin-right: auto;
  margin-left: 0;
  padding-left: 0;
  z-index: 1001;
}

#site-navigation {
  flex-grow: 1;
  display: flex;
  justify-content: flex-start;
}

/* WordPress-Menü Stil */
#primary-menu,
.nav-links {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: 1rem;
  position: relative;
  z-index: 1001;
}

/* Kein linker Abstand beim ersten Hauptmenüpunkt */
#primary-menu > li:first-child > a {
  padding-left: 0 !important;
}

/* Menü-Items */
.navigation-main .navigation > li > a,
#site-navigation .menu > li > a,
#primary-menu > li > a {
  padding: .7rem 1rem 2rem 1rem;
  font-weight: 400;
  font-size: 1.15em;
  text-transform: uppercase;
  display: block;
  color: #111;
  line-height: 1.25;
  position: relative;
  text-decoration: none;
  outline: none;
  border: none;
}

.navigation-main .navigation li a,
#site-navigation .menu li a,
#primary-menu li a {
  position: relative;
  text-decoration: none;
  outline: none;
  border: none;
}

/* Hauptmenü: Erste Ebene */
#primary-menu > li > a {
  font-weight: 700;
  transition: color var(--transition-speed);
  text-transform: uppercase;
  color: #333;
}

/* Untermenüs */
#primary-menu li li a {
  text-transform: none;
}

/* Hover- und Aktiv-Zustände */
.navigation-main .navigation li > a:hover, 
.navigation-main .navigation li.navigation-item--state-active > a,
#site-navigation .menu li > a:hover,
#site-navigation .menu li.current-menu-item > a,
#site-navigation .menu li.current-page-ancestor > a,
#primary-menu li > a:hover,
#primary-menu li.current-menu-item > a,
#primary-menu li.current-page-ancestor > a,
#primary-menu a:hover {
  color: var(--farbe-dorsten-gruen);
}

/* --- Desktop: Hauptmenü unten bündig ausrichten, damit eine saubere Grundlinie entsteht --- */
@media (min-width: 992px) {
  /* Li-Items als Flex-Container, sodass der Link unten sitzt,
     auch wenn ein anderer Eintrag zweizeilig ist */
  #primary-menu > li {
    display: flex;
    align-items: flex-end; /* unten bündig */
  }
}

.nav-links li a {
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: color var(--transition-speed);
}

.nav-links li a:hover {
  color: #007ACC;
}

/* Logo-Reihenfolge */
.logo {
  order: 2;
}

.logo img {
  height: 40px;
}

/* Dropdown-Menüs */
.main-navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-navigation li {
  position: relative;
}

/* Hauptmenüpunkte mit Untermenüs - Pfeil-Icon entfernt */
.main-navigation li.menu-item-has-children > a::after {
  content: '';
}

/* Untermenü-Level-2 und höher */
/* Desktop: Wird durch mega-menu.css gesteuert */
@media (max-width: 991px) {
.main-navigation ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  min-width: 250px;
  background-color: #fff;
  box-shadow: 0 3px 5px rgba(0,0,0,0.2);
  visibility: hidden;
  opacity: 0;
  transform: translateY(10px);
  transition: all var(--transition-speed) ease-in-out;
  border-top: 20px solid var(--farbe-dorsten-gruen);
}
}

/* Untermenü Level-3 und höher */
@media (max-width: 991px) {
.main-navigation ul ul ul {
  top: 0;
  left: 100%;
  margin-top: -1px;
  border-top: none;
  border-left: 20px solid var(--farbe-dorsten-gruen);
}
}

/* Untermenü-Level-2 Items */
.main-navigation ul ul li a {
  padding: 12px 15px;
  display: block;
  font-size: 0.95em;
  line-height: 1.2;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  color: var(--farbe-dorsten-grau);
  text-decoration: none;
  white-space: normal;
}

/* Untermenü-Level-2 anzeigen bei Hover */
/* Desktop: Wird durch mega-menu.css / JS gesteuert */
@media (max-width: 991px) {
.main-navigation li:hover > ul {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
}
}

/* Untermenü-Level-2 Items mit weiteren Untermenüs - Pfeil-Icon entfernt */
.main-navigation ul ul li.menu-item-has-children > a::after {
  content: '';
  position: absolute;
  right: 15px;
}

/* Menü-Trennzeichen für AND-Symbol im Menütitel */
.nav-and {
  color: inherit; /* neutrale Standard-Definition für andere Kontexte */
  font-weight: inherit;
  display: inline-block;
  margin: 0 2px;
}

/* Style für das &-Kästchen nur im Hauptmenü auf Ebene 1 */
.main-navigation .navigation-item--level-1 > .navigation-link .nav-and,
#primary-menu > li > a .nav-and {
  vertical-align: middle;
  /* Standard: hellgrauer Hintergrund, neutrale Textfarbe */
  background: var(--farbe-dorsten-andgrau, #70706F);
  color: #fff; /* & immer weiß */
  font-weight: 500; /* etwas dicker */
  font-size: 0.85em; /* etwas kleiner als Fließtext */
  /* Quadratische Box ohne Abrundung */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1em;
  height: 1.1em;
  line-height: 1;
  padding: 0;         /* keine Innenabstände für exakte Quadrat-Form */
  border-radius: 0;   /* keine abgerundeten Ecken */
  margin: 0 0.25em 0 0;
  transition: background-color .2s ease, color .2s ease;
}

/* Hover/Focus: &-Kästchen in Webseitenfarbe einfärben */
.main-navigation .navigation-item--level-1 > .navigation-link:hover .nav-and,
.main-navigation .navigation-item--level-1:hover > .navigation-link .nav-and,
#primary-menu > li > a:hover .nav-and,
#primary-menu > li:hover > a .nav-and,
.main-navigation .navigation-item--level-1 > .navigation-link:focus .nav-and,
.main-navigation .navigation-item--level-1 > .navigation-link:focus-visible .nav-and,
#primary-menu > li > a:focus .nav-and,
#primary-menu > li > a:focus-visible .nav-and {
  background: var(--farbe-dorsten-gruen, #80B022);
  color: #fff;
}

/* Zeilenumbruch vor dem & auf Ebene 1 etwas Luft geben */
.main-navigation .navigation-item--level-1 > .navigation-link br + .nav-and,
#primary-menu > li > a br + .nav-and {
  margin-left: 0; /* kein linker Abstand direkt nach br */
}

/* Meganavigation – wird jetzt über mega-menu.css gesteuert */

/* Mobile Navigation Anpassungen */
@media (max-width: 991px) {
  .main-navigation ul ul {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    display: none;
    width: 100%;
    padding-left: 15px;
    background-color: rgba(0,0,0,0.02);
    border-top: none;
    border-left: 5px solid var(--farbe-dorsten-gruen);
  }
  
  .main-navigation li.menu-item-has-children > a {
    padding-right: 15px;
    position: relative;
  }
  
  .main-navigation li.menu-item-has-children > a::after {
    content: '';
  }
  
  .menu-toggle {
    display: none;
  }
  
  .main-navigation .menu {
    display: none;
  }
  
  .main-navigation.toggled .menu {
    display: block;
  }
}

/* Desktop Navigation - nur für größere Bildschirme */
@media (min-width: 992px) {
  /* Burger Menu Button verstecken */
  .mobile-menu-toggle {
    display: none !important;
  }
  
  /* Mobile Navigation verstecken */
  .mobile-navigation,
  .mobile-navigation-overlay {
    display: none !important;
  }
  
  /* Desktop Header Layout */
  .site-header-inner {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    grid-template-areas: unset !important;
    grid-template-columns: unset !important;
    grid-template-rows: unset !important;
    gap: unset !important;
  }
  
  /* Logo Position Desktop */
  .site-branding {
    order: 2 !important;
    margin-left: auto !important;
    grid-area: unset !important;
    justify-self: unset !important;
  }
  
  /* Navigation Position Desktop */
  .main-navigation {
    display: block !important;
    order: 1 !important;
    margin-right: auto !important;
    margin-left: 0 !important;
  }
  
  /* Header-Links Desktop */
  .header-links .accessibility {
    grid-area: unset !important;
    justify-self: unset !important;
  }
  
  /* Quadrate Desktop */
  .color-squares {
    grid-area: unset !important;
    justify-self: unset !important;
  }
}

/* Tablet Anpassungen */
@media (min-width: 768px) and (max-width: 991px) {  .mobile-navigation {
    width: min(400px, 70vw);
  }
  
  .site-header-inner {
    padding: 20px 0;
  }
  
  .mobile-menu-toggle {
    width: 55px;
    height: 55px;
    font-size: 22px;
  }
  
  .mobile-nav-header {
    padding: 35px 30px 30px;
  }
  
  .mobile-nav-brand {
    font-size: 1.6rem;
  }
}

/* Sehr kleine Bildschirme */
@media (max-width: 480px) {  .mobile-navigation {
    width: 100%;
    right: -100%;
  }
  
  .mobile-nav-header {
    padding: 25px 20px 20px;
  }
  
  .mobile-nav-brand {
    font-size: 1.3rem;
  }
  
  .mobile-nav-close {
    top: 20px;
    right: 20px;
    width: 35px;
    height: 35px;
    font-size: 18px;
  }
  
  .mobile-navigation .menu-item > a,
  .mobile-navigation .navigation-link {
    padding: 15px 20px;
    font-size: 1rem;
  }
  
  .mobile-navigation .toggle-submenu {
    width: 50px;
  }
  
  .mobile-navigation .sub-menu .menu-item > a,
  .mobile-navigation .sub-menu .navigation-link {
    padding: 12px 20px 12px 35px;
    font-size: 0.95rem;
  }
}

/* Sehr kleine Höhe (Landscape auf Phones) */
@media (max-height: 500px) {
  .mobile-nav-header {
    padding: 15px 25px 10px;
  }
  
  .mobile-nav-brand {
    font-size: 1.2rem;
  }
  
  .mobile-nav-subtitle {
    display: none;
  }
  
  .mobile-menu-container {
    height: calc(100vh - 60px);
  }
}

/*======================================
  5. HERO-BEREICH
======================================*/
.hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: var(--hero-height);
  min-height: 500px;
  background-size: cover;
  background-position: center;
  color: white;
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  z-index: 1;
}

/* Schwarzes Overlay */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Abrisskante */
.hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: var(--header-abrisskante-ratio, 5.2%);
  background-image: var(--header-abrisskante-image);
  background-position: var(--header-abrisskante-position, center calc(100% + 1px));
  background-repeat: no-repeat;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 2;
}

/* Hero-Inhalte */
.hero-content {
  position: relative;
  text-align: left;
  color: #fff;
  z-index: 3;
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--abstand-lg);
  justify-self: flex-start;
  margin-top: 50px;
}

/* Hero-Video */
.hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.hero-video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: none;
}

/* Hero-Hauptüberschrift als p-Element */
.hero-content p.hero-title {
  font-size: var(--hero-title-font-size, 6.5rem);
  font-weight: bold;
  text-shadow: 8px 8px 12px rgb(0 0 0 / 50%);
  line-height: 1;
  margin-left: -0.85rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: var(--abstand-sm);
  color: #fff;
}

/* Hero-Subheadline als h6-Element */
.hero-content h6.hero-subtitle {
  font-size: 3.00rem;
  font-weight: bold;
  text-shadow: 8px 8px 12px rgb(0 0 0 / 50%);
  line-height: 1;
  margin: 0 0 0 -0.25rem;
  color: #fff; /* Gleiche Farbe wie hero-title */
  letter-spacing: 2px; /* Gleicher Buchstabenabstand wie hero-title */
}

/* Unterseiten-Header */
.subpage-header {
  position: absolute; /* Absolut positioniert für Bild hinter Menü */
  top: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  height: var(--subpage-header-height-desktop); /* Desktop: 650px */
  min-height: 280px; /* Mindesthöhe damit Content immer sichtbar */
  background-size: cover !important;
  background-position: center !important;
  color: white;
  display: flex;
  align-items: center; /* Vertikal zentriert */
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  z-index: 1; /* Hinter dem Header-Wrapper */
  transition: height 0.3s ease;
}

/* Responsive Höhen für Unterseiten-Header - gestaffelt für fließende Übergänge */
@media screen and (max-width: 1400px) {
  .subpage-header {
    height: var(--subpage-header-height-laptop); /* Laptop: 550px */
  }
}

@media screen and (max-width: 1024px) {
  .subpage-header {
    height: var(--subpage-header-height-tablet); /* Tablet: 450px */
  }
}

@media screen and (max-width: 768px) {
  .subpage-header {
    height: var(--subpage-header-height-mobile); /* Mobil: 350px */
  }
}

@media screen and (max-width: 480px) {
  .subpage-header {
    height: var(--subpage-header-height-small); /* Klein: 300px */
  }
}

/* Schwarzes Overlay für Unterseiten-Header */
.subpage-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}

/* Abrisskante für Unterseiten-Header */
.subpage-header::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  padding-bottom: var(--header-abrisskante-ratio, 5.2%);
  background-image: var(--header-abrisskante-image);
  background-position: var(--header-abrisskante-position, center calc(100% + 1px));
  background-repeat: no-repeat;
  background-size: 100% auto;
  pointer-events: none;
  z-index: 2;
}

/* Hintergrundbilder im Unterseiten-Header immer vollständig anzeigen und richtig skalieren */
.subpage-header[style*="background-image"] {
  background-size: cover !important; /* Das Bild bedeckt den gesamten Bereich */
  background-position: center center !important; /* Zentriert das Bild */
  background-repeat: no-repeat !important;
  object-fit: cover !important; /* Zusätzliche Unterstützung für objektbasierte Bilder */
}

/* Wenn das Bild ein direktes Kind-Element ist (falls kein Hintergrundbild verwendet wird) */
.subpage-header > img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Unterseiten-Header-Inhalte */
.subpage-header-content {
  position: relative;
  text-align: left;
  color: #fff;
  z-index: 3;
  max-width: var(--container-width);
  width: 100%;
  margin: 0 auto;
  padding: 0 var(--abstand-lg);
  /* Leicht nach unten versetzt wegen header-wrapper Überlappung */
  padding-top: 80px;
}

/* Unterseiten-Titelstil */
.subpage-header-content .subpage-title {
  font-size: 4rem; /* Desktop Schriftgröße */
  font-weight: bold !important;
  text-shadow: 6px 6px 10px rgb(0 0 0 / 50%);
  line-height: 1.2 !important;
  margin: 0;
  margin-left: -0.3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: #fff !important;
  word-wrap: break-word;
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Responsive Schriftgrößen für Unterseiten-Titel */
@media screen and (max-width: 1400px) {
  .subpage-header-content {
    padding-top: 70px;
  }
  .subpage-header-content .subpage-title {
    font-size: 3.5rem;
  }
}

@media screen and (max-width: 1024px) {
  .subpage-header-content {
    padding-top: 60px;
  }
  .subpage-header-content .subpage-title {
    font-size: 3rem;
    letter-spacing: 1.5px;
  }
}

@media screen and (max-width: 768px) {
  .subpage-header-content {
    padding-top: 50px;
    padding-left: var(--abstand-md);
    padding-right: var(--abstand-md);
  }
  .subpage-header-content .subpage-title {
    font-size: 2.2rem;
    letter-spacing: 1px;
    margin-left: 0;
    text-shadow: 4px 4px 8px rgb(0 0 0 / 50%);
  }
}

@media screen and (max-width: 480px) {
  .subpage-header-content {
    padding-top: 40px;
  }
  .subpage-header-content .subpage-title {
    font-size: 1.8rem;
    letter-spacing: 0.5px;
    text-shadow: 3px 3px 6px rgb(0 0 0 / 50%);
  }
}

/* Responsive Anpassungen für Hero-Überschriften */
@media screen and (max-width: 1400px) {
  .hero-content p.hero-title {
    font-size: calc(var(--hero-title-font-size, 6.5rem) * 0.85);
  }
  
  .hero-content h6.hero-subtitle {
    font-size: 2.5rem;
  }
}

@media screen and (max-width: 1024px) {
  .hero-content p.hero-title {
    font-size: calc(var(--hero-title-font-size, 6.5rem) * 0.69);
    margin-left: -0.5rem;
  }
  
  .hero-content h6.hero-subtitle {
    font-size: 2.2rem;
    margin-left: -0.15rem;
  }
}

@media screen and (max-width: 768px) {
  .hero-content p.hero-title {
    font-size: calc(var(--hero-title-font-size, 6.5rem) * 0.54);
    margin-left: -0.4rem;
    text-shadow: 6px 6px 10px rgb(0 0 0 / 50%);
  }
  
  .hero-content h6.hero-subtitle {
    font-size: 1.8rem;
    margin-left: -0.1rem;
    text-shadow: 6px 6px 10px rgb(0 0 0 / 50%);
  }
}

@media screen and (max-width: 480px) {
  .hero-content p.hero-title {
    font-size: calc(var(--hero-title-font-size, 6.5rem) * 0.38);
    margin-left: -0.2rem;
    text-shadow: 4px 4px 8px rgb(0, 0, 0 / 50%);
  }
  
  .hero-content h6.hero-subtitle {
    font-size: 1.5rem;
    margin-left: 0;
    text-shadow: 4px 4px 8px rgb(0, 0, 0 / 50%);
  }
  
  .hero-content {
    margin-top: 40px;
  }
}

/*======================================
  6. HAUPTBEREICH
======================================*/
main {
  position: relative;
  z-index: 100;
  padding: var(--abstand-lg);
  padding-top: 0px !important;
  max-width: var(--container-width);
  background-color: #fff;
  flex: 1 0 auto; /* Lässt den Inhaltsbereich wachsen, um verfügbaren Platz zu füllen */
}

/* Anpassung für Hauptbereich basierend auf Seitentyp */
.home main {
    margin-top: calc(var(--hero-height) - 15rem); /* Berücksichtigt header-wrapper padding-bottom */
    padding-top: 2rem; /* Kleiner Abstand für bessere Optik */
}

/* Responsive Anpassungen für Startseite */
@media screen and (max-width: 1024px) {
    .home main {
        padding-top: 1.5rem;
    }
}

@media screen and (max-width: 768px) {
    .home main {
        padding-top: 1rem;
    }
}

/* Anpassung für Unterseiten - nach dem header-content-spacer */
body:not(.home) main {
    margin-top: 0;
    padding-top: var(--abstand-lg);
}

.content h2 {
  margin-bottom: var(--abstand-sm);
  font-size: var(--font-size-xxl);
}

.content p {
  line-height: 1.5;
  margin-bottom: var(--abstand-sm);
}

/* Seitenpaginierung für mehrseitige Beiträge und Seiten */
.page-links {
  clear: both;
  margin: 2em 0;
  padding: 1.5em;
  background-color: var(--farbe-dorsten-hellgrau, #f5f5f5);
  border: 1px solid var(--farbe-dorsten-sehrhellgrau, #e0e0e0);
  border-radius: 8px;
  text-align: center;
  font-weight: 600;
  color: var(--farbe-dorsten-grau, #575756);
}

.page-links .page-number {
  display: inline-block;
  margin: 0 0.3em;
  padding: 0.5em 1em;
  background-color: var(--farbe-dorsten-gruen, #80B022);
  color: white;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-weight: 500;
}

.page-links .page-number:hover {
  background-color: var(--farbe-dorsten-blau, #007DBF);
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.page-links span.page-number {
  background-color: var(--farbe-dorsten-grau, #575756);
  cursor: default;
}

.page-links span.page-number:hover {
  background-color: var(--farbe-dorsten-grau, #575756);
  transform: none;
  box-shadow: none;
}

/*======================================
  7. WORDPRESS-STANDARD-KLASSEN
======================================*/
.wp-caption {
  border: 1px solid #B1A79B;
  text-align: center;
  padding-top: 10px;
  margin: 10px;
  border-radius: 3px;
  background-repeat: no-repeat;
  background-position: center bottom;
}

.wp-caption img {
  margin: 0;
  padding: 0;
  border: 0 none;
}

.wp-caption p.wp-caption-text {
  font-size: 1em;
  line-height: 17px;
  font-weight: bold;
  padding: 8px;
  margin: 0;
}

/* Ausrichtungsklassen */
img.alignright, .alignright { 
  float: right; 
  margin: 0 0 1em 1em; 
}

img.alignleft, .alignleft { 
  float: left; 
  margin: 0 1em 1em 0; 
}

img.aligncenter, .aligncenter { 
  display: block; 
  margin-left: auto; 
  margin-right: auto; 
}

/*======================================
  8. SUCHFUNKTIONEN
======================================*/
/* Such-Icon */
.search-toggle {
  background-color: var(--farbe-dorsten-gruen);
  border: none;
  cursor: pointer;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  transition: all var(--transition-speed) var(--transition-easing);
  border-radius: 0;
  order: 3;
}

/* Suchleiste */
.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search-unit {
  display: flex;
  align-items: center;
  height: 40px;
  transition: width var(--transition-speed) var(--transition-easing);
  overflow: hidden;
}

#search-form {
  width: 0;
  overflow: hidden;
  transition: width 0.25s ease, opacity 0.25s ease;
  background-color: white;
  height: 40px;
  display: flex;
  opacity: 0;
  position: relative;
  left: auto;
  transform-origin: left;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 100;
}

#search-form.show {
  display: block;
}

#search-form.active {
  display: block;
  width: 260px;
  opacity: 1;
  order: 1;
}

.search-content {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  position: relative;
}

.search-input {
  flex-grow: 1;
  background-color: var(--farbe-dorsten-hellgruen-bg, #f2f6ea);
  border: none;
  padding: 0 10px;
  height: 100%;
  font-size: 16px;
  box-sizing: border-box;
  order: 1;
}

.search-input:focus {
  outline: none;
  border-color: rgba(128, 176, 34, 0.5);
}

/* Such-Buttons */
.search-submit {
  background-color: var(--farbe-dorsten-gruen);
  border: none;
  cursor: pointer;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
}

.search-close {
  background-color: var(--farbe-dorsten-grau);
  border: none;
  cursor: pointer;
  padding: 0;
  color: white;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  order: 2;
}

.search-error {
  display: none;
}

/* Header-Links für die Suche */
.header-links .search {
  display: flex;
  align-items: center;
}

/* Suchergebnis-Paginierung */
.search-results .page-numbers {
  padding: 5px 10px;
  margin: 0 2px;
  border: 1px solid #ddd;
}

.search-results .current {
  background-color: var(--farbe-dorsten-gruen);
  color: white;
  border-color: var(--farbe-dorsten-gruen);
}

.search-results .before-current,
.search-results .after-current {
  background-color: #f9f9f9;
}

/*======================================
  9. BARRIEREFREIHEIT UND ANZEIGEMODI
======================================*/
/* Screenreader-Text */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  word-wrap: normal !important;
}

/* Dark Mode */
body.dark-mode {
  background-color: #222;
  color: #f0f0f0;
}

body.dark-mode .site-header {
  background-color: #333;
}

body.dark-mode #primary-menu > li > a,
body.dark-mode #primary-menu li li a {
  color: #f0f0f0;
}

body.dark-mode .custom-logo-link {
  filter: brightness(1.5);
}

/* Hoher Kontrast → ausgelagert nach assets/css/high-contrast.css */

/*======================================
  10. 404 PAGE STYLING
======================================*/
.error-404-container {
    background: #ffffff;
    position: relative;
    z-index: 100;
    margin-top: calc(var(--hero-height) - 50px);
}

.error-404-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    background-color: #fff;
    border-radius: 8px;
}

.error-message {
    text-align: center;
    margin-bottom: 30px;
}

.error-message h1 {
    font-size: 100px;
    font-weight: 800;
    margin: 0;
    color: var(--farbe-dorsten-gruen);
    line-height: 1;
    letter-spacing: -3px;
}

.error-message h2 {
    font-size: 32px;
    color: var(--farbe-dorsten-grau);
    margin-bottom: 15px;
}

.error-message p.lead {
    font-size: 18px;
    color: var(--farbe-dorsten-grau);
}

.error-message p {
    font-size: 16px;
    color: var(--farbe-dorsten-grau);
}

.error-actions {
    margin-bottom: 25px;
    text-align: center;
}

.back-to-home {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.back-to-home .btn {
    min-width: 200px;
    margin: 5px;
}

@media (min-width: 768px) {
    .back-to-home {
        flex-direction: row;
        justify-content: center;
    }
}

.helpful-links {
    margin-bottom: 30px;
}

.helpful-links h3 {
    font-size: 20px;
    color: var(--farbe-dorsten-grau);
    text-align: center;
    margin-bottom: 20px;
    position: relative;
}

.helpful-links h3:after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    background: var(--farbe-dorsten-gruen);
    margin: 15px auto;
}

.helpful-links h4 {
    font-size: 18px;
    color: var(--farbe-dorsten-grau);
    margin-bottom: 15px;
}

ul.quick-links, ul.recent-posts {
    padding-left: 0;
    list-style: none;
}

ul.quick-links li, ul.recent-posts li {
    margin-bottom: 10px;
    padding-left: 20px;
    position: relative;
}

ul.quick-links li:before, ul.recent-posts li:before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--farbe-dorsten-gruen);
}

ul.quick-links li a, ul.recent-posts li a {
    color: var(--farbe-dorsten-gruen);
    text-decoration: none;
    transition: all var(--transition-speed);
}

ul.quick-links li a:hover, ul.recent-posts li a:hover {
    color: var(--farbe-dorsten-blau);
    text-decoration: underline;
}

.contact-suggestion {
    text-align: center;
    border-top: 1px solid #e9ecef;
    padding-top: 15px;
    margin-top: 15px;
    font-size: 14px;
    color: var(--farbe-dorsten-grau);
}

.contact-suggestion a {
    color: var(--farbe-dorsten-gruen);
    font-weight: 500;
    text-decoration: none;
}

.contact-suggestion a:hover {
    color: var(--farbe-dorsten-blau);
    text-decoration: underline;
}

/* Responsive Adjustments */
@media (max-width: 767px) {
    .error-message h1 {
        font-size: 80px;
    }
    
    .error-message h2 {
        font-size: 24px;
    }
    
    .action-box {
        margin-bottom: 20px;
    }
}

/*======================================
  11. FOOTER STYLING
======================================*/
.site-footer {
    background-color: #706f6f;
    width: 100%;
    max-width: 100%;
    color: #ffffff;
    padding: 0 0 var(--abstand-lg) 0;
    margin-top: var(--abstand-xl);
    box-sizing: border-box;
    position: relative;
    flex-shrink: 0; /* Verhindert, dass der Footer schrumpft */
    margin-top: 0; /* Entfernt den oberen Abstand, damit der Footer direkt am Ende des Contents ist */
}

/* Hintergrund mit Wappen */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  background-image: url('assets/images/logo/wappen_dorsten_weiss.svg');
  background-repeat: no-repeat !important;
  background-position: 20% 20% !important;
  background-size: 450px;
  opacity: .15;
  pointer-events: none;
  display: block;
}

.site-footer .container {
    max-width: var(--container-width);
    margin: 0 auto;
    width: 100%;
    padding: 0 var(--abstand-lg);
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Neuer Footer-Widgets-Bereich */
.footer-widgets-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.footer-column {
    flex: 1;
    padding: 60px 15px 0 15px;
    min-width: 200px;
    margin-bottom: var(--abstand-sm);
    position: relative;
}

/* Erste Spalte: kein padding-left für Bündigkeit mit Container */
.footer-column:first-child {
    padding-left: 0;
}

.footer-widget {
    margin-bottom: 1.5rem;
}

.widget-title {
    color: #ffffff;
    font-size: var(--font-size-lg);
    font-weight: 600;
    padding-bottom: 0.5rem;
    display: inline-block;
    position: relative;
    border-bottom: none;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.footer-column::before {
    content: "";
    position: absolute;
    top: 0;
    left: 15px;
    width: 40px;
    height: 40px;
    background-color: var(--farbe-dorsten-sehr-hellgrau) !important;
    display: block !important;
    z-index: 1;
}

/* Erste Spalte hat kein padding-left, also Quadrat bei left: 0 */
.footer-column:first-child::before {
    left: 0;
}

/* Logo-Spalte hat KEIN Quadrat und kein padding-right */
.footer-column.footer-logo-section {
    padding-top: 0;
    padding-right: 0;
}

.footer-column.footer-logo-section::before {
    display: none !important;
}

/* Footer-Widget ohne extra Padding, da es jetzt auf der Column ist */
.footer-widget {
    position: relative;
}

/* Quadrate auf Überschriften entfernen, da sie jetzt auf dem Container sind */
.footer-widget h1,
.footer-widget h2,
.footer-widget h3,
.footer-widget h4,
.footer-widget h5,
.footer-widget h6 {
    position: relative;
    padding-top: 0;
}

/* Entferne die ::before Elemente von Überschriften */
.footer-widget h1::before,
.footer-widget h2::before,
.footer-widget h3::before,
.footer-widget h4::before,
.footer-widget h5::before,
.footer-widget h6::before {
    display: none !important;
}

/* Zusätzliche Sicherstellung für WordPress Standard-Widgets */
.footer-widget .widget-title,
.footer-widget .widgettitle,
.site-footer .widget-title,
.site-footer .widgettitle {
    position: relative;
    padding-top: 0;
    color: #ffffff !important;
    font-weight: 600;
    text-transform: uppercase;
    border-bottom: none;
    margin-bottom: 1rem;
}

/* Entferne ::before Elemente von Widget-Titeln, da Quadrat jetzt auf Container ist */
.footer-widget .widget-title::before,
.footer-widget .widgettitle::before,
.site-footer .widget-title::before,
.site-footer .widgettitle::before {
    display: none !important;
}

/* Logo im Footer in Weiß darstellen (schwarze SVG invertieren) */
.site-footer .footer-logo-img {
  /* macht Schwarztöne weiß, erhält Transparenz */
  filter: brightness(0) invert(1);
  -webkit-filter: brightness(0) invert(1);
  display: inline-block;
  max-width: 100%;
  height: auto;
}

/* Zusätzliches Footer-Logo Styles */
.footer-additional-logo {
  margin-top: var(--abstand-md, 1.5rem);
  display: flex;
  justify-content: flex-start;
}

.footer-additional-logo-img {
  max-width: 150px;
  height: auto;
  display: block;
}

.footer-additional-logo-link {
  display: inline-block;
  transition: opacity 0.3s ease;
}

.footer-additional-logo-link:hover {
  opacity: 0.8;
}

/* Spezielle Unterstützung für Customizer-Widget-Bearbeitung */
.customize-partial-edit-shortcut-footer-1 .widget-title::before,
.customize-partial-edit-shortcut-footer-2 .widget-title::before,
.customize-partial-edit-shortcut-footer-3 .widget-title::before {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Konsistente Farben für Footer-Quadrat auf Column */
.footer-column::before {
    background-color: var(--farbe-dorsten-sehr-hellgrau) !important;
}

/* Responsive Anpassungen für Footer */
@media (max-width: 992px) {
    .footer-column {
        flex: 0 0 50%;
        max-width: 50%;
    }
    
    .footer-logo-section {
        flex: 0 0 50%;
        max-width: 50%;
        align-items: flex-start;
        margin-top: var(--abstand-lg);
    }
}

@media (max-width: 768px) {
    .footer-widgets-row {
        flex-direction: column;
        gap: 0;
    }

    /* Weniger Seitenabstand auf Mobile */
    .site-footer .container {
        padding: 0 20px;
    }

    /* Weniger unterer Abstand am Footer */
    .site-footer {
        padding-bottom: 24px;
    }

    .footer-column {
        flex: 0 0 100%;
        max-width: 100%;
        min-width: 0;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 1.25rem;
    }

    /* Erste Spalte bekommt Abstand zur Oberkante */
    .footer-column:first-child {
        padding-top: 40px;
    }

    /* Letzte Content-Spalte braucht weniger Abstand nach unten */
    .footer-column:last-of-type:not(.footer-logo-section) {
        margin-bottom: 0.75rem;
    }
    
    /* Logo-Bereich: Quadrate ausblenden, nur Logo zeigen */
    .footer-logo-section {
        flex: 0 0 100%;
        max-width: 100%;
        align-items: flex-start;
        text-align: left;
        padding-left: 0;
        margin-top: 1.5rem;
    }

    /* Quadrate auf Mobile: oben rechts im Footer positionieren */
    .footer-logo-section {
        position: static;
    }

    .footer-widgets-row {
        position: relative;
    }

    .footer-logo-section .footer-squares {
        position: absolute;
        top: 0;
        right: 0;
        margin: 0;
    }

    .footer-logo-section .footer-squares .color-square {
        width: 24px;
        height: 24px;
        margin-left: 4px;
    }

    .footer-logo-section .footer-squares .color-square:first-child {
        margin-left: 0;
    }
    
    .footer-logo {
        max-width: 160px;
        margin: 0;
    }

    /* Schriftgröße im Footer auf Mobile vergrößern */
    .site-footer,
    .site-footer .footer-column,
    .site-footer .footer-column p,
    .site-footer .footer-column td,
    .site-footer .footer-column th,
    .site-footer .footer-column li,
    .site-footer .footer-column a,
    .site-footer .footer-column span {
        font-size: 16px !important;
    }
    
    .footer-additional-logo {
        justify-content: flex-start;
    }
    
    .footer-content {
        flex-direction: column;
        gap: var(--abstand-sm);
        text-align: left;
    }
    
    #footer-menu {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    /* Widget-Titel auf Mobile */
    .site-footer .widget-title,
    .site-footer .widgettitle {
        margin-bottom: 0.5rem;
    }
}

/* Mobile responsive: Quadrate auf mobilen Geräten ausblenden */
@media (max-width: 768px) {
    .footer-column::before {
        display: none !important;
    }

    .footer-column {
        padding-top: 0;
    }

    /* Erste Spalte: Abstand zur Footer-Oberkante */
    .footer-column:first-child {
        padding-top: 40px;
    }
    
    /* Mobile: Padding-top für Titel zurücksetzen */
    .footer-widget .widget-title,
    .footer-widget .widgettitle,
    .footer-widget h1,
    .footer-widget h2,
    .footer-widget h3,
    .footer-widget h4,
    .footer-widget h5,
    .footer-widget h6 {
        padding-top: 0 !important;
    }
}

/* Footer-Column Schriftfarbe sicherstellen */
.footer-column,
.footer-column *,
.footer-column p,
.footer-column span,
.footer-column div,
.footer-column ul,
.footer-column li {
    color: #ffffff !important;
}

/* Footer-Column Links */
.footer-column a {
    color: #ffffff !important;
    text-decoration: none;
}

.footer-column a:hover {
    color: #ffffff !important;
}

/* Footer Listen ohne Bullets und Links in Großbuchstaben + fett */
.footer-column ul,
.footer-widget ul {
    list-style: none !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.footer-column ul li,
.footer-widget ul li {
    padding-left: 0 !important;
    margin-left: 0 !important;
}

.footer-column ul li::before,
.footer-widget ul li::before {
    display: none !important;
    content: none !important;
}

.footer-column ul a,
.footer-widget ul a {
    text-transform: uppercase !important;
    font-weight: 600 !important;
    display: inline-block;
    padding: 4px 0;
    text-decoration: none;
    position: relative;
}

.footer-column ul a:hover,
.footer-widget ul a:hover {
    color: #ffffff !important;
    text-decoration: none;
    background: none !important;
    background-image: none !important;
    background-size: 0 !important;
}

.footer-column ul a:hover::after,
.footer-widget ul a:hover::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #ffffff;
}

/* Footer Tabellen Styling - schlicht ohne Rahmen wie im Beispiel */
.footer-column table,
.footer-column .wp-block-table table,
.footer-widget table,
.footer-widget .wp-block-table table {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    background: transparent !important;
}

.footer-column table th,
.footer-column .wp-block-table th,
.footer-widget table th,
.footer-widget .wp-block-table th {
    background: transparent !important;
    border: none !important;
    padding: 2px 15px 2px 0 !important;
    text-align: left !important;
    color: #ffffff !important;
    font-weight: 400 !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

.footer-column table td,
.footer-column .wp-block-table td,
.footer-widget table td,
.footer-widget .wp-block-table td {
    background: transparent !important;
    border: none !important;
    padding: 2px 0 !important;
    color: #ffffff !important;
    line-height: 1.3 !important;
}

.footer-column table tbody tr,
.footer-column .wp-block-table tbody tr,
.footer-widget table tbody tr,
.footer-widget .wp-block-table tbody tr {
    border: none !important;
    background: transparent !important;
}

.footer-column .wp-block-table,
.footer-widget .wp-block-table {
    margin: 0 !important;
}

.footer-column .wp-block-table figure,
.footer-widget .wp-block-table figure {
    margin: 0 !important;
}

/*======================================
  12. POSTS GRID
======================================*/
.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    max-width: var(--container-width);
    margin: 0 auto;
    justify-items: start;
}

.pageteaser-teaser {
    position: relative;
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    text-align: left;
}

.pageteaser-teaser .image {
    margin-bottom: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.pageteaser-text-content {
    margin-top: -6px;
    min-height: 265px;
    max-height: 265px;
}

.pageteaser-text-content h3 {
  margin-top: 20px;
  margin-bottom: 15px;
  padding: 0 .5rem;
}

.pageteaser-text-content p {
  position: relative;
  overflow: visible;
  white-space: normal;
  padding: 0 .5rem;
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
}

.pageteaser-text-content p a {
    color: var(--farbe-dorsten-gruen);
    font-weight: bold;
    text-decoration: none;
}

.pageteaser-text-content p a:hover {
    text-decoration: underline;
}

.pageteaser-teaser .image img {
    width: 100%;
    height: 245px;
    object-fit: cover;
    transition: all 0.25s ease;
    position: relative;
    z-index: 1;
}

.pageteaser-teaser .image:hover img {
    transform: scale(1.05);
}

.pageteaser-teaser ul {
    list-style: none;
    margin: 0;
    background-color: var(--farbe-dorsten-gruen);
    text-align: right;
    position: relative;
    z-index: 2;
    padding: 5px .5rem;
    background-color: var(--farbe-dorsten-gruen);
}

/*======================================
  13. KOMMENTARE STYLING
======================================*/
.comments-area {
    margin-top: 4rem;
    max-width: 900px;
}

.comments-title {
    font-size: 1.8rem;
    margin-bottom: var(--abstand-lg);
    position: relative;
    color: var(--farbe-dorsten-grau);
    font-weight: 600;
}

.comments-title::after {
    content: "";
    display: block;
    width: 50px;
    height: 3px;
    margin-top: 10px;
    background-color: var(--farbe-dorsten-gruen);
}

.comment-list-container {
    max-height: 600px;
    overflow-y: auto;
    margin-bottom: var(--abstand-lg);
    padding-right: 15px;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comment-list .children {
    list-style: none;
    padding-left: 2.5rem;
    margin-top: var(--abstand-sm);
    position: relative;
}

.comment-list .children::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: rgba(128, 176, 34, 0.2);
}

.comment {
    margin-bottom: var(--abstand-lg);
}

.comment-body {
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: relative;
}

/* Besondere Markierung für Autor-Kommentare */
.bypostauthor > .comment-body {
    border-left: 4px solid var(--farbe-dorsten-gruen);
    background-color: rgba(128, 176, 34, 0.05);
}

.comment-meta {
    display: flex;
    flex-direction: column;
    margin-bottom: 15px;
}

.comment-author {
    display: flex;
    align-items: center;
    margin-bottom: 5px;
}

.comment-author img {
    border-radius: 50%;
    margin-right: 15px;
    border: 2px solid var(--farbe-dorsten-gruen);
}

.comment-metadata {
    display: flex;
    flex-direction: column;
}

.comment-metadata h5.fn {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--farbe-dorsten-grau);
    display: flex;
    align-items: center;
}

.author-badge {
    background-color: var(--farbe-dorsten-gruen);
    color: white;
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
    font-weight: normal;
    text-transform: uppercase;
}

.comment-metadata time {
    font-size: 0.85rem;
    color: var(--farbe-dorsten-hellgrau);
    margin-bottom: 5px;
}

.comment-awaiting-moderation {
    background-color: #f8d7da;
    color: #721c24;
    padding: 8px 12px;
    border-radius: 4px;
    margin-top: 10px;
    font-size: 0.9rem;
}

.comment-content {
    margin-bottom: 15px;
    line-height: 1.6;
}

.comment-content p:last-child {
    margin-bottom: 0;
}

/* Antwort-Link */
.reply-link {
    display: inline-block;
}

.comment-reply-link {
    display: inline-block;
    padding: 5px 15px;
    background-color: rgba(128, 176, 34, 0.1);
    border-radius: 4px;
    color: var(--farbe-dorsten-gruen);
    font-size: 0.9rem;
    font-weight: 600;
    transition: all var(--transition-speed) ease;
}

.comment-reply-link:hover {
    background-color: var(--farbe-dorsten-gruen);
    color: white;
    text-decoration: none;
}

.comment-reply-link i {
    margin-right: 5px;
}

/* Kommentar-Navigation */
.comment-navigation {
    display: flex;
    justify-content: space-between;
    margin: var(--abstand-sm) 0 var(--abstand-lg);
}

.comment-navigation .nav-previous,
.comment-navigation .nav-next {
    background-color: #f1f1f1;
    padding: 5px 15px;
    border-radius: 4px;
}

.comment-navigation a {
    color: var(--farbe-dorsten-gruen);
    font-size: 0.9rem;
}

/* Kommentar-Formular */
.comment-respond {
    background-color: #f9f9f9;
    padding: var(--abstand-lg);
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.05);
    margin-bottom: var(--abstand-xl);
}

.comment-reply-title {
    font-size: 1.5rem;
    margin-bottom: 1.5rem;
    color: var(--farbe-dorsten-grau);
    position: relative;
    padding-bottom: 10px;
}

.comment-reply-title::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: var(--farbe-dorsten-gruen);
}

#cancel-comment-reply-link {
    font-size: 0.8rem;
    color: #dc3545;
    margin-left: 15px;
    font-weight: normal;
    text-transform: none;
}

.comment-notes {
    margin-bottom: 20px;
    font-size: 0.9rem;
    color: var(--farbe-dorsten-hellgrau);
}

.comment-form-row {
    display: block;
    margin: 0;
}

.comment-form-field {
    margin-bottom: 20px;
    padding: 0;
    width: 100%;
}

.comment-form-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
    color: var(--farbe-dorsten-grau);
}

.comment-form-field input,
.comment-form-field textarea {
    width: 100%;
    padding: 10px 15px;
    border: 1px solid #ddd;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color var(--transition-speed);
}

.comment-form-field input:focus,
.comment-form-field textarea:focus {
    border-color: var(--farbe-dorsten-gruen);
    outline: none;
}

.required {
    color: #dc3545;
}

.comment-form-cookies-consent {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.comment-form-cookies-consent input {
    margin-right: 10px;
    margin-top: 5px;
    width: auto;
}

.form-submit {
    margin-top: 10px;
}

.comment-submit {
    background-color: var(--farbe-dorsten-gruen);
    color: white;
    padding: 10px 25px;
    border: none;
    border-radius: 4px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color var(--transition-speed);
}

.comment-submit:hover {
    background-color: #6a9219; /* Dunkleres Grün beim Hover */
}

.comment-submit i {
    margin-right: 8px;
}

/* Keine Kommentare erlaubt */
.no-comments {
    padding: 15px;
    margin-bottom: var(--abstand-lg);
    text-align: center;
    border-radius: 4px;
    background-color: #f8f9fa;
    border-left: 4px solid #17a2b8;
}

/* Responsives Design */
@media (max-width: 767px) {
    .comments-area {
        padding-left: 10px;
        padding-right: 10px;
    }
    
    .comment-list .children {
        padding-left: var(--abstand-sm);
    }
    
    .comment-body {
        padding: var(--abstand-sm);
    }
    
    .comment-author img {
        width: 40px;
        height: 40px;
    }
    
    .comment-respond {
        padding: 1.5rem;
    }
}

.centered-uppercase {
    text-align: center;
    text-transform: uppercase;
}

/*======================================
  ELEMENTOR VOLLBREITE ANPASSUNGEN
======================================*/
.elementor-full-width-container {
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin-top: calc(var(--hero-height) - 50px);
  background-color: #fff;
  position: relative;
  z-index: 100;
  flex: 1 0 auto; /* Lässt den Inhaltsbereich wachsen, um verfügbaren Platz zu füllen */
}

/* Spezifische Anpassung für Single-Posts und reguläre Seiten */
body:not(.home).single .elementor-full-width-container,
body:not(.home).page .elementor-full-width-container {
  margin-top: min(100px, calc(var(--subpage-header-height) * 0.3));
}

@media screen and (max-width: 1024px) {
  body:not(.home).single .elementor-full-width-container,
  body:not(.home).page .elementor-full-width-container {
    margin-top: min(80px, calc(var(--subpage-header-height) * 0.25));
  }
}

@media screen and (max-width: 768px) {
  body:not(.home).single .elementor-full-width-container,
  body:not(.home).page .elementor-full-width-container {
    margin-top: calc(var(--subpage-header-height) - 3px);
  }
}

@media screen and (max-width: 480px) {
  body:not(.home).single .elementor-full-width-container,
  body:not(.home).page .elementor-full-width-container {
    margin-top: max(100px, calc(var(--subpage-header-height) - 3px));
  }
}

.elementor-full-width-container .site-main {
  width: 100%;
  max-width: 100%;
  padding: 0;
}

.elementor-full-width-container .entry-header {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: var(--abstand-lg) var(--abstand-lg) 0;
}

.elementor-full-width-container .entry-content {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-top: 32px;
  padding-bottom: 32px;
}

/* Kommentarbereich einschränken */
.elementor-full-width-container .comments-area {
  max-width: var(--container-width);
  margin: var(--abstand-xl) auto;
  padding: 0 var(--abstand-lg);
}

/* Elementor Container Anpassungen - Padding Korrektur */
.e-con {
    --padding-top: var(--container-default-padding-top, 10px) !important;
    --padding-right: 0px !important; /* Padding rechts entfernt */
    --padding-bottom: var(--container-default-padding-bottom, 10px) !important;
    --padding-left: 0px !important; /* Padding links entfernt */
}

/*======================================
  14. ELEMENTOR ANPASSUNGEN
======================================*/
/* Standard-Elementor-Container an Design anpassen */
.elementor-section.elementor-section-boxed > .elementor-container {
  max-width: var(--container-width) !important;
}

/* Elementor Container und Inner Container Abstände anpassen */
.e-con {
  --padding-top: var(--container-default-padding-top, 10px);
  --padding-right: 0px; /* Padding rechts entfernt */
  --padding-bottom: var(--container-default-padding-bottom, 10px);
  --padding-left: 0px; /* Padding links entfernt */
}

/* Hauptbereich im Elementor-Kontext anpassen */
[data-elementor-type="single-page"],
[data-elementor-type="wp-page"] {
  max-width: var(--container-width);
  margin: 0 auto;
  box-sizing: border-box;
  position: relative; 
  z-index: 101;
  background-color: #fff;
  margin-top: 0; /* Wir nutzen jetzt den Abstandshalter statt margin-top */
}

/* Container im Elementor-Kontext an Theme-Design anpassen */
.e-con-inner {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--abstand-lg);
  width: 100%;
  box-sizing: border-box;
}

/* Standard-Abstand in Elementor Inhaltscontainern */
.elementor-widget-container {
  padding: 0;
}

/* Konsistente Abstände für alle Seitentypen in Elementor */
.elementor-location-single .e-con-inner {
  padding: var(--abstand-lg);
}

/* Abstände für Text-Widgets in Elementor */
.elementor-widget-text-editor {
  margin-bottom: var(--abstand-sm);
}

/* Accordion Widget Anpassungen für konsistente Abstände */
.elementor-accordion-item {
  margin-bottom: var(--abstand-sm);
}

/* Standardmäßige Abstände für Elementor Widgets */
.elementor-widget {
  margin-bottom: var(--abstand-md);
}

/* Spezifische Anpassungen für Elementor Single-Page-Templates */
.elementor-location-single {
  max-width: var(--container-width);
  margin: 0 auto;
  width: 100%;
}

/* Seitentitel in Elementor konsistent halten */
.elementor-location-single h1.entry-title,
.elementor-location-single .elementor-heading-title {
  font-size: var(--font-size-xxxl);
  margin-bottom: var(--abstand-md);
  color: var(--farbe-dorsten-grau);
  font-weight: 600;
}

/* Elementor Widgets im Hauptinhalt formatieren wie reguläre Inhalte */
[data-elementor-type="wp-page"] p,
.elementor-text-editor p {
  line-height: 1.5;
  margin-bottom: var(--abstand-sm);
}

/* Blockzitate in Elementor genauso formatieren wie in regulären Seiten */
[data-elementor-type="wp-page"] blockquote,
.elementor-text-editor blockquote {
  margin: var(--abstand-md) 0;
  padding: var(--abstand-md);
  border-left: 4px solid var(--farbe-dorsten-gruen);
  background-color: rgba(128, 176, 34, 0.05);
}

/* Responsives Verhalten für Elementor-Container */
@media screen and (max-width: 1024px) {
  .e-con-inner,
  .elementor-location-single .e-con-inner {
    padding: var(--abstand-md);
  }
  
  [data-elementor-type="single-page"],
  [data-elementor-type="wp-page"] {
    padding: 0 var(--abstand-md);
  }
}

@media screen and (max-width: 768px) {
  .e-con-inner,
  .elementor-location-single .e-con-inner {
    padding: var(--abstand-sm);
  }
  
  [data-elementor-type="single-page"],
  [data-elementor-type="wp-page"] {
    padding: 0 var(--abstand-sm);
  }
}

/* Elementor Dorsten Icon Box und Accordion an Theme-Design anpassen */
.dorsten-elementor-accordion,
.dorsten-icon-box-wrapper {
  margin-bottom: var(--abstand-md);
}

/* Konsistente Abstände für verschachtelte Elementor-Container */
.e-con .e-con {
  padding: var(--abstand-sm) 0;
}

/* Sicherstellen, dass die Content-Breite eingehalten wird */
.elementor-widget-theme-post-content > .elementor-widget-container {
  max-width: var(--container-width);
  margin: 0 auto;
  width: 100%;
}

/* Header-content-spacer - Platzhalter für den absolut positionierten subpage-header */
/* Berechnung: Header-Höhe minus Überlappung mit header-wrapper */
.header-content-spacer {
  /* Desktop: 650px Header */
  height: calc(var(--subpage-header-height-desktop) - 250px);
  width: 100%;
  display: block;
}

@media screen and (max-width: 1400px) {
  .header-content-spacer {
    /* Laptop: 550px Header */
    height: calc(var(--subpage-header-height-laptop) - 220px);
  }
}

@media screen and (max-width: 1024px) {
  .header-content-spacer {
    /* Tablet: 450px Header */
    height: calc(var(--subpage-header-height-tablet) - 190px);
  }
}

@media screen and (max-width: 768px) {
  .header-content-spacer {
    /* Mobile: 350px Header */
    height: calc(var(--subpage-header-height-mobile) - 160px);
  }
}

@media screen and (max-width: 480px) {
  .header-content-spacer {
    /* Small: 300px Header */
    height: calc(var(--subpage-header-height-small) - 140px);
  }
}

/* Kinder-Abrisskante: Zusätzlicher Abstand, damit die Silhouetten
   nicht vom weißen Content-Bereich verdeckt werden.
   Die Kinder-Grafik ist deutlich höher als die Standard-Abrisskante (6 % vs. 5,2 %)
   und nutzt background-position: top center, sodass überlappender Content
   die Silhouetten abschneidet. */
body.abrisskante-kinder .header-content-spacer {
  /* Desktop: 650px Header – Offset von 250 auf 200 reduziert (+50 px) */
  height: calc(var(--subpage-header-height-desktop) - 200px);
}

@media screen and (max-width: 1400px) {
  body.abrisskante-kinder .header-content-spacer {
    /* Laptop: 550px Header – Offset von 220 auf 190 reduziert (+30 px) */
    height: calc(var(--subpage-header-height-laptop) - 190px);
  }
}

@media screen and (max-width: 1024px) {
  body.abrisskante-kinder .header-content-spacer {
    /* Tablet: 450px Header – Offset von 190 auf 170 reduziert (+20 px) */
    height: calc(var(--subpage-header-height-tablet) - 170px);
  }
}

@media screen and (max-width: 768px) {
  body.abrisskante-kinder .header-content-spacer {
    /* Mobile: 350px Header – Offset von 160 auf 145 reduziert (+15 px) */
    height: calc(var(--subpage-header-height-mobile) - 145px);
  }
}

@media screen and (max-width: 480px) {
  body.abrisskante-kinder .header-content-spacer {
    /* Small: 300px Header – Offset von 140 auf 125 reduziert (+15 px) */
    height: calc(var(--subpage-header-height-small) - 125px);
  }
}

/*======================================
  RESPONSIVE HEADER & MOBILE NAVIGATION
======================================*/

/* Mobile First Approach - Basis-Styles für mobile Geräte */
@media (max-width: 991px) {
  /* Header Layout für Mobile */
  .site-header-inner {
    display: grid !important;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas: 
      "logo burger"
      "menu menu";
    align-items: start;
    gap: 10px;
    padding: 15px 0;
  }
  
  /* Logo positioniert links */
  .site-branding {
    grid-area: logo;
    margin: 0 !important;
    order: unset !important;
    margin-left: 0 !important;
    justify-self: start;
  }

  /* Logo kleiner auf Mobile */
  .custom-logo,
  .default-logo {
    margin-top: 0 !important;
    width: 180px !important;
    height: auto !important;
  }
  
  /* Quadrate kleiner machen */
  .color-squares .color-square {
    width: 30px !important;
    height: 30px !important;
    margin-left: 10px !important;
  }
  
  /* Navigation komplett ausblenden (wird durch mobile Navigation ersetzt) */
  .main-navigation {
    display: none !important;
  }
  
  /* Burger Menu Button - modernes Design */
  .mobile-menu-toggle {
    grid-area: burger;
    justify-self: end;
    align-self: start;
    background: var(--farbe-dorsten-gruen) !important;
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    transition: all 0.3s ease;
    z-index: 1001;
    box-shadow: 0 2px 8px rgba(128, 176, 34, 0.3);
    margin-top: 0;
  }
  
  .mobile-menu-toggle:hover {
    background: var(--farbe-dorsten-grau) !important;
    transform: scale(1.05);
  }
  
  .mobile-menu-toggle.active {
    background: var(--farbe-dorsten-grau) !important;
    transform: rotate(90deg);
  }
  
  /* Burger Button Icon Animation */
  .mobile-menu-toggle i {
    transition: transform 0.3s ease;
  }
  
  .mobile-menu-toggle.active i {
    transform: rotate(90deg);
  }
  
  /* Search und Accessibility in mobiler Ansicht ausblenden */
  .search,
  .accessibility {
    display: none !important;
  }
  
  /* Header wird weiß wenn mobile Menü aktiv ist */
  .header-wrapper.mobile-menu-active {
    background: white;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  }
  
  .header-wrapper.mobile-menu-active .site-header {
    background: white;
  }
  
  /* Mobile Navigation Overlay */
  .mobile-navigation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1002;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    backdrop-filter: blur(2px);
  }
  
  .mobile-navigation-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* ===== NEUES MOBILES MENÜ - KOMPLETT NEU ERSTELLT ===== */
    /* Mobile Navigation Container - Modern Dorsten CI Design */
  .mobile-navigation {
    position: fixed;
    top: 0;
    bottom: 0;
    right: -100%;
    width: min(450px, 90vw);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 1003;
    background: #575756;
    box-shadow: -5px 0 25px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    font-family: var(--schrift-primär);
  }
    .mobile-navigation.active {
    right: 0;
  }  /* Mobile Navigation Close Button - Elegant oben rechts */
  .mobile-nav-close-top {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    background: var(--farbe-dorsten-gruen);
    border: none;
    border-radius: 0 !important;
    font-size: 16px;
    color: white;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(128, 176, 34, 0.3);
  }
  
  .mobile-nav-close-top:hover,
  .mobile-nav-close-top:focus {
    background: var(--farbe-dorsten-blau);
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(128, 176, 34, 0.4);
  }
  
  /* Mobile Menu Container - weiter unten positioniert */
  .mobile-menu-container {
    height: calc(100vh - 120px);
    margin-top: 80px;
    overflow-y: auto;
    padding: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--farbe-dorsten-gruen) transparent;
  }
  
  .mobile-menu-container::-webkit-scrollbar {
    width: 4px;
  }
  
  .mobile-menu-container::-webkit-scrollbar-track {
    background: transparent;
  }
  
  .mobile-menu-container::-webkit-scrollbar-thumb {
    background: var(--farbe-dorsten-gruen);
    border-radius: 2px;
  }
  
  /* Navigation List - Basis */
  .mobile-navigation .navigation-list {
    list-style: none;
    margin: 0;
    padding: 15px 0;
  }
  
  /* Menu Items - Hauptebene */
  .mobile-navigation .menu-item,
  .mobile-navigation .navigation-item {
    position: relative;
    list-style: none;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }  /* Menu Links - Hauptebene mit korrekter Höhe für Toggle-Button */
  .mobile-navigation > .mobile-menu-container > .navigation-list > .menu-item > a,
  .mobile-navigation > .mobile-menu-container > .navigation-list > .navigation-item > .navigation-link {
    text-decoration: none !important;
    display: block !important;
    font-size: 1.25rem !important;
    font-weight: 200 !important;
    padding: .75rem 2rem !important;
    transition: all .25s !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFF !important;
    min-height: 60px !important; /* Mindesthöhe = Toggle-Button Höhe */
    box-sizing: border-box !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    position: relative !important;
    background: transparent !important;
    line-height: 2.4 !important;
  }
  
  /* Zusätzliches Padding für Menüpunkte mit Toggle-Buttons */
  .mobile-navigation .menu-item.menu-item-has-children > a,
  .mobile-navigation .navigation-item.has-children > .navigation-link {
    padding-right: 85px !important; /* Platz für Toggle-Button (60px + 25px) */
  }
    /* Hauptmenü-Links ohne Submenü haben normales Padding */
  .mobile-navigation .menu-item:not(.menu-item-has-children) > a,
  .mobile-navigation .navigation-item:not(.has-children) > .navigation-link {
    padding: .75rem 2rem !important; /* Normales Padding wenn kein Toggle-Button */
  }
  /* Hover-Effekt für Hauptmenü */
  .mobile-navigation .menu-item > a:hover,
  .mobile-navigation .navigation-link:hover {
    background: var(--farbe-dorsten-gruen);
    color: white !important;
    box-shadow: inset 5px 0 0 rgba(255, 255, 255, 0.2);
  }
  
  /* Aktive Menu Items */
  .mobile-navigation .current-menu-item > a,
  .mobile-navigation .current_page_item > a,
  .mobile-navigation .navigation-item--state-active > .navigation-link {
    background: var(--farbe-dorsten-gruen);
    color: white !important;
    font-weight: 400;
    box-shadow: inset 5px 0 0 rgba(255, 255, 255, 0.3);
  }
    /* Toggle Button für Submenüs - Dorsten Style - BLEIBT FEST AN POSITION */
  .mobile-navigation .menu-item {
    position: relative; /* Container für absolute Positionierung */
  }
  
  .mobile-navigation .toggle-submenu {
    position: absolute;
    right: 0;
    top: 0;
    height: 60px; /* Feste Höhe - nur neben dem Link, NICHT über das Submenü */
    width: 60px;
    background: #80B022 !important; /* Dorsten Grün - fest definiert */
    background-color: var(--farbe-dorsten-gruen, #80B022) !important;
    border: none !important;
    border-radius: 0 !important;
    color: white !important;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    font-weight: bold;
    transition: all 0.3s ease;
    border-left: 3px solid rgba(255, 255, 255, 0.2) !important;
    z-index: 10;
    outline: none !important;
    box-shadow: none !important;
  }
  
  .mobile-navigation .toggle-submenu::before {
    content: "\203A";
    font-size: 1.8rem;
    transition: transform 0.3s ease;
    color: white !important;
  }
  
  .mobile-navigation .toggle-submenu:hover,
  .mobile-navigation .toggle-submenu:focus {
    background: #575756 !important; /* Dorsten Grau */
    background-color: var(--farbe-dorsten-grau, #575756) !important;
  }
  
  /* Toggle Button Animation */
  .mobile-navigation .submenu-open > .toggle-submenu::before {
    transform: rotate(90deg);
  }
  
  /* Toggle-Buttons auf allen Ebenen anzeigen, aber kleinere für Submenüs */
  .mobile-navigation .sub-menu .toggle-submenu {
    width: 50px !important;
    height: 50px !important;
  }
  
  /* Sicherstellen dass Toggle-Buttons auf ALLEN Ebenen sichtbar sind */
  .mobile-navigation .menu-item.has-children > .toggle-submenu,
  .mobile-navigation .navigation-item.has-children > .toggle-submenu,
  .mobile-navigation .menu-item-has-children > .toggle-submenu,
  .mobile-navigation .sub-menu .menu-item.has-children > .toggle-submenu,
  .mobile-navigation .sub-menu .navigation-item.has-children > .toggle-submenu,
  .mobile-navigation .sub-menu .menu-item-has-children > .toggle-submenu {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Toggle-Buttons in Sub-Menüs etwas kleiner */
  .mobile-navigation .sub-menu .sub-menu .toggle-submenu {
    width: 45px !important;
    height: 45px !important;
  }  /* Submenü Styling - Positionierung unter dem Hauptmenüpunkt */
  .mobile-navigation .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    background: rgba(0, 0, 0, 0.2);
    border-left: 4px solid var(--farbe-dorsten-gruen);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative; /* Relativ zum Eltern-Container */
    z-index: 1; /* Unter dem Toggle-Button */
  }
    .mobile-navigation .submenu-open > .sub-menu {
    max-height: 1000px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1);
    overflow: visible; /* Wichtig: damit verschachtelte Submenüs sich öffnen können */
  }  /* Submenü Items */
  .mobile-navigation .sub-menu .menu-item,
  .mobile-navigation .sub-menu .navigation-item {
    position: relative; /* Für absolute Toggle-Button Positionierung */
  }
  
  .mobile-navigation .sub-menu .menu-item > a,
  .mobile-navigation .sub-menu .navigation-item > .navigation-link {
    text-decoration: none !important;
    display: block !important;
    font-size: 1rem !important;
    font-weight: 200 !important;
    padding: .75rem 2rem .75rem 3rem !important;
    transition: all .25s !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFF !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
    position: relative;
    min-height: 50px !important;
    box-sizing: border-box !important;
    line-height: 1.6 !important;
  }
  
  /* Submenü-Items mit Kindern brauchen Platz für Toggle-Button */
  .mobile-navigation .sub-menu .menu-item.menu-item-has-children > a,
  .mobile-navigation .sub-menu .menu-item.has-children > a,
  .mobile-navigation .sub-menu .navigation-item.has-children > .navigation-link,
  .mobile-navigation .sub-menu .navigation-item.menu-item-has-children > .navigation-link {
    padding-right: 70px !important;
  }  .mobile-navigation .sub-menu .menu-item > a:hover,
  .mobile-navigation .sub-menu .navigation-link:hover {
    background: var(--farbe-dorsten-gruen);
    color: white !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
  }
    /* Dritte Ebene Submenüs */
  .mobile-navigation .sub-menu .sub-menu .menu-item > a,
  .mobile-navigation .sub-menu .sub-menu .navigation-link {
    text-decoration: none !important;
    display: block !important;
    font-size: 0.95rem !important;
    font-weight: 200 !important;
    padding: .75rem 2rem .75rem 4rem !important;
    transition: all .25s !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFF !important;
    min-height: 45px !important;
    box-sizing: border-box !important;
  }
  
  .mobile-navigation .sub-menu .sub-menu .menu-item > a::before,
  .mobile-navigation .sub-menu .sub-menu .navigation-link::before {
    content: '•';
    left: 45px;
  }
    .mobile-navigation .sub-menu .sub-menu .menu-item > a:hover,
  .mobile-navigation .sub-menu .sub-menu .navigation-link:hover {
    padding-left: 75px;
  }
  
  /* Dritte Ebene Sub-Menu - eigener Toggle und Styles */
  .mobile-navigation .sub-menu .sub-menu {
    background: rgba(0, 0, 0, 0.15);
    border-left: 3px solid rgba(255, 255, 255, 0.15);
  }
  
  /* Verstecke Font Awesome Icons */
  .mobile-navigation .toggle-submenu i {
    display: none;
  }
    /* Verstecke Menu-Boxes */
  .mobile-navigation .navigation-item--level-1 > .navigation-link::before,
  .mobile-navigation .navigation-item--level-1.navigation-item--state-active > .navigation-link::before,
  .mobile-navigation .navigation-link::before,
  .mobile-navigation .menu-item > a::before {
    display: none !important;
    content: none !important;
  }
    /* Universelle Styles für alle Links im mobilen Menü */
  .mobile-navigation a,
  .mobile-navigation .navigation-link,
  .mobile-navigation .menu-item > a,
  .mobile-navigation .sub-menu a {
    text-decoration: none !important;
    display: block !important;
    font-weight: 200 !important;
    transition: all .25s !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #FFF !important;
  }
  
  /* Spezifische Schriftgrößen für verschiedene Ebenen */
  .mobile-navigation .menu-item > a,
  .mobile-navigation .navigation-item > .navigation-link {
    font-size: 1.25rem !important;
  }
  
  .mobile-navigation .sub-menu .menu-item > a,
  .mobile-navigation .sub-menu .navigation-item > .navigation-link {
    font-size: 1rem !important;
  }
  
  .mobile-navigation .sub-menu .sub-menu .menu-item > a {
    font-size: 0.95rem !important;
  }

  /* Sub-Menüs sind initial über max-height: 0 + overflow: hidden versteckt */
  /* Die .submenu-open Klasse wird vom JavaScript gesteuert */
  .mobile-navigation .has-children > .sub-menu,
  .mobile-navigation .menu-item-has-children > .sub-menu {
    max-height: 0;
    overflow: hidden;
  }
  
  .mobile-navigation .has-children.submenu-open > .sub-menu,
  .mobile-navigation .menu-item-has-children.submenu-open > .sub-menu {
    overflow: visible;
  }
  
  /* Sicherstellen dass Toggle-Buttons immer sichtbar sind */
  .mobile-navigation .toggle-submenu {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
}

/*======================================
  15. FONTS UND FONT-FACES
======================================*/

/* Segoe UI Font-Faces sind in assets/css/fonts.css definiert */

/*======================================
  16. FONT AWESOME KONFIGURATION
======================================*/

/* Font Awesome @font-face Definitionen */
@font-face {
    font-family: "Font Awesome 6 Free";
    src: url("../font/font-awesome/fa-solid-900.woff2") format("woff2"),
         url("../font/font-awesome/fa-solid-900.ttf") format("truetype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Font Awesome 6 Free";
    src: url("../font/font-awesome/fa-regular-400.woff2") format("woff2"),
         url("../font/font-awesome/fa-regular-400.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Font Awesome 6 Brands";
    src: url("../font/font-awesome/fa-brands-400.woff2") format("woff2"),
         url("../font/font-awesome/fa-brands-400.ttf") format("truetype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Font Awesome Icon Basis-Styles - Höchste Spezifität */
.fa, .fas, .far, .fab, .fal, .fad, .fass, .fasr, .fasl, .fasd,
[class*="fa-"]::before, [class^="fa-"]::before,
i[class*="fa-"], i[class^="fa-"],
span[class*="fa-"], span[class^="fa-"] {
    font-family: var(--dorsten-font-fallback) !important;
    font-weight: 900 !important;
    font-style: normal !important;
    font-variant: normal !important;
    text-rendering: auto !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
    display: inline-block !important;
    text-decoration: none !important;
}

/* Regular Icons */
.far, .fa-regular,
[class*="fa-"].far::before, [class^="fa-"].far::before {
    font-weight: 400 !important;
}

/* Brand Icons */
.fab, .fa-brands,
[class*="fa-"].fab::before, [class^="fa-"].fab::before {
    font-family: var(--dorsten-font-fallback-brands) !important;
    font-weight: 400 !important;
}

/* Verhindern, dass andere CSS-Regeln die Font-Familie überschreiben */
body .fa, body .fas, body .far, body .fab,
body i[class*="fa-"], body i[class^="fa-"],
body span[class*="fa-"], body span[class^="fa-"],
.elementor-widget i[class*="fa-"], .elementor-widget i[class^="fa-"],
.elementor-icon i[class*="fa-"], .elementor-icon i[class^="fa-"],
.elementor-editor-active .fa, .elementor-editor-active .fas, 
.elementor-editor-active .far, .elementor-editor-active .fab {
    font-family: inherit !important;
}

/* Spezifische Font-Awesome Übersteuerung für ::before Pseudo-Elemente */
body .fa:before, body .fas:before, body .far:before, body .fab:before,
body i[class*="fa-"]:before, body i[class^="fa-"]:before,
body span[class*="fa-"]:before, body span[class^="fa-"]:before,
.elementor-widget i[class*="fa-"]:before, .elementor-widget i[class^="fa-"]:before,
.elementor-icon i[class*="fa-"]:before, .elementor-icon i[class^="fa-"]:before,
.elementor-editor-active .fa:before, .elementor-editor-active .fas:before,
.elementor-editor-active .far:before, .elementor-editor-active .fab:before {
    font-family: var(--dorsten-font-fallback) !important;
    font-weight: 900 !important;
}

/* Regular Icons Before */
body .far:before, body i[class*="fa-"].far:before, body i[class^="fa-"].far:before,
.elementor-editor-active .far:before {
    font-weight: 400 !important;
}

/* Brand Icons Before */
body .fab:before, body i[class*="fa-"].fab:before, body i[class^="fa-"].fab:before,
.elementor-editor-active .fab:before {
    font-family: var(--dorsten-font-fallback-brands) !important;
    font-weight: 400 !important;
}

/* Elementor spezifische Fixes */
.elementor-widget-icon .elementor-icon i,
.elementor-widget-icon-box .elementor-icon i,
.elementor-widget-button .elementor-button-icon i,
.elementor-widget-social-icons .elementor-social-icon i {
    font-family: var(--dorsten-font-fallback) !important;
    font-weight: 900 !important;
}

.elementor-widget-icon .elementor-icon i.far,
.elementor-widget-icon-box .elementor-icon i.far,
.elementor-widget-button .elementor-button-icon i.far,
.elementor-widget-social-icons .elementor-social-icon i.far {
    font-weight: 400 !important;
}

.elementor-widget-icon .elementor-icon i.fab,
.elementor-widget-icon-box .elementor-icon i.fab,
.elementor-widget-button .elementor-button-icon i.fab,
.elementor-widget-social-icons .elementor-social-icon i.fab {
    font-family: var(--dorsten-font-fallback-brands) !important;
    font-weight: 400 !important;
}

/* Fix für häufig verwendete Icons mit korrekten Unicode-Codes */
.fa-calendar-alt:before, .fa-calendar-days:before { content: "\f073"; }
.fa-pencil-alt:before, .fa-pen-to-square:before { content: "\f044"; }
.fa-envelope:before { content: "\f0e0"; }
.fa-phone:before { content: "\f095"; }
.fa-map-marker:before, .fa-location-pin:before { content: "\f041"; }
.fa-user:before { content: "\f007"; }
.fa-home:before, .fa-house:before { content: "\f015"; }
.fa-search:before, .fa-magnifying-glass:before { content: "\f002"; }
.fa-info-circle:before, .fa-circle-info:before { content: "\f05a"; }
.fa-exclamation-triangle:before, .fa-triangle-exclamation:before { content: "\f071"; }
.fa-check:before { content: "\f00c"; }
.fa-times:before, .fa-xmark:before { content: "\f00d"; }
.fa-arrow-right:before { content: "\f061"; }
.fa-arrow-left:before { content: "\f060"; }
.fa-download:before { content: "\f019"; }
.fa-external-link:before, .fa-external-link-alt:before { content: "\f35d"; }
.fa-star:before { content: "\f005"; }
.fa-heart:before { content: "\f004"; }
.fa-thumbs-up:before { content: "\f164"; }
.fa-thumbs-down:before { content: "\f165"; }
.fa-comment:before { content: "\f075"; }
.fa-share:before { content: "\f064"; }
.fa-print:before { content: "\f02f"; }
.fa-edit:before, .fa-pen:before { content: "\f304"; }
.fa-trash:before, .fa-trash-can:before { content: "\f2ed"; }
.fa-plus:before { content: "\f067"; }
.fa-minus:before { content: "\f068"; }

/*======================================
  17. BLOCK-STILE FÜR GUTENBERG
======================================*/

/* Dorsten Button-Stil */
.wp-block-button.is-style-dorsten-button .wp-block-button__link {
    background: linear-gradient(90deg, 
        var(--farbe-dorsten-gruen, #80B022) 0%, 
        var(--farbe-dorsten-gruen, #80B022) 85%, 
        var(--farbe-dorsten-grau, #575756) 85%);
    color: white;
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: 0;
    padding: 0.8em 3em 0.8em 1.5em;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.wp-block-button.is-style-dorsten-button .wp-block-button__link::after {
    content: "\f101";
    font-family: var(--dorsten-font-fallback);
    font-weight: 600;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--farbe-dorsten-grau, #575756);
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: -50%;
    right: 0;
}

.wp-block-button.is-style-dorsten-button .wp-block-button__link:hover {
    background: linear-gradient(90deg, 
        var(--farbe-dorsten-blau, #007DBF) 0%, 
        var(--farbe-dorsten-blau, #007DBF) 85%, 
        var(--farbe-dorsten-grau, #575756) 85%);
    box-shadow: 0 4px 15px rgba(128, 176, 34, 0.3);
}

/* Dorsten Zitat-Stil */
.wp-block-quote.is-style-dorsten-quote {
    background-color: var(--farbe-dorsten-sehrhellgrau, #fafafa);
    padding: 2em;
    border-left: 6px solid var(--farbe-dorsten-gruen, #80B022);
    border-radius: 0 8px 8px 0;
    margin: 2em 0;
    position: relative;
    font-style: italic;
}

.wp-block-quote.is-style-dorsten-quote::before {
    content: "\f10d";
    font-family: var(--dorsten-font-fallback);
    font-weight: 900;
    position: absolute;
    top: 15px;
    left: 15px;
    color: var(--farbe-dorsten-gruen, #80B022);
    font-size: 1.5em;
    opacity: 0.5;
}

.wp-block-quote.is-style-dorsten-quote p {
    margin-bottom: 1em;
    font-size: 1.1em;
    line-height: 1.6;
}

.wp-block-quote.is-style-dorsten-quote cite {
    color: var(--farbe-dorsten-grau, #575756);
    font-weight: 600;
    font-style: normal;
}

/* Dorsten Hervorhebung-Stil für Gruppen */
.wp-block-group.is-style-dorsten-highlight {
    background-color: var(--farbe-dorsten-hellgrau, #f5f5f5);
    border: 2px solid var(--farbe-dorsten-gruen, #80B022);
    border-radius: 8px;
    padding: 2em;
    margin: 2em 0;
    position: relative;
}

.wp-block-group.is-style-dorsten-highlight::before {
    content: "\f06a";
    font-family: var(--dorsten-font-fallback);
    font-weight: 900;
    position: absolute;
    top: -12px;
    left: 20px;
    background-color: var(--farbe-dorsten-gruen, #80B022);
    color: white;
    padding: 8px 12px;
    border-radius: 50%;
    font-size: 0.9em;
}

.wp-block-group.is-style-dorsten-highlight h1,
.wp-block-group.is-style-dorsten-highlight h2,
.wp-block-group.is-style-dorsten-highlight h3,
.wp-block-group.is-style-dorsten-highlight h4,
.wp-block-group.is-style-dorsten-highlight h5,
.wp-block-group.is-style-dorsten-highlight h6 {
    color: var(--farbe-dorsten-gruen, #80B022);
    margin-top: 0.5em;
}

.wp-block-group.is-style-dorsten-highlight p:first-of-type {
    margin-top: 0;
}

.wp-block-group.is-style-dorsten-highlight p:last-of-type {
    margin-bottom: 0;
}

/* Responsive Anpassungen für Block-Stile */
@media (max-width: 768px) {
    .wp-block-button.is-style-dorsten-button .wp-block-button__link {
        padding: 0.8em 2.5em 0.8em 1.2em;
        font-size: 0.9em;
    }
    
    .wp-block-quote.is-style-dorsten-quote {
        padding: 1.5em;
        margin: 1.5em 0;
    }
    
    .wp-block-group.is-style-dorsten-highlight {
        padding: 1.5em;
        margin: 1.5em 0;
    }
}

/*======================================
  18. EDITOR-STILE
======================================*/

/* CSS-Variablen für den Editor */
:root {
    --farbe-dorsten-gruen: #80B022;
    --farbe-dorsten-blau: #007DBF;
    --farbe-dorsten-grau: #575756;
    --farbe-dorsten-hellgrau: #f5f5f5;
    --farbe-dorsten-sehrhellgrau: #fafafa;
    --font-size-base: 16px;
    --font-size-sm: 14.4px;
    --font-size-lg: 19.2px;
    --font-size-xl: 24px;
    --font-size-xxl: 32px;
    --font-size-xxxl: 48px;
}

/* Basis-Typografie für den Editor */
.wp-block {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--farbe-dorsten-grau);
    line-height: 1.6;
}

/* Überschriften im Editor */
.wp-block h1,
.wp-block h2,
.wp-block h3,
.wp-block h4,
.wp-block h5,
.wp-block h6 {
    color: var(--farbe-dorsten-grau);
    font-weight: 600;
    line-height: 1.3;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

.wp-block h1 { font-size: 3rem; }
.wp-block h2 { font-size: 2.25rem; }
.wp-block h3 { font-size: 1.75rem; }
.wp-block h4 { font-size: 1.4rem; }
.wp-block h5 { font-size: 1.15rem; }
.wp-block h6 { font-size: 1rem; }

/* Links im Editor */
.wp-block a {
    color: var(--farbe-dorsten-gruen);
    text-decoration: underline;
}

.wp-block a:hover {
    color: var(--farbe-dorsten-blau);
}

/* Button-Stile für den Editor */
.wp-block-button .wp-block-button__link {
    background-color: var(--farbe-dorsten-gruen);
    border: none;
    border-radius: 0;
    padding: 0.8em 1.5em;
    font-weight: 500;
    text-transform: uppercase;
    transition: all 0.3s ease;
}

.wp-block-button .wp-block-button__link:hover {
    background-color: var(--farbe-dorsten-blau);
}

/* Dorsten Button-Stil */
.wp-block-button.is-style-dorsten-button .wp-block-button__link {
    background: linear-gradient(90deg, var(--farbe-dorsten-gruen) 0%, var(--farbe-dorsten-gruen) 85%, var(--farbe-dorsten-grau) 85%);
    color: white;
    position: relative;
    overflow: hidden;
}

.wp-block-button.is-style-dorsten-button .wp-block-button__link::after {
    content: "\f101";
    font-family: var(--dorsten-font-fallback);
    font-weight: 600;
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}

/* Zitat-Stile für den Editor */
.wp-block-quote {
    border-left: 4px solid var(--farbe-dorsten-gruen);
    padding-left: 1.5em;
    margin: 1.5em 0;
    font-style: italic;
}

.wp-block-quote.is-style-dorsten-quote {
    background-color: var(--farbe-dorsten-sehrhellgrau);
    padding: 1.5em;
    border-left: 6px solid var(--farbe-dorsten-gruen);
    border-radius: 0 8px 8px 0;
}

/* Gruppen-Stil für Hervorhebungen */
.wp-block-group.is-style-dorsten-highlight {
    background-color: var(--farbe-dorsten-hellgrau);
    border: 2px solid var(--farbe-dorsten-gruen);
    border-radius: 8px;
    padding: 1.5em;
    margin: 1.5em 0;
}

/* Listen-Styling */
.wp-block ul,
.wp-block ol {
    padding-left: 1.5em;
}

.wp-block li {
    margin-bottom: 0.5em;
}

/* Tabellen-Styling */
.wp-block-table table {
    border-collapse: collapse;
    width: 100%;
}

.wp-block-table th,
.wp-block-table td {
    border: 1px solid var(--farbe-dorsten-hellgrau);
    padding: 0.8em;
    text-align: left;
}

.wp-block-table th {
    background-color: var(--farbe-dorsten-gruen);
    color: white;
    font-weight: 600;
}

/* Cover-Block Styling */
.wp-block-cover {
    min-height: 400px;
}

/* Spalten-Layout */
.wp-block-columns {
    gap: 2em;
}

/* Responsive Anpassungen für den Editor */
@media (max-width: 768px) {
  /* Mobile Skala etwas reduziert */
  .wp-block h1 { font-size: 2.4rem; }
  .wp-block h2 { font-size: 2rem; }
  .wp-block h3 { font-size: 1.55rem; }
  .wp-block h4 { font-size: 1.3rem; }
  .wp-block h5 { font-size: 1.05rem; }
  .wp-block h6 { font-size: 0.95rem; }
    
    .wp-block-columns {
        gap: 1em;
    }
}

/*======================================
  19. MENÜ-KÄSTCHEN
======================================*/

/* Grundlegende Kästchen-Einstellungen (nur für Level 1) */
.navigation-item--level-1 > .navigation-link::before {
    content: '';
    display: var(--menu-boxes-display, inline-block);
    width: 10px;
    height: 10px;
    margin-right: 8px;
    background-color: var(--farbe-dorsten-gruen);
    vertical-align: middle;
    transform: translateY(-1px);
    transition: background-color var(--transition-speed, 0.3s) var(--transition-easing, ease);
}

/* Aktiver Menüpunkt Kästchen (nur Level 1) */
.navigation-item--level-1.navigation-item--state-active > .navigation-link::before {
    background-color: var(--farbe-dorsten-blau);
}

/* Mobile Navigation - Kästchen deaktivieren */
.mobile-navigation .navigation-item--level-1 > .navigation-link::before,
.mobile-navigation .navigation-item--level-1.navigation-item--state-active > .navigation-link::before {
    display: none !important;
    content: none !important;
}

/*======================================
  20. DEFAULTS CSS - WORDPRESS UND ELEMENTOR STANDARD-FORMATIERUNGEN
======================================*/

/* Allgemeine Reset-Styles */
* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* WordPress Standard-Styles */
/* Ausrichtungsklassen */
.alignleft {
    float: left;
    margin: 0 1.5em 1.5em 0;
}

.alignright {
    float: right;
    margin: 0 0 1.5em 1.5em;
}

.aligncenter {
    display: block;
    margin: 0 auto 1.5em;
    text-align: center;
}

.alignwide {
    margin: 0 -2vw 1.5em;
    max-width: calc(100% + 4vw);
    width: auto;
}

.alignfull {
    margin: 0 calc(-50vw + 50%) 1.5em;
    max-width: 100vw;
    width: 100vw;
    box-sizing: border-box;
}

/* Responsive Bilder */
img {
    max-width: 100%;
    height: auto;
}

.wp-caption {
    max-width: 100%;
}

.wp-caption-text {
    font-size: 0.9em;
    color: #666;
    text-align: center;
    margin: 0.5em 0;
}

/* WordPress Gallery */
.gallery {
    margin-bottom: 1.5em;
    display: grid;
    grid-gap: 1em;
}

.gallery-columns-1 { grid-template-columns: repeat(1, 1fr); }
.gallery-columns-2 { grid-template-columns: repeat(2, 1fr); }
.gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }
.gallery-columns-5 { grid-template-columns: repeat(5, 1fr); }
.gallery-columns-6 { grid-template-columns: repeat(6, 1fr); }

.gallery-item {
    text-align: center;
}

.gallery-caption {
    font-size: 0.8em;
    color: #666;
    margin-top: 0.5em;
}

/* WordPress Blockquotes */
blockquote {
    border-left: 4px solid #007cba;
    margin: 1.5em 0;
    padding: 1em 1.5em;
    background: #f9f9f9;
    font-style: italic;
}

blockquote cite {
    display: block;
    margin-top: 1em;
    font-size: 0.9em;
    font-style: normal;
    color: #666;
}

/* Elementor Standard-Styles */
/* Container-Verbesserungen */
.elementor-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

.elementor-section {
    position: relative;
}

/* Spalten-Verbesserungen */
.elementor-column {
    display: flex;
    flex-direction: column;
}

.elementor-column-wrap {
    flex: 1;
}

.elementor-widget-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Text-Widget Verbesserungen */
.elementor-text-editor {
    line-height: 1.6;
}

.elementor-text-editor h1,
.elementor-text-editor h2,
.elementor-text-editor h3,
.elementor-text-editor h4,
.elementor-text-editor h5,
.elementor-text-editor h6 {
    margin-top: 0;
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.elementor-text-editor p {
    margin-bottom: 1em;
}

/* Button Standardisierung */
.elementor-button {
    display: inline-block;
    padding: 12px 24px;
    border: none;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: all 0.3s ease;
    cursor: pointer;
}

.elementor-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Image-Widget Verbesserungen */
.elementor-image {
    max-width: 100%;
    height: auto;
}

.elementor-image img {
    width: 100%;
    height: auto;
}

/* Responsive Design */
/* Tablet */
@media (max-width: 1024px) {
    .elementor-container {
        padding: 0 20px;
    }

    .alignwide {
        margin: 0 -2.5vw 1.5em;
        max-width: calc(100% + 5vw);
    }

    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Mobile */
@media (max-width: 767px) {
    .elementor-container {
        padding: 0 15px;
    }

    .alignleft,
    .alignright {
        float: none;
        display: block;
        margin: 0 auto 1.5em;
    }

    .alignwide,
    .alignfull {
        margin: 0 -15px 1.5em;
        max-width: calc(100% + 30px);
        width: calc(100% + 30px);
    }

    .gallery-columns-2,
    .gallery-columns-3,
    .gallery-columns-4,
    .gallery-columns-5,
    .gallery-columns-6 {
        grid-template-columns: repeat(1, 1fr);
    }

    blockquote {
        padding: 0.5em 1em;
        margin: 1em 0;
    }

    .elementor-button {
        width: 100%;
        text-align: center;
    }
}

/* Barrierefreiheit */
/* Fokus-Stile */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #007cba;
    outline-offset: 2px;
}

/* Screen Reader Text */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    word-wrap: normal !important;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* Clearfix Utility */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
}

/* Print Styles */
@media print {
    * {
        background: transparent !important;
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    blockquote {
        border-left: 4px solid #000;
        page-break-inside: avoid;
    }

    img {
        page-break-inside: avoid;
    }
}

/* ======================================
  Spezifische Anpassung: "Alle Meldungen" Button Semibold
  Ziel: Nur dieser eine Button (Widget: Recent Posts) erhält font-weight 600
  Struktur: Wrapper .alle-meldungen-button + Link .alle-meldungen-button__link
  Datum: 2025-09-14
====================================== */
.alle-meldungen-button.button.solid.white-background .alle-meldungen-button__link.button-content > span {
  font-weight: 600; /* Semibold Wunsch */
}
/* Falls 600 nicht dargestellt wird (nur normal + bold vorhanden), optional auskommentieren und 700 aktivieren:
.alle-meldungen-button.button.solid.white-background .alle-meldungen-button__link.button-content > span { font-weight: 700; }
*/