:root { 
    --primary: #d92323; 
    --accent: #003366; 
    --glass: rgba(255, 255, 255, 0.94); 
}

body {
    font-family: 'Montserrat', sans-serif; margin: 0;
    background: #1a1a1a url('https://images.unsplash.com/photo-1518156677180-95a2893f3e9f?auto=format&fit=crop&w=1920&q=80') no-repeat center center fixed;
    background-size: cover; color: #333;
}

.background-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(0,51,102,0.4), rgba(0,0,0,0.6)); z-index: -1; }

header { text-align: center; padding: 25px; color: white; }
.logo { font-size: 2.2rem; font-weight: bold; text-shadow: 2px 2px 10px rgba(0,0,0,0.5); }
.logo span { color: var(--primary); }

main { max-width: 900px; margin: 0 auto; padding: 15px; }

.glass-card { background: var(--glass); backdrop-filter: blur(10px); border-radius: 12px; padding: 18px; margin-bottom: 20px; box-shadow: 0 5px 20px rgba(0,0,0,0.3); }

#map { height: 350px; width: 100%; border-radius: 10px; z-index: 1; border: 1px solid #ccc; }

.countdown-container { background: var(--accent) !important; color: white; text-align: center; }
#countdown { display: flex; justify-content: center; gap: 15px; font-size: 1.6rem; font-weight: bold; }
.time-unit { display: flex; flex-direction: column; line-height: 1.1; }
.time-unit label { font-size: 0.6rem; opacity: 0.7; text-transform: uppercase; margin-top: 5px; }

.weather-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.weather-card { text-align: center; padding: 12px !important; }
.weather-card h4 { font-size: 0.7rem; margin: 0 0 5px 0; color: #666; text-transform: uppercase; }
.weather-card p { font-weight: bold; font-size: 1rem; margin: 0; color: var(--accent); }
.weather-card.alert { border-left: 5px solid var(--primary); }

.toll-ui { display: flex; align-items: center; gap: 15px; margin: 10px 0; }
#toll-count { font-size: 2rem; font-weight: bold; color: var(--accent); }
.toll-ui button { background: var(--accent); color: white; border: none; padding: 8px 12px; border-radius: 5px; cursor: pointer; }

.day-header { display: flex; justify-content: space-between; border-bottom: 2px solid var(--primary); padding-bottom: 5px; margin-bottom: 10px; }
.day-header input { border: none; background: transparent; font-weight: bold; font-size: 1.2rem; width: 85%; font-family: inherit; }

.activity-list { list-style: none; padding: 0; margin: 10px 0; }
.activity-list li { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 4px 8px; border-radius: 6px; transition: background 0.2s; }
.activity-list li:hover { background: rgba(0, 0, 0, 0.05); }
.activity-list li input[type="text"] { flex-grow: 1; border: none; background: transparent; font-family: inherit; font-size: 0.95rem; color: #333; padding: 2px 0; outline: none; border-bottom: 1px solid transparent; }
.activity-list li input[type="text"]:focus { border-bottom: 1px solid var(--primary); }
.activity-list li span { color: var(--primary); cursor: pointer; font-weight: bold; opacity: 0.1; transition: opacity 0.2s; }
.activity-list li:hover span { opacity: 1; }

.add-act-input { width: 100%; padding: 10px; border: 1px dashed #ccc; border-radius: 6px; margin-top: 8px; box-sizing: border-box; font-family: inherit; }

/* Textareas für Planung und Erlebnisse */
textarea { width: 100%; margin-top: 10px; height: 60px; border-radius: 6px; border: 1px solid #ddd; padding: 10px; box-sizing: border-box; font-family: inherit; resize: vertical; }
.highlight-area { background: #fdf6e3; border-left: 4px solid #f39c12; margin-top: 15px; font-style: italic; }

.btn-primary { background: var(--primary); color: white; border: none; padding: 16px; border-radius: 40px; width: 100%; font-weight: bold; cursor: pointer; font-size: 1rem; }

@media (max-width: 600px) { .weather-grid { grid-template-columns: 1fr 1fr; } }