/* ShirtBOX Bestellseite – Schritte links, Zusammenfassung mit Bestellknopf rechts (Handy: untereinander). Baut auf shirtbox.css auf. */
.single-order{max-width:var(--wrap);margin:0 auto;padding:clamp(24px,4vw,48px) var(--gutter) clamp(48px,7vw,88px)}
.back-home{display:none}

/* Kopf */
.order-head{text-align:center;margin:0 0 clamp(22px,3vw,34px)}
.order-head h1{margin:0;font-size:clamp(32px,5vw,52px)}
.order-head>p{margin:10px auto 0;max-width:620px;color:var(--ink-2);font-size:clamp(16px,1.6vw,18px)}

.form-panel{margin:0;padding:0}
.order-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:24px;align-items:start}
.order-main{min-width:0}

/* Schritte */
.order-step{margin:0 0 18px;padding:24px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.order-step-title{display:flex;align-items:center;gap:12px;margin:0 0 8px;font-size:22px;letter-spacing:-.02em}
.order-step-title span{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:50%;background:var(--solid);color:#fff;font-family:var(--font);font-size:15px;font-weight:850}
.order-step-intro{margin:0 0 16px;color:var(--ink-2);font-size:15px}

/* Eingabefelder */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
.field{margin-bottom:16px}
.field label{display:block;margin:0 0 7px;font-size:14px;font-weight:750;color:var(--ink)}
.phone-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:8px}
.field-help{margin:6px 0 0;color:var(--ink-3);font-size:13px}

/* Status, leerer Warenkorb, Fehler */
#design-transfer-status{margin:0 0 14px;padding:12px 16px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);font-size:14.5px}
#design-transfer-status:empty{display:none}
.order-empty{display:none;padding:32px 20px;border:2px dashed var(--line-2);border-radius:18px;text-align:center}
#design-list:empty~.order-empty{display:block}
.order-empty p{margin:0 0 14px;color:var(--ink-2);font-size:17px;font-weight:600}
.order-empty a,.order-more{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:999px;font-weight:800;text-decoration:none}
.order-empty a{background:var(--fire);color:var(--on-accent)}
.order-empty a:hover{background:var(--fire);color:var(--on-accent)}
.order-more{margin-top:4px;color:var(--ink);box-shadow:inset 0 0 0 2px var(--line-2)}
.order-more:hover{color:var(--ink);box-shadow:inset 0 0 0 2px var(--ink)}
#design-list:empty~.order-more{display:none}
.file-check-status{padding:12px 16px;border-radius:12px;background:#3a1a1c;border:1px solid #7a2b2b;color:var(--error);font-size:14.5px;overflow-wrap:anywhere}
/* Sammelfehler erst nach dem ersten Bestellversuch zeigen; die Felder werden dann ohnehin markiert. */
#design-validation{display:none}
form.was-submitted #design-validation:not([hidden]){display:block;margin:12px 0}

/* Designkarten: Bild links, Angaben rechts */
.order-design{display:grid;grid-template-columns:180px minmax(0,1fr);grid-template-areas:"thumb head" "thumb help" "thumb sizes" "thumb add" "thumb sub" "rights rights";column-gap:20px;align-items:start;margin:0 0 14px;padding:18px;border-radius:18px;background:var(--surface-2);border:1px solid var(--line)}
.order-design .design-heading-row{display:none!important}
.order-design>.print-original{grid-column:1/-1}
.order-design p.print-original{margin:10px 0 0;color:var(--ink-3);font-size:13px}
.order-design .design-file-preview{grid-area:thumb;display:flex;flex-direction:column;align-items:stretch;gap:8px;margin:0}
.order-design .design-file-preview img:not([hidden]){width:100%!important;height:auto!important;max-height:none!important;aspect-ratio:3/2;object-fit:contain!important;border-radius:12px;background:#747474;cursor:zoom-in}
.design-filename{margin:0;font-size:15px;font-weight:800}
.order-design .order-inline-view:not([hidden]){display:inline-flex;justify-content:center;padding:7px 10px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink-2);font-size:13px;font-weight:650;cursor:pointer}
.order-design .order-inline-view:hover{border-color:var(--ink);color:var(--ink)}
.order-design .order-design-actions{grid-area:head;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 4px}
.order-design .order-inline-edit{display:inline-flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;background:var(--blue-soft);color:#a9bdff;font-size:14px;font-weight:750;text-decoration:none}
.order-design .order-inline-edit:hover{background:#26346a;color:#a9bdff}
.order-design .remove-design{min-height:38px;margin-left:auto;padding:0 12px;border:0;border-radius:999px;background:transparent;color:var(--error);font-size:13.5px;font-weight:700;cursor:pointer}
.order-design .remove-design:hover{background:#3a1a1c}
.order-size-help{grid-area:help;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;margin:8px 0 12px}
.asian-size-notice{color:var(--ink-2);font-size:13.5px;font-weight:600;line-height:1.4}
.asian-size-notice::before{content:"ℹ︎ ";color:var(--blue)}
.size-guide{margin:0;border:0}
.size-guide summary{padding:0;color:var(--blue);font-size:13.5px;font-weight:750}
.size-guide summary::after{display:none}
.size-guide[open]{flex-basis:100%}
.size-guide-body{margin-top:8px;padding:14px;border-radius:12px;background:var(--surface);border:1px solid var(--line)}
.size-guide-body p{margin:0;font-size:13.5px;color:var(--ink-2)}
.size-guide-body img{display:block;width:100%;max-width:570px;height:auto;margin:10px auto 0;border-radius:8px}
.order-design .design-size-list{grid-area:sizes;margin:0}
.design-size-row{display:grid;grid-template-columns:minmax(0,1fr) 120px 46px;align-items:end;gap:8px;margin-bottom:10px}
.design-size-row .field{min-width:0;margin:0}
.design-size-row .field>label{display:flex;flex-direction:column;gap:6px;margin:0;font-size:13px;color:var(--ink-2)}
.design-size-row select,.design-size-row input{min-height:48px;height:48px}
.design-size-row .remove-size{width:46px;height:48px;padding:0;border:1.5px solid var(--line-2);border-radius:12px;background:var(--surface);color:var(--ink-2);font-size:20px;cursor:pointer}
.design-size-row .remove-size:hover:not(:disabled){border-color:var(--error);color:var(--error)}
.design-size-row .remove-size:disabled{opacity:.35;cursor:default}
.order-design .add-size{grid-area:add;justify-self:start;margin:2px 0 0;padding:6px 0;border:0;background:none;color:var(--blue);font-size:14px;font-weight:750;cursor:pointer}
.order-design .add-size:disabled{opacity:.4}
.design-subtotal{grid-area:sub;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);font-size:16px;font-weight:800;text-align:right}
.agb-consent{display:flex;align-items:flex-start;gap:10px;padding:12px 14px;border-radius:12px;border:1.5px solid var(--line-2);background:var(--surface);font-size:14px;line-height:1.45;color:var(--ink-2)}
.agb-consent label{cursor:pointer}
.agb-consent input{flex:none;width:20px;height:20px;margin:0}
.agb-consent:has(input:checked){border-color:#2f7a55;background:var(--mint-soft)}
.order-design .agb-consent{grid-area:rights;margin:16px 0 0;font-size:13.5px}
.newsletter-consent{margin-top:10px;font-size:13.5px}

/* Zusammenfassung + Bestellknopf */
.order-side{position:sticky;top:90px;max-height:calc(100vh - 110px);overflow-y:auto;display:flex;flex-direction:column;gap:14px;padding:22px;border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.order-summary h3{margin:0 0 12px;font-size:21px}
.order-summary .summary-scroll{overflow:visible}
.order-summary table{width:100%;border-collapse:collapse;font-size:14px}
.order-summary th{padding:0 4px 8px;border-bottom:1px solid var(--line);color:var(--ink-3);font-size:11px;font-weight:750;letter-spacing:.06em;text-align:left;text-transform:uppercase}
.order-summary td{padding:10px 4px;border-bottom:1px solid var(--line);vertical-align:middle;line-height:1.3}
.order-summary td:first-child img,.order-summary td:first-child a{display:none!important}
.order-summary .order-view-design{display:inline;padding:0;border:0;background:none;color:var(--ink);font:inherit;font-weight:750;text-decoration:underline;text-decoration-color:var(--line-2);cursor:zoom-in}
.order-summary th:last-child,.order-summary td:last-child{text-align:right}
.summary-total{display:flex;justify-content:space-between;align-items:baseline;margin-top:14px;color:var(--ink-2);font-size:15px}
.summary-total strong{font-family:var(--display);font-size:30px;font-weight:850;letter-spacing:-.03em;color:var(--ink)}
.order-summary>p{margin:8px 0 0;color:var(--ink-3);font-size:12.5px;line-height:1.45}
#absenden{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:60px;padding:0 16px;border:0;border-radius:999px;background:var(--fire);color:var(--on-accent);font-size:18px;font-weight:850;white-space:nowrap;cursor:pointer;box-shadow:0 10px 26px #ff5b2e4d;transition:transform .15s,background .15s}
#absenden:hover{background:var(--fire);transform:translateY(-2px)}
#formular-status{margin:0;padding:12px 14px;border-radius:12px;background:#3a2f12;border:1px solid #7a6420;color:#ffd67a;font-size:14px}
.order-trust{display:grid;gap:6px;margin:0;padding:0;list-style:none;color:var(--ink-2);font-size:13.5px}
.order-trust li::before{content:"✓ ";color:var(--mint);font-weight:900}
.order-submit-progress{margin:0;padding:12px 14px;border-radius:12px;background:var(--blue-soft);color:#a9bdff;font-weight:700;line-height:1.45}
.order-submit-progress::before{content:"⏳";display:inline-block;margin-right:8px;animation:shirtbox-spin 1.4s ease-in-out infinite}
@keyframes shirtbox-spin{50%{transform:rotate(180deg)}}

/* Fehlende Pflichtangabe nach Klick auf „Bestellen“ */
.missing-required{outline:3px solid var(--warn)!important;outline-offset:3px;border-radius:12px;scroll-margin-top:110px}


/* Grossansicht */
.order-design-modal{width:min(1000px,96vw);max-height:92vh;padding:18px;border:0;border-radius:24px;background:var(--surface);box-shadow:var(--shadow-lg);text-align:center}
.order-design-modal::backdrop{background:#0e1a2bd9;backdrop-filter:blur(4px)}
.order-design-modal form{display:flex;justify-content:flex-end;margin:0 0 8px}
.order-design-modal .modal-close{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:var(--solid);color:#fff;font-weight:700;cursor:pointer}
.order-design-modal img{display:block;max-width:100%;max-height:65vh;margin:0 auto;object-fit:contain;border-radius:12px}
.order-design-modal p{margin:12px 0 0;color:var(--ink-2)}
.order-design-edit{display:inline-flex;align-items:center;min-height:48px;margin-top:12px;padding:0 20px;border-radius:999px;background:var(--blue-soft);color:#a9bdff;font-weight:750;text-decoration:none}
.order-design-modal .modal-note{font-size:13.5px;color:var(--ink-3)}

@media(max-width:940px){
  .order-layout{grid-template-columns:minmax(0,1fr)}
  .order-side{position:static;max-height:none;overflow:visible}
}
@media(max-width:600px){
  .order-step,.order-side{padding:18px;border-radius:20px}
  .two-col{grid-template-columns:1fr}
  .two-col.address-row{grid-template-columns:110px minmax(0,1fr)}
  .phone-row{grid-template-columns:140px minmax(0,1fr)}
  .order-design{grid-template-columns:110px minmax(0,1fr);grid-template-areas:"thumb head" "help help" "sizes sizes" "add add" "sub sub" "rights rights";column-gap:12px;padding:14px}
  .order-design .order-design-actions{flex-direction:column;align-items:stretch}
  .order-design .remove-design{margin:0}
  .order-design .order-inline-view:not([hidden]){display:none}
  .design-size-row{grid-template-columns:minmax(0,1fr) 92px 46px}
  .order-more,.order-empty a{width:100%}
}

/* ===== Neues Bestellformular (03.11.2026): dunkel wie bisher, Orange für Aktionen/aktuellen Schritt, Grün für Erledigtes =====
   Reine Gestaltung – Felder, Namen und Abläufe bleiben unverändert. Schrittzustände setzt formular.js (guide()). */
.order-page .order-step,.order-page .order-side{border:1.5px solid #ffffff14;background:linear-gradient(180deg,#151b29,#10151f);transition:border-color .3s,box-shadow .3s}
.order-page .order-step-title{flex-wrap:wrap;row-gap:6px}
.order-page .order-step-title>span{background:#ff5b2e26;color:#ffb48f;box-shadow:inset 0 0 0 1.5px #ff7a2b80;transition:background .3s,color .3s}
.order-step-badge{margin-left:auto;padding:4px 11px;border-radius:999px;font-family:var(--font);font-size:11.5px;font-style:normal;font-weight:850;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.order-step-badge:empty{display:none}
/* Aktueller Schritt: dezenter orange Rahmen + Schild „Nächster Schritt“ */
.order-page .is-current{border-color:#ff7a2b;box-shadow:0 0 0 3px #ff7a2b26,0 18px 40px #0007}
.order-page .is-current .order-step-title>span{background:var(--fire);color:var(--on-accent);box-shadow:0 6px 16px #ff5b2e55}
.order-page .is-current .order-step-badge{background:#ff5b2e2b;color:#ffb48f;box-shadow:inset 0 0 0 1px #ff7a2b99}
/* Erledigt: grünes Häkchen + „Angaben vollständig“ */
.order-page .is-done:not(.is-current){border-color:#2f7a5599}
.order-page .is-done .order-step-title>span{background:#2f7a55;color:transparent;box-shadow:none;position:relative}
.order-page .is-done .order-step-title>span::after{content:"✓";position:absolute;inset:0;display:grid;place-items:center;color:#eafff2;font-size:17px;font-weight:900}
.order-page .is-done .order-step-badge{background:#2f7a5533;color:#7ff0a8;box-shadow:inset 0 0 0 1px #2f7a55}
/* Eingabefelder: heller Kontrast, orange beim Bearbeiten statt blau */
.order-page input:not([type]),.order-page input[type=text],.order-page input[type=email],.order-page input[type=tel],.order-page input[type=number],.order-page select{background-color:#ffffff0d;border-color:#ffffff24}
.order-page input:focus,.order-page select:focus{border-color:#ff9a3d;box-shadow:0 0 0 4px #ff7a2b2e}
.order-page input:not([type=checkbox]):valid:not(:placeholder-shown),.order-page select:valid{border-color:#ffffff33}
.order-page input[type=checkbox]{accent-color:#2f9e63}
.order-page .field label,.design-size-row .field>label{color:var(--ink)}
/* Nächste fehlende Angabe im aktuellen Schritt */
.order-page .is-next-field input,.order-page .is-next-field select{border-color:#ff9a3d;box-shadow:0 0 0 3px #ff7a2b33}
.order-page .agb-consent.is-next-field{border-color:#ff9a3d;box-shadow:0 0 0 3px #ff7a2b33}
/* Designkarten in der Liste */
.order-page .order-design{border:1.5px solid #ffffff14;background:#0e131d}
.order-page .order-design .order-inline-edit{background:#ff5b2e1f;color:#ffb48f;box-shadow:inset 0 0 0 1px #ff7a2b66}
.order-page .order-design .order-inline-edit:hover{background:#ff5b2e33;color:#ffd2b8}
.order-page .order-design .add-size,.order-page .size-guide summary{color:#ffb48f}
.order-page .asian-size-notice::before{color:#ff9a3d}
.order-page .design-subtotal{color:#ffd2b8}
.order-page .order-more{box-shadow:inset 0 0 0 2px #ff7a2b80;color:#ffb48f}
.order-page .order-more:hover{box-shadow:inset 0 0 0 2px #ff9a3d;color:#ffd2b8}
/* Zusammenfassung = Bestellliste mit Vorschaubild, Grösse, Menge, Einzel- und Gesamtpreis */
.order-page .order-summary td:first-child img{display:block!important;width:72px!important;max-width:72px!important;height:auto!important;max-height:none!important;aspect-ratio:3/2;object-fit:cover!important;margin:0 0 4px!important;border-radius:8px!important;background:#747474}
.order-page .order-summary td:first-child a{display:none!important}
.order-page .order-summary td{vertical-align:top}
.summary-each{display:block;margin-top:3px;color:var(--ink-3);font-size:11.5px;font-weight:600;white-space:nowrap}
.order-page .summary-total{margin-top:16px;padding:14px 16px;border-radius:16px;background:linear-gradient(135deg,#ff5b2e1f,#ff9a3d14);box-shadow:inset 0 0 0 1px #ff7a2b55}
.order-page .summary-total strong{color:#ffb48f;font-size:32px}
/* Einmalige Bestätigungen */
.order-page .agb-consent{border-color:#ffffff24;background:#ffffff08;color:var(--ink-2)}
.order-page .agb-consent:has(input:checked){border-color:#2f7a55;background:var(--mint-soft);color:var(--ink)}
.order-page .rights-consent{font-size:14px}
/* Bestellknopf: gross, orange, gut antippbar */
.order-page #absenden{min-height:64px;padding:10px 20px;font-size:clamp(16px,2.2vw,19px);white-space:normal;line-height:1.2;text-align:center;box-shadow:0 12px 30px #ff5b2e59}
.order-page #absenden[aria-disabled=true]{filter:saturate(.75);box-shadow:0 6px 18px #ff5b2e33}
.order-page #absenden[aria-disabled=false]{animation:sbOrderReady 2.2s ease-in-out infinite}
@keyframes sbOrderReady{0%,100%{box-shadow:0 12px 30px #ff5b2e59}50%{box-shadow:0 12px 30px #ff5b2e59,0 0 0 6px #ff7a2b38}}
@media(prefers-reduced-motion:reduce){.order-page #absenden[aria-disabled=false]{animation:none}}
.order-page .order-submit-progress{background:#ff5b2e1f;color:#ffd2b8}
/* Handy: Schild unter die Überschrift, Tabelle ohne Querscrollen */
@media(max-width:600px){
  .order-step-badge{margin-left:46px}
  .order-page .order-summary table{font-size:13px}
  .order-page .order-summary td:first-child img{width:56px!important;max-width:56px!important}
  .order-page .summary-total strong{font-size:26px}
  .summary-each{white-space:normal}
  .order-page .order-summary th,.order-page .order-summary td{padding-left:3px;padding-right:3px}
}