/* Farben aus dem altii-Design-System 1.8.0 (Tokens), Schriften wie dort angegeben. */
:root {
  --altii-blau: #0096C8;
  --altii-blau-sekundaer-1: #0F6A8E;
  --altii-blau-sekundaer-2: #003648;
  --altii-text: #333333;
  --altii-grau: #555555;
  --altii-weiss: #FFFFFF;
  --altii-linie: #D8E0E8;
  --altii-soft-white: #ECEEF0;
  --altii-error-text: #B94A48;
  --altii-error-hintergrund: #F2DEDE;
  --altii-success-hintergrund: #DFF0D8;
  --altii-warning-hintergrund: #FCF8E3;
  --altii-font-headline: "Roboto", "Arial", sans-serif;
  --altii-font-text: "Inter", "Roboto", "Arial", sans-serif;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--altii-weiss);
  color: var(--altii-text);
  font-family: var(--altii-font-text);
  font-size: 17px;
  line-height: 1.55;
}
.rahmen { max-width: 720px; margin: 0 auto; padding: 0 16px; }
a { color: var(--altii-blau-sekundaer-1); }

.kopf { background: var(--altii-blau-sekundaer-2); padding: 14px 0; }
.marke { color: var(--altii-weiss); text-decoration: none; font-family: var(--altii-font-headline); font-weight: 700; font-size: 20px; }
.marke span { font-weight: 400; }

main.rahmen { padding-top: 32px; padding-bottom: 48px; }
h1, h2 { font-family: var(--altii-font-headline); color: var(--altii-blau-sekundaer-2); line-height: 1.25; }
h1 { font-size: 30px; margin: 0 0 8px; }
h2 { font-size: 21px; margin: 0 0 12px; }
.reihe { margin: 0; color: var(--altii-blau-sekundaer-1); font-weight: 600; }
.meta { color: var(--altii-grau); margin-top: 0; }
.einleitung { font-size: 19px; }

.kasten { border: 1px solid var(--altii-linie); border-radius: 8px; padding: 24px; margin: 24px 0; }
.kasten.erfolg { background: var(--altii-success-hintergrund); border-color: var(--altii-success-hintergrund); }
.ausgaben { margin: 0; padding-left: 0; list-style: none; font-size: 19px; font-weight: 600; }
.fehler { color: var(--altii-error-text); background: var(--altii-weiss); border-left: 4px solid var(--altii-error-text); padding: 8px 12px; }
.hinweis { background: var(--altii-warning-hintergrund); padding: 8px 12px; border-radius: 4px; }

.formular { display: grid; gap: 8px; }
.formular label { font-weight: 600; margin-top: 8px; }
.formular input:not([type=checkbox]) {
  font: inherit; padding: 10px 12px; border: 1px solid var(--altii-grau); border-radius: 4px; width: 100%;
}
.formular .haken { font-weight: 400; display: flex; gap: 8px; align-items: flex-start; }
.haken input { margin-top: 6px; }
.unsichtbar { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

button {
  font: inherit; font-weight: 700; cursor: pointer;
  background: var(--altii-blau-sekundaer-1); color: var(--altii-weiss);
  border: 0; border-radius: 4px; padding: 12px 20px; margin-top: 12px; justify-self: start;
}
button:hover, button:focus-visible { background: var(--altii-blau-sekundaer-2); }
button.leise { background: transparent; color: var(--altii-blau-sekundaer-1); padding: 0; font-weight: 400; text-decoration: underline; }

.fuss { border-top: 1px solid var(--altii-linie); padding: 16px 0; font-size: 14px; color: var(--altii-grau); }
.fuss .rahmen { display: flex; gap: 16px; flex-wrap: wrap; }

.cookie { background: var(--altii-soft-white); border-bottom: 1px solid var(--altii-linie); padding: 12px 0; font-size: 15px; }
.cookie .rahmen { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.cookie p { margin: 0; flex: 1 1 320px; }
.cookie button { margin-top: 0; }