/* Haupt-Container */
.wecker-wrapper { 
    max-width: 700px; 
    margin: auto; 
    font-family: 'Segoe UI', Tahoma, sans-serif; 
    color: #333; 
}

/* Überschriften */
.section-title { 
    color: #1800ad; 
    border-bottom: 2px solid #eee; 
    padding-bottom: 8px; 
    margin: 25px 0 15px 0; 
    font-size: 1.4em; 
}

/* Flex-Grid für Eingaben */
.input-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 12px; 
    margin-bottom: 12px; 
}

.input-grid .field { 
    flex: 1 1 calc(33% - 12px); 
    display: flex; 
    flex-direction: column; 
    min-width: 140px; 
}

@media (max-width: 600px) { 
    .input-grid .field { 
        flex: 1 1 100%; 
    } 
}

/* Feld-Styling */
.field label { 
    font-size: 11px; 
    font-weight: bold; 
    margin-bottom: 4px; 
    color: #555; 
    text-transform: uppercase; 
}

.field input, .field select { 
    padding: 10px; 
    border: 1px solid #ccc; 
    border-radius: 6px; 
    font-size: 14px; 
    width: 100%;
    box-sizing: border-box;
}

/* Tarif-Karte */
.tariff-card { 
    position: relative; 
    background: #fff; 
    border: 1px solid #ddd; 
    padding: 20px; 
    border-radius: 12px; 
    margin-bottom: 25px; 
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); 
    border-left: 6px solid #1800ad; 
}

.tariff-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px; 
    border-bottom: 1px solid #f0f0f0; 
    padding-bottom: 10px; 
}

.tariff-label { 
    font-weight: bold; 
    color: #1800ad; 
}

.remove-btn { 
    color: #ff4444; 
    font-size: 28px; 
    cursor: pointer; 
    font-weight: bold; 
}

/* Berechnungsteil mit Flexbox statt Grid */
.calculation-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    margin-top: 15px; 
    padding-top: 15px; 
    border-top: 2px dashed #eee; 
}

.calc-box { 
    flex: 1 1 calc(50% - 15px); 
    background: #f8f9fa; 
    padding: 10px; 
    border-radius: 8px; 
    border: 1px solid #e9ecef; 
    box-sizing: border-box;
}

@media (max-width: 500px) { 
    .calc-box { 
        flex: 1 1 100%; 
    } 
}

.calc-box label { 
    display: block; 
    font-size: 11px; 
    font-weight: bold; 
    color: #666; 
    margin-bottom: 5px; 
}

.calc-box input { 
    width: 100%; 
    border: none; 
    background: transparent; 
    font-weight: bold; 
    color: #1800ad; 
    font-size: 15px; 
    outline: none; 
}

.calc-box.highlight { 
    background: #fff3e0; 
    border-color: #ffe0b2; 
}

.calc-box.highlight input { 
    color: #e65100; 
}

/* Buttons & Erfolgsmeldung */
.btn-primary { 
    width: 100%; 
    background: #1800ad; 
    color: white; 
    border: none; 
    padding: 16px; 
    border-radius: 8px; 
    font-size: 16px; 
    font-weight: bold; 
    cursor: pointer; 
}

.btn-secondary { 
    width: 100%; 
    background: #f0f2ff; 
    color: #1800ad; 
    border: 2px dashed #1800ad; 
    padding: 12px; 
    border-radius: 8px; 
    cursor: pointer; 
    margin-bottom: 20px; 
    font-weight: bold; 
}

.success-box { 
    background: #e8f5e9; 
    border: 2px solid #4caf50; 
    padding: 20px; 
    border-radius: 12px; 
    margin-top: 20px; 
    text-align: center; 
}

#final-link-display { 
    width: 100%; 
    height: 70px; 
    margin: 10px 0; 
    padding: 8px; 
    box-sizing: border-box; 
}