/* ====================================================================
   Die Fallseite · eine Musterfassung, vorgestellt wie beim Vorbild
   --------------------------------------------------------------------
   Links die Spalte mit Name, Beschreibung und den weiteren
   Entwürfen, rechts die Fassung selbst in einem klebenden Rahmen.
   Gerollt wird IM Rahmen · die Seite außen bleibt kurz.

   Läuft zusätzlich zu style.css (Token, Kopfleiste, Chips, Knöpfe,
   Fussblock kommen von dort). Eigene Klassenfamilie "fallblatt",
   weil style.css die Namen .fall und .fall-satz schon für die
   Fallkarten der Startseite vergibt.
   ==================================================================== */

/* Die Fallseite braucht die Höhe für den Rahmen · weniger Vorlauf
   als die übrigen Unterseiten. */
body.seite-fallblatt main { padding-top: clamp(5.25rem, 8vw, 6.5rem); }

/* -- Der Weg zurück ------------------------------------------------- */

.fallblatt-weg { margin-bottom: 1.4rem; }

.fallblatt-zurueck {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--grau);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 160ms ease, translate 200ms var(--zug);
}

.fallblatt-zurueck:hover {
  color: var(--tinte);
  translate: -0.2rem 0;
}

/* -- Die Teilung ----------------------------------------------------
   Links Info und darunter die weiteren Entwürfe, rechts der Rahmen
   über beide Reihen. Unter 64rem stapelt alles: Info, Rahmen,
   weitere Entwürfe · der Rahmen soll am Telefon direkt nach der
   Beschreibung kommen, nicht nach sechs Karten. */

.fallblatt-teilung {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr);
  grid-template-areas:
    "info schau"
    "weitere schau";
  gap: 2.25rem clamp(1.75rem, 3vw, 3rem);
  align-items: start;
}

/* -- Die linke Spalte ----------------------------------------------- */

.fallblatt-info {
  grid-area: info;
  display: grid;
  gap: 1.1rem;
  justify-items: start;
}

.fallblatt-name {
  margin: 0;
  font-size: clamp(2.1rem, 4.5vw, 3rem);
  font-weight: 420;
  letter-spacing: -0.02em;
  line-height: 1.02;
  text-wrap: balance;
}

.fallblatt-satz {
  margin: 0;
  color: var(--grau);
  line-height: 1.55;
}

.fallblatt-koennen {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.fallblatt-koennen span {
  display: inline-block;
  padding: 0.3rem 0.8rem;
  border: 1px solid rgb(21 21 21 / 0.16);
  border-radius: var(--ecke-pille);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--tinte);
}

/* Die Ehrlichkeit gehört auf jedes Blatt: Entwurf, kein Auftrag. */
.fallblatt-ehrlich {
  margin: 0;
  color: var(--grau);
  font-size: 0.875rem;
  line-height: 1.5;
}

/* -- Das Reiterpaar Website / Pflegebereich ------------------------- */

.fallblatt-reiter {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: var(--hell-2);
  border-radius: var(--ecke-pille);
}

.fallblatt-reiterknopf {
  display: inline-block;
  padding: 0.45rem 1.05rem;
  border-radius: var(--ecke-pille);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--grau);
  text-decoration: none;
  transition: color 160ms ease, background-color 200ms ease;
}

.fallblatt-reiterknopf:hover { color: var(--tinte); }

.fallblatt-reiterknopf--aktiv {
  background: var(--tinte);
  color: var(--hell-schrift);
}

.fallblatt-reiterknopf--aktiv:hover { color: var(--hell-schrift); }

.fallblatt-pflegehinweis {
  margin: 0;
  color: var(--grau);
  font-size: 0.875rem;
  line-height: 1.5;
  max-width: 30ch;
}

.fallblatt-fenster { margin-top: 0.25rem; }

/* -- Der Rahmen -----------------------------------------------------
   Eine kleine Bühne: dunkle Fläche mit Bühnenecke, darin die
   Fassung mit Kartenecke. Klebt beim Blättern · die linke Spalte
   darf länger sein als das Fenster, der Rahmen bleibt stehen.
   100svh statt 100dvh: Am Telefon rechnet svh die Browserleisten
   von Anfang an mit ein, nichts ragt unter sie. */

.fallblatt-schau {
  grid-area: schau;
  position: sticky;
  top: clamp(4.5rem, 7vw, 5.25rem);
  height: calc(100svh - clamp(5.5rem, 9vw, 6.75rem));
  background: var(--dunkel);
  border-radius: var(--ecke-buehne);
  padding: clamp(0.5rem, 1.2vw, 0.9rem);
}

.fallblatt-rahmen {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: calc(var(--ecke-buehne) - clamp(0.35rem, 0.9vw, 0.65rem));
  background: #ffffff;
}

/* -- Die weiteren Entwürfe ------------------------------------------ */

.fallblatt-weitere {
  grid-area: weitere;
  display: grid;
  gap: 0.6rem;
  align-content: start;
}

.fallblatt-label {
  margin: 0.75rem 0 0.2rem;
  font-family: "Fragment Mono", monospace;
  font-size: 0.8125rem;
  color: var(--grau);
}

.fallblatt-liste { display: grid; gap: 0.55rem; }

.fallblatt-mini {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.55rem 0.8rem;
  background: var(--karte);
  border: 1px solid rgb(21 21 21 / 0.08);
  border-radius: var(--ecke-karte);
  color: var(--tinte);
  text-decoration: none;
  transition: translate 200ms var(--zug), border-color 200ms ease;
}

.fallblatt-mini:hover {
  translate: 0 -2px;
  border-color: rgb(21 21 21 / 0.28);
}

.fallblatt-mini img {
  flex: none;
  width: 64px;
  height: 48px;
  object-fit: cover;
  object-position: top;
  border-radius: 4px;
  background: var(--hell-2);
}

.fallblatt-mini-text {
  display: grid;
  gap: 0.15rem;
  min-width: 0;
}

.fallblatt-mini-fach {
  font-size: 0.75rem;
  color: var(--grau);
}

.fallblatt-mini-text strong {
  font-size: 0.9375rem;
  font-weight: 520;
  letter-spacing: -0.01em;
}

.fallblatt-mini-pfeil {
  flex: none;
  margin-left: auto;
  color: var(--grau);
  transition: color 160ms ease, translate 200ms var(--zug);
}

.fallblatt-mini:hover .fallblatt-mini-pfeil {
  color: var(--akzent-text-hell);
  translate: 0.15rem 0;
}

/* -- Schmale Fenster ------------------------------------------------ */

@media (max-width: 63.9375rem) {
  .fallblatt-teilung {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "info"
      "schau"
      "weitere";
    gap: 1.75rem;
  }

  /* Im Stapel klebt nichts · der Rahmen bekommt eine feste, hohe
     Karte und rollt in sich. */
  .fallblatt-schau {
    position: static;
    height: 76svh;
  }
}

/* -- Druck ---------------------------------------------------------- */

@media print {
  .fallblatt-schau,
  .fallblatt-weitere,
  .fallblatt-reiter,
  .fallblatt-fenster,
  .fallblatt-weg { display: none; }
}