/* Mobile first, hell und ruhig, nur System-Schriften. Warmes Weiß, Salbei, Sand. */
:root {
  color-scheme: light;
  --bg: #f5f1ea; --karte: #fffdf9; --ink: #34393f; --text: #34393f; --text-leise: #747a80;
  --rand: #e3ddd0; --linie: #c4bdae; --akzent: #4a7c6f; --akzent-text: #fff;
  --sonne: #ece3cd; --mint: #d6e6dc; --flieder: #e2deec;
  --gefahr: #a4423a; --radius: 14px; --radius-gross: 20px;
  --schatten: 0 2px 10px rgb(52 57 63 / .08);
}
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 16px/1.5 ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: var(--akzent); }
h1 { font-size: 1.5rem; margin: 0 0 1rem; line-height: 1.2; }
h2 { font-size: 1.15rem; margin: 0 0 .75rem; }
.karte h2:not(:first-child) { margin-top: 1.5rem; }
main { max-width: 60rem; margin: 0 auto; padding: 1rem; }
body.angemeldet main { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
.hinweis { color: var(--text-leise); }
.leise { color: var(--text-leise); font-size: .9rem; }

/* Kopfleiste: Suchpille + Profil-Knopf */
.kopfleiste {
  position: sticky; top: 0; z-index: 5; display: flex; gap: .6rem; align-items: center;
  padding: .6rem 1rem; padding-top: max(.6rem, env(safe-area-inset-top));
  background: var(--bg); max-width: 60rem; margin: 0 auto;
}
.kopfleiste .marke { font-weight: 700; font-size: 1.15rem; text-decoration: none; color: var(--ink); margin-right: auto; }
.kopfleiste:has(#kopf-mitte:not(:empty)) .marke { display: none; }
#kopf-mitte { display: flex; flex: 1; }
.suche {
  border: 1.5px solid var(--linie); border-radius: 99px; background: var(--sonne); color: var(--ink);
  box-shadow: var(--schatten); font-weight: 700; padding: .6rem 1.1rem;
}
.suche::placeholder { color: var(--ink); opacity: .7; }
.profil-knopf {
  flex: none; width: 2.9rem; height: 2.9rem; padding: 0; border-radius: 50%;
  background: var(--akzent); color: var(--akzent-text); font-weight: 700;
}

/* Karten, Formulare, Knöpfe */
.karte {
  background: var(--karte); border: 1.5px solid var(--linie); border-radius: var(--radius-gross);
  padding: 1rem; margin-bottom: 1.2rem; box-shadow: var(--schatten);
}
label { display: block; font-weight: 700; margin: .75rem 0 .25rem; }
input, select, textarea, button { font: inherit; color: inherit; border-radius: var(--radius); }
input, select, textarea { width: 100%; padding: .6rem .8rem; background: #fffdf8; border: 1.5px solid var(--linie); }
textarea { min-height: 5rem; }
/* iOS: Datumsfeld hat sonst eine eigene Mindestbreite und ragt aus der Karte */
input[type=date] {
  -webkit-appearance: none; appearance: none; min-width: 0; max-width: 100%; min-height: 2.9rem;
  text-align: left; display: block;
}
input[type=date]::-webkit-date-and-time-value { text-align: left; }
.raster > *, .zeile > * { min-width: 0; }
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; }
button {
  display: inline-block; cursor: pointer; padding: .5rem 1rem; min-height: 2.75rem; font-weight: 700;
  background: var(--karte); border: 1.5px solid var(--linie); box-shadow: none;
}
button:active { transform: translateY(1px); }
button.primaer { background: var(--akzent); color: var(--akzent-text); }
button.gefahr { color: var(--gefahr); border-color: var(--gefahr); box-shadow: none; }
button:disabled { opacity: .6; cursor: default; }
.zeile { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.zeile > * { flex: 0 1 auto; }
.zeile > .wachsen { flex: 1 1 12rem; }
.wachsen { flex: 1; min-width: 0; }
.raster { display: grid; gap: 0 1rem; grid-template-columns: 1fr; }
@media (min-width: 40rem) { .raster { grid-template-columns: 1fr 1fr; } }

.marke-status {
  font-size: .8rem; font-weight: 700; padding: .05rem .6rem; border-radius: 99px;
  border: 1.5px solid var(--linie); color: var(--ink); white-space: nowrap;
}
.status-in_arbeit { background: var(--sonne); } .status-wartet { background: var(--flieder); } .status-fertig { background: var(--mint); }

/* Kachelliste */
.kacheln { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.kachel {
  display: block; overflow: hidden; text-decoration: none; color: var(--ink); background: var(--karte);
  border: 1.5px solid var(--linie); border-radius: var(--radius-gross); box-shadow: var(--schatten);
}
.kachel-bild { display: block; aspect-ratio: 16 / 10; border-bottom: 1.5px solid var(--linie); background: var(--sonne); }
.kachel-bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.kachel-leer { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 3.5rem; }
.kachel-text { display: flex; flex-direction: column; gap: .2rem; padding: .7rem 1rem .8rem; }
.kachel-text strong { font-size: 1.2rem; }
.kachel-meta { display: flex; flex-wrap: wrap; gap: .3rem .7rem; align-items: center; font-size: .9rem; color: var(--text-leise); }
.kachel-neu {
  display: flex; align-items: center; justify-content: center; min-height: 8rem; height: 100%;
  font-size: 3.5rem; font-weight: 600; background: var(--mint); border-style: dashed;
}
.chips { margin-bottom: .5rem; }
.chip { border-radius: 99px; }
.chip[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }

/* Detail: Titelbild, Galerie, erledigte Schritte */
.titelbild {
  display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 1.2rem;
  border: 1.5px solid var(--linie); border-radius: var(--radius-gross); box-shadow: var(--schatten);
}
.galerie { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
.galerie-bild { display: block; width: 100%; padding: 0; overflow: hidden; aspect-ratio: 1; box-shadow: none; }
.galerie-bild[aria-current="true"] { border-color: var(--akzent); outline: 3px solid var(--mint); }
.galerie-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bild-dialog { max-width: 50rem; }
.bild-dialog img { display: block; max-width: 100%; max-height: 70vh; margin: 0 auto 1rem; border-radius: var(--radius); }
.schritte { list-style: none; margin: 0 0 1rem; padding: 0; }
.schritt { display: flex; gap: .75rem; align-items: center; padding: .6rem 0; border-bottom: 2px dotted var(--rand); }
.schritt::before { content: "✓"; flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--mint); border: 1.5px solid var(--linie); font-weight: 700; }

/* Stundentabelle */
.tabelle-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .5rem; border-bottom: 2px dotted var(--rand); vertical-align: top; }
td.zahl, th.zahl { text-align: right; white-space: nowrap; }
tfoot td { font-weight: 700; border-bottom: 0; }
/* Auf schmalen Displays als Karten statt seitlich scrollender Tabelle */
@media (max-width: 39.99rem) {
  .tabelle-wrap table, .tabelle-wrap tbody, .tabelle-wrap tfoot, .tabelle-wrap tr, .tabelle-wrap td { display: block; }
  .tabelle-wrap thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle-wrap tbody tr { padding: .6rem 0; border-bottom: 2px dotted var(--rand); }
  .tabelle-wrap td { border: 0; padding: .15rem 0; text-align: left; }
  .tabelle-wrap td[data-label]::before { content: attr(data-label) ": "; color: var(--text-leise); }
  .tabelle-wrap td.leer:empty { display: none; }
  .tabelle-wrap tfoot td[colspan] { display: none; }
}

#meldung { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; max-width: 30rem; margin: 0 auto; z-index: 10; }
#meldung .toast {
  padding: .7rem 1rem; border-radius: var(--radius); margin-top: .5rem; font-weight: 700;
  background: var(--mint); border: 1.5px solid var(--linie); box-shadow: var(--schatten);
}
#meldung .toast.fehler { background: #ffd6d0; }
dialog { background: var(--karte); color: var(--text); border: 1.5px solid var(--linie); border-radius: var(--radius-gross); box-shadow: var(--schatten); max-width: 26rem; width: calc(100% - 2rem); }
dialog::backdrop { background: rgb(43 42 51 / .45); }

/* Admin: gelöschte Inhalte */
.papierkorb-eintrag { display: flex; flex-wrap: wrap; gap: .6rem .9rem; align-items: center; padding: .7rem 0; border-bottom: 2px dotted var(--rand); }
.papierkorb-bild { flex: none; width: 4rem; height: 4rem; object-fit: cover; border-radius: var(--radius); border: 1.5px solid var(--linie); }