/* =====================================================================
   pflicht.css — IMPRESSUM UND DATENSCHUTZ, OHNE DAS SPIEL ZU VERLASSEN

   Sein Befund vom 21.09.: „Aktuell kommt man beim Klick auf Datenschutz
   und Impressum nicht mehr zum letzten Stand, sondern muss von vorne
   anfangen. Das ist sicherlich ärgerlich und absolut nicht gewollt."

   ⚠️⚠️⚠️ DIE SEITE SPEICHERT NICHTS — das ist seine Regel vom 15.09. und
   sie bleibt. Also darf ein Pflichtlink die Seite gar nicht erst
   VERLASSEN: der Text kommt in ein Blatt DARUEBER, das Spiel steht
   unberuehrt darunter und laeuft weiter, wo es stand.
   ⚠️ Die zwei Seiten gibt es unveraendert unter ihrer eigenen Adresse
   (`/impressum.html`, `/datenschutz.html`) — der Link bleibt ein echter
   Link, mit `href`, und ohne Skript fuehrt er wie immer dorthin. Eine
   Pflichtangabe, die nur mit JavaScript erreichbar ist, ist keine.
   ===================================================================== */

/* Der Vorhang. ⚠️ Er liegt ueber ALLEM — auch ueber den Pflichtzeilen
   selbst (95), dem Werkzeug in der Hand (9) und der Kapiteltafel. */
.pflicht {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: rgba(6, 8, 12, 0.82);
  backdrop-filter: blur(3px);
  padding: 24px;
  /* ⚠️ Der Systemzeiger ist im Spiel aus (`cursor: none`). Hier ist er
     wieder da, sonst liest man einen Text, ohne zu sehen, wo man klickt. */
  cursor: auto;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.pflicht.auf { opacity: 1; }

/* Das Blatt. Dieselben Farben und Abstaende wie die echten Seiten
   (`css/seite.css`) — es soll DIESELBE Seite sein, nur an anderer
   Stelle gezeigt. */
.pflicht-blatt {
  position: relative;
  width: min(48rem, 100%);
  max-height: 100%;
  margin: auto;
  background: #0b0d12;
  border: 1px solid #242b3a;
  border-radius: 14px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.7);
  padding: 28px clamp(20px, 4vw, 44px) 36px;
  color: #d7dbe4;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-y: auto;
  transform: translateY(14px);
  transition: transform 0.22s cubic-bezier(.2, .8, .3, 1);
}
.pflicht.auf .pflicht-blatt { transform: translateY(0); }

.pflicht-blatt h1 { font-size: 1.8rem; margin: 0 0 1.4rem; color: #fff; }
.pflicht-blatt h2 { font-size: 1.1rem; margin: 1.8rem 0 0.5rem; color: #d8a33c; }
.pflicht-blatt h3 { font-size: 1rem; margin: 1.2rem 0 0.4rem; color: #fff; }
.pflicht-blatt p, .pflicht-blatt ul { margin: 0 0 0.8rem; }
.pflicht-blatt ul { padding-left: 1.4rem; }
.pflicht-blatt a { color: #d8a33c; }
.pflicht-blatt a:hover { color: #f0bf5e; }
.pflicht-blatt code {
  background: #12161f;
  border: 1px solid #242b3a;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.9em;
}
/* Der „zurueck"-Link der echten Seite fuehrt hier nirgendwohin — im Blatt
   ist der Schliesser rechts oben der Weg zurueck. */
.pflicht-blatt .zurueck { display: none; }

/* ⚠️ EIN AUSGANG, DER AUSSIEHT WIE EINER. Ein Blatt ohne sichtbaren
   Schliesser ist eine Sackgasse — und die Taste Esc kennt nicht jeder. */
.pflicht-zu {
  position: sticky;
  top: 0;
  float: right;
  margin: -6px -8px 0 12px;
  width: 38px;
  height: 38px;
  border: 1px solid #242b3a;
  border-radius: 10px;
  background: #12161f;
  color: #d7dbe4;
  font: 600 20px/1 system-ui, sans-serif;
  cursor: pointer;
}
.pflicht-zu:hover { border-color: #d8a33c; color: #f0bf5e; }
.pflicht-zu:focus-visible { outline: 2px solid #d8a33c; outline-offset: 2px; }

/* Solange das Blatt offen ist, gehoert der Zeiger dem Text. ⚠️⚠️ Die
   Regel dagegen (`html.werkzeug-in-der-hand *`, maschine.css) traegt ein
   `!important` — dagegen hilft keine Spezifitaet, nur ein zweites.
   Ein Text, ueber dem man den Zeiger nicht sieht, ist nicht zu bedienen. */
:root.pflicht-auf .pflicht,
:root.pflicht-auf .pflicht * { cursor: auto !important; }
:root.pflicht-auf .pflicht a,
:root.pflicht-auf .pflicht button { cursor: pointer !important; }
/* Und das Fadenkreuz hat ueber einem Impressum nichts zu suchen. */
:root.pflicht-auf .fadenkreuz { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
  .pflicht, .pflicht-blatt { transition: none; }
}