/* ============================================================
   Die Anleitungsseite (public/anleitung.html)
   ------------------------------------------------------------
   Eine eigene Seite neben der App, kein Bildschirm darin. Sie erbt
   Tokens und Bauteile aus base.css und app.css - harte Kante, harter
   Schatten, Volltoene - und setzt hier nur, was sie zusaetzlich
   braucht: einen breiteren Rahmen als die App und einen Kasten, in dem
   ein sehr breites Bild geschoben werden kann.

   Warum ein eigenes #tut statt #app: #app ist auf 500 px begrenzt
   (app.css). Das ist fuer ein Handy in der Hand richtig und fuer eine
   Bildtafel im Querformat falsch.

   Die drei Ebenen-Regeln von #app gelten hier genauso und stehen
   deshalb noch einmal vollstaendig da - inklusive der Falle: die
   Regel fuer .bg muss die ID-Spezifitaet von "#tut > *" schlagen,
   sonst wird ihr position:fixed zu relative und die Flaeche
   kollabiert auf Hoehe 0 (siehe CLAUDE.md, "z-index").
   ============================================================ */

#tut {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  min-height: 100dvh;
  padding:
    calc(16px + env(safe-area-inset-top))
    16px
    calc(24px + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#tut > * { position: relative; z-index: 1; }

/* Geometrie absichtlich identisch zu base.css - ein "inset: 0" hier
   wuerde die feste Hoehe von dort aushebeln und das iOS-Nachruckeln
   zurueckholen (Issue #19). */
#tut > .bg {
  position: fixed;
  top: 0; left: 0; right: auto; bottom: auto;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
}

/* Auf dieser Seite bleibt vom Hintergrund nur das Raster: die drei
   Formen aus base.css liegen sonst hinter der durchsichtigen Tafel
   und laufen mitten durch die Screenshots. Auf der Startseite sind
   sie Schmuck, hier waeren sie Stoerung - die Tafel IST die Form
   dieser Seite. Das Raster bleibt, damit man sieht, dass man noch
   auf derselben Seite ist. */
#tut > .bg i { display: none; }

#tut > .topbar { position: sticky; top: calc(10px + env(safe-area-inset-top)); z-index: 5; }

/* Der Zurueck-Pfeil ist hier ein <a>, kein <button>: er verlaesst die
   Seite wirklich. Die Topbar-Optik kommt aus app.css, die Zeile hier
   nimmt dem Link nur das, was ein Link von sich aus mitbringt. */
#tut .topbar__btn {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}
#tut .topbar__btn:active { transform: translate(2px, 2px); }

.tut-h2 {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 0 10px;
}

.tut-list {
  margin: 0;
  padding-left: 20px;
  list-style-type: square;
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.95rem;
}
.tut-list li::marker { color: var(--ink); }

.tut-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}
/* .btn ist in app.css auf volle Breite gestellt - richtig fuer einen
   Knopf, der allein unter einem Formular steht, falsch fuer zwei
   nebeneinander. Auf schmalen Geraeten brechen sie trotzdem um und
   sind dann wieder so breit wie die Flaeche. */
.tut-actions .btn {
  width: auto;
  flex: 1 1 auto;
}

/* Ein <a> mit .btn: dieselbe Flaeche, aber ohne die Textausrichtung
   und Unterstreichung, die ein Link mitbringt. */
a.btn { text-decoration: none; }

/* Der Hinweis benutzt dasselbe Bauteil wie ueberall (.stepper__hint
   in app.css) und braucht hier nur seinen Abstand. Vorher stand hier
   color: var(--muted) - das ist eine FLAECHENfarbe, kein Textton, und
   der Satz war auf Papier praktisch unsichtbar. Lesbarer Text ist in
   diesem System --ink oder --text-dim auf --paper, nie etwas
   anderes. */
.tut-hint { margin: 10px 0 0; }

/* ---------------- Die Bildtafel ----------------
   Zwei Zustaende, umgeschaltet ueber eine Klasse (js/anleitung.js):

     ohne .is-zoom   das ganze Bild passt in die Breite - Ueberblick
     mit  .is-zoom   1:1 im Rahmen, geschoben wird darin

   Der Rahmen scrollt, nicht die Seite. Ein quer scrollender BODY
   wuerde die Topbar mitnehmen, und auf einem Handy verliert man dann
   den Weg zurueck. */
/* HIER STEHT DIE EINE ENTSCHEIDUNG DIESER SEITE.

   Die Tafel ist fuer WEISSEN Grund gezeichnet, es gibt sie aber auch
   ohne Hintergrund. Transparent auf dem gelben Raster zu zeigen ist
   der Versuch, sie in die Seite zu holen statt sie als fremdes Blatt
   daraufzulegen: die Screenshots bringen ihre eigene Flaeche mit, und
   die bunten Pfeile stehen auf Gelb genauso wie auf Weiss.

   Umschalten ist eine Zeile: background auf var(--paper) setzen und
   im HTML das Bild auf instagram-export-weiss.png zeigen lassen.
   Der Rahmen bleibt in beiden Faellen - eine Flaeche dieses Systems
   hat eine harte Kante und einen harten Schatten, auch eine
   durchsichtige. */
.tut-frame {
  border: var(--bw) solid var(--ink);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  background: transparent;
  overflow: auto;
  /* Fingerfreundliches Schieben in beide Richtungen, ohne dass der
     Browser daraus eine Seitennavigation macht. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.tut-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Die Breite ist in CSS-Pixeln gemeint, nicht in Bildpunkten: das
   Bild hat 6000 davon. Auf einem Handy mit dreifacher Pixeldichte
   stecken in 1500 px Breite also 4500 echte Bildpunkte - der kleine
   Fliesstext in den Screenshots bleibt damit scharf, statt weich
   hochgerechnet zu werden. Genau dafuer liegt die volle Aufloesung
   hier und keine verkleinerte Fassung. */
.tut-frame.is-zoom {
  max-height: 70vh;
}
.tut-frame.is-zoom .tut-img {
  width: 1500px;
  max-width: none;
}

@media (min-width: 900px) {
  .tut-frame.is-zoom .tut-img { width: 3000px; }
}