:root { color-scheme: light; --primaer: #253943; --sekundaer: #344D5C;
  --weiss: #F6F6F6; --text: #2F2F2F; --highlight: #9EB0B9; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-height: 100svh; background: #ECEFF1; color: var(--text);
  font: 17px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
main { max-width: 540px; margin: auto; padding: 32px 24px max(32px, env(safe-area-inset-bottom)); }
header { display: flex; align-items: center; gap: 12px; color: var(--sekundaer);
  font-weight: 600; letter-spacing: .03em; }
header img { border-radius: 12px; }
h1 { color: var(--primaer); font-size: clamp(30px, 8vw, 42px); line-height: 1.15;
  letter-spacing: -.035em; margin: 40px 0 24px; }
p { margin: 16px 0; }
#status { min-height: 1.5em; font-weight: 600; overflow-wrap: anywhere; }
#status[data-fehler="ja"] { color: #9A3328; }
button { width: 100%; min-height: 60px; padding: 16px; border: 2px solid var(--primaer);
  border-radius: 12px; background: var(--primaer); color: var(--weiss);
  font: inherit; font-weight: 600; cursor: pointer; touch-action: manipulation; }
button:hover { background: var(--sekundaer); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 3px solid #1A7DA2; outline-offset: 4px; }
button:disabled { opacity: .65; cursor: wait; }
.sekundaer { background: var(--weiss); color: var(--primaer); }
.sekundaer:hover { background: #DFE5E8; }
.aktionen { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; }
#vorschau { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; padding: 0; list-style: none; margin: 24px 0; }
#vorschau:empty { display: none; }
#vorschau img { width: 100%; height: 180px; object-fit: contain; background: var(--weiss);
  border: 1px solid var(--highlight); border-radius: 8px; }
footer { margin-top: 40px; color: var(--sekundaer); font-size: 14px; }
@media (min-width: 768px) { main { padding-top: 64px; } }