@charset "UTF-8";

/* =========================================
   1. BASICS & VARIABLEN
   ========================================= */
:root {
  --sv-primary-rgb: 161, 162, 163;
  --sv-primary: rgb(var(--sv-primary-rgb));
  --sv-primary-dark-rgb: 138, 139, 140;
  --sv-primary-dark: rgb(var(--sv-primary-dark-rgb));
  --sv-primary-darker-rgb: 130, 132, 133;
  --sv-primary-darker: rgb(var(--sv-primary-darker-rgb));
  --bs-primary: var(--sv-primary);
  --bs-link-color: var(--sv-primary-darker);
  --bs-link-color-rgb: var(--sv-primary-darker-rgb);
  --bs-link-hover-color: #4b4b4b;
}

body, html {
    background-color: #f4f7f6 !important;
    font-family: 'Open Sans', Helvetica, Arial, sans-serif !important;
    color: #333 !important;
}

.container-xxl {
    max-width: 800px !important;
    margin: 40px auto !important;
    background-color: #ffffff !important;
    padding: 40px !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08) !important;
}

/* =========================================
   2. NAVIGATION & BUTTONS
   ========================================= */
.nav-link {
  color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1)) !important;
  font-weight: 600 !important;
}
.nav-link:hover {
    color: #01BAC5 !important;
}

.btn-primary {
  --bs-btn-bg: var(--sv-primary);
  --bs-btn-border-color: var(--sv-primary);
  padding: 12px 30px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--sv-primary-dark);
  --bs-btn-border-color: var(--sv-primary-dark);
  padding: 10px 25px !important;
  border-radius: 8px !important;
}

/* =========================================
   3. TYPOGRAFIE & FORM-LAYOUT FIX
   ========================================= */
h4 {
    color: #2c3e50 !important;
    font-weight: 700 !important;
    border-bottom: 3px solid #01BAC5 !important;
    padding-bottom: 15px !important;
    display: inline-block !important;
    margin-bottom: 25px !important;
}

/* FIX: Namensfelder auf 100% Breite bringen */
.col-md-4 {
    width: 100% !important;
}

.form-floating {
    margin-bottom: 5px;
}

.form-control, .form-select {
    border-radius: 8px !important;
    border: 1px solid #ddd !important;
}

/* =========================================
   4. LEISTUNGSLISTE & BILDER
   ========================================= */
.list-group-item {
    background-color: #fafafa !important;
    border: 1px solid #eee !important;
    border-radius: 12px !important;
    margin-bottom: 15px !important;
    padding: 15px 20px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.list-group-item:hover {
    background-color: #ffffff !important;
    border-color: #01BAC5 !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 5px 15px rgba(1, 186, 197, 0.2) !important;
}

img.productimage {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid #01BAC5 !important;
    margin-bottom: 10px !important;
}

a[href*="ptg=2"] .productimage {
    content: url("https://www.physiofitbb.de/wp-content/uploads/frau-in-behandlung.jpg") !important;
}

/* =========================================
   5. DYNAMISCHE FORMULAR-LOGIK
   ========================================= */

/* Grundregel: Verstecke Rezept-Reihen */
body:has(input[name^="rf"]) form .row.mb-2 {
    display: none !important;
}

/* AUSNAHMEN: Registrierungsfelder & Absende-Button immer zeigen */
body form .row.mb-2:has(input[name="firstname"]),
body form .row.mb-2:has(input[name="lastname"]),
body form .row.mb-2:has(input[name="gebdat"]),
body form .row.mb-2:has(input[name="strasse"]),
body form .row.mb-2:has(input[name="plz"]),
body form .row.mb-2:has(input[name="ort"]),
body form .row.mb-2:has(input[name="email"]),
body form .row.mb-2:has(input[name="tel"]),
body form .row.mb-2:has(input[name="password"]),
body form .row.mb-2:has(input[name="confirmation"]),
body form .row.mb-2:has(select[name="title"]),
body form .row.my-2:has(input[name="privacy"]),
body form .row:has(button[type="submit"]),
body form .row:has(button[name="register"]) {
    display: flex !important;
}

/* REZEPT-LOGIK: Standard */
body:has(input[name^="rf"]):not(:has(input[name="cat"][value="230"])) form .row.mb-2:has(#inputRf1),
body:has(input[name^="rf"]):not(:has(input[name="cat"][value="230"])) form .row.mb-2:has(#inputRf11),
body:has(input[name^="rf"]):not(:has(input[name="cat"][value="230"])) form .row.mb-2:has(#inputRf17) {
    display: flex !important;
}

/* REZEPT-LOGIK: CMD */
body:has(input[name="cat"][value="230"]) form .row.mb-2:has(#inputRf1),
body:has(input[name="cat"][value="230"]) form .row.mb-2:has(#inputRf4),
body:has(input[name="cat"][value="230"]) form .row.mb-2:has(#inputRf5) {
    display: flex !important;
}

/* =========================================
   6. LABEL-UMBENENNUNGEN & FEHLER
   ========================================= */

/* Standard Labels */
body:not(:has(input[name="cat"][value="230"])) label[for="inputRf11"] { font-size: 0 !important; }
body:not(:has(input[name="cat"][value="230"])) label[for="inputRf11"]::after {
    content: "2. Heilmittel nach Maßgabe des Kataloges";
    font-size: 1rem !important; display: block;
}

body:not(:has(input[name="cat"][value="230"])) label[for="inputRf17"] { font-size: 0 !important; }
body:not(:has(input[name="cat"][value="230"])) label[for="inputRf17"]::after {
    content: "3. Ergänzendes Heilmittel nach Maßgabe des Kataloges";
    font-size: 1rem !important; display: block;
}

/* CMD Labels */
body:has(input[name="cat"][value="230"]) label[for="inputRf4"] { font-size: 0 !important; }
body:has(input[name="cat"][value="230"]) label[for="inputRf4"]::after {
    content: "2. Vorrangige Heilmittel (bitte mit Komma trennen)";
    font-size: 1rem !important; display: block;
}

body:has(input[name="cat"][value="230"]) label[for="inputRf5"] { font-size: 0 !important; }
body:has(input[name="cat"][value="230"]) label[for="inputRf5"]::after {
    content: "3. Ergänzende Heilmittel (bitte mit Komma trennen)";
    font-size: 1rem !important; display: block;
}

.alert-danger {
    border-radius: 10px !important;
    border: none !important;
    background-color: #fce4e4 !important;
    color: #c0392b !important;
}