* { margin: 0; 
    padding: 0; 
    box-sizing: border-box; }

html, body { height: 100%; }

body { min-height: 100%;
       width: 100%;
       margin: 0;
       font-family: Inter, system-ui, -apple-system, sans-serif;
       color: #111;
       /* Zentrierung */
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center; }

.nav-wrap { 
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; }

nav.menu { width: 100%; }

.menu-list { display: grid;
             grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
             grid-auto-rows: 70px; /* Jede Zeile bekommt eine feste Höhe */
             gap: 12px;
             padding: 20px;
             width: 100%; }

.menu-btn { display: flex;
            align-items: center;
            justify-content: center;
            width: 100%;
            height: 100%; /* Füllt die 70px der grid-auto-rows aus */
            
            background: #fff;
            border: 2px solid rgba(0,123,255,.18);
            border-radius: 10px;
            box-shadow: 0 1px 2px rgba(16,24,40,.04);
            
            text-decoration: none;
            color: #111;
            font-weight: 600;
            font-size: 18px;
            text-align: center;
            transition: all 0.2s ease;
            
            overflow: hidden;
            word-break: break-word; /* Bricht lange Wörter zur Not um */
            padding: 0 5px; }

.menu-btn.KI1 { background: linear-gradient(180deg,#ff8800,#deb545); color:#fff; border:none; }
.menu-btn.KI1v3 { background: linear-gradient(180deg,#00c6ff,#0072ff); color:#fff; border:none; }
.menu-btn.prim { background: linear-gradient(180deg,#0066ff,#0047b3); color:#fff; border:none; }
.menu-btn.shop { background: linear-gradient(180deg,#28a745,#1e7e34); color:#fff; border:none; }
.menu-btn.dbmanager { background: linear-gradient(180deg,#ffebcd,#DAA520); color:#fff; border:none; } 
.menu-btn.bewegliches_quadrat { background: linear-gradient(180deg,#8A1586,#DEB545); color:#fff; border:none; }

@media (hover: hover) {
    .menu-btn:hover { 
        transform: translateY(-3px); 
        box-shadow: 0 6px 14px rgba(16,24,40,.08); 
    }
}





.menu-btn.mobile {
  /* Hintergrund & Border wie gewünscht */
  background: linear-gradient(0deg, yellow 5%, orange 70%);
  border: none;
  text-decoration: none;
  
  /* Flexbox sorgt für die perfekte Zentrierung ohne Abschneiden */
  display: inline-flex;
  align-items: center;      /* Vertikal zentrieren */
  justify-content: center;  /* Horizontal zentrieren */
  
  /* Padding bestimmt die Größe des Buttons, nicht 'height' */
  padding: 8px 16px; 
  
  /* WICHTIG: Damit der Button nicht halb verschwindet */
  height: auto; 
  min-height: min-content;
  overflow: visible;
}


.menu-btn.mobile .btn-text {
  /* Dein Schwarz-Weiß Verlauf */
  background: linear-gradient(0deg, #fff, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  
  /* Verhindert den Zeilenumbruch */
  white-space: nowrap;
  display: inline-block;
  
  /* Schrift-Korrektur */
  line-height: 1.2; 
  font-weight: bold;
}


/*.menu-btn.mobile { background: linear-gradient(0deg, yellow 5%, orange 70%); color:#fff; border:none; }
/*.menu-btn.mobile { background: linear-gradient(180deg, yellow, purple); color:#fff; border:none; }*/

.menu-btn:focus {
    outline: 3px solid rgba(0, 123, 255, 0.5);
    outline-offset: 2px;
}

@media (max-width: 640px) {
    .menu-list {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
        grid-auto-rows: 60px;
        gap: 8px;
    }
    .menu-btn { font-size: 16px; }
}