/* Bewusst kurzes Stylesheet ohne Framework.
   Es liegt in static/ und wird im Template mit
   {% static 'stil.css' %} eingebunden. */

:root {
  --rahmen: #d6d3cd;
  --akzent: #14607a;
  --warn: #a3341c;
  --frei: #2c6e3f;
  --grund: #fbfaf8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font: 16px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #23201c;
  background: var(--grund);
}

header { border-bottom: 2px solid var(--akzent); background: #fff; }

nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  max-width: 62rem;
  margin: 0 auto;
  padding: 0.8rem 1rem;
}

nav a { color: var(--akzent); text-decoration: none; font-weight: 600; }
nav a:hover { text-decoration: underline; }
nav .rechts { margin-left: auto; display: flex; align-items: center; gap: 0.6rem; font-size: 0.9rem; }
form.inline { display: inline; }

main { max-width: 62rem; margin: 0 auto; padding: 1rem; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; margin-top: 2rem; }

footer {
  max-width: 62rem;
  margin: 3rem auto 2rem;
  padding: 1rem;
  border-top: 1px solid var(--rahmen);
  font-size: 0.85rem;
  color: #6b655d;
}

/* Meldungen aus dem messages-Framework.
   Die CSS-Klasse kommt aus {{ meldung.tags }}: success, error, info ... */
.meldungen { list-style: none; padding: 0; }
.meldung { padding: 0.6rem 0.8rem; border-left: 4px solid var(--akzent); background: #fff; margin-bottom: 0.4rem; }
.meldung.success { border-color: var(--frei); }
.meldung.error { border-color: var(--warn); }

.karten { display: grid; gap: 0.8rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }
.karte { border: 1px solid var(--rahmen); border-radius: 6px; padding: 0.8rem; background: #fff; }
.karte h3 { margin: 0 0 0.3rem; font-size: 1rem; }
.karte a { color: var(--akzent); }
.zahl { display: block; font-size: 1.8rem; font-weight: 700; color: var(--akzent); }

table { border-collapse: collapse; width: 100%; margin-top: 0.5rem; background: #fff; }
th, td { border: 1px solid var(--rahmen); padding: 0.45rem 0.6rem; text-align: left; vertical-align: top; }
th { background: #f1efea; }
table.tour td:first-child { font-weight: 600; }
.zeile-warnung { background: #fdf2ef; }

dl.daten { display: grid; grid-template-columns: 12rem 1fr; gap: 0.3rem 1rem; }
dl.daten dt { font-weight: 600; color: #5c564e; }
dl.daten dd { margin: 0; }

.formular, .suche { background: #fff; border: 1px solid var(--rahmen); padding: 1rem; border-radius: 6px; }
input[type="text"], input[type="number"], input[type="date"], input[type="password"], select, textarea {
  padding: 0.35rem; border: 1px solid var(--rahmen); border-radius: 4px; font: inherit;
}
button, .knopf {
  display: inline-block; padding: 0.4rem 0.9rem; border: 0; border-radius: 4px;
  background: var(--akzent); color: #fff; font: inherit; text-decoration: none; cursor: pointer;
}
button.gefahr, .knopf.gefahr { background: var(--warn); }

.warnung { color: var(--warn); font-weight: 600; }
.frei { color: var(--frei); }
.klein { font-size: 0.85rem; color: #6b655d; }
.hinweis { font-size: 0.9rem; background: #fff; border-left: 4px solid var(--akzent); padding: 0.6rem 0.8rem; }
.aktionen { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 1rem 0; }
.filterleiste a { margin-right: 0.6rem; }
.blaettern { display: flex; gap: 1rem; align-items: center; margin-top: 1rem; }
code { background: #f1efea; padding: 0.1rem 0.3rem; border-radius: 3px; font-size: 0.9em; }

/* --- Aufgabenseite --- */
.stufenleiste { display: flex; flex-wrap: wrap; gap: 1.2rem; margin: 1rem 0; }
.stufenleiste a { color: var(--akzent); text-decoration: none; font-weight: 600; }
.stufenleiste a:hover { text-decoration: underline; }

.stufe {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 10px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: #fff; vertical-align: middle;
}
.stufe.leicht { background: var(--frei); }
.stufe.mittel { background: #b07d1a; }
.stufe.hoch { background: var(--warn); }

.aufgabe {
  border: 1px solid var(--rahmen); border-left: 5px solid var(--akzent);
  border-radius: 6px; background: #fff; padding: 1rem 1.2rem; margin: 1.5rem 0;
}
.aufgabe h2 { margin-top: 0; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.aufgabe h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; color: #5c564e; }

.checkliste { list-style: none; padding-left: 1.4rem; }
.checkliste li { position: relative; }
.checkliste li::before {
  content: "\2713"; position: absolute; left: -1.4rem; color: var(--frei); font-weight: 700;
}