:root { --blau: #364593; --kobalt: #1C49A1; --pink: #b35985; --hell: #f4f6fb; --text: #1e2333; --grau: #5b6275; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--hell); color: var(--text); font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }
.kopf { background: #fff; border-bottom: 4px solid var(--blau); padding: 14px 18px; }
.marke { display: inline-flex; align-items: baseline; gap: 0; font-weight: 800; font-size: 28px; color: var(--kobalt); position: relative; padding-bottom: 14px; }
.marke .pep { font-style: italic; font-family: "Brush Script MT", cursive, system-ui; font-weight: 700; }
.marke small { position: absolute; left: 0; bottom: 0; font-size: 10px; letter-spacing: .28em; color: var(--pink); font-weight: 700; }
main { max-width: 640px; margin: 0 auto; padding: 16px; }
.karte { background: #fff; border-radius: 14px; padding: 18px 20px; margin: 0 0 14px; box-shadow: 0 1px 3px rgba(20, 30, 60, .07); }
.karte.gruss { border-top: 5px solid var(--blau); }
.karte.fehler { border-left: 5px solid #c0392b; background: #fff6f5; }
h1 { font-size: 24px; margin: 0 0 8px; color: var(--blau); }
h2 { font-size: 19px; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; }
.nr { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; background: var(--blau); color: #fff; align-items: center; justify-content: center; font-size: 15px; }
.vorteile { padding-left: 20px; margin: 8px 0 0; }
.tab { width: 100%; border-collapse: collapse; font-size: 16px; }
.tab td { padding: 6px 0; border-bottom: 1px solid #e6e8ef; }
.tab td:last-child { text-align: right; white-space: nowrap; }
.tab .summe td { font-weight: 700; border-bottom: 0; }
label { display: block; font-weight: 600; margin: 14px 0 5px; }
input[type=text], input[type=email] { width: 100%; font: inherit; padding: 12px; border: 1px solid #c4c9d6; border-radius: 10px; background: #fff; }
input:focus, canvas:focus { outline: 3px solid #92D8E9; outline-offset: 1px; }
label.haken { display: flex; gap: 10px; align-items: flex-start; font-weight: 400; font-size: 15px; }
label.haken input { width: 22px; height: 22px; flex: 0 0 22px; margin-top: 2px; }
.mandat { background: var(--hell); border-radius: 10px; padding: 12px 14px; font-size: 14px; margin-top: 14px; }
canvas { width: 100%; height: 160px; border: 2px dashed #8a93ab; border-radius: 10px; background: #fff; touch-action: none; }
.sigzeile { text-align: right; }
.knopf { display: block; width: 100%; background: var(--blau); color: #fff; border: 0; border-radius: 12px; padding: 15px; font: inherit; font-weight: 700; font-size: 18px; cursor: pointer; }
.knopf.zweit { display: inline-block; width: auto; background: #fff; color: var(--blau); border: 1px solid var(--blau); padding: 6px 12px; font-size: 14px; margin-top: 6px; }
.klein { font-size: 13px; color: var(--grau); }
footer { max-width: 640px; margin: 0 auto; padding: 10px 16px 30px; font-size: 13px; color: var(--grau); text-align: center; }