/* Auftrag 283 (Fenster IN1): kleiner Info-Bereich. Erklärtexte sind zu, das Material steht oben; «ⓘ Info» klappt den Text an Ort und Stelle auf. */
:root {
  --info-bereich-text: #1f4e79;
  --info-bereich-flaeche: #eaf2fb;
  --info-bereich-rand: #9dbcdc;
}
.info-bereich-zu { display: none !important; }
/* Der Besitzer darf seinen Kasten selbst mit hidden verbergen (Vorschau-Kästen); offen zeigt ihn der Knopf trotzdem. */
.info-bereich-offen[hidden] { display: block !important; }

/* Trefferfläche 44 x 44 px, sichtbar nur die kleine Marke; die negativen Ränder halten den Kopf gleich hoch. */
.info-bereich-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: -10px 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 400;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.info-bereich-knopf[hidden] { display: none; }
.info-bereich-knopf__marke {
  display: inline-block;
  padding: 0.2rem 0.5rem;
  border: 1px solid var(--info-bereich-rand);
  border-radius: 999px;
  background: var(--info-bereich-flaeche);
  color: var(--info-bereich-text);
  font-size: 0.8rem;
  white-space: nowrap;
}
.info-bereich-knopf:hover .info-bereich-knopf__marke,
.info-bereich-knopf[aria-expanded="true"] .info-bereich-knopf__marke { background: #d8e7f7; border-color: var(--info-bereich-text); }
.info-bereich-knopf:focus-visible { outline: none; }
.info-bereich-knopf:focus-visible .info-bereich-knopf__marke { outline: 2px solid var(--info-bereich-text); outline-offset: 2px; }

/* Im Kopf einer Karte: rechts, ohne die Zeile höher zu machen. */
.info-bereich-knopf--float { float: right; margin-left: 0.5rem; font-size: 1rem; }
.info-bereich-knopf--flex { margin-left: auto; flex: 0 0 auto; font-size: 1rem; }
/* Ohne Kopf: eine schmale eigene Zeile, rechtsbündig. */
.info-bereich-zeile { display: flex; justify-content: flex-end; min-height: 28px; align-items: center; }
.info-bereich-zeile[hidden] { display: none; }

/* Geöffneter Text behält seine Form; nur ein feiner Rand zeigt, dass er zum Knopf gehört. */
.info-bereich-offen { border-left: 3px solid var(--info-bereich-rand); padding-left: 0.6rem; }
.schueler-vorschau-hinweis.info-bereich-offen { border-left-width: 4px; padding-left: 0.85rem; }

/* Text aus InfoBereich.knopf(): neuer Code ohne eigenen Kasten. */
.info-bereich-text { margin: 0.2rem 0 0.5rem; font-size: 0.9rem; line-height: 1.4; }

/* Warnung in der Vorschau: bleibt sichtbar, ein Satz. */
.info-bereich-warnkurz { margin: 0 0 0.4rem; font-size: 0.8rem; color: #5b4300; }

@media print {
  .info-bereich-knopf, .info-bereich-zeile { display: none !important; }
}