/* Brief by ManniMindset – iOS-naher Look, Baukasten wie apps/uebergabe */
:root {
  --bg: #f2f2f7;
  --group: #ffffff;
  --label: #1c1c1e;
  --label2: #8a8a8e;
  --sep: rgba(60, 60, 67, .20);
  --tint: #0091c8;            /* Markenfarbe */
  --tint-soft: #e6f4fa;
  --green: #34c759;
  --red: #ff3b30;
  --orange: #ff9500;
  --radius: 12px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--label);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  font-size: 17px; line-height: 1.4;
}

/* Das Grundraster der Familie: die Seite scrollt NIE (basis.css setzt
   overflow: hidden), stattdessen scrollt genau EIN Bereich. Bei dieser App
   ist das der Inhalt (main) zwischen Navigation und Werbeflaeche.
   Die Zeilen: Kopf, Navigation, Inhalt (waechst), Werbung, Fusszeile.
   Ohne diese Regeln ragte die Angaben-Seite unsichtbar unter den
   Bildschirmrand und der "Vorschau ansehen"-Knopf war unerreichbar
   (gemeldet von Manni am 31.07.2026). */
.app { grid-template-rows: auto auto minmax(0, 1fr) auto auto; }
main {
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}

/* Kopfzeile */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 10px 12px calc(10px);
  padding-top: calc(10px + env(safe-area-inset-top));
  background: rgba(249, 249, 251, .82);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: .5px solid var(--sep);
}
.toptitle { text-align: center; font-weight: 650; font-size: 17px; }
.navbtn {
  border: 0; background: none; color: var(--tint); font: inherit; font-size: 17px;
  padding: 4px 6px; cursor: pointer; justify-self: start; white-space: nowrap;
}
.navbtn.right { justify-self: end; }
.navbtn:disabled { color: var(--label2); }

main { width: 100%; max-width: 640px; margin: 0 auto; padding: 8px 8px 30px; }

/* Markenkopf auf dem Startscreen */
.large-title { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 0; }
.signature {
  font-family: "Century Gothic", "Futura", "Segoe UI", sans-serif;
  letter-spacing: .16em; text-transform: none; font-size: 13px; color: var(--label2);
  margin: 2px 0 16px;
}

/* Gruppen / Karten */
.group { background: var(--group); border-radius: var(--radius); margin: 14px 0; overflow: hidden; }
.group .row { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: .5px solid var(--sep); }
.group .row:last-child { border-bottom: 0; }
.grouplabel { font-size: 13px; color: var(--label2); text-transform: uppercase; letter-spacing: .04em; margin: 18px 4px 6px; }
.hint { font-size: 13px; color: var(--label2); margin: 6px 4px 0; }

/* Formularfelder */
label.f { display: block; padding: 10px 14px 12px; border-bottom: .5px solid var(--sep); }
label.f:last-child { border-bottom: 0; }
label.f .t { display: block; font-size: 12px; color: var(--label2); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
input[type=text], input[type=date], input[type=email], input[type=tel], textarea, select {
  width: 100%; border: 0; background: none; font: inherit; color: var(--label);
  outline: none; padding: 2px 0;
}
textarea { resize: vertical; min-height: 90px; line-height: 1.45; }
textarea.big { min-height: 170px; font-size: 17px; }
.detected { color: var(--tint); font-size: 12px; font-weight: 600; }
.missing .t { color: var(--red); }

/* Buttons */
.btn {
  display: block; width: 100%; border: 0; border-radius: var(--radius);
  padding: 15px 16px; font: inherit; font-weight: 650; font-size: 17px; cursor: pointer;
  transition: transform .1s ease, opacity .1s ease; text-align: center; text-decoration: none;
}
.btn:active { transform: scale(.97); opacity: .85; }
.btn.primary { background: var(--tint); color: #fff; }
.btn.secondary { background: var(--tint-soft); color: var(--tint); }
.btn.plain { background: var(--group); color: var(--tint); }
.btn.danger { color: var(--red); background: var(--group); }
.btn[disabled] { opacity: .45; pointer-events: none; }
.btnrow { display: flex; gap: 10px; }
.btnrow .btn { flex: 1; }

/* Briefart-Auswahl (Segmented als Chips, weil 6 Optionen) */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.chip {
  border: 1px solid var(--sep); background: var(--group); color: var(--label);
  border-radius: 999px; padding: 7px 14px; font: inherit; font-size: 15px; cursor: pointer;
}
.chip.on { background: var(--tint); border-color: var(--tint); color: #fff; font-weight: 650; }

/* Schritt-Anzeige */
.steps { display: flex; gap: 6px; margin: 4px 0 12px; }
.steps i { flex: 1; height: 4px; border-radius: 2px; background: var(--sep); }
.steps i.on { background: var(--tint); }

/* Vorschau */
.previewbody {
  font-family: Georgia, "Times New Roman", serif; /* nur Bildschirm-Anmutung, PDF nutzt DejaVu */
  font-size: 16px;
}

/* Unterschrift */
.sigwrap { position: relative; }
canvas.sigpad {
  width: 100%; height: 170px; display: block; background: #fff;
  border-radius: var(--radius); border: 1px dashed var(--sep); touch-action: none;
}
.sigline { position: absolute; left: 10%; right: 10%; bottom: 38px; border-bottom: 1px solid var(--sep); pointer-events: none; }
.sighint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: var(--label2); font-size: 12px; pointer-events: none; }

/* Fusszeile mit Datenschutz-Link (Werbeflaeche #werbung stylt /app/basis.css) */
.fusszeile { text-align: center; font-size: 12px; margin: 14px 0 24px; }
.fusszeile a { color: var(--label2); }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  background: rgba(28, 28, 30, .92); color: #fff; font-size: 15px;
  padding: 10px 18px; border-radius: 999px; z-index: 50; max-width: 88vw; text-align: center;
}

/* Kleinkram */
.center { text-align: center; }
.spacer { height: 10px; }
.version { text-align: center; color: var(--label2); font-size: 11px; margin-top: 26px; }
.removedbox { font-size: 13px; color: var(--label2); }