:root{--tinte: #141414;--papier: #ffffff;--grau1: #f4f4f4;--grau2: #d8d8d8;--grau3: #8a8a8a;--grau4: #3c3c3c;--gut: #3f7a52;--achtung: #a4802b;--schlecht: #9c3f33;--gross: 2rem;--zwischen: 1.25rem;--lese: 1rem;--klein: .75rem}*{box-sizing:border-box;margin:0;padding:0;border-radius:0}html{font-size:16px}body{font-family:system-ui,-apple-system,Segoe UI,sans-serif;color:var(--tinte);background:var(--papier);line-height:1.5;font-size:var(--lese)}a{color:inherit}#app{min-height:100vh;display:flex;flex-direction:column}header.kopf{display:flex;align-items:baseline;gap:16px;padding:24px 32px}header.kopf .logo{font-size:var(--zwischen);font-weight:700;letter-spacing:.02em;color:var(--tinte);text-decoration:none}header.kopf .zusatz{color:var(--grau3);font-size:var(--klein);text-transform:uppercase;letter-spacing:.12em}header.kopf .rechts{margin-left:auto;display:flex;gap:16px;align-items:baseline}main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:32px}main.breit{max-width:1400px}.dunkel{background:var(--grau4);color:var(--papier)}.dunkel .neben{color:var(--grau2)}h1{font-size:var(--gross);font-weight:700;line-height:1.2;margin-bottom:24px}h2{font-size:var(--zwischen);font-weight:600;margin-bottom:16px}.neben{color:var(--grau3)}.beschriftung{font-size:var(--klein);text-transform:uppercase;letter-spacing:.12em;color:var(--grau3)}button,.knopf{font:inherit;cursor:pointer;text-decoration:none;padding:8px 24px;border:1px solid var(--tinte);background:var(--papier);color:var(--tinte);display:inline-block}button.haupt,.knopf.haupt{background:var(--tinte);color:var(--papier)}button:hover:not(:disabled):not(.haupt):not(.leise),.knopf:hover:not(.haupt){background:var(--grau1)}button.haupt:hover:not(:disabled){background:var(--grau4)}button:disabled{border-color:var(--grau2);color:var(--grau3);cursor:default}button.leise{border:none;text-decoration:underline;padding:8px}button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--tinte);outline-offset:2px}.dunkel button,.dunkel .knopf{border-color:var(--papier);background:transparent;color:var(--papier)}.dunkel button.haupt{background:var(--papier);color:var(--tinte)}input[type=text],input[type=email],input[type=password],textarea{font:inherit;padding:8px 12px;width:100%;border:1px solid var(--grau2);background:var(--papier);color:var(--tinte)}input:focus,textarea:focus{border-color:var(--tinte);outline:none}label{display:block;margin-bottom:8px}.feld{margin-bottom:24px}.zeile{display:flex;align-items:center;gap:16px;padding:16px 0}.raster{display:grid;gap:24px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.karte{display:block;color:inherit;text-decoration:none}.karte img{width:100%;display:block;background:var(--grau1)}.karte .titel{margin-top:8px}a.karte:hover img{outline:2px solid var(--tinte)}.dunkel a.karte:hover img{outline-color:var(--papier)}.fortschritt{margin:32px 0}.fortschritt .balken{height:8px;background:var(--grau1);position:relative}.fortschritt .balken>div{position:absolute;inset:0 auto 0 0;background:var(--tinte);transition:width .6s linear}.fortschritt .text{display:flex;justify-content:space-between;margin-top:8px}.ampel{display:inline-block;padding:0 8px;font-size:var(--klein);text-transform:uppercase;letter-spacing:.12em;color:var(--papier)}.ampel.gut{background:var(--gut)}.ampel.achtung{background:var(--achtung)}.ampel.schlecht{background:var(--schlecht)}.ampel.offen{background:var(--grau3)}.wurfzone{border:1px dashed var(--grau2);padding:64px 32px;text-align:center;cursor:pointer}.wurfzone.dran{border-color:var(--tinte);background:var(--grau1)}.meldung{padding:16px;background:var(--grau1);margin:16px 0}.meldung.fehler{border-left:4px solid var(--schlecht)}.abstand{margin-top:32px}.abstand-gross{margin-top:64px}table{border-collapse:collapse;width:100%}td,th{text-align:left;padding:8px 16px 8px 0;vertical-align:top}