/* Allgemeines Styling für den Vitaminbedarfsrechner-Wrapper */
.vitamin-calculator-wrapper {
    background-color: #f9f9f9;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    max-width: 100%; /* Behält die maximale Breite des Elternelements bei */
    margin: 20px auto;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-sizing: border-box; /* Stellt sicher, dass Padding und Border in der Breite enthalten sind */
}

/* Styling für die Überschriften im Rechner */
.vitamin-calculator-wrapper h2 {
    text-align: center;
    color: #333;
    margin-bottom: 20px;
}

/* Styling für Formulargruppen */
.form-group {
    margin-bottom: 15px;
}

.form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.form-group input[type="number"],
.form-group select {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box; /* Wichtig für korrekte Breitenberechnung */
}

/* Styling für den Button */
.calculate-button {
    display: block;
    width: 100%;
    padding: 12px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.calculate-button:hover {
    background-color: #0056b3;
}

/* Styling für die Ergebnisse */
.results {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}

.results h3 {
    color: #333;
    margin-bottom: 15px;
    text-align: center;
}

.results p {
    margin-bottom: 10px;
    line-height: 1.6;
    color: #444;
}

.results ul {
    list-style-type: none;
    padding: 0;
}

.results ul li {
    background-color: #e2f0ff;
    margin-bottom: 8px;
    padding: 10px 15px;
    border-radius: 4px;
    border-left: 5px solid #007bff;
}

/* Referenztabelle Styling */
.reference-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
}

.reference-table th,
.reference-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.reference-table th {
    background-color: #f2f2f2;
    font-weight: bold;
    color: #333;
}

.reference-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.reference-table tr:hover {
    background-color: #f1f1f1;
}


/* --- Tooltip Styling Anpassungen --- */

/* Allgemeines Styling für den Tooltip-Container (das 'i'-Icon) */
.help-tooltip-container {
    position: relative; /* Wichtig, damit der Tooltip-Inhalt relativ dazu positioniert wird */
    display: inline-block; /* Erlaubt dem Container, seinen Inhalt zu umschließen */
    cursor: pointer; /* Zeigt an, dass es anklickbar ist */
    margin-left: 5px; /* Kleiner Abstand zum Text */
    vertical-align: middle; /* Verbessert die Ausrichtung mit umgebendem Text */
    font-size: 0.9em; /* Macht das 'i' ggf. etwas kleiner */
}

/* Styling für das 'i'-Symbol selbst */
.help-tooltip-icon {
    display: inline-flex; /* Für Zentrierung des 'i' */
    align-items: center;
    justify-content: center;
    width: 18px; /* Größe des Icons */
    height: 18px; /* Größe des Icons */
    border-radius: 50%; /* Runde Form */
    background-color: #007bff; /* Hintergrundfarbe des Icons */
    color: white; /* Farbe des 'i' */
    font-style: normal; /* Entfernt Kursivschrift, falls das 'i' ein <i> ist */
    font-weight: bold;
    font-family: serif; /* Für ein klassisches 'i' */
    line-height: 1; /* Zentriert das 'i' vertikal */
}


/* Styling für den Tooltip-Inhalt selbst */
.help-tooltip-content {
    visibility: hidden; /* Standardmäßig unsichtbar */
    opacity: 0; /* Standardmäßig vollständig transparent */
    position: absolute;
    bottom: 100%; /* Position oberhalb des Icons */
    left: 50%; /* Start in der Mitte des Icons */
    transform: translateX(-50%) translateY(-10px); /* Zentriert horizontal und verschiebt leicht nach oben */
    background-color: #333; /* Dunkler Hintergrund */
    color: #fff; /* Heller Text */
    padding: 8px 12px; /* Angepasster Innenabstand für bessere Optik */
    border-radius: 5px; /* Abgerundete Ecken */
    z-index: 1000; /* Stellt sicher, dass es über anderen Elementen liegt */
    white-space: normal; /* WICHTIG: Erlaubt dem Text, umzubrechen */
    text-align: left; /* Stellt sicher, dass der Text im Tooltip linksbündig ausgerichtet ist */
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; /* Sanfter Übergang */

    /* Flexible Breite für den Inhalt, mit Begrenzungen */
    width: auto; /* Erlaubt die Breitenanpassung durch den Inhalt */
    min-width: 180px; /* Mindestbreite für Lesbarkeit */
    max-width: 320px; /* Angepasste Maximale Breite, um Überlauf zu reduzieren */
    box-sizing: border-box; /* Padding und Border werden in die Gesamtbreite und -höhe des Elements einbezogen */

    font-size: 0.9em; /* Etwas kleinere Schriftgröße für den Tooltip-Text */
    line-height: 1.4; /* Verbessert den Zeilenabstand */
}

/* Tooltip-Pfeil Styling */
.help-tooltip-content::after {
    content: '';
    position: absolute;
    top: 100%; /* Positioniert den Pfeil unterhalb des Tooltip-Inhalts */
    left: 50%;
    transform: translateX(-50%);
    border-width: 8px; /* Größe des Pfeils */
    border-style: solid;
    border-color: #333 transparent transparent transparent; /* Pfeil zeigt nach unten */
}

/* Tooltip anzeigen bei Hover/Fokus */
.help-tooltip-container:hover .help-tooltip-content,
.help-tooltip-container:focus-within .help-tooltip-content {
    visibility: visible; /* Sichtbar machen */
    opacity: 1; /* Volle Deckkraft */
    transform: translateX(-50%) translateY(0); /* Bewegung in die Endposition */
}


/* Media Query für kleinere Bildschirme (Mobilgeräte) */
@media screen and (max-width: 768px) {
    .help-tooltip-content {
        min-width: 140px; /* Kleinere Mindestbreite für Mobilgeräte */
        max-width: 90vw; /* Nimmt auf kleinen Bildschirmen bis zu 90% der Viewport-Breite ein, um Randprobleme zu minimieren */
        left: 50%; /* Bleibt anfänglich zentriert */
        transform: translateX(-50%) translateY(-10px); /* Zentrierung und Versatz beibehalten */
        padding: 6px 10px; /* Etwas weniger Padding auf Mobilgeräten */
        font-size: 0.85em; /* Noch etwas kleinere Schrift auf Mobilgeräten */
    }

    /* JavaScript-basierte Klassen für Rand-Anpassung, falls benötigt
       Diese Regeln würden durch JavaScript angewendet, wenn der Tooltip den Bildschirmrand überläuft.
       Ohne JavaScript kann es weiterhin zu Überläufen kommen, wenn das Icon sehr nah am Rand ist. */
    .help-tooltip-content.tooltip-align-left {
        left: 5px; /* Ein kleiner Abstand zum linken Rand */
        right: auto; /* Rechten Wert zurücksetzen */
        transform: translateX(0) translateY(-10px); /* Keine horizontale Zentrierung mehr */
    }
    .help-tooltip-content.tooltip-align-right {
        right: 5px; /* Ein kleiner Abstand zum rechten Rand */
        left: auto; /* Linken Wert zurücksetzen */
        transform: translateX(0) translateY(-10px); /* Keine horizontale Zentrierung mehr */
    }
}

/* --- NEUES Styling für den Haftungsausschluss / Hinweis --- */
.vitamin-calculator-disclaimer {
    margin-top: 25px; /* Etwas mehr Abstand nach oben */
    padding: 15px 20px; /* Innenabstand für den Kasten */
    background-color: #fff3cd; /* Ein weiches Gelb als Hintergrund (Warnfarbe) */
    border: 1px solid #ffeeba; /* Passender Rahmen */
    border-left: 5px solid #ffc107; /* Deutlicherer linker Rand in Gelb/Orange */
    border-radius: 5px; /* Leicht abgerundete Ecken */
    color: #664d03; /* Dunklerer Text für bessere Lesbarkeit auf hellem Gelb */
    font-size: 0.95em; /* Etwas größere Schrift */
    line-height: 1.5; /* Verbesserter Zeilenabstand */
    font-weight: 600; /* Halb-fett, macht den Text deutlicher */
    text-align: left; /* Text linksbündig ausrichten */
    box-shadow: 0 2px 4px rgba(0,0,0,0.08); /* Leichter Schatten für "Tiefe" */
}

/* Spezifisches Styling für den zweiten Satz im Disclaimer (noch stärker hervorheben) */
.vitamin-calculator-disclaimer strong {
    font-weight: 700; /* Stark fett */
    color: #a00; /* Eine auffälligere Farbe, z.B. ein gedämpftes Rot */
}