/* App-Ergänzungen: Navigation unten, Installieren-Hinweis, Fortschritt */
body { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
.appnav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; background: #fff; border-top: 1px solid #eadfd4;
  display: flex; justify-content: space-around; padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.appnav a { flex: 1; max-width: 120px; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0;
  color: #5b6170; text-decoration: none; font-size: 11px; font-weight: 800; min-height: 52px; justify-content: center; }
.appnav a[aria-current=page] { color: #e8620c; }
.appnav svg { width: 22px; height: 22px; }
.appnav a { position: relative; }
.appnav .soon { position: absolute; top: 2px; left: 50%; margin-left: 6px; font-size: 8px; letter-spacing: .06em; background: #14213d; color: #fff; border-radius: 6px; padding: 1px 4px; }

.install { display: none; background: #fff6ee; border: 2px solid #e8620c; border-radius: 16px; padding: 14px 16px; margin-bottom: 18px; position: relative; }
.install.show { display: block; }
.install h3 { font-size: 16px; color: #14213d; margin-bottom: 4px; padding-right: 30px; }
.install p { font-size: 14px; color: #5b6170; }
.install ol { font-size: 14px; color: #1d1d1f; margin: 8px 0 0 18px; }
.install button.go { margin-top: 10px; width: 100%; background: #e8620c; color: #fff; border: 0; border-radius: 12px; padding: 13px; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; }
.install button.x { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; border: 0; background: transparent; font-size: 22px; color: #5b6170; cursor: pointer; }

.progress { background: #14213d; color: #fff; border-radius: 16px; padding: 16px; margin-bottom: 20px; }
.progress .top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.progress h3 { font-size: 16px; }
.progress .count { font-size: 26px; font-weight: 900; color: #e8620c; }
.progress .bar { height: 10px; border-radius: 6px; background: rgba(255,255,255,.15); margin: 10px 0 12px; overflow: hidden; }
.progress .bar i { display: block; height: 100%; background: #e8620c; border-radius: 6px; width: 0; transition: width .3s; }
.progress button { width: 100%; border: 0; border-radius: 12px; padding: 13px; font: inherit; font-weight: 800; font-size: 16px; cursor: pointer; background: #e8620c; color: #fff; }
.progress button.done { background: rgba(255,255,255,.15); color: #fff; }
.progress .sub { font-size: 13px; color: #d9deea; margin-top: 8px; text-align: center; }
.progress .undo { background: transparent; color: #d9deea; font-size: 13px; font-weight: 700; padding: 6px; margin-top: 4px; text-decoration: underline; }

/* Platz für Uhrzeit/Notch oben, wenn die App vom Homescreen gestartet wird */
.hero { padding-top: calc(30px + env(safe-area-inset-top)) !important; }

/* =========================================================
   Modernes Design: Verläufe, weiche Schatten, Tiefe
   ========================================================= */
:root {
  --g-navy: linear-gradient(150deg, #24345f 0%, #14213d 48%, #0a1124 100%);
  --g-orange: linear-gradient(135deg, #f2812c 0%, #e8620c 55%, #c94a10 100%);
  --g-orange-soft: radial-gradient(circle at 78% 22%, #ffb35f 0%, #f27a26 42%, #c84810 100%);
  --sh-card: 0 1px 2px rgba(20,33,61,.06), 0 10px 28px rgba(20,33,61,.08);
  --sh-btn: 0 6px 16px rgba(20,33,61,.18);
}
body { background: #faf6f1 !important; }

/* Kopfbereich: Navy-Verlauf mit Lichtschein + Orange-Welle als Verlauf */
.hero { background: radial-gradient(90% 80% at 88% 0%, rgba(96,112,170,.35) 0%, rgba(20,33,61,0) 60%), var(--g-navy) !important; }
.hero:after { background: var(--g-orange-soft) !important; width: 190px !important; height: 190px !important; right: -90px !important; top: -95px !important; }

/* Buttons */
.btn:not(.ghost):not(.dark):not(.secondary):not([style*="#fff"]) { background: var(--g-orange) !important; box-shadow: var(--sh-btn); }
.btn.dark, .btn.secondary { background: var(--g-navy) !important; box-shadow: var(--sh-btn); }
.install button.go, .progress button:not(.done):not(.undo) { background: var(--g-orange) !important; box-shadow: var(--sh-btn); }

/* Karten: weiche Schatten statt Rahmen */
.card:not(.new), .letter, .list li, .partner, .help, .summary { border-color: transparent !important; box-shadow: var(--sh-card); background-color: #fff; }
.card.new { box-shadow: 0 10px 28px rgba(232,98,12,.14); }
.teaser, .founder { background: linear-gradient(160deg, #fff8f1 0%, #ffeedd 100%) !important; box-shadow: var(--sh-card); }

/* Dunkle Karten: Navy-Verlauf mit Licht */
.card.today, .progress, .calbox:not([style]) { background: radial-gradient(80% 70% at 90% 0%, rgba(96,112,170,.30) 0%, rgba(20,33,61,0) 60%), var(--g-navy) !important; box-shadow: 0 12px 30px rgba(20,33,61,.22); }

/* Kleine Elemente in Orange als Verlauf */
.bar i, .progress .bar i { background: var(--g-orange) !important; }
.day.done i { background: var(--g-orange) !important; border-color: transparent !important; }
.opts button[aria-pressed=true], .opts input:checked + span, .moods input:checked + span, .days input:checked + span { background: var(--g-orange) !important; border-color: transparent !important; box-shadow: var(--sh-btn); }
.num, .n { background: var(--g-orange) !important; box-shadow: 0 4px 10px rgba(201,74,16,.25); }
.badge { background: var(--g-orange) !important; }
.stats div, .day { box-shadow: inset 0 0 0 1px rgba(20,33,61,.04); }

/* Navigation unten: leicht durchsichtig, wie bei iOS */
.appnav { background: rgba(255,255,255,.86) !important; -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-top: 1px solid rgba(20,33,61,.06) !important; box-shadow: 0 -6px 20px rgba(20,33,61,.05); }

/* Nachrichten von Chris */
.msg { background:#fff; border-radius:18px; padding:16px; margin-bottom:14px; box-shadow: var(--sh-card); }
.msg-head { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.msg-head img { width:42px; height:42px; border-radius:50%; box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f27a26; }
.msg-head b { display:block; color:#14213d; font-size:16px; line-height:1.2; }
.msg-head span { font-size:13px; color:#5b6170; }
.msg-text { font-size:16px; line-height:1.5; color:#1d1d1f; }
.msg-img { display:block; width:100%; max-height:62vh; object-fit:cover; object-position:center 30%; border-radius:14px; margin-top:12px; }
.msg-link { display:inline-block; margin-top:10px; color:#e8620c; font-weight:800; text-decoration:none; }
.msg-foot { display:flex; margin-top:12px; }
.like { display:inline-flex; align-items:center; gap:6px; border:0; border-radius:999px; padding:9px 14px; min-height:44px; background:#f6f1eb; color:#5b6170; font:inherit; font-weight:800; font-size:15px; cursor:pointer; }
.like svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; }
.like.on { background: var(--g-orange); color:#fff; box-shadow: var(--sh-btn); }
.like.on svg { fill:#fff; stroke:#fff; }
.like.pop svg { animation: ckpop .35s ease; }
@keyframes ckpop { 50% { transform: scale(1.35); } }
.msg-lbl { font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#e8620c; font-weight:800; margin:0 0 8px 4px; }
.msg-more { display:block; text-align:right; font-size:14px; font-weight:800; color:#e8620c; text-decoration:none; margin:-4px 4px 18px; }
.appnav a:last-child .soon { left:auto; right:0; margin-left:0; }