/* MySchnitzel-Portal — gemeinsames Design.
   Farben und Schriften aus dem Brand-Design-Guide:
   Gelb #F6A500 Fläche · Rot #B61722 Aktion · Anthrazit #2A2A2A Text.
   Weiß auf Gelb ist verboten (Kontrast ~2:1) — auf Gelb immer Anthrazit. */

:root{
  --gelb:#F6A500;
  --rot:#B61722;
  --rot-dunkel:#9a131d;
  --anthrazit:#2A2A2A;
  --text:#4A4A4A;
  --hg:#F5F2ED;
  --box:#FFF6E3;
  --rand:#e6ded2;
  --weiss:#fff;
  --radius:14px;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--hg);
  color:var(--text);
  font-family:'Raleway',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:16px;
  line-height:1.6;
}

.huelle{max-width:560px;margin:0 auto;padding:28px 20px 56px}

/* Kopf */
.kopf{text-align:center;padding:8px 0 22px}
.kopf img{width:190px;max-width:60%;height:auto;display:inline-block}
.band{
  background:var(--gelb);color:var(--anthrazit);
  font-family:'Poppins','Trebuchet MS',Arial,sans-serif;
  font-size:12px;font-weight:600;letter-spacing:2px;text-transform:uppercase;
  text-align:center;padding:11px 16px;border-radius:8px;margin-bottom:26px;
}

h1{
  font-family:'Poppins','Trebuchet MS',Arial,sans-serif;
  font-size:28px;line-height:1.25;font-weight:600;color:var(--rot);
  margin:0 0 12px;text-align:center;
}
h2{
  font-family:'Poppins','Trebuchet MS',Arial,sans-serif;
  font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--anthrazit);margin:34px 0 14px;
}
.unter{text-align:center;margin:0 0 30px;font-size:16px}

/* Buttons / Kacheln */
.knopf{
  display:block;background:var(--weiss);border:1px solid var(--rand);
  border-radius:var(--radius);padding:17px 20px;margin-bottom:12px;
  text-decoration:none;color:var(--anthrazit);font-weight:600;
  transition:border-color .15s, transform .1s;
}
.knopf:hover{border-color:var(--gelb)}
.knopf:active{transform:translateY(1px)}
.knopf .ort{display:block;font-size:12px;font-weight:600;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--gelb);margin-bottom:2px}
.knopf .zusatz{display:block;font-size:14px;font-weight:400;color:var(--text);margin-top:2px}

.knopf-voll{
  display:block;width:100%;background:var(--rot);color:var(--weiss);
  border:0;border-radius:10px;padding:17px 24px;
  font-family:'Poppins','Trebuchet MS',Arial,sans-serif;
  font-size:15px;font-weight:600;letter-spacing:.8px;text-transform:uppercase;
  text-align:center;text-decoration:none;cursor:pointer;
}
.knopf-voll:hover{background:var(--rot-dunkel)}
.knopf-voll[disabled]{opacity:.5;cursor:not-allowed}

/* Kasten */
.kasten{background:var(--box);border:2px solid var(--gelb);border-radius:var(--radius);padding:22px}

/* Formular */
.frage{background:var(--weiss);border:1px solid var(--rand);border-radius:var(--radius);
  padding:20px;margin-bottom:14px}
.frage-titel{font-family:'Poppins','Trebuchet MS',Arial,sans-serif;font-size:17px;
  font-weight:600;color:var(--anthrazit);margin:0 0 4px;line-height:1.35}
.frage-hilfe{font-size:14px;color:#7a7a7a;margin:0 0 14px}
.pflicht{color:var(--rot)}

/* Skala 1-5 */
.skala{display:flex;gap:8px}
.skala input{position:absolute;opacity:0;width:0;height:0}
.skala label{
  flex:1;text-align:center;border:1px solid var(--rand);border-radius:10px;
  padding:12px 4px;cursor:pointer;background:var(--weiss);
  font-family:'Poppins','Trebuchet MS',Arial,sans-serif;font-weight:600;
  font-size:19px;color:var(--anthrazit);line-height:1.2;
}
.skala input:checked + label{background:var(--gelb);border-color:var(--gelb)}
.skala input:focus-visible + label{outline:3px solid var(--rot);outline-offset:2px}
.skala-enden{display:flex;justify-content:space-between;font-size:12px;color:#8a8a8a;margin-top:7px}

/* Auswahl / Mehrfach */
.wahl{display:block;position:relative;padding:12px 14px 12px 44px;border:1px solid var(--rand);
  border-radius:10px;background:var(--weiss);margin-bottom:8px;cursor:pointer;font-size:15px}
.wahl input{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:18px;height:18px;accent-color:var(--rot);margin:0}
.wahl:has(input:checked){border-color:var(--gelb);background:var(--box)}

textarea{
  width:100%;border:1px solid var(--rand);border-radius:10px;padding:12px 14px;
  font-family:inherit;font-size:15px;color:var(--text);resize:vertical;min-height:110px;background:var(--weiss);
}
input[type=email]{
  width:100%;border:1px solid var(--rand);border-radius:10px;padding:12px 14px;
  font-family:inherit;font-size:15px;background:var(--weiss);
}
textarea:focus,input[type=email]:focus{outline:2px solid var(--gelb);outline-offset:1px;border-color:var(--gelb)}

.fehler{background:#fdecec;border:1px solid #f0b6b6;color:#8f1620;
  border-radius:10px;padding:12px 16px;margin-bottom:16px;font-size:15px}
.hinweis{font-size:13px;color:#8a8a8a;margin-top:14px;text-align:center}

/* Fuß */
.fuss{margin-top:38px;padding-top:20px;border-top:1px solid var(--rand);
  text-align:center;font-size:13px;color:#8a8a8a}
.fuss a{color:var(--text);text-decoration:underline}

/* Danke */
.danke{text-align:center;padding:34px 20px}
.danke .haken{font-size:52px;line-height:1;margin-bottom:14px}

@media (max-width:420px){
  h1{font-size:24px}
  .skala label{font-size:17px;padding:11px 2px}
  .huelle{padding:22px 16px 44px}
}