/* Seiten außerhalb des Gesprächs: die Leiste oben für Mirko (rahmen/seite.php), der Inhalt darunter, die Bühne mit
   einer Karte in der Mitte (Anmeldung, Gäste, Ende, Fehler) und die Übersicht. */

@layer seiten {
  /* Leiste oben: Logo mit Wortmarke, die Bereiche, Abmelden; fest am Rand, der Inhalt läuft darunter durch */
  .kopf {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    gap: var(--a5);
    padding: var(--a3) max(var(--a6), env(safe-area-inset-right)) var(--a3) max(var(--a6), env(safe-area-inset-left));
    border-width: 0 0 1px;
    border-radius: 0;
  }
  .kopf-marke {
    display: flex;
    align-items: center;
    gap: var(--a4);
    text-decoration: none;
    & img { width: auto; height: 2.5rem; }
  }
  .kopf-wege {
    display: flex;
    gap: var(--a2);
    margin-right: auto;
    & a {
      display: flex;
      align-items: center;
      gap: 0.4rem;
      padding: 0.5rem 0.9rem;
      font: 500 var(--gr-15) / 1 var(--schrift-titel);
      color: var(--text-2);
      text-decoration: none;
      border-radius: var(--pille);
      &:hover { background: var(--tinte-flaeche); }
      &[aria-current="page"] { color: var(--akzent-text); background: var(--verlauf-akzent); box-shadow: var(--leuchten); }
    }
  }
  .inhalt {
    display: grid;
    gap: var(--a5);
    padding: var(--a6) max(var(--a6), env(safe-area-inset-right)) var(--a7) max(var(--a6), env(safe-area-inset-left));
  }

  /* Bühne: eine Karte mitten auf der Seite, darüber das Logo, darunter Impressum und Datenschutz */
  .buehne {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: var(--a5);
    min-height: 100dvh;
    padding: var(--a6) var(--a4);
  }
  .buehne-logo { width: min(18rem, 70vw); height: auto; }
  .buehne-karte {
    width: min(30rem, 100%);
    padding: var(--a6);
    animation: hereinkommen 480ms var(--kurve) both;
    & h1 { font-size: var(--gr-28); }
    & > p { color: var(--text-2); }
    & .knopf.gross { width: 100%; }
  }
  .fuss {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--a2) var(--a4);
    font-size: var(--gr-13);
    color: var(--text-leise);
    & a { color: inherit; }
  }

  /* Übersicht */
  .start-kopf h1 { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
  .start-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr));
    gap: var(--a5);
    & .karte { padding: var(--a6); }
  }
  .start-raum .reihe, .start-neu form { margin-top: var(--a2); }

  /* Wer gerade wartet: eine Karte je Besprechung, ganz klickbar */
  .wartet-hinweis { display: grid; gap: var(--a3); }
  .wartet-karte {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    text-decoration: none;
    border-color: var(--akzent);
    animation: hereinkommen 300ms var(--kurve) both;
    & > span:nth-child(2) { display: grid; }
    & strong { font: 600 var(--gr-18) / 1.25 var(--schrift-titel); }
    & small { color: var(--text-leise); }
  }

  /* Liste der Besprechungen: Zeichen, Name mit Link darunter, Knöpfe rechts */
  .liste-besprechungen {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
    & li { display: flex; align-items: center; gap: var(--a3); padding: var(--a3) 0; border-top: 1px solid var(--linie); }
    & li:first-child { border-top: 0; }
  }
  .liste-name {
    display: grid;
    flex: 1;
    min-width: 0;
    & strong { font: 500 var(--gr-16) / 1.3 var(--schrift-titel); }
    & small { overflow: hidden; font-size: var(--gr-13); color: var(--text-leise); white-space: nowrap; text-overflow: ellipsis; }
  }

  @media (max-width: 40rem) {
    .kopf { gap: var(--a3); padding-inline: var(--a4); }
    .kopf .wortmarke, .kopf-wege span, .kopf form span { display: none; }
    .kopf-marke img { height: 2rem; }
    .inhalt { padding: var(--a5) var(--a4) var(--a6); }
    .start-raster .karte, .buehne-karte { padding: var(--a5); }
  }
}