/* Responsive Styles für mobile Geräte (iPhone 11 und ähnliche) */
/* Desktop-Styles bleiben in standard.css und navigation.css unverändert */

/* Media Query für mobile Geräte - iPhone 11: 414px Portrait, 896px Landscape */
@media only screen and (max-width: 480px) {
  
  /* Body Anpassungen */
  body {
    font-size: 14px;
    min-width: 100%;
    max-width: 100%;
  }

  /* Wrapper */
  #wrapper {
    width: 100%;
    min-width: 100%;
  }

  /* Header - Mobile Anpassungen */
  header {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    min-height: 8em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
    position: relative !important; /* Nicht mehr fixed auf mobile */
    box-sizing: border-box;
    z-index: 50 !important; /* Höher als #mehrspaltig, aber niedriger als subheader */
  }

  header img {
    width: 80px !important;
    margin-right: 10px !important;
    float: left;
  }

  header h1 {
    font-size: 14pt !important;
  }

  header h2 {
    font-size: 12pt !important;
  }

  header h3 {
    font-size: 10pt !important;
  }

  header ul {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  header li {
    display: block !important;
    padding: 5px 0 !important;
    border-spacing: 0 !important;
  }

  header input[type=submit] {
    padding: 8px 12px !important;
    font-size: 12px !important;
  }

  /* Subheader - Mobile Anpassungen */
  subheader {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 20px !important; /* Mehr Abstand nach unten */
    padding: 15px !important;
    position: relative !important; /* Nicht mehr fixed auf mobile */
    box-sizing: border-box;
    visibility: visible !important;
    display: block !important;
    z-index: 100 !important; /* Sehr hoher z-index damit er über allem liegt */
    background-color: #0B0B3B !important; /* Solider dunkler Hintergrund ohne Transparenz */
    background-image: none !important; /* Hintergrundbild entfernen auf mobile */
    color: white !important; /* Textfarbe explizit setzen */
    overflow: visible !important; /* Sicherstellen, dass Inhalt sichtbar ist */
  }

  /* Subheader Overlay auf mobile komplett entfernen */
  subheader::before {
    display: none !important; /* Overlay komplett entfernen auf mobile */
  }

  /* Subheader-Inhalt über dem Overlay - Mobile */
  subheader > * {
    position: relative !important;
    z-index: 2 !important; /* Höher als das Overlay */
    color: white !important;
  }

  subheader ul {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative !important;
    z-index: 2 !important;
  }

  subheader li {
    display: block !important;
    padding: 8px 0 !important;
    border-spacing: 0 !important;
    width: 100% !important;
    list-style: none !important;
    position: relative !important;
    z-index: 2 !important;
    color: white !important;
  }

  /* Subheader Formulare und Suchfelder - Mobile */
  subheader form {
    display: block !important;
    width: 100% !important;
    margin: 10px 0 !important;
    padding: 0 !important;
    position: relative !important;
    z-index: 3 !important; /* Noch höher für Formulare */
  }

  /* Verschachtelte li-Elemente innerhalb der Formulare */
  subheader form li {
    display: block !important;
    width: 100% !important;
    margin: 5px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    position: relative !important;
    z-index: 3 !important;
  }

  subheader input[type=search],
  subheader input[type=text] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important; /* Verhindert Zoom auf iOS */
    box-sizing: border-box !important;
    display: block !important;
    margin: 0 !important;
    border: 2px solid #FF8000 !important;
    border-radius: 4px !important;
    background-color: white !important;
    color: #333 !important;
    position: relative !important;
    z-index: 4 !important; /* Höchster z-index für Input-Felder */
    opacity: 1 !important;
    visibility: visible !important;
  }

  subheader input[type=submit] {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    font-size: 14px !important;
    font-weight: bold !important;
    box-sizing: border-box !important;
    display: block !important;
    margin: 5px 0 0 0 !important;
    background: #FF8000 !important;
    color: #0B0B3B !important;
    border: 2px solid #FF8000 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 4 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  subheader input[type=hidden] {
    display: none !important;
  }

  /* Labels und Text im Subheader sichtbar machen */
  subheader span,
  subheader label {
    color: white !important;
    position: relative !important;
    z-index: 2 !important;
  }

  /* Mehrspaltig Container - Mobile Layout */
  #mehrspaltig {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 10px !important; /* Kleiner margin-top, da subheader jetzt relative ist */
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    flex-direction: column !important; /* Vertikal statt horizontal */
    padding: 10px !important;
    box-sizing: border-box;
    position: relative !important;
    z-index: 1 !important; /* Niedrigerer z-index als subheader */
    clear: both !important; /* Sicherstellen, dass es nach subheader kommt */
  }

  /* Navigation - Mobile */
  nav {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 5px 0 !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  nav ul {
    display: flex !important;
    flex-direction: column !important;
  }

  nav li {
    width: 100% !important;
    padding: 8px 0 !important;
  }

  nav a {
    display: block !important;
    width: 100% !important;
    padding: 10px !important;
    text-align: left !important;
  }

  /* Article - Mobile */
  article {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 5px 0 !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  article ul {
    display: flex !important;
    flex-direction: column !important;
  }

  article li {
    display: block !important;
    padding: 5px 0 !important;
    border-spacing: 0 !important;
  }

  article textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  article input[type=text],
  article input[type=search] {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

  /* Aside - Mobile */
  aside {
    flex: 1 1 auto !important;
    width: 100% !important;
    margin: 5px 0 !important;
    padding: 10px !important;
    box-sizing: border-box;
  }

  /* Footer - Mobile */
  footer {
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-top: 10px !important;
    margin-bottom: 10px !important;
    padding: 10px !important;
    position: relative !important;
    box-sizing: border-box;
  }

  /* Navigation Styles aus navigation.css - Mobile Anpassungen */
  .verticalNavigation {
    top: auto !important;
    left: 10px !important;
    position: relative !important;
    margin: 10px 0 !important;
  }

  .horizontalNavigation {
    top: auto !important;
    left: 10px !important;
    position: relative !important;
    margin: 10px 0 !important;
  }

  .actionNavigation {
    top: auto !important;
    left: 10px !important;
    position: relative !important;
    margin: 10px 0 !important;
  }

  .verticalNavigation input[type=submit],
  .horizontalNavigation input[type=submit],
  .actionNavigation input[type=submit] {
    width: 100% !important;
    min-width: 200px !important;
    height: 40px !important;
    margin: 5px 0 !important;
  }

  .verticalNavigation input[type=submit]:hover,
  .horizontalNavigation input[type=submit]:hover,
  .actionNavigation input[type=submit]:hover {
    width: 100% !important;
    min-width: 200px !important;
  }

  /* Toolbox - Mobile */
  #toolbox {
    flex-direction: column !important;
    margin: 10px !important;
    width: calc(100% - 20px) !important;
    box-sizing: border-box;
  }

  toolboxleft,
  toolboxright {
    width: 100% !important;
    margin: 5px 0 !important;
  }

  /* Buttons - Mobile */
  #butDetail,
  #butLink,
  #butActivity,
  #butHelp,
  #butUnset,
  #butSet {
    width: 40px !important;
    height: 40px !important;
    margin: 5px !important;
  }

  /* Forms - Mobile */
  fieldset {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* Tabellen - Mobile (wenn vorhanden) */
  table {
    width: 100% !important;
    font-size: 12px !important;
    display: block !important;
    overflow-x: auto !important;
  }

  /* Limit Space - Mobile */
  .limitSpace {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }

}

/* Media Query für größere mobile Geräte (Landscape iPhone 11: 896px) */
@media only screen and (min-width: 481px) and (max-width: 896px) {
  
  /* Ähnliche Anpassungen wie oben, aber mit mehr Platz */
  header {
    min-width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
  }

  subheader {
    min-width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
  }

  #mehrspaltig {
    margin-left: 0 !important;
    margin-top: 10px !important;
    flex-direction: column !important;
    width: 100% !important;
  }

  nav,
  article,
  aside {
    width: 100% !important;
  }

  footer {
    min-width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }

  /* File Browser - Mobile Anpassungen */
  .breadcrumb {
    margin: 15px 0 !important;
    padding: 10px 5px !important;
    font-size: 14px !important;
    word-wrap: break-word !important;
  }

  .breadcrumb a {
    font-size: 14px !important;
    padding: 2px 0 !important;
  }

  .filebrowser-button {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 15px !important;
    padding: 12px !important;
    font-size: 16px !important; /* Verhindert Zoom auf iOS */
    box-sizing: border-box !important;
  }

  .filebrowser-select-button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    font-size: 14px !important;
    box-sizing: border-box !important;
  }

  .filebrowser-table {
    font-size: 12px !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .filebrowser-table th,
  .filebrowser-table td {
    padding: 8px 5px !important;
    font-size: 12px !important;
  }

  .filebrowser-table th {
    font-size: 12px !important;
  }

  .filebrowser-icon {
    width: 18px !important;
    height: 18px !important;
  }

  /* File Upload Form - Mobile Anpassungen */
  .upload-target-dir {
    margin: 10px 0 !important;
    padding: 10px 8px !important;
    font-size: 14px !important;
  }

  .upload-form-container {
    margin: 15px 0 !important;
    padding: 10px !important;
  }

  .upload-label {
    font-size: 14px !important;
    margin-bottom: 8px !important;
  }

  .upload-file-input {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* Verhindert Zoom auf iOS */
    padding: 10px !important;
  }

  .upload-text-input {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* Verhindert Zoom auf iOS */
    padding: 10px !important;
  }

  .upload-submit-button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important; /* Verhindert Zoom auf iOS */
    box-sizing: border-box !important;
  }

  /* Lending Table - Mobile Anpassungen */
  .lending-table {
    font-size: 12px !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .lending-table th,
  .lending-table td {
    padding: 8px 5px !important;
    font-size: 12px !important;
  }

  .lending-table th {
    font-size: 12px !important;
  }

  /* Lending Form - Mobile Anpassungen */
  .lending-form {
    margin: 15px 0 !important;
    padding: 15px 10px !important;
  }

  .form-group {
    margin: 12px 0 !important;
  }

  .form-label {
    font-size: 14px !important;
    margin-bottom: 5px !important;
  }

  .form-input,
  .form-select {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 16px !important; /* Verhindert Zoom auf iOS */
    padding: 10px !important;
  }

  .form-submit-button {
    width: 100% !important;
    max-width: 100% !important;
    padding: 12px !important;
    font-size: 16px !important; /* Verhindert Zoom auf iOS */
    box-sizing: border-box !important;
  }

  /* Authors Table - Mobile Anpassungen */
  .authors-table {
    font-size: 12px !important;
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  .authors-table th,
  .authors-table td {
    padding: 8px 5px !important;
    font-size: 12px !important;
  }

  .authors-table th {
    font-size: 12px !important;
  }

  #butAuthorDetail {
    width: 20px !important;
    height: 20px !important;
  }

}