*{box-sizing:border-box}html{background:#f4f4f2}body{margin:0;color:#171717;font:15px/1.5 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}.topbar{min-height:82px;background:#fff;border-bottom:1px solid #deded9;padding:10px max(22px,calc((100vw - 1180px)/2));display:flex;align-items:center;justify-content:space-between;gap:28px;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;flex:0 0 auto}.brand img{display:block;width:154px;height:58px;object-fit:contain;object-position:left center}.topbar nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}.topbar nav a{padding:9px 11px;border-radius:7px;font-size:14px}.topbar nav a:hover,.topbar nav a.active{background:#ededeb}main{max-width:1180px;margin:34px auto;padding:0 22px 60px}.login-main{max-width:none;margin:0;min-height:100vh;padding:8vh 20px;display:flex;align-items:flex-start;justify-content:center;background:#f1f1ef}.login-card{width:min(430px,100%);background:#fff;border:1px solid #d8d8d3;border-radius:16px;padding:34px 38px;box-shadow:0 14px 40px rgba(0,0,0,.06);text-align:center}.login-logo{width:260px;max-width:90%;height:150px;object-fit:contain;margin:0 auto 12px}.login-card h1{font-size:22px;margin:0 0 5px}.login-card form{text-align:left;display:grid;gap:16px;margin-top:25px}h1{font-size:30px;letter-spacing:-.025em;margin:0 0 4px}h2{font-size:18px;margin:0}.muted{color:#6c6c68;margin:3px 0}.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:25px}.actions{display:flex;gap:9px;align-items:center;flex-wrap:wrap}.btn,button{appearance:none;border:1px solid #171717;border-radius:8px;padding:10px 15px;font:600 14px inherit;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.primary{background:#171717!important;color:#fff!important;border-color:#171717!important}.secondary{background:#fff!important;color:#171717!important}.full{width:100%}.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:24px}.metric{background:#fff;border:1px solid #dddcd7;border-radius:12px;padding:19px 20px;transition:.15s}.metric:hover{transform:translateY(-1px);border-color:#aaa}.metric span{display:block;color:#6b6b67;font-size:13px;margin-bottom:7px}.metric strong{font-size:25px;letter-spacing:-.02em}.panel{background:#fff;border:1px solid #dddcd7;border-radius:12px;overflow:hidden}.panel-head{padding:17px 19px;border-bottom:1px solid #e4e4df}.table-wrap{overflow:auto}table{width:100%;border-collapse:collapse}th,td{padding:13px 16px;border-bottom:1px solid #e8e8e3;text-align:left;white-space:nowrap}th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:#6b6b67;background:#fafaf8}tr:last-child td{border-bottom:0}.right{text-align:right}.strong{font-weight:700}.doc-link{font-weight:700;text-decoration:underline;text-decoration-color:#bdbdb8;text-underline-offset:3px}.status{display:inline-block;border-radius:999px;padding:4px 9px;font-size:12px;font-weight:700;background:#ecece8}.status-paid{background:#e1eee3}.status-cancelled{background:#eee1e1}.status-draft{background:#e7e7e7}.empty{text-align:center;color:#777;padding:30px}.flash{max-width:1180px;margin:0 auto 18px;padding:12px 15px;border:1px solid #cfcfca;background:#fff;border-radius:8px}.flash.success{border-color:#9fbea4}.flash.error{border-color:#c99b9b}label{display:flex;flex-direction:column;gap:6px;font-weight:650;font-size:13px}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #c9c9c4;border-radius:7px;background:#fff;color:#171717;font:15px inherit}input:focus,select:focus,textarea:focus{outline:2px solid #171717;outline-offset:1px}textarea{min-height:90px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.wide{grid-column:1/-1}.form-panel{padding:22px}.settings-layout{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:18px}.logo-panel{padding:22px;align-self:start}.logo-panel img{width:100%;height:190px;object-fit:contain;margin:15px 0}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;color:#74746f}.detail-strip{display:grid;grid-template-columns:1fr 2fr 1fr;background:#fff;border:1px solid #dddcd7;border-radius:12px;margin-bottom:16px}.detail-strip>div{padding:14px 18px;border-right:1px solid #e3e3de}.detail-strip>div:last-child{border:0}.detail-strip span{display:block;color:#777;font-size:12px;margin-bottom:4px}.total-row th{font-size:14px;color:#171717;background:#f3f3f0}.status-form{display:flex;align-items:flex-end;gap:10px;margin-top:16px}.status-form label{width:180px}.inline{display:inline}.item{display:grid;grid-template-columns:minmax(220px,1fr) 90px 90px 120px 45px;gap:7px;margin:7px 0}@media(max-width:850px){.topbar{position:static;align-items:flex-start;flex-direction:column}.topbar nav{width:100%}.cards{grid-template-columns:1fr 1fr}.settings-layout{grid-template-columns:1fr}.detail-strip{grid-template-columns:1fr}.detail-strip>div{border-right:0;border-bottom:1px solid #e3e3de}.page-head{align-items:flex-start;flex-direction:column}.grid{grid-template-columns:1fr}.wide{grid-column:auto}}@media(max-width:520px){main{padding-left:14px;padding-right:14px}.cards{grid-template-columns:1fr}.login-card{padding:28px 22px}.brand img{width:140px}.item{grid-template-columns:1fr 1fr}}

/* =========================================================
   V2.6 – Mobile Web-App
   ========================================================= */

.topbar-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.menu-button{
  display:none;
  width:46px;
  height:46px;
  padding:10px;
  border:1px solid #d5d5d0;
  border-radius:10px;
  background:#fff;
  flex-direction:column;
  justify-content:center;
  gap:5px;
}

.menu-button span{
  display:block;
  width:22px;
  height:2px;
  margin:0 auto;
  background:#171717;
  transition:.2s;
}

@media(max-width:850px){

  body{
    font-size:16px;
  }

  .topbar{
    min-height:0;
    position:sticky;
    top:0;
    display:block;
    padding:8px 14px;
  }

  .topbar-row{
    width:100%;
  }

  .brand img{
    width:132px;
    height:50px;
  }

  .menu-button{
    display:flex;
  }

  .topbar nav{
    display:none;
    width:100%;
    padding:8px 0 5px;
    flex-direction:column;
    align-items:stretch;
    gap:3px;
  }

  .topbar nav.mobile-open{
    display:flex;
  }

  .topbar nav a{
    width:100%;
    padding:12px 13px;
    border-radius:8px;
    font-size:16px;
  }

  main{
    margin:22px auto;
    padding:0 14px 50px;
  }

  h1{
    font-size:26px;
  }

  .page-head{
    margin-bottom:18px;
  }

  .actions{
    width:100%;
  }

  .actions .btn,
  .actions button,
  .actions form{
    flex:1 1 auto;
  }

  .actions form button{
    width:100%;
  }

  .btn,
  button{
    min-height:44px;
    padding:11px 14px;
  }

  input,
  select,
  textarea{
    min-height:44px;
    font-size:16px;
  }

  .cards{
    gap:10px;
  }

  .metric{
    padding:16px;
  }

  .metric strong{
    font-size:22px;
  }

  .panel{
    border-radius:10px;
  }

  th,
  td{
    padding:12px;
  }

  .status-form{
    align-items:stretch;
    flex-direction:column;
  }

  .status-form label{
    width:100%;
  }

  .status-form button{
    width:100%;
  }
}

@media(max-width:520px){

  .cards{
    grid-template-columns:1fr 1fr;
  }

  .metric span{
    min-height:38px;
  }

  .metric strong{
    font-size:19px;
  }

  .page-head .actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .page-head .actions .btn,
  .page-head .actions form,
  .page-head .actions button{
    width:100%;
  }

  .detail-strip{
    margin-bottom:12px;
  }
}


/* =========================================================
   V2.6 – Schritt 2: Dokumente & Formulare
   ========================================================= */

.filter-panel{
  padding:16px;
  margin-bottom:16px;
}

.filter-form{
  display:flex;
  gap:10px;
  align-items:flex-end;
  flex-wrap:wrap;
}

.filter-form .search-field{
  min-width:230px;
  flex:1;
}

.document-form{
  display:grid;
  gap:16px;
}

.section-title{
  margin:4px 0 0;
}

.mobile-item label{
  min-width:0;
}

.remove-item{
  align-self:end;
  width:45px;
  min-width:45px;
  padding:8px;
  background:#fff;
}

.add-item{
  justify-self:start;
}

.notes-panel{
  margin-top:2px;
}

.form-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

@media(max-width:680px){

  .filter-form{
    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:stretch;
  }

  .filter-form .search-field{
    min-width:0;
    grid-column:1/-1;
  }

  .filter-form button,
  .filter-form .btn{
    width:100%;
  }

  .mobile-table thead{
    display:none;
  }

  .mobile-table,
  .mobile-table tbody,
  .mobile-table tr,
  .mobile-table td{
    display:block;
    width:100%;
  }

  .mobile-table tr{
    padding:8px 14px;
    border-bottom:1px solid #deded9;
  }

  .mobile-table tr:last-child{
    border-bottom:0;
  }

  .mobile-table td{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:18px;
    padding:7px 0;
    border:0;
    white-space:normal;
    text-align:right;
  }

  .mobile-table td::before{
    content:attr(data-label);
    flex:0 0 82px;
    text-align:left;
    color:#777;
    font-size:12px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
  }

  .mobile-table td[data-label="Nummer"]{
    padding-top:10px;
    font-size:17px;
  }

  .mobile-table td[data-label="Kunde"]{
    align-items:flex-start;
  }

  .mobile-table .empty{
    display:block;
    padding:24px 0;
    text-align:center;
  }

  .mobile-table .empty::before{
    display:none;
  }

  .mobile-item{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    padding:15px;
    margin:0 0 12px;
    background:#fff;
    border:1px solid #dddcd7;
    border-radius:10px;
  }

  .mobile-item .item-description{
    grid-column:1/-1;
  }

  .mobile-item .remove-item{
    width:100%;
    grid-column:1/-1;
    border-color:#c9c9c4;
  }

  .add-item{
    width:100%;
  }

  .form-actions{
    display:grid;
    grid-template-columns:1fr;
  }

  .form-actions button,
  .form-actions .btn{
    width:100%;
  }
}

@media(max-width:390px){

  .filter-form{
    grid-template-columns:1fr;
  }

  .filter-form .search-field{
    grid-column:auto;
  }

  .mobile-item{
    grid-template-columns:1fr;
  }

  .mobile-item .item-description,
  .mobile-item .remove-item{
    grid-column:auto;
  }
}


/* =========================================================
   V2.6 – Schritt 3B: mobile Dokumentansicht
   ========================================================= */

.draft-notice{
  padding:16px;
  margin-top:16px;
}

.draft-notice p{
  margin-bottom:0;
}

.status-panel{
  padding:16px;
  margin-top:16px;
  background:#fff;
  border:1px solid #dddcd7;
  border-radius:12px;
}

@media(max-width:680px){

  .document-head{
    gap:14px;
  }

  .document-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }

  .document-actions .btn,
  .document-actions form,
  .document-actions button{
    width:100%;
  }

  .document-summary{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .document-summary>div{
    border-right:0;
    border-bottom:1px solid #e3e3de;
  }

  .document-summary>div:nth-child(odd){
    border-right:1px solid #e3e3de;
  }

  .document-summary>div:last-child{
    border-bottom:0;
  }

  .item-table td[data-label="Beschreibung"]{
    display:block;
    text-align:left;
    padding:10px 0 12px;
  }

  .item-table td[data-label="Beschreibung"]::before{
    display:block;
    margin-bottom:4px;
  }

  .item-table .mobile-total{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:15px 14px;
    background:#f3f3f0;
  }

  .item-table .mobile-total th{
    display:block;
    padding:0;
    border:0;
    background:transparent;
    font-size:14px;
  }

  .status-panel{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .status-panel label{
    width:100%;
  }

  .status-panel button{
    grid-column:1/-1;
  }
}

@media(max-width:460px){

  .document-actions{
    grid-template-columns:1fr;
  }

  .document-summary{
    grid-template-columns:1fr;
  }

  .document-summary>div,
  .document-summary>div:nth-child(odd){
    border-right:0;
    border-bottom:1px solid #e3e3de;
  }

  .document-summary>div:last-child{
    border-bottom:0;
  }

  .status-panel{
    grid-template-columns:1fr;
  }

  .status-panel button{
    grid-column:auto;
  }
}


/* =========================================================
   V2.6 – Schritt 4: Dashboard mobil
   ========================================================= */

.dashboard-cards{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
}

@media(max-width:680px){

  .dashboard-head{
    gap:14px;
  }

  .dashboard-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .dashboard-actions .primary{
    grid-column:1/-1;
  }

  .dashboard-cards{
    grid-template-columns:1fr 1fr;
  }

  .dashboard-cards .metric{
    min-height:104px;
    display:flex;
    flex-direction:column;
    justify-content:space-between;
  }

  .recent-table td[data-label="Nummer"]{
    font-size:17px;
  }
}

@media(max-width:390px){

  .dashboard-actions{
    grid-template-columns:1fr;
  }

  .dashboard-actions .primary{
    grid-column:auto;
  }

  .dashboard-cards{
    grid-template-columns:1fr;
  }

  .dashboard-cards .metric{
    min-height:0;
  }
}

/* V3.0 Positionskatalog – Desktop-Spalten sauber begrenzen */
@media(min-width:681px){

  .catalog-table{
    width:100%;
    table-layout:fixed;
  }

  .catalog-table th:nth-child(1),
  .catalog-table td:nth-child(1){
    width:auto;
  }

  .catalog-table th:nth-child(2),
  .catalog-table td:nth-child(2){
    width:120px;
  }

  .catalog-table th:nth-child(3),
  .catalog-table td:nth-child(3){
    width:120px;
  }

  .catalog-table th:nth-child(4),
  .catalog-table td:nth-child(4){
    width:100px;
  }

  .catalog-table th:nth-child(5),
  .catalog-table td:nth-child(5){
    width:110px;
  }

  .catalog-table td:first-child{
    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;
    line-height:1.45;
  }
}


/* Gefährliche Aktionen */
button.danger,
.btn.danger {
  background: #b42318;
  color: #fff;
  border-color: #b42318;
}

button.danger:hover,
.btn.danger:hover {
  background: #8f1c13;
  border-color: #8f1c13;
}


/* =========================================================
   V3.1 – Mobile UI
   Dashboard + Positionskatalog
   ========================================================= */

@media (max-width: 680px) {

  /* ---------- Allgemein ---------- */

  .dashboard-head {
    gap: 14px;
    margin-bottom: 18px;
  }

  .dashboard-head h1 {
    margin-bottom: 4px;
  }

  .dashboard-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
  }

  .dashboard-actions .btn {
    width: 100%;
    margin: 0;
    min-height: 44px;
  }

  .dashboard-actions .btn:last-child:nth-child(3) {
    grid-column: 1 / -1;
  }


  /* ---------- Dashboard Jahresauswahl ---------- */

  .dashboard-year-filter {
    padding: 12px 14px;
    margin-bottom: 12px;
  }

  .dashboard-year-filter form {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .dashboard-year-filter label {
    flex: 1;
    margin: 0;
  }

  .dashboard-year-filter select {
    width: 105px;
    margin: 0;
  }


  /* ---------- Dashboard Kennzahlen ---------- */

  .dashboard-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    margin-bottom: 18px;
  }

  .dashboard-cards .metric {
    min-height: 94px;
    padding: 13px;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .dashboard-cards .metric span {
    font-size: 12px;
    line-height: 1.25;
  }

  .dashboard-cards .metric strong {
    font-size: 19px;
    line-height: 1.2;
  }

  .dashboard-cards .metric:last-child {
    grid-column: 1 / -1;
    min-height: 78px;
  }


  /* ---------- Zuletzt erstellt ---------- */

  .recent-table thead {
    display: none;
  }

  .recent-table,
  .recent-table tbody,
  .recent-table tr,
  .recent-table td {
    display: block;
    width: 100%;
  }

  .recent-table tr {
    position: relative;
    padding: 14px 14px 13px;
    border-bottom: 1px solid #e8e8e8;
  }

  .recent-table tr:last-child {
    border-bottom: 0;
  }

  .recent-table td {
    border: 0 !important;
    padding: 0 !important;
  }

  .recent-table td::before {
    display: none !important;
    content: none !important;
  }

  .recent-table td[data-label="Nummer"] {
    padding-right: 90px !important;
    margin-bottom: 4px;
    font-size: 16px;
    font-weight: 700;
  }

  .recent-table td[data-label="Typ"] {
    display: inline;
    font-size: 12px;
    color: #777;
  }

  .recent-table td[data-label="Typ"]::after {
    content: " · ";
  }

  .recent-table td[data-label="Datum"] {
    display: inline;
    font-size: 12px;
    color: #777;
  }

  .recent-table td[data-label="Kunde"] {
    margin-top: 7px;
    padding-right: 5px !important;
    font-size: 14px;
    line-height: 1.35;
  }

  .recent-table td[data-label="Status"] {
    position: absolute;
    top: 13px;
    right: 13px;
    width: auto;
  }


  /* ---------- Positionskatalog ---------- */

  .catalog-table thead {
    display: none;
  }

  .catalog-table,
  .catalog-table tbody,
  .catalog-table tr,
  .catalog-table td {
    display: block;
    width: 100%;
  }

  .catalog-table tr {
    padding: 16px;
    border-bottom: 1px solid #e5e5e5;
  }

  .catalog-table tr:last-child {
    border-bottom: 0;
  }

  .catalog-table td {
    border: 0 !important;
    padding: 0 !important;
    text-align: left !important;
  }

  .catalog-table td::before {
    display: none !important;
    content: none !important;
  }

  .catalog-table td[data-label="Bezeichnung"] {
    margin-bottom: 13px;
  }

  .catalog-table td[data-label="Bezeichnung"] strong {
    display: block;
    font-size: 17px;
    line-height: 1.25;
    margin-bottom: 6px;
  }

  .catalog-table td[data-label="Bezeichnung"] small {
    display: block;
    font-size: 13px;
    line-height: 1.45;
    color: #666;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .catalog-table td[data-label="Einheit"],
  .catalog-table td[data-label="Preis"],
  .catalog-table td[data-label="Status"] {
    display: inline-block;
    width: auto;
    margin-right: 7px;
    margin-bottom: 10px;
    padding: 5px 9px !important;
    background: #f4f4f4;
    border-radius: 7px;
    font-size: 12px;
  }

  .catalog-table td[data-label="Preis"] {
    font-weight: 700;
  }

  .catalog-table td[data-label="Status"] {
    color: #555;
  }

  .catalog-table td[data-label=""] {
    clear: both;
    padding-top: 3px !important;
  }

  .catalog-table td[data-label=""] a {
    display: inline-block;
    padding: 7px 0;
    font-weight: 600;
  }

}

/* =========================================================
   V3.1 – Mobile Feinschliff
   Zuletzt erstellt + Positionskatalog
   ========================================================= */

@media (max-width: 680px) {

  /* Zuletzt erstellt: kompakter Dokumentblock */

  .recent-table tr {
    padding: 13px 14px 14px;
  }

  .recent-table td[data-label="Nummer"] {
    padding-right: 100px !important;
    margin-bottom: 3px;
    font-size: 17px;
    line-height: 1.25;
    text-align: left !important;
  }

  .recent-table td[data-label="Typ"] {
    display: inline !important;
    font-size: 12px;
    line-height: 1.3;
    color: #777;
    text-align: left !important;
  }

  .recent-table td[data-label="Typ"]::after {
    content: " · " !important;
    display: inline !important;
  }

  .recent-table td[data-label="Datum"] {
    display: inline !important;
    font-size: 12px;
    line-height: 1.3;
    color: #777;
    text-align: left !important;
  }

  .recent-table td[data-label="Kunde"] {
    margin-top: 7px;
    padding-right: 0 !important;
    font-size: 14px;
    line-height: 1.35;
    text-align: left !important;
  }

  .recent-table td[data-label="Status"] {
    position: absolute;
    top: 12px;
    right: 14px;
    width: auto !important;
    text-align: right !important;
  }


  /* Positionskatalog etwas kompakter */

  .catalog-table tr {
    padding: 15px 16px 14px;
  }

  .catalog-table td[data-label="Bezeichnung"] {
    margin-bottom: 11px;
  }

  .catalog-table td[data-label=""] {
    padding-top: 0 !important;
  }

  .catalog-table td[data-label=""] a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    margin-top: 2px;
    padding: 7px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }

}

/* =========================================================
   V3.1 – Mobile UI
   Kunden + Angebote/Rechnungen
   ========================================================= */

@media (max-width: 680px) {

  /* ---------- Seitenkopf ---------- */

  .page-head {
    gap: 12px;
    margin-bottom: 16px;
  }

  .page-head .actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: 100%;
  }

  .page-head .actions .btn {
    width: 100%;
    margin: 0;
    min-height: 44px;
  }


  /* ---------- Filter Dokumente ---------- */

  .filter-panel {
    padding: 14px;
  }

  .filter-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .filter-form .search-field {
    grid-column: 1 / -1;
  }

  .filter-form label {
    margin: 0;
  }

  .filter-form input,
  .filter-form select {
    width: 100%;
    margin-top: 5px;
  }

  .filter-form button,
  .filter-form .btn {
    width: 100%;
    min-height: 42px;
    margin: 0;
  }


  /* ---------- Kunden ---------- */

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) thead {
    display: none;
  }

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table),
  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) tbody,
  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) tr,
  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) td {
    display: block;
    width: 100%;
  }

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) tr {
    padding: 15px 16px;
    border-bottom: 1px solid #e5e5e5;
  }

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) tr:last-child {
    border-bottom: 0;
  }

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) td {
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) td::before {
    display: none !important;
    content: none !important;
  }

  .panel > .mobile-table td[data-label="Nr."] {
    margin-bottom: 5px;
    font-size: 12px;
    color: #777;
  }

  .panel > .mobile-table td[data-label="Name"] {
    margin-bottom: 5px;
    font-size: 16px;
    line-height: 1.3;
  }

  .panel > .mobile-table td[data-label="Ort"] {
    margin-bottom: 9px;
    font-size: 13px;
    color: #666;
  }

  .panel > .mobile-table td[data-label=""] a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 7px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
  }


  /* ---------- Dokumentliste ---------- */

  .document-table thead {
    display: none;
  }

  .document-table,
  .document-table tbody,
  .document-table tr,
  .document-table td {
    display: block;
    width: 100%;
  }

  .document-table tr {
    position: relative;
    padding: 15px 16px;
    border-bottom: 1px solid #e5e5e5;
  }

  .document-table tr:last-child {
    border-bottom: 0;
  }

  .document-table td {
    padding: 0 !important;
    border: 0 !important;
    text-align: left !important;
  }

  .document-table td::before {
    display: none !important;
    content: none !important;
  }

  .document-table td[data-label="Nummer"] {
    padding-right: 105px !important;
    margin-bottom: 3px;
    font-size: 17px;
    font-weight: 700;
  }

  .document-table td[data-label="Typ"] {
    margin-bottom: 7px;
    font-size: 12px;
    color: #777;
  }

  .document-table td[data-label="Typ"] .muted {
    display: inline;
    margin-left: 4px;
  }

  .document-table td[data-label="Kunde"] {
    padding-right: 5px !important;
    margin-bottom: 11px;
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
  }

  .document-table td[data-label="Datum"] {
    display: inline-block;
    width: auto;
    margin-right: 12px;
    font-size: 12px;
    color: #666;
  }

  .document-table td[data-label="Datum"]::after {
    content: "";
  }

  .document-table td[data-label="Fällig"] {
    display: block;
    width: auto;
    margin-top: 5px;
    font-size: 12px;
    color: #777;
  }

  .document-table td[data-label="Fällig"]::before {
    display: inline !important;
    content: "Fällig: " !important;
  }

  .document-table td[data-label="Status"] {
    position: absolute;
    top: 14px;
    right: 15px;
    width: auto !important;
  }

  .document-table td[data-label="Summe"] {
    position: absolute;
    right: 16px;
    bottom: 15px;
    width: auto !important;
    font-size: 15px;
    font-weight: 700;
    text-align: right !important;
  }

}

/* =========================================================
   V3.1 – Mobile UI
   Angebot/Rechnung erstellen + bearbeiten
   ========================================================= */

@media (max-width: 680px) {

  /* ---------- Dokumentformular ---------- */

  .document-form .form-panel {
    padding: 15px;
  }

  .document-form .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .document-form .grid .wide {
    grid-column: 1 / -1;
  }

  .document-form label {
    margin: 0;
    font-size: 13px;
  }

  .document-form input,
  .document-form select,
  .document-form textarea {
    width: 100%;
    margin-top: 5px;
    font-size: 16px;
  }

  .document-form input,
  .document-form select {
    min-height: 44px;
  }

  .section-title {
    margin: 22px 0 10px;
  }


  /* ---------- Positionskatalog-Auswahl ---------- */

  .catalog-picker {
    display: block;
    margin-bottom: 12px;
  }

  .catalog-picker label {
    display: block;
    width: 100%;
  }

  .catalog-picker select {
    width: 100%;
  }

  .catalog-picker .btn {
    width: 100%;
    min-height: 44px;
    margin-top: 10px;
  }


  /* ---------- Einzelne Position ---------- */

  #items {
    display: block;
  }

  .document-form .mobile-item {
    position: relative;
    display: grid;
    grid-template-columns: 0.8fr 1fr 1.2fr;
    gap: 11px 9px;
    margin-bottom: 12px;
    padding: 16px 14px 15px;
    border: 1px solid #e1e1e1;
    border-radius: 12px;
    background: #fff;
  }

  .document-form .mobile-item .item-description {
    grid-column: 1 / -1;
    padding-right: 34px;
  }

  .document-form .mobile-item label:nth-of-type(2) {
    grid-column: 1 / -1;
    padding-right: 34px;
  }

  .document-form .mobile-item input {
    min-width: 0;
  }

  .document-form .mobile-item input[name="quantity[]"],
  .document-form .mobile-item input[name="unit[]"],
  .document-form .mobile-item input[name="unit_price[]"] {
    text-align: left;
  }


  /* Löschen oben rechts */

  .document-form .mobile-item .remove-item {
    position: absolute;
    top: 11px;
    right: 11px;
    width: 34px;
    height: 34px;
    min-width: 34px;
    padding: 0;
    margin: 0;
    border: 1px solid #e1e1e1;
    border-radius: 50%;
    background: #f7f7f7;
    font-size: 23px;
    line-height: 30px;
    font-weight: 400;
  }


  /* ---------- Position hinzufügen ---------- */

  .document-form .add-item {
    width: 100%;
    min-height: 44px;
    margin: 2px 0 16px;
  }


  /* ---------- Bemerkung ---------- */

  .document-form .notes-panel {
    margin-top: 0;
  }

  .document-form .notes-panel textarea {
    min-height: 100px;
    resize: vertical;
  }


  /* ---------- Abschluss ---------- */

  .document-form .form-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 14px;
  }

  .document-form .form-actions button,
  .document-form .form-actions .btn {
    width: 100%;
    min-height: 48px;
    margin: 0;
  }

}


/* Sehr schmale Smartphones */
@media (max-width: 390px) {

  .document-form .grid {
    grid-template-columns: 1fr;
  }

  .document-form .grid .wide {
    grid-column: auto;
  }

  .document-form .mobile-item {
    grid-template-columns: 0.8fr 1fr 1.2fr;
    padding-left: 12px;
    padding-right: 12px;
  }

  .document-form .mobile-item label {
    font-size: 12px;
  }

}

/* =========================================================
   V3.1 – Mobile Formular Feinschliff
   kompaktere Abstände
   ========================================================= */

@media (max-width: 680px) {

  .document-form .form-panel {
    padding: 14px;
  }

  .document-form .grid {
    gap: 9px 12px;
  }

  .document-form label {
    line-height: 1.25;
  }

  .document-form input,
  .document-form select {
    min-height: 42px;
  }

  .document-form .grid input,
  .document-form .grid select {
    margin-top: 4px;
  }

  .section-title {
    margin: 18px 0 8px;
  }

  .catalog-picker {
    margin-bottom: 10px;
  }

  .catalog-picker .btn {
    min-height: 42px;
    margin-top: 8px;
  }

  .document-form .mobile-item {
    gap: 8px 9px;
    padding: 14px 13px 13px;
    margin-bottom: 10px;
  }

  .document-form .mobile-item .item-description {
    margin-bottom: 0;
  }

  .document-form .mobile-item input {
    min-height: 42px;
  }

  .document-form .add-item {
    min-height: 42px;
    margin-bottom: 12px;
  }

  .document-form .notes-panel textarea {
    min-height: 85px;
  }

  .document-form .form-actions {
    margin-top: 10px;
  }

}

/* =========================================================
   V3.9 – Mobile Polish
   Kompaktere Oberfläche für Smartphone
   ========================================================= */

@media (max-width: 680px) {

  /* ---------- Allgemein ---------- */

  main {
    padding-top: 12px;
  }

  h1 {
    margin-top: 6px;
    margin-bottom: 14px;
  }

  .panel {
    margin-bottom: 14px;
  }


  /* ---------- Header ---------- */

  header,
  .header {
    min-height: 0;
  }

  header img,
  .header img {
    max-height: 54px;
    width: auto;
  }


  /* ---------- Dashboard ---------- */

  .quick-actions,
  .dashboard-actions {
    gap: 8px;
  }

  .quick-actions .btn,
  .dashboard-actions .btn {
    min-height: 42px;
    padding-top: 9px;
    padding-bottom: 9px;
  }


  /* ---------- Filter ---------- */

  .filter-form {
    gap: 8px;
  }

  .filter-form input,
  .filter-form select {
    min-height: 40px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

  .filter-form button,
  .filter-form .btn {
    min-height: 38px;
    padding-top: 7px;
    padding-bottom: 7px;
  }


  /* ---------- Kunden ---------- */

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) tr {
    padding: 11px 14px;
  }

  .panel > .mobile-table td[data-label="Nr."] {
    margin-bottom: 3px;
  }

  .panel > .mobile-table td[data-label="Name"] {
    margin-bottom: 3px;
  }

  .panel > .mobile-table td[data-label="Ort"] {
    margin-bottom: 6px;
  }

  .panel > .mobile-table td[data-label=""] a {
    min-height: 32px;
    padding: 5px 10px;
  }


  /* ---------- Dokumentliste ---------- */

  .document-table tr {
    padding: 11px 14px;
  }

  .document-table td[data-label="Nummer"] {
    margin-bottom: 2px;
  }

  .document-table td[data-label="Typ"] {
    margin-bottom: 5px;
  }

  .document-table td[data-label="Kunde"] {
    margin-bottom: 7px;
  }

  .document-table td[data-label="Fällig"] {
    margin-top: 3px;
  }

  .document-table td[data-label="Status"] {
    top: 11px;
    right: 13px;
  }

  .document-table td[data-label="Summe"] {
    right: 14px;
    bottom: 11px;
  }

}

/* =========================================================
   V3.9 – Mobile Polish Schritt 2
   Kunden + Positionskatalog
   ========================================================= */

@media (max-width: 680px) {

  /* ---------- Kundenkarten kompakter ---------- */

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) tr {
    padding: 9px 14px 10px;
  }

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table) td {
    line-height: 1.25;
  }

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table)
  td[data-label="Nr."] {
    margin-bottom: 1px;
  }

  .panel > .mobile-table:not(.catalog-table):not(.recent-table):not(.document-table)
  td[data-label="Ort"] {
    margin-bottom: 4px;
  }


  /* ---------- Positionskatalog kompakter ---------- */

  .catalog-table tr {
    padding: 12px 14px 13px;
  }

  .catalog-table td {
    margin-bottom: 5px;
  }

  .catalog-table td[data-label="Bezeichnung"] {
    margin-bottom: 5px;
    line-height: 1.2;
  }

  .catalog-table td[data-label="Beschreibung"] {
    margin-top: 2px;
    margin-bottom: 8px;
    line-height: 1.35;
  }

  .catalog-table td[data-label="Einheit"],
  .catalog-table td[data-label="Preis"],
  .catalog-table td[data-label="Status"] {
    margin-top: 0;
    margin-bottom: 7px;
  }

  .catalog-table td[data-label=""] {
    margin-top: 1px;
    margin-bottom: 0;
  }

  .catalog-table td[data-label=""] a,
  .catalog-table td[data-label=""] .btn {
    min-height: 34px;
    padding: 6px 11px;
  }

}

/* =========================================================
   V3.9 – Mobile Polish Schritt 3
   Dokumentformular: Datumsfelder kompakter
   ========================================================= */

@media (max-width: 680px) {

  .document-form input[type="date"] {
    min-height: 48px;
    height: 48px;
    padding-top: 8px;
    padding-bottom: 8px;
  }

}

/* =========================================================
   V3.9 – Mobile Polish Schritt 3 FIX
   iPhone Datumsfelder
   ========================================================= */

@media (max-width: 680px) {

  .document-form .grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  .document-form .grid label {
    min-width: 0;
  }

  .document-form input[type="date"] {
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 6px 8px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
  }

}

/* =========================================================
   V3.9 – Mobile Polish Schritt 4
   Dokumenttext besser sichtbar
   ========================================================= */

@media (max-width: 680px) {

  .document-form textarea[name="document_text"] {
    min-height: 220px;
    resize: vertical;
  }

}