/* ==========================================================================
   vorlagen.css — Vorlagen-Hub (/vorlagen) und Vorlagen-Landingpages
   --------------------------------------------------------------------------
   Ergänzt styles/site.css und folgt dessen Kompositionslogik:
   Sektionen alternieren soft / white, mit --deep für den Abschlussmoment.

   Alle zwölf Detailseiten haben denselben Aufbau: Hero mit Blattvorschau,
   eine Textsektion, die App-Sektion mit dem Blatt als Artefakt, FAQ. Erzeugt
   werden sie aus tools/build-template-pages.mjs.

   Hier standen einmal nachgebaute Blattzeilen, eine annotierte Anatomie und
   ein Papier-gegen-App-Vergleich, alle nur auf der Wochenplan-Seite. Sie sahen
   selbstgebaut aus und machten diese eine Seite zum Fremdkörper neben den
   anderen elf. Das Blatt selbst als Bild ist das bessere Artefakt: es zeigt
   genau das Druckergebnis und braucht keine Pflege.

   Breakpoints wie im Rest der Site: 980 / 720 / 480 px.
   ========================================================================== */

/* --- Hero: Copy links, Blattvorschau rechts ------------------------------
   Ohne Breadcrumb: die Site hat sonst keinen, über der Überschrift wirkte er
   wie ein Fremdkörper. Der Pfad in den Suchergebnissen kommt aus dem
   BreadcrumbList-Schema im Head, nicht aus Markup.
   ------------------------------------------------------------------------ */

.tpl-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 72px;
  align-items: center;
}

/* Grid-Items schrumpfen sonst nicht unter ihren Inhalt: .tpl-preview enthält
   ein <img> mit width:100%, aber dessen intrinsische Breite (1239px) zählt
   für die Spurbreite trotzdem als Minimum, solange min-width nicht explizit
   auf 0 steht. Auf schmalen Telefonen ragt das Bild sonst über den Viewport
   hinaus, obwohl es optisch "passt". */
.tpl-hero > * { min-width: 0; }

@media (max-width: 980px) {
  .tpl-hero { grid-template-columns: 1fr; gap: 48px; }
}

.tpl-hero__copy .h-section { margin-bottom: 20px; }

.tpl-dl {
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
}

.tpl-dl__meta {
  margin: 16px 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 14px;
  color: var(--fc-text-muted);
}

.tpl-dl__meta span { display: inline-flex; align-items: center; gap: 6px; }

.tpl-dl__meta .material-symbols-rounded {
  font-size: 18px;
  color: var(--fc-primary);
}

/* --- Blattvorschau ------------------------------------------------------- */
/* Bild kommt aus dem PDF (tools/generate-templates.mjs), zeigt also exakt
   das Druckergebnis. */

.tpl-preview {
  display: block;
  position: relative;
  border-radius: var(--fc-radius-sm);
  overflow: hidden;
  background: #fff;
  box-shadow: 0 18px 60px -18px rgba(0, 0, 0, 0.38);
  transform: rotate(-1.1deg);
  transition: transform var(--fc-dur-base) var(--fc-ease-out);
}

.tpl-preview:hover { transform: rotate(0deg) translateY(-4px); }

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

.tpl-preview__tag {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 26px 18px 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.62));
}

@media (prefers-reduced-motion: reduce) {
  .tpl-preview,
  .tpl-preview:hover { transform: none; transition: none; }
}

/* --- Häkchenliste (Site-Muster, vgl. .privacy__list) -------------------- */

.tpl-list {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
}

.tpl-list li {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  font-size: 16px;
  line-height: 1.55;
  color: var(--fc-text);
}

.tpl-list .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 21px;
  color: var(--fc-primary);
  margin-top: 1px;
}

.tpl-list b {
  color: var(--fc-text-strong);
  font-weight: 600;
}

/* Auf dunklem Grund */
.section--deep .tpl-list li { color: rgba(255, 255, 255, 0.8); }
.section--deep .tpl-list b { color: #fff; }
.section--deep .tpl-list .material-symbols-rounded { color: var(--fc-primary); }

/* --- Zwei-Spalten-Sektion (Artefakt / Copy) ----------------------------- */

.tpl-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

/* Gleicher Grund wie bei .tpl-hero: .paper-shot enthält ein <img> mit
   width:100%, dessen intrinsische Breite sonst die Spur nach unten sperrt. */
.tpl-split > * { min-width: 0; }

@media (max-width: 980px) {
  .tpl-split { grid-template-columns: 1fr; gap: 44px; }
  /* Artefakt zuerst, Copy danach — auf schmalem Schirm liest sich das besser */
  .tpl-split__art { order: -1; }
}

/* ==========================================================================
   Galerie: der Vorlagen-Katalog auf /vorlagen
   --------------------------------------------------------------------------
   Die Seite ist ein Katalog, keine Landingpage. Deshalb tragen die Kacheln sie:
   gleichförmig, mit dem VOLLSTÄNDIGEN Blatt als Thumbnail, damit man Formen
   vergleichen und eines auswählen kann.

   Die Matte hinter dem Blatt ist nach Feature-Familie getönt — dieselbe
   Zuordnung wie die Pfeiler auf der Startseite und die Akzente der Druck-
   vorlagen. Die Farbe sagt also, zu welchem Teil der App eine Vorlage gehört,
   sie dekoriert nicht.
   ========================================================================== */

.gallery {
  margin-top: 56px;
  display: grid;
  /* min(298px, 100%) statt 298px: sonst erzwingt die Mindestbreite auf den
     schmalsten Telefonen (< 338px Viewport) eine Spalte, die breiter als der
     Bildschirm ist, und die Seite bekommt horizontales Scrollen. */
  grid-template-columns: repeat(auto-fill, minmax(min(298px, 100%), 1fr));
  gap: 30px;
}

@media (max-width: 480px) {
  .gallery { gap: 20px; }
}

.card {
  --tile-accent: var(--fc-primary);
  --tile-mat: var(--fc-primary-tint);

  display: flex;
  flex-direction: column;
  background: var(--fc-surface-elevated);
  border: 1px solid var(--fc-border-subtle);
  border-radius: var(--fc-radius-lg);
  overflow: hidden;
  text-decoration: none;
  box-shadow: var(--fc-shadow-card);
  transition: box-shadow var(--fc-dur-base) var(--fc-ease-out),
              transform var(--fc-dur-base) var(--fc-ease-out);
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 44px -16px rgba(0, 0, 0, 0.3);
}

.card:focus-visible {
  outline: 3px solid var(--tile-accent);
  outline-offset: 3px;
}

/* Farbfamilien — identisch zu den Akzenten der Druckvorlagen (styles/print.css).
   Für die vier Listentypen stammen sie aus der App (ui_list_colors.dart);
   packing ist gegenüber der App abgedunkelt, weil #FF9800 als Text auf hellem
   Grund unter 3:1 Kontrast bleibt. */
.card--shopping { --tile-accent: #119589; --tile-mat: #E8F5F3; }
.card--task     { --tile-accent: #1565C0; --tile-mat: #E9F0FA; }
.card--packing  { --tile-accent: #CA6702; --tile-mat: #FBF1E7; }
.card--general  { --tile-accent: #7C3AED; --tile-mat: #F2EDFE; }
.card--rezepte  { --tile-accent: #4F7F5C; --tile-mat: #EDF3EE; }
.card--kontakte { --tile-accent: #A6316B; --tile-mat: #FBECF3; }
/* Rot nur für das Notfallblatt — dort ist die Farbe eine Warnung, keine
   Bereichszuordnung. Siehe Kommentar in styles/print.css. */
.card--notfall  { --tile-accent: #9B2226; --tile-mat: #FBECEC; }

/* --- Matte mit vollständigem Blatt -------------------------------------- */

.card__mat {
  position: relative;
  aspect-ratio: 5 / 4;
  background: var(--tile-mat);
  overflow: hidden;
}

/* Das Blatt ist absolut positioniert, NICHT als Grid-Item mit Prozenthöhe.
   Sonst bemisst sich die Grid-Zeile nach dem Bild und das Bild nach der Zeile —
   die Prozenthöhe wird zirkulär, Chrome rechnet sie gegen die Breite und das
   Blatt ragt unten aus der Matte heraus. Absolut positioniert bezieht sich
   height auf die per aspect-ratio definierte Mattenhöhe.
   width: auto leitet die Breite aus dem Seitenverhältnis ab — die Box umfasst
   damit exakt das Blatt, und der Schatten liegt an seiner Kante. */
.card__mat img {
  position: absolute;
  top: 9%;
  left: 50%;
  height: 82%;
  width: auto;
  transform: translateX(-50%);
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 8px 22px -6px rgba(0, 0, 0, 0.28),
              0 1px 0 rgba(0, 0, 0, 0.06);
  transition: transform var(--fc-dur-base) var(--fc-ease-out),
              box-shadow var(--fc-dur-base) var(--fc-ease-out);
}

/* Beim Überfahren hebt sich das Blatt von der Matte, als nähme man es
   vom Stapel. Ein Effekt, nicht drei. */
.card:hover .card__mat img {
  transform: translateX(-50%) translateY(-6px) rotate(-1.2deg);
  box-shadow: 0 16px 34px -8px rgba(0, 0, 0, 0.34);
}

/* Format-Marke unten rechts auf der Matte */
.card__fmt {
  position: absolute;
  right: 12px;
  bottom: 11px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tile-accent);
  opacity: 0.65;
}

/* --- Kachelkörper -------------------------------------------------------- */

.card__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: 22px 24px 20px;
  border-top: 1px solid var(--fc-border-subtle);
}

.card__kicker {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--tile-accent);
}

/* Titelzeile mit Pfeil rechts. Der Pfeil ersetzt eine eigene
   „Ansehen"-Fußzeile: die ganze Kachel ist ohnehin ein Link, hat einen
   Zeigefinger und hebt beim Überfahren das Blatt an — eine vierte
   Aufforderung wäre Füllmaterial. */
.card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  margin: 0 0 8px;
}

.card__head h3 {
  font-family: var(--fc-font-display);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.018em;
  color: var(--fc-text-strong);
  margin: 0;
}

.card__go {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--tile-accent);
  transition: transform var(--fc-dur-base) var(--fc-ease-out);
}

.card:hover .card__go { transform: translateX(4px); }

.card__body p {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fc-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .card:hover,
  .card:hover .card__foot .material-symbols-rounded { transform: none; transition: none; }

  /* Beim Blatt darf translateX(-50%) nicht wegfallen — das ist Positionierung,
     keine Animation. Nur die Bewegung wird entfernt. */
  .card__mat img,
  .card:hover .card__mat img { transform: translateX(-50%); transition: none; }
}

/* --- Mobile: Listen-Kacheln statt große Karten untereinander -------------
   Unter 640px zeigt die Galerie ohnehin nur eine Spalte (das Grid oben lässt
   ab hier keine zweite mehr zu). Zwölf große, hohe Karten hintereinander
   bedeuten viel Scrollen, bevor man alle Vorlagen gesehen hat. Ein kleineres
   Vorschaubild neben statt über dem Text lässt sich schneller durchscannen —
   das Blatt selbst bleibt zwar kleiner, dient hier aber nur der groben
   Wiedererkennung (Farbe, Form), die eigentliche Unterscheidung übernehmen
   Titel und Beschreibungstext daneben.
   Muss NACH der Basisdefinition von .card/.card__mat/.card__body stehen —
   sonst gewinnt bei gleicher Spezifität die spätere, ungescopte Regel. */
@media (max-width: 640px) {
  .gallery {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .card { flex-direction: row; }

  /* Die große Karte zeigt das Blatt freigestellt auf einer farbigen Matte,
     mittig mit Luft auf beiden Seiten — bei 100px Breite wirkt genau dieses
     Freistellen nur noch verrutscht, nicht mehr wie ein Foto eines Blatts.
     Die Zeile bekommt deshalb ein eigenes, einfacheres Bildregime: randlos,
     linksbündig, oben angeschnitten (dort sitzen Titel und Farbbalken des
     Blatts — der informativste Ausschnitt). */
  .card__mat {
    flex: 0 0 100px;
    width: 100px;
    aspect-ratio: auto;
    background: var(--tile-mat);
  }

  .card__mat img {
    position: absolute;
    inset: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    object-position: top;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    background: none;
  }

  /* Der "vom Stapel heben"-Effekt gehört zur freigestellten Matte — ohne sie
     ergibt eine Drehung/Anhebung hier keinen Sinn mehr. */
  .card:hover .card__mat img { transform: none; box-shadow: none; }

  /* "A4 · 1 Seite" ist auf einem 100px-Streifen kein hilfreiches Detail mehr,
     nur noch visuelles Rauschen. */
  .card__mat .card__fmt { display: none; }

  .card__body {
    padding: 14px 16px;
    border-top: 0;
    border-left: 1px solid var(--fc-border-subtle);
    justify-content: center;
    gap: 2px;
  }

  .card__kicker { margin-bottom: 4px; }
  .card__head { margin-bottom: 4px; }
  .card__head h3 { font-size: 16.5px; }
  .card__go { font-size: 18px; }

  /* Zwei Zeilen Kappe, damit unterschiedlich lange Beschreibungen nicht zu
     unterschiedlich hohen Zeilen führen — die Liste soll gleichmäßig wirken. */
  .card__body p {
    font-size: 13.5px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

/* --- Zeile unter der Galerie -------------------------------------------- */

.gallery-note {
  margin: 30px 0 0;
  font-size: 14.5px;
  color: var(--fc-text-muted);
  text-align: center;
}

/* Blattfoto in der App-Bridge der Detailseiten. Dort steht kein HTML-Nachbau
   der Zeile wie auf der Wochenplan-Seite, sondern das Blatt selbst.
   Es ist ein Link auf das PDF — wer unten angekommen ist, soll das Blatt von
   dort direkt laden können, ohne nach oben zu scrollen. */
.paper-shot {
  display: block;
  width: 100%;
  max-width: 340px;
  margin-top: 12px;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 18px 50px -14px rgba(0, 0, 0, 0.55);
  transition: transform var(--fc-dur-base) var(--fc-ease-out),
              box-shadow var(--fc-dur-base) var(--fc-ease-out);
}

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

.paper-shot:hover {
  transform: translateY(-5px);
  box-shadow: 0 26px 60px -14px rgba(0, 0, 0, 0.62);
}

.paper-shot:focus-visible {
  outline: 3px solid var(--fc-primary);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .paper-shot, .paper-shot:hover { transform: none; transition: none; }
}

/* Zusätzliche Download-Variante unter den Hero-Buttons. Absichtlich kein
   dritter Button: das Hero-Muster ist auf allen zwölf Detailseiten gleich, und
   die Variante ist die Ausnahme, nicht der Hauptweg. */
.tpl-variant {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--fc-divider);
  max-width: 30em;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--fc-text-muted);
}

.tpl-variant .material-symbols-rounded {
  flex: 0 0 auto;
  font-size: 19px;
  color: var(--fc-primary);
  margin-top: 1px;
}

.tpl-variant a {
  color: var(--fc-primary);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.tpl-variant a:hover { border-bottom-color: currentColor; }