/* app-v6141.css — v6.14.0/v6.14.1 UI additions.
   Imports the existing stylesheet and adds only the new components so the
   large base file stays untouched. Matches existing tokens: panel #101010,
   border #262626, inputs #070a0e / #2b3441, radius .75rem. */
@import "app-v68.css";

/* ---- Manuelle Drohne hinzufügen (Inventar) ---- */
.manual-drone-add{margin:1rem 0 1.5rem;padding:1.15rem}
.manual-drone-add h3{margin:0 0 .35rem;font-size:1.05rem;font-weight:730}
.manual-drone-add p{margin:0 0 .9rem;color:#7e7e7e;font-size:.84rem}
.manual-drone-form{display:grid;grid-template-columns:1fr 1fr 1fr auto;align-items:end;gap:.7rem}
.manual-drone-form label{display:block;color:#718096;font-size:.68rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em}
.manual-drone-form input{display:block;width:100%;margin-top:.38rem;border:1px solid #2b3441;border-radius:.75rem;background:#070a0e;color:#f5f7fa;padding:.72rem .78rem;font:inherit}
.manual-drone-form input:focus{border-color:#66758a;outline:none;box-shadow:0 0 0 3px rgba(102,117,138,.13)}
.manual-drone-form button{border-radius:.75rem;background:#fff;color:#050505;font-weight:730;padding:.72rem 1.1rem;cursor:pointer;white-space:nowrap}
.manual-drone-form button:hover{opacity:.9}

/* ---- Manueller Flug (Flugliste) ---- */
.manual-flight-panel{margin:0 0 1rem;border:1px solid #262626;border-radius:1rem;background:#101010;padding:.5rem 1rem}
.manual-flight-panel summary{cursor:pointer;font-weight:730;padding:.55rem 0;list-style:none}
.manual-flight-panel summary::-webkit-details-marker{display:none}
.manual-flight-panel[open] summary{border-bottom:1px solid #242424;margin-bottom:.85rem}
.manual-flight-form{display:grid;grid-template-columns:1fr auto auto;align-items:end;gap:.7rem;padding-bottom:.6rem}
.manual-flight-form label{display:block;color:#718096;font-size:.68rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em}
.manual-flight-form select{display:block;width:100%;margin-top:.38rem;border:1px solid #2b3441;border-radius:.75rem;background:#070a0e;color:#f5f7fa;padding:.72rem .78rem;font:inherit}
.manual-flight-form select:focus{border-color:#66758a;outline:none;box-shadow:0 0 0 3px rgba(102,117,138,.13)}
.manual-flight-pilot{margin:0;color:#9a9a9a;font-size:.8rem;padding-bottom:.72rem}
.manual-flight-form button{border-radius:.75rem;background:#fff;color:#050505;font-weight:730;padding:.72rem 1.1rem;cursor:pointer;white-space:nowrap}
.manual-flight-form button:hover{opacity:.9}

/* ---- Pilotenzuweisung + Flug beenden (Flugdetail) ---- */
.flight-fact-assign,.flight-fact-stop{grid-column:1/-1}
.pilot-assign-form,.flight-fact-stop form{display:flex;gap:.55rem;margin-top:.35rem;flex-wrap:wrap}
.pilot-assign-form select{flex:1;min-width:12rem;border:1px solid #2b3441;border-radius:.75rem;background:#070a0e;color:#f5f7fa;padding:.6rem .7rem;font:inherit}
.pilot-assign-form select:focus{border-color:#66758a;outline:none;box-shadow:0 0 0 3px rgba(102,117,138,.13)}
.pilot-assign-form button{border-radius:.75rem;background:#fff;color:#050505;font-weight:730;padding:.6rem 1rem;cursor:pointer;white-space:nowrap}
.flight-fact-stop button{border-radius:.75rem;background:#432020;color:#f7dede;border:1px solid #6a2a2a;font-weight:730;padding:.6rem 1rem;cursor:pointer}
.flight-fact-stop button:hover{background:#512626}

@media(max-width:760px){
  .manual-drone-form,.manual-flight-form{grid-template-columns:1fr}
  .manual-flight-form button,.manual-drone-form button{width:100%}
}

/* ---- v6.15 Missionen ---- */
.mission-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:.85rem}
.mission-card{display:block;padding:1.15rem;text-decoration:none;color:inherit;transition:border-color .15s}
.mission-card:hover{border-color:#454545}
.mission-card-head{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.mission-card-head h2{font-size:1.05rem;font-weight:730;margin:0}
.mission-status{font-size:.66rem;font-weight:750;text-transform:uppercase;letter-spacing:.05em;padding:.25rem .6rem;border-radius:.6rem;border:1px solid #3a3a3a;color:#9a9a9a;white-space:nowrap}
.mission-status-active{border-color:#2f6a3f;background:#0e1c12;color:#7fd39a}
.mission-status-closed{border-color:#3a3a3a;background:#141414;color:#9a9a9a}
.mission-facts{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;margin:.9rem 0 0}
.mission-facts div{padding:.6rem;border:1px solid #222933;border-radius:.65rem;background:#080b10}
.mission-facts dt{color:#667085;font-size:.64rem;text-transform:uppercase;letter-spacing:.06em}
.mission-facts dd{margin:.24rem 0 0;font-weight:700}
.mission-detail-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:1rem}
.mission-flights-card,.mission-comments-card{padding:1.15rem}
.mission-flight-list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.5rem}
.mission-flight-list a{display:grid;grid-template-columns:auto auto 1fr auto;gap:.75rem;padding:.7rem;border:1px solid #222933;border-radius:.65rem;background:#080b10;color:inherit;text-decoration:none;font-size:.84rem}
.mission-flight-list a:hover{border-color:#454545}
.mission-empty{color:#7e7e7e;font-size:.86rem;margin:.75rem 0 0}
.mission-close-form{margin-top:1rem}
.mission-close-form button{border-radius:.75rem;background:#432020;color:#f7dede;border:1px solid #6a2a2a;font-weight:730;padding:.6rem 1rem;cursor:pointer}
.mission-close-form button:hover{background:#512626}
.mission-comment-hint{color:#7e7e7e;font-size:.78rem;margin:.35rem 0 0}
.mission-comment-list{list-style:none;margin:.85rem 0;padding:0;display:grid;gap:.75rem}
.mission-comment{padding:.8rem;border:1px solid #222933;border-radius:.65rem;background:#080b10}
.mission-comment-meta{display:flex;justify-content:space-between;gap:.75rem;margin-bottom:.35rem}
.mission-comment-meta strong{font-size:.86rem;font-weight:730}
.mission-comment-meta time{color:#667085;font-size:.74rem}
.mission-comment-body{font-size:.88rem;color:#d8d8d8;overflow-wrap:anywhere}
.mission-comment-form{margin-top:1rem;display:grid;gap:.5rem}
.mission-comment-form label{color:#718096;font-size:.68rem;font-weight:750;text-transform:uppercase;letter-spacing:.055em}
.mission-comment-form textarea{width:100%;border:1px solid #2b3441;border-radius:.75rem;background:#070a0e;color:#f5f7fa;padding:.72rem .78rem;font:inherit;resize:vertical}
.mission-comment-form textarea:focus{border-color:#66758a;outline:none;box-shadow:0 0 0 3px rgba(102,117,138,.13)}
.mission-comment-form button{justify-self:start;border-radius:.75rem;background:#fff;color:#050505;font-weight:730;padding:.6rem 1.1rem;cursor:pointer}
.empty-state{padding:1.5rem;text-align:center;color:#7e7e7e}
@media(max-width:900px){.mission-detail-grid{grid-template-columns:1fr}}

/* ---- v6.16 Missionsbilder ---- */
.mission-attachments-card{padding:1.15rem}
.mission-attachment-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.6rem;margin:.75rem 0}
.mission-attachment{position:relative;display:block;border-radius:.6rem;overflow:hidden;border:1px solid #222933;background:#080b10;aspect-ratio:4/3}
.mission-attachment img{width:100%;height:100%;object-fit:cover;display:block}
.mission-attachment-caption{position:absolute;left:0;right:0;bottom:0;padding:.3rem .45rem;font-size:.7rem;background:linear-gradient(transparent,rgba(0,0,0,.8));color:#f0f0f0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mission-attachment-upload,.mission-upload-form{display:grid;gap:.5rem;margin-top:.85rem}
.mission-attachment-upload input[type=file],.mission-upload-form input[type=file]{color:#c8c8c8;font-size:.82rem}
.mission-attachment-upload input[type=text],.mission-upload-form input[type=text]{border:1px solid #2b3441;border-radius:.75rem;background:#070a0e;color:#f5f7fa;padding:.6rem .7rem;font:inherit}
.mission-attachment-upload button,.mission-upload-form button{justify-self:start;border-radius:.75rem;background:#fff;color:#050505;font-weight:730;padding:.55rem 1rem;cursor:pointer}
.mission-upload-block{margin:1.25rem 0;padding-top:1.25rem;border-top:1px solid #242424;text-align:left}
.mission-upload-block h2{font-size:1rem;margin:0 0 .3rem}
.mission-upload-hint{color:#7e7e7e;font-size:.8rem;margin:0 0 .6rem}
.share-mission-wrap{max-width:960px;margin:0 auto;padding:1.5rem 1rem}

/* ---- Fix: iOS date inputs überlaufen die Filter-Card ---- */
.flight-filter-card{max-width:100%}
.flight-filter-field{min-width:0}
.flight-filter-field input[type="date"]{
  width:100%;
  min-width:0;
  max-width:100%;
  box-sizing:border-box;
  -webkit-appearance:none;
  appearance:none;
}

/* ---- Fix: file inputs als Button statt nackter Link/Text ---- */
.mission-attachment-upload input[type="file"],
.mission-upload-form input[type="file"]{
  display:block;
  width:100%;
  box-sizing:border-box;
}
.mission-attachment-upload input[type="file"]::file-selector-button,
.mission-upload-form input[type="file"]::file-selector-button{
  margin-right:.6rem;
  border:1px solid #2b3441;
  border-radius:.6rem;
  background:#1a1f28;
  color:#f5f7fa;
  font:inherit;
  font-weight:650;
  padding:.5rem .9rem;
  cursor:pointer;
  transition:background .15s;
}
.mission-attachment-upload input[type="file"]::file-selector-button:hover,
.mission-upload-form input[type="file"]::file-selector-button:hover{
  background:#242b36;
}

/* ---- Fix: Vollbild-Button nach links oben (lief rechts über den Rand) ---- */
.dc-video-fullscreen-button{
  right:auto !important;
  bottom:auto !important;
  left:max(.75rem, env(safe-area-inset-left)) !important;
  top:max(.75rem, env(safe-area-inset-top)) !important;
}

/* ---- Fix: schwarze Ränder ober/unterhalb des Videos auf Mobile ---- */
/* Auf schmalen Screens soll das Video volle Breite nutzen und nur so hoch */
/* sein wie sein Seitenverhältnis vorgibt — keine erzwungene min-height, die */
/* schwarze Balken erzeugt. Gilt für Lage (dashboard) und geteilten Stream.  */
@media (max-width: 760px) {
  .clean-live-grid .video-wrap,
  .clean-live-grid.live-count-1 .video-wrap,
  .public-stream-card .video-wrap,
  .public-live-shell .video-wrap {
    min-height: 0 !important;
    aspect-ratio: 16 / 9;
  }
  .clean-live-grid .video-wrap video,
  .clean-live-grid.live-count-1 video,
  .public-stream-card .video-wrap video,
  .public-live-shell .video-wrap video {
    min-height: 0 !important;
    height: 100%;
    width: 100%;
    object-fit: contain;
  }
}

/* ---- v7.1 Checklisten-Verwaltung ---- */
/* .card bringt selbst keinen Innenabstand mit (andere Seiten setzen ihn per
   Utility-Klasse). Für die Checklisten-Karten hier zentral ergänzen. */
.checklist-intro-card,.checklist-items-card,.checklist-add-card,.mission-checks-card{padding:1.15rem;margin-bottom:1rem}
.checklist-items-card h2,.checklist-add-card h2,.mission-checks-card h2{margin:0 0 .35rem;font-size:1.15rem}
.checklist-intro-card{margin-top:1rem}
.checklist-intro-form{display:grid;gap:.5rem;grid-template-columns:1fr auto;align-items:center}
.checklist-intro-form label{grid-column:1/-1;font-size:.78rem;font-weight:700;letter-spacing:.04em;color:#8a94a6;margin:0}
.checklist-intro-form input{border:1px solid #2b3441;border-radius:.75rem;background:#070a0e;color:#f5f7fa;padding:.6rem .7rem;font:inherit}
.checklist-intro-form button{border-radius:.75rem;background:#fff;color:#050505;font-weight:730;padding:.6rem 1.1rem;cursor:pointer}
.checklist-item-list{list-style:none;margin:.75rem 0 0;padding:0;display:grid;gap:.75rem;counter-reset:cl}
.checklist-item{display:grid;grid-template-columns:1fr auto;gap:.6rem;padding:.85rem;border:1px solid #222933;border-radius:.85rem;background:#0b0f15}
.checklist-item-form{display:grid;gap:.5rem}
.checklist-item-main{display:grid;gap:.4rem}
.checklist-item-main input,.checklist-add-form input[type=text],.checklist-options textarea{border:1px solid #2b3441;border-radius:.6rem;background:#070a0e;color:#f5f7fa;padding:.5rem .6rem;font:inherit;width:100%;box-sizing:border-box}
.checklist-item-meta{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.checklist-select{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:#8a94a6}
.checklist-select select{border:1px solid #2b3441;border-radius:.6rem;background:#070a0e;color:#f5f7fa;padding:.4rem .5rem;font:inherit}
.checklist-toggle{display:flex;align-items:center;gap:.35rem;font-size:.8rem;color:#c8cfda}
.checklist-options{margin-top:.3rem}
.checklist-options label{display:grid;gap:.3rem;font-size:.75rem;color:#8a94a6}
.btn-small{border-radius:.6rem;background:#1e2632;color:#f5f7fa;border:1px solid #2b3441;font-weight:650;padding:.4rem .8rem;cursor:pointer;font-size:.82rem}
.checklist-item-actions{display:flex;flex-direction:column;gap:.3rem;align-items:center}
.btn-icon{width:2rem;height:2rem;border-radius:.5rem;border:1px solid #2b3441;background:#141a22;color:#f5f7fa;cursor:pointer;font-size:1rem;line-height:1}
.btn-icon:disabled{opacity:.3;cursor:default}
.btn-icon.danger{border-color:#4a2626;background:#1e1010;color:#ffb7b7}
.checklist-add-form{display:grid;gap:.6rem;margin-top:.6rem}
.checklist-add-meta{display:flex;flex-wrap:wrap;gap:.9rem;align-items:center}
.mission-check-columns{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:.6rem}
.mission-check-block h3{font-size:.95rem;margin:0 0 .2rem}
.mission-check-meta{color:#7e8794;font-size:.78rem;margin:0 0 .5rem}
.mission-check-answers{margin:0;display:grid;gap:.35rem}
.mission-check-answers dt{font-size:.8rem;color:#c8cfda}
.mission-check-answers dd{margin:0 0 .3rem;font-size:.85rem;font-weight:650;color:#f5f7fa}
.mission-check-answers dd.ok{color:#7ee29b}
.mission-check-answers dd.missing{color:#ff9a9a}
.mission-check-notes{margin-top:.6rem;font-size:.85rem;color:#c8cfda}
.mission-checklist-intro{color:#9aa3b0;font-size:.85rem;margin:0 0 .6rem}
.mission-check-field{display:grid;gap:.3rem;margin:.5rem 0}
.mission-check-label{font-weight:650}
.mission-check-field textarea,.mission-check-field select{border:1px solid #2b3441;border-radius:.6rem;background:#070a0e;color:#f5f7fa;padding:.5rem .6rem;font:inherit;width:100%;box-sizing:border-box}
.checklist-hint{color:#7e8794;font-size:.8rem;margin:.2rem 0 .6rem}
.checklist-item{cursor:default}
.checklist-item.is-dragging{opacity:.45;border-color:#3f7fb5}
.checklist-item-list.is-sorting .checklist-item{transition:transform .12s}

/* ---- v7.1 Griff, Speichern-Knopf und Änderungsprotokoll ---- */
.checklist-head-side{display:grid;gap:.4rem;justify-items:end}
.checklist-updated{color:#7e8794;font-size:.78rem;margin:0}
.checklist-updated strong{color:#c8cfda}
.checklist-order-bar{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between;margin:.2rem 0 .8rem}
.checklist-order-bar .checklist-hint{margin:0;flex:1 1 18rem;line-height:1.5}
.checklist-order-bar button[disabled]{opacity:.45;cursor:default}

/* Griff: drei Balken wie ein Menüsymbol, klar als Ziehpunkt erkennbar */
.checklist-grip{
  align-self:start;
  width:1.6rem;height:2rem;
  border-radius:.45rem;
  cursor:grab;
  background-image:linear-gradient(#5b6675,#5b6675),linear-gradient(#5b6675,#5b6675),linear-gradient(#5b6675,#5b6675);
  background-size:.9rem 2px;
  background-position:center calc(50% - 5px),center 50%,center calc(50% + 5px);
  background-repeat:no-repeat;
  transition:background-color .12s;
  touch-action:none;
}
.checklist-grip:hover{background-color:#1a2028}
.checklist-grip:active{cursor:grabbing}
.checklist-grip-inline{
  display:inline-block;width:.85rem;height:.7rem;vertical-align:-1px;
  background-image:linear-gradient(#8a94a6,#8a94a6),linear-gradient(#8a94a6,#8a94a6),linear-gradient(#8a94a6,#8a94a6);
  background-size:.85rem 2px;background-position:0 0,0 4px,0 8px;background-repeat:no-repeat;
}
/* Eintrag hat jetzt drei Spalten: Griff, Inhalt, Aktionen */
.checklist-item{grid-template-columns:auto 1fr auto}
.checklist-item-list.has-unsaved-order{
  border-left:2px solid #3f7fb5;padding-left:.6rem;margin-left:-.6rem;
}

/* Änderungsprotokoll */
.checklist-log-card{padding:1.15rem;margin-bottom:1rem}
.checklist-log{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.6rem}
.checklist-log-entry{border:1px solid #1e242c;border-radius:.7rem;background:#0b0f15;padding:.7rem .85rem}
.checklist-log-head{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:space-between;align-items:baseline}
.checklist-log-head strong{font-size:.9rem}
.checklist-log-head span{color:#7e8794;font-size:.76rem}
.checklist-log-label{margin:.3rem 0 0;font-size:.85rem;color:#c8cfda}
.checklist-log-diff{margin:.25rem 0 0;font-size:.8rem;color:#9aa3b0;line-height:1.45}
.checklist-log-diff .was,.checklist-log-diff .now{
  display:inline-block;min-width:4.2rem;font-size:.68rem;font-weight:700;
  letter-spacing:.04em;text-transform:uppercase;
}
.checklist-log-diff .was{color:#c98a8a}
.checklist-log-diff .now{color:#7ee29b}
@media (max-width:640px){
  .checklist-head-side{justify-items:start}
  .checklist-item{grid-template-columns:auto 1fr;}
  .checklist-item-actions{grid-column:1/-1;flex-direction:row;justify-content:flex-end}
}

/* ---- v7.2 Gerätekatalog ---- */
.device-warning-card,.device-list-card,.device-add-card{padding:1.15rem;margin-bottom:1rem}
.device-warning-card{border-color:#4a3c1e;background:#161206}
.device-unknown-list{margin:.5rem 0 0;padding-left:1.2rem;color:#c8cfda;font-size:.88rem}
/* Rasterelemente schrumpfen ohne min-width:0 nicht unter ihre Inhaltsbreite —
   ohne das laufen die Eingabefelder über die Kartenränder hinaus. */
.device-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:.7rem}
.device-grid>*{min-width:0}
.device-entry{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.75rem;padding:.85rem;
  border:1px solid #222933;border-radius:.85rem;background:#0b0f15;min-width:0;overflow:hidden}
.device-entry>*{min-width:0}
.device-image{flex:0 0 auto;width:88px;height:88px;border-radius:.6rem;overflow:hidden;
  background:#fff;border:1px solid #20272f;display:flex;align-items:center;justify-content:center;padding:0}
.device-image img{width:100%;height:100%;object-fit:cover;display:block}
.device-image-empty{font-size:.62rem;color:#8a94a6;text-align:center}
.device-fields{display:grid;gap:.4rem;min-width:0}
.device-key{font-size:.72rem;color:#8a94a6;letter-spacing:.04em}
.device-fields input[type=text],.device-fields select,.device-fields textarea,
.device-fields input[type=file],
.device-add-form input,.device-add-form select,.device-add-form textarea{
  border:1px solid #2b3441;border-radius:.55rem;background:#070a0e;color:#f5f7fa;
  padding:.45rem .55rem;font:inherit;font-size:.85rem;width:100%;max-width:100%;
  box-sizing:border-box;min-width:0}
.device-fields textarea{resize:vertical;min-height:4.5rem}
.device-fields input[type=file]{border-style:dashed;font-size:.78rem;padding:.4rem .5rem}
.device-fields input[type=file]::file-selector-button{margin-right:.5rem;border:1px solid #2b3441;
  border-radius:.4rem;background:#1a2029;color:#f5f7fa;font:inherit;font-size:.78rem;
  padding:.25rem .6rem;cursor:pointer}
.device-fields button{width:100%}
.device-battery-select{display:grid;gap:.25rem;font-size:.75rem;color:#8a94a6;min-width:0}
.device-row{display:flex;flex-wrap:wrap;gap:.4rem;min-width:0}
.device-row>*{flex:1 1 8rem;min-width:0}
.device-add-form{display:grid;gap:.55rem;max-width:34rem;margin-top:.6rem}

/* ---- v7.2 Inventar: Bubbles und Gerätebilder ---- */
.inventory-tabs{display:flex;flex-wrap:wrap;gap:.4rem;margin:1rem 0 1.2rem}
.inventory-tab{border:1px solid #2b3441;border-radius:999px;background:#0f141b;color:#c8cfda;
  font:inherit;font-size:.85rem;font-weight:650;padding:.45rem 1rem;cursor:pointer;transition:background .12s,color .12s}
.inventory-tab:hover{background:#161d26}
.inventory-tab.is-active{background:#fff;color:#050505;border-color:#fff}
.inventory-icon-image{padding:0;overflow:hidden;background:#070a0e;display:flex;align-items:center;justify-content:center}
.inventory-icon-image img{width:100%;height:100%;object-fit:contain}
.inventory-features{display:flex;flex-wrap:wrap;gap:.3rem;margin:.35rem 0 0}
.inventory-features span{font-size:.68rem;font-weight:650;letter-spacing:.02em;
  padding:.15rem .45rem;border-radius:999px;background:#16202b;color:#9fb4c8;border:1px solid #243140}
.platform-subnav{display:flex;gap:.4rem;margin:0 0 1.2rem;flex-wrap:wrap}
.platform-subnav-link{border:1px solid #2b3441;border-radius:999px;background:#0f141b;color:#c8cfda;
  font-size:.85rem;font-weight:650;padding:.45rem 1rem;text-decoration:none;transition:background .12s}
.platform-subnav-link:hover{background:#161d26}
.platform-subnav-link.is-active{background:#fff;color:#050505;border-color:#fff}

/* Gerätebild prominent über der Karte, wie bei vergleichbaren Lösungen */
/* Kartenkopf: Text links, Produktbild rechts. Die feste Bildspalte und
   min-width:0 auf der Textspalte verhindern, dass lange Gerätenamen das
   Bild verdrängen oder darunterlaufen. */
.inventory-card-top{display:grid;grid-template-columns:minmax(0,1fr);gap:.75rem;
  align-items:start;margin-bottom:.75rem}
.inventory-card.has-hero .inventory-card-top{
  grid-template-columns:minmax(0,1fr) clamp(110px,34%,168px)}
.inventory-card-top>.inventory-card-head{min-width:0;margin:0}
.inventory-card-top h3{overflow-wrap:anywhere}

/* Herstellerbilder sind meist auf weissem Grund freigestellt. Eine helle
   Kachel lässt beide Varianten sauber wirken: JPEG mit weissem Hintergrund
   fügt sich nahtlos ein, transparente PNG stehen kontrastreich darauf. */
/* Herstellerbilder sind quadratisch (800x800) und haben meist einen weissen
   Hintergrund. Die Kachel ist deshalb ebenfalls quadratisch und das Bild
   füllt sie randlos aus — sonst entsteht ein sichtbarer Weiss-auf-Weiss-Rand
   zwischen Bildkante und Kachelfläche. */
.inventory-hero{display:block;aspect-ratio:1/1;border-radius:.7rem;
  background:#fff;border:1px solid #20272f;overflow:hidden;min-width:0;padding:0}
.inventory-hero img{width:100%;height:100%;object-fit:cover;display:block}

/* Auf schmalen Karten das Bild unter den Text setzen, sonst wird beides eng.
   Dort dann kleiner und mittig, damit es die Karte nicht dominiert. */
@media (max-width:520px){
  .inventory-card.has-hero .inventory-card-top{grid-template-columns:minmax(0,1fr)}
  .inventory-hero{width:clamp(120px,45%,180px);justify-self:start}
}
.inventory-card.has-hero .inventory-icon{display:none}
.inventory-card.has-hero .inventory-card-head{align-items:flex-start}

/* Katalog-Kopf: Abstand zwischen Beschreibung, Unternavigation und Inhalt */
.device-list-card .device-grid{margin-top:.9rem}
.device-list-card>h2{margin-bottom:.2rem}
.platform-subnav{margin-top:.9rem}
/* Auf breiten Bildschirmen zwei statt drei Spalten – die Karten enthalten
   ein komplettes Formular und brauchen Platz. */
@media (min-width:900px){
  .device-grid{grid-template-columns:repeat(auto-fill,minmax(400px,1fr))}
}

/* ---- Laufende Freigaben ---- */
.active-shares-card{padding:1.15rem;margin-bottom:1rem}
.active-share-list{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.5rem}
.active-share{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;justify-content:space-between;
  padding:.65rem .85rem;border:1px solid #222933;border-radius:.7rem;background:#0b0f15}
.active-share.is-current{border-color:#3f7fb5;background:#0c141d}
.active-share-info{display:grid;gap:.15rem;min-width:0}
.active-share-info small{color:#7e8794;font-size:.78rem}
.active-share-actions{display:flex;gap:.4rem;align-items:center}
.active-share-actions form{margin:0}

/* ---- Klappmenü im Kopf ---- */
/* Die Kopfzeile bildet einen eigenen Stapelkontext, in dem .portal-nav
   bereits z-index:2101 hat. Das Klappmenue muss darueber liegen, sonst
   scheinen die Navigationslinks durch die geoeffnete Flaeche. */
.portal-menu{position:relative;margin-left:auto;z-index:2102}
.portal-menu-toggle{display:flex;flex-direction:column;justify-content:center;gap:4px;
  width:2.6rem;height:2.6rem;padding:0 .6rem;border:1px solid #2b3441;border-radius:.7rem;
  background:#0f141b;cursor:pointer;transition:background .12s}
.portal-menu-toggle:hover{background:#161d26}
.portal-menu-toggle span{display:block;height:2px;width:100%;border-radius:2px;background:#e6ebf2;
  transition:transform .18s,opacity .18s}
.portal-menu.is-open .portal-menu-toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.portal-menu.is-open .portal-menu-toggle span:nth-child(2){opacity:0}
.portal-menu.is-open .portal-menu-toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.portal-menu-panel{position:absolute;right:0;top:calc(100% + .5rem);z-index:2103;min-width:14rem;
  padding:.5rem;border:1px solid #2b3441;border-radius:.85rem;background:#0d1218;
  box-shadow:0 14px 34px rgba(0,0,0,.75);display:grid;gap:.1rem;
  isolation:isolate}
.portal-menu-panel[hidden]{display:none}
.portal-menu-title{margin:.4rem .6rem .15rem;font-size:.68rem;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:#6b7583}
.portal-menu-link{display:block;padding:.5rem .6rem;border-radius:.55rem;color:#dbe3ec;
  text-decoration:none;font-size:.9rem;font-weight:600}
.portal-menu-link:hover{background:#161d26}
.portal-menu-link.is-active{background:#fff;color:#050505}
@media (max-width:760px){
  /* top:auto liesse die Flaeche an ihrer statischen Position kleben und
     unter der Navigation verschwinden — deshalb fest unter dem Kopf. */
  .portal-menu-panel{position:fixed;left:.6rem;right:.6rem;
    top:calc(env(safe-area-inset-top) + 4.6rem);min-width:0;z-index:2103;
    max-height:calc(100dvh - 6rem);overflow:auto}
}

/* ---- v7.4 Dokumentenablage ---- */
.doc-breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem;margin:0 0 .9rem;font-size:.9rem}
.doc-crumb{color:#9aa3b0;text-decoration:none;padding:.25rem .5rem;border-radius:.45rem}
.doc-crumb:hover{background:#161d26;color:#e6ebf2}
.doc-crumb.is-current{color:#fff;font-weight:700}
.doc-crumb-sep{color:#4a5361}
.doc-explorer{padding:.6rem;margin-bottom:1rem}
.doc-list{list-style:none;margin:0;padding:0;display:grid}
.doc-row{display:flex;align-items:center;gap:.6rem;padding:.55rem .7rem;border-radius:.6rem;
  min-width:0;flex-wrap:wrap}
.doc-row:hover{background:#0e141b}
.doc-row+.doc-row{border-top:1px solid #171d25}
.doc-main{display:flex;align-items:center;gap:.7rem;flex:1 1 8rem;min-width:0;
  color:#e6ebf2;text-decoration:none}
.doc-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.doc-row-folder .doc-name{font-weight:700}
.doc-meta{color:#7e8794;font-size:.78rem;white-space:nowrap;flex:0 0 auto}
.doc-locked{padding:.1rem .45rem;border-radius:999px;background:#2a2216;color:#e3c07a;font-size:.7rem}
.doc-icon{flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:.35rem;background:#1b2530}
.doc-icon-folder{background:#2a3a4d;position:relative}
.doc-icon-folder::before{content:"";position:absolute;left:.2rem;top:.32rem;width:.55rem;height:.16rem;
  border-radius:1px;background:#7fa8cf}
.doc-icon-pdf{background:#3a2020}
.doc-icon-image{background:#1f3326}
.doc-actions-grid{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));margin-bottom:1rem}
.doc-action-card,.doc-permission-card,.group-list-card,.group-add-card,.group-delete-card{padding:1.15rem;margin-bottom:1rem}
.doc-inline-form{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin-top:.6rem}
.doc-inline-form input[type=text]{flex:1 1 12rem;min-width:0;border:1px solid #2b3441;border-radius:.55rem;
  background:#070a0e;color:#f5f7fa;padding:.5rem .6rem;font:inherit}
.doc-inline-form input[type=file]{flex:1 1 14rem;min-width:0;border:1px dashed #2b3441;border-radius:.55rem;
  background:#070a0e;color:#c8cfda;padding:.45rem .5rem;font:inherit;font-size:.82rem}
.doc-hint{color:#7e8794;font-size:.8rem;margin:.5rem 0 0;line-height:1.5}
.doc-group-list{list-style:none;margin:.7rem 0;padding:0;display:grid;gap:.4rem}
.doc-group-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center;padding:.5rem .7rem;
  border:1px solid #222933;border-radius:.6rem;background:#0b0f15}
.doc-group-name{display:flex;align-items:center;gap:.45rem;font-weight:650;flex:1 1 10rem}
.doc-group-write{display:flex;align-items:center;gap:.35rem;color:#9aa3b0;font-size:.82rem}
/* ---- Gruppen ---- */
.group-grid{display:grid;gap:.9rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:.7rem}
.group-grid>*{min-width:0}
.group-card{display:grid;gap:.5rem;padding:.9rem;border:1px solid #222933;border-radius:.85rem;background:#0b0f15;min-width:0}
.group-card input[type=text]{width:100%;box-sizing:border-box;border:1px solid #2b3441;border-radius:.55rem;
  background:#070a0e;color:#f5f7fa;padding:.45rem .55rem;font:inherit;font-size:.88rem}
.group-members-title{margin:.3rem 0 0;font-size:.72rem;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:#6b7583}
.group-members{list-style:none;margin:0;padding:0;display:grid;gap:.2rem;max-height:11rem;overflow:auto}
.group-members label{display:flex;align-items:center;gap:.4rem;font-size:.85rem;color:#c8cfda;cursor:pointer}
.group-card-actions{display:flex;justify-content:flex-end;margin-top:.2rem}
.group-delete-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.group-delete-row form{margin:0}

/* ---- Suche, Bearbeiten, Vollbild-Betrachter ---- */
.doc-search{display:flex;gap:.4rem;align-items:center}
.doc-search input[type=search]{border:1px solid #2b3441;border-radius:.6rem;background:#070a0e;
  color:#f5f7fa;padding:.5rem .7rem;font:inherit;min-width:12rem}
.doc-row-actions{display:flex;gap:.3rem;align-items:center}
.doc-row-actions form{margin:0}
button.doc-main{border:0;background:none;font:inherit;cursor:pointer;text-align:left;padding:0}
.doc-edit-row{display:flex;flex-wrap:wrap;gap:.6rem;padding:.5rem .7rem .7rem 2.9rem;
  background:#0c1219;border-radius:0 0 .6rem .6rem}
.doc-edit-row[hidden]{display:none}
.doc-edit-form{display:flex;gap:.35rem;align-items:center;margin:0;flex:1 1 16rem;min-width:0}
.doc-edit-form input[type=text],.doc-edit-form select{flex:1 1 auto;min-width:0;border:1px solid #2b3441;
  border-radius:.5rem;background:#070a0e;color:#f5f7fa;padding:.4rem .55rem;font:inherit;font-size:.85rem}

body.doc-viewer-open{overflow:hidden}
.doc-viewer{position:fixed;inset:0;z-index:9990;display:flex;flex-direction:column;
  background:rgba(4,6,10,.96);backdrop-filter:blur(4px)}
.doc-viewer[hidden]{display:none}
.doc-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem max(1rem,env(safe-area-inset-right)) .7rem max(1rem,env(safe-area-inset-left));
  border-bottom:1px solid #1c2430}
.doc-viewer-name{color:#f5f7fa;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.doc-viewer-close{width:2.4rem;height:2.4rem;border-radius:.6rem;border:1px solid #2b3441;
  background:#131a23;color:#f5f7fa;font-size:1.5rem;line-height:1;cursor:pointer;flex:0 0 auto}
.doc-viewer-close:hover{background:#1c242e}
.doc-viewer-stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:1rem;min-height:0;overflow:auto}
.doc-viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:.5rem}
.doc-viewer-stage iframe{width:100%;height:100%;border:0;border-radius:.5rem;background:#fff}
@media (max-width:620px){
  .doc-viewer-stage{padding:.4rem}
  .doc-edit-row{padding-left:.7rem}
}

/* ---- Datei-Auswahl mit Ablageflaeche ---- */
.doc-upload-form{display:grid;gap:.7rem;margin-top:.7rem}
.doc-dropzone{display:grid;justify-items:center;gap:.2rem;padding:1.4rem 1rem;
  border:2px dashed #33404f;border-radius:.9rem;background:#080c11;cursor:pointer;
  transition:border-color .12s,background .12s;text-align:center}
.doc-dropzone:hover{border-color:#4d6076;background:#0c1219}
.doc-dropzone.is-over{border-color:#5c9ad4;background:#0d1622}
.doc-dropzone.has-files{border-style:solid;border-color:#3f7fb5;background:#0c1622}
.doc-dropzone-icon{font-size:1.6rem;line-height:1;color:#7e8794}
.doc-dropzone.has-files .doc-dropzone-icon{color:#7ee29b}
.doc-dropzone-main{font-weight:750;font-size:.95rem;color:#f5f7fa}
.doc-dropzone-sub{font-size:.8rem;color:#7e8794;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap;max-width:100%}
.doc-dropzone.has-files .doc-dropzone-sub{color:#9fd8b4}
.doc-upload-button{width:100%}

/* Handy: Name in die erste Zeile, Groesse und Knoepfe darunter — sonst
   laeuft die Zeile ueber den Rand hinaus. */
@media (max-width:620px){
  .doc-row{align-items:flex-start;padding:.6rem .55rem;gap:.35rem}
  .doc-main{flex:1 1 100%}
  .doc-name{white-space:normal;overflow-wrap:anywhere;line-height:1.35}
  .doc-meta{flex:1 1 auto;white-space:normal;font-size:.72rem;padding-left:2.2rem}
  .doc-row-actions{flex:0 0 auto;margin-left:auto}
  .doc-row+.doc-row{border-top:1px solid #171d25;margin-top:.15rem;padding-top:.7rem}
  .doc-explorer{padding:.45rem}
}

/* PDF-Hinweis auf Geraeten ohne bedienbare Rahmen-Anzeige */
.doc-viewer-pdf-note{display:grid;justify-items:center;gap:.9rem;padding:2rem 1.2rem;
  max-width:26rem;text-align:center;border:1px solid #2b3441;border-radius:1rem;
  background:#0d1218}
.doc-viewer-pdf-title{margin:0;font-weight:750;font-size:1.05rem;color:#f5f7fa;
  overflow-wrap:anywhere}
.doc-viewer-pdf-text{margin:0;color:#9aa3b0;font-size:.88rem;line-height:1.5}
.doc-viewer-pdf-open{min-width:12rem;justify-content:center}

/* ---- v7.5 Missionsbilder ---- */
.mission-images-card{padding:1.15rem;margin-bottom:1rem}
.mission-image-grid{display:grid;gap:.55rem;margin-top:.8rem;
  grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
/* Notbremse: Falls das Raster einmal nicht greift, bleiben die Bilder
   trotzdem klein statt bildschirmfuellend. */
.mission-image img{max-height:180px}
.mission-image{margin:0;border:1px solid #1e242c;border-radius:.7rem;overflow:hidden;
  background:#0b0f15}
.mission-image img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.mission-image figcaption{display:flex;align-items:center;justify-content:space-between;
  gap:.4rem;padding:.35rem .5rem;font-size:.72rem;color:#7e8794}
.mission-image figcaption span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mission-image-download{flex:0 0 auto;width:1.5rem;height:1.5rem;border-radius:.35rem;
  display:flex;align-items:center;justify-content:center;background:#1a2029;color:#c8cfda;
  text-decoration:none;font-size:.85rem}
.mission-image-download:hover{background:#232c38;color:#fff}

/* ---- v7.5 Upload-Freigabe (auf dem Handy) ---- */
.upload-approve-card{padding:1.4rem;max-width:32rem;text-align:center;
  display:grid;gap:.9rem;justify-items:center}
.upload-approve-card p{margin:0;line-height:1.55}
.upload-approve-mission{font-size:1.25rem;font-weight:750;color:#f5f7fa;
  padding:.6rem 1.1rem;border-radius:.7rem;background:#101820;
  border:1px solid #243040;overflow-wrap:anywhere}
.upload-approve-ok{font-size:1.1rem;font-weight:750;color:#7ee29b}
.upload-approve-error{font-size:1rem;font-weight:700;color:#ff9a9a}
.upload-approve-card form{display:grid;gap:.7rem;width:100%;max-width:20rem;
  justify-items:stretch;margin-top:.3rem}
.upload-approve-card input[type=text]{border:1px solid #2b3441;border-radius:.6rem;
  background:#070a0e;color:#f5f7fa;padding:.65rem .75rem;font:inherit;
  width:100%;box-sizing:border-box;text-align:center}
.upload-approve-card .btn-primary,
.upload-approve-card .btn-secondary{width:100%;justify-content:center;
  padding:.8rem 1rem;font-size:1rem}
.upload-approve-card .doc-hint{text-align:center;max-width:24rem}

/* ---- v7.5 Bildbetrachter in der Mission ---- */
button.mission-image-open{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer}
body.img-viewer-open{overflow:hidden}
.img-viewer{position:fixed;inset:0;z-index:9990;display:flex;flex-direction:column;
  background:rgba(4,6,10,.97);backdrop-filter:blur(4px)}
.img-viewer[hidden]{display:none}
.img-viewer-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.7rem max(1rem,env(safe-area-inset-right)) .7rem max(1rem,env(safe-area-inset-left));
  border-bottom:1px solid #1c2430}
.img-viewer-title{color:#f5f7fa;font-weight:650;font-size:.9rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.img-viewer-tools{display:flex;gap:.4rem;flex:0 0 auto}
.img-viewer-btn{width:2.4rem;height:2.4rem;border-radius:.6rem;border:1px solid #2b3441;
  background:#131a23;color:#f5f7fa;font-size:1.3rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;text-decoration:none}
.img-viewer-btn:hover{background:#1c242e}
.img-viewer-stage{flex:1 1 auto;display:flex;align-items:center;justify-content:center;
  padding:1rem;min-height:0}
.img-viewer-stage img{max-width:100%;max-height:100%;object-fit:contain;border-radius:.5rem}
.img-viewer-nav{display:flex;align-items:center;justify-content:center;gap:1.2rem;
  padding:.7rem 1rem max(.7rem,env(safe-area-inset-bottom));border-top:1px solid #1c2430}
.img-viewer-count{color:#9aa3b0;font-size:.85rem;min-width:4rem;text-align:center}
@media (max-width:620px){ .img-viewer-stage{padding:.4rem} }

/* ---- v7.6 Uebersprungener Preflight in der Mission ---- */
.mission-check-block.is-skipped{border:1px solid #5a2b2b;border-radius:.8rem;
  padding:.85rem;background:linear-gradient(180deg,#1a0f0f,#120a0a)}
.mission-check-block.is-skipped h3{color:#ff9a9a}
.mission-check-skipped{margin:.4rem 0 0;padding:.5rem .7rem;border-radius:.6rem;
  background:#2a1414;border:1px solid #4a2626;color:#ffc4c4;font-size:.85rem;
  font-weight:650;line-height:1.45}
.mission-check-skipped strong{display:block;color:#ff9a9a;font-size:.72rem;
  letter-spacing:.1em;text-transform:uppercase;margin-bottom:.15rem}