/* Designsystem „Hanseatisch" — Papier/Petrol/Messing, Serif-Display + Sans-Body. */
:root{
  --papier:#EDEAE3;
  --petrol:#1C3F3A;
  --petrol-2:#2E6E63;
  --messing:#B98B47;
  --linie:#D3CDC1;
  --tinte:#22322F;
  --papier-2:#F6F4EF;
  --serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--sans);
  font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding:clamp(16px,4vw,48px) 16px;
}
.sheet{
  max-width:760px;margin:0 auto;
  background:var(--papier-2);
  border:1px solid var(--linie);
  border-radius:6px;
  padding:clamp(24px,5vw,56px);
  box-shadow:0 1px 0 rgba(28,63,58,.04),0 12px 40px -24px rgba(28,63,58,.35);
}
.sheet--wide{max-width:1080px}
.sheet--center{max-width:560px;text-align:center}
.eyebrow{
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--messing);font-weight:600;margin-bottom:.6rem;
}
.display{
  font-family:var(--serif);
  font-weight:600;
  font-size:clamp(1.9rem,4.4vw,2.9rem);
  line-height:1.1;color:var(--petrol);margin:.1rem 0 .5rem;
}
.summary{font-size:1.05rem;color:var(--tinte);margin:.4rem 0 1rem;max-width:60ch}
.muted{color:#6E6A61;font-size:.92rem}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82rem}
a{color:var(--petrol-2)}
.offer-link{
  display:inline-block;font-weight:600;color:var(--petrol-2);
  text-decoration:none;border-bottom:1px solid var(--messing);padding-bottom:1px;
}
.offer-link:hover{color:var(--petrol)}
.rule{border:none;border-top:1px solid var(--linie);margin:1.6rem 0}

/* Formular */
.form{display:flex;flex-direction:column;gap:1.4rem}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.field{display:flex;flex-direction:column;gap:.35rem}
.field span{font-size:.82rem;font-weight:600;color:var(--petrol);letter-spacing:.01em}
.field em{color:var(--messing);font-style:normal}
.field--typed{margin-top:1rem}
input[type=text]{
  font-family:var(--sans);font-size:1rem;color:var(--tinte);
  background:#fff;border:1px solid var(--linie);border-radius:4px;
  padding:.7rem .8rem;width:100%;
}
input[type=text]:focus{outline:none;border-color:var(--petrol-2);box-shadow:0 0 0 3px rgba(46,110,99,.15)}

/* Signatur */
.sig{border:1px solid var(--linie);border-radius:6px;padding:1rem 1.1rem 1.2rem;margin:0}
.sig legend{font-family:var(--serif);color:var(--petrol);font-size:1.1rem;padding:0 .4rem}
.sig__pad-wrap{position:relative}
.sig__pad{
  width:100%;height:180px;display:block;
  background:#fff;border:1px dashed var(--linie);border-radius:4px;
  touch-action:none;cursor:crosshair;
}
.btn-ghost{
  position:absolute;top:8px;right:8px;
  font-size:.78rem;color:var(--petrol-2);background:rgba(255,255,255,.85);
  border:1px solid var(--linie);border-radius:4px;padding:.25rem .6rem;cursor:pointer;
}
.btn-ghost:hover{color:var(--petrol);border-color:var(--petrol-2)}

/* Checkbox */
.checkbox{display:flex;align-items:flex-start;gap:.7rem;font-size:.98rem}
.checkbox input{margin-top:.25rem;width:1.15rem;height:1.15rem;accent-color:var(--petrol-2);flex:none}

.btn-primary{
  font-family:var(--sans);font-size:1.05rem;font-weight:600;letter-spacing:.01em;
  color:var(--papier);background:var(--petrol);
  border:1px solid var(--petrol);border-radius:5px;
  padding:.95rem 1.4rem;cursor:pointer;transition:background .15s;
}
.btn-primary:hover{background:var(--petrol-2)}
.btn-primary:disabled{opacity:.55;cursor:not-allowed}
.form__error{
  color:#8a2f22;background:#f6e7e3;border:1px solid #e0c3ba;
  border-radius:4px;padding:.6rem .8rem;font-size:.92rem;margin:0;
}

/* Danke */
.check{
  width:72px;height:72px;margin:0 auto 1rem;border-radius:50%;
  background:var(--petrol);color:var(--papier);
  font-size:2.4rem;line-height:72px;text-align:center;
}
.sheet--center .offer-link{margin-top:1.2rem}

/* Tabelle intern */
.table-wrap{overflow-x:auto}
.table{border-collapse:collapse;width:100%;font-size:.9rem;min-width:760px}
.table th,.table td{border-bottom:1px solid var(--linie);padding:.6rem .7rem;text-align:left;vertical-align:top}
.table th{color:var(--petrol);font-weight:600;background:rgba(28,63,58,.04);white-space:nowrap}
.sig-thumb{height:44px;width:auto;background:#fff;border:1px solid var(--linie);border-radius:3px}

.pwa-install{
  position:fixed;right:16px;bottom:16px;z-index:10;
  font-family:var(--sans);font-size:.9rem;font-weight:600;
  color:var(--papier);background:var(--petrol-2);
  border:none;border-radius:6px;padding:.6rem 1rem;cursor:pointer;
  box-shadow:0 6px 20px -8px rgba(28,63,58,.6);
}

@media (max-width:560px){
  .grid{grid-template-columns:1fr}
}