.device-form {
  display: grid;
  grid-template-columns: 1fr; /* Mobile default */
  grid-auto-rows: auto;
  gap: 16px 24px;
  max-width: 1100px;
  margin: 0 auto;
}

.df-left {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 12px 16px;
  align-items: center;
}

.df-left .f {
  display: contents; /* Label + Feld in derselben Grid-Zeile */
}

.df-left label {
  font-weight: 500;
  color: #555;
  text-align: right;
  padding-right: 6px;
}

.df-left input,
.df-left select {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid #d9c3a0;
  border-radius: 3px;
}

.f-inline {
  align-items: center;
}

.df-info label {
  display: block;
  margin-bottom: 4px;
  font-weight: 500;
  color: #555;
}
.df-info textarea {
  width: 100%;
  min-height: 200px;
  padding: 6px;
  border: 1px solid #d9c3a0;
  border-radius: 3px;
}

.df-image img {
  width: 100%;
  height: auto;
  display: block;
}

.df-actions {
  display: flex;
  justify-content: flex-end;
}

.sDButton {
  background: #e5d2b0;
  border: none;
  padding: 6px 16px;
  border-radius: 6px;
  cursor: pointer;
}

/* Desktop-Layout */
@media (min-width: 900px) {
  .device-form {
    grid-template-columns: minmax(420px, 600px) 32px minmax(360px, 1fr);
    grid-template-areas:
      "left . image"
      "left . info"
      "left . actions";
    align-items: start;
  }
  .df-left   { grid-area: left; }
  .df-image  { grid-area: image; }
  .df-info   { grid-area: info; }
  .df-actions{ grid-area: actions; }

  .df-info textarea {
    min-height: 260px;
  }
}
/* Container für das Datumsfeld */
.f-date .date-input {
  position: relative;               /* Bezug für absolute Position des Kalenders */
}
/* Der Kalender selbst – initial unsichtbar */
.f-date .calendar {
  position: absolute;
  left: 0;
  top: calc(100% + 8px);            /* direkt unter dem Input */
  z-index: 1000;

  display: none;                    /* via .open sichtbar */
  background: #fff;
  border: 1px solid #d9c3a0;
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,.12);

  width: 320px;                     /* Desktop-Basisbreite */
  max-width: 100vw;                 /* nie breiter als der Viewport */
}

/* Sichtbar, wenn geöffnet */
.f-date .calendar.open {
  display: block;
}
/* Mobile: Kalender darf sich an die Feldbreite anpassen */
@media (max-width: 899px){
  .f-date .calendar {
    width: 100%;                    /* an Input-Breite andocken */
    max-width: calc(100vw - 32px);  /* etwas Rand lassen */
  }
}

/* Beispiel-Feinschliff (optional) */
.f-date .calendar header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px;
}
.f-date .calendar header .prev,
.f-date .calendar header .next {
  background: transparent; border: 0; cursor: pointer; font-size: 16px;
}
.f-date .calendar .days { padding: 8px 10px; }