/* Mobile Fix und optische Feinabstimmung für JetztStarten.de */
* { box-sizing: border-box; }

.container, header, footer {
  padding-left: max(16px, env(safe-area-inset-left));
  padding-right: max(16px, env(safe-area-inset-right));
}

@media (max-width: 960px) {
    .layout {
        display: block;
    }

    .nav-toggle {
        display: inline-flex;
    }

    .top-search,
    .topbar-pill {
        display: none;
    }

    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 86vw;
        max-width: 360px;
        transform: translateX(-110%);
        transition: transform 0.2s ease;
        z-index: 110;
        border-right: 1px solid var(--accent-border);
        box-shadow: 0 12px 30px rgba(0,0,0,.25);
    }

    .sidebar-inner {
        position: relative;
        top: 0;
        max-height: 100vh;
    }

    body.nav-open .sidebar {
        transform: translateX(0);
    }

    body.nav-open .overlay {
        display: block;
    }

    .content {
        padding: 16px;
    }

    .topbar-inner {
        padding: 10px 12px;
    }

    .brand {
        font-size: 12px;
        line-height: 1.2;
        flex: 1 1 auto;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .hero {
        grid-template-columns: 1fr;
    }

    .hero-summary {
        font-size: 15px;
        line-height: 1.6;
    }

    .search-hero {
        flex-direction: column;
    }

    .search-row {
        grid-template-columns: 1fr;
    }

    .stat-grid,
    .stat-grid.compact {
        grid-template-columns: 1fr 1fr;
    }

    .card-grid,
    .utility-grid {
        grid-template-columns: 1fr;
    }

    .footer-inner {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* Mobile only visual tune */
@media (max-width: 900px) {
  html, body { width: 100%; overflow-x: hidden; }
  body {
    margin: 0;
    -webkit-text-size-adjust: 100%;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  }

  :root {
    --kid-pad-l: max(16px, env(safe-area-inset-left));
    --kid-pad-r: max(16px, env(safe-area-inset-right));
    --kid-pad-b: max(16px, env(safe-area-inset-bottom));
    --kid-border: rgba(0,0,0,.12);
    --kid-muted: rgba(17,24,39,.72);
    --kid-primary: #1a73e8;
    --kid-primary-2: #1558d6;
    --kid-bg: #f8f9fa;
    --kid-text: #202124;
  }

  body{
    background:var(--kid-bg) !important;
    color:var(--kid-text) !important;
  }

  a, a:visited{
    color:var(--kid-primary);
    text-decoration:none;
  }

  header.topbar{
    background:var(--kid-primary) !important;
    border-bottom-color: rgba(255,255,255,.18);
  }

  header.topbar .topbar-icon,
  header.topbar .brand,
  header.topbar .nav-toggle{
    color:#fff !important;
  }

  header.topbar .nav-toggle{
    background:rgba(255,255,255,.14) !important;
    border:1px solid rgba(255,255,255,.25) !important;
    border-radius:12px !important;
  }

  main.content, .content {
    padding-left: var(--kid-pad-l) !important;
    padding-right: var(--kid-pad-r) !important;
  }

  .content {
    padding-top: 16px !important;
    padding-bottom: 24px !important;
  }

  .sidebar .nav-link,
  .sidebar .nav-link:visited{
    color:var(--kid-text) !important;
    text-decoration:none !important;
  }

  .sidebar .nav-link.sub,
  .sidebar .nav-link.sub:visited{
    color:var(--muted) !important;
  }

  .sidebar .nav-link:hover{
    color:var(--kid-primary) !important;
  }

  .sidebar {
    background: #fff !important;
  }

  .overlay {
    display: block;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease;
  }

  body.nav-open .overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .hero-copy,
  .hero-panel,
  .section-panel,
  .form-card,
  .card,
  .link-item {
    border-radius: 16px !important;
  }

  .card {
    box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  }

  .link-list {
    border: 0 !important;
    background: transparent !important;
  }

  .link-item {
    border: 1px solid var(--kid-border) !important;
    background: #fff;
    margin: 12px 0;
  }

  .footer, .footer-inner {
    text-align: center;
    justify-content: center;
  }
}