/* Die neun Vorlagen groß ansehen, auf der Seite „Individualisierbarkeit“.
   Ein Klick auf eine Vorlage öffnet sie als ganze Seite über allem, mit Name,
   Blättern und Schließen (js/vorlagen-ansicht.js). Das Verhalten kommt von
   der Lupe der alten Startseite, das Aussehen aus dem Glas der neuen.

   Farben, Knöpfe und Kurven kommen aus seite.css, hier entsteht kein eigener
   Farbwert. Ohne Skript ist jede Vorlage ein Verweis auf ihr großes Bild. */

/* ── Die Vorlage in der Liste ────────────────────────────── */
/* Unter dem Zeiger hebt sie sich und zeigt unten rechts eine Lupe. Dieselbe
   Lupe steht da, wenn die Tastatur sie erreicht. Bild und Lupe teilen sich
   eine Zelle eines Rasters statt position: relative, sonst malte der
   Schatten des Bilds über seine Unterschrift. */
.va-verweis {
  display: grid; border-radius: 6px; cursor: zoom-in;
  transition: transform 300ms var(--kurve);
}
.va-verweis > img, .va-verweis::before, .va-verweis::after { grid-area: 1 / 1; }
.va-verweis:hover { transform: translateY(-4px); }
.va-verweis::before, .va-verweis::after {
  content: ""; z-index: 1; align-self: end; justify-self: end; pointer-events: none;
  opacity: 0; transform: scale(0.85);
  transition: opacity 200ms var(--kurve), transform 300ms var(--kurve);
}
.va-verweis::before {
  width: 30px; height: 30px; margin: 0 8px 8px 0; border-radius: 50%;
  background: var(--flaeche); box-shadow: inset 0 0 0 1px var(--glas-kante);
}
.va-verweis::after {
  width: 16px; height: 16px; margin: 0 15px 15px 0; background: var(--text);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 16px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20 20M10.5 8v5M8 10.5h5'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.va-verweis:hover::before, .va-verweis:hover::after,
.va-verweis:focus-visible::before, .va-verweis:focus-visible::after { opacity: 1; transform: none; }
/* Ein Bildschirm zum Tippen kennt kein Darüberfahren. Dort bliebe die
   gehobene Vorlage nach dem Schließen einfach stehen. */
@media (hover: none) {
  .va-verweis:hover { transform: none; }
  .va-verweis::before, .va-verweis::after { display: none; }
}

/* ── Die Ansicht über allem ──────────────────────────────── */
/* Ein <dialog>, geöffnet mit showModal: Er liegt über allem und die Seite
   dahinter nimmt keine Eingaben an. Er füllt das Fenster selbst. ::backdrop
   bleibt leer, denn manche Browser geben ihm keine Variablen der Seite mit.
   Solange er offen ist, rollt die Seite nicht. Ihr Rollbalken behält dabei
   seinen Platz. */
:root.va-offen { overflow: hidden; scrollbar-gutter: stable; }

.va {
  position: fixed; inset: 0; width: auto; height: auto; max-width: none; max-height: none;
  margin: 0; border: 0; overflow: hidden; overscroll-behavior: contain;
  padding: max(16px, env(safe-area-inset-top, 0px)) max(24px, env(safe-area-inset-right, 0px))
           max(24px, env(safe-area-inset-bottom, 0px)) max(24px, env(safe-area-inset-left, 0px));
  color: var(--text); background: transparent;
}
.va[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); row-gap: 12px; }
.va::backdrop { background: transparent; }
.va:focus-visible { outline: none; }
/* Der Grund ist der des Menüs am Telefon, als eigene Schicht. So blendet
   beim Öffnen nur er auf, das Blatt bleibt deckend, während es aus der Liste
   heranwächst. */
.va-grund {
  position: absolute; inset: 0; z-index: -1;
  background: var(--menue-grund);
  -webkit-backdrop-filter: blur(40px) saturate(1.4); backdrop-filter: blur(40px) saturate(1.4);
}

/* Oben steht der Name mittig, das Kreuz rechts. Wer mit Maus und Tastatur
   kommt, liest links, welche Tasten gelten. Die Zeile ist so hoch wie der
   schwebende Kopf der Seite und steht an seiner Stelle. */
.va-kopf {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: 16px; height: 60px;
}
.va-hinweis {
  display: none; grid-column: 1; padding-left: 8px;
  font-size: 13px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.va-titel { grid-column: 2; font-size: 17px; font-weight: 600; letter-spacing: -0.005em; text-align: center; white-space: nowrap; }
.va-zahl { margin-left: 8px; font-size: 15px; font-weight: 400; color: var(--text-3); font-variant-numeric: tabular-nums; }
.va-zu { grid-column: 3; justify-self: end; }
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .va-hinweis { display: block; }
}

/* Die Knöpfe sind die Glasknöpfe der Seite, rund. Ihre Unschärfe fällt weg,
   denn hinter ihnen liegt nur der Grund der Ansicht. */
.va-rund { flex: none; width: 44px; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; }
.va-rund svg { width: 18px; height: 18px; }

/* Die Bühne misst sich selbst: Das Blatt ist so groß, wie es ganz hineinpasst,
   links und rechts mit Platz für die Pfeile direkt daneben. */
.va-buehne { min-height: 0; container-type: size; }
.va-raster {
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center; column-gap: 20px; height: 100%;
}
.va-zurueck { justify-self: end; }
.va-weiter { justify-self: start; }

/* Das Blatt in A4. Darunter liegt sofort die kleine Fassung aus der Liste,
   die große blendet darüber auf, sobald sie geladen ist. */
.va-blatt {
  position: relative;
  width: min(100cqw - 128px, 100cqh * 1588 / 2246);
  aspect-ratio: 1588 / 2246;
  border-radius: 8px; background: var(--flaeche);
  box-shadow: var(--schatten), 0 0 0 1px var(--linie);
  -webkit-user-select: none; user-select: none;
}
.va-blatt img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; border-radius: inherit; }
.va-gross { opacity: 0; }
.va-blatt.geladen .va-gross { opacity: 1; transition: opacity 240ms var(--kurve); }

/* Am Telefon steht das Blatt in voller Breite, die Pfeile darunter in
   Reichweite des Daumens. Kopf und Ränder wie der Kopf der Seite dort. */
@media (max-width: 640px) {
  .va {
    padding: max(10px, env(safe-area-inset-top, 0px)) max(12px, env(safe-area-inset-right, 0px))
             max(16px, env(safe-area-inset-bottom, 0px)) max(12px, env(safe-area-inset-left, 0px));
    row-gap: 8px;
  }
  .va-kopf { height: 54px; }
  .va-raster {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "blatt blatt" "zurueck weiter";
    align-content: center; row-gap: 12px;
  }
  .va-blatt { grid-area: blatt; justify-self: center; width: min(100cqw, (100cqh - 56px) * 1588 / 2246); }
  .va-zurueck { grid-area: zurueck; justify-self: start; }
  .va-weiter { grid-area: weiter; justify-self: end; }
}

@media (prefers-reduced-motion: reduce) {
  .va-verweis, .va-verweis::before, .va-verweis::after, .va-blatt.geladen .va-gross { transition: none; }
  .va-verweis:hover { transform: none; }
}
@media (prefers-reduced-transparency: reduce) {
  .va-grund { background: var(--grund); -webkit-backdrop-filter: none; backdrop-filter: none; }
}