/* ==========================================================================
   Portal "Schaden melden" (05.11.2026). Nur auf schaden-melden.html geladen,
   nach site.css, v3.css und hell.css. Die anderen Seiten bleiben unberuehrt.

   Seit 05.11.2026 abends ein einziges Blatt (Wunsch Thomas: kompakt wie das
   alte Anmeldefax): Agentur oben, darunter Kunde | Fahrzeug, Schaden |
   Versicherung, unten Bemerkung und Absenden. Ab 900 px zweispaltig.
   schaden.js setzt .sm-js nur noch fuer Ein- und Ausblenden einzelner Felder.
   ========================================================================== */

/* 1. Kopf --------------------------------------------------------------- */
.sm-hero{ display:grid; gap:clamp(2rem,4vw,3.5rem); align-items:end; }
@media (min-width:1000px){ .sm-hero{ grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr); } }
.sm-h1{ margin-top:.9rem; }
.sm-hero__acts{ margin-top:clamp(1.6rem,3vw,2.4rem); display:flex; flex-wrap:wrap; gap:.8rem; }
.sm-promise{ display:grid; gap:1.15rem; border-left:1px solid var(--line-2); padding-left:clamp(1.1rem,2vw,1.6rem); }
.sm-promise li{ display:grid; gap:.25rem; }
.sm-promise b{ font-family:var(--ff-display); font-weight:400; font-size:1.4rem; line-height:1.15; }
.sm-promise span{ color:var(--fg-dim); font-size:.95rem; line-height:1.5; }

/* 2. Rahmen des Formulars ------------------------------------------------- */
#melden{ scroll-margin-top:4.5rem; }
.sm-head{ display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:.6rem 2rem; margin-bottom:clamp(1.8rem,3.5vw,2.8rem); }
.sm-pflicht{ font-size:.92rem; color:var(--fg-dim); }
.sm{ display:grid; gap:clamp(1.5rem,3vw,3rem); align-items:start; }
.sm.is-fertig{ grid-template-columns:minmax(0,1fr); }
.sm-main{ min-width:0; }
.sm-form,.sm-done{
  background:#fff; border:1px solid var(--line); border-radius:8px;
  padding:clamp(1.25rem,3.5vw,2.75rem); box-shadow:0 30px 60px -42px rgba(10,18,25,.28);
}
.sm [hidden]{ display:none !important; }

/* 3. Ein Blatt mit Abschnitten wie im Anmeldefax -------------------------- */
.sm-form{ padding:0; }
.sm-blatt{ display:grid; grid-template-columns:minmax(0,1fr); counter-reset:smb; }
.sm-b{ display:block; min-width:0; padding:clamp(1.15rem,3vw,1.9rem); border-top:1px solid var(--line-2); }
.sm-b:first-child{ border-top:0; }
@media (min-width:900px){
  .sm-blatt{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .sm-b--voll{ grid-column:1 / -1; }
  .sm-b--r{ border-left:1px solid var(--line-2); }
}
.sm-b--ende{ background:var(--paper); border-radius:0 0 8px 8px; }
.sm-b > * + *{ margin-top:1rem; }
.sm-b__h{
  display:flex; align-items:center; gap:.7rem; margin:0;
  font-family:var(--ff-display); font-weight:400; font-size:clamp(1.35rem,2.4vw,1.6rem); line-height:1.1;
}
.sm-b__h::before{
  counter-increment:smb; content:counter(smb); flex:none; width:1.7rem; height:1.7rem; border-radius:50%;
  display:grid; place-items:center; font-family:var(--ff-mono); font-size:.72rem; line-height:1;
  background:var(--fg); color:var(--paper);
}
.sm-b__h:focus{ outline:none; }
.sm-b > .sm-b__h + *{ margin-top:1.15rem; }
.sm-g{ display:grid; gap:1rem 1.35rem; }
@media (min-width:640px){ .sm-g--3{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (min-width:1000px){ .sm-g--3{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
.sm-tag{ max-width:16rem; }
.sm-form .form__2{ display:grid; gap:1rem 1.35rem; }

/* Bestaetigungsadresse kurz vor dem Absenden (Tippfehler sofort sichtbar) */
.sm-an{ padding:.85rem 1.1rem; border:1px solid var(--amber-ink); border-radius:6px; background:#fff; }
.sm-an span{ display:block; font-size:.86rem; color:var(--fg-dim); }
.sm-an b{ display:block; margin-top:.1rem; font-family:var(--ff-mono); font-size:clamp(1rem,2.4vw,1.2rem); font-weight:500; overflow-wrap:anywhere; }

.sm-hint{ margin-top:.45rem; font-size:.86rem; line-height:1.45; color:var(--fg-dim); }
.sm-b > .sm-hint--grp{ margin-top:.5rem; }
.sm-label{ font-size:.95rem; font-weight:500; margin-bottom:.7rem; }
.sm-fn{ font-size:.8rem; color:var(--fg-dim); }

/* Feldbeschriftung: Beispieltext erst beim Hineinklicken zeigen */
.sm-form .field input::placeholder{ color:transparent; }
.sm-form .field input:focus::placeholder{ color:var(--fg-dim); opacity:.75; }
.field--fest label{ transform:translateY(-.72rem) scale(.74); }
.field--fest input{ min-height:3.6rem; }
#sm-fin,#sm-kz{ text-transform:uppercase; }
#sm-fin{ font-family:var(--ff-mono); letter-spacing:.05em; }

.sm-plzort{ display:grid; gap:1.35rem; grid-template-columns:7.5rem minmax(0,1fr); }
.sm-3{ display:grid; gap:1.35rem; }
/* HSN braucht die laengste Beschriftung ("Schluesselnummer zu 2 (HSN)") */
@media (min-width:720px){ .sm-3{ grid-template-columns:minmax(0,1.7fr) minmax(0,1fr) minmax(0,1fr); gap:1rem; } }

/* 5. Auswahl als Knoepfe (Radio und Checkbox) ----------------------------- */
/* margin-top nicht zuruecksetzen: der Abstand kommt aus .sm-b > * + * */
.sm-chips,.sm-fin{ border:0; margin-inline:0; margin-bottom:0; padding:0; min-width:0; }
.sm-b > .sm-chips,.sm-b > .sm-fin,.sm-b > .sm-fotos{ margin-top:1.3rem; }
.sm-chips legend,.sm-fin legend{ padding:0; margin-bottom:.55rem; font-size:.93rem; font-weight:500; }
.sm-chips__row{ display:flex; flex-wrap:wrap; gap:.45rem; }
.chip{ position:relative; display:inline-flex; }
.chip input{ position:absolute; left:0; top:0; width:1px; height:1px; margin:0; opacity:0; }
.chip span{
  display:inline-flex; align-items:center; gap:.5rem; padding:.58rem 1rem;
  border:1px solid var(--line-2); border-radius:999px; background:#fff;
  font-size:.92rem; line-height:1.2; cursor:pointer; user-select:none;
  transition:border-color .25s, background .25s, color .25s;
}
.chip:hover span{ border-color:var(--fg-dim); }
.chip input:checked + span{ border-color:var(--amber-ink); background:rgba(255,139,61,.12); color:var(--amber-ink); font-weight:560; }
.chip input:focus-visible + span{ outline:2px solid var(--amber-ink); outline-offset:2px; }
.chip--multi span::before{
  content:""; flex:none; width:1rem; height:1rem; border:1.5px solid var(--fg-dim); border-radius:3px;
  display:grid; place-items:center; font-size:.7rem; line-height:1;
}
.chip--multi input:checked + span::before{ content:"\2713"; background:var(--amber-ink); border-color:var(--amber-ink); color:#fff; }
.sm-chips .sm-hint{ margin-top:.55rem; }

.sm-grp-err{ display:block; margin-top:.55rem; font-size:.85rem; line-height:1.4; color:#b42318; }
.sm-chips.has-err .chip span{ border-color:#b42318; }

.sm-sbhoehe{ max-width:16rem; margin-top:.9rem; }
.sm-js .sm-sbhoehe:not(.is-on){ display:none; }
.sm-anders{ display:none; }
.sm-js .sm-anders.is-on{ display:block; }

/* 6. FIN: Foto vom Fahrzeugschein oder selbst eintragen -------------------- */
/* In der halben Spalte untereinander: Foto, "oder selbst eintragen", Feld */
.sm-fin__grid{ display:grid; gap:.6rem; }
.sm-fin__or{ font-size:.86rem; color:var(--fg-dim); }
.sm-fin.has-err .upload__zone{ border-color:#b42318; }
.sm-fin.has-err #sm-fin{ border-bottom-color:#b42318; }
.sm-fin .sm-grp-err{ margin-top:.6rem; }
.sm-up .upload__zone{ min-height:3.6rem; }
.sm-up .upload__txt span{ display:block; }

/* 7. Haken (Merken, Einverstaendnis) ------------------------------------- */
.sm-check{ display:grid; grid-template-columns:auto minmax(0,1fr); gap:.3rem .8rem; align-items:start; }
.sm-check input{ width:1.3rem; height:1.3rem; margin:.18rem 0 0; accent-color:var(--amber-ink); cursor:pointer; }
.sm-check label{ cursor:pointer; font-size:.98rem; line-height:1.5; }
.sm-check .sm-hint,.sm-check .sm-grp-err{ grid-column:2; margin-top:0; }
.sm-einv{ padding:1rem 1.1rem; border:1px solid var(--line-2); border-radius:6px; background:var(--paper); }
.sm-einv.has-err{ border-color:#b42318; }

/* 8. Vor und zurueck ------------------------------------------------------ */
.sm-nav{ display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; align-items:center; padding-top:.4rem; }
.sm-nav [data-next],.sm-nav .sm-send{ margin-left:auto; }
.sm-send[disabled]{ opacity:.65; cursor:progress; transform:none; }
@media (max-width:560px){
  .sm-nav{ flex-direction:column-reverse; align-items:stretch; }
  .sm-nav .btn{ justify-content:center; width:100%; margin-left:0; text-align:center; }
}
@media (scripting:none){
  .sm-nav [data-next],.sm-nav [data-prev],[data-copy]{ display:none; }
}

/* 9. Suchliste (Versicherer, Hersteller) ---------------------------------- */
.cb{ position:relative; }
.cb__list{
  position:absolute; z-index:60; left:0; right:0; top:3.6rem;
  max-height:min(18rem,45vh); overflow:auto; margin:0; padding:.3rem 0;
  background:#fff; border:1px solid var(--amber-ink); border-radius:0 0 6px 6px;
  box-shadow:0 22px 40px -22px rgba(10,18,25,.35);
}
.cb__list[hidden]{ display:none; }
.cb__opt{ padding:.62rem 1rem; cursor:pointer; font-size:.98rem; line-height:1.3; }
.cb__opt[aria-selected="true"],.cb__opt:hover{ background:rgba(255,139,61,.12); }
.cb__opt--anders{ border-top:1px solid var(--line); margin-top:.3rem; padding-top:.75rem; color:var(--fg-dim); font-style:italic; }

/* 10. Zusammenfassung vor dem Senden ------------------------------------- */
.sm-sum:empty{ display:none; }
.sm-sum{ border:1px solid var(--line-2); border-radius:8px; background:var(--paper); padding:clamp(1rem,2.5vw,1.6rem); }
.sm-sum__h{ font-family:var(--ff-display); font-weight:400; font-size:1.5rem; line-height:1.15; }
.sm-sum__mail{ margin-top:.9rem; padding:1rem 1.1rem; border-radius:6px; background:#fff; border:1px solid var(--amber-ink); }
.sm-sum__mail span{ display:block; font-size:.86rem; color:var(--fg-dim); }
.sm-sum__mail b{ display:block; margin-top:.15rem; font-family:var(--ff-mono); font-size:clamp(1.05rem,2.6vw,1.35rem); font-weight:500; overflow-wrap:anywhere; }
.sm-sum__sec{ margin-top:1.2rem; padding-top:1rem; border-top:1px solid var(--line); }
.sm-sum__sech{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; margin-bottom:.55rem; }
.sm-sum__sech h4{ font-family:var(--ff-mono); font-size:.74rem; letter-spacing:.15em; text-transform:uppercase; color:var(--fg-dim); font-weight:400; }
.sm-sum__edit{ background:none; border:0; padding:.25rem 0; cursor:pointer; color:var(--amber-ink); font-size:.92rem; text-decoration:underline; text-underline-offset:.2em; }
.sm-sum dl{ display:grid; grid-template-columns:minmax(7rem,38%) minmax(0,1fr); gap:.35rem 1rem; font-size:.95rem; }
.sm-sum dt{ color:var(--fg-dim); }
.sm-sum dd{ margin:0; overflow-wrap:anywhere; white-space:pre-line; }
@media (max-width:480px){
  .sm-sum dl{ grid-template-columns:minmax(0,1fr); gap:.05rem; }
  .sm-sum dd{ margin-bottom:.5rem; }
}

/* 11. Bestaetigung -------------------------------------------------------- */
.sm-done{ display:grid; gap:1rem; justify-items:start; }
.sm-done:focus{ outline:none; }
.sm-done__ok{ width:3.6rem; height:3.6rem; border-radius:50%; display:grid; place-items:center; background:rgba(21,128,61,.1); color:#15803d; }
.sm-done__h{ font-family:var(--ff-display); font-weight:400; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.08; }
.sm-done__h:focus{ outline:none; }
.sm-done__nr{ color:var(--fg-dim); }
.sm-done__nr b{ display:block; margin-top:.2rem; font-family:var(--ff-mono); font-size:clamp(1.4rem,4vw,2rem); font-weight:500; letter-spacing:.04em; color:var(--fg); }
.sm-done__acts{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:.4rem; }
.sm-done__s{ font-size:.9rem; color:var(--fg-dim); max-width:62ch; }
.sm-done__s:empty{ display:none; }
.sm-print-kopf,.sm-printsum{ display:none; }
.sm-restore{ margin-bottom:1rem; padding:.85rem 1.1rem; border:1px solid var(--line-2); border-radius:6px; background:rgba(27,111,153,.07); font-size:.94rem; }
.sm-restore[hidden]{ display:none; }

/* 12. Formular zum Herunterladen und Unterlagen --------------------------- */
.sm-ol{ display:grid; gap:.75rem; counter-reset:o; max-width:52ch; }
.sm-ol li{ counter-increment:o; display:grid; grid-template-columns:2.1rem minmax(0,1fr); }
.sm-ol li::before{ content:counter(o) "."; font-family:var(--ff-mono); font-size:.9rem; color:var(--amber-ink); padding-top:.15rem; }
.sm-acts{ display:flex; flex-wrap:wrap; gap:.7rem; }
.sm-note{ font-size:.94rem; color:var(--fg-dim); max-width:56ch; }
.sm-adr{ font-weight:560; }
/* Download-Karten: Vorschaubild, Titel, Umfang, Herunterladen und Ansehen (kein Tracking) */
.sm-dl{ display:grid; gap:.8rem; }
.sm-dl__k{
  display:grid; grid-template-columns:5.25rem minmax(0,1fr); grid-template-areas:"v x" "v b"; gap:.6rem 1.15rem;
  padding:1rem 1.2rem 1rem 1rem; background:#fff; border:1px solid var(--line); border-radius:8px;
}
.sm-dl__v{
  grid-area:v; align-self:center;
  display:block; border:1px solid var(--line); border-radius:3px; overflow:hidden;
  box-shadow:0 12px 24px -18px rgba(10,18,25,.5); transition:transform .4s var(--ease), box-shadow .4s var(--ease);
}
.sm-dl__v:hover{ transform:translateY(-2px); box-shadow:0 18px 30px -20px rgba(10,18,25,.55); }
.sm-dl__v img{ display:block; width:100%; height:auto; }
.sm-dl__x{ grid-area:x; align-self:end; display:grid; gap:.25rem; min-width:0; }
.sm-dl__t{ font-family:var(--ff-display); font-size:1.4rem; line-height:1.15; }
.sm-dl__s{ font-size:.92rem; color:var(--fg-dim); }
.sm-dl__b{ grid-area:b; align-self:start; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.15rem; }
.sm-dl__b .btn{ padding:.72rem 1.2rem; font-size:.9rem; }
@media (max-width:480px){
  .sm-dl__k{ grid-template-columns:4.25rem minmax(0,1fr); grid-template-areas:"v x" "b b"; gap:.85rem .9rem; padding:.9rem; }
  .sm-dl__x{ align-self:center; }
  .sm-dl__t{ font-size:1.25rem; }
  .sm-dl__b .btn{ flex:1 1 0; justify-content:center; padding:.72rem .8rem; }
}

/* 13. Drucken der Bestaetigung (schwarzweiss, A4) ------------------------- */
@media print{
  @page{ size:A4; margin:16mm 14mm; }
  body{ background:#fff !important; color:#000 !important; font-size:10.5pt; }
  .skip,.hdr,.drawer,.ftr,.callbar,.cookiebar,.grain,.cursor-light,.pagefade,.phero,
  main > section:not(#melden),.sm-head,.sm-rail,.sm-form,.sm-restore,.sm-done__acts,.sm-done__ok{ display:none !important; }
  #melden{ padding:0 !important; }
  .sm{ display:block; }
  .sm-done{ border:0; box-shadow:none; padding:0; gap:6pt; }
  .sm-print-kopf{ display:block; font-family:var(--ff-mono); font-size:8.5pt; letter-spacing:.1em; text-transform:uppercase; border-bottom:1px solid #000; padding-bottom:4pt; margin-bottom:4pt; }
  .sm-done__h{ font-size:20pt; }
  .sm-done__nr b{ font-size:16pt; }
  .sm-done__s,.sm-done__nr{ color:#000; }
  .sm-printsum{ display:block; margin-top:6pt; }
  .sm-printsum .sm-sum{ border:0; padding:0; background:none; }
  .sm-printsum .sm-sum__edit{ display:none; }
  .sm-sum dl{ font-size:10pt; }
  .sm-sum dt{ color:#333; }
  .sm-sum__sec{ break-inside:avoid; border-top-color:#999; }
}