/* ── Tante Hilde Themes ─────────────────────────────────────────────────────── */
/* Aktives Theme wird via JS in :root gesetzt — diese Datei definiert den Default */

:root {
  /* ── Theme: Natürlich (Default) ── */
  --bg:           #F4EFE4;
  --surface:      #FFFFFF;
  --surface2:     #F0EBE0;
  --border:       #DDD5C5;
  --border2:      #C8BFA8;
  --accent:       #C95C45;
  --accent-light: #FAEAE7;
  --accent-hover: #A8412D;
  --green:        #7A9068;
  --green-light:  #EBF0E8;
  --red:          #C95C45;
  --red-light:    #FAEAE7;
  --text:         #2F2B28;
  --text2:        #8A6748;
  --muted:        #A09080;
  --shadow:       0 2px 12px rgba(26,92,58,0.08);
  --shadow-lg:    0 8px 32px rgba(26,92,58,0.13);

  /* ── Header & Navigation ── */
  --nav-bg:       #8FA882;
  --nav-text:     rgba(255,255,255,0.7);
  --nav-active:   #FFFFFF;
  --hero-from:    #3A5A3A;
  --hero-to:      #6B8F5E;
  --nav-pill-bg:  rgba(0,0,0,0.15);
}

/*
  Verfügbare Themes (werden per JS in :root überschrieben):

  🌿 natuerlich — Beige/Grün/Terrakotta (Default)
  🏔️ alpin      — Hellgrün/Dunkelgrün
  🌙 dunkel     — Dunkles Braun
  ☀️ hell       — Weiß/Hellgrau/Blau
*/

  /* Google Fonts werden non-blocking in index.html geladen (kein @import hier,
     da CSS-@import einen render-blockierenden Wasserfall erzeugt). */

  /* ── Themes ─────────────────────────────────────────── */
  :root {
    --bg: #F4EFE4;
    --surface: #FFFFFF;
    --surface2: #F0EBE0;
    --border: #DDD5C5;
    --border2: #C8BFA8;
    --accent: #C95C45;
    --accent-light: #FAEAE7;
    --accent-hover: #A8412D;
    --green: #7A9068;
    --green-light: #EBF0E8;
    --red: #C95C45;
    --red-light: #FAEAE7;
    --text: #2F2B28;
    --text2: #8A6748;
    --muted: #A09080;
    --shadow: 0 2px 12px rgba(26,92,58,0.08);
    --shadow-lg: 0 8px 32px rgba(26,92,58,0.13);
    --nav-bg: #2D3B2D;
    --nav-text: rgba(255,255,255,0.7);
    --nav-active: #FFFFFF;
    --hero-from: #3A5A3A;
    --hero-to: #6B8F5E;
  }

  * { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Nunito Sans', sans-serif;
    min-height: 100vh;
    overflow-x: hidden;
    padding-bottom: env(safe-area-inset-bottom);
    touch-action: pan-y;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Login Screen ───────────────────────────────────── */
  @keyframes kisteFloat {
    0%, 100% { transform: translateY(0px) rotate(-1deg); }
    50%       { transform: translateY(-10px) rotate(1deg); }
  }
  @keyframes kisteWackle {
    0%,100% { transform: rotate(0deg); }
    20%     { transform: rotate(-4deg); }
    40%     { transform: rotate(4deg); }
    60%     { transform: rotate(-3deg); }
    80%     { transform: rotate(3deg); }
  }
  @keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
  }
  @keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
  }
  @keyframes punktePuls {
    0%,80%,100% { transform: scale(0.8); opacity: 0.4; }
    40%         { transform: scale(1.1); opacity: 1; }
  }

  #screenLogin {
    position: fixed; inset: 0; z-index: 999;
    background: linear-gradient(160deg, #F8F3E8 0%, #EFE8D8 50%, #F4EFE4 100%);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    padding: 20px;
    overflow: hidden;
  }

  /* Dekorative Hintergrund-Kreise */
  #screenLogin::before {
    content: '';
    position: absolute; top: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(143,168,130,0.18) 0%, transparent 70%);
    pointer-events: none;
  }
  #screenLogin::after {
    content: '';
    position: absolute; bottom: -60px; left: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201,92,69,0.10) 0%, transparent 70%);
    pointer-events: none;
  }

  .login-card {
    background: white;
    border-radius: 28px;
    border: 1px solid rgba(213,197,173,0.6);
    box-shadow: 0 8px 40px rgba(138,103,72,0.12), 0 2px 8px rgba(0,0,0,0.06);
    padding: 32px 26px 28px;
    width: 100%; max-width: 390px;
    display: flex; flex-direction: column; align-items: center; gap: 14px;
    animation: fadeInUp 0.5s ease;
    position: relative;
  }

  .login-kiste-wrap {
    animation: kisteFloat 3s ease-in-out infinite;
    cursor: pointer;
    filter: drop-shadow(0 8px 16px rgba(138,103,72,0.20));
  }
  .login-kiste-wrap:hover {
    animation: kisteWackle 0.5s ease;
  }

  .login-badge {
    background: linear-gradient(135deg, #8FA882, #7A9470);
    color: white;
    font-family: 'Nunito', sans-serif;
    font-size: 10px; font-weight: 800;
    letter-spacing: 0.12em; text-transform: uppercase;
    padding: 4px 12px; border-radius: 20px;
    margin-top: -4px;
  }

  .login-title {
    font-family: 'Lora', Georgia, serif;
    font-size: 22px; font-weight: 700;
    color: var(--text); text-align: center; line-height: 1.3;
  }
  .login-sub {
    font-size: 13px; color: var(--muted);
    text-align: center; line-height: 1.75;
  }
  .login-divider {
    width: 100%; height: 1px;
    background: linear-gradient(90deg, transparent, var(--border), transparent);
  }
  .login-input-wrap { width: 100%; position: relative; }
  .login-input {
    width: 100%; padding: 14px 16px;
    border: 1.5px solid var(--border); border-radius: 14px;
    font-family: 'Nunito', sans-serif; font-size: 16px;
    color: var(--text); background: #FDFAF6;
    outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
    box-sizing: border-box;
  }
  .login-input:focus {
    border-color: #8A6748;
    background: white;
    box-shadow: 0 0 0 3px rgba(138,103,72,0.10);
  }
  .login-input::placeholder { color: var(--muted); }
  .login-btn {
    width: 100%; padding: 15px;
    background: var(--accent); color: white;
    border: none; border-radius: 16px;
    font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 800;
    cursor: pointer; transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    letter-spacing: 0.01em;
    box-shadow: 0 4px 12px rgba(201,92,69,0.3);
  }
  .login-btn:hover {
    background: var(--accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(201,92,69,0.35);
  }
  .login-btn:active { transform: translateY(0); }
  .login-btn:disabled {
    background: var(--border2); color: var(--muted);
    cursor: not-allowed; box-shadow: none; transform: none;
  }
  .login-error {
    font-size: 12px; color: var(--accent);
    text-align: center; font-weight: 700; min-height: 16px;
  }
  .login-hint {
    font-size: 11px; color: var(--muted);
    text-align: center; line-height: 1.6;
  }
  .login-code-inputs { display: flex; gap: 8px; justify-content: center; }
  .login-code-input {
    width: 46px; height: 56px;
    border: 1.5px solid var(--border); border-radius: 14px;
    font-family: 'Nunito', sans-serif; font-size: 22px; font-weight: 800;
    text-align: center; color: var(--text); background: #FDFAF6;
    outline: none; transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
  }
  .login-code-input:focus {
    border-color: #8A6748; background: white;
    box-shadow: 0 0 0 3px rgba(138,103,72,0.10);
  }
  .login-back {
    background: none; border: none; color: var(--muted);
    font-size: 13px; font-weight: 700; cursor: pointer;
    font-family: 'Nunito', sans-serif; transition: color 0.15s;
  }
  .login-back:hover { color: var(--accent); }
  .login-step { display: none; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
  .login-step.aktiv { display: flex; animation: fadeInUp 0.35s ease; }

  /* ── App Shell ───────────────────────────────────────── */
  .app-header {
    background: var(--nav-bg);
    display: flex;
    align-items: center;
    padding: 6px 14px;
    padding-top: calc(6px + env(safe-area-inset-top));
  }
  .app-header-logo {
    display: flex; align-items: center;
  }
  .app-header-logo span { opacity: 0.85; font-weight: 600; font-size: 15px; }
  .btn-settings-gear:hover { background: rgba(255,255,255,0.3); }