/*
 * Stylesheet: Vegetationsanalyse-App
 * ===================================
 * Optimiert für Mobil (Smartphone), lesbar im Freien.
 * Farbschema: Blau, Orange – bewusst KEIN Rot/Grün nebeneinander
 * (Rücksicht auf Rot-Grün-Sehschwäche des Anwenders).
 */

/* ===== CSS-Variablen ===== */
:root {
    --farbe-akzent:      #1a6faf;
    --farbe-akzent-hell: #d0e8f8;
    --farbe-bestaetigt:  #2c4a6e;
    --farbe-abgelehnt:   #6b7280;
    --farbe-warnung:     #d97706;
    --farbe-hintergrund: #f0f4f8;
    --farbe-karte:       #ffffff;
    --farbe-text:        #1a202c;
    --farbe-text-hell:   #4a5568;
    --farbe-rahmen:      #cbd5e0;
    --radius:            12px;
    --schatten:          0 2px 8px rgba(0,0,0,0.12);
}

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    background: var(--farbe-hintergrund);
    color: var(--farbe-text);
    font-size: 16px;
    line-height: 1.5;
    overflow-x: hidden;
}

/* ===== Login-Overlay ===== */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(10, 30, 50, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    transition: opacity 0.4s ease;
}

.login-overlay.ausgeblendet {
    opacity: 0;
    pointer-events: none;
}

.login-karte {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 32px 28px;
    max-width: 380px;
    width: 100%;
    text-align: center;
}

.login-titel {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--farbe-akzent);
    margin-bottom: 4px;
}

.login-untertitel {
    font-size: 0.9rem;
    color: var(--farbe-text-hell);
    margin-bottom: 24px;
}

.login-feld {
    margin-bottom: 14px;
    text-align: left;
}

.login-feld label {
    display: block;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--farbe-text-hell);
    margin-bottom: 4px;
}

.login-feld input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--farbe-rahmen);
    border-radius: 8px;
    font-size: 1rem;
    transition: border-color 0.2s;
    background: #fff;
}

.login-feld input:focus {
    outline: none;
    border-color: var(--farbe-akzent);
    box-shadow: 0 0 0 3px rgba(26, 111, 175, 0.15);
}

.login-btn {
    margin-top: 8px;
}

#login-fehler {
    margin-top: 12px;
    font-size: 0.85rem;
}

/* ===== App-Container ===== */
.app-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 12px 80px;
}

/* ===== Header ===== */
.app-header {
    background: var(--farbe-akzent);
    color: white;
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: var(--schatten);
}

.header-zeile {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 640px;
    margin: 0 auto;
}

.app-header h1 { font-size: 1.15rem; font-weight: 700; }
.app-header p  { font-size: 0.75rem; opacity: 0.85; margin-top: 1px; }

.header-rechts {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nutzer-anzeige {
    font-size: 0.75rem;
    opacity: 0.8;
}

.btn-logout {
    background: rgba(255,255,255,0.2);
    color: white;
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 6px;
    padding: 4px 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-logout:hover {
    background: rgba(255,255,255,0.35);
}

/* ===== Karten ===== */
.karte {
    background: var(--farbe-karte);
    border-radius: var(--radius);
    box-shadow: var(--schatten);
    padding: 16px;
    margin-top: 16px;
}

.karte-titel {
    font-size: 1rem;
    font-weight: 700;
    color: var(--farbe-akzent);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== Upload-Bereich ===== */
.upload-bereich {
    border: 2px dashed var(--farbe-akzent);
    border-radius: var(--radius);
    padding: 24px 16px;
    text-align: center;
    cursor: pointer;
    transition: background 0.2s;
}

.upload-bereich:hover { background: var(--farbe-akzent-hell); }
.upload-bereich input[type="file"] { display: none; }
.upload-icon { font-size: 2.5rem; margin-bottom: 8px; display: block; }
.upload-text { color: var(--farbe-akzent); font-weight: 600; font-size: 0.95rem; }
.upload-hinweis { color: var(--farbe-text-hell); font-size: 0.8rem; margin-top: 4px; }

#bild-vorschau {
    width: 100%;
    max-height: 220px;
    object-fit: cover;
    border-radius: 8px;
    margin-top: 12px;
    display: none;
}

/* ===== Buttons ===== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
    white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primaer {
    background: var(--farbe-akzent);
    color: white;
    width: 100%;
    font-size: 1rem;
    padding: 14px;
    margin-top: 12px;
}
.btn-primaer:hover:not(:disabled) { opacity: 0.9; }

.btn-bestaetigen { background: var(--farbe-bestaetigt); color: white; flex: 1; }
.btn-ablehnen    { background: var(--farbe-abgelehnt);  color: white; flex: 1; }
.btn-export      { background: var(--farbe-akzent);     color: white; flex: 1; }

/* ===== Ladeanimation ===== */
.ladeanimation {
    display: none;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 16px;
}
.ladeanimation.aktiv { display: flex; }

.spinner {
    width: 40px; height: 40px;
    border: 4px solid var(--farbe-rahmen);
    border-top-color: var(--farbe-akzent);
    border-radius: 50%;
    animation: drehen 0.8s linear infinite;
}
@keyframes drehen { to { transform: rotate(360deg); } }

/* ===== Art-Vorschlagskarte ===== */
.art-karte {
    border: 2px solid var(--farbe-rahmen);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: var(--farbe-karte);
}
.art-karte.hauptvorschlag {
    border-color: var(--farbe-akzent);
    background: var(--farbe-akzent-hell);
}
.art-name-wissenschaftlich { font-style: italic; font-weight: 700; font-size: 1rem; }
.art-name-deutsch { font-size: 0.9rem; color: var(--farbe-text-hell); margin-top: 2px; }
.art-konfidenz { font-size: 0.85rem; font-weight: 600; color: var(--farbe-akzent); margin-top: 4px; }

.konfidenz-balken-hintergrund {
    background: var(--farbe-rahmen); border-radius: 4px; height: 6px; margin-top: 6px;
}
.konfidenz-balken {
    height: 6px; border-radius: 4px; background: var(--farbe-akzent); transition: width 0.4s ease;
}
.art-aktionen { display: flex; gap: 8px; margin-top: 10px; }

/* ===== Bestätigte Artenliste ===== */
.art-eintrag {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border-radius: 8px; margin-bottom: 6px;
    background: var(--farbe-akzent-hell);
    border-left: 4px solid var(--farbe-bestaetigt);
    font-size: 0.9rem;
}
.art-eintrag-name { flex: 1; font-style: italic; font-weight: 600; }

.art-eintrag.kein-zeigerwert {
    border-left-color: var(--farbe-warnung); background: #fff8ed;
}
.art-eintrag.kein-zeigerwert .art-eintrag-hinweis {
    font-size: 0.75rem; color: var(--farbe-warnung); font-style: normal;
}

/* ===== Ergebnistabelle ===== */
.zeigerwert-tabelle { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-top: 8px; }
.zeigerwert-tabelle th {
    background: var(--farbe-akzent); color: white;
    padding: 8px 10px; text-align: left; font-size: 0.85rem;
}
.zeigerwert-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--farbe-rahmen); }
.zeigerwert-tabelle tr:nth-child(even) td { background: var(--farbe-hintergrund); }

.wert-balken-container { display: flex; align-items: center; gap: 8px; }
.wert-zahl { font-weight: 700; font-size: 1rem; color: var(--farbe-akzent); min-width: 28px; }
.wert-balken-hintergrund { flex: 1; background: var(--farbe-rahmen); border-radius: 4px; height: 10px; }
.wert-balken { height: 10px; border-radius: 4px; background: var(--farbe-akzent); }

/* ===== Interpretation ===== */
.interpretation-box {
    background: #f0f7ff; border-left: 4px solid var(--farbe-akzent);
    border-radius: 0 8px 8px 0; padding: 10px 12px; margin-top: 6px;
    font-size: 0.88rem; line-height: 1.6;
}

/* ===== Meldungen ===== */
.meldung { padding: 12px 14px; border-radius: 8px; margin-top: 10px; font-size: 0.9rem; display: none; }
.meldung.aktiv { display: block; }
.meldung-warnung { background: #fff3cd; border: 1px solid var(--farbe-warnung); color: #92400e; }
.meldung-fehler  { background: #fef2f2; border: 1px solid #f59e0b; color: #78350f; }

/* ===== Export / Trennlinie / Hilfsklassen ===== */
.export-zeile { display: flex; gap: 10px; margin-top: 12px; }
hr.trennlinie { border: none; border-top: 1px solid var(--farbe-rahmen); margin: 14px 0; }
.text-klein     { font-size: 0.8rem; }
.text-gedaempft { color: var(--farbe-text-hell); }
.abstand-unten  { margin-bottom: 8px; }
.verborgen      { display: none !important; }

/* ===== Responsive ===== */
@media (max-width: 360px) {
    .app-header h1 { font-size: 1rem; }
    .btn { font-size: 0.88rem; padding: 10px 14px; }
    .karte { padding: 12px; }
    .login-karte { padding: 24px 20px; }
}