:root { color-scheme: light; font: 17px/1.6 system-ui, sans-serif; color: #172e32; background: #eef3f1; }
* { box-sizing: border-box; }
body { margin: 0; padding: 48px 20px; }
main { max-width: 780px; margin: auto; }
.marke { color: #406663; font-size: .85rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
h1 { font-size: clamp(2rem, 6vw, 3.1rem); line-height: 1.15; letter-spacing: -.035em; }
h2 { font-size: 1.15rem; overflow-wrap: anywhere; }
section { margin: 32px 0 20px; background: white; border: 1px solid #c6d5cf; border-radius: 18px; padding: 28px; box-shadow: 0 12px 40px #172e3208; }
.aktionen { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
button { max-width: 100%; min-height: 46px; border: 1px solid #325e56; border-radius: 9px; background: #fff; color: #214f45; padding: 10px 16px; font: inherit; font-weight: 650; cursor: pointer; }
#laden { background: #214f45; color: #fff; }
button:disabled { opacity: .5; cursor: default; }
button:focus-visible { outline: 3px solid #ba6a19; outline-offset: 4px; }
#ergebnis { margin-top: 24px; padding: 14px; border-radius: 8px; background: #f1f4f3; overflow-wrap: anywhere; }
#ergebnis[data-state="erfolg"] { background: #e3f3e6; color: #20502f; }
#ergebnis[data-state="fehler"] { background: #fff0e8; color: #8b351b; }
#person, #commit, .hinweis { font-size: .88rem; color: #48625e; overflow-wrap: anywhere; }
@media (max-width: 480px) { body { padding: 24px 16px; } section { padding: 20px; } button { width: 100%; } .aktionen { display: block; } .aktionen button + button { margin-top: 10px; } }