/* Festzelt-Design (Variante A): weiß-blaue Rauten, Lebkuchenrot, Plakatschrift */
@font-face {
  font-family: 'Alfa Slab One';
  src: url('/fonts/alfa-slab-one.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF;
}
@font-face {
  font-family: 'Alfa Slab One';
  src: url('/fonts/alfa-slab-one-latin-ext.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20AC;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --blau: #1B6BB5;
  --blau-dunkel: #124a80;
  --himmel: #F7FAFD;
  --lebkuchen: #C8402E;
  --lebkuchen-dunkel: #96271a;
  --gold: #E8A83B;
  --gruen: #3e9c58;
  --tinte: #22303c;
  --grau: #5a6b7a;
  --linie: #d6e2ec;
}

body {
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  background: var(--himmel);
  color: var(--tinte);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.plakat { font-family: 'Alfa Slab One', 'Arial Black', serif; font-weight: 400; }

header.kopf {
  background: var(--blau);
  color: #fff;
  padding: 18px 18px 14px;
  position: relative;
  text-align: center;
}
header.kopf h1 { font-family: 'Alfa Slab One', 'Arial Black', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; }
header.kopf small { color: #bcd9f2; font-weight: 600; }
header.kopf .rautenband {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background-image: repeating-conic-gradient(from 45deg, #fff 0 90deg, transparent 90deg 180deg);
  background-size: 16px 16px; opacity: .5;
}

main { flex: 1; width: 100%; max-width: 720px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 14px; }
main.breit { max-width: 1080px; }

.karte { background: #fff; border: 1px solid var(--linie); border-radius: 14px; padding: 16px 18px; }
.karte h2 { font-family: 'Alfa Slab One', 'Arial Black', serif; font-weight: 400; color: var(--blau-dunkel); font-size: 1rem; margin-bottom: 10px; }

.knopf {
  display: block; width: 100%; border: none; cursor: pointer;
  background: var(--lebkuchen); color: #fff; border-radius: 12px;
  font-weight: 700; font-size: 1.05rem; padding: 14px; text-align: center;
  box-shadow: 0 4px 0 var(--lebkuchen-dunkel);
  font-family: inherit;
}
.knopf:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--lebkuchen-dunkel); }
.knopf:disabled { background: #a8b8c6; box-shadow: 0 4px 0 #7f92a3; cursor: default; }
.knopf.blau { background: var(--blau); box-shadow: 0 4px 0 var(--blau-dunkel); }
.knopf.blau:active { box-shadow: 0 2px 0 var(--blau-dunkel); }
.knopf.klein { width: auto; display: inline-block; padding: 8px 14px; font-size: .88rem; border-radius: 9px; }

.drop {
  display: block;
  border: 3px dashed var(--blau); border-radius: 16px; background: #eaf3fb;
  padding: 26px 16px; text-align: center; cursor: pointer;
}
.drop .icon { font-size: 2.2rem; }
.drop strong { display: block; margin: 6px 0 2px; color: var(--blau-dunkel); font-size: 1.05rem; }
.drop small { color: var(--grau); }

.fortschritt { display: flex; flex-direction: column; gap: 4px; }
.fortschritt .zeile { display: flex; justify-content: space-between; font-size: .85rem; color: var(--grau); }
.balken { height: 8px; border-radius: 4px; background: #dbe7f1; overflow: hidden; }
.balken i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s; }

.fehler { background: #fdecea; border: 1px solid #eeb8b0; color: #8a2a1b; border-radius: 10px; padding: 10px 14px; font-size: .9rem; }
.erfolg { background: #eaf7ee; border: 1px solid #bfe3ca; color: #23663a; border-radius: 10px; padding: 10px 14px; font-size: .9rem; }
.hinweis-box { background: #fff6e8; border: 2px solid var(--gold); border-radius: 14px; padding: 14px 18px; }
.hinweis-box strong { color: #9a6a12; }
.warn-box { background: #fdecea; border: 2px solid var(--lebkuchen); border-radius: 14px; padding: 14px 18px; }

.raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.foto {
  aspect-ratio: 1; border-radius: 10px; overflow: hidden; position: relative;
  background: #dbe7f1;
}
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .status {
  position: absolute; bottom: 4px; left: 4px; right: 4px; font-size: .58rem;
  font-weight: 700; text-align: center; border-radius: 6px; padding: 2px 0; color: #fff;
}
.status.pending { background: #8fa5b8; }
.status.approved { background: var(--gruen); }
.status.rejected { background: var(--lebkuchen); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip-tag {
  border: 2px solid var(--blau); border-radius: 99px; padding: 7px 14px;
  font-weight: 700; font-size: .85rem; color: var(--blau-dunkel); background: #fff;
  cursor: pointer; font-family: inherit;
}
.chip-tag.an { background: var(--blau); color: #fff; }
.chip-tag.heute { border-style: dashed; }
.chip-tag small { font-weight: 600; opacity: .75; }

.reihe { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px dashed #dbe7f1; font-size: .95rem; }
.reihe:last-child { border-bottom: none; }
.reihe input[type=range] { width: 140px; accent-color: var(--lebkuchen); }
.reihe select, .reihe input[type=date], .reihe input[type=number], .reihe input[type=text] {
  font: inherit; padding: 6px 8px; border: 1px solid var(--linie); border-radius: 8px;
}

.schalter { position: relative; width: 52px; height: 28px; border-radius: 99px; background: #c3d2df; border: none; cursor: pointer; transition: background .15s; }
.schalter::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: left .15s; }
.schalter.an { background: var(--blau); }
.schalter.an::after { left: 27px; }

form.formular { display: flex; flex-direction: column; gap: 12px; }
form.formular label { display: flex; flex-direction: column; gap: 4px; font-size: .88rem; font-weight: 600; color: var(--grau); }
form.formular input {
  font: inherit; font-size: 1rem; padding: 11px 12px;
  border: 1px solid var(--linie); border-radius: 10px; background: #fff;
}
form.formular input:focus { outline: 2px solid var(--blau); border-color: var(--blau); }

footer.fuss { padding: 14px 18px 20px; font-size: .72rem; color: #8296a8; text-align: center; line-height: 1.5; }
footer.fuss a { color: #8296a8; }

.text-seite { max-width: 720px; margin: 0 auto; padding: 24px 18px 60px; line-height: 1.6; }
.text-seite h1 { font-family: 'Alfa Slab One', 'Arial Black', serif; font-weight: 400; color: var(--blau-dunkel); font-size: 1.4rem; margin: 18px 0 10px; }
.text-seite h2 { font-size: 1.05rem; margin: 18px 0 6px; }
.text-seite p, .text-seite li { color: var(--tinte); margin-bottom: 8px; }
.text-seite ul { padding-left: 20px; }

@media (max-width: 640px) {
  main { padding: 12px; }
  .raster { grid-template-columns: repeat(3, 1fr); }
}