/* main-style.css */

/* --- GRUNDLAGEN --- */
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; background-color: #f0f2f5; padding: 20px; color: #333; margin: 0; }
h1 { text-align: center; color: #2c3e50; margin-bottom: 20px; }
p { font-size: 0.95rem; line-height: 1.5; color: #555; }

/* --- LAYOUT --- */
.container { max-width: 1500px; margin: 0 auto; display: flex; gap: 20px; flex-wrap: wrap; }

/* HEADER & NAVIGATION */
.header-actions { display: flex; justify-content: space-between; align-items: center; max-width: 1500px; margin: 0 auto 20px auto; }
.btn-nav { padding: 8px 15px; background: #95a5a6; color: white; border: none; border-radius: 4px; cursor: pointer; text-decoration: none; font-size: 0.9rem; transition: background 0.2s; }
.btn-nav:hover { background: #7f8c8d; }
.btn-print { padding: 8px 20px; background: #2c3e50; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; display: flex; align-items: center; gap: 8px; transition: background 0.2s; }
.btn-print:hover { background: #34495e; }

/* --- LINKE SPALTE (CONTROLS) --- */
.controls { flex: 1; min-width: 340px; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); height: fit-content; }
.controls h2 { margin-top: 0; color: #2c3e50; font-size: 1.4rem; margin-bottom: 20px; border-bottom: 2px solid #e74c3c; padding-bottom: 10px; display: inline-block; width: 100%; }
hr { border: 0; border-top: 1px solid #eee; margin: 20px 0; }

/* INPUT FELDER */
.input-group { margin-bottom: 15px; }
.input-group label { display: block; margin-bottom: 5px; font-weight: 600; color: #34495e; font-size: 0.9rem; }
.input-group input, .input-group select { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 1rem; box-sizing: border-box; transition: border 0.3s; }
.input-group input:focus, .input-group select:focus { border-color: #e74c3c; outline: none; background-color: #fffdf5; }
.input-hint { font-size: 0.75rem; color: #7f8c8d; margin-top: 4px; }

/* Buttons */
button#calcBtn, .action-btn { width: 100%; padding: 10px; background-color: #95a5a6; color: white; border: none; border-radius: 6px; font-size: 1rem; cursor: pointer; margin-top: 15px; transition: background 0.2s; }
button#calcBtn:hover, .action-btn:hover { background-color: #7f8c8d; }

/* --- RECHTE SPALTE (RESULTS) --- */
.results { flex: 3; min-width: 600px; background: white; padding: 25px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }

/* Boxen Styles */
.summary-box { background-color: #ecf0f1; padding: 15px; border-radius: 8px; margin-bottom: 20px; border-left: 5px solid #2980b9; }
.summary-box h3 { margin-top: 0; font-size: 1.1rem; color: #2980b9; margin-bottom: 5px; }

.reserve-highlight { background-color: #fff3cd; padding: 15px; border-radius: 8px; border: 1px solid #ffeeba; margin-bottom: 20px; color: #856404; position: relative; }
.reserve-badge { position: absolute; top: -10px; right: 10px; background: #e67e22; color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }

.surplus-highlight { background-color: #eaf2f8; padding: 15px; border-radius: 8px; border: 1px solid #d6eaf8; margin-bottom: 20px; color: #2c3e50; position: relative; }
.surplus-badge { position: absolute; top: -10px; right: 10px; background: #3498db; color: white; padding: 2px 8px; border-radius: 4px; font-size: 0.75rem; font-weight: bold; }

.savings-box { background-color: #e8f8f5; padding: 20px; border-radius: 12px; border: 1px solid #d1f2eb; margin-top: 30px; }
.savings-box h3 { color: #16a085; margin-top: 0; border-bottom: 1px solid #a3e4d7; padding-bottom: 10px; margin-bottom: 15px; }

/* Charts */
.chart-container { position: relative; height: 500px; width: 100%; margin-bottom: 30px; }

/* Tabellen */
.table-wrapper { overflow-x: auto; margin-top: 20px; }
table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
th, td { padding: 8px 10px; text-align: right; border-bottom: 1px solid #eee; }
th { background-color: #f8f9fa; text-align: right; color: #7f8c8d; font-weight: 600; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; }
tr.negative-balance { background-color: #ffebee; color: #c0392b; }

/* Tabellen Spezial-Spalten */
.col-btc { font-family: 'Consolas', monospace; font-weight: bold; }
.col-local { font-weight: bold; color: #333; }
.col-pension { color: #27ae60; font-style: italic; }
.col-net { color: #d35400; font-weight: bold; }
.col-tax { color: #c0392b; font-size: 0.8rem; }
.col-price { color: #555; font-size: 0.8rem; font-style: italic; background-color: #fcfcfc; }
.col-support { color: #27ae60; }
.col-50fair { color: #2980b9; }

/* --- DRUCK MODUS (Print) --- */
@media print {
    @page { size: A4 landscape; margin: 10mm; }
    body { background-color: white; padding: 0; font-size: 9pt; color: black; }
    .header-actions, #calcBtn, form, .btn-nav { display: none !important; }
    .container { display: block; width: 100%; margin: 0; box-shadow: none; }
    
    .controls { 
        width: 100%; box-shadow: none; border: 1px solid #ccc; padding: 10px; margin-bottom: 20px; 
        display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; page-break-inside: avoid;
    }
    .controls h2 { grid-column: span 3; font-size: 1.1rem; margin-bottom: 5px; border-bottom: 1px solid #ccc; }
    .input-group { margin-bottom: 0; }
    .input-group label { font-size: 8pt; margin-bottom: 0; }
    .input-group input { border: none; padding: 0; font-weight: bold; background: transparent; height: auto; font-size: 9pt; }
    .input-hint { display: none; } 
    
    .results { width: 100%; box-shadow: none; padding: 0; border: none; }
    
    .chart-container { 
        display: block; position: relative; width: 100% !important; 
        height: 400px !important; min-height: 400px !important;
        margin-bottom: 30px !important; page-break-inside: avoid; break-inside: avoid;
    }
    
    .reserve-highlight, .surplus-highlight, .savings-box, .summary-box, th, tr.negative-balance, .col-price {
        -webkit-print-color-adjust: exact; print-color-adjust: exact; border: 1px solid #ddd;
    }
    
    .table-wrapper { overflow: visible; margin-top: 10px; }
    table { font-size: 7pt; width: 100%; page-break-inside: auto; }
    tr { page-break-inside: avoid; page-break-after: auto; }
    thead { display: table-header-group; }
    
    h3 { page-break-after: avoid; margin-top: 15px; color: #2c3e50 !important; }
    .savings-box { page-break-inside: avoid; margin-top: 20px; border: 1px solid #ccc; }
}