:root {
  --bg: #f4f3ef; --fl: #ffffff; --fl2: #faf9f6; --tx: #1d1d1b; --tx2: #6b6a66; --li: #e2e0da;
  --ak: #2f5d50; --ak-tx: #ffffff; --ak-bg: #e6efec; --wa: #9a5b00; --wa-bg: #fff4e0; --rot: #b3261e;
  --r: 12px;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141413; --fl: #1e1e1c; --fl2: #232321; --tx: #ecebe7; --tx2: #a3a29c; --li: #34342f;
    --ak: #8cc4b2; --ak-tx: #0f1f1a; --ak-bg: #1f2e29; --wa: #f0b35c; --wa-bg: #2e2412; --rot: #ff8a80;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tx);
  font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; }
a { color: var(--ak); text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }

.leiste { position: sticky; top: 0; z-index: 10; display: flex; align-items: baseline; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top)) 16px 10px; background: var(--fl); border-bottom: 1px solid var(--li); }
.marke-logo { font-weight: 700; color: var(--tx); }
.firma { color: var(--tx2); font-size: 13px; }

main { max-width: 860px; margin: 0 auto; padding: 20px 16px 120px; }
h1 { font-size: 24px; line-height: 1.2; margin: 4px 0 4px; }
h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--tx2); margin: 28px 0 10px; font-weight: 600; }
.unter { color: var(--tx2); margin: 0 0 16px; font-size: 15px; }
.zurueck { display: inline-block; font-size: 14px; margin-bottom: 4px; }
.laedt { color: var(--tx2); }

.karte { background: var(--fl); border: 1px solid var(--li); border-radius: var(--r); padding: 14px 16px; }
.karte + .karte { margin-top: 10px; }
.liste { display: grid; gap: 10px; }
a.karte { display: block; color: var(--tx); }
a.karte:active { background: var(--fl2); }
.karte h3 { margin: 0 0 2px; font-size: 17px; }
.klein { font-size: 13px; color: var(--tx2); }
.inaktiv { opacity: .55; }

.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px;
  border-radius: 10px; border: 1px solid var(--li); background: var(--fl); cursor: pointer; font-weight: 600; }
.knopf.primaer { background: var(--ak); color: var(--ak-tx); border-color: var(--ak); }
.knopf.klein { min-height: 34px; padding: 0 12px; font-size: 14px; font-weight: 500; }
.knopf.gefahr { color: var(--rot); }
.knopf:disabled { opacity: .5; }
.zeile { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.zeile.ende { justify-content: space-between; }

.pille { display: inline-block; font-size: 12px; padding: 2px 9px; border-radius: 99px; border: 1px solid var(--li); color: var(--tx2); white-space: nowrap; }
.pille.ok { border-color: var(--ak); color: var(--ak); }
.pille.wa { border-color: var(--wa); color: var(--wa); }
button.pille { background: transparent; cursor: pointer; font-size: 13px; padding: 4px 12px; }

/* Tagesliste */
.tag { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; border-bottom: 1px solid var(--li); color: var(--tx); }
.tag:last-child { border-bottom: 0; }
.tag .datum { font-weight: 600; }
.tag .info { grid-column: 1 / -1; font-size: 13px; color: var(--tx2); display: flex; gap: 12px; flex-wrap: wrap; }
.tabelle { background: var(--fl); border: 1px solid var(--li); border-radius: var(--r); overflow: hidden; }

/* Wetter */
.wetter-kopf { font-size: 18px; font-weight: 600; margin: 0 0 10px; }
.wetter-kopf span { font-weight: 400; color: var(--tx2); }
.werte { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.wert { background: var(--fl2); border-radius: 8px; padding: 8px 10px; }
.wert b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.wert small { color: var(--tx2); font-size: 12px; }
.hinweis { background: var(--wa-bg); border-left: 3px solid var(--wa); border-radius: 8px; padding: 10px 12px; margin-top: 10px; font-size: 14px; }
.hinweis b { color: var(--wa); }
.quelle { font-size: 12px; color: var(--tx2); margin-top: 8px; }

/* Termine */
.termin { padding: 10px 0; border-bottom: 1px solid var(--li); }
.termin:last-child { border-bottom: 0; padding-bottom: 0; }
.termin:first-child { padding-top: 0; }
.termin .zeit { font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 6px; }
.termin .detail { font-size: 13px; color: var(--tx2); margin-top: 2px; }
.leer { color: var(--tx2); font-style: italic; margin: 0; }

/* Medien */
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.galerie button { position: relative; padding: 0; border: 0; border-radius: 8px; overflow: hidden; aspect-ratio: 1; background: var(--fl2); cursor: pointer; }
.galerie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galerie .zeitmarke { position: absolute; left: 4px; bottom: 4px; font-size: 11px; background: rgba(0,0,0,.55); color: #fff; padding: 1px 6px; border-radius: 6px; }
.galerie .hochladen { display: grid; place-items: center; color: var(--tx2); font-size: 12px; }
.audio { padding: 12px 0; border-bottom: 1px solid var(--li); }
.audio:last-child { border-bottom: 0; }
.audio audio { width: 100%; height: 40px; margin: 6px 0; }
.transkript { white-space: pre-wrap; font-size: 15px; }
.transkript.offen { color: var(--tx2); font-style: italic; }

/* Textfelder */
.feld { margin-top: 18px; }
.feld label { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
.feld label small { font-weight: 400; color: var(--tx2); }
textarea, input[type=text], input[type=date], select { width: 100%; border: 1px solid var(--li); background: var(--fl); border-radius: 10px; padding: 10px 12px; }
textarea { min-height: 76px; resize: vertical; line-height: 1.45; }
textarea:focus, input:focus, select:focus { outline: 2px solid var(--ak); outline-offset: -1px; }
.formular .feld label { font-weight: 600; }
.wahl { display: grid; gap: 8px; }
.wahl label { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; background: var(--fl); border: 1px solid var(--li); border-radius: 10px; padding: 10px 12px; }
.wahl input { margin-top: 4px; }

/* Erfassen-Leiste */
.erfassen { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex; gap: 10px; justify-content: center;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--fl) 92%, transparent);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid var(--li); }
.erfassen .knopf { flex: 1; max-width: 260px; min-height: 52px; font-size: 16px; }
.erfassen .knopf.aufnahme { background: var(--rot); border-color: var(--rot); color: #fff; }
.punkt { width: 10px; height: 10px; border-radius: 50%; background: #fff; animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .2; } }

.nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 32px; padding-top: 16px; border-top: 1px solid var(--li); font-size: 14px; }

#toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%) translateY(20px);
  background: var(--tx); color: var(--bg); padding: 8px 14px; border-radius: 99px; font-size: 14px; opacity: 0; transition: .2s; pointer-events: none; z-index: 40; }
#toast.sichtbar { opacity: 1; transform: translateX(-50%); }

/* Bildansicht */
.ueberlagerung { position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.92); display: flex; flex-direction: column; }
.ueberlagerung img { flex: 1; min-height: 0; object-fit: contain; width: 100%; }
.ueberlagerung .unten { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); display: grid; gap: 8px; background: #111; color: #eee; }
.ueberlagerung .unten input { background: #222; color: #eee; border-color: #333; }
.ueberlagerung .knopf { background: #222; border-color: #333; color: #eee; }
.ueberlagerung .zu { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; }

@media (min-width: 760px) {
  .erfassen { left: 50%; right: auto; transform: translateX(-50%); bottom: 16px; border: 1px solid var(--li); border-radius: 16px; width: 560px; padding: 10px; }
  #toast { bottom: 100px; }
}
@media print {
  .leiste, .erfassen, .nav, .zeile .knopf, #toast, button.pille { display: none !important; }
  body { background: #fff; }
  main { padding: 0; }
  textarea { border: 0; padding: 0; min-height: 0; resize: none; }
}