@font-face { font-family: Montserrat; src: url(/static/fonts/montserrat.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: Raleway; src: url(/static/fonts/raleway.woff2) format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --opal: #005F4E; --opal-dunkel: #004C3E; --sage-hell: #E1E6D4; --creme: #F3ECE2; --creme-hell: #F7F2EB;
  --tinte: #1E2421; --tinte-2: #3A423D; --grau: #6B7470; --linie: #DED5C8; --weiss: #fff;
  --gut: #2F7A45; --gut-bg: #E7F2E9; --schlecht: #B4452F; --schlecht-bg: #F8E6E1; --warn: #9A5F12; --warn-bg: #FBF0DD;
  --sicher-unten: env(safe-area-inset-bottom, 0px);
}
[hidden] { display: none !important; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--creme); color: var(--tinte); font: 400 16px/1.45 Raleway, system-ui, sans-serif; font-variant-numeric: lining-nums; }
h1, h2, h3 { font-family: Montserrat, system-ui, sans-serif; margin: 0; letter-spacing: -.01em; }
h1 { font-size: 22px; font-weight: 700; color: var(--opal); }
h2 { font-size: 17px; font-weight: 700; }
h3 { font-size: 15px; font-weight: 600; }
p { margin: 0; }

.kopf { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: calc(env(safe-area-inset-top, 0px) + 12px) 16px 12px; background: var(--opal); }
.logo { height: 16px; display: block; }
.netz { font: 600 12px Montserrat, sans-serif; color: var(--opal); background: var(--creme); padding: 3px 10px; border-radius: 99px; }

main { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(112px + var(--sicher-unten)); }
.stapel > * + * { margin-top: 12px; }
.leise { color: var(--grau); font-size: 14px; }
.karte { background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 14px; }

button { font: 600 16px Montserrat, system-ui, sans-serif; border: 0; border-radius: 8px; min-height: 48px; padding: 0 16px; cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid #97A692; outline-offset: 1px; }
.haupt { background: var(--opal); color: #fff; }
.haupt:active { background: var(--opal-dunkel); }
.haupt:disabled { background: var(--linie); color: var(--grau); }
.neben { background: var(--weiss); color: var(--opal); border: 1px solid var(--opal); }
.breit { width: 100%; }
.klein { min-height: 40px; font-size: 14px; padding: 0 12px; }
.text-knopf { background: none; color: var(--opal); min-height: 40px; padding: 0; font-size: 14px; text-decoration: underline; }

label { display: block; }
.feld-titel { display: block; font: 600 13px Montserrat, sans-serif; color: var(--tinte-2); margin-bottom: 4px; }
input, textarea { width: 100%; font: 500 17px Raleway, system-ui, sans-serif; font-variant-numeric: lining-nums; color: var(--tinte);
  background: var(--weiss); border: 1px solid #B9AE9F; border-radius: 8px; padding: 10px 12px; min-height: 48px; appearance: none; }
textarea { min-height: 96px; resize: vertical; }
select { width: 100%; font: 500 17px Raleway, system-ui, sans-serif; color: var(--tinte); min-height: 48px; padding: 10px 36px 10px 12px;
  border: 1px solid #B9AE9F; border-radius: 8px; appearance: none; -webkit-appearance: none;
  background: var(--weiss) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23005F4E' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 12px center; }
select:focus-visible { outline: 3px solid #97A692; outline-offset: 1px; }
.pflicht::after { content: " *"; color: var(--schlecht); }
.zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* Listen */
.eintrag { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 56px; text-align: left;
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 10px; padding: 10px 14px; color: var(--tinte); font: 400 15px Raleway, sans-serif; }
.eintrag > span:first-child { min-width: 0; }
.eintrag strong { display: block; font: 600 15px Montserrat, sans-serif; overflow-wrap: anywhere; }
.eintrag small { display: block; color: var(--grau); font-size: 13px; word-break: break-word; }
.eintrag + .eintrag { margin-top: 8px; }
.entwurf { display: flex; gap: 8px; align-items: stretch; }
.entwurf + .entwurf { margin-top: 8px; }
.entwurf .eintrag { flex: 1; min-width: 0; }
.loeschen { flex: none; width: 84px; padding: 0 4px; color: var(--schlecht); border-color: var(--schlecht); }
.loeschen.scharf { background: var(--schlecht); color: #fff; }
.marke { flex: none; font: 600 12px Montserrat, sans-serif; padding: 3px 9px; border-radius: 99px; background: var(--sage-hell); color: var(--opal-dunkel); white-space: nowrap; }
.marke.warn { background: var(--warn-bg); color: var(--warn); }
.marke.fehler { background: var(--schlecht-bg); color: var(--schlecht); }
.abschnitt { font: 600 13px Montserrat, sans-serif; color: var(--grau); margin: 20px 0 8px; }

/* Auswahl */
.segmente { display: flex; gap: 6px; }
.segmente button { flex: 1; background: var(--weiss); color: var(--tinte-2); border: 1px solid #B9AE9F; font-size: 15px; }
.segmente button[aria-pressed="true"] { background: var(--opal); border-color: var(--opal); color: #fff; }
.segmente button.nio[aria-pressed="true"] { background: var(--schlecht); border-color: var(--schlecht); }

/* Schritte */
.fortschritt { display: flex; gap: 4px; margin-bottom: 14px; }
.fortschritt button { flex: 1; min-height: 28px; padding: 0; background: none; display: flex; align-items: center; }
.fortschritt i { display: block; width: 100%; height: 6px; border-radius: 3px; background: var(--linie); }
.fortschritt .fertig i { background: #97A692; }
.fortschritt .jetzt i { background: var(--opal); }
.schritt-kopf { display: flex; gap: 12px; align-items: center; justify-content: space-between; }
.schritt-kopf img { height: 76px; width: 76px; object-fit: contain; flex: none; }
.unterkopf { color: var(--grau); font-size: 14px; }

/* Messzeile */
.messzeile h3 { margin-bottom: 10px; }
.messfelder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 10px; }
.messfeld.voll { grid-column: 1 / -1; }
.messfeld small { display: block; color: var(--grau); font-size: 12.5px; margin-bottom: 4px; min-height: 18px; }
.messfeld input[data-status="io"] { border-color: var(--gut); background: var(--gut-bg); }
.messfeld input[data-status="nio"], .messfeld input[data-status="ungueltig"] { border-color: var(--schlecht); background: var(--schlecht-bg); color: var(--schlecht); font-weight: 700; }
.status { display: block; font: 600 12.5px Montserrat, sans-serif; margin-top: 3px; min-height: 18px; }
.status.io { color: var(--gut); }
.status.nio { color: var(--schlecht); }
.tippfehler { grid-column: 1 / -1; background: var(--warn-bg); color: var(--warn); border-radius: 8px; padding: 8px 10px; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tippfehler button { flex: none; background: var(--weiss); color: var(--warn); border: 1px solid var(--warn); }

/* Fotos */
.fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.foto { position: relative; aspect-ratio: 1; }
.foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; display: block; }
.foto button { position: absolute; top: 4px; right: 4px; min-height: 32px; height: 32px; width: 32px; padding: 0; border-radius: 50%; background: rgba(30, 36, 33, .75); color: #fff; font-size: 18px; line-height: 1; }
.foto-knopf { display: flex; align-items: center; justify-content: center; min-height: 48px; border: 1px dashed var(--opal); border-radius: 8px; color: var(--opal); font: 600 15px Montserrat, sans-serif; cursor: pointer; margin-top: 10px; }
.foto-knopf input { position: absolute; width: 1px; height: 1px; min-height: 0; padding: 0; border: 0; opacity: 0; }

/* Übersicht */
.hinweis { border-radius: 10px; padding: 12px 14px; font-size: 15px; }
.hinweis h3 { margin-bottom: 6px; }
.hinweis ul { margin: 0; padding-left: 18px; }
.hinweis li + li { margin-top: 4px; }
.hinweis.gut { background: var(--gut-bg); color: var(--gut); }
.hinweis.schlecht { background: var(--schlecht-bg); color: var(--schlecht); }
.hinweis.warn { background: var(--warn-bg); color: var(--warn); }

/* Unterschrift */
.unterschrift { display: block; width: 100%; height: 180px; background: var(--weiss); border: 1px solid #B9AE9F; border-radius: 8px; touch-action: none; }

/* Leiste unten */
.leiste { position: fixed; left: 0; right: 0; bottom: 0; z-index: 10; background: var(--creme-hell); border-top: 1px solid var(--linie); padding: 10px 16px calc(10px + var(--sicher-unten)); }
.leiste-innen { display: flex; gap: 10px; max-width: 528px; margin: 0 auto; }
.leiste-innen .haupt { flex: 2; }
.leiste-innen .neben { flex: 1; }

.fehlertext { color: var(--schlecht); font-size: 14px; min-height: 20px; }
.ende { text-align: center; padding-top: 24px; }
.ende h1 { margin-bottom: 8px; }