/* Karte (Fizzy panel): abgesetzt vom Grund. Mittig für Tor, Anmeldung, Behalten, Willkommen,
   den Bildschirm davor. Eine Sache pro Bildschirm, ein Knopf. */
@layer bausteine {
  .karte, .blatt-karte, .zettel-form, .zettel, .lampe, .kachel { background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--rundung-gross); padding: 1.2rem 1.4rem; }
  .karte h1, .karte h2 { margin-top: 0; }
  .karte form { flex-direction: column; }
  .karte details { margin-top: 1rem; opacity: .8; }
  .karte summary { font-size: .9rem; }
  .karte details form { margin-top: .6rem; }
  .blatt-karte { max-width: 36rem; margin: 1.2rem auto; padding: 1rem 1rem 1.2rem; box-shadow: var(--schatten-klein); }
  .blatt-karte .profil-blatt { max-width: none; }
  /* Ein Feld, ein Knopf, mittig (Tor, Anmeldung, Behalten) */
  .einfeld, .behalten, .willkommen, .anmelden { max-width: 26rem; margin: 2.5rem auto; display: flex; flex-direction: column; gap: .8rem; }
  .einfeld { text-align: center; }
  .einfeld h1, .behalten h1, .willkommen h1 { margin: 0; font-size: var(--riesig); }
  .einfeld p, .behalten .tipp { margin: 0; }
  .einfeld p { opacity: .8; }
  .einfeld form, .behalten-form { flex-direction: column; gap: .6rem; align-items: stretch; }
  .einfeld input:where([type=text], [type=password], [type=email]) { font-size: 1.1rem; text-align: center; padding: .7rem .9rem; }
  .einfeld input[type=submit], .behalten-form input[type=submit], .willkommen .knopf { font-size: 1.05rem; padding: .7rem 1.4rem; border-radius: var(--rundung-pille); }
  .einfeld .fest { font-size: 1.1rem; font-weight: 600; }
  .einfeld details { margin-top: 1rem; opacity: .8; }
  .einfeld summary { font-size: .9rem; }
  .einfeld details form { margin-top: .6rem; }
  .anmelden { max-width: 30rem; gap: 1.2rem; }
  .anmelden .karte { padding: 1.4rem; }
  .start-form { flex-direction: column; gap: .5rem; }
  .hausordnung-zeile { display: flex; align-items: center; gap: .6rem; margin: .2rem 0 1rem; }
  .hausordnung-zeile .tipp { margin: 0; }
  .hausordnung-knopf { font-size: .85rem; padding: .3rem .8rem; }
  .willkommen dl { display: grid; grid-template-columns: auto 1fr; gap: .4rem 1rem; align-items: baseline; margin: 1rem 0; }
  .willkommen dt { opacity: .6; }
  .willkommen dd { margin: 0; font-family: var(--mono); font-size: 1.6rem; user-select: all; }
  .willkommen-weiter { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
  /* Der Bildschirm davor: Name, Satz, ein Knopf, nichts sonst */
  .davor { min-height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 1.2rem; padding: 1rem; }
  .davor h1 { margin: 0; font-size: var(--riesig); }
  .davor-satz { margin: 0; font-size: 1.1rem; opacity: .8; max-width: 24rem; }
  .davor form { display: block; }
  .davor-knopf { font-size: 1.15rem; padding: .8rem 2rem; border-radius: var(--rundung-pille); }
  .davor-klein { margin: .4rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem 1.4rem; font-size: .9rem; }
  .davor-klein a { color: inherit; opacity: .65; }
  .davor-klein a:hover { opacity: 1; }
  .plakat-ankunft { gap: 1rem; }
  .plakat-bild { width: 100%; max-width: 56rem; height: auto; border-radius: var(--rundung); box-shadow: 0 12px 40px rgb(0 0 0 / .45); }
  /* Die Haustür: zwei gleich große Türen */
  .tueren { max-width: 40rem; margin: 2rem auto; text-align: center; }
  .tueren-satz { opacity: .7; margin-bottom: 1.4rem; }
  .tueren-paar { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .tuer { display: flex; flex-direction: column; gap: .5rem; padding: 2rem 1.2rem; background: var(--flaeche); border: 1px solid var(--rand); border-radius: var(--rundung-gross); color: inherit; text-decoration: none; }
  .tuer:hover { border-color: var(--d-akzent); background: var(--akzent-hell); }
  .tuer strong { font-size: 1.5rem; }
  .tuer span { opacity: .7; font-size: .95rem; }
  /* Hausordnung als Seite */
  .hausordnung { max-width: 38rem; }
  .hausordnung .kern { font-size: 1.5rem; font-weight: 700; line-height: 1.3; margin: 1rem 0 1.4rem; }
  .hausordnung ol { padding-left: 1.2rem; }
  .hausordnung li { margin: .6rem 0; line-height: 1.45; }
}
@layer handy {
  @media (max-width: 48rem) {
    .einfeld, .behalten, .willkommen, .anmelden { margin: 1rem auto; }
    .tueren { margin: 1rem auto; }
    .tueren-paar { grid-template-columns: 1fr; }
    .tuer { padding: 1.4rem 1rem; }
    .blatt-karte { margin: .4rem; padding: .8rem; border-radius: var(--rundung); }
    .karte { padding: 1rem; }
  }
}