body {
    letter-spacing: 0.5px;
    line-height: 1.8em;
}
.container-header .navbar-brand a {
  color: rgb(124, 80, 42);
  text-shadow: 3px 3px 2px rgba(150, 150, 150, 1);
}
.container-header .site-description {
  color: #757574;
  white-space: normal;
  font-size: 1rem;
}
.container-header .container-nav {
    flex-wrap: wrap;
  justify-content: center !important;
  padding-bottom: 1em;
}
.navbar {
  --navbar-padding-x: 0;
  --navbar-padding-y: .5rem;
  flex-wrap: wrap;
  align-items: center;
  display: flex;
  position: relative;
  justify-content: center !important;
}
/* --- 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;
    text-decoration: none !important;
    border-bottom: none !important;
    padding: 0.5em 1em;
}

/* Hover-Effekt */
.container-header .mod-menu a:hover {
    color: #8F7025 !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: #8F7025 !important;
    font-weight: 600;
    position: relative;
}

/* 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: #9b6116;
    cursor: pointer;
    border: 1px solid #9b6116;
   font-size: 1.6em;
}
.metismenu.mod-menu .metismenu-item > a:hover, .metismenu.mod-menu .metismenu-item > button:hover {
  text-decoration: none;
  color: black;
}
h1, h2, h3, h4, h5 {
    color: #8F7025;
    font-weight: normal;
    text-transform: uppercase;
}
.bg-dark {
  --bg-opacity: 1;
  background-color: rgb(84, 61, 42) !important;
}
.container-footer {
  color: rgb(124, 80, 42);
  background-color: rgb(249, 249, 247);
  background-image: none;
}
.btn-info {
  --btn-color: #fff;
  --btn-bg: #543d2a;
  --btn-border-color: #fff;
  --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;
}
.tags a.btn {
  font-weight: 200;
}
/* ==========================================================================
   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;
}