/* =====================================================================
   LuWo-Seal · Scan-Seite · Gestaltung
   ---------------------------------------------------------------------
   Dieselben Werte wie im Maintenance-Portal: dasselbe Rot, dieselbe Schrift,
   dieselben Radien. Mobil zuerst, auf dem Rechner eine mittige Spalte.
   Keine Schriften und keine Skripte von fremden Servern.
   ===================================================================== */

@font-face{font-family:Inter;src:url(inter-400.woff2) format("woff2");font-weight:400;font-display:swap;font-style:normal}
@font-face{font-family:Inter;src:url(inter-500.woff2) format("woff2");font-weight:500;font-display:swap;font-style:normal}
@font-face{font-family:Inter;src:url(inter-600.woff2) format("woff2");font-weight:600;font-display:swap;font-style:normal}
@font-face{font-family:Inter;src:url(inter-700.woff2) format("woff2");font-weight:700;font-display:swap;font-style:normal}

:root{
  color-scheme:light;
  --red:#cc131c; --red-deep:#a81016; --red-wash:#fbeced;
  --ink:#1d1d1f; --muted:#6e6e73; --faint:#86868b;
  --surface:#fff; --canvas:#f5f5f7;
  --line:#e8e8ec; --line-strong:#dcdce1;
  --r-card:16px; --r-ctrl:11px; --r-pill:999px;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;font-family:var(--sans);font-size:15px;line-height:1.5;color:var(--ink);
  background:var(--surface);-webkit-font-smoothing:antialiased;
  font-variant-numeric:tabular-nums;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}

/* ---------- Rahmen ---------- */
.marke,.seite,.fuss{max-width:480px;margin-left:auto;margin-right:auto}
.marke{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:14px 20px 12px;border-bottom:1px solid var(--line);
}
.marke-logo{display:block}
.marke-logo img{height:24px;width:auto}
.marke-id{font-size:11.5px;font-weight:600;letter-spacing:.05em;color:var(--faint)}
.seite{padding:0 20px 32px}
.seite.mitte{padding-top:34px}

/* ---------- Kopfbereich des Teils ---------- */
.bild{
  margin:0 -20px;padding:24px 20px;background:var(--canvas);
  border-bottom:1px solid var(--line);display:flex;justify-content:center;
}
.bild img{max-height:220px;width:auto;mix-blend-mode:multiply}
.kicker{
  margin:24px 0 7px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--red);
}
.titel{margin:0;font-size:27px;line-height:1.15;letter-spacing:-.026em;font-weight:600;overflow-wrap:break-word}
.form-titel{margin-top:18px;font-size:24px}
.unter{margin:9px 0 0;font-size:14.5px;color:var(--muted);overflow-wrap:break-word}
.nr{margin:4px 0 0;font-size:13.5px;color:var(--faint)}
.nr span{color:var(--muted);font-weight:600}

/* ---------- Knöpfe ---------- */
.aktionen{display:flex;flex-direction:column;gap:9px;margin:22px 0 0}
.knopf{
  display:flex;align-items:center;justify-content:center;min-height:50px;padding:0 18px;
  border:1px solid transparent;border-radius:var(--r-ctrl);
  font-family:inherit;font-size:15.5px;font-weight:600;letter-spacing:-.01em;
  text-decoration:none;cursor:pointer;width:100%;
}
.knopf.pri{background:var(--red);color:#fff}
.knopf.pri:active{background:var(--red-deep)}
.knopf.sek{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.knopf.sek:active{background:var(--canvas)}
.versand{margin:11px 0 0;font-size:12.5px;color:var(--muted);text-align:center}

/* ---------- Technische Daten ---------- */
.block{margin:28px 0 0}
.block h2{
  margin:0 0 10px;font-size:11px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);
}
.daten{display:grid;grid-template-columns:118px 1fr;margin:0;font-size:14px}
.daten dt{padding:8px 0;color:var(--muted);border-top:1px solid var(--line)}
.daten dd{margin:0;padding:8px 0;border-top:1px solid var(--line);overflow-wrap:break-word}
.daten dt:first-of-type,.daten dd:first-of-type{border-top:0;padding-top:0}

/* ---------- Maintenance ---------- */
.mblock{margin:28px 0 0;padding:16px 18px 14px;background:var(--canvas);border-radius:var(--r-card)}
.mblock h2{margin:0 0 9px;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.mliste{margin:0;padding:0 0 0 17px;font-size:14px;color:var(--muted)}
.mliste li{margin:4px 0}
.mlink{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin:14px 0 0;padding:12px 14px;background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-ctrl);
  font-size:15px;font-weight:600;color:var(--red);text-decoration:none;
}
/* Der zweite, leisere Weg: für alle, die Maintenance noch nicht haben.
   Ein Textlink, kein Knopf. Er soll gefunden werden, wenn jemand ihn sucht,
   und nicht mit den beiden Knöpfen weiter oben konkurrieren. */
.mfein{margin:11px 0 0;font-size:13px;color:var(--muted)}
.mfein a{color:var(--red);font-weight:600;text-decoration:none;white-space:nowrap}
.idzeile{margin:26px 0 0;font-size:12.5px;color:var(--faint)}
.idzeile b{color:var(--muted);font-weight:600;letter-spacing:.04em}

/* Der leise Ausweg am Seitenende: wählen statt tippen. */
.ruf{margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--line)}

/* ---------- Formular ---------- */
.zurueck{margin:16px 0 0;font-size:14px}
.zurueck a{color:var(--muted);text-decoration:none}
.bezug{
  display:flex;align-items:center;gap:12px;margin:16px 0 0;padding:12px 14px;
  background:var(--canvas);border-radius:var(--r-ctrl);
}
.bezug img{width:44px;height:44px;object-fit:contain;mix-blend-mode:multiply}
.bezug-t{font-size:14px;font-weight:600;line-height:1.3}
.bezug-u{margin-top:2px;font-size:12px;color:var(--faint)}

.formular{margin:6px 0 0}
label{display:block;margin:16px 0 5px;font-size:12.5px;color:var(--muted)}
.opt{color:var(--faint)}
input[type=text],input[type=email],input[type=tel],input[type=number],textarea{
  display:block;width:100%;min-height:48px;padding:12px 13px;
  font-family:inherit;font-size:16px;color:var(--ink);background:var(--surface);
  border:1px solid var(--line-strong);border-radius:var(--r-ctrl);
}
textarea{min-height:88px;line-height:1.45;resize:vertical}
input:focus,textarea:focus{outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
input[type=file]{
  display:block;width:100%;padding:13px;font-size:14px;color:var(--muted);
  background:var(--surface);border:1px dashed var(--line-strong);border-radius:var(--r-ctrl);
}
.zwei{display:grid;grid-template-columns:1fr 96px;gap:10px}
.zwei label{margin-top:16px}

.chips{margin:16px 0 0;padding:0;border:0}
.chips legend{padding:0;margin:0 0 8px;font-size:12.5px;color:var(--muted)}
.chip{display:inline-flex;margin:0 7px 7px 0}
.chip input{position:absolute;opacity:0;width:0;height:0}
.chip span{
  display:inline-block;padding:9px 14px;font-size:14px;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:var(--r-pill);cursor:pointer;
}
.chip input:checked + span{border-color:var(--red);background:var(--red-wash);color:var(--red-deep);font-weight:600}
.chip input:focus-visible + span{outline:2px solid var(--red);outline-offset:2px}

.formular .knopf{margin-top:22px}
.fein{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--faint)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fehler{
  margin:16px 0 0;padding:12px 14px;font-size:14px;color:var(--red-deep);
  background:var(--red-wash);border-radius:var(--r-ctrl);
}

/* ---------- Danke ---------- */
.haken{
  width:46px;height:46px;margin:0 0 18px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#e8f5ec;color:#2d7d4f;font-size:23px;font-weight:600;
}
.dtext{margin:14px 0 0;font-size:15px;color:var(--muted)}
.dtext b{color:var(--ink);font-weight:600}
.refkasten{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:20px 0 0;padding:14px 16px;background:var(--canvas);border-radius:var(--r-ctrl);
}
.refkasten span{font-size:12.5px;color:var(--muted)}
.refkasten b{font-size:17px;font-weight:600;letter-spacing:-.01em}

/* ---------- Fuß ---------- */
.fuss{padding:20px;border-top:1px solid var(--line);font-size:12.5px;color:var(--faint)}
.fuss a{color:var(--muted);text-decoration:none}
.fuss-firma{color:var(--muted)}
.fuss-zeile{margin-top:3px}
.fuss-rechts{display:flex;flex-wrap:wrap;gap:14px;margin-top:10px}

@media (min-width:560px){
  .seite{padding-bottom:44px}
  .aktionen{flex-direction:row}
  .knopf{flex:1}
}