/* ============================================================
   Sag's Müller – Kampagnen-Stylesheet
   CI: Müller-Touristik (Müller-Rot HKS 15 / #e3001d)
   ============================================================ */
:root{
  --rot:#e3001d;
  --rot-dunkel:#b50017;
  --rot-hell:#fdeaec;
  --ink:#1d1d1b;
  --grau-text:#575756;
  --grau-bg:#f6f6f6;
  --linie:#e4e4e4;
  --weiss:#ffffff;
  --schiff-blau:#007cc5;
  --radius:12px;
  --schatten:0 2px 14px rgba(29,29,27,.08);
  --font:"Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--weiss);
  line-height:1.6;
  font-size:17px;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot)}

/* ---------- Kopf ---------- */
.topbar{background:var(--weiss);border-bottom:3px solid var(--rot)}
.topbar-inner{
  max-width:1080px;margin:0 auto;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.topbar img.logo{width:150px;height:auto}
.topbar .kontakt{font-size:14.5px;color:var(--grau-text);text-align:right;line-height:1.4}
.topbar .kontakt a{color:var(--ink);text-decoration:none;font-weight:700}

/* ---------- Buttons ---------- */
.btn{
  display:inline-block;background:var(--rot);color:var(--weiss);
  font-weight:700;font-size:17px;
  padding:14px 30px;border-radius:10px;border:0;cursor:pointer;
  text-decoration:none;text-align:center;
  box-shadow:0 2px 10px rgba(227,0,29,.22);
  transition:background .12s ease;
}
.btn:hover{background:var(--rot-dunkel)}
.btn.invers{background:var(--weiss);color:var(--rot);box-shadow:0 2px 10px rgba(0,0,0,.15)}
.btn.invers:hover{background:#f4f4f4}
.btn.gross{font-size:18px;padding:16px 38px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn.sekundaer{background:var(--weiss);color:var(--ink);border:1.5px solid var(--linie);box-shadow:none;font-weight:600}
.btn.sekundaer:hover{border-color:var(--grau-text);background:var(--weiss)}

/* ---------- Layout ---------- */
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}
.section{padding:56px 0}
.section.grau{background:var(--grau-bg)}
.section h2{
  font-size:clamp(23px,3.6vw,30px);font-weight:800;line-height:1.25;
  text-align:center;margin-bottom:12px;color:var(--ink);
}
.section h2 .rot{color:var(--rot)}
.section .untertitel{text-align:center;color:var(--grau-text);max-width:640px;margin:0 auto 36px}

/* ---------- Intro (Landingpage oben) ---------- */
.intro{padding:52px 0 64px}
.intro-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.intro .kicker{
  display:inline-block;color:var(--rot);font-weight:700;font-size:15px;
  border-left:4px solid var(--rot);padding-left:12px;margin-bottom:16px;
}
.intro h1{font-size:clamp(30px,4.6vw,44px);font-weight:800;line-height:1.15}
.intro h1 .rot{color:var(--rot)}
.intro p.lead{font-size:18px;color:var(--grau-text);margin-top:18px;max-width:520px}
.intro .cta-zeile{margin-top:28px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.intro .cta-hinweis{font-size:14.5px;color:var(--grau-text)}
.intro-foto{position:relative}
.intro-foto > img{border-radius:var(--radius);box-shadow:var(--schatten);width:100%;object-fit:cover;aspect-ratio:16/10}
.foto-quelle{font-size:12px;color:#9a9a9a;margin-top:8px;text-align:right}

/* Umsatzregler-Karte (dezent, ohne Skalenwerte) */
.regler-karte{
  position:absolute;left:-26px;bottom:-30px;width:190px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:14px 14px 12px;text-align:center;
}
.regler-karte svg{width:100%;height:auto}
.regler-karte input[type=range]{width:92%;margin-top:4px;accent-color:var(--rot);cursor:pointer;height:22px}
.regler-karte .regler-hint{font-size:12.5px;color:var(--grau-text);margin-top:4px;min-height:34px;line-height:1.35}

/* ---------- Karten (Gewinne) ---------- */
.karten{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.karte{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:var(--schatten);overflow:hidden;position:relative;
  display:flex;flex-direction:column;
}
.karte > img{width:100%;height:185px;object-fit:cover}
.karte .badge{
  position:absolute;top:14px;left:14px;
  background:var(--rot);color:var(--weiss);font-weight:700;font-size:13.5px;
  padding:5px 14px;border-radius:8px;
}
.karte-body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px}
.karte h3{font-size:18px;font-weight:700;line-height:1.35}
.karte p{color:var(--grau-text);font-size:15px}

/* ---------- Vorteils-Liste ---------- */
.vorteile{max-width:660px;margin:0 auto;display:grid;gap:12px}
.vorteil{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
  padding:15px 20px;display:flex;align-items:center;gap:14px;font-weight:600;font-size:16px;
}
.vorteil .haken{
  flex:0 0 30px;height:30px;border-radius:50%;background:var(--rot-hell);color:var(--rot);
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;
}

/* ---------- Fragen-Liste (Landingpage) ---------- */
.fragenliste{max-width:660px;margin:0 auto;display:grid;gap:10px;text-align:left}
.frageitem{
  background:var(--weiss);border:1px solid var(--linie);border-left:4px solid var(--rot);
  border-radius:8px;padding:13px 18px;font-weight:600;font-size:16px;
}

/* ---------- Roter Abschluss-Streifen ---------- */
.cta-band{background:var(--rot);color:var(--weiss);padding:52px 20px;text-align:center}
.cta-band h2{font-size:clamp(23px,3.6vw,30px);font-weight:800;line-height:1.3}
.cta-band p.sub{margin-top:8px;opacity:.95;font-size:16.5px}

/* ============================================================
   UMFRAGE
   ============================================================ */
.umfrage-kopf{background:var(--weiss);border-bottom:3px solid var(--rot);padding:14px 20px}
.umfrage-kopf-inner{max-width:820px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px}
.umfrage-kopf img{width:130px}
.umfrage-kopf .titel{font-weight:700;color:var(--grau-text);font-size:14.5px;text-align:right;line-height:1.35}
.umfrage-kopf .titel strong{color:var(--rot)}

.progress{position:sticky;top:0;z-index:50;background:var(--weiss);box-shadow:0 2px 8px rgba(0,0,0,.06)}
.progress-inner{max-width:820px;margin:0 auto;padding:10px 20px}
.progress-label{display:flex;justify-content:space-between;font-size:13px;color:var(--grau-text);font-weight:600;margin-bottom:6px}
.progress-bar{height:8px;background:var(--linie);border-radius:999px;overflow:hidden}
.progress-bar > div{height:100%;width:0%;background:var(--rot);border-radius:999px;transition:width .35s ease}

.umfrage-main{max-width:820px;margin:0 auto;padding:30px 20px 80px;background:var(--weiss)}
body.umfrage{background:var(--grau-bg)}
.schritt{display:none}
.schritt.aktiv{display:block;animation:einblenden .3s ease}
@keyframes einblenden{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.schritt-titel{font-size:clamp(21px,3.2vw,26px);font-weight:800;margin-bottom:6px}
.schritt-titel .nr{color:var(--rot)}
.schritt-sub{color:var(--grau-text);margin-bottom:26px;font-size:16px}

.frage{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:var(--schatten);padding:24px 22px;margin-bottom:18px;
}
.frage.fehler{border-color:var(--rot);box-shadow:0 0 0 2px var(--rot-hell)}
.frage-text{font-weight:700;font-size:17.5px;margin-bottom:4px}
.frage-text .pflicht{color:var(--rot)}
.frage-hinweis{font-size:14px;color:var(--grau-text);margin-bottom:10px}
.fehlertext{display:none;color:var(--rot);font-weight:600;font-size:14px;margin-top:10px}
.frage.fehler .fehlertext{display:block}

/* Optionen: Radio & Checkbox als Auswahlfelder */
.optionen{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}
.optionen.spalten{flex-direction:column;flex-wrap:nowrap;gap:8px}
.chip{position:relative;display:block}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{
  display:block;border:1.5px solid var(--linie);border-radius:9px;
  padding:10px 18px;font-weight:500;cursor:pointer;background:var(--weiss);
  transition:all .12s ease;font-size:15.5px;line-height:1.35;
}
.chip:hover span{border-color:var(--grau-text)}
.chip input:checked + span{background:var(--rot);border-color:var(--rot);color:var(--weiss);font-weight:600}
.chip input:focus-visible + span{outline:3px solid var(--schiff-blau);outline-offset:2px}

/* Skala 0–10 */
.skala{display:grid;grid-template-columns:repeat(11,1fr);gap:6px;margin-top:12px}
.skala.ab1{grid-template-columns:repeat(10,1fr)}
.skala .chip span{padding:11px 0;text-align:center;border-radius:8px;font-weight:600}
.skala-legende{display:flex;justify-content:space-between;font-size:13px;color:var(--grau-text);margin-top:8px}

/* Freitext */
textarea, input[type=text], input[type=email], input[type=password]{
  width:100%;border:1.5px solid var(--linie);border-radius:9px;
  padding:12px 14px;font-family:var(--font);font-size:16px;color:var(--ink);
  background:var(--weiss);
}
textarea{min-height:110px;resize:vertical}
textarea:focus, input:focus{outline:none;border-color:var(--rot)}
.feld + .feld{margin-top:14px}
.feld label{font-weight:600;font-size:15px;display:block;margin-bottom:6px}

/* Navigation */
.schritt-nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
.schritt-nav .btn{font-size:16px;padding:13px 28px}

/* Danke */
.danke{text-align:center;padding:40px 0}
.danke h2{font-size:clamp(25px,4.2vw,34px);font-weight:800}
.danke p{max-width:560px;margin:14px auto 0;color:var(--grau-text)}
.danke .regler-danke{max-width:260px;margin:26px auto 0}
.danke .regler-danke svg{width:100%;height:auto}

/* ---------- Fußzeile ---------- */
footer{background:var(--ink);color:#cfcfcf;padding:34px 20px}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px;font-size:14px}
footer a{color:#fff;text-decoration:none;margin-right:18px}
footer a:hover{text-decoration:underline}
.kleingedruckt{font-size:12.5px;color:#9a9a9a;line-height:1.5;margin-top:14px}

/* ---------- Auswertung ---------- */
.admin-main{max-width:1080px;margin:0 auto;padding:30px 20px 80px}
.kpi-reihe{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-bottom:30px}
.kpi{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);padding:20px;text-align:center;border-top:4px solid var(--rot)}
.kpi .wert{font-size:32px;font-weight:800;color:var(--rot)}
.kpi .label{font-size:13.5px;color:var(--grau-text);font-weight:600}
.auswertung-block{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);padding:24px;margin-bottom:22px}
.auswertung-block h3{font-size:17px;font-weight:700;margin-bottom:14px}
.balken-zeile{display:grid;grid-template-columns:230px 1fr 64px;align-items:center;gap:12px;margin-bottom:8px;font-size:14.5px}
.balken-spur{background:var(--grau-bg);border-radius:999px;height:18px;overflow:hidden}
.balken{background:var(--rot);height:100%;border-radius:999px;min-width:2px}
.balken.blau{background:var(--schiff-blau)}
.balken-wert{font-weight:700;text-align:right}
.freitext-liste{list-style:none;display:grid;gap:8px;max-height:340px;overflow:auto}
.freitext-liste li{background:var(--grau-bg);border-radius:8px;padding:10px 14px;font-size:14.5px}
.freitext-liste li .meta{color:var(--grau-text);font-size:12px;font-weight:700;margin-right:8px}
.export-leiste{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.login-box{max-width:420px;margin:70px auto;background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);box-shadow:var(--schatten);padding:34px;border-top:4px solid var(--rot)}
.login-box h1{font-size:21px;font-weight:800;margin-bottom:16px}
.hinweis-rot{background:var(--rot-hell);border-left:4px solid var(--rot);padding:12px 16px;border-radius:8px;font-size:14.5px;margin-bottom:20px}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .intro-grid{grid-template-columns:1fr;gap:26px}
  .intro-foto{margin-bottom:36px}
  .regler-karte{left:14px;bottom:-30px}
}
@media (max-width:820px){
  .karten{grid-template-columns:1fr;max-width:440px;margin:0 auto}
  .kpi-reihe{grid-template-columns:repeat(2,1fr)}
  .balken-zeile{grid-template-columns:1fr;gap:4px}
  .balken-zeile .balken-wert{text-align:left}
}
@media (max-width:560px){
  body{font-size:16px}
  .topbar-inner{flex-wrap:wrap;justify-content:center;text-align:center}
  .skala{grid-template-columns:repeat(6,1fr)}
  .skala.ab1{grid-template-columns:repeat(5,1fr)}
  .schritt-nav{flex-direction:column-reverse}
  .schritt-nav .btn{width:100%}
  .optionen:not(.spalten) .chip{width:100%}
  .optionen:not(.spalten) .chip span{text-align:center}
  .kpi-reihe{grid-template-columns:1fr 1fr}
  .intro{padding:36px 0 56px}
  .intro .cta-zeile .btn{width:100%}
}