/* Assets/style.css */

body {
    /* Hintergrundfarbe für die gesamte Seite ändern */
    background-color: #eeede8; 
  }
  
  .card {
    /* Einen leichten Schatten zur Karte hinzufügen */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  }
  
  /* Du kannst hier sehr spezifische Stile definieren */
  #click-output {
    font-size: 1.2em; /* Etwas größere Schrift für das Ergebnis */
    color: #0d6efd; /* Gleiche Farbe wie der primäre Button (je nach Theme) */
  }
  
  /* NEU: Steuerung für das mobile Navigationsmenü */
@media (max-width: 991.98px) { /* Dieser Breakpoint entspricht dem 'lg'-Breakpoint von Bootstrap */
  .mobile-nav-collapse.collapse.show {
    /* Style für das geöffnete mobile Menü */
    position: absolute;
    top: 100%; /* Positioniere es direkt unter der Navbar */
    right: 0;  /* Richte es am rechten Rand aus */
    width: auto; /* Die Breite passt sich dem Inhalt an */
    background-color: #343a40; /* Gleiche Farbe wie die Navbar */
    border-radius: 0 0 .25rem .25rem; /* Schöne abgerundete Ecken unten */
    padding: 0.5rem 1rem; /* Etwas Innenabstand */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* Ein leichter Schatten */
  }

  .mobile-nav-collapse .navbar-nav {
      /* Sorge dafür, dass die Links untereinander stehen */
      flex-direction: column;
  }
}


/* assets/style.css - Ergänzungen */

/* Mobile FAB nur auf kleinen Bildschirmen */
@media (max-width: 767.98px) {
    #mobile-fab .btn {
        display: block !important;
    }
    
    /* Tab-Labels verkürzen auf sehr kleinen Bildschirmen */
    .nav-tabs .nav-link {
        padding: 0.5rem 0.3rem;
        font-size: 0.8rem;
    }
}

/* Bessere Touch-Targets für Mobile */
@media (max-width: 767.98px) {
    .btn {
        min-height: 44px; /* Apple's empfohlene Mindestgröße */
    }
    
    .list-group-item {
        padding: 1rem 0.75rem;
    }
}

/* Tab-Content Spacing */
#tab-content {
    min-height: 60vh;
}

/* Smooth Transitions */
.tab-content {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}