/* --- Haupt-Container (Grid-Layout) --- */
.tariff-comparison-grid {
    display: grid;
    /* 1. Standard: Nebeneinander (3 Spalten) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); 
    gap: 20px;
    padding: 10px 0;
    font-family: Arial, sans-serif;
    max-width: 1200px;
    margin:auto;
}

/* --- Tarif-Card --- */
.tariff-card {
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.tariff-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}


.feature-item h3 {
    font-weight: 700;
}


/* --- Card Header (Logo & Name) --- */
.card-header {
    background-color: #f8f8f8;
    padding: 15px;
    text-align: center;
    border-bottom: 2px solid #007bff; /* Akzentfarbe */
}

.anbieter-logo {}

.anbieter-logo img {
    max-height: 100%;
    max-width: 100%;
}

.tariff-name {
    font-size: 1.7em;
    font-weight: 500;
    color: #007bff; /* Preis-Akzent */
    margin: 5px 0 5px 0;

}

.netz-info {
    font-size: 0.9em;
    color: #6c757d;
}

/* --- Features Sektion (3 Spalten f�r Details) --- */
.card-features {
    display: flex;
    justify-content: space-around;
    padding: 15px 10px;
    background-color: #f2f2f2;
    border-bottom: 1px solid #e0e0e0;
}

.feature-item {
    text-align: center;

}

.data-volume { flex: 2; text-align: left;. }

.feature-item .value {
    display: block;
    font-size: 1.2em;
    font-weight: bold;
    color: #343a40;
}

.feature-item .label {
    display: block;
    font-size: 0.8em;
    color: #6c757d;
}


.flat {
	margin: auto 15px; // Content ans Ende
	max-width: 200px;
	flex: 1;

}

.speed { flex: 1}

/* --- Pricing Sektion & CTA --- */
.card-pricing {
display: flex;
    justify-content: space-around;
    padding: 15px 10px;
    background-color: white;
    border-bottom: 1px solid #e0e0e0;

}

.price-box {
    margin-bottom: 10px;
}

.price-value {
    font-size: 2.5em;
    font-weight: 700;
    color: #007bff; /* Preis-Akzent */
    line-height: 1;
}

.price-unit {
    font-size: 1.2em;
    color: #6c757d;
    display: inline-block;
    margin-left: 5px;
}

.sub-info p, .sub-info li, .sub-info a {
    font-size: 0.9em;
    color: #6c757d;
    margin: 5px 0;
}

/* --- CTA Button (wie im vorherigen Beispiel) --- */
.cta-button {
    display: block;
    padding: 12px 15px;
    margin-top: 15px;
    background-color: #6c757d;
    color: #ffffff !important;
    text-decoration: none;
    border-radius: 4px;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease;
    border: none;
}

.cta-button:hover {
    background-color: #5a6268;
}

.cta-button.primary {
    background-color: #28a745; /* Gr�ne Akzentfarbe f�r Top-Deals */
}

.cta-button.primary:hover {
    background-color: #218838;
}

/* --- Responsives Design (Mobile-Ansicht) --- */

@media (max-width: 600px) {
    /* Auf kleinen Bildschirmen nur eine Spalte */
    .tariff-comparison-grid {
        grid-template-columns: 1fr;
    }

    .card-features {
        /* Features untereinander stapeln, um Platz zu sparen */
        flex-direction: column;
    }

    .feature-item {
        padding: 8px 0;
        border-bottom: 1px dotted #ccc;
    }
    
    .feature-item:last-child {
        border-bottom: none;
    }
}

/* --- Basis-Styling f�r die Checkmark-Liste --- */

.checkmark-list {
    list-style: none; /* Entfernt die Standard-Bullet-Points */
    max-width: 400px;
    padding: 0;
    margin: 15px 30px;;
}

.checkmark-list li {
    padding-left: 1.5em; /* Platz f�r den Haken */
    line-height: 1.6; /* Verbessert die Lesbarkeit */
    margin-bottom: 0.5em;
    position: relative; /* Wichtig, damit das Pseudo-Element positioniert werden kann */
    color: #333; /* Standard-Textfarbe */
}

/* --- Das Haken-Symbol erstellen und stylen --- */

.checkmark-list li::before {
    content: "\2713"; /* Unicode f�r das Haken-Symbol (?) */
    color: #28a745; /* Helle, lebendige gr�ne Farbe */
    font-weight: bold;
    font-size: 0.9em;
    
    /* Positionierung des Hakens */
    position: absolute;
    left: 0; /* Positioniert es am linken Rand des padding-Bereichs */
    top: 0;
}

/* Grundlegendes Styling f�r die Liste */
.tariff-status-list {
    list-style: none; /* Entfernt die Standard-Aufz�hlungszeichen */
    padding-left: 0; 
    font-family: Arial, sans-serif;
    max-width: 400px;
}

.tariff-status-list li {
    padding: 4px 0 4px 30px; /* Platz f�r das Icon links */
    position: relative; /* Wichtig f�r die Positionierung des ::before-Elements */
    font-size: 16px;
}


  .info-box {
    background-color: #e8f5e9; /* Helles Grün für den Hintergrund */
    border-left: 6px solid #4caf50; /* Dunklerer grüner Balken links */
    color: #2e7d32; /* Dunkelgrüner Text für gute Lesbarkeit */
    padding: 15px 20px;
    margin: 20px 0;
    border-radius: 4px;
    font-family: sans-serif;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .info-box-icon {
    margin-right: 15px;
    font-size: 24px;
  }

  .info-box-content {
    line-height: 1.5;
  }


/* ----------------------------------------------------- */
/* 1. Styling f�r ERFOLG (Gr�ne Checkbox/Haken) */
/* ----------------------------------------------------- */
.tariff-status-list li.done {
    color: #adff2f; /* Dunkelgr�ner Text */
}

.tariff-status-list li.done::before {
    content: '\2713'; /* Unicode-Zeichen f�r den Haken */
    color: white; /* Wei�e Hakenfarbe */
    background-color: #38c172; /* Knallgr�ner Hintergrund */
    border-radius: 50%; /* Runde Form */
    font-size: 12px;
    font-weight: bold;
    line-height: 18px; /* Zentriert den Haken vertikal */
    text-align: center;
    
    /* Positionierung */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Gr��e des Symbols */
    height: 20px; /* Gr��e des Symbols */
}

/* ----------------------------------------------------- */
/* 2. Styling f�r FEHLER (Rotes Kreuz/X) */
/* ----------------------------------------------------- */
.tariff-status-list li.failed {
    color: #fe0000; /* Dunkelroter Text */
}

.tariff-status-list li.failed::before {
    content: '\2717'; /* Unicode-Zeichen f�r das Kreuz */
    color: white; /* Wei�e Kreuzfarbe */
    background-color: #e3342f; /* Knallroter Hintergrund */
    border-radius: 50%; /* Runde Form */
    font-size: 12px;
    font-weight: bold;
    line-height: 18px; /* Zentriert das Kreuz vertikal */
    text-align: center;
    
    /* Positionierung */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px; /* Gr��e des Symbols */
    height: 20px; /* Gr��e des Symbols */
}

/* Optional: Standard-Style (z.B. ein grauer Punkt f�r unbekannten Status) */
.tariff-status-list li:not(.done):not(.failed)::before {
    content: '\2022'; /* Unicode-Zeichen f�r einen Punkt */
    color: #999;
    font-size: 24px;
    line-height: 1;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
}




/* 1. Grundlegendes Styling f�r den Overlay-Container */
.tariff-overlay-container {
    position: fixed; /* Fixiert den Layer �ber allem */
    top: 0;
    right: 0;
    width: 350px; /* Breite des Layers */
    height: 100%; /* Volle H�he */
    background: linear-gradient(180deg, #1c1c3c 0%, #0a0a1a 100%); /* Dunkler, moderner Gradient */
    box-shadow: -5px 0 15px rgba(0, 0, 0, 0.5);
    z-index: 1000; /* Stellt sicher, dass es �ber anderen Elementen liegt */
    padding: 20px;
    box-sizing: border-box;
    
    /* 2. Standard-Position: Au�erhalb des Sichtfelds (rechts verschoben) */
    transform: translateX(100%); 
    
    /* 3. Elegante Animation */
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); /* Easing-Funktion f�r einen "federnden" Effekt */
    color: #f0f0f0; /* Helle Textfarbe */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* 4. Zustand: Layer ist SICHTBAR (durch Hinzuf�gen dieser Klasse) */
.tariff-overlay-container.open {
    transform: translateX(0); /* Bewegt den Layer an seine normale Position (sichtbar) */
}

/* 5. Styling des Inhalts */
.tariff-overlay-content {
    padding-top: 30px;
}

.overlay-content h2 {
    color: white; /* Akzentfarbe */
    border-bottom: 2px solid white;
    padding-bottom: 10px;
}

.tariff-overlay-content p {
    line-height: 1.6;
    margin-bottom: 30px;
}

.tariff-overlay-content button {
    background: white;
    border: none;
    padding: 10px 20px;
    color: #0a0a1a;
    font-weight: bold;
    cursor: pointer;
    border-radius: 5px;
    transition: background 0.3s;
}

.tariff-overlay-content button:hover {
    background: #4ab3dd;
}

.tariff-overlay-close {float:right;}

/* Error box */
.tariff-error-box {
  display: flex;
  align-items: center;
  background-color: #fff5f5;
  border: 1px solid #feb2b2;
  border-left: 5px solid #f56565;
  margin: auto;
  padding: 16px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  max-width: 1200px;
}

.tariff-error-icon {
  background-color: #f56565;
  color: white;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  margin-right: 12px;
  flex-shrink: 0;
}

.tariff-error-content strong {
  color: #c53030;
  display: block;
  margin-bottom: 4px;
}

.tariff-error-content p {
  color: #9b2c2c;
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
}



/* Formatierung der Auswahlboxen �ber den Tarifen */

.preistabelle {
    appearance: none; /* Entfernt Standard-Pfeil */
    background-color: #ffffff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 10px 30px 10px 10px;
    font-size: 14px;
    font-family: 'Segoe UI', sans-serif;
    color: #374151;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    min-width: 120px;
}

/* Hover- und Focus-Effekte */
.preistabelle:hover {
    border-color: #9ca3af;
}

.preistabelle:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Optimierung f�r mobile Ger�te */
@media (max-width: 600px) {
    .preistabelle {
        width: 100%;
    }
}

        
/* Logik und Aussehen f�r das Ausblenden und Einblenden der Tarife */

        /* Der klickbare Header */
        summary {
            list-style: none;
            cursor: pointer;
            padding: 5px 15px;
            background: #f3f4f6;
            user-select: none;
        }
        summary::-webkit-details-marker { display: none; }

        .card-header-summary {
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        /* --- LOGIK: Gesamte Summary ausblenden wenn OFFEN --- */
        .tariff-card[open] summary {
            display: none;
        }

        /* Das Icon-Styling */
        .toggle-control {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: #ffffff;
            border: 1px solid #d1d5db;
            border-radius: 50%;
            font-weight: bold;
            font-size: 18px;
            color: #374151;
            cursor: pointer;
        }

        /* Icon Logik: Plus wenn geschlossen */
        .tariff-card:not([open]) .toggle-control::after {
            content: "+";
        }

        /* Icon Logik: X wenn offen */
        .tariff-card[open] .toggle-control::after {
            content: "x";
            color: #e60000;
        }

        /* Inhalt-Animation */
        .card-content-expanded {
            animation: fadeIn 0.4s ease;
            position: relative;
        }

        /* Button im Hauptcontent oben rechts positionieren */
        .content-toggle-wrapper {
            position: absolute;
            top: 15px;
            right: 15px;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(-5px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .brand-info strong { display: block; }
        .brand-info span { font-size: 0.9em; color: #666; }

        /* Label f�r den Schlie�en-Button im Content (optional) */
        .close-label {
            font-size: 12px;
            color: #e60000;
            margin-right: 8px;
            font-weight: bold;
        }
        
        .flex-center {
            display: flex;
            align-items: center;
        }