@import url("https://use.typekit.net/gid7bxa.css");

/* ========================
   LOGIN PAGE – SIKS Style
======================== */
:root{
    --bg: #d9d9d9;
    --white: #ffffff;
    --label-text: #5A7679;
    --text: #111111;
    --text-muted: #666666;
    --accent: #F49000;
    --border: #cfcfcf;
    --border-rad: 5px;
    --border1: #000;
    --text1: #5f7376; /* grau wie im Beispiel */
    --bg1: #fff;
}

/* Nur für die Login-Seite */
body{
  margin:0;
  font-family: "futura-pt", sans-serif;
  font-weight: 400;
  font-style: normal;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* Kopfbereich */
.site-header{
  background:var(--white);
  border-bottom:1px solid #e4e4e4;
  padding:18px 40px;
}


/* Einfaches Platzhalter-Logo – gern durch <img> ersetzen */
.logo{
  display:inline-flex;
  align-items:center;
  gap:4px;
  font-weight:800;
  font-size:30px;
  letter-spacing:1px;
}
.logo span{ display:inline-block; }

.logo .dots{
  display:inline-grid;
  grid-template-columns:repeat(2,6px);
  gap:2px;
  margin-right:4px;
}
.logo .dots div{
  width:6px;
  height:6px;
  background:var(--accent);
}

/* Hauptbereich */


/* Login-Card */
.login-card{
  width:100%;
  max-width:500px;
  background:var(--white);
  border-radius: var(--border-rad);
  padding:48px 60px 40px;
  box-shadow:
    0 0 0 1px rgba(0,0,0,0.02),
    0 18px 45px rgba(0,0,0,0.18);
}

.login-card h1{
  margin:0 0 32px;
  font-size:40px;
  text-align:center;
  letter-spacing:1px;
}

.login-card form{
  display:block;
}

.form-group{
  margin-bottom:22px;
}

.login-card label{
  display:block;
  margin-bottom:4px;
  font-size:14px;
  font-weight:600;
  color:var(--label-text);
}

.login-card input{
  width:100%;
  padding:14px 16px;
  font-size:15px;
  border-radius: var(--border-rad);
  border:2px solid #000;
  background:#f5f5f5;
  outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
  box-sizing: border-box;
}

.login-card input:focus{
  border-color:var(--accent);
  box-shadow:0 0 0 2px rgba(244,161,26,.2);
  background:#ffffff;
}

.forgot{
  font-size:13px;
  margin-top:4px;
  color:var(--accent);
  text-decoration:none;
  display:inline-block;
  font-weight: 600;
  border: none;
  background: transparent;
}
.forgot:hover{ text-decoration:underline;cursor: pointer;}

.actions{
  margin-top:28px;
  display:flex;
  justify-content:center;
}


/* Fehlermeldung bleibt erhalten */
.err{
  color:#b91c1c;
  background:#fee2e2;
  border:1px solid #fecaca;
  padding:10px 12px;
  border-radius: var(--border-rad);
  font-size:.9rem;
  margin-bottom:16px;
}

/* Footer unten */
.site-footer{background:var(--white);border-top:1px solid var(--border);padding:28px 40px 32px;}
.footer-col{ min-width:180px; }
.footer-logo{ margin-bottom:8px; }
.footer-logo .logo{ font-size:26px; }
.footer-small{font-size:14px;color:var(--text-muted);line-height:1.5;}
.footer-title{font-weight:700;margin-bottom:10px;font-size:18px;}
.footer-link, .footer-text{font-size:13px;color:#2f4858;text-decoration:none;display:block;margin-bottom:4px;}
.footer-link:hover{ text-decoration:underline; }



/* ========================
   Dashboard (eingeloggt)
======================== */

.dashboard-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:20px;
  margin-bottom:16px;
}

.dashboard-title{
  margin:0;
  font-size:40px;
  font-weight:800;
}

.dashboard-subtitle{
  margin:6px 0 0;
  font-size:14px;
  color:var(--text-muted);
}

/* Tabs + Kopfbereich */
.orders{
  margin-top:10px;
  flex:1;
  display:flex;
  flex-direction:column;
}

.orders-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:16px;
}

.tabs-nav{
  display:flex;
  align-items:flex-end;
  gap:0;
  position:relative;
  z-index:2;
}

.tab{
  position:relative;
  border:none;
  background:#e7e7e7;
  padding:10px 24px 20px;
  border-radius:18px 18px 0 0;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
  margin-left:-16px;
  box-shadow:0 0px 8px rgba(0,0,0,0.1);
}

/* erstes Tab normal starten */
.tab:first-child{
  margin-left:0;
}

.tab:nth-child(1){ z-index:3; }
.tab:nth-child(2){ z-index:2; }
.tab:nth-child(3){ z-index:1; }

/* aktives Tab immer ganz oben */
.tabs-nav .tab--active{
  background:#ffffff;
  color:var(--accent);
  z-index:4;
}

/* Hover-Tab liegt vor den anderen, aber unter dem aktiven */
.tab:not(.tab--active):hover{
  z-index:5;
}


/* Button "Neuen Auftrag anlegen" */
.btn-new-order{
  margin-bottom: 15px;
}
.btn-new-order__icon{
  font-size:18px;
  line-height:1;
}

/* Karte leicht unter die Tabs schieben, damit es verbunden aussieht */
.orders-card{
  margin-top:-6px;
  background:#ffffff;
  border-radius:0 var(--border-rad) var(--border-rad) var(--border-rad);
  padding:18px;
  overflow-x:hidden;
  position:relative;
  z-index:10;
  flex:1;
  display:flex;
  flex-direction:column;
}

/* Tabelle bleibt oben in der Card */
.orders-table{
  width:100%;
  min-width:640px;
  border-collapse:separate;
  border-spacing:0 12px;
  font-size:16px;
}

.orders-table thead th{
  text-align:left;
  padding:0 18px 8px;
  font-weight:700;
  color:var(--text);
}

.orders-table tbody tr{
  background:#fbfbfb;
  box-shadow:0 1px 4px rgba(0,0,0,0.1);
  border-radius: var(--border-rad);
}

.orders-table tbody tr td{
  padding:12px 18px;
  background:inherit;
  white-space: nowrap;
}

.orders-table tbody tr td:first-child{
  border-radius:var(--border-rad) 0 0 var(--border-rad);
}
.orders-table tbody tr td:last-child{
  border-radius:0 var(--border-rad) var(--border-rad) 0;
}

.orders-table__action{
  text-align:right;
}

.orders-table tbody tr:has(td.orders-table__action:hover), .orders-table tbody tr:hover{
  outline: 2px solid var(--accent);   /* oder eine andere Farbe */
  outline-offset: -1px;               /* Rahmen näher an die Zellen ran */
}


.orders-table .paused{color: #0000008a;}
.paused .btn{background: #F490008a;border: solid 2px #F4900000;}
.paused .btn:hover {background: #E56205A8;border: solid 2px #E5620500;}

/* kleiner Button in der Tabelle */
.btn-row{
  padding:8px 18px;
  font-size:14px;
  border-radius:999px;
}
.btn-row::after{
  content:"👁";
  font-size:0.9rem;
  margin-left:8px;
}

.orders-content{
  display:none;
  overflow: auto;
}
.orders-content--active{
  display:block;
}


/* Responsive */
@media (max-width: 900px){
  body.page .main{
    padding:24px 16px 40px;
  }
  .dashboard-title{
    font-size:32px;
  }
  .orders-card{
    padding:18px 14px 16px;
  }
  .orders-table{
    font-size:13px;
  }
}


/* Responsive */
@media (max-width: 768px){
  .site-header{ padding-inline:20px; }
  .login-card{ padding:32px 20px 28px; }

}




/* ========================
   Auftragsdetail (Lehrer)
======================== */



.btn-back{
  padding:8px 18px;
  border-radius:var(--border-rad);
  font-size:14px;
}






/* Buttons in den Boxen */


.order-icon{
  font-size:16px;
  line-height:1;
}

.order-second{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}


/* ===== Forgot Passwort Modal (Mockup-Style) ===== */

#forgot-modal{
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}

#forgot-modal.modal--open{
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Backdrop */
#forgot-modal .modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.18);
}

/* Dialog */
#forgot-modal .modal__dialog{
  position: relative;
  width: min(680px, calc(100vw - 64px));
  background: #fff;
  border-radius: var(--border-rad);
  padding: 48px 56px 44px;
  box-shadow:
    0 8px 24px rgba(0,0,0,.12),
    0 2px 6px rgba(0,0,0,.08);
  z-index: 1;
  text-align: center;
}

/* Close Button */
#forgot-modal .modal__close{
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: none;
  font-size: 22px;
  font-weight: 500;
  color: #000;
  cursor: pointer;
}

#forgot-modal .modal__close:hover{
  opacity: .6;
}

/* Title */
#forgot-modal .modal__title{
  margin: 0 0 18px;
  font-size: 36px;
  font-weight: 900;
  color: #000;
}

/* Text */
#forgot-modal .modal__text{
  font-size: 17px;
  line-height: 1.55;
  font-weight: 600;
  color: #5b757a;
}

/* Mail Link */
#forgot-modal .modal__link{
  display: inline-block;
  margin-top: 4px;
  color: #5b757a;
  text-decoration: underline;
}

#forgot-modal .modal__link:hover{
  opacity: .8;
}

/* Scroll Lock */
body.modal-open{
  overflow: hidden;
}

/* Mobile */
@media (max-width: 600px){
  #forgot-modal .modal__dialog{
    padding: 36px 24px 32px;
  }

  #forgot-modal .modal__title{
    font-size: 28px;
  }
}


/* ===== Orders Toolbar (Suche rechts) ===== */
.orders-toolbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  margin:6px 0 16px;
}

.orders-search{
  position:relative;
  width:min(340px, 100%);
}

.orders-search__input{
  width:100%;
  border:0;
  border-bottom:2px solid rgba(0,0,0,.12);
  padding:10px 36px 10px 8px;
  outline:none;
  background:transparent;
  font-size:14px;
}

.orders-search__input::placeholder{
  color:rgba(0,0,0,.45);
}

.orders-search__icon{
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  color:rgba(0,0,0,.45);
  pointer-events:none;
}


/* =========================
   Modal (Popup)
========================= */




.modal__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}



.modal__label{
  display: block;
  margin: 0 0 8px;
  font-weight: 700;
  color: #2a2a2a;
}





/* Scroll sperren, wenn Modal offen */
body.modal-open{
  overflow: hidden;
}

/* Mobile */
@media (max-width: 520px){
  .modal__dialog{
    margin-top: 6vh;
    padding: 20px;
    border-radius: 14px;
  }
  .modal__title{
    font-size: 26px;
  }
  .modal__actions{
    flex-direction: column;
  }
}





















.btn-second{background: var(--bg1);border: solid 2px var(--accent);color: var(--accent);}
.btn-second svg{fill: var(--accent);}


.btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(1); pointer-events: none; }




/* Standart Layout ab 320px optimiert (hier ab 640px) */ 

    .inner-header{display: flex;justify-content: space-between;align-items: center;}
    .main{flex:1;display:flex;justify-content:center;align-items:center;padding: 24px 16px 40px;}
    .dashboard {width: 100%;margin: 0;display: flex;flex-direction: column;}
    html.modal-lock,body.modal-lock{overflow: hidden;height: 100%;}

    .btn{background:var(--accent);color:#ffffff;padding:10px 18px;font-weight:600;font-size:15px;cursor:pointer;display:inline-flex;align-items:center;gap:10px;border: solid 2px var(--accent);border-radius: var(--border-rad);transition:transform .1s, box-shadow .1s, filter .1s;text-decoration: none;}
    .btn svg{width: 20px;height: 20px;fill: white;}
    .btn--primary{margin-top:18px;}
    .btn--danger{background: #d32f2f;color: #ffffff;border: solid 2px #d32f2f;}
    .btn--second{background: var(--bg1);border: solid 2px var(--accent);color: var(--accent);}
    .btn--second svg{fill: var(--accent);}
    .btn:hover{ background:#E56205;border: solid 2px #E56205;color: var(--white);}
    .btn:hover svg{ fill: var(--white);}
    .btn:active{transform:translateY(1px);}


/* ==================================================
        Auftrags Seite
================================================== */

    .title{margin:0;font-size:28px;font-weight:800;display: flex;}
    .title-pill{font-size: 1.2rem;padding: 5px 10px;border-radius: 5px;margin-left: 10px;background: #ff9800;color: #fff;display: flex;align-items: center;}
    .title-pill--paused { background: #707070;}
    .title-pill--finished { background: #222222;}
    .title-pill--cancelled { background: #f44336;}

    .order-top{margin-bottom:12px;display: flex;justify-content: space-between;}
    .order-content {display: grid;grid-template-columns: repeat(1, 1fr);gap: 30px;}
    .order-box{background:#ffffff;border-radius:var(--border-rad);padding:24px 28px 20px;box-shadow:0 15px 40px rgba(0,0,0,0.08);}
    .order-box:nth-child(1) {grid-row: 1 / 2;grid-column: 1;}
    .order-box:nth-child(2) {grid-row: 3 / 4;grid-column: 1;}
    .order-box:nth-child(3) {grid-row: 2 / 3;grid-column: 1;}
    .order-box-title{font-size:1.3rem;font-weight:700;}
    .order-box-info{margin:0;text-align: left;}
    .order-box-info th{font-weight:600;width: 250px;padding: 0px;}
    .order-box-download {display: flex;gap: 10px;}
    .order-actions {display: flex;gap: 10px;align-items: flex-start;flex-direction: column;}

    .order-logs {display: flex;flex-direction: column;gap: 12px;margin-top: 10px;max-height: 300px;overflow-y: auto;}
    .order-logs-item {padding: 10px 15px;border-left: 4px solid var(--accent);background: #f9f9f9;border-radius: 0 6px 6px 0;box-shadow: 0 1px 3px rgba(0,0,0,0.05);}
    .order-logs-header {display: flex; justify-content: space-between;align-items: center;margin-bottom: 6px;border-bottom: 1px solid #eee;padding-bottom: 4px;}
    .order-logs-date {font-size: 0.8rem;color: #777;font-weight: 500;}
    .order-logs-title {font-size: 0.85rem;font-weight: bold;color: #333;text-transform: uppercase;letter-spacing: 0.5px;}
    .order-logs-content {font-size: 0.9rem;color: #444;line-height: 1.4;}
    .order-logs__empty {text-align: center;color: #999;padding: 20px;font-style: italic;}

/* ==================================================
        Popups
================================================== */

    .modal{position: fixed;inset: 0;display: none;z-index: 9999;inset: 0;background: rgba(0, 0, 0, 0.5);align-items: center;justify-content: center;}
    .modal--open{display: flex;}
    .modal-dialog{position: relative;max-height: calc(100vh - 160px);background: #fff;border-radius: 10px;padding: 30px;box-shadow: 0 30px 80px rgba(0,0,0,.22);overflow-x: hidden;width: 100%;margin: 40px;scrollbar-color: #f2a100 rgba(0, 0, 0, 0);}
    .modal-close{position: absolute;top: 18px;right: 18px;width: 44px;height: 44px;border-radius: 10px;border: 0;background: rgba(0,0,0,.1);cursor: pointer;font-size: 18px;font-weight: 900;}
    .modal-stepper{width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0; padding: 8px 0;margin:30px 0 20px;}
    .modal-stepper-item{display: flex; align-items: center; flex: 1 1 auto; min-width: 0;}
    .modal-stepper-item:nth-child(5){flex:0 0 auto;}
    .modal-stepper-circle{ width: 52px; height: 52px;font-size: 18px;border-radius: 999px;background: #fff;border: 3px solid var(--accent);display: grid;place-items: center;font-weight: 900;color: var(--accent);box-sizing: border-box;user-select: none;position: relative;}
    .modal-stepper-circle.is-active{background: var(--accent);color: #fff;border-color: var(--accent);box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 10px var(--accent);}
    .modal-stepper-circle.is-done{ background: var(--accent); color: #fff; border-color: var(--accent); box-shadow: none; }
    .modal-stepper-line{flex: 1 1 auto; height: 3px; background: var(--border); margin: 0 10px; border-radius: 999px; min-width: 14px; }
    .modal-title{margin: 0 0 16px;font-size: 34px;font-weight: 800;}
    .modal-textarea{width: 100%;border: 2px solid #1a1a1a;border-radius: 10px;padding: 14px 16px;font: inherit;outline: none;resize: vertical;min-height: 110px;box-sizing: border-box;}
    .modal-textarea:focus{border-color: var(--accent);box-shadow: 0 0 0 4px rgba(242,140,0,.18);}
    .modal-actions{display: flex;justify-content: space-between;gap: 12px;margin-top: 18px;}
    .modal-actions--remove{flex-direction: column; gap: 10px;}

    .step-title{margin: 0 0 14px;font-size: 34px;line-height: 1.05;font-weight: 900;color: #000;}
    .step-subtitle{margin: -2px 0 14px;font-size: 18px;font-weight: 900;color: #000;}
    .step-form{width: 100%;}
    .form-grid{display: grid;grid-template-columns: 1fr;gap: 18px 26px;align-items: start;}
    .form-field--full{ grid-column: 1 / -1; }
    .form-field--sizing{display: grid;grid-template-columns: 1fr;gap: 18px;}
    .field-label{display: flex;align-items: center;justify-content: space-between;gap: 10px;font-size: 14px;font-weight: 800;color: var(--text1);margin: 0 0 10px;}
    .field-label-visually{position: absolute;width: 1px; height: 1px;padding: 0; margin: -1px;overflow: hidden; clip: rect(0,0,0,0);white-space: nowrap; border: 0;}
    .form-actions{display: flex;justify-content: space-between;padding-top: 0;position: relative;bottom: -2px;background: #fff;margin-top: 10px;padding-bottom: 18px;z-index: 5;}
    .form-actions--end{ justify-content: flex-end; }


    .field-box{display: flex;align-items: center;justify-content: space-between;background: var(--bg1);border: 2px solid var(--border1);border-radius: 10px;padding: 9px 12px;min-height: 52px;box-sizing: border-box;}
    .field-box:focus-within{box-shadow: 0 0 0 4px rgba(0,0,0,0.1);}
    .field-locked {cursor: not-allowed !important;opacity: 0.7;background-color: #f5f5f5;}
    .field-locked > * {pointer-events: none;}
    .field-locked .field-box {background-color: #f5f5f5;cursor: not-allowed;}
    .field-box:has(input[readonly]) {background-color: #f5f5f5;cursor: not-allowed;opacity: 0.7;}
    .field-input{border: 0;outline: none;background: transparent;flex: 1 1 auto;width: 100%;font-size: 16px;line-height: 1;color: var(--text1);padding: 0;margin: 0;}
    .field-input::-webkit-outer-spin-button, .field-input::-webkit-inner-spin-button{-webkit-appearance: none;margin: 0;}
    .field-input[type="number"]{-moz-appearance: textfield;appearance: textfield;}
    input[readonly] {cursor: not-allowed;}   
    .field-dropdown{position: relative;width: 100%;}
    .field-box--dropdown{position: relative;justify-content: flex-start;padding-right: 56px;cursor: pointer;}
    .field-box--dropdown::after{content: "";position: absolute;right: 12px;top: 50%;width: 14px;height: 9px;transform: translateY(-50%);background-repeat: no-repeat;background-position: center;background-size: contain;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24'%3E%3Cpath d='M11.9,16.1c-.3,0-.5,0-.7-.3l-6-6c-.4-.4-.4-1,0-1.4s1-.4,1.4,0l5.3,5.3,5.3-5.3c.4-.4,1-.4,1.4,0s.4,1,0,1.4l-6,6c-.2.2-.5.3-.7.3Z'/%3E%3C/svg%3E");pointer-events: none;}
    .field-btn{width: 100%;border: 0;background: transparent;text-align: left;font-size: 16px;line-height: 1;color: var(--text1);padding: 0;margin: 0;cursor: pointer;display: block;height: 100%;}
    .field-menu{position: absolute;left: 0;top: calc(100% + 12px);width: 100%;box-sizing: border-box;background: #fff;border: 2px solid var(--border1);border-radius: 10px;box-shadow: 0 22px 44px rgba(0,0,0,.16);display: none;z-index: 20;max-height: 260px;overflow: auto;overscroll-behavior: contain;}
    .field-box[aria-expanded="true"] .field-menu{display: block;}
    .field-box.is-up .field-menu{top: auto;bottom: calc(100% + 12px);}
    .field-unit{font-size: 16;line-height: 1;font-weight: 600;color: var(--text1);white-space: nowrap;}

    .field-option{width: 100%;border: 0;background: transparent;text-align: left;padding: 12px 16px;font-size: 16px;color: var(--text1);cursor: pointer;}
    .field-option + .field-option{border-top: 2px solid rgba(0,0,0,0.1);}
    .field-option[aria-selected="true"]{background: rgba(0,0,0, 0.05);}
    .field-option:focus{outline: none;background: rgba(0,0,0, 0.05);}
    .field-option.is-unavailable {font-style: italic;color: rgba(153, 153, 153, 0.5);}
    .field-option.is-unavailable:hover::after {content: " (Kombination nicht verfügbar)";font-size: 10px;margin-left: 5px;}

    .form-datepicker{ width: 100%; max-width: 1050px; position: relative; }
    .form-datepicker-box{ position: relative; padding-right: 64px; cursor: pointer; }
    .form-datepicker-value{ font-size: var(--fontSize); line-height: 1; color: var(--text1); user-select: none; }
    .form-datepicker-icon{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; pointer-events: none; }
    .form-datepicker-icon svg{ width: 28px; height: 28px; }
    .form-datepicker-panel{position: absolute;left: 0;bottom: calc(100% + 10px);width: 100%;box-sizing: border-box;background: #fff;border: 2px solid var(--border1);border-radius: 10px;box-shadow: 0 22px 44px rgba(0,0,0,.16);padding: 14px 14px 16px;display: none;z-index: 30;max-height: 360px;overflow: auto;overscroll-behavior: contain;}
    .form-datepicker[aria-expanded="true"] .form-datepicker-panel{ display: block; }
    .form-datepicker.is-up .form-datepicker-panel{ top: auto; bottom: calc(100% + 10px); }
    .form-datepicker-head{ display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 10px; }
    .form-datepicker-month{ font-size: 14px; font-weight: 800; color: #000; letter-spacing: .2px; }
    .form-datepicker-nav{ display: flex; gap: 10px; }
    .form-datepicker-navbtn{width: 30px;height: 30px;border: 2px solid rgba(0,0,0,.22);border-radius: 10px;background: #fff;cursor: pointer;display: grid;place-items: center;padding: 0;}
    .form-datepicker-navbtn svg{ width: 16px; height: 16px; display: block; }
    .form-datepicker-navbtn:disabled{ opacity: .35; cursor: not-allowed; }
    .form-datepicker-dow{display: grid;grid-template-columns: repeat(7, 1fr);gap: 5px;padding: 4px 0 6px;color: rgba(0,0,0,.55);font-weight: 800;font-size: 12px;text-transform: uppercase;letter-spacing: .6px;text-align: center;}
    .form-datepicker-grid{ display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
    .form-datepicker-day{height: 35px;border-radius: 8px;border: 1px solid rgba(0,0,0,.14);background: #fff;font-weight: 800;font-size: 12px;line-height: 1;padding: 0;color: #000;cursor: pointer;}
    .form-datepicker-day:hover{ background: rgba(0,0,0,.04); }
    .form-datepicker-day--muted{ opacity: .35; cursor: default; }
    .form-datepicker-day--disabled{ opacity: .25; cursor: not-allowed; background: #fff; }
    .form-datepicker-day--selected{ border-color: var(--accent); box-shadow: 0 0 0 4px rgba(242,161,0,.18); }
    .form-datepicker-day:focus{ outline: none; box-shadow: 0 0 0 4px rgba(0,0,0,.10); }

    .field-inline{display: grid;grid-template-columns: 1fr auto 1fr;gap: 14px;align-items: center;width: 100%;}
    .field-inline-x{font-size: 36px;line-height: 1;font-weight: 600;color: #000;user-select: none;}

    .field-color{ width: 100%; max-width: 1200px; }
    .field-color-grid{display: grid;grid-template-columns: 1fr;gap: 18px 28px;align-items: start;}
    .field-color-radios{display: flex;flex-direction: column;gap: 12px;padding-top: 6px;}
    .field-color-radio{display: flex;align-items: center;gap: 12px;font-size: 16px;font-weight: 600;color: var(--text1);cursor: pointer;user-select: none;}
    .field-color-radio input{position: absolute;opacity: 0;width: 1px;height: 1px;pointer-events: none;}
    .field-color-radio-mark{width: 18px;height: 18px;border-radius: 999px;box-sizing: border-box;border: 2px solid var(--text1);background: transparent;display: inline-block;flex: 0 0 auto;position: relative;}
    .field-color-radio-mark::after{content: "";position: absolute;inset: 50% auto auto 50%;width: 8px;height: 8px;border-radius: 999px;transform: translate(-50%, -50%);background: transparent;}
    .field-color-radio input:focus-visible + .field-color-radio-mark{ box-shadow: 0 0 0 4px rgba(0,0,0,.10); }
    .field-color-radio input:checked + .field-color-radio-mark{border-color: var(--accent);background: #fff;box-shadow: 0 0 0 2px var(--accent);}
    .field-color-radio input:checked + .field-color-radio-mark::after{ background: var(--accent); }
    .field-color-row{ grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto 2fr; gap: 18px; align-items: end; }
    .field-color-row--compact{ align-items: center; }
    .field-color-labels{ display: grid; grid-template-columns: 1fr auto 2fr; gap: 18px; align-items: center; margin: 2px 0 -4px; }
    .field-color-labels-text{ font-size: 14px; font-weight: 800; color: var(--text1); }
    .field-color-labels-right{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
    .field-color-labels-mid{ height: 1px; }
    .field-color-eq{ font-size: 28px; font-weight: 700; color: #000; padding: 0 2px 16px; user-select: none;}
    .field-color-items{ grid-column: 1 / -1; display: flex; flex-direction: column; gap: 16px; margin-top: 4px; }
    .field-color-item{ width: 100%; position: relative; padding-right: 44px; }
    [data-remove-color][hidden]{ display: none !important; }
    .field-color-remove{position: absolute;right: 10px;top: 50%;transform: translateY(-50%);width: 28px;height: 28px;border-radius: 999px;border: 0;background: rgba(0,0,0,0.05);color: rgba(0,0,0,.75);font-weight: 900;font-size: 16px;line-height: 1;cursor: pointer;display: grid;place-items: center;box-shadow: none;}
    .field-color-remove:hover{ background: rgba(0,0,0,.12); }
    .field-color-remove:focus{ outline: none; box-shadow: 0 0 0 4px rgba(0,0,0,.10); }
    .field-color-addrow{ display: flex; justify-content: flex-end; margin-top: 4px; }
    .field-color-check{ display: inline-flex; align-items: center; gap: 12px; font-size: 16px; font-weight: 600; color: var(--text1); cursor: pointer; user-select: none; }
    .field-color-check input{ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
    .field-color-check input:checked + .field-color-radio__mark{ border-color: var(--accent); background: #fff; box-shadow: 0 0 0 2px var(--accent); }
    .field-color-check input:checked + .field-color-radio__mark::after{ background: var(--accent); }
    .field-color-check input:focus-visible + .field-color-radio__mark{ box-shadow: 0 0 0 4px rgba(0,0,0,.10); }
    .cmyk-box{background: var(--bg1);border: 2px solid var(--border1);border-radius: 10px;min-height: 52px;box-sizing: border-box;display: grid;grid-template-columns: repeat(4, 1fr);overflow: hidden;}
    .cmyk-cell{ display: grid; place-items: center; padding: 10px 14px; position: relative; }
    .cmyk-cell + .cmyk-cell{ border-left: 2px solid rgba(0,0,0,.16); }
    .cmyk-input{width: 100%;border: 0;outline: none;background: transparent;font-size: 16px;font-weight: 500;color: var(--text1);text-align: center;padding: 0;margin: 0;-moz-appearance: textfield;appearance: textfield;}
    .cmyk-input::-webkit-outer-spin-button, .cmyk-input::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
    .cmyk-suffix{position: absolute;right: 14px;top: 50%;transform: translateY(-50%);font-size: 14px;font-weight: 700;color: var(--text1);pointer-events: none;opacity: .95;}

    .field-filepicker{width: 100%;}
    .field-filepickernative{ position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
    .field-filepickerbox{ position: relative; padding-right: 66px; cursor: pointer; }
    .field-filepickertext{ font-size: 16px; font-weight: var(--fontWeight); color: var(--text1); user-select: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .field-filepickericon{ position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 34px; height: 34px; display: grid; place-items: center; pointer-events: none; }
    .field-filepickericon svg{ width: 22px; height: 22px;}
    .field-comment{width: 100%;box-sizing: border-box;border: 2px solid var(--border1);border-radius: 10px;padding: 14px 14px;font-size: 16px;font-weight: 600;color: var(--text1);resize: vertical;min-height: 140px;outline: none;}
    .field-comment:focus{ box-shadow: 0 0 0 4px rgba(0,0,0,.08);}

    /* Standardzustand: Das Menü ist unsichtbar und lässt Klicks durch */
    .field-menu, .form-datepicker-panel {display: none;opacity: 0;pointer-events: none;transition: opacity 0.2s ease;position: absolute;z-index: 1000;}
    [aria-expanded="true"] .field-menu, [aria-expanded="true"] .form-datepicker-panel {display: block; opacity: 1;pointer-events: auto;}
    .field-menu.drop-up, .form-datepicker-panel.drop-up {top: auto !important;bottom: 100% !important;margin-bottom: 8px !important;}
    .field-box--dropdown,.form-datepicker-box {cursor: pointer !important;}
    .qty-field-box,.form-datepicker-box,.filep__box {cursor: text;}
    .field-box--dropdown,.form-datepicker-box,.filep__box {cursor: pointer !important;}


    .step-screen[hidden]{ display:none; }
    .modal[aria-hidden="false"]{ display: flex;}
    .footer-inner{display: flex;gap: 40px;align-items: flex-start;flex-direction:column;}


/*640px*/
@media (width >= 40rem) {  }
/*768px*/
@media (width >= 48rem) {
        .modal-actions--remove{flex-direction: unset; gap: 18px;}
    .modal-stepper-circle{width:70px;height: 70px;font-size: 24px;}
      .form-grid{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
      .form-datepicker-day{ height: 25px;}
      .form-field--sizing{grid-template-columns: 1fr 1fr;gap: 0 18px;}
      .field-color-grid{grid-template-columns: 1fr 1fr;}
      .field-color-row{grid-template-columns: 1fr auto 1fr;}
      .field-color-labels{grid-template-columns: 1fr auto 1fr;}

}
/*1024px*/
@media (width >= 64rem) {
    .main{padding:40px 40px;}
    .order-detail__content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 30px;
    }
    .order-box:nth-child(1) .order-box-info th{
        width: 170px;
    }

    .order-box:nth-child(1) {
        grid-row: 1 / 3;
        grid-column: 1;
    }
    .order-box:nth-child(2) {
        grid-row: 3 / 5;
        grid-column: 1;
    }
    .order-box:nth-child(3) {
        grid-row: 1 / 4;
        grid-column: 2;
    }

    .modal-dialog{width: 80%;margin: 40px auto;max-width: 64rem;}


    .footer-inner{
        flex-direction: unset;
        justify-content: space-between;
        width: 100%;
    }
}
/*1280px*/
@media (width >= 80rem) {
    .inner-header{
        width: 80%;
        margin: 0 auto;
        max-width: 80rem;
    }

    .dashboard {
        width: 80%;
        max-width: 80rem;
        margin: 0 auto;
    }


    .title{
        margin: 0 auto;
        width: 80%;
        max-width: 80rem;
        font-size:36px;
    }
    .pill {
        font-size: 1.3rem;
        padding: 0px 15px;
    }

    .footer-inner{
        width: 80%;
        margin: 0 auto;
        max-width: 80rem;
    }
}
/*1536px*/
@media (width >= 96rem) {  }