body {
    letter-spacing: 0.5px;
    line-height: 1.6em;
   font-size: 1.4em;
  background-color: #f9f5ea;
}
.com-content-article__body {
  margin-top: 25px !important;
}
.container-header {
  background-image: none;
  background: #f9f5ea;
  box-shadow: 0px 8px 8px 0px rgba(0,0,0,0.3);
}
.container-header .navbar-brand a {
  color: #0e4194;
  text-shadow: 3px 3px 2px rgba(150, 150, 150, 1);
}
.container-header .site-description {
  color: #0e4194;
  white-space: normal;
  font-size: 1rem;
}
.container-header .container-nav {
    flex-wrap: wrap;
  justify-content: center !important;
  padding-bottom: 1em;
}
.container-top-a {
  grid-area: top-a;
  margin-top: 3em;
}
h4 a,
h5 a {
    color: inherit;
    font: inherit;
    text-decoration: none !important;
}

h4 a:hover,
h5 a:hover {
    color: inherit;
    text-decoration: none !important;
}
.navbar {
  --navbar-padding-x: 0;
  --navbar-padding-y: .5rem;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
  position: relative;
  justify-content: center !important;
}
.metismenu.mod-menu .mm-collapse > li > a {
  display: inline-flex;
  text-transform: uppercase;
}
/* --- AB HIER AKTUALISIERT: Für Desktop UND Mobil (Collapsible) --- */
/* Menü-Links Grundstil (greift bei metismenu und normaler navbar) */
.container-header .mod-menu a,
.container-header .mod-menu span {
    color: #000000 !important; /* Schwarz für gute Lesbarkeit */
    transition: all 0.3s ease;
    font-size: 1em;
    text-decoration: none !important;
    border-bottom: none !important;
    padding: 0.5em 0em;
}

/* Hover-Effekt */
.container-header .mod-menu a:hover {
    color: #105a14 !important; /* glimmendes Braun */
    text-shadow: 0 0 10px rgba(167, 139, 250, 0.6);
}

/* Aktiver Menüpunkt */
.container-header .mod-menu .active > a,
.container-header .mod-menu .current > a {
    color: #3e8355 !important;
    font-weight: 400;
    position: relative;
    display: inline-block;     /* Wichtig für Abstände */
    box-sizing: border-box;    /* Rechnet Rahmen & Padding in die Größe ein */
    vertical-align: middle;    /* Richtet den Kasten mittig in der Zeile aus */
    line-height: 1;            /* Verhindert, dass die Zeilenhöhe den Kasten nach unten drückt */
    /* Der Kasten */
    border: 2px solid #3e8355; 
    padding: 8px 14px;         /* Leicht verringert (6px statt 8px oben/unten) */
    border-radius: 4px;        
    background-color: rgba(62, 131, 85, 0.05); 
    text-decoration: none;     
}

/* Entfernt die Linie unter den Menüpunkten im Hauptmenü vollständig */
.container-header .mod-menu a::after,
.container-header .mod-menu .active a::after {
    display: none !important;
    content: none !important;
}
.container-header .navbar-brand {
  /* clamp(Minimalwert, Flexibler Wert basierend auf Viewport-Breite, Maximalwert) */
  font-size: clamp(1.4rem, 5vw, 6rem);
}
/* SICHERHEITSHALBER: Falls der Mobil-Button (Burger) unsichtbar ist */
.container-header .navbar-toggler { 
    color: #618d43;
  cursor: pointer;
  border: 2px solid #9a833e;
  font-size: 1.6em;
}
.metismenu.mod-menu .metismenu-item > a:hover, .metismenu.mod-menu .metismenu-item > button:hover {
  text-decoration: none;
  color: white;
}
h1, h2 {
    color: #5f7248;
    font-weight: 600;
    text-transform: uppercase;
}
h3 {
    color: #6e682e;
    font-weight: 600;
  line-height: 2em;
}
h4, h5 {
    color: #6e682e;
    font-weight: 500;
  line-height: 2em;
}
.bg-dark {
  --bg-opacity: 1;
  background-color: rgb(84, 61, 42) !important;
}
.container-footer {
 background: #70887b;
  color: white;
}
.footer a:not(.btn):hover {
  color: #fceb5c;
}
.btn-info {
 --btn-color: #5f7248;
  --btn-bg: #faedca;
  --btn-border-color: #7e8c68;
  --btn-hover-color: #fff;
  --btn-hover-bg: #ab9311;
  --btn-hover-border-color: #264f70;
  --btn-focus-shadow-rgb: 79, 122, 158;
  --btn-active-color: #fff;
  --btn-active-bg: #264f70;
  --btn-active-border-color: #244a69;
  --btn-active-shadow: inset 0 3px 5px #00000020;
  --btn-disabled-color: #fff;
  --btn-disabled-bg: #30638d;
  --btn-disabled-border-color: #30638d;
}
/* Macht den Container zum Flexbox-Grid */
.tags a.btn {
  font-weight: 100;
}
.tags {
  display: flex !important;
  flex-wrap: wrap !important;
}
/* 1. Flexbox auf die Liste erzwingen */
ul.tags.list-inline {
  display: flex !important;
  flex-wrap: wrap !important;
}

/* 2. Inline-Block von Bootstrap aufbrechen */
ul.tags.list-inline > li {
  display: block !important;
}

/* 3. Sortierung nach den Klassen aus deinem Screenshot */
ul.tags.list-inline > li.tag-2 { order: 1 !important; } /* Verhaltenstherapie */
ul.tags.list-inline > li.tag-7 { order: 2 !important; } /* Achtsamkeit */
ul.tags.list-inline > li.tag-3 { order: 3 !important; } /* Paar- und Familientherapie */
/* ==========================================================================
   1. GRID AUFHEBEN & TEXTE AUSRICHTEN
   ========================================================================== */

/* Verwandelt das gesamte Formular in ein einspaltiges Layout */
.visfield-container .form-group.row,
.visfield-container .row {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100% !important;
    clear: both !important;
}

/* Alle Spalten (col-3, col-9, etc.) auf volle Breite zwingen */
.visfield-container [class^="col-"],
.visfield-container .col-3,
.visfield-container .col-9,
.visfield-container .col-sm-9 {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

/* Infotexte rigoros nach links holen */
.visfield-container .visforms-note,
.visfield-container p,
.visfield-container div {
    text-align: left !important;
}

/* ==========================================================================
   2. EINGABEFELDER (VOLLE BREITE & KONTRAST)
   ========================================================================== */

.visfield-container input[type="text"],
.visfield-container input[type="email"],
.visfield-container input[type="tel"],
.visfield-container input[type="date"],
.visfield-container textarea,
.visfield-container select {
    border: 1.5px solid #555555 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* ==========================================================================
   3. RADIO-BUTTONS FIXEN (FRAU / HERR / FIRMA)
   ========================================================================== */

/* Verhindert, dass die Radio-Reihe sich streckt */
.visfield-container .radio,
.visfield-container .visforms-radio-group {
    display: block !important;
    width: 100% !important;
}

/* Richtet Radio-Button und Text in einer Zeile aus */
.visfield-container .radio label,
.visfield-container .form-check {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    width: 100% !important;
    margin-bottom: 8px !important;
}

/* Der eigentliche Klick-Punkt */
.visfield-container input[type="radio"] {
    border: 1.5px solid #555555 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    margin: 0 10px 0 0 !important; /* Abstand nach rechts zum Text */
    padding: 0 !important;
    flex-shrink: 0 !important;
}
/* ==========================================================================
   4. DATENSCHUTZ-CHECKBOX OPTIMIEREN
   ========================================================================== */

/* Container für die Checkbox flexibel ausrichten */
.visfield-container .checkbox label,
.visfield-container .form-check {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    margin-top: 15px !important; /* Abstand nach oben zum Infos-Feld */
}

/* Die Checkbox selbst stylen: Größer, dunkler Rahmen und Abstand nach rechts */
.visfield-container input[type="checkbox"] {
    border: 1.5px solid #555555 !important; /* Kräftiger dunkler Rahmen */
    width: 20px !important;  /* Etwas größer als Standard */
    height: 20px !important; /* Etwas größer als Standard */
    min-width: 20px !important;
    margin-right: 12px !important; /* Schafft den gewünschten Abstand zum Text "Datenschutz..." */
    cursor: pointer !important;
    flex-shrink: 0 !important;
}