/* Chesi-Brauer – Wettbewerbsseite
   Farben aus den Etiketten und Info-Tafeln */

:root{
  --dark:#0B1319;
  --tile:#13212B;
  --teal:#7FD4CB;
  --gold:#C9BA6E;
  --white:#fff;
  --fehler:#E4695E;
}

*{box-sizing:border-box}

body{
  margin:0;
  background:var(--dark);
  color:var(--white);
  font-family:"Helvetica Neue",Arial,sans-serif;
  font-size:17px;
  line-height:1.55;
}

a{color:var(--teal)}

/* ---------- Kopf ---------- */
.kopf{
  background:var(--teal);
  color:var(--dark);
  text-align:center;
  padding:2.2rem 1rem 1.8rem;
  border-bottom:6px solid var(--gold);
  border-top:6px solid var(--gold);
}
.kopf .kicker{
  margin:0 0 .8rem;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.22em;
  text-transform:uppercase;
}
.kopf h1{
  margin:0;
  font-size:clamp(1.9rem,6vw,3rem);
  letter-spacing:.02em;
  text-transform:uppercase;
}
.kopf .unter{
  margin:.3rem 0 0;
  font-size:clamp(1rem,3.4vw,1.4rem);
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.kopf .datum{
  margin:.6rem 0 0;
  font-size:.9rem;
  font-weight:700;
  letter-spacing:.08em;
}

/* ---------- Layout ---------- */
.wrap{
  max-width:760px;
  margin:0 auto;
  padding:1.8rem 1.1rem 3rem;
}

.kasten{
  background:var(--teal);
  color:var(--dark);
  border:3px solid var(--gold);
  padding:1.2rem 1.3rem;
  margin-bottom:1.8rem;
}
.kasten h2{margin:0 0 .5rem;font-size:1.15rem;text-transform:uppercase;letter-spacing:.05em}
.kasten p{margin:0 0 .5rem}
.kasten p:last-child{margin-bottom:0}

.block{margin-bottom:2.2rem}
.block > h2{
  color:var(--teal);
  font-size:1rem;
  letter-spacing:.16em;
  text-transform:uppercase;
  margin:0 0 1rem;
}

/* ---------- Formularfelder ---------- */
.feld{margin-bottom:1.1rem}
.zeile{display:flex;gap:1rem;flex-wrap:wrap}
.zeile .feld{flex:1 1 220px}
.zeile .feld.schmal{flex:0 1 160px}

label{display:block;font-weight:700;font-size:.86rem;letter-spacing:.06em;
      text-transform:uppercase;margin-bottom:.35rem;color:var(--gold)}
.pflicht{color:var(--fehler)}
.optional{color:#8CA0AC;font-weight:400;text-transform:none;letter-spacing:0}

input[type=text],input[type=email],select{
  width:100%;
  padding:.7rem .8rem;
  background:var(--tile);
  color:var(--white);
  border:2px solid #2A3D4A;
  border-radius:0;
  font:inherit;
}
input:focus,select:focus{outline:none;border-color:var(--teal)}

.ist-fehler input,.ist-fehler select,.ist-fehler.frage{border-color:var(--fehler)}
.hinweis{margin:.35rem 0 0;color:var(--fehler);font-size:.85rem}

.fehlerbox{
  background:var(--fehler);
  color:#20090A;
  font-weight:700;
  padding:.8rem 1rem;
  margin-bottom:1.5rem;
}

/* ---------- Fragen ---------- */
.frage{
  border:2px solid var(--gold);
  background:var(--tile);
  padding:1.1rem 1.2rem 1.2rem;
  margin:0 0 1.3rem;
}
.frage legend{
  color:var(--gold);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  font-size:.98rem;
  padding:0 .5rem;
}
.frage legend .nr{
  display:inline-block;
  background:var(--gold);
  color:var(--dark);
  width:1.6em;height:1.6em;line-height:1.6em;
  text-align:center;
  margin-right:.4em;
}
.option{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  text-transform:none;
  letter-spacing:0;
  font-weight:400;
  color:var(--white);
  margin:.55rem 0 0;
  padding:.5rem .6rem;
  cursor:pointer;
  border:1px solid transparent;
}
.option:hover{border-color:#2A3D4A}
.option input{margin-top:.35rem;accent-color:var(--teal);flex:none}
.option .buchstabe{
  flex:none;
  color:var(--teal);
  font-weight:700;
  min-width:1.2em;
}

/* ---------- Rest ---------- */
.knopf{
  display:inline-block;
  background:var(--gold);
  color:var(--dark);
  border:none;
  padding:.95rem 2.2rem;
  font:inherit;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
}
.knopf:hover{background:var(--teal)}
.schmalk{padding:.7rem 1.4rem;font-size:.9rem}

.klein{font-size:.85rem;color:#9FB2BC;margin:1.5rem 0}

.fuss{
  background:var(--teal);
  color:var(--dark);
  text-align:center;
  padding:1rem;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.06em;
  border-top:6px solid var(--gold);
}
.fuss a{color:var(--dark)}

/* Honeypot */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}