/* ============================================================================
   Bausteine der Inhaltsseiten (lernguide.html, features.html, beispiele.html,
   faq.html).

   Kopf mit Foto und Verzeichnis, Karten mit Zeichen, Zahlenkacheln, eine
   Schrittfolge, der eine hervorgehobene Satz und das Schlussfeld. Alles, was
   auf mehr als einer Seite steht, steht hier einmal; die Seiten verlinken die
   Datei und tragen nur noch, was es wirklich nur dort gibt. Derselbe Gedanke
   wie bei yr-footer.css: eine zweite Kopie verliert irgendwann eine Regel,
   und man merkt es auf der falschen Seite.

   Die Tokens (--bg, --bg-card, --bg-soft, --rule, --accent, --accent-soft,
   --ink, --ink-2, --ink-3, --ink-inv, --display) setzt jede Seite selbst in
   ihrem :root. Farben und Radien sind die der Funktionen-Karten (.fv-karte),
   damit alte und neue Bausteine nebeneinander bestehen koennen.
   ========================================================================= */

/* ---- Kopf: Foto links mit Titel darueber, Verzeichnis rechts -------------
   Das Foto liegt hinter dem Titel, nicht daneben. Damit der Text darauf
   lesbar bleibt, laeuft eine weisse Aufhellung von oben nach unten: oben,
   wo Titel und Einleitung stehen, fast deckend, nach unten hin gibt sie das
   Bild frei. Der Text ist echter Text und nicht ins Bild gemalt: er skaliert,
   laesst sich markieren und vorlesen. */
.spalte .bs-kopf { display: grid; grid-template-columns: 1.5fr 1fr;
    background: var(--bg-card); border: 1px solid var(--rule);
    border-radius: 28px; overflow: hidden; margin: 6px 0 40px;
    box-shadow: 0 18px 40px -34px color-mix(in oklch, var(--ink) 55%, transparent); }
.spalte .bs-kopf-bild { grid-area: 1 / 1; position: relative; }
.spalte .bs-kopf-bild img { display: block; width: 100%; height: 100%; min-height: 470px;
    object-fit: cover; object-position: 50% 100%; }
.spalte .bs-kopf-bild::after { content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg,
      rgba(255,255,255,.97) 0%, rgba(255,255,255,.95) 48%,
      rgba(255,255,255,.72) 64%, rgba(255,255,255,.25) 82%, rgba(255,255,255,0) 100%); }
.spalte .bs-kopf-text { grid-area: 1 / 1; position: relative; z-index: 1;
    align-self: start; max-width: 520px; padding: clamp(24px, 4vw, 40px); }
.spalte .bs-kopf h1 { margin-bottom: 12px; }
.spalte .bs-kopf .lead { margin-bottom: 18px; }
/* Variante is-unten: Titel und Einleitung stehen unten, die Aufhellung
   laeuft von unten nach oben. Fuer Fotos, deren Motiv in der oberen Haelfte
   sitzt (Gesichter, Personen am Tisch): mit dem Text oben laege es unter der
   fast deckenden Aufhellung. Das Bild ist am unteren Rand verankert, ein
   etwas hoeherer Ausschnitt verliert also oben Decke oder Fenster, nicht
   unten das Motiv. Die Stufen entsprechen der Grundform, nur gespiegelt und
   kuerzer, damit Gesichter oberhalb der Mitte frei bleiben. */
.spalte .bs-kopf.is-unten .bs-kopf-text { align-self: end; }
.spalte .bs-kopf.is-unten .bs-kopf-bild::after {
    background: linear-gradient(0deg,
      rgba(255,255,255,.97) 0%, rgba(255,255,255,.95) 31%,
      rgba(255,255,255,.72) 40%, rgba(255,255,255,.25) 48%, rgba(255,255,255,0) 58%); }
.spalte .bs-meta { display: inline-flex; align-items: center; gap: 8px; margin: 0;
    font-size: 14px; color: var(--ink-3); text-align: left; hyphens: manual; }
.spalte .bs-meta svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* Variante is-ohne-bild: kein Foto. Links stehen Titel, Einleitung und was
   die Seite oben sonst braucht (die FAQ ihr Suchfeld), rechts wie immer das
   Verzeichnis. Ohne Bild gibt es keine Mindesthoehe von 470 px, die Hoehe
   kommt vom Verzeichnis; der Text sitzt darin mittig statt oben, sonst
   stuende er in einer leeren Flaeche. */
.spalte .bs-kopf.is-ohne-bild { grid-template-columns: 1.4fr 1fr; }
.spalte .bs-kopf.is-ohne-bild .bs-kopf-text { align-self: center; max-width: none;
    padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 40px); }

/* Das Verzeichnis nimmt die volle Hoehe der rechten Spalte und sitzt darin
   mittig; so wirkt es wie eine eigene Tafel neben dem Foto. */
.spalte .bs-inhalt { grid-area: 1 / 2; background: var(--bg-soft); padding: 36px 34px;
    display: flex; flex-direction: column; justify-content: center; }
.spalte .bs-inhalt h2 { margin: 0 0 14px; font-size: 13px; letter-spacing: .1em;
    text-transform: uppercase; color: var(--accent); }
.spalte .bs-inhalt ol { list-style: none; margin: 0; padding: 0; counter-reset: v; }
.spalte .bs-inhalt li { counter-increment: v; margin: 0; padding: 0; text-align: left;
    hyphens: manual; }
.spalte .bs-inhalt a { display: grid; grid-template-columns: 30px 1fr; gap: 12px;
    align-items: baseline; padding: 14px 0; color: var(--ink); text-decoration: none;
    font-size: 16px; line-height: 1.4; border-top: 1px solid var(--rule); }
.spalte .bs-inhalt li:first-child a { border-top: 0; }
.spalte .bs-inhalt a::before { content: counter(v, decimal-leading-zero);
    font-family: var(--display); font-weight: 800; font-size: 15px; color: var(--accent);
    font-variant-numeric: tabular-nums; }
.spalte .bs-inhalt a:hover { color: var(--accent); }
/* Lange Verzeichnisse (die Funktionen-Seite hat neun Abschnitte) bekommen
   engere Zeilen, sonst wird die Tafel hoeher als das Foto und zieht es mit. */
.spalte .bs-inhalt.is-lang { padding: 28px 30px; }
.spalte .bs-inhalt.is-lang a { padding: 9px 0; font-size: 15px; }

/* ---- Karten mit Zeichen --------------------------------------------------- */
.spalte .bs-raster-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 18px 0; }
.spalte .bs-raster-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin: 18px 0; }
.spalte .bs-karte { position: relative; background: var(--bg-card); border: 1px solid var(--rule);
    border-radius: 18px; padding: 22px 22px 20px;
    box-shadow: 0 18px 40px -34px color-mix(in oklch, var(--ink) 55%, transparent); }
.spalte .bs-karte.is-breit { grid-column: 1 / -1; }
.spalte .bs-karte.is-kern { border-color: color-mix(in oklch, var(--accent) 35%, var(--rule)); }
.spalte .bs-nr { position: absolute; top: 18px; right: 20px; font-family: var(--display);
    font-weight: 800; font-size: 13px; color: var(--ink-3); font-variant-numeric: tabular-nums;
    letter-spacing: .04em; }
.spalte .bs-karte-kopf { display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
    padding-right: 36px; }
.spalte .bs-marke { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.spalte .bs-karte.is-kern .bs-marke { background: var(--accent); color: var(--ink-inv); }
.spalte .bs-marke svg { width: 22px; height: 22px; }
.spalte .bs-rolle { display: block; font-family: var(--display); font-weight: 800; font-size: 12px;
    letter-spacing: .08em; text-transform: uppercase; color: var(--accent); margin-bottom: 2px; }
.spalte .bs-karte h3 { margin: 0; font-size: 19px; letter-spacing: -0.01em; }
/* Linksbuendig, nicht Blocksatz: die Karte ist halb so breit wie die Spalte,
   und ab dort reisst der Satz nach der Messung in agb.html sichtbar auf. */
.spalte .bs-karte p { margin: 0 0 10px; color: var(--ink-2); font-size: 15px; line-height: 1.6;
    text-align: left; }
.spalte .bs-karte p:last-child { margin-bottom: 0; }

/* Steht ein Baustein am Ende eines Abschnitts, traegt der Abschnitt den
   Abstand, nicht der Baustein. */
.spalte .bs-raster-2:last-child, .spalte .bs-raster-3:last-child, .spalte .bs-liste:last-child,
.spalte .bs-zahlen:last-child, .spalte .bs-schritte:last-child { margin-bottom: 0; }

/* ---- Liste mit Zeichen: Zeilen in einer Karte ---------------------------- */
.spalte .bs-liste { margin: 18px 0; padding: 6px 22px; }
.spalte .bs-liste > div { display: grid; grid-template-columns: 36px 180px 1fr; column-gap: 16px;
    align-items: start; padding: 16px 0; border-top: 1px solid var(--rule); }
.spalte .bs-liste > div:first-child { border-top: 0; }
.spalte .bs-liste dt, .spalte .bs-liste dd { margin: 0; }
.spalte .bs-liste dt { font-family: var(--display); font-weight: 800; font-size: 15px;
    color: var(--ink); padding-top: 4px; }
.spalte .bs-liste dd { color: var(--ink-2); text-align: left; font-size: 15px; line-height: 1.6; }
.spalte .bs-liste .bs-zeichen { width: 32px; height: 32px; border-radius: 50%;
    background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; }
.spalte .bs-liste .bs-zeichen svg { width: 17px; height: 17px; }

/* ---- Zahlenkacheln: die Zahl ist die Aussage ----------------------------- */
.spalte .bs-zahlen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px;
    margin: 18px 0; }
.spalte .bs-zahl { background: var(--bg-card); border: 1px solid var(--rule); border-radius: 18px;
    padding: 22px 20px 20px;
    box-shadow: 0 18px 40px -34px color-mix(in oklch, var(--ink) 55%, transparent); }
.spalte .bs-zahl dt { margin: 0; font-family: var(--display); font-weight: 800; font-size: 36px;
    line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.spalte .bs-zahl dd { margin: 10px 0 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.55;
    text-align: left; }
.spalte .bs-zahl dd strong { display: block; font-family: var(--display); font-weight: 800;
    font-size: 16px; color: var(--ink); margin-bottom: 4px; }

/* ---- Schrittfolge: drei Stationen mit Linie dazwischen ------------------ */
.spalte .bs-schritte { list-style: none; margin: 18px 0; padding: 0; counter-reset: s;
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.spalte .bs-schritte li { counter-increment: s; position: relative; background: var(--bg-soft);
    border-radius: 18px; padding: 18px 20px 18px 66px; text-align: left; hyphens: manual; }
.spalte .bs-schritte li::before { content: counter(s, decimal-leading-zero); position: absolute;
    left: 18px; top: 18px; width: 34px; height: 34px; border-radius: 50%;
    background: var(--accent); color: var(--ink-inv); font-family: var(--display);
    font-weight: 800; font-size: 13px; display: grid; place-items: center; }
.spalte .bs-schritte strong { display: block; font-family: var(--display); font-weight: 800;
    font-size: 15.5px; color: var(--ink); margin-bottom: 3px; }
.spalte .bs-schritte span { color: var(--ink-2); font-size: 14.5px; line-height: 1.5; }

/* ---- Der eine Satz, auf den ein Abschnitt hinauslaeuft ------------------- */
.spalte .bs-these { background: var(--accent-soft); border-left: 4px solid var(--accent);
    border-radius: 6px 18px 18px 6px; padding: 18px 22px; margin: 18px 0 0; }
.spalte .bs-these p { margin: 0; font-family: var(--display); font-weight: 700;
    font-size: 18px; line-height: 1.45; color: var(--ink); text-align: left; hyphens: manual; }

/* ---- Schluss: Feld statt loser Knopf -------------------------------------- */
.spalte .bs-schluss { display: grid; grid-template-columns: 1fr auto; gap: 24px 40px;
    align-items: center; background: var(--accent); color: var(--ink-inv);
    border-radius: 28px; padding: clamp(24px, 4vw, 40px); margin: 32px 0 0; }
.spalte .bs-schluss h2 { margin: 0 0 10px; color: inherit; }
.spalte .bs-schluss p { margin: 0; color: inherit; opacity: .92; }
.spalte .bs-schluss-hinweis { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px;
    font-size: 14px; opacity: .8; text-align: left; hyphens: manual; }
.spalte .bs-schluss-hinweis svg { width: 18px; height: 18px; flex: 0 0 auto; margin-top: 2px; }
.spalte .bs-schluss-knoepfe { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
.spalte .bs-schluss .btn-primary { background: var(--ink-inv); color: var(--accent);
    white-space: nowrap; text-decoration: none; }
.spalte .bs-schluss .btn-primary:hover { background: var(--bg-soft); }
.spalte .bs-schluss .bs-nebenweg { text-align: center; color: inherit; font-size: 14px;
    opacity: .85; text-decoration: underline; text-underline-offset: 2px; }

/* ---- Schmale Geraete ------------------------------------------------------ */
@media (max-width: 900px) {
  .spalte .bs-zahlen { grid-template-columns: 1fr 1fr; }
  .spalte .bs-raster-3 { grid-template-columns: 1fr; gap: 14px; }
  .spalte .bs-schritte { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 760px) {
  /* Auf dem Telefon kein Text ueber dem Foto: das Bild wird ein Streifen
     oben, der Titel steht darunter auf Weiss, das Verzeichnis zuletzt. */
  /* Beide Varianten nennen, sonst gewinnt is-ohne-bild mit zwei Klassen
     gegen diese eine und behaelt seine zwei Spalten. */
  .spalte .bs-kopf, .spalte .bs-kopf.is-ohne-bild { grid-template-columns: 1fr; }
  .spalte .bs-kopf-bild { grid-area: auto; }
  .spalte .bs-kopf-bild img { min-height: 0; height: 200px; object-position: 50% 60%; }
  .spalte .bs-kopf.is-unten .bs-kopf-bild img { object-position: 50% 40%; }
  .spalte .bs-kopf-bild::after, .spalte .bs-kopf.is-unten .bs-kopf-bild::after {
    background: linear-gradient(180deg, rgba(255,255,255,0) 60%, var(--bg-card) 100%); }
  .spalte .bs-kopf-text, .spalte .bs-kopf.is-ohne-bild .bs-kopf-text {
    grid-area: auto; max-width: none; padding-top: 8px; }
  .spalte .bs-inhalt, .spalte .bs-inhalt.is-lang { grid-area: auto; padding: 24px; }
  .spalte .bs-inhalt a, .spalte .bs-inhalt.is-lang a { padding: 10px 0; font-size: 15px; }
  .spalte .bs-raster-2 { grid-template-columns: 1fr; gap: 14px; }
  .spalte .bs-liste { padding: 4px 16px; }
  .spalte .bs-liste > div { grid-template-columns: 32px 1fr; row-gap: 4px; }
  .spalte .bs-liste dd { grid-column: 2; }
  .spalte .bs-schluss { grid-template-columns: 1fr; }
  .spalte .bs-schluss-knoepfe { align-items: flex-start; }
}
@media (max-width: 560px) {
  .spalte .bs-zahlen { grid-template-columns: 1fr; }
}
@media print {
  .spalte .bs-kopf, .spalte .bs-karte, .spalte .bs-zahl, .spalte .bs-these, .spalte .bs-schluss {
    box-shadow: none; break-inside: avoid; page-break-inside: avoid; }
  .spalte .bs-kopf-bild, .spalte .bs-inhalt { display: none; }
  .spalte .bs-kopf-text { grid-area: auto; }
  .spalte .bs-schluss { background: transparent; color: inherit; border: 1pt solid #999; }
}