/* ============================================================
   Lena · Das Blatt der Auskunft
   ============================================================
   Wer "Erstelle mir eine Liste aller Schueler der Klasse
   BS EEG 26" tippt, will kein Suchergebnis, sondern ein Blatt
   -- etwas, das man ausdruckt, mitnimmt und abheftet.

   Deshalb sieht es aus wie Papier und nicht wie Oberflaeche:
   weisser Bogen, dunkle Tinte, eine Tabelle mit Kopfzeile.
   Darunter stehen die zwei Wege hinaus.

   ## Weisses Papier in einer dunklen Anwendung

   dunkel.css faerbt h1 bis h3 hell. Auf dem Bogen waeren sie
   damit fast unsichtbar -- derselbe Fehler ist in der
   Notizvorschau schon einmal passiert und fiel erst auf einem
   Bildschirmfoto auf. Deshalb steht die Tinte hier
   ausdruecklich, und test/browser_test.js misst sie nach.
   ============================================================ */

/* ------------------------------------------------------------
   Die Antwort im Hilfefeld
   ------------------------------------------------------------ */
/* Sie ist das Ergebnis, nicht eine Fussnote: Der Hinweis
   darunter ("Ohne Namen -- die Beteiligten erfassen Sie im
   Vorgang") trug bisher dieselbe Gestalt, und die Auskunft
   verschwand darin. */
.hilfe__auskunft {
  margin-top: .5rem;
  font-size: .9375rem;
  line-height: 1.45;
  color: var(--g-hell, #17223A);
}
.hilfe__auskunft + .hilfe__auskunft {
  margin-top: .375rem;
  font-size: .8125rem;
  color: var(--g-gedaempft, #5C6B84);
}

.ablatt {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}
.ablatt[hidden] { display: none; }

.ablatt__grund {
  position: absolute;
  inset: 0;
  background: rgba(4, 14, 34, .62);
  backdrop-filter: blur(2px);
}

.ablatt__karte {
  position: relative;
  width: min(48rem, 100%);
  max-height: 92dvh;
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.25rem 1.375rem 1.125rem;
  border: 1px solid var(--g-rand, #D5CEBE);
  border-radius: 16px;
  background: var(--g-glas, #fff);
  box-shadow: var(--g-schatten, 0 20px 60px rgba(0, 10, 30, .32));
}

/* Nur der Schliessen-Knopf steht hier. Der Titel steht auf dem
   Bogen -- zweimal dasselbe Wort untereinander sieht aus wie
   ein Fehler, und beim Drucken wird der Kopf ohnehin
   weggelassen. */
.ablatt__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  gap: 1rem;
  margin-bottom: -.375rem;
}
.ablatt__kopf h2 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
}
.ablatt__unter {
  margin: .125rem 0 0;
  font-size: .78125rem;
  color: var(--g-still, #5C6B84);
}

/* ------------------------------------------------------------
   Der Bogen
   ------------------------------------------------------------ */
.ablatt__bogen {
  flex: 1 1 auto;
  min-height: 6rem;
  max-height: 58dvh;
  overflow-y: auto;
  padding: 1.375rem 1.5rem;
  border: 1px solid var(--linie, #E6E1D6);
  border-radius: 10px;
  background: #fff;
  color: #1A2029;
  box-shadow: inset 0 1px 6px rgba(12, 20, 34, .06);
  font-size: .84375rem;
  line-height: 1.5;
}

/* Auf weissem Papier steht dunkle Tinte -- auch wenn die
   Oberflaeche ringsum dunkel ist. */
.ablatt__bogen h1,
.ablatt__bogen h2,
.ablatt__bogen p,
.ablatt__bogen th,
.ablatt__bogen td { color: #1A2029; }

.ablatt__bogen h1 {
  margin: 0 0 .1875rem;
  font-size: 1.1875rem;
  font-weight: 620;
}
.ablatt__bogenunter {
  margin: 0 0 1rem;
  padding-bottom: .625rem;
  border-bottom: 1px solid #E3E6EA;
  font-size: .75rem;
  color: #66707C;
}

.ablatt__tabelle {
  width: 100%;
  border-collapse: collapse;
}
.ablatt__tabelle th,
.ablatt__tabelle td {
  padding: .3125rem .5rem;
  border-bottom: 1px solid #ECEFF3;
  text-align: left;
  vertical-align: top;
}
.ablatt__tabelle th {
  border-bottom: 1px solid #C9CFD8;
  font-weight: 620;
  font-size: .78125rem;
}
/* Eine Nummernspalte ist schmal und bleibt es -- sonst nimmt
   sie einem Namen den Platz weg. */
.ablatt__tabelle td:first-child,
.ablatt__tabelle th:first-child { width: 2.5rem; color: #6B7280; }
.ablatt__tabelle tr:last-child td { border-bottom: 0; }

/* Eine Zeile, die sich aufschlagen lässt.

   Nur Zeiger und Fläche -- keine Farbe. Der Bogen ist weißes
   Papier, auch wenn ringsum alles dunkel ist (Begründung oben),
   und eine farbige Zeile darauf wäre der erste Riss in dieser
   Regel.

   Beim Drucken verschwindet die Hervorhebung: Auf Papier kann
   man nichts anklicken. */
.ablatt__zeile--auf { cursor: pointer; }
.ablatt__zeile--auf:hover td,
.ablatt__zeile--auf:focus-visible td { background: #F2F5F9; }
.ablatt__zeile--auf:focus-visible {
  outline: 2px solid #2F6FEB;
  outline-offset: -2px;
}
@media print {
  .ablatt__zeile--auf:hover td { background: transparent; }
}

.ablatt__leer {
  margin: .75rem 0;
  color: #66707C;
  font-style: italic;
}
.ablatt__fuss {
  margin: 1rem 0 0;
  padding-top: .625rem;
  border-top: 1px solid #ECEFF3;
  font-size: .71875rem;
  color: #66707C;
}

/* ------------------------------------------------------------
   Die Wege hinaus
   ------------------------------------------------------------ */
.ablatt__wege {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.ablatt__weg {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .0625rem;
  padding: .5rem .875rem;
  text-align: left;
}
.ablatt__wort { font-size: .84375rem; font-weight: 600; }
.ablatt__unterwort { font-size: .6875rem; opacity: .72; font-weight: 400; }

@media (max-width: 34rem) {
  .ablatt { padding: .5rem; }
  .ablatt__karte { padding: 1rem .875rem; max-height: 96dvh; }
  .ablatt__bogen { padding: 1rem .875rem; max-height: 62dvh; }
  .ablatt__wege > * { flex: 1 1 8rem; }
}

/* ------------------------------------------------------------
   Drucken
   ------------------------------------------------------------ */
/* Kein selbstgebautes PDF: "Als PDF sichern" steht in jedem
   Druckdialog, der Text bleibt auswaehlbar, und die
   Seitenzahlen stimmen. Dieselbe Entscheidung wie bei den
   Notizen.

   Gedruckt wird der Bogen, nicht das Fenster: Alles andere
   wird ausgeblendet, statt einzeln aufgezaehlt zu werden --
   eine Aufzaehlung vergisst beim naechsten neuen Kasten
   genau ihn. */
@media print {
  body.drucktblatt > * { display: none !important; }
  body.drucktblatt > .ablatt { display: block !important; position: static; padding: 0; }
  body.drucktblatt .ablatt__grund,
  body.drucktblatt .ablatt__kopf,
  body.drucktblatt .ablatt__wege,
  body.drucktblatt .ablatt__fehler { display: none !important; }
  body.drucktblatt .ablatt__karte {
    width: auto;
    max-height: none;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }
  body.drucktblatt .ablatt__bogen {
    max-height: none;
    overflow: visible;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-size: 10pt;
  }
  /* Eine Zeile gehoert nicht ueber zwei Seiten, und die
     Kopfzeile wiederholt sich -- sonst steht auf Seite zwei
     eine Spalte, ueber der nichts steht. */
  .ablatt__tabelle thead { display: table-header-group; }
  .ablatt__tabelle tr { break-inside: avoid; page-break-inside: avoid; }
}