/* ==========================================================================
   KWS MASTERY - Responsive Anpassungen
   ========================================================================== */

@media (max-width: 1180px) {
  .learn-layout { grid-template-columns: 1fr 300px; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1000px) {
  .learn-layout { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .dash-main-grid { grid-template-columns: 1fr; }
  .skill-detail-grid { grid-template-columns: 1fr; }
  .hero { flex-direction: column; }
  .hero-side { align-items: flex-start; }
  .hero-quote { text-align: left; border-right: none; border-left: 2px solid var(--accent); padding-right: 0; padding-left: 14px; }
  .hero-photo, .hero-photo-fade { display: none; }
}

@media (max-width: 720px) {
  .plant-banner { height: 130px; }
  .plant-banner-quote { font-size: 16px; }
  .plant-banner-overlay { padding: 0 20px; }
}

@media (max-width: 860px) {
  .sidebar {
    transform: translateX(-100%);
    box-shadow: var(--shadow);
  }
  .sidebar.open { transform: translateX(0); }
  .main-col { margin-left: 0; }
  .menu-toggle { display: flex; }
  .sidebar-scrim {
    display: none;
    position: fixed; inset: 0; background: rgba(3,6,15,0.6); z-index: 39;
  }
  .sidebar-scrim.show { display: block; }
  .topbar-search { display: none; }
  .view-container { padding: 20px 16px 50px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .skills-layout-grid { grid-template-columns: 1fr; }
  /* position: sticky innerhalb eines CSS-Grids ist auf iOS/Safari unzuverlässig
     und kann den Bereich darunter unsichtbar/unklickbar machen - auf Mobile
     deaktivieren, die Kategorie-Leiste bleibt hier ohnehin im normalen Fluss. */
  .skills-cat-nav { position: static; top: auto; }
  .category-tab { min-height: 44px; padding: 12px 14px; }
}

@media (max-width: 640px) {
  .hero { padding: 22px 20px; }
  .hero-title { font-size: 23px; }
  .task-card { padding: 22px 18px; }
  .task-question { font-size: 26px; }
  .task-actions .btn { min-width: 100%; }
  .answer-row { flex-wrap: wrap; }
  .answer-unit { min-width: auto; }
  .formula-choices { grid-template-columns: 1fr; }
  .stat-tile { padding: 14px; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar-user-sub { display: none; }
  .modal-card { padding: 24px; }
  .si-row { grid-template-columns: 22px 1fr 46px; font-size: 12px; }
  .heatmap { grid-template-columns: repeat(10, 1fr); }
}

@media (max-width: 420px) {
  .task-question { font-size: 22px; }
  .answer-input { font-size: 17px; padding: 13px 14px; }
  .sidebar { width: 88vw; max-width: 300px; }
}