/*
╔══════════════════════════════════════════════════════════════════════════════╗
║                                                                              ║
║  📦 INFO-BOXES COMPONENT SYSTEM                                              ║
║  Treatment Pages - Reusable Box Components                                   ║
║                                                                              ║
║  Purpose: Wiederverwendbare Box-Komponenten für alle Treatment-Seiten       ║
║  (Bleaching, Implants, Veneers, PZR, etc.)                                  ║
║                                                                              ║
╚══════════════════════════════════════════════════════════════════════════════╝

INHALTSVERZEICHNIS:
──────────────────────────────────────────────────────────────────────────────
1. Farb-System & Variablen
2. Base Box Styles (alle Boxen teilen diese)
3. Box-Typ 1: Kategorien-Box (Dimensions-Box)
4. Box-Typ 2: Nerd-Box (Wissenschafts-Box)
5. Box-Typ 3: Vergleichs-Box (Comparison-Box)
6. Box-Typ 4: Methoden-Box (Methods-Box)
7. Box-Typ 5: Kosten-Box (Cost-Box)
8. Box-Typ 6: Rechenbeispiel-Box (Calculation-Box)
9. Box-Typ 7: Ablauf-Box (Process-Box)
10. Box-Typ 8: Pflege-Box (Care-Box)
11. Box-Typ 9: Nebenwirkungen-Box (Side-Effects-Box)
12. Box-Typ 10: Warnzeichen-Box (Warning-Box)
13. Utility Classes (Icons, Badges, Dividers)

═══════════════════════════════════════════════════════════════════════════════
*/


/* ═══════════════════════════════════════════════════════════════════════════
   1. FARB-SYSTEM & VARIABLEN
   ═══════════════════════════════════════════════════════════════════════════

   📋 VEREINFACHTES 2-FARBEN GRAUSYSTEM:

   Textfarben (nur 2 Grautöne):
   • --text-primary (#1e293b)     - Überschriften, wichtige Texte
   • --text-secondary (#64748b)   - Fließtext, Listen, normale Texte

   Akzentfarben (für Boxen und Highlights):
   • Teal (#23cfb2)   - Standard Info-Boxen, Akzente, Badges
   • Orange (#fb923c) - Milde Warnungen (Nebenwirkungen)
   • Red (#ef4444)    - Ernste Warnungen (Sofort zum Arzt)
   • Blue (#3b82f6)   - Vorbereitung-Schritte in Ablauf
   • Green (#22aea1)  - Behandlung-Schritte in Ablauf

   WICHTIG: Keine hartkodierten Grautöne (#374151, #6b7280, #666, etc.)!
   Nur CSS-Variablen verwenden für bessere Konsistenz.

   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    /* Teal accent colors (consistent with old bleaching page) */
    --primary-color: #23cfb2;        /* Light teal - borders, buttons */
    --primary-color-dark: #22aea1;   /* Dark teal - headlines in boxes */

    /* Text colors (2-color gray system) */
    --text-primary: #1e293b;         /* Dark gray - headlines, important text */
    --text-secondary: #64748b;       /* Medium gray - body text, lists */

    /* Box-specific colors */
    --box-border-teal: #23cfb2;
    --box-border-orange: #fb923c;
    --box-border-red: #ef4444;
    --box-step-blue: #3b82f6;
    --box-step-green: #22aea1;

    /* Box layout */
    --box-bg: white;
    --box-border-width: 2px;
    --box-border-radius: 12px;
    --box-padding: 1.125rem 1.5rem;
    --box-margin-bottom: 2rem;
    --box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);

    --box-icon-size: 1.5rem;
    --box-icon-margin: 0.75rem;

    --box-divider-color: rgba(35, 207, 178, 0.2);
    --box-divider-light: #e5e7eb;
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. BASE BOX STYLES
   ═══════════════════════════════════════════════════════════════════════════

   Gemeinsame Styles für ALLE Box-Typen.
   Jede spezifische Box erbt diese Base-Styles.

   ═══════════════════════════════════════════════════════════════════════════ */

.info-box {
    background: var(--box-bg);
    border-radius: var(--box-border-radius);
    padding: var(--box-padding);
    margin-bottom: var(--box-margin-bottom);
    box-shadow: var(--box-shadow);
}

/* Border-Varianten */
.info-box--teal {
    border: var(--box-border-width) solid var(--box-border-teal);
}

.info-box--orange {
    border: var(--box-border-width) solid var(--box-border-orange);
}

.info-box--red {
    border: var(--box-border-width) solid var(--box-border-red);
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. BOX-TYP 1: KATEGORIEN-BOX (Dimensions-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Beschreibt mehrere Arten/Kategorien einer Dimension, die zusammengehören
   aber unterschiedlich sind. KEIN Vergleich, sondern Beschreibung von
   Begriffen/Dingen einer Dimension.

   VERWENDUNG:
   • Bleaching:  Arten von Zahnverfärbungen (Oberflächlich, Tief, etc.)
   • Implants:   Implantat-Typen (Sofortimplantat, Verzögert, Spät)
   • Veneers:    Veneer-Materialien (Keramik, Komposit, Lumineers)
   • PZR:        Reinigungsstufen (Basis, Standard, Intensiv)

   STRUKTUR:
   • Icon oben (relevant für Thema)
   • Headline: "Arten von [Thema]"
   • Divider-Linie
   • 3-5 Items mit:
     - Bold Subheadline
     - Beschreibungstext
     - Trennlinie zwischen Items

   HTML BEISPIEL:
   <div class="info-box info-box--teal category-box">
       <div class="box-icon">🦷</div>
       <h3 class="box-title">Arten von Zahnverfärbungen</h3>
       <div class="box-divider"></div>

       <div class="category-item">
           <h4 class="category-item__title">Oberflächliche Verfärbungen</h4>
           <p class="category-item__text">Entstehen durch täglich konsumierte...</p>
       </div>
       <div class="item-divider"></div>

       <!-- Weitere Items... -->
   </div>

   ═══════════════════════════════════════════════════════════════════════════ */

.category-box {
    /* Spezifische Anpassungen für Kategorien-Box */
}

.category-item {
    padding: 1.25rem 0;
}

.category-item__title {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    line-height: 1.3;
    font-weight: 600;
}

.category-item__text {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}


/* ═══════════════════════════════════════════════════════════════════════════
   4. BOX-TYP 2: NERD-BOX (Wissenschafts-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Erklärt ein komplexes wissenschaftliches Konzept oder technisches Detail.
   Für "Nerds" die es genau wissen wollen.

   VERWENDUNG:
   • Bleaching:  Aktiver Sauerstoff (O₂) - Was ist das?
   • Implants:   Osseointegration - Wie verwächst Titan mit Knochen?
   • Veneers:    Adhäsionstechnik - Wie halten Veneers?
   • PZR:        Biofilm - Was ist bakterieller Zahnbelag?

   STRUKTUR:
   • Icon oben (💡 oder themenspezifisch)
   • Badge mit Formel/Symbol (z.B. O₂, Ti, Ca)
   • Titel neben Badge
   • 1-2 Absätze wissenschaftliche Erklärung

   HTML BEISPIEL:
   <div class="info-box info-box--teal nerd-box">
       <div class="box-icon">💡</div>
       <div class="nerd-box__header">
           <span class="nerd-box__badge">O₂</span>
           <span class="nerd-box__label">Aktiver Sauerstoff</span>
       </div>
       <p>Aktiver Sauerstoff bezeichnet hochreaktive...</p>
   </div>

   ═══════════════════════════════════════════════════════════════════════════ */

.nerd-box__header {
    margin-bottom: 1rem;
    text-align: center;
}

.nerd-box__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(34, 174, 161, 0.15);
    color: var(--primary-color-dark); /* Dark teal for box headlines */
    text-align: center;
    font-weight: 700;
    font-size: 1.25rem; /* Default size */
    vertical-align: middle;
    margin-right: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
}

/* Large badge: 1-2 characters (O₂, H₂) */
.nerd-box__badge--large {
    font-size: 1.25rem;
}

/* Small badge: 3+ characters (GOZ, H₂O₂, PZR) */
.nerd-box__badge--small {
    font-size: 0.875rem;
}

.nerd-box__label {
    color: var(--primary-color-dark); /* Dark teal for box headlines */
    font-size: 1.125rem;
    font-weight: 600;
    display: inline-block;
    vertical-align: middle;
}

.nerd-box p {
    margin-bottom: 1rem;
    color: var(--text-primary);
    line-height: 1.6;
}

.nerd-box p:last-child {
    margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   5. BOX-TYP 3: VERGLEICHS-BOX (Comparison-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Stellt 2 oder mehr Dinge direkt gegenüber zum Vergleichen.

   VERWENDUNG:
   • Bleaching:  Wasserstoffperoxid vs. Carbamidperoxid
   • Implants:   Titan vs. Keramik-Implantate
   • Veneers:    Keramik vs. Komposit Veneers
   • PZR:        Handinstrumente vs. Ultraschall

   STRUKTUR:
   • Icon oben (🧪)
   • Headline: "[Thema] im Vergleich"
   • Divider
   • Grid: 1 Spalte Mobile, 2 Spalten Desktop
   • Jedes Item:
     - Badge mit Symbol (H₂O₂, Ti, etc.)
     - Name als H4
     - Eigenschaften mit Bold Labels

   HTML BEISPIEL:
   <div class="info-box info-box--teal comparison-box">
       <div class="box-icon">🧪</div>
       <h3 class="box-title">Bleaching-Wirkstoffe im Vergleich</h3>
       <div class="box-divider"></div>

       <div class="comparison-grid">
           <div class="comparison-item">
               <div class="comparison-item__header">
                   <div class="comparison-item__badge">H₂O₂</div>
                   <h4 class="comparison-item__title">Wasserstoffperoxid</h4>
               </div>
               <div class="comparison-property">
                   <strong>Zusammensetzung:</strong>
                   <p>Eine simple aber sehr effektive Verbindung...</p>
               </div>
           </div>
           <!-- Item 2... -->
       </div>
   </div>

   ═══════════════════════════════════════════════════════════════════════════ */

.comparison-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 769px) {
    .comparison-grid {
        grid-template-columns: 1fr 1fr;
    }

    .comparison-grid .mobile-divider {
        display: none;
    }
}

.comparison-item__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.comparison-item__badge {
    width: 56px;
    height: 56px;
    min-width: 56px;
    border-radius: 50%;
    background: rgba(34, 174, 161, 0.15);
    color: var(--primary-color-dark); /* Dark teal for box headlines */
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.25rem;
}

.comparison-item__title {
    margin: 0;
    color: var(--text-primary); /* Dark for headlines */
    font-size: 1.125rem;
    font-weight: 600;
}

.comparison-property {
    margin-bottom: 0.75rem;
}

.comparison-property:last-child {
    margin-bottom: 0;
}

.comparison-property strong {
    display: block;
    margin-bottom: 0.25rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.comparison-property p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.5;
}

.mobile-divider {
    border-bottom: 1px solid var(--box-divider-color);
}


/* ═══════════════════════════════════════════════════════════════════════════
   6. BOX-TYP 4: METHODEN-BOX (Methods-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Beschreibt eine spezifische Behandlungsmethode mit allen Details.

   VERWENDUNG:
   • Bleaching:  In-Office, Home, Drogerie
   • Implants:   Klassisches Verfahren, Sofortimplantation, All-on-4
   • Veneers:    Konventionelle Veneers, Non-Prep Veneers
   • PZR:        Basis-Reinigung, Professionelle Reinigung, Intensiv

   STRUKTUR:
   • Icon (⚕️)
   • Headline: Methoden-Name
   • Divider
   • Eigenschaften (Dauer, Konzentration, Ergebnis, Für wen)
   • Vorteile/Nachteile Listen

   HTML BEISPIEL:
   <div class="info-box info-box--teal method-box">
       <div class="box-icon">⚕️</div>
       <h3 class="box-title">In-Office Bleaching</h3>
       <div class="box-divider"></div>

       <div class="method-properties">
           <div class="method-property">
               <strong>Dauer:</strong> 60-90 Minuten
           </div>
       </div>

       <div class="pros-cons">
           <div class="pros">
               <h4>✅ Vorteile</h4>
               <ul>...</ul>
           </div>
           <div class="cons">
               <h4>❌ Nachteile</h4>
               <ul>...</ul>
           </div>
       </div>
   </div>

   ═══════════════════════════════════════════════════════════════════════════ */

.method-properties {
    margin-bottom: 1.5rem;
}

.method-property {
    margin-bottom: 0.75rem;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.method-property:last-child {
    margin-bottom: 0;
}

.method-property strong {
    color: var(--text-primary);
    font-weight: 600;
}

.pros-cons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .pros-cons {
        grid-template-columns: 1fr 1fr;
    }
}

.pros h4,
.cons h4 {
    margin: 0 0 0.75rem 0;
    font-size: 1rem;
    font-weight: 600;
}

.pros ul,
.cons ul {
    margin: 0;
    padding-left: 1.5rem;
    line-height: 1.6;
}


/* ═══════════════════════════════════════════════════════════════════════════
   7. BOX-TYP 5: KOSTEN-BOX (Cost-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Zeigt Kosten-Tabelle mit Preisübersicht im Rechnungs-Style.

   VERWENDUNG:
   • Bleaching:  In-Office/Home/Drogerie Kosten
   • Implants:   Einzelzahn/Mehrere/Knochenaufbau Kosten
   • Veneers:    Keramik/Komposit Preise
   • PZR:        Basis/Standard/Premium Preise

   STRUKTUR:
   • Icon (💰)
   • Headline: "[Methode] Kosten"
   • Divider
   • Tabelle mit Positionen und Preisen
   • Gesamt-Preis hervorgehoben

   HTML BEISPIEL:
   <div class="info-box info-box--teal cost-box">
       <div class="box-icon">💰</div>
       <h3 class="box-title">In-Office Bleaching Kosten</h3>
       <div class="box-divider"></div>

       <table class="cost-table">
           <tr>
               <td>Voruntersuchung & Beratung</td>
               <td class="cost-table__price">80–120 €</td>
           </tr>
           <tr class="cost-table__total">
               <td><strong>Gesamt</strong></td>
               <td class="cost-table__price"><strong>610–1.380 €</strong></td>
           </tr>
       </table>
   </div>

   ═══════════════════════════════════════════════════════════════════════════ */

.cost-table {
    width: 100%;
    border-collapse: collapse;
}

.cost-table tr {
    border-bottom: 1px solid var(--box-divider-light);
}

.cost-table tr:last-child {
    border-bottom: none;
}

.cost-table td {
    padding: 0.5rem 0;
    text-align: left;
    color: var(--text-secondary);
    font-weight: 500;
}

.cost-table__price {
    text-align: right;
    color: var(--text-secondary);
    font-weight: 500;
    white-space: nowrap;
}

.cost-table__total {
    border-top: 2px solid var(--box-divider-color);
    font-weight: 600;
}

.cost-table__total td {
    padding-top: 1rem;
    font-size: 1.05rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   8. BOX-TYP 6: RECHENBEISPIEL-BOX (Calculation-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Zeigt konkrete Rechenbeispiele (ROI, Versicherung, Amortisation).

   VERWENDUNG:
   • Bleaching:  Versicherungs-Ersparnis berechnen
   • Implants:   Kosten über Lebensdauer vs. Brücke
   • Veneers:    Kosten pro Jahr berechnen
   • PZR:        Jährliche Ersparnis durch Prophylaxe

   STRUKTUR:
   • Icon (🎯 oder 📊)
   • Headline: "Rechenbeispiel"
   • Beispiel-Szenario
   • Rechnung Schritt-für-Schritt
   • Ergebnis hervorgehoben

   HTML BEISPIEL:
   <div class="info-box info-box--teal calculation-box">
       <div class="box-icon">🎯</div>
       <h3 class="box-title">Rechenbeispiel</h3>
       <div class="box-divider"></div>

       <p class="calculation-scenario">
           Behandlungskosten: 800 €<br>
           Versicherung erstattet: 80%
       </p>

       <div class="calculation-steps">
           <p>800 € × 80% = 640 € Erstattung</p>
           <p>800 € − 640 € = <strong>160 € Eigenanteil</strong></p>
       </div>

       <div class="calculation-result">
           Sie sparen 640 € durch Ihre Versicherung!
       </div>
   </div>

   ═══════════════════════════════════════════════════════════════════════════ */

.calculation-scenario {
    margin-bottom: 1rem;
    padding: 0.75rem;
    background: rgba(35, 207, 178, 0.05);
    border-radius: 8px;
    color: var(--text-primary);
    line-height: 1.6;
}

.calculation-steps {
    margin-bottom: 1rem;
}

.calculation-steps p {
    margin: 0.5rem 0;
    color: var(--text-primary);
    font-size: 0.95rem;
}

.calculation-result {
    padding: 1rem;
    background: rgba(34, 174, 161, 0.1);
    border-left: 4px solid var(--box-border-teal);
    border-radius: 4px;
    color: var(--text-primary);
    font-weight: 600;
    font-size: 1.05rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   9. BOX-TYP 7: ABLAUF-BOX (Process-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Zeigt schrittweisen Behandlungsablauf.

   VERWENDUNG:
   • Bleaching:  In-Office Ablauf, Home Ablauf
   • Implants:   OP-Ablauf, Einheilungsphase
   • Veneers:    Präparation, Anpassung, Zementierung
   • PZR:        Reinigungsschritte

   STRUKTUR:
   • Icon (🔍 oder ⚕️)
   • Headline: "[Methode] Ablauf"
   • Nummerierte Schritte (1-6)
   • Zeitangaben (floating right)
   • Farbkodierung (Blau = Vorbereitung, Grün = Behandlung)

   HTML BEISPIEL:
   <div class="info-box info-box--teal process-box">
       <div class="box-icon">🔍</div>
       <h3 class="box-title">In-Office Bleaching Ablauf</h3>
       <div class="box-divider"></div>

       <div class="process-steps">
           <div class="process-step">
               <span class="step-number step-number--blue">1</span>
               <div class="step-content">
                   <p>Professionelle Zahnreinigung
                   <span class="step-time">ca. 30 Min.</span></p>
               </div>
           </div>
           <!-- Weitere Schritte... -->
       </div>
   </div>

   ═══════════════════════════════════════════════════════════════════════════ */

.process-steps {
    /* Container für alle Schritte */
}

.process-step {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.process-step:last-child {
    margin-bottom: 0;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-weight: 700;
    font-size: 0.875rem;
    flex-shrink: 0;
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    color: white;
}

.step-number--blue {
    background: var(--box-step-blue);
}

.step-number--green {
    background: var(--box-step-green);
}

.step-content {
    flex: 1;
}

.step-content p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.9rem;
    line-height: 1.6;
    clear: both;
}

.step-time {
    float: right;
    color: var(--primary-color); /* Teal accent for time indicators */
    font-weight: 600;
    font-size: 0.875rem;
    white-space: nowrap;
    margin-left: 0.75rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   10. BOX-TYP 8: PFLEGE-BOX (Care-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Pflegehinweise und Empfehlungen nach Behandlung.

   VERWENDUNG:
   • Bleaching:  48h-Regel, Langfristige Pflege, Lifestyle
   • Implants:   Mundhygiene, Kontrolltermine
   • Veneers:    Pflege, Was vermeiden
   • PZR:        Nachsorge, Häusliche Pflege

   STRUKTUR:
   • Icon (✅ oder themenspezifisch)
   • Headline
   • Empfehlungen mit Bubbles (✅ Empfohlen, ❌ Vermeiden)
   • Listen mit Do's und Don'ts

   HTML BEISPIEL:
   <div class="info-box info-box--teal care-box">
       <div class="box-icon">✅</div>
       <h3 class="box-title">Die ersten 48 Stunden</h3>
       <div class="box-divider"></div>

       <div class="care-grid">
           <div class="care-column">
               <div class="icon-bubble icon-bubble--red">❌</div>
               <h4 class="care-column__title">Strikt vermeiden</h4>
               <ul>...</ul>
           </div>
           <div class="care-column">
               <div class="icon-bubble icon-bubble--green">✅</div>
               <h4 class="care-column__title">Empfohlen</h4>
               <ul>...</ul>
           </div>
       </div>
   </div>

   ═══════════════════════════════════════════════════════════════════════════ */

.care-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .care-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.care-column {
    text-align: center;
}

.icon-bubble {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 0.75rem;
}

.icon-bubble--red {
    background: rgba(220, 38, 38, 0.15);
}

.icon-bubble--green {
    background: rgba(34, 174, 161, 0.15);
}

.care-column__title {
    margin: 0 0 1rem 0;
    color: var(--text-primary); /* Dark for headlines */
    font-size: 1rem;
    font-weight: 600;
}

.care-column ul {
    text-align: left;
    margin: 0;
    padding-left: 1.5rem;
    line-height: 1.6;
    color: var(--text-secondary);
    font-size: 0.9rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   11. BOX-TYP 9: NEBENWIRKUNGEN-BOX (Side-Effects-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Warnt vor milden Nebenwirkungen oder Risiken.

   VERWENDUNG:
   • Bleaching:  Zahnempfindlichkeit, Zahnfleischreizung
   • Implants:   Schwellung, Schmerzen (normal)
   • Veneers:    Anpassungsphase
   • PZR:        Vorübergehende Empfindlichkeit

   STRUKTUR:
   • Icon (⚠️)
   • Headline: "Mögliche Nebenwirkungen"
   • Übersichts-Box mit allen Nebenwirkungen

   DESIGN:
   • Border: Orange (#fb923c)
   • Tone: Informativ, nicht alarmierend

   HTML BEISPIEL:
   <div class="info-box info-box--orange side-effects-box">
       <div class="box-icon">⚠️</div>
       <h3 class="box-title">Mögliche Nebenwirkungen</h3>
       <div class="box-divider box-divider--orange"></div>

       <div class="side-effects-grid">
           <div class="side-effect">
               <h4 class="side-effect__title">Zahnempfindlichkeit</h4>
               <p class="side-effect__frequency">Häufigkeit: 60-70%</p>
               <p class="side-effect__duration">Dauer: 24-48 Stunden</p>
           </div>
           <!-- Weitere Nebenwirkungen... -->
       </div>
   </div>

   ═══════════════════════════════════════════════════════════════════════════ */

.side-effects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

.side-effect {
    padding: 0.75rem 0;
}

.side-effect__title {
    margin: 0 0 0.5rem 0;
    color: var(--text-primary);
    font-size: 1rem;
    font-weight: 600;
}

.side-effect__frequency,
.side-effect__duration {
    margin: 0.25rem 0;
    color: var(--text-secondary);
    font-size: 0.875rem;
}


/* ═══════════════════════════════════════════════════════════════════════════
   12. BOX-TYP 10: WARNZEICHEN-BOX (Warning-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Warnt vor ernsten Warnzeichen, die ärztliche Hilfe erfordern.

   VERWENDUNG:
   • Bleaching:  Starke Schmerzen, Verätzungen
   • Implants:   Anzeichen für Infektion, Implantatverlust
   • Veneers:    Abplatzen, starke Schmerzen
   • PZR:        Starke Blutungen

   STRUKTUR:
   • Icon (❌ oder ⛔)
   • Headline: "Sofort zum Zahnarzt bei..."
   • Liste mit Warnzeichen

   DESIGN:
   • Border: Red (#ef4444)
   • Tone: Dringend, ernst

   HTML BEISPIEL:
   <div class="info-box info-box--red warning-box">
       <div class="box-icon">❌</div>
       <h3 class="box-title">Sofort zum Zahnarzt bei...</h3>
       <div class="box-divider box-divider--red"></div>

       <ul class="warning-list">
           <li>Starke, anhaltende Schmerzen über 48 Stunden</li>
           <li>Weiße Flecken oder Verätzungen am Zahnfleisch</li>
           <!-- Weitere Warnzeichen... -->
       </ul>
   </div>

   ═══════════════════════════════════════════════════════════════════════════ */

.warning-box__title {
    color: #dc2626;
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    text-align: center;
}

.warning-box__intro {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.warning-list {
    margin: 0;
    padding-left: 1.5rem;
    line-height: 1.7;
    font-size: 0.95rem;
}

.warning-list li {
    margin-bottom: 0.75rem;
    color: var(--text-secondary); /* Same as body text - no !important needed */
}

.warning-list li:last-child {
    margin-bottom: 0;
}

/* Orange Variante: Title-Farbe überschreiben (für AlertBox mit severity: warning) */
.info-box--orange .warning-box__title {
    color: #ea580c;
}

/* AlertBox: Spacing wie im Original (nur margin-bottom, kein gap) */
.alert-box .side-effects-grid {
    gap: 0;
}

.alert-box .side-effect {
    padding: 0;
    margin-bottom: 1rem;
}

.alert-box .side-effect:last-child {
    margin-bottom: 0;
}


/* ═══════════════════════════════════════════════════════════════════════════
   13. BOX-TYP 11: VERSICHERUNGSVERGLEICH CTA-BOX (Insurance-CTA-Box)
   ═══════════════════════════════════════════════════════════════════════════

   ZWECK:
   Call-to-Action für Versicherungsvergleich mit prominenter Gestaltung.
   Conversion-optimierte Box für Leads zum Tarifvergleich.

   VERWENDUNG:
   • Bleaching:  Nach Kosten-Section, vor FAQ
   • Implants:   Nach Kosten-Übersicht
   • Veneers:    Nach Materialvergleich
   • PZR:        Nach Tarif-Beschreibung
   • Allgemein:  2-3x pro Artikel strategisch platzieren

   STRUKTUR:
   • Gradient-Hintergrund (Teal-Grün)
   • Left-Border Teal (4px)
   • Icon + Headline horizontal
   • Beschreibungstext
   • Teal CTA-Button

   HTML BEISPIEL:
   <div class="insurance-cta-box">
       <div class="insurance-cta-box__header">
           <span class="insurance-cta-box__icon">💡</span>
           <h4 class="insurance-cta-box__title">Bleaching-Kosten sparen mit der richtigen Versicherung</h4>
       </div>
       <p class="insurance-cta-box__text">
           Vergleichen Sie jetzt Zahnzusatzversicherungen, die professionelles Bleaching
           vollständig erstatten – und finden Sie den optimalen Tarif für strahlend weiße
           Zähne ohne Zusatzkosten.
       </p>
       <a href="/zahnzusatzversicherung-bleaching" class="insurance-cta-box__button">
           Bleaching-Tarife finden
       </a>
   </div>

   VARIANTEN (Text anpassen):
   • Bleaching:  "Bleaching-Kosten sparen..." → /zahnzusatzversicherung-bleaching
   • Implants:   "Implantate absichern..." → /zahnzusatzversicherung-vergleich
   • Allgemein:  "Tarife vergleichen..." → /vergleich

   ═══════════════════════════════════════════════════════════════════════════ */

.insurance-cta-box {
    background: linear-gradient(135deg, #f0fdfa 0%, #e6fcf7 100%);
    border-left: 4px solid var(--box-border-teal);
    border-radius: 8px;
    padding: 1.5rem;
    margin: 1.5rem 0 2rem 0;
    box-shadow: 0 2px 8px rgba(35, 207, 178, 0.1);
}

.insurance-cta-box__header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.insurance-cta-box__icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.insurance-cta-box__title {
    color: #374151;
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.3;
}

.insurance-cta-box__text {
    color: #374151;
    line-height: 1.6;
    margin-bottom: 1rem;
    font-size: 0.95rem;
}

.insurance-cta-box__button {
    display: block;
    background: var(--box-border-teal);
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    text-align: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(35, 207, 178, 0.3);
}

.insurance-cta-box__button:hover {
    background: #1db89f;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(35, 207, 178, 0.4);
}

.insurance-cta-box__button:active {
    transform: translateY(0);
}


/* ═══════════════════════════════════════════════════════════════════════════
   14. UTILITY CLASSES
   ═══════════════════════════════════════════════════════════════════════════

   Wiederverwendbare Utility-Klassen für Icons, Badges, Dividers.

   ═══════════════════════════════════════════════════════════════════════════ */

/* Box Icon */
.box-icon {
    text-align: center;
    margin-bottom: var(--box-icon-margin);
    font-size: var(--box-icon-size);
}

/* Box Title */
.box-title {
    color: var(--primary-color-dark);
    text-align: center;
    margin: 0 0 1rem 0;
    font-size: 1.125rem;
    font-weight: 600;
}

/* Box Divider (Top) */
.box-divider {
    border-bottom: 2px solid var(--box-divider-color);
    margin-bottom: 1rem;
}

.box-divider--orange {
    border-bottom-color: rgba(251, 146, 60, 0.2);
}

.box-divider--red {
    border-bottom-color: rgba(239, 68, 68, 0.2);
}

/* Item Divider (Between Items) */
.item-divider {
    border-bottom: 1px solid var(--box-divider-light);
}

/* Utility: Margin Bottom für Paragraphen */
.mb-sm { margin-bottom: 0.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.mb-xl { margin-bottom: 2rem; }

/* Utility: Text Colors */
.text-primary { color: var(--text-primary); }
.text-secondary { color: var(--text-secondary); }
.text-teal { color: var(--box-border-teal); }


/* ═══════════════════════════════════════════════════════════════════════════
   ENDE DER INFO-BOXES COMPONENT SYSTEM

   Letzte Aktualisierung: 2025-10-26
   Autor: Claude Code (mit Christian Behrens)
   ═══════════════════════════════════════════════════════════════════════════ */