/* ==========================================================================
   layout.css — Raster der Seite. Nur Position und Fluss, keine Optik.
   ========================================================================== */

.shell {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--shell-max);
  margin: 0 auto;
  padding: var(--shell-pad);
  display: grid;
  grid-template-rows:
    auto      /* Kopf: Uhr + Wetter */
    auto      /* Suche             */
    auto      /* Schnellzugriff    */
    minmax(0, 1fr) /* Karten       */
    auto;     /* Fußzeile          */
  gap: 22px;
  /* Parallaxe: Karten wandern der Maus entgegen. */
  transform: translate3d(var(--par-x), var(--par-y), 0);
}

/* --- Kopfzeile ------------------------------------------------------------ */
.shell__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap);
}

/* --- Suche ---------------------------------------------------------------- */
.shell__search { max-width: 760px; width: 100%; }

/* --- Schnellzugriff -------------------------------------------------------
   Zwei Ebenen: das Innenleben ordnet .ql in components.css.                  */
.shell__links { display: block; }

/* --- Kartenraster --------------------------------------------------------- */
.shell__grid {
  display: grid;
  grid-template-columns: 1.05fr 1.15fr 1fr;
  gap: var(--gap);
  min-height: 0;
}

.col {
  display: grid;
  gap: var(--gap);
  min-height: 0;
}

/* Spalte A: Kalender füllt die Höhe */
.col--a { grid-template-rows: minmax(0, 1fr); }

/* Spalte B: Fakt oben, darunter Stadt und Flagge nebeneinander */
.col--b { grid-template-rows: minmax(0, 1fr) auto; }
.col--b__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap);
  min-height: 0;
}

/* Spalte C: Depot oben, Nachrichten darunter */
.col--c { grid-template-rows: auto minmax(0, 1fr); }

/* --- Fußzeile ------------------------------------------------------------- */
.shell__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  min-height: 34px;
}

/* ==========================================================================
   Unter 1000px — eine Spalte.
   Reihenfolge: Uhr, Suche, Schnellzugriff, Kalender, Fakt, Stadt+Flagge,
   Depot, Nachrichten, Zitat.
   ========================================================================== */
@media (max-width: 1000px) {
  .shell {
    height: auto;
    min-height: 100%;
    grid-template-rows: none;
    padding: 28px;
    transform: none;               /* keine Parallaxe */
  }

  .shell__top {
    flex-direction: row;
    align-items: flex-start;
  }

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

  .col--a, .col--b, .col--c { grid-template-rows: none; }

  /* Stadt und Flagge bleiben nebeneinander */
  .col--b__pair { grid-template-columns: 1fr 1fr; }

  .shell__foot {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
}

/* ==========================================================================
   Unter 640px — Handy. Schriftgrößen bleiben, nur Abstände schrumpfen.
   ========================================================================== */
@media (max-width: 640px) {
  .shell {
    padding: 16px;
    gap: 16px;
  }

  .shell__top {
    flex-direction: column;
    gap: 14px;
  }

  /* Schnellzugriff als 3×3-Raster.
     minmax(0, 1fr) statt 1fr: sonst zieht der längste Beschriftungstext
     seine Spalte breiter und die Kacheln stehen ungleich.

     `.ql` davor, weil components.css nach dieser Datei geladen wird und die
     Grundregeln sonst mit gleicher Spezifität gewinnen würden. */
  .ql .ql__tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
  }
  /* Die Gruppenüberschrift steht auf dem Handy über den Kacheln, nicht daneben. */
  .ql .ql__group { display: block; }
  .ql .ql__group-title { display: block; width: auto; margin-bottom: 6px; }
  /* Die Werkzeuge rutschen unter die Kacheln statt daneben. */
  .ql .ql__top { flex-direction: column; align-items: stretch; }
  .ql .ql__tools { justify-content: flex-end; }
  .quicklink__label {
    overflow: hidden;
    text-overflow: ellipsis;
  }
}