/* ----------------------------------------------------------------
 * GETEILTE DATEI — Quelle: briefing.s-z.biz (Repo Briefing,
 * public/assets/style.css). Aenderungen hier gehoeren manuell in
 * die anderen Repos kopiert, die dieselbe Neumorphism/Glassmorphism-
 * Sprache nutzen (kein automatischer Sync, keine Cross-Domain-
 * Verlinkung — bewusst, um unabhaengige Deploys nicht zu koppeln).
 *
 * Farbpalette: helles Blaugrau (#e8edf2), wie Schwesterprojekt
 * Glassmorphism-Buttons: beschriftete "Glasplaettchen" auf der
 * Neumorphism-Flaeche. Klick = kurzer gruener Puls. Toggle = haelt
 * das gruene Leuchten, bis erneut geklickt.
 * ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* Popup fuer Aufgaben-Aktionen (Erledigt/Bearbeiten) */
.popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(30, 40, 55, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

/* Kompound-Selektor noetig, damit die spaeter definierte .glas-platte-Regel
   (flex: 1) die Breite hier nicht ueberschreibt und das Popup ueber den
   ganzen Bildschirm zieht. */
.popup-overlay .popup {
    flex: none;
    width: min(560px, 92vw);
    max-height: 85vh;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.popup h3 {
    font-size: 1rem;
    color: #2d3748;
    margin-bottom: 0.25rem;
}

.popup-feld {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: #4a5568;
}

.popup-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.popup-kopf h3 { margin-bottom: 0; flex: 1; }

.popup-icon-btn {
    width: auto;
    padding: 0.4rem 0.7rem;
    font-size: 1.1rem;
}

.popup-info-zeile {
    font-size: 0.85rem;
    color: #4a5568;
    white-space: pre-wrap;
    line-height: 1.5;
}

.popup-feld input, .popup-feld select, .popup-feld textarea {
    font-family: inherit;
    resize: vertical;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: 10px;
    background: #e8edf2;
    box-shadow: inset 3px 3px 6px #c8cdd2, inset -3px -3px 6px #ffffff;
    font-size: 0.9rem;
    color: #2d3748;
}

body {
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e8edf2;
    font-family: 'Segoe UI', system-ui, sans-serif;
}

/* login-card/passwort-Seiten bleiben zentriert ohne Hoehen-Zwang. */
body:has(.login-card) { height: auto; min-height: 100vh; overflow: visible; }

.login-card {
    width: 340px;
    padding: 2.5rem 2rem;
    border-radius: 24px;
    background: rgba(232, 237, 242, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 8px 8px 20px #c8cdd2, -8px -8px 20px #ffffff;
}

/* Dashboard passt sich exakt der Bildschirmhoehe an — kein Seiten-Scroll.
   Zeile 1 (Kalender/Wetter/Pegel) sizet sich nach Inhalt, Zeile 2
   (Aufgaben/Mails) bekommt den restlichen Platz und scrollt bei Bedarf
   intern (siehe .scroll-bereich). */
.dashboard {
    width: min(1080px, 94vw);
    height: 94vh;
    padding: 0;
    background: none;
    box-shadow: none;
    display: flex;
    flex-direction: column;
}

.dashboard h1 {
    flex-shrink: 0;
    font-size: 1.3rem;
    color: #4a5568;
    margin-bottom: 0.5rem;
}

/* Retro-Digitaluhr im 80er-Wecker-Stil: rote LED-Ziffern mit Glow, ohne
   eigenen Bezel-Hintergrund. Monospace statt echter 7-Segment-Schriftart
   (kein Font-Import noetig) — Letter-Spacing + Text-Shadow imitieren den
   LED-Look ausreichend. */
.retro-uhr {
    flex-shrink: 0;
    width: fit-content;
    margin: 0 auto 1.25rem;
    font-family: 'Courier New', monospace;
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    color: #ff3b30;
    text-shadow: 0 0 4px #ff3b30, 0 0 10px rgba(255, 59, 48, 0.7);
}

.grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto 1fr;
    gap: 1.5rem;
}

/* Zeile 1: Kalender | Wetter | Pegel — Zeile 2: Aufgaben | Mails (2 Spalten) */
.baustein--mails { grid-column: span 2; }

/* Auf kleinen Bildschirmen ist "alles ohne Scroll in eine Bildschirmhoehe
   pressen" nicht mehr sinnvoll (5 Karten uebereinander waeren winzig) —
   dort wird stattdessen normal die Seite gescrollt. */
@media (max-width: 720px) {
    body { height: auto; min-height: 100vh; overflow: visible; }
    .dashboard { height: auto; }
    .grid { grid-template-columns: 1fr; grid-template-rows: none; flex: none; }
    .baustein--mails { grid-column: span 1; }
    .baustein { min-height: 260px; }
    .scroll-bereich { max-height: 260px; }
}

/* Jeder Baustein liegt als eigene, abgehobene Neumorphism-Karte auf dem
   Hintergrund (aussenliegender Schatten statt eingelassenem inset-Schatten).
   display:flex + min-height:0, damit die Glasplatte drinnen die volle
   Kartenhoehe fuellt UND die Karte innerhalb ihrer Grid-Zeile schrumpfen
   darf — Grid-Items verweigern das sonst per default (min-height:auto),
   wodurch Aufgaben/Mails ueber den Bildschirmrand hinauswachsen wuerden
   statt intern zu scrollen. */
.baustein {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0.6rem;
    border-radius: 22px;
    background: rgba(232, 237, 242, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    box-shadow: 8px 8px 20px #c8cdd2, -8px -8px 20px #ffffff;
}

/* Liquid Glass: die Verzerrung (feTurbulence+feDisplacementMap, index.php)
   muss auf einer eigenen Ebene per `filter` sitzen — `backdrop-filter`
   unterstuetzt SVG-Filter-Referenzen browseruebergreifend nicht zuverlaessig,
   nur `filter` tut das. Deshalb: ::before sampelt+weichzeichnet den
   Hintergrund (backdrop-filter) UND wird zusaetzlich per `filter` verzerrt.
   Der eigentliche Inhalt liegt auf einer eigenen, unverzerrten Ebene (z-index 1). */
.glas-platte {
    position: relative;
    overflow: hidden;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    padding: 1.25rem;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.95);
    box-shadow:
        /* Kantenlicht oben (hell) */
        inset 0 1.5px 0 rgba(255, 255, 255, 1),
        /* Farbrand/Chromatic-Aberration: leichter Blau-/Rosa-Saum an den Kanten */
        inset 1px 0 0 rgba(160, 200, 255, 0.5),
        inset -1px 0 0 rgba(255, 190, 210, 0.4),
        inset 0 -6px 10px -6px rgba(90, 110, 135, 0.3),
        0 8px 20px rgba(90, 110, 135, 0.22),
        /* Bunter Rand-Schimmer (Blau -> Pink), wie beim Liquid-Glass-Referenzbild */
        0 0 0 1px rgba(160, 200, 255, 0.25),
        0 0 18px rgba(140, 170, 255, 0.22),
        0 0 26px rgba(255, 170, 210, 0.16);
}

.glas-platte::before {
    content: "";
    position: absolute;
    inset: -10px;
    backdrop-filter: blur(2px) saturate(150%);
    -webkit-backdrop-filter: blur(2px) saturate(150%);
    filter: url(#liquid-glass);
    pointer-events: none;
}

/* Fokussierter Glanzfleck oben, statt flaechiger Weiss-Tuenchung — das ist
   der Unterschied zwischen "milchiges Glas" und "klares Liquid Glass". */
.glas-platte::after {
    content: "";
    position: absolute;
    top: -30%;
    left: -10%;
    width: 70%;
    height: 65%;
    background: radial-gradient(
        ellipse at top left,
        rgba(255, 255, 255, 0.85) 0%,
        rgba(255, 255, 255, 0.25) 35%,
        rgba(255, 255, 255, 0) 65%
    );
    pointer-events: none;
    filter: blur(2px);
}

.glas-platte > * { position: relative; z-index: 1; }

.baustein h2 {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 1rem;
    color: #4a5568;
    margin-bottom: 0.5rem;
}

.baustein-h2-buttons {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.baustein-refresh {
    width: auto;
    padding: 0.15rem 0.5rem;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 1rem;
    color: #8a9bb0;
    cursor: pointer;
    transition: transform 0.15s, color 0.15s;
}

.baustein-push {
    width: auto;
    padding: 0.15rem 0.5rem;
    font-size: 0.95rem;
}

.baustein-push.active {
    background: rgba(72, 187, 120, 0.35);
    box-shadow: 0 0 10px rgba(72, 187, 120, 0.5);
}

.baustein-refresh:hover { color: #4a7fcb; }

.baustein-refresh.laedt {
    color: #4a7fcb;
    animation: refresh-dreh 0.8s linear infinite;
}

@keyframes refresh-dreh { to { transform: rotate(360deg); } }

.mail-entfernen {
    width: auto;
    padding: 0 0.3rem;
    border: none;
    background: transparent;
    color: #c53030;
    font-size: 0.8rem;
    cursor: pointer;
    opacity: 0.6;
}

.mail-entfernen:hover { opacity: 1; }

/* Scrollt intern statt die Seite wachsen zu lassen — Aufgaben/Mails koennen
   beliebig viele Eintraege haben, "Einstellungen"/"Logout" sollen aber immer
   ohne Seiten-Scroll sichtbar bleiben. */
.scroll-bereich {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

/* Zeile 1 (Kalender/Wetter/Pegel) hat keine erzwungene Grid-Hoehe (auto) —
   ohne Deckel wuerde ein voller Kalendertag die ganze Reihe aufblaehen.
   Scrollbar erscheint nur, wenn tatsaechlich mehr Termine da sind. */
.baustein--kalender .scroll-bereich {
    flex: none;
    max-height: 220px;
}

.aufgabe-form { flex-shrink: 0; margin-top: 0.75rem; }

.baustein pre {
    font-size: 0.8rem;
    color: #2d3748;
    white-space: pre-wrap;
    word-break: break-word;
}

.zeitstempel {
    margin-top: 0.5rem;
    font-size: 0.7rem;
    color: #8a9bb0;
}

/* Wetter-Widget im iPhone-Stil: eigener Himmel-Farbverlauf je Wetterlage,
   grosses Icon oben, Temperatur darunter — statt reinem Text. */
.wetter-widget {
    margin: -0.25rem -0.5rem 0.5rem;
    padding: 1rem 1.25rem 1.25rem;
    border-radius: 14px;
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.wetter-sky--sonnig   { background: linear-gradient(160deg, #5b9cf0, #a4d4ff); }
.wetter-sky--bewoelkt { background: linear-gradient(160deg, #7c93ad, #b9c8d6); }
.wetter-sky--regen    { background: linear-gradient(160deg, #4d6178, #7f95a8); }
.wetter-sky--schnee   { background: linear-gradient(160deg, #7ea3c4, #dbe8f2); color: #2d3748; text-shadow: none; }
.wetter-sky--nebel    { background: linear-gradient(160deg, #9aa5ad, #cfd6db); color: #2d3748; text-shadow: none; }
.wetter-sky--gewitter { background: linear-gradient(160deg, #3a3f57, #62688a); }

.wetter-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wetter-icon { font-size: 2rem; }

.wetter-label { font-size: 0.85rem; font-weight: 600; }

.wetter-gross {
    font-size: 2.75rem;
    font-weight: 700;
    line-height: 1;
    margin: 0.5rem 0 0.25rem;
}

.wetter-details {
    font-size: 0.85rem;
    opacity: 0.9;
}

.termine {
    list-style: none;
    font-size: 0.9rem;
    color: #2d3748;
}

.termine li { margin-bottom: 0.4rem; }

.termine .ort { color: #8a9bb0; font-size: 0.8rem; }

.aufgaben-liste {
    list-style: none;
    font-size: 0.9rem;
    color: #2d3748;
    margin-bottom: 1rem;
}

.aufgaben-liste li {
    margin-bottom: 0.4rem;
    border-radius: 10px;
}

/* Aufgabenname selbst ist klickbar (statt separatem Haken-Button) — Klick
   oeffnet das Erledigt-/Bearbeiten-Popup. */
.aufgabe-text {
    display: block;
    width: 100%;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: 10px;
    background: transparent;
    text-align: left;
    font-size: 0.9rem;
    color: #2d3748;
    cursor: pointer;
    transition: background 0.15s;
}

.aufgabe-text:hover { background: rgba(255, 255, 255, 0.5); }

.aufgabe-erledigt .aufgabe-text {
    color: #22543d;
    background: rgba(72, 187, 120, 0.25);
    cursor: default;
    text-decoration: line-through;
}

/* "eat the frog" — immer oben, Liquid-Glass-Rand pulsiert alarmrot. */
.aufgabe-frosch { order: -1; }

.aufgabe-frosch .aufgabe-text {
    background: rgba(255, 59, 48, 0.12);
    font-weight: 600;
    animation: frosch-puls 1.8s ease-in-out infinite;
}

@keyframes frosch-puls {
    0%, 100% { box-shadow: 0 0 6px rgba(255, 59, 48, 0.35); }
    50%      { box-shadow: 0 0 16px rgba(255, 59, 48, 0.75); }
}

.aufgaben-liste { display: flex; flex-direction: column; }

.aufgabe-form {
    display: flex;
    gap: 0.6rem;
}

.aufgabe-form input[type="text"] {
    flex: 1;
    padding: 0.6rem 0.9rem;
    border: none;
    border-radius: 10px;
    background: #e8edf2;
    box-shadow: inset 3px 3px 6px #c8cdd2, inset -3px -3px 6px #ffffff;
    font-size: 0.9rem;
    color: #2d3748;
    outline: none;
}

.aufgabe-form button { width: auto; padding: 0.6rem 1.1rem; }

.hinweis-grau {
    font-size: 0.85rem;
    color: #a0aec0;
    font-style: italic;
}

.icon {
    font-size: 2.5rem;
    text-align: center;
    margin-bottom: 0.5rem;
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.15));
}

h1 {
    text-align: center;
    font-size: 1.1rem;
    font-weight: 600;
    color: #4a5568;
    margin-bottom: 0.25rem;
    letter-spacing: 0.02em;
}

.subtitle {
    text-align: center;
    font-size: 0.78rem;
    color: #8a9bb0;
    margin-bottom: 2rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.input-wrap { position: relative; margin-bottom: 1.25rem; }

input[type="password"] {
    width: 100%;
    padding: 0.85rem 1rem;
    border: none;
    border-radius: 12px;
    background: #e8edf2;
    box-shadow: inset 4px 4px 8px #c8cdd2, inset -4px -4px 8px #ffffff;
    font-size: 1rem;
    color: #2d3748;
    outline: none;
    transition: box-shadow 0.2s;
}

input[type="password"]:focus {
    box-shadow:
        inset 6px 6px 12px #c0c5ca,
        inset -4px -4px 8px #ffffff,
        0 0 0 3px rgba(99, 152, 219, 0.25);
}

input[type="password"]::placeholder { color: #a0aec0; }

.link-row {
    margin-top: 1.25rem;
    text-align: center;
    font-size: 0.8rem;
}

.dashboard > .link-row { flex-shrink: 0; }

.link-row a {
    color: #4a7fcb;
    text-decoration: none;
}

.link-row a:hover { text-decoration: underline; }

.hinweis {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: rgba(72, 187, 120, 0.1);
    box-shadow: inset 2px 2px 4px rgba(72, 187, 120, 0.12), inset -2px -2px 4px rgba(255,255,255,0.6);
    color: #22543d;
    font-size: 0.85rem;
    text-align: center;
}

.fehler {
    margin-top: 1rem;
    padding: 0.7rem 1rem;
    border-radius: 10px;
    background: rgba(229, 62, 62, 0.08);
    box-shadow: inset 2px 2px 4px rgba(229, 62, 62, 0.1), inset -2px -2px 4px rgba(255,255,255,0.6);
    color: #c53030;
    font-size: 0.85rem;
    text-align: center;
}

/* ----------------------------------------------------------------
 * Glassmorphism-Button — "Glasplaettchen"
 * Basiszustand: Glas-Optik ueber der Neumorphism-Flaeche.
 * .pulse   = kurzer Klick-Puls (wird per JS nach ~400ms entfernt)
 * .active  = dauerhaftes Leuchten fuer Toggle-Buttons
 * ---------------------------------------------------------------- */
.glass-btn {
    width: 100%;
    padding: 0.9rem 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 6px 6px 14px #c8cdd2, -6px -6px 14px #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    color: #4a7fcb;
    cursor: pointer;
    letter-spacing: 0.05em;
    /* auch als <a> nutzbar (Demo-Schalter auf der Karte) */
    text-decoration: none;
    text-align: center;
    transition: box-shadow 0.2s, background 0.2s, color 0.2s;
}

.glass-btn:hover {
    box-shadow: 4px 4px 10px #c8cdd2, -4px -4px 10px #ffffff;
}

.glass-btn:active {
    box-shadow: inset 4px 4px 8px #c8cdd2, inset -4px -4px 8px #ffffff;
    transform: scale(0.98);
}

/* Klick-Puls: kurzes gruenes Aufblinken */
.glass-btn.pulse {
    background: rgba(72, 187, 120, 0.45);
    border-color: rgba(72, 187, 120, 0.6);
    color: #22543d;
    box-shadow: 0 0 16px rgba(72, 187, 120, 0.55), 6px 6px 14px #c8cdd2, -6px -6px 14px #ffffff;
}

/* Toggle-Zustand: dauerhaftes gruenes Leuchten bis erneuter Klick */
.glass-btn.active {
    background: rgba(72, 187, 120, 0.35);
    border-color: rgba(72, 187, 120, 0.55);
    color: #22543d;
    box-shadow: 0 0 12px rgba(72, 187, 120, 0.45), 6px 6px 14px #c8cdd2, -6px -6px 14px #ffffff;
}