/* === BENTO GRID LAYOUT === */ .bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; gap: 20px; max-width: 1200px; width: 100%; } /* === PLATZIERUNG DER KACHELN === */ /* Profil (Oben Links - nimmt 2 Spalten ein) */ .card-profile { grid-column: 1 / 3; } /* Navigation Buttons */ .card-buttons { grid-column: 3 / 4; grid-row: 1 / 3; display: flex; flex-direction: column; gap: 15px; justify-content: space-between; } .nav-btn { flex: 1; background: rgba(255, 255, 255, 0.03); border-radius: 20px; border: none; display: flex; justify-content: center; align-items: center; height: 80px; min-width: 80px; transition: all 0.3s ease; color: #fff; } .nav-btn svg { width: 40px; height: 40px; transition: transform 0.3s ease; } .nav-btn:hover svg { transform: scale(1.2); } /* YouTube (Mitte Links - nimmt 2 Spalten ein) */ .card-youtube { grid-column: 1 / 3; grid-row: 2 / 3; } .liked { background-color: red; } /* ========================================================= */ /* MOBILE VERSION (Greift nur auf kleinen Bildschirmen) */ /* ========================================================= */ @media (max-width: 900px) { /* Punkt entfernt! Jetzt wird der richtige Tag angesprochen */ body { display: flex; flex-direction: column; justify-content: flex-start; align-items: center; } .bento-grid { grid-template-columns: 1fr; margin: 0 auto; /* Zentriert den Container horizontal */ width: 90%; /* Gibt dem Grid links und rechts ein wenig Luft zum Rand */ } .card-profile { grid-column: 1 / -1; grid-row: 1 / 2; } .card-buttons { grid-column: 1 / -1; grid-row: 3 / 4; flex-direction: row; justify-content: center; } .card-youtube { grid-column: 1 / -1; grid-row: 2 / 3; } }