/* CSS Variablen für Light Theme (Default) */
:root {
    --bg-color: #FAF0E6; /* Linen - sehr helles, warmes Beige */
    --container-bg: #FFF8DC; /* Cornsilk - helles Beige/Creme */
    --text-color: #6B4F4B; /* Warmes Dunkelbraun */
    --text-color-light: #8D6E63; /* Helleres warmes Braun */
    --text-color-lighter: #A1887F; /* Noch helleres warmes Braun */
    --primary-accent: #64B5F6; /* Freundliches Hellblau (Wasser) */
    --secondary-accent: #81C784; /* Sanftes Naturgrün (Landschaft) */
    --secondary-accent-hover: #66BB6A; /* Dunkleres Grün */
    --input-border: #D7CCC8; /* Helles Grau-Braun */
    --input-bg: #FFFDF9; /* Sehr helles Creme */
    --input-text: var(--text-color);
    --input-current-time-bg: #EFEBE9; /* Angepasst an Beige-Töne */
    --input-focus-border: var(--primary-accent);
    --input-focus-shadow: rgba(100, 181, 246, 0.25); /* Schatten passend zu Hellblau */
    --result-group-bg: #FFFDF9; /* Gleiches helles Creme */
    --result-group-border: #EFEBE9; /* Sehr helles Beige-Grau */
    --logo-color: var(--primary-accent);
    --slider-bg: #D7CCC8; /* Passend zum Input-Border */
    --slider-checked-bg: var(--primary-accent);
    --icon-color: var(--text-color-light);
    --font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    --font-family-monospace: 'Roboto Mono', Consolas, Menlo, Monaco, 'Andale Mono WT', 'Andale Mono', 'Lucida Console', 'Lucida Sans Typewriter', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Liberation Mono', 'Nimbus Mono L', 'Courier New', Courier, monospace;
}

/* Dark Theme Variablen */
html[data-theme='dark'] {
    --bg-color: #1D2D3A; /* Sehr dunkles, entsättigtes Blau-Grau-Grün */
    --container-bg: #273C4D; /* Dunkles Blau-Grau-Grün, heller als BG */
    --text-color: #EAF2F8; /* Sehr helles Blau-Grau für Text */
    --text-color-light: #BDC3C7; /* Helles Grau */
    --text-color-lighter: #95A5A6; /* Mittleres Grau */
    --primary-accent: #64B5F6; /* Freundliches Hellblau (konsistent mit Light Mode) */
    --secondary-accent: #81C784; /* Sanftes Grün (konsistent mit Light Mode) */
    --secondary-accent-hover: #66BB6A; /* Dunkleres Grün */
    --input-border: #4A6572; /* Dunkles Blau-Grau für Input-Rahmen */
    --input-bg: #34495E; /* Dunkles Blau-Grau für Input-Hintergrund */
    --input-text: var(--text-color);
    --input-current-time-bg: var(--input-bg);
    --input-focus-border: var(--primary-accent);
    --input-focus-shadow: rgba(100, 181, 246, 0.3); /* Schatten passend zu Hellblau */
    --result-group-bg: var(--input-bg);
    --result-group-border: var(--input-border);
    --logo-color: var(--primary-accent);
    --slider-bg: #546E7A; /* Mittleres Blau-Grau für Slider */
    --slider-checked-bg: var(--primary-accent);
    --icon-color: var(--text-color-light);
}

body {
    font-family: var(--font-family-sans-serif);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0;
    padding: 15px;
    /* Safe area insets für iPhone X und neuer */
    padding-left: env(safe-area-inset-left, 15px);
    padding-right: env(safe-area-inset-right, 15px);
    padding-top: env(safe-area-inset-top, 15px);
    padding-bottom: env(safe-area-inset-bottom, 15px);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: -webkit-fill-available; /* Für mobile Safari Viewport Höhe */
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.container {
    background-color: var(--container-bg);
    padding: 15px 20px;
    border-radius: 12px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    width: calc(100vw - 32px); /* Rand auf kleinen Bildschirmen */
    max-width: 500px;
    transition: background-color 0.3s ease;
}

/* Mobile-Optimierung für sehr schmale Geräte */
@media (max-width: 400px) {
    .container {
        padding: 12px;
    }
    
    h1 {
        font-size: 1.4rem;
    }
    
    .input-group {
        margin-bottom: 12px;
    }
    
    .input-group label, .label-like {
        margin-bottom: 3px;
    }
    
    .logo {
        width: 40px;
        height: 40px;
    }
    
    button {
        margin-top: 12px;
        margin-bottom: 12px;
        padding: 8px 16px;
    }
    
    .result-group {
        margin-top: 12px;
        padding: 10px;
    }
    
    .result-group h2 {
        font-size: 1.1rem;
        margin-top: 0;
        margin-bottom: 5px;
    }
    
    .result-display {
        font-size: 1.5em;
    }
}

header {
    margin-bottom: 15px;
    display: flex; /* Flexbox für Header-Inhalt */
    justify-content: space-between; /* Logo/Titel links, Toggle rechts */
    align-items: center; /* Vertikal zentriert */
}

.header-content {
    display: flex;
    align-items: center;
}

.logo {
    width: 45px; /* Etwas kleiner für kompakteres Layout */
    height: 45px;
    margin-right: 8px; /* Reduzierter Abstand zum Titel */
}

h1 {
    font-size: 1.6rem;
    margin: 0;
    color: var(--text-color);
    transition: color 0.3s ease;
}

.input-group {
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.input-group label,
.label-like {
    display: block;
    margin-bottom: 5px;
    color: var(--text-color-light);
    font-size: 0.9rem;
    font-weight: 500;
    transition: color 0.3s ease;
    text-align: left;
}

.input-group input[type="time"] {
    width: 100%;
    padding: 12px; /* Mehr Padding */
    border: 1px solid var(--input-border);
    border-radius: 8px; /* Weichere Ecken */
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1rem;
    font-family: var(--font-family-monospace);
    box-sizing: border-box; /* Wichtig für konsistente Größen */
    transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}

.time-display {
    display: block; /* Nimmt die volle Breite im Flex-Container ein */
    font-size: 1rem; /* Gleiche Größe wie input[type="time"] */
    font-family: var(--font-family-monospace);
    color: var(--text-color);
    padding: 2px 0; /* Kleiner vertikaler Abstand für Ästhetik */
    line-height: 1.5; /* Standard Zeilenhöhe */
    background-color: transparent !important; /* Explizit transparent setzen */
}

.input-group input[type="time"]:focus {
    outline: none;
    border-color: var(--input-focus-border);
    box-shadow: 0 0 0 2px var(--input-focus-shadow);
}

#currentTimeDisplay {
    background-color: var(--input-current-time-bg);
    font-family: var(--font-family-monospace) !important;
}

button {
    background-color: var(--secondary-accent);
    color: white;
    border: none;
    padding: 12px 25px; /* Angepasstes Padding */
    font-size: 1.05rem; /* Leicht vergrößerte Schrift */
    font-weight: 500; /* Etwas fetter für bessere Lesbarkeit */
    border-radius: 8px; /* Weichere Ecken */
    cursor: pointer;
    margin-top: 20px; /* Etwas mehr Abstand nach oben */
    margin-bottom: 20px; /* Etwas mehr Abstand nach unten */
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
    width: auto; /* Flexible Breite */
    min-width: 180px; /* Mindestbreite für Ästhetik */
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.12);
}

button:hover {
    background-color: var(--secondary-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}

button:active {
    background-color: var(--secondary-accent-hover); /* Kann gleich bleiben oder leicht dunkler */
    transform: translateY(0px); /* Zurücksetzen oder leichter Druckeffekt */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Reduzierter Schatten bei Klick */
}

.result-group {
    background-color: var(--result-group-bg);
    border: 1px solid var(--result-group-border);
    border-radius: 8px;
    padding: 12px;
    margin-top: 15px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    width: 100%;
    max-width: 300px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.result-group h2 {
    color: var(--text-color);
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.1rem;
    transition: color 0.3s ease;
    text-align: left;
}

.result-display {
    font-family: var(--font-family-monospace);
    font-size: 1.5em;
    font-weight: bold;
    color: var(--primary-accent);
    margin: 0;
    transition: color 0.3s ease;
    text-align: left;
}

#resultInfo {
    font-size: 0.85em;
    color: var(--text-color-lighter);
    margin-top: 5px;
    transition: color 0.3s ease;
    text-align: left;
}

footer {
    margin-top: 25px;
    font-size: 0.85em;
    color: var(--text-color-lighter);
    transition: color 0.3s ease;
}

/* Wasserspritzer-Effekt */
.water-splash {
    position: fixed;
    width: 30px;
    height: 30px;
    background-color: rgba(32, 178, 170, 0.6); /* LightSeaGreen mit Transparenz */
    border-radius: 50%;
    transform: scale(0);
    pointer-events: none;
    z-index: 9999;
    animation: splash 0.6s ease-out forwards;
}

html[data-theme='dark'] .water-splash {
    background-color: rgba(72, 209, 204, 0.6); /* MediumTurquoise mit Transparenz für Dark Mode */
}

@keyframes splash {
    0% {
        transform: scale(0);
        opacity: 0.7;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        transform: scale(3);
        opacity: 0;
    }
}

/* Theme Switch Styles */
.theme-switch-wrapper {
    display: flex;
    align-items: center;
    gap: 8px; /* Abstand zwischen Icons und Schalter */
}

.theme-switch {
    position: relative;
    display: inline-block;
    width: 50px;  /* Breite des Schalters */
    height: 26px; /* Höhe des Schalters */
}

.theme-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--slider-bg);
    transition: .4s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 20px; /* Größe des Kreises */
    width: 20px;  /* Größe des Kreises */
    left: 3px;    /* Position des Kreises */
    bottom: 3px;  /* Position des Kreises */
    background-color: white;
    transition: .4s;
}

input:checked + .slider {
    background-color: var(--slider-checked-bg);
}

input:checked + .slider:before {
    transform: translateX(24px); /* Bewegung des Kreises */
}

.slider.round {
    border-radius: 26px; /* Runde Ecken für den Schalter */
}

.slider.round:before {
    border-radius: 50%; /* Runder Kreis */
}

.sun-icon,
.moon-icon {
    stroke: var(--icon-color);
    transition: stroke 0.3s ease;
}

/* Standard (Light Mode): Sonne sichtbar, Mond versteckt */
.moon-icon {
    display: none;
}
.sun-icon {
    display: inline-block;
}

/* Dark Mode: Mond sichtbar, Sonne versteckt */
html[data-theme='dark'] .sun-icon {
    display: none;
}
html[data-theme='dark'] .moon-icon {
    display: inline-block;
}