/* layout.css */
@layer layout {

  /* Global container – EINMALIG (Footer darf das nicht nochmal definieren) */
  .container{
    max-width:1600px;
    margin:0 auto;
    padding:1rem;
    padding-bottom:70px; /* Platz für fixen Footer */
  }

  @media (min-width:1800px){
    .container{
      max-width:1800px;
    }
  }

  /* Mobile: Display besser nutzen, kaum Ränder */
  @media (max-width:800px){
    .container{
      width:100%;
      max-width:none;
      padding:.5rem;
      padding-bottom:64px;
    }
  }

  /* Sehr kleine Smartphones */
  @media (max-width:420px){
    .container{
      padding:.35rem;
      padding-bottom:64px;
    }
  }

  /* Simple grid helpers */
  .grid{
    display:grid;
    gap:1rem;
  }

  .grid-3{
    grid-template-columns:repeat(3,1fr);
  }

  .grid-2{
    grid-template-columns:repeat(2,1fr);
  }

  @media (max-width:1100px){
    .grid-3{
      grid-template-columns:repeat(2,1fr);
    }
  }

  @media (max-width:800px){
    .grid,
    .users-grid{
      gap:.6rem;
    }

    .grid-3,
    .grid-2{
      grid-template-columns:1fr;
    }
  }

  @media (max-width:420px){
    .grid,
    .users-grid{
      gap:.45rem;
    }
  }

  /* Header layout (nur Struktur/Position) */
  .site-header{
    position:sticky;
    top:0;
    z-index:50;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:1rem;

    padding:0 1.25rem;
    height:58px;
  }

  .site-header .right-side{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    gap:.75rem;
    flex-wrap:nowrap;
    flex:0 0 auto;
    min-width:0;
  }

  .site-header .right-side > *{
    flex:0 0 auto;
  }

  /* Mobile Header kompakter */
  @media (max-width:800px){
    .site-header{
      height:54px;
      padding:0 .55rem;
      gap:.5rem;
    }

    .site-header .right-side{
      gap:.45rem;
    }
  }

  @media (max-width:420px){
    .site-header{
      height:52px;
      padding:0 .35rem;
      gap:.35rem;
    }

    .site-header .right-side{
      gap:.35rem;
    }
  }

  /* Footer layout (nur Struktur/Position) */
  .site-footer{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:48px;
    padding:0 12px;
    z-index:900;

    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    column-gap:12px;
  }

  .footer-left{
    grid-column:1;
    justify-self:start;
    white-space:nowrap;
  }

  .footer-center{
    display:none;
  }

  .footer-right{
    grid-column:3;
    justify-self:end;
    display:flex;
    align-items:center;
    gap:12px;
  }

  /* Mobile Footer kompakter */
  @media (max-width:800px){
    .site-footer{
      height:46px;
      padding:0 .5rem;
      column-gap:.5rem;
    }

    .footer-right{
      gap:.5rem;
    }
  }

  @media (max-width:420px){
    .site-footer{
      height:44px;
      padding:0 .35rem;
      column-gap:.35rem;
    }

    .footer-left{
      max-width:45vw;
      overflow:hidden;
      text-overflow:ellipsis;
    }

    .footer-right{
      gap:.35rem;
      max-width:55vw;
      overflow:hidden;
    }
  }

  /* Users layout */
  .users-wrap{
    padding:1rem 0;
  }

  .users-grid{
    display:grid;
    grid-template-columns:3fr 2fr;
    gap:1rem;
  }

  @media (max-width:1000px){
    .users-grid{
      grid-template-columns:1fr;
    }
  }

  @media (max-width:800px){
    .users-wrap{
      padding:.5rem 0;
    }
  }

  @media (max-width:420px){
    .users-wrap{
      padding:.35rem 0;
    }
  }
}